:root {
    --blue: #2563eb;
    --blue-dark: #1d4ed8;
    --blue-soft: #eff6ff;
    --cta: #e8f1ff;
    --text: #1a2332;
    --muted: #5b6b7c;
    --line: #e2e8f0;
    --bg: #ffffff;
    --bg-soft: #f8fafc;
    --radius: 16px;
    --shadow: 0 18px 40px rgba(26, 54, 93, 0.08);
    --max: 1120px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: clip;
}

body {
    margin: 0;
    color: var(--text);
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    background: var(--bg);
    line-height: 1.55;
}

a {
    color: inherit;
}

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

svg {
    display: block;
    flex-shrink: 0;
}

.wrap {
    width: min(var(--max), calc(100% - 40px));
    margin: 0 auto;
}

.maint-preview-bar {
    position: relative;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 16px;
    padding: 9px 16px;
    background: #1d4ed8;
    color: #fff;
    font-size: 0.84rem;
    text-align: center;
}

.maint-preview-bar a {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fff;
    border-bottom: none;
}

.header-access {
    position: relative;
    z-index: 1;
    padding: 7px 0;
    background: var(--bg-soft);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.header-access .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    min-height: 44px;
    min-width: 0;
}

.header-access-lead {
    display: flex;
    align-items: center;
    min-width: 0;
    justify-self: start;
    width: 100%;
}

.header-access-contact.header-access-btn {
    justify-self: center;
    gap: 6px;
    min-height: 32px;
    padding: 3px 12px 3px 10px;
    font-size: 0.82rem;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.header-access-contact-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    color: inherit;
}

.header-access-contact-ico svg {
    width: 16px;
    height: 16px;
}

.header-access-contact:hover,
.header-access-contact:focus-visible {
    text-decoration: none;
}

.header-ticker-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.header-ticker {
    --ticker-slot: 6s;
    position: relative;
    flex: 1;
    min-width: 0;
    height: 1.2em;
    overflow: hidden;
    color: var(--blue-dark);
    font-size: 0.82rem;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.header-ticker.is-slow {
    --ticker-slot: 8s;
}

.header-ticker.is-medium {
    --ticker-slot: 6s;
}

.header-ticker.is-fast {
    --ticker-slot: 4s;
}

.header-ticker-item {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    opacity: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: inherit;
    text-decoration: none;
    pointer-events: none;
    animation-name: header-ticker-n3;
    animation-duration: calc(var(--ticker-slot) * 3);
    animation-iteration-count: infinite;
}

.header-ticker-item:hover,
.header-ticker-item:focus-visible,
.header-ticker-item a:hover,
.header-ticker-item a:focus-visible {
    text-decoration: underline;
}

.header-ticker-item a {
    color: inherit;
    text-decoration: none;
}

.header-ticker.is-n2 .header-ticker-item {
    animation-name: header-ticker-n2;
    animation-duration: calc(var(--ticker-slot) * 2);
}

.header-ticker.is-n3 .header-ticker-item {
    animation-name: header-ticker-n3;
    animation-duration: calc(var(--ticker-slot) * 3);
}

.header-ticker.is-n4 .header-ticker-item {
    animation-name: header-ticker-n4;
    animation-duration: calc(var(--ticker-slot) * 4);
}

.header-ticker.is-n5 .header-ticker-item {
    animation-name: header-ticker-n5;
    animation-duration: calc(var(--ticker-slot) * 5);
}

.header-ticker.is-n6 .header-ticker-item {
    animation-name: header-ticker-n6;
    animation-duration: calc(var(--ticker-slot) * 6);
}

.header-ticker.is-n7 .header-ticker-item {
    animation-name: header-ticker-n7;
    animation-duration: calc(var(--ticker-slot) * 7);
}

.header-ticker.is-n8 .header-ticker-item {
    animation-name: header-ticker-n8;
    animation-duration: calc(var(--ticker-slot) * 8);
}

.header-ticker .header-ticker-item:nth-child(1) {
    animation-delay: 0s;
}

.header-ticker .header-ticker-item:nth-child(2) {
    animation-delay: calc(var(--ticker-slot) * 1);
}

.header-ticker .header-ticker-item:nth-child(3) {
    animation-delay: calc(var(--ticker-slot) * 2);
}

.header-ticker .header-ticker-item:nth-child(4) {
    animation-delay: calc(var(--ticker-slot) * 3);
}

.header-ticker .header-ticker-item:nth-child(5) {
    animation-delay: calc(var(--ticker-slot) * 4);
}

.header-ticker .header-ticker-item:nth-child(6) {
    animation-delay: calc(var(--ticker-slot) * 5);
}

.header-ticker .header-ticker-item:nth-child(7) {
    animation-delay: calc(var(--ticker-slot) * 6);
}

.header-ticker .header-ticker-item:nth-child(8) {
    animation-delay: calc(var(--ticker-slot) * 7);
}

.header-ticker.is-static {
    height: auto;
}

.header-ticker.is-static .header-ticker-item {
    position: static;
    animation: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

@keyframes header-ticker-n2 {
    0% { opacity: 0; transform: translateY(6px); pointer-events: none; z-index: 0; }
    5% { opacity: 1; transform: translateY(0); pointer-events: auto; z-index: 1; }
    39% { opacity: 1; transform: translateY(0); pointer-events: auto; z-index: 1; }
    50% { opacity: 0; transform: translateY(-6px); pointer-events: none; z-index: 0; }
    100% { opacity: 0; pointer-events: none; z-index: 0; }
}

@keyframes header-ticker-n3 {
    0% { opacity: 0; transform: translateY(6px); pointer-events: none; z-index: 0; }
    5% { opacity: 1; transform: translateY(0); pointer-events: auto; z-index: 1; }
    26% { opacity: 1; transform: translateY(0); pointer-events: auto; z-index: 1; }
    33.33% { opacity: 0; transform: translateY(-6px); pointer-events: none; z-index: 0; }
    100% { opacity: 0; pointer-events: none; z-index: 0; }
}

@keyframes header-ticker-n4 {
    0% { opacity: 0; transform: translateY(6px); pointer-events: none; z-index: 0; }
    3.75% { opacity: 1; transform: translateY(0); pointer-events: auto; z-index: 1; }
    19.5% { opacity: 1; transform: translateY(0); pointer-events: auto; z-index: 1; }
    25% { opacity: 0; transform: translateY(-6px); pointer-events: none; z-index: 0; }
    100% { opacity: 0; pointer-events: none; z-index: 0; }
}

@keyframes header-ticker-n5 {
    0% { opacity: 0; transform: translateY(6px); pointer-events: none; z-index: 0; }
    3% { opacity: 1; transform: translateY(0); pointer-events: auto; z-index: 1; }
    15.6% { opacity: 1; transform: translateY(0); pointer-events: auto; z-index: 1; }
    20% { opacity: 0; transform: translateY(-6px); pointer-events: none; z-index: 0; }
    100% { opacity: 0; pointer-events: none; z-index: 0; }
}

@keyframes header-ticker-n6 {
    0% { opacity: 0; transform: translateY(6px); pointer-events: none; z-index: 0; }
    2.5% { opacity: 1; transform: translateY(0); pointer-events: auto; z-index: 1; }
    13% { opacity: 1; transform: translateY(0); pointer-events: auto; z-index: 1; }
    16.67% { opacity: 0; transform: translateY(-6px); pointer-events: none; z-index: 0; }
    100% { opacity: 0; pointer-events: none; z-index: 0; }
}

@keyframes header-ticker-n7 {
    0% { opacity: 0; transform: translateY(6px); pointer-events: none; z-index: 0; }
    2.14% { opacity: 1; transform: translateY(0); pointer-events: auto; z-index: 1; }
    11.14% { opacity: 1; transform: translateY(0); pointer-events: auto; z-index: 1; }
    14.29% { opacity: 0; transform: translateY(-6px); pointer-events: none; z-index: 0; }
    100% { opacity: 0; pointer-events: none; z-index: 0; }
}

@keyframes header-ticker-n8 {
    0% { opacity: 0; transform: translateY(6px); pointer-events: none; z-index: 0; }
    1.88% { opacity: 1; transform: translateY(0); pointer-events: auto; z-index: 1; }
    9.75% { opacity: 1; transform: translateY(0); pointer-events: auto; z-index: 1; }
    12.5% { opacity: 0; transform: translateY(-6px); pointer-events: none; z-index: 0; }
    100% { opacity: 0; pointer-events: none; z-index: 0; }
}

.header-access-actions {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 8px;
    flex: 0 0 auto;
    min-width: 0;
}

.header-access-welcome {
    color: var(--text);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: min(16rem, 42vw);
}

.header-access-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 3px 10px 3px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #fff;
    color: var(--blue);
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(26, 54, 93, 0.06);
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.header-access-login svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

.header-access-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    color: var(--blue);
}

.header-access-chevron svg {
    width: 14px;
    height: 14px;
}

.header-access .account-menu .header-access-chevron svg {
    transform: rotate(90deg);
    transition: transform 0.18s ease;
}

.header-access .account-menu[open] .header-access-chevron svg {
    transform: rotate(-90deg);
}

.header-access-btn:hover,
.header-access-btn:focus-visible,
.header-access .account-menu[open] > summary.header-access-btn {
    background: var(--blue-soft);
    border-color: var(--blue);
    color: var(--blue-dark);
    box-shadow: 0 1px 4px rgba(37, 99, 235, 0.16);
}

.header-access-btn:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

.header-access .account-menu > summary.account-trigger {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 36px;
    padding: 3px 10px 3px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #cbd5e1;
    cursor: pointer;
}

.header-access .account-menu > summary.account-trigger:hover,
.header-access .account-menu > summary.account-trigger:focus-visible,
.header-access .account-menu[open] > summary.account-trigger {
    background: var(--blue-soft);
    border-color: var(--blue);
    color: var(--blue-dark);
    box-shadow: 0 1px 4px rgba(37, 99, 235, 0.16);
}

.header-access .account-menu .avatar {
    width: 28px;
    height: 28px;
    font-size: 0.68rem;
}

.header-access .account-menu > summary,
.header-access .account-menu .avatar {
    min-width: 28px;
    min-height: 28px;
}

.site-header .header-bar,
.site-header .wrap.header-bar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    min-height: 64px;
    min-width: 0;
    gap: 14px;
}

.logo {
    color: var(--blue);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    text-decoration: none;
    transition: color 0.18s ease, opacity 0.18s ease;
}

.site-header .logo {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 46%;
    overflow: hidden;
    color: var(--text);
    font-size: 1.5rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.site-header .logo-mark {
    color: var(--blue);
}

.logo:hover,
.logo:focus-visible {
    color: var(--blue-dark);
    opacity: 0.82;
}

.site-header .logo:hover .logo-mark,
.site-header .logo:focus-visible .logo-mark {
    color: var(--blue-dark);
}

.logo:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 4px;
    border-radius: 4px;
}

.site-header .header-bar > .nav,
.nav-desktop {
    flex: 1;
    display: flex;
    justify-content: center;
    align-self: stretch;
    align-items: center;
    flex-wrap: nowrap;
    min-width: 0;
    gap: 16px;
}

.nav-desktop a {
    flex: 0 0 auto;
    white-space: nowrap;
}

.nav-menu {
    display: none;
    position: static;
    flex: 0 0 auto;
}

.nav-menu > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    list-style: none;
    cursor: pointer;
    font-weight: 700;
    color: var(--blue);
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.nav-menu > summary::-webkit-details-marker,
.nav-menu > summary::marker {
    display: none;
    content: none;
}

.nav-menu > summary:hover,
.nav-menu > summary:focus-visible {
    background: var(--blue-soft);
    border-color: #93c5fd;
}

.nav-menu > summary:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

.nav-menu > summary:active {
    transform: scale(0.98);
}

.nav-menu[open] > summary {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.18);
}

.nav-menu[open] > summary:hover,
.nav-menu[open] > summary:focus-visible {
    background: var(--blue-dark);
    border-color: var(--blue-dark);
    color: #fff;
}

.nav-toggle {
    position: relative;
    display: block;
    width: 18px;
    height: 14px;
    flex: 0 0 18px;
}

.nav-toggle span {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: transform 0.18s ease, opacity 0.18s ease, top 0.18s ease;
}

.nav-toggle span:nth-child(1) {
    top: 0;
}

.nav-toggle span:nth-child(2) {
    top: 6px;
}

.nav-toggle span:nth-child(3) {
    top: 12px;
}

.nav-menu[open] .nav-toggle span:nth-child(1) {
    top: 6px;
    transform: rotate(45deg);
}

.nav-menu[open] .nav-toggle span:nth-child(2) {
    opacity: 0;
}

.nav-menu[open] .nav-toggle span:nth-child(3) {
    top: 6px;
    transform: rotate(-45deg);
}

.nav-menu-panel {
    display: none;
}

.nav-menu-actions,
.nav-menu-store {
    display: none;
}

.nav a {
    position: relative;
    color: #334155;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.18s ease;
}

.nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 2px;
    background: var(--blue);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: center;
    opacity: 0;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.nav a.is-active,
.nav a:hover,
.nav a:focus-visible {
    color: var(--blue);
}

.nav a.is-active::after,
.nav a:hover::after,
.nav a:focus-visible::after {
    transform: scaleX(1);
    opacity: 1;
}

.nav a:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 6px;
    border-radius: 4px;
}

.nav-desktop a.nav-shop {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 5px 10px;
    border-radius: 999px;
    background: var(--blue-soft);
    color: var(--blue);
    font-weight: 800;
    letter-spacing: -0.02em;
    box-shadow: inset 0 0 0 1px #bfdbfe;
}

.nav-desktop a.nav-shop svg {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
}

.nav-desktop a.nav-shop::after {
    content: none;
}

.nav-desktop a.nav-shop:hover,
.nav-desktop a.nav-shop:focus-visible,
.nav-desktop a.nav-shop.is-active {
    background: #dbeafe;
    color: var(--blue-dark);
    box-shadow: inset 0 0 0 1px #93c5fd;
}

.nav-desktop a.nav-shop:focus-visible {
    outline-offset: 3px;
}

.nav-desktop .nav-item.has-sub {
    position: static;
    flex: 0 0 auto;
    align-self: stretch;
    display: flex;
    align-items: center;
}

.nav-desktop .nav-item.has-sub::before {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(100% - 8px);
    z-index: 24;
    width: min(46rem, 100%);
    height: 28px;
    transform: translateX(-50%);
    pointer-events: none;
}

.nav-desktop .nav-item.has-sub:hover::before,
.nav-desktop .nav-item.has-sub:focus-within::before {
    pointer-events: auto;
}

.nav-desktop .nav-parent {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.nav-desktop .nav-caret {
    display: inline-flex;
    width: 12px;
    height: 12px;
    color: currentColor;
    opacity: 0.7;
}

.nav-desktop .nav-caret svg {
    width: 12px;
    height: 12px;
    transform: rotate(90deg);
}

.nav-desktop .nav-sub {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    z-index: 25;
    display: none;
    width: min(46rem, 100%);
    max-width: 100%;
    max-height: min(80vh, 40rem);
    padding: 12px 12px 8px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow);
    transform: translateX(-50%);
    overflow-x: hidden;
    overflow-y: auto;
}

.nav-desktop .nav-item.has-sub:hover .nav-sub,
.nav-desktop .nav-item.has-sub:focus-within .nav-sub {
    display: block;
}

.nav-desktop .nav-sub-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px 6px;
}

.nav-desktop .nav-sub a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 9px 10px;
    border-radius: 10px;
    color: var(--text);
    font-weight: 650;
    white-space: normal;
    line-height: 1.25;
}

.nav-desktop .nav-sub a svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: var(--blue);
}

.nav-desktop .nav-sub a::after {
    content: none;
}

.nav-desktop .nav-sub a:hover,
.nav-desktop .nav-sub a:focus-visible,
.nav-desktop .nav-sub a.is-active {
    background: var(--blue-soft);
    color: var(--blue);
}

.nav-desktop .nav-sub a.nav-sub-all {
    display: flex;
    margin-top: 8px;
    padding: 11px 12px 6px;
    border-top: 1px solid var(--line);
    border-radius: 0 0 10px 10px;
    color: var(--muted);
    font-weight: 700;
}

.nav-desktop .nav-sub a.nav-sub-all:hover,
.nav-desktop .nav-sub a.nav-sub-all:focus-visible,
.nav-desktop .nav-sub a.nav-sub-all.is-active {
    color: var(--blue);
}

.nav-desktop .nav-parent:focus-visible {
    outline-offset: 6px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 8px 16px;
    border-radius: 10px;
    background: var(--blue);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid transparent;
    line-height: 1.2;
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, color 0.18s ease;
}

.btn:hover,
.btn:focus-visible {
    background: var(--blue-dark);
}

.site-header .btn:hover,
.site-header .btn:focus-visible,
.site-footer .btn:hover,
.site-footer .btn:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.18);
}

.site-header .btn:focus-visible,
.site-footer .btn:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

input[type="file"] {
    width: 100%;
    padding: 8px;
    border: 1px dashed #bfdbfe;
    border-radius: 12px;
    background: var(--blue-soft);
    font: inherit;
    color: var(--muted);
    cursor: pointer;
}

input[type="file"]::file-selector-button {
    height: 40px;
    margin-right: 12px;
    padding: 0 16px;
    border: 0;
    border-radius: 10px;
    background: var(--blue);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

input[type="file"]::file-selector-button:hover {
    background: var(--blue-dark);
}

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    font: inherit;
    color: var(--text);
    line-height: 1.25;
    color-scheme: light;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input[type="date"]:hover,
input[type="time"]:hover,
input[type="datetime-local"]:hover,
input[type="month"]:hover,
input[type="week"]:hover {
    border-color: #bfdbfe;
}

input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="week"]:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.7;
    margin-left: 6px;
}

input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:hover::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator,
input[type="month"]:hover::-webkit-calendar-picker-indicator,
input[type="week"]:hover::-webkit-calendar-picker-indicator {
    opacity: 1;
}

.file-pick {
    width: 100%;
}

.btn:not(.header-cta) img,
.btn:not(.header-cta) svg,
.btn:not(.header-cta) i,
.btn:not(.header-cta) .icon,
.btn:not(.header-cta) .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    padding: 5px;
    border-radius: 7px;
    background: #fff;
    color: var(--blue);
    flex: 0 0 24px;
}

.btn:not(.header-cta) .icon img,
.btn:not(.header-cta) .icon svg,
.btn:not(.header-cta) .btn-icon img,
.btn:not(.header-cta) .btn-icon svg {
    width: 14px;
    height: 14px;
    min-width: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    flex: 0 0 14px;
}

.btn-ghost img,
.btn-ghost svg,
.btn-ghost i,
.btn-ghost .icon,
.btn-ghost .btn-icon {
    background: var(--blue-soft);
}

.header-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #fff;
    color: var(--blue);
    text-decoration: none;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.header-icon svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

.header-icon:hover,
.header-icon:focus-visible {
    background: var(--blue-soft);
    border-color: #93c5fd;
    color: var(--blue-dark);
}

.header-icon:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

.header-cta-store {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    min-width: 0;
    min-height: 40px;
    padding: 0 12px;
    font-size: 0.88rem;
}

.header-cta-store .header-cta-text {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: nowrap;
    margin: 0;
}

.header-cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--blue);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
}

.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
    min-width: 0;
}

.header-actions > * {
    flex-shrink: 0;
}

.header-cta-text {
    white-space: nowrap;
}

.header-cta svg,
.header-cta img,
.header-cta i {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    background: transparent;
}

.btn-ghost {
    background: #fff;
    color: var(--blue);
    border-color: #bfdbfe;
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
    background: var(--blue-soft);
}

button.btn {
    cursor: pointer;
    font: inherit;
    appearance: none;
    -webkit-appearance: none;
}

.btn-danger-ghost {
    color: #b42318;
    border-color: #fecaca;
}

.btn-danger-ghost:hover,
.btn-danger-ghost:focus-visible {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #912018;
}

.btn-danger-ghost:focus-visible {
    outline: 2px solid #f87171;
    outline-offset: 2px;
}

.account-menu {
    position: relative;
    flex: 0 0 auto;
}

.account-menu > summary {
    display: grid;
    place-items: center;
    min-width: 46px;
    min-height: 46px;
    padding: 0;
    border: 0;
    background: transparent;
    list-style: none;
    cursor: pointer;
    border-radius: 50%;
    transition: outline-color 0.18s ease;
}

.account-menu > summary::-webkit-details-marker,
.account-menu > summary::marker {
    display: none;
    content: none;
}

.account-menu .avatar {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.account-menu[open] > summary .avatar,
.account-menu > summary:hover .avatar,
.account-menu > summary:focus-visible .avatar {
    background: var(--blue-dark);
    box-shadow: 0 0 0 3px var(--blue-soft);
    transform: translateY(-1px);
}

.account-menu > summary:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

.account-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 24;
    min-width: 248px;
    max-width: min(320px, calc(100vw - 28px));
    max-height: min(72vh, calc(100dvh - 88px));
    overflow-x: hidden;
    overflow-y: auto;
    padding: 12px 10px 8px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.account-panel-who {
    padding: 2px 8px 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--line);
}

.account-panel strong {
    display: block;
    font-size: 0.95rem;
    letter-spacing: -0.02em;
}

.account-panel em {
    display: block;
    margin: 2px 0 0;
    color: var(--muted);
    font-style: normal;
    font-size: 0.82rem;
    word-break: break-all;
}

.account-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.account-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.account-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: inherit;
}

.account-ico svg {
    width: 18px;
    height: 18px;
}

.account-nav-sep {
    display: block;
    height: 1px;
    margin: 6px 8px;
    background: var(--line);
}

.account-nav .account-cms {
    color: var(--blue);
}

.account-nav .account-logout {
    color: #b42318;
}

.account-nav a:hover,
.account-nav a:focus-visible {
    background: var(--blue-soft);
    color: var(--blue);
}

.account-nav .account-logout:hover,
.account-nav .account-logout:focus-visible {
    background: #fef3f2;
    color: #912018;
}

.account-nav a:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 0;
}

@media (max-width: 1180px) and (min-width: 1025px) {
    .site-header .header-bar,
    .site-header .wrap.header-bar {
        gap: 10px;
    }

    .site-header .header-bar > .nav,
    .nav-desktop {
        gap: 12px;
    }

    .nav-desktop a {
        font-size: 0.92rem;
    }
}

@media (max-width: 1024px) {
    .site-header .header-bar,
    .site-header .wrap.header-bar {
        min-height: 60px;
        gap: 10px;
    }

    .site-header .header-bar > .nav,
    .nav-desktop {
        display: none;
    }

    .nav-menu {
        display: block;
    }

    .nav-menu[open] .nav-menu-panel {
        display: block;
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        z-index: 21;
        max-height: min(72vh, calc(100dvh - 72px));
        overflow-x: hidden;
        overflow-y: auto;
        padding: 12px 0 20px;
        background: #fff;
        border-top: 1px solid var(--line);
        box-shadow: 0 18px 32px rgba(26, 54, 93, 0.12);
    }

    .nav-drawer {
        display: flex;
        flex-direction: column;
        gap: 4px;
        width: min(var(--max), calc(100% - 40px));
        margin: 0 auto;
    }

    .nav-drawer a {
        display: flex;
        align-items: center;
        min-height: 48px;
        padding: 10px 14px;
        border-radius: 12px;
        font-size: 1.05rem;
    }

    .nav-drawer a::after {
        display: none;
    }

    .nav-drawer a.is-active,
    .nav-drawer a:hover,
    .nav-drawer a:focus-visible {
        background: var(--blue-soft);
        color: var(--blue);
    }

    .nav-drawer a.is-active {
        box-shadow: inset 3px 0 0 var(--blue);
    }

    .nav-drawer a.nav-shop {
        gap: 10px;
        background: var(--blue-soft);
        color: var(--blue);
        font-weight: 800;
        box-shadow: inset 0 0 0 1px #bfdbfe;
    }

    .nav-drawer a.nav-shop svg {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
    }

    .nav-drawer a.nav-shop.is-active,
    .nav-drawer a.nav-shop:hover,
    .nav-drawer a.nav-shop:focus-visible {
        background: #dbeafe;
        color: var(--blue-dark);
        box-shadow: inset 3px 0 0 var(--blue), inset 0 0 0 1px #93c5fd;
    }

    .nav-drawer .nav-item.has-sub {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .nav-drawer .nav-parent {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .nav-drawer details.nav-item.has-sub > summary.nav-parent {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        min-height: 48px;
        padding: 10px 14px;
        border-radius: 12px;
        font-size: 1.05rem;
        font-weight: inherit;
        color: inherit;
        list-style: none;
        cursor: pointer;
    }

    .nav-drawer details.nav-item.has-sub > summary.nav-parent::-webkit-details-marker,
    .nav-drawer details.nav-item.has-sub > summary.nav-parent::marker {
        display: none;
        content: none;
    }

    .nav-drawer details.nav-item.has-sub > summary.nav-parent:hover,
    .nav-drawer details.nav-item.has-sub > summary.nav-parent:focus-visible,
    .nav-drawer details.nav-item.has-sub > summary.nav-parent.is-active {
        background: var(--blue-soft);
        color: var(--blue);
    }

    .nav-drawer details.nav-item.has-sub > summary.nav-parent.is-active {
        box-shadow: inset 3px 0 0 var(--blue);
    }

    .nav-drawer details.nav-item.has-sub > summary.nav-parent:focus-visible {
        outline: 2px solid var(--blue);
        outline-offset: 2px;
    }

    .nav-drawer .nav-caret {
        display: inline-flex;
        width: 16px;
        height: 16px;
        color: var(--blue);
        flex: 0 0 16px;
    }

    .nav-drawer .nav-caret svg {
        width: 16px;
        height: 16px;
        transform: rotate(90deg);
        transition: transform 0.18s ease;
    }

    .nav-drawer details.nav-item.has-sub[open] > summary .nav-caret svg {
        transform: rotate(-90deg);
    }

    .nav-drawer .nav-sub {
        display: grid;
        gap: 2px;
        margin: 0 0 6px 10px;
        overflow: visible;
    }

    .nav-drawer .nav-sub-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .nav-drawer details.nav-item.has-sub:not([open]) > .nav-sub {
        display: none;
    }

    .nav-drawer .nav-sub a {
        gap: 10px;
        min-height: 42px;
        padding: 8px 12px;
        font-size: 0.98rem;
        font-weight: 650;
    }

    .nav-drawer .nav-sub a svg {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
        color: var(--blue);
    }

    .nav-drawer .nav-sub a.nav-sub-all {
        margin-top: 4px;
        padding-top: 12px;
        border-top: 1px solid var(--line);
        color: var(--muted);
        font-weight: 700;
    }

    .nav-drawer .nav-sub a.nav-sub-all:hover,
    .nav-drawer .nav-sub a.nav-sub-all:focus-visible,
    .nav-drawer .nav-sub a.nav-sub-all.is-active {
        color: var(--blue);
    }

    .nav-drawer a:focus-visible {
        outline-offset: 2px;
    }

    .nav-menu-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: min(var(--max), calc(100% - 40px));
        margin: 16px auto 0;
        padding-top: 16px;
        border-top: 1px solid var(--line);
    }

    .nav-menu-actions .account-nav a {
        min-height: 44px;
        padding: 0 12px;
        font-size: 1.02rem;
    }

    .nav-menu-actions .nav-menu-store {
        display: none;
        width: 100%;
        min-height: 48px;
    }

    .header-actions {
        gap: 8px;
    }

    .header-icon,
    .header-icon-cart {
        display: inline-flex;
    }

    .header-cta {
        min-height: 44px;
        padding: 0 14px;
        font-size: 0.92rem;
    }

    .header-cta-store {
        min-height: 40px;
        padding: 0 12px;
        font-size: 0.86rem;
        gap: 6px;
    }

    .account-menu > summary,
    .account-menu .avatar,
    .header-actions .client-notify-toggle {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    .header-access .account-menu > summary.account-trigger {
        width: auto;
        height: auto;
        min-width: 0;
        min-height: 36px;
    }

    .header-access .account-menu .avatar {
        width: 28px;
        height: 28px;
        min-width: 28px;
        min-height: 28px;
    }

    .account-panel {
        right: 0;
        min-width: min(280px, calc(100vw - 28px));
        max-width: calc(100vw - 28px);
    }

    .account-panel .account-nav a {
        min-height: 44px;
    }
}

@media (max-width: 1024px) and (min-width: 768px) {
    .nav-drawer .nav-sub {
        margin: 4px 0 10px;
        padding: 10px 10px 6px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 14px;
        box-shadow: var(--shadow);
        overflow: visible;
    }

    .nav-drawer .nav-sub-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2px 8px;
    }

    .nav-drawer .nav-sub a {
        min-height: 40px;
        padding: 8px 10px;
        white-space: normal;
        line-height: 1.25;
    }

    .nav-drawer .nav-sub a.nav-sub-all {
        margin-top: 6px;
        padding: 10px 12px 6px;
    }
}

@media (max-width: 767px) {
    .header-access {
        padding: 6px 0;
    }

    .header-access .wrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        min-height: 40px;
        gap: 8px 10px;
    }

    .header-access-lead {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

    .header-ticker {
        font-size: 0.74rem;
    }

    .header-access-contact.header-access-btn {
        flex: 0 0 auto;
        justify-self: auto;
        min-height: 30px;
        padding: 2px 10px 2px 8px;
        gap: 5px;
        font-size: 0.78rem;
    }

    .header-access-contact-ico,
    .header-access-contact-ico svg {
        width: 14px;
        height: 14px;
        flex-basis: 14px;
    }

    .header-access-actions {
        flex: 0 0 auto;
        margin-left: auto;
        justify-self: auto;
    }

    .header-access-welcome {
        font-size: 0.78rem;
        max-width: min(11rem, 38vw);
    }

    .header-access-login {
        min-height: 36px;
        padding: 3px 10px 3px 10px;
        gap: 6px;
        font-size: 0.78rem;
    }

    .header-access-login-label {
        white-space: nowrap;
    }

    .site-header .logo {
        font-size: 1.35rem;
        max-width: min(44%, 10.5rem);
    }

    .header-cta-account,
    .header-cta-search,
    .header-cta-cart {
        width: 44px;
        min-width: 44px;
        padding: 0;
    }

    .header-cta-store {
        width: auto;
        min-width: 0;
        min-height: 36px;
        padding: 0 8px;
        font-size: 0.75rem;
        gap: 4px;
        border-radius: 8px;
    }

    .header-cta-store svg {
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
    }

    .header-cta-account .header-cta-text,
    .header-cta-search .header-cta-text,
    .header-cta-cart .header-cta-text,
    .nav-menu-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .nav-menu > summary {
        width: 44px;
        padding: 0;
    }

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

    .nav-menu-actions {
        width: min(var(--max), calc(100% - 28px));
    }

    .account-menu {
        position: static;
    }

    .account-panel {
        left: 12px;
        right: 12px;
        min-width: 0;
        max-width: none;
        width: auto;
    }
}

@media (max-width: 400px) {
    .header-actions {
        gap: 4px;
    }

    .header-actions > .header-cta-store {
        display: inline-flex;
        min-height: 32px;
        padding: 0 7px;
        font-size: 0.7rem;
        gap: 3px;
    }

    .nav-menu-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: min(var(--max), calc(100% - 28px));
        margin: 16px auto 0;
        padding-top: 16px;
        border-top: 1px solid var(--line);
    }

    .nav-menu-actions .nav-menu-store {
        display: none;
        width: 100%;
        min-height: 48px;
    }

    .site-header .logo {
        max-width: min(40%, 8.75rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .header-ticker .header-ticker-item {
        animation: none;
        opacity: 0;
        pointer-events: none;
    }

    .header-ticker .header-ticker-item:first-child {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    .nav-toggle span,
    .nav-menu > summary,
    .site-header .btn,
    .account-menu .avatar,
    .account-nav a {
        transition: none;
    }

    .nav-menu > summary:active,
    .site-header .btn:hover,
    .site-header .btn:focus-visible {
        transform: none;
    }
}

.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal:target {
    display: flex;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
}

.modal-card {
    position: relative;
    width: min(420px, 100%);
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 24px;
}

.modal-card h2 {
    margin: 0 0 8px;
    font-size: 1.2rem;
}

.modal-card p {
    margin: 0 0 20px;
    color: var(--muted);
    line-height: 1.5;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.modal-actions .btn {
    min-height: 40px;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
}

.btn-danger {
    background: #b42318;
    border-color: #b42318;
    color: #fff;
}

.btn-danger:hover {
    background: #912018;
}

.hero {
    padding: 72px 0 28px;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 48px;
    align-items: center;
}

.hero h1 {
    margin: 0 0 18px;
    font-size: clamp(2.1rem, 4vw, 3.15rem);
    line-height: 1.12;
    letter-spacing: -0.04em;
}

.hero p {
    margin: 0 0 28px;
    max-width: 34rem;
    color: var(--muted);
    font-size: 1.08rem;
}

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

.devices {
    position: relative;
    min-height: 360px;
}

.laptop {
    width: 100%;
    max-width: 520px;
    margin-left: auto;
    background: #eef2f7;
    border: 1px solid #dbe3ee;
    border-radius: 18px 18px 10px 10px;
    box-shadow: var(--shadow);
    padding: 12px 12px 0;
}

.laptop-screen {
    background: #fff;
    border-radius: 10px;
    min-height: 248px;
    padding: 16px;
    border: 1px solid #e8eef6;
}

.laptop-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.laptop-bar strong {
    font-size: 0.92rem;
}

.laptop-bar span {
    color: var(--blue);
    font-weight: 800;
}

.fake-chart {
    height: 92px;
    border-radius: 10px;
    background:
        linear-gradient(#e2e8f0 1px, transparent 1px) 0 16px / 100% 18px,
        linear-gradient(180deg, #eff6ff, #fff);
    position: relative;
    overflow: hidden;
}

.fake-chart i {
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 18px;
    height: 54px;
    border-radius: 40%;
    border: 3px solid var(--blue);
    border-bottom-color: transparent;
    border-left-color: transparent;
    transform: rotate(18deg);
}

.metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
}

.metrics b,
.phone-list b {
    display: block;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
}

.metrics span,
.phone-list span {
    font-weight: 800;
}

.laptop-base {
    height: 14px;
    margin: 0 -22px;
    background: #d7dee8;
    border-radius: 0 0 16px 16px;
}

.phone {
    position: absolute;
    right: 8px;
    bottom: 18px;
    width: 148px;
    background: #fff;
    border: 1px solid #dbe3ee;
    border-radius: 22px;
    box-shadow: var(--shadow);
    padding: 16px 14px 18px;
}

.phone em {
    display: block;
    margin-bottom: 10px;
    font-style: normal;
    font-weight: 800;
}

.phone-donut {
    width: 78px;
    height: 78px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: conic-gradient(var(--blue) 0 72%, #dbeafe 72% 100%);
    -webkit-mask: radial-gradient(circle at center, transparent 46%, #000 47%);
    mask: radial-gradient(circle at center, transparent 46%, #000 47%);
}

.phone-list div {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    border-top: 1px solid #eef2f7;
    font-size: 0.78rem;
}

.home-hero {
    position: relative;
    padding: 64px 0 48px;
    overflow: hidden;
    background:
        radial-gradient(ellipse 48% 70% at 92% 8%, rgba(37, 99, 235, 0.28), transparent 54%),
        radial-gradient(ellipse 34% 46% at 6% 86%, rgba(14, 165, 233, 0.16), transparent 50%),
        radial-gradient(ellipse 28% 36% at 48% 0%, rgba(251, 191, 36, 0.12), transparent 46%),
        linear-gradient(180deg, #dbeafe 0%, #eef4ff 38%, #fff 82%);
}

.home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(37, 99, 235, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, 0.05) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(180deg, #000 0%, transparent 86%);
    pointer-events: none;
}

.home-hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: 48px;
    align-items: center;
}

.home-kicker {
    margin: 0 0 10px;
    color: var(--blue);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-copy h1 {
    margin: 0 0 16px;
    font-size: clamp(2.35rem, 4.8vw, 3.55rem);
    line-height: 1.06;
    letter-spacing: -0.05em;
}

.home-copy h1 em {
    font-style: normal;
    color: var(--blue);
    background: linear-gradient(180deg, transparent 64%, #bfdbfe 64%);
}

.home-copy > p {
    margin: 0 0 20px;
    max-width: 36rem;
    color: var(--muted);
    font-size: 1.12rem;
    line-height: 1.6;
}

.home-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}

.home-pills li {
    padding: 6px 12px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #fff;
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 700;
    box-shadow: 0 1px 0 #dbeafe;
}

.home-pills li:nth-child(2) {
    background: #eff6ff;
    color: var(--blue-dark);
}

.home-pills li:nth-child(3) {
    background: #e0f2fe;
    border-color: #bae6fd;
}

.home-pills li:nth-child(6) {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #3730a3;
}

.home-pills li:nth-child(8) {
    background: #fef3c7;
    border-color: #fde68a;
    color: #92400e;
}

.home-copy .hero-actions .btn {
    min-height: 48px;
    padding: 10px 20px;
}

.home-stage {
    position: relative;
    min-height: 420px;
    display: grid;
    place-items: center;
    overflow: visible;
}

.home-stage-glow {
    position: absolute;
    inset: 8% 6% 12% 10%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.28), transparent 68%);
    pointer-events: none;
}

.home-char {
    position: relative;
    z-index: 1;
    width: min(100%, 480px);
    max-width: 100%;
    height: auto;
    overflow: visible;
    filter: drop-shadow(0 22px 28px rgba(29, 78, 216, 0.16));
}

.home-char-bob {
    transform-box: fill-box;
    transform-origin: center bottom;
    animation: home-char-bob 4.6s ease-in-out infinite;
}

.home-char-eyes {
    transform-box: fill-box;
    transform-origin: center;
    animation: home-char-blink 5.8s ease-in-out infinite;
}

.home-char-shield {
    transform-box: fill-box;
    transform-origin: center;
    animation: home-char-float 4.2s ease-in-out infinite;
}

.home-char-badge {
    transform-box: fill-box;
    transform-origin: center;
    animation: home-char-float 5s ease-in-out infinite 0.5s;
}

.home-char-spark {
    animation: home-char-spark 3.2s ease-in-out infinite;
}

@keyframes home-char-bob {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}

@keyframes home-char-float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-11px);
    }
}

@keyframes home-char-blink {
    0%,
    44%,
    48%,
    100% {
        transform: scaleY(1);
    }

    46% {
        transform: scaleY(0.08);
    }
}

@keyframes home-char-spark {
    0%,
    100% {
        opacity: 0.55;
    }

    50% {
        opacity: 1;
    }
}

.home-mark {
    position: absolute;
    right: 8%;
    top: 50%;
    transform: translateY(-50%);
    width: min(280px, 58%);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 36px;
    background: linear-gradient(160deg, #1d4ed8 0%, #2563eb 42%, #1e3a8a 100%);
    box-shadow:
        0 28px 50px rgba(29, 78, 216, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.home-mark span {
    color: #fff;
    font-size: clamp(4.2rem, 8vw, 6.4rem);
    font-weight: 800;
    letter-spacing: -0.08em;
    line-height: 1;
}

.home-win {
    position: absolute;
    background: #fff;
    border: 1px solid #d5deea;
    border-radius: 16px;
    box-shadow: 0 18px 36px rgba(26, 54, 93, 0.14);
    overflow: hidden;
}

.home-win-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
}

.home-win-bar i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
}

.home-win-bar i:first-child {
    background: #fca5a5;
}

.home-win-bar i:nth-child(2) {
    background: #fde68a;
}

.home-win-bar i:nth-child(3) {
    background: #86efac;
}

.home-win-bar b {
    margin-left: 6px;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 700;
}

.home-win.is-code {
    left: 0;
    top: 28px;
    width: 210px;
}

.home-win-code {
    margin: 0;
    padding: 12px 14px 14px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem;
    line-height: 1.55;
    color: #334155;
}

.home-win-code .k {
    color: #1d4ed8;
    font-weight: 700;
}

.home-win-code .f {
    color: #0f172a;
    font-weight: 700;
}

.home-win-code .s {
    color: #0369a1;
}

.home-win.is-ui {
    right: 0;
    bottom: 18px;
    width: 168px;
}

.home-win-body {
    padding: 12px 14px 14px;
}

.home-win-body em {
    display: block;
    font-style: normal;
    font-size: 0.82rem;
    font-weight: 800;
}

.home-win-body b {
    display: block;
    margin: 2px 0 10px;
    color: var(--blue);
    font-size: 0.68rem;
}

.home-win-barline {
    display: block;
    height: 7px;
    margin-top: 6px;
    border-radius: 999px;
    background: #e2e8f0;
}

.home-win-barline.is-short {
    width: 58%;
    background: #bfdbfe;
}

.home-orb {
    position: absolute;
    left: 38%;
    bottom: 8px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: conic-gradient(from 210deg, #93c5fd, #2563eb, #1d4ed8, #93c5fd);
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.28);
}

.home-float-dots {
    display: flex;
    gap: 4px;
}

.home-float-dots i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e2e8f0;
}

.home-float-dots i:first-child {
    background: #fca5a5;
}

.home-float-bar {
    display: block;
    height: 7px;
    margin-top: 6px;
    border-radius: 999px;
    background: #e2e8f0;
}

.home-float-bar.is-short {
    width: 62%;
    background: #bfdbfe;
}

.home-proof {
    position: relative;
    z-index: 2;
    margin-top: -8px;
    padding: 0 0 8px;
}

.home-proof-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(26, 54, 93, 0.08);
    overflow: hidden;
}

.home-proof-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 20px 18px;
}

.home-proof-item + .home-proof-item {
    border-left: 1px solid var(--line);
}

.home-proof-item strong {
    display: block;
    margin-bottom: 4px;
    letter-spacing: -0.03em;
}

.home-proof-item span {
    color: var(--muted);
    font-size: 0.9rem;
}

.home-offer {
    position: relative;
    z-index: 2;
    padding: 12px 0 56px;
}

.home-offer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.home-offer-tile {
    display: grid;
    align-content: start;
    gap: 6px;
    min-height: 148px;
    padding: 18px 16px 16px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: inherit;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(26, 54, 93, 0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.home-offer-tile .icon {
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.72);
    color: inherit;
}

.home-offer-tile strong {
    margin-top: 6px;
    letter-spacing: -0.03em;
}

.home-offer-tile span {
    color: inherit;
    font-size: 0.88rem;
    opacity: 0.78;
}

.home-offer-tile.is-1 {
    background: linear-gradient(180deg, #dbeafe, #eff6ff);
    color: #1d4ed8;
}

.home-offer-tile.is-2 {
    background: linear-gradient(180deg, #e0e7ff, #eef2ff);
    color: #3730a3;
}

.home-offer-tile.is-3 {
    background: linear-gradient(180deg, #e0f2fe, #f0f9ff);
    color: #0369a1;
}

.home-offer-tile.is-4 {
    background: linear-gradient(180deg, #ccfbf1, #f0fdfa);
    color: #0f766e;
}

.home-offer-tile.is-5 {
    background: linear-gradient(180deg, #fef3c7, #fffbeb);
    color: #b45309;
}

.home-offer-tile.is-6 {
    background: linear-gradient(180deg, #dbeafe, #fff);
    color: #1e3a8a;
}

.home-offer-tile.is-7 {
    background: linear-gradient(180deg, #ffe4e6, #fff1f2);
    color: #be123c;
}

.home-offer-tile.is-8 {
    background: linear-gradient(180deg, #ede9fe, #f5f3ff);
    color: #6d28d9;
}

.home-offer-tile:hover,
.home-offer-tile:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: #93c5fd;
}

.home-offer-tile:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

.home-lead {
    margin: 10px 0 0;
    max-width: 42rem;
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 1.55;
}

.home-head:has(.home-lead) {
    align-items: flex-start;
}

.home-split {
    padding: 8px 0 56px;
}

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

.home-split-card {
    display: grid;
    align-content: start;
    gap: 8px;
    min-height: 220px;
    padding: 24px 22px 20px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: inherit;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(26, 54, 93, 0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.home-split-card .icon {
    width: 46px;
    height: 46px;
    background: rgba(255, 255, 255, 0.78);
}

.home-split-card strong {
    margin-top: 8px;
    font-size: 1.18rem;
    letter-spacing: -0.03em;
}

.home-split-card span {
    color: inherit;
    font-size: 0.94rem;
    line-height: 1.5;
    opacity: 0.82;
}

.home-split-card em.home-soft-go {
    margin-top: 12px;
    font-style: normal;
}

.home-split-card.is-1 {
    background: linear-gradient(180deg, #dbeafe, #f8fbff);
    color: #1d4ed8;
}

.home-split-card.is-2 {
    background: linear-gradient(180deg, #e0e7ff, #f5f3ff);
    color: #3730a3;
}

.home-split-card.is-3 {
    background: linear-gradient(180deg, #fef3c7, #fffbeb);
    color: #b45309;
}

.home-split-card:hover,
.home-split-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: #93c5fd;
}

.home-who {
    padding: 56px 0;
    background:
        radial-gradient(ellipse 42% 70% at 100% 100%, rgba(14, 165, 233, 0.14), transparent 48%),
        linear-gradient(180deg, #f8fbff, #fff);
}

.home-who-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.home-who-card {
    padding: 20px 18px 18px;
    border: 1px solid #dbeafe;
    border-radius: var(--radius);
    background: #fff;
    box-shadow: 0 10px 24px rgba(26, 54, 93, 0.05);
}

.home-who-card .icon {
    width: 42px;
    height: 42px;
}

.home-who-card h3 {
    margin: 12px 0 8px;
    font-size: 1.08rem;
    letter-spacing: -0.03em;
}

.home-who-card p {
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
}

.home-who-card.is-1 {
    border-color: #bfdbfe;
    background: linear-gradient(180deg, #eff6ff, #fff);
}

.home-who-card.is-1 .icon {
    background: #dbeafe;
    color: #1d4ed8;
}

.home-who-card.is-2 {
    border-color: #c7d2fe;
    background: linear-gradient(180deg, #eef2ff, #fff);
}

.home-who-card.is-2 .icon {
    background: #e0e7ff;
    color: #3730a3;
}

.home-who-card.is-3 {
    border-color: #99f6e4;
    background: linear-gradient(180deg, #f0fdfa, #fff);
}

.home-who-card.is-3 .icon {
    background: #ccfbf1;
    color: #0f766e;
}

.home-who-card.is-4 {
    border-color: #fde68a;
    background: linear-gradient(180deg, #fffbeb, #fff);
}

.home-who-card.is-4 .icon {
    background: #fef3c7;
    color: #b45309;
}

.home-method {
    padding: 56px 0;
    background:
        radial-gradient(ellipse 50% 80% at 0% 0%, rgba(37, 99, 235, 0.12), transparent 48%),
        var(--bg-soft);
    border-top: 1px solid #e8eef6;
    border-bottom: 1px solid #e8eef6;
}

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

.home-method-card {
    padding: 24px 22px 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: 0 10px 24px rgba(26, 54, 93, 0.05);
}

.home-method-card .icon {
    width: 44px;
    height: 44px;
}

.home-method-card h3 {
    margin: 14px 0 8px;
    font-size: 1.16rem;
    letter-spacing: -0.03em;
}

.home-method-card p {
    margin: 0;
    color: var(--muted);
}

.home-method-card.is-1 .icon {
    background: #dbeafe;
    color: #1d4ed8;
}

.home-method-card.is-2 .icon {
    background: #e0e7ff;
    color: #3730a3;
}

.home-method-card.is-3 .icon {
    background: #fef3c7;
    color: #b45309;
}

.home-process {
    padding: 56px 0;
    background:
        radial-gradient(ellipse 36% 60% at 86% 0%, rgba(251, 191, 36, 0.16), transparent 48%),
        radial-gradient(ellipse 28% 50% at 0% 100%, rgba(37, 99, 235, 0.1), transparent 46%),
        #fff;
}

.home-process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.home-step {
    position: relative;
    min-height: 188px;
    padding: 22px 18px 20px;
    overflow: hidden;
    border-radius: var(--radius);
}

.home-step h3 {
    margin: 8px 0;
    font-size: 1.08rem;
    letter-spacing: -0.03em;
}

.home-step p {
    margin: 0;
    color: inherit;
    font-size: 0.9rem;
    opacity: 0.78;
}

.home-step-num {
    display: block;
    color: inherit;
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.05em;
    opacity: 0.45;
}

.home-step.is-1 {
    background: linear-gradient(180deg, #dbeafe, #eff6ff);
    color: #1d4ed8;
}

.home-step.is-2 {
    background: linear-gradient(180deg, #e0e7ff, #eef2ff);
    color: #3730a3;
}

.home-step.is-3 {
    background: linear-gradient(180deg, #ccfbf1, #f0fdfa);
    color: #0f766e;
}

.home-step.is-4 {
    background: linear-gradient(180deg, #fef3c7, #fffbeb);
    color: #b45309;
}

.home-express {
    padding: clamp(48px, 6vw, 72px) 0;
    background:
        radial-gradient(ellipse 46% 72% at 100% 12%, rgba(37, 99, 235, 0.14), transparent 54%),
        radial-gradient(ellipse 38% 62% at 0% 88%, rgba(16, 185, 129, 0.11), transparent 50%),
        linear-gradient(180deg, #f5f9ff 0%, #fff 42%, #fff 100%);
    border-top: 1px solid #e8eef6;
    border-bottom: 1px solid #e8eef6;
}

.home-express-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(20px, 3vw, 36px);
    align-items: center;
    margin-bottom: clamp(28px, 4vw, 40px);
}

.home-express-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 4px 0;
}

.home-express-step {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px 18px;
    min-height: 0;
    padding: 0 0 22px;
    border: 0;
    background: transparent;
    color: #0f172a;
}

.home-express-step:not(.is-last)::before {
    content: "";
    position: absolute;
    top: 52px;
    left: 21px;
    bottom: 4px;
    width: 2px;
    background: linear-gradient(180deg, var(--express-step-line, #cbd5e1), transparent);
}

.home-express-step-marker {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.home-express-step .icon {
    width: 44px;
    height: 44px;
    margin: 0;
    border-radius: 14px;
    background: var(--express-step-bg, #eff6ff);
    color: var(--express-step-color, #1d4ed8);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.home-express-step-copy h3 {
    margin: 2px 0 6px;
    font-size: 1.02rem;
    letter-spacing: -0.03em;
    color: var(--express-step-color, #1d4ed8);
}

.home-express-step-copy p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #475569;
}

.home-express-step-num {
    display: block;
    margin: 0;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--express-step-color, #1d4ed8);
    opacity: 0.72;
}

.home-express-step.is-1 {
    --express-step-bg: linear-gradient(180deg, #dbeafe, #eff6ff);
    --express-step-color: #1d4ed8;
    --express-step-line: #93c5fd;
}

.home-express-step.is-2 {
    --express-step-bg: linear-gradient(180deg, #e0e7ff, #eef2ff);
    --express-step-color: #3730a3;
    --express-step-line: #a5b4fc;
}

.home-express-step.is-3 {
    --express-step-bg: linear-gradient(180deg, #ccfbf1, #f0fdfa);
    --express-step-color: #0f766e;
    --express-step-line: #5eead4;
}

.home-express-step.is-4 {
    --express-step-bg: linear-gradient(180deg, #fef3c7, #fffbeb);
    --express-step-color: #b45309;
    --express-step-line: #fcd34d;
}

.home-express-demo {
    display: grid;
    gap: 12px;
}

.home-express-demo-browser {
    overflow: hidden;
    border: 1px solid #dbeafe;
    border-radius: calc(var(--radius) + 6px);
    background: #fff;
    box-shadow:
        0 24px 48px rgba(15, 23, 42, 0.1),
        0 0 0 1px rgba(255, 255, 255, 0.75) inset;
}

.home-express-demo-chrome {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    background: linear-gradient(180deg, #f8fafc, #eef2f7);
    border-bottom: 1px solid #e2e8f0;
}

.home-express-demo-dots {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
}

.home-express-demo-dots i {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
}

.home-express-demo-dots i:nth-child(1) {
    background: #fca5a5;
}

.home-express-demo-dots i:nth-child(2) {
    background: #fcd34d;
}

.home-express-demo-dots i:nth-child(3) {
    background: #86efac;
}

.home-express-demo-url {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-express-demo-live {
    flex: 0 0 auto;
    padding: 4px 9px;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.home-express-demo-panels {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
    padding: 16px;
}

.home-express-demo-form,
.home-express-demo-preview {
    display: grid;
    gap: 10px;
    padding: 16px;
    border-radius: 14px;
}

.home-express-demo-form {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.home-express-demo-preview {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #eff6ff 0%, #fff 72%);
    border: 1px solid #bfdbfe;
    text-align: center;
}

.home-express-demo-bridge {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}

.home-express-demo-bridge .icon {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: #eff6ff;
    color: var(--blue);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.12);
}

.home-express-demo-tag {
    display: inline-flex;
    align-self: start;
    padding: 4px 10px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.home-express-demo-tag.is-live {
    background: #dcfce7;
    color: #166534;
}

.home-express-demo-field {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
}

.home-express-demo-field.is-wide {
    grid-column: 1 / -1;
}

.home-express-demo-field i {
    color: #64748b;
    font-style: normal;
    font-size: 0.72rem;
    font-weight: 700;
}

.home-express-demo-field b {
    color: #0f172a;
    font-size: 0.88rem;
}

.home-express-demo-btn {
    justify-self: start;
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--blue);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 800;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.22);
}

.home-express-demo-site strong {
    display: block;
    font-size: 1.18rem;
    letter-spacing: -0.03em;
    color: #1d4ed8;
}

.home-express-demo-site em {
    display: block;
    margin-bottom: 8px;
    color: #475569;
    font-style: normal;
    font-size: 0.84rem;
}

.home-express-demo-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.home-express-demo-chip {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
    font-size: 0.75rem;
    font-weight: 700;
}

.home-express-demo-watermark {
    position: absolute;
    inset: auto 12px 12px auto;
    padding: 4px 8px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.home-express-demo-note {
    margin: 0;
    color: #64748b;
    font-size: 0.84rem;
    line-height: 1.45;
    text-align: center;
}

.home-express-templates {
    margin-bottom: clamp(24px, 3vw, 32px);
}

.home-express-templates-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.home-express-templates-kicker::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, #dbeafe, transparent);
}

.home-express-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.home-express-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.home-express-card-main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-height: 0;
    padding: 0;
    color: inherit;
    text-decoration: none;
}

.home-express-card-demo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 14px 14px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #eff6ff;
    color: var(--blue);
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.home-express-card-demo:hover,
.home-express-card-demo:focus-visible {
    background: #dbeafe;
    color: var(--blue-dark);
}

.home-express-card-main .icon:first-child,
.home-express-card-cover {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 0;
    overflow: hidden;
    background: linear-gradient(180deg, #eff6ff, #f8fafc);
}

.home-express-card-main .icon:first-child {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    border-radius: 0;
    color: var(--blue);
}

.home-express-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home-express-card-title {
    padding: 14px 16px 12px;
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.home-express-card:hover,
.home-express-card:focus-within {
    border-color: #bfdbfe;
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.12);
    transform: translateY(-2px);
}

.home-express-card-main:hover,
.home-express-card-main:focus-visible {
    color: inherit;
}

.home-express-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding-top: 4px;
}

.home-express-actions .btn-lg:first-child {
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.22);
}

.home-express-actions .btn-lg:first-child:hover,
.home-express-actions .btn-lg:first-child:focus-visible {
    box-shadow: 0 16px 32px rgba(37, 99, 235, 0.28);
    transform: translateY(-1px);
}

.home-faq {
    padding: 56px 0;
    background:
        radial-gradient(ellipse 50% 80% at 0% 100%, rgba(37, 99, 235, 0.1), transparent 48%),
        var(--bg-soft);
    border-top: 1px solid #e8eef6;
}

.home-faq-list {
    display: grid;
    gap: 10px;
    max-width: 760px;
}

.home-faq-item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}

.home-faq-item summary {
    cursor: pointer;
    list-style: none;
    padding: 16px 48px 16px 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
    position: relative;
}

.home-faq-item summary::-webkit-details-marker {
    display: none;
}

.home-faq-item summary::after {
    content: "+";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--blue);
    font-size: 1.2rem;
    font-weight: 700;
}

.home-faq-item[open] summary::after {
    content: "–";
}

.home-faq-item[open] {
    border-color: #93c5fd;
    box-shadow: var(--shadow);
}

.home-faq-item p {
    margin: 0;
    padding: 0 20px 18px;
    color: var(--muted);
}

.home-faq-item summary:focus-visible,
.home-split-card:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

.home-collab {
    padding: 48px 0 20px;
    overflow: hidden;
    background: linear-gradient(180deg, #fff 0%, #eff6ff 48%, #fff 100%);
}

.home-collab.is-top {
    padding: 18px 0 28px;
    background: linear-gradient(180deg, #fff 0%, #eff6ff 40%, #fff 100%);
}

.home-collab-kicker {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: center;
}

.home-collab-viewport {
    overflow: hidden;
    width: 100%;
    padding-block: 22px;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.home-collab-track {
    --collab-duration: 56s;
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    animation: home-collab-marquee var(--collab-duration) linear infinite;
}

.home-collab-track.is-slow {
    --collab-duration: 80s;
}

.home-collab-track.is-medium {
    --collab-duration: 56s;
}

.home-collab-track.is-fast {
    --collab-duration: 32s;
}

.home-collab-viewport:hover .home-collab-track {
    animation-play-state: paused;
}

.home-collab-set {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 48px;
    padding-inline-end: 48px;
    flex: 0 0 auto;
    box-sizing: border-box;
}

.home-collab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    flex: 0 0 160px;
    width: 160px;
    min-width: 160px;
    max-width: 160px;
    box-sizing: border-box;
    position: relative;
    z-index: 0;
    min-height: 86px;
    overflow: visible;
    text-decoration: none;
    color: inherit;
}

.home-collab-item::before {
    content: "";
    flex: 0 0 52px;
    width: 140px;
    height: 52px;
    box-sizing: border-box;
}

.home-collab-item:has(img)::before,
.home-collab-item:has(.home-collab-logo)::before {
    display: none;
}

.home-collab-item img,
.home-collab-logo {
    display: block;
    flex: 0 0 52px;
    width: 140px;
    height: 52px;
    max-width: 140px;
    object-fit: contain;
    object-position: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 6px 10px;
    box-sizing: border-box;
    filter: grayscale(0.15);
    opacity: 0.92;
    transform: scale(1);
    transform-origin: center center;
    transition: filter 0.2s ease, opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.home-collab-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    width: 100%;
    max-width: 100%;
    height: calc(1.25em * 2);
    color: #6b7c8f;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    text-align: center;
    white-space: normal;
    overflow: hidden;
    overflow-wrap: anywhere;
    transform: scale(1);
    transform-origin: center center;
    transition: color 0.2s ease, transform 0.2s ease;
}

.home-collab-item:focus-visible {
    z-index: 2;
}

.home-collab-item:focus-visible img,
.home-collab-item:focus-visible .home-collab-logo,
.home-collab-item:focus-visible .home-collab-name {
    transform: scale(1.25);
}

.home-collab-item:focus-visible img,
.home-collab-item:focus-visible .home-collab-logo {
    filter: none;
    opacity: 1;
}

.home-collab-item:focus-visible .home-collab-name {
    color: var(--text);
}

@media (hover: hover) {
    .home-collab-item:hover {
        z-index: 2;
    }

    .home-collab-item:hover img,
    .home-collab-item:hover .home-collab-logo,
    .home-collab-item:hover .home-collab-name {
        transform: scale(1.25);
    }

    .home-collab-item:hover img,
    .home-collab-item:hover .home-collab-logo {
        filter: none;
        opacity: 1;
    }

    .home-collab-item:hover .home-collab-name {
        color: var(--text);
    }
}

@keyframes home-collab-marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-char-bob,
    .home-char-eyes,
    .home-char-shield,
    .home-char-badge,
    .home-char-spark {
        animation: none;
    }

    .home-collab-track {
        animation: none;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        row-gap: 12px;
    }

    .home-collab-set:last-child,
    .home-collab-item.is-repeat {
        display: none;
    }

    .home-collab-set {
        min-width: 0;
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        padding-inline-end: 0;
        gap: 28px 36px;
    }

    .home-collab-viewport {
        mask-image: none;
        -webkit-mask-image: none;
    }

    .home-collab-viewport:hover .home-collab-track {
        animation-play-state: running;
    }

    .home-collab-item,
    .home-collab-item img,
    .home-collab-logo,
    .home-collab-name {
        transition: none;
        transform: none;
    }
}

.home-section,
.home-band {
    padding: 56px 0;
}

.home-band {
    background:
        radial-gradient(ellipse 50% 80% at 100% 0%, rgba(37, 99, 235, 0.08), transparent 46%),
        var(--bg-soft);
    border-top: 1px solid #e8eef6;
    border-bottom: 1px solid #e8eef6;
}

.home-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
}

.home-head h2 {
    margin: 0;
    text-align: left;
    font-size: clamp(1.55rem, 2.6vw, 2rem);
    letter-spacing: -0.035em;
}

.home-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    color: var(--blue);
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.home-more .icon {
    width: 22px;
    height: 22px;
    min-width: 22px;
    padding: 0;
    background: var(--blue-soft);
    border-radius: 7px;
}

.home-more .icon svg {
    width: 12px;
    height: 12px;
}

.home-more:hover,
.home-more:focus-visible {
    color: var(--blue-dark);
}

.home-more:focus-visible,
.home-svc:focus-visible,
.home-soft:focus-visible,
.home-proj:focus-visible,
.home-cta-btn:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

.home-section-svc {
    background:
        radial-gradient(ellipse 40% 60% at 0% 0%, rgba(37, 99, 235, 0.08), transparent 46%),
        #fff;
}

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

.home-svc,
.home-soft,
.home-proj {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.home-svc {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 48px 20px 22px;
}

.home-svc.is-featured,
.home-svc.is-tone-1 {
    background:
        radial-gradient(circle at 100% 0%, #dbeafe 0%, transparent 46%),
        linear-gradient(180deg, #f8fbff, #fff);
}

.home-svc.is-tone-2 {
    background:
        radial-gradient(circle at 100% 0%, #e0e7ff 0%, transparent 46%),
        linear-gradient(180deg, #f5f3ff, #fff);
}

.home-svc.is-tone-3 {
    background:
        radial-gradient(circle at 100% 0%, #bae6fd 0%, transparent 46%),
        linear-gradient(180deg, #f0f9ff, #fff);
}

.home-svc.is-tone-4 {
    background:
        radial-gradient(circle at 100% 0%, #99f6e4 0%, transparent 46%),
        linear-gradient(180deg, #f0fdfa, #fff);
}

.home-svc.is-tone-5 {
    background:
        radial-gradient(circle at 100% 0%, #fde68a 0%, transparent 46%),
        linear-gradient(180deg, #fffbeb, #fff);
}

.home-svc.is-tone-6 {
    background:
        radial-gradient(circle at 100% 0%, #fecdd3 0%, transparent 46%),
        linear-gradient(180deg, #fff1f2, #fff);
}

.home-svc-num {
    position: absolute;
    top: 16px;
    right: 18px;
    color: #bfdbfe;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.home-svc h3,
.home-soft h3,
.home-proj h3 {
    margin: 14px 0 8px;
    font-size: 1.15rem;
    letter-spacing: -0.03em;
}

.home-svc.is-featured h3 {
    font-size: 1.2rem;
}

.home-svc p,
.home-soft p,
.home-proj p,
.home-cta-copy p {
    margin: 0;
    color: var(--muted);
}

.home-svc .home-soft-go {
    margin-top: 16px;
}

.home-svc:hover,
.home-soft:hover,
.home-proj:hover {
    border-color: #93c5fd;
    box-shadow: var(--shadow);
    transform: translateY(-3px);
}

.home-soft-grid {
    display: grid;
    gap: 18px;
}

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

.home-tool {
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.home-tool:hover,
.home-tool:focus-visible {
    border-color: #93c5fd;
    box-shadow: var(--shadow);
    transform: translateY(-3px);
}

.home-tool:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

.home-tool-media {
    display: block;
    aspect-ratio: 16 / 10;
    height: auto;
    background:
        radial-gradient(circle at 20% 0%, rgba(37, 99, 235, 0.14), transparent 46%),
        var(--blue-soft);
    overflow: hidden;
}

.home-tool-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-tool-media.is-icon {
    display: grid;
    place-items: center;
    color: var(--blue);
}

.home-tool-media.is-icon svg {
    width: 40px;
    height: 40px;
}

.home-tool-copy {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 18px 18px 16px;
}

.home-tool-copy h3 {
    margin: 0;
    font-size: 1.12rem;
    letter-spacing: -0.03em;
}

.home-tool-copy p {
    margin: 0;
    color: var(--muted);
}

.home-tool-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
}

.home-tool-use {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--blue);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
}

.home-soft {
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    min-height: 248px;
    overflow: hidden;
}

.home-soft-art {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    min-height: 220px;
    padding: 22px 20px;
    background:
        radial-gradient(circle at 20% 0%, rgba(37, 99, 235, 0.12), transparent 42%),
        linear-gradient(180deg, #eff6ff, #e8f1ff);
}

.home-soft-art.is-chat {
    background:
        radial-gradient(circle at 80% 100%, rgba(37, 99, 235, 0.1), transparent 40%),
        linear-gradient(180deg, #f0f7ff, #e0ecff);
}

.home-soft-art.is-photo {
    padding: 0;
}

.home-soft-art.is-photo .icon,
.home-soft-art.is-photo img {
    width: 100%;
    height: 100%;
    min-height: 220px;
    border-radius: 0;
    object-fit: cover;
}

.home-drop-zone {
    display: grid;
    place-items: center;
    gap: 6px;
    padding: 22px 12px;
    border: 1.5px dashed #93c5fd;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
    text-align: center;
}

.home-drop-zone .icon {
    width: 40px;
    height: 40px;
    background: #fff;
}

.home-drop-zone b {
    font-size: 0.92rem;
}

.home-drop-zone small {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.home-drop-row,
.home-chat-tools,
.home-chat-send {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #dbeafe;
    font-size: 0.78rem;
    font-weight: 700;
}

.home-drop-row em {
    color: #16a34a;
    font-style: normal;
}

.home-chat-tools {
    justify-content: flex-start;
    gap: 8px;
}

.home-chat-tools b,
.home-chat-tools i {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: var(--blue-soft);
    color: var(--blue);
    font-style: normal;
}

.home-chat-tools span {
    margin-left: auto;
    color: var(--muted);
}

.home-chat-msg {
    padding: 14px 14px 16px;
    border-radius: 14px 14px 14px 4px;
    background: #fff;
    border: 1px solid #dbeafe;
    color: var(--text);
    font-size: 0.88rem;
    line-height: 1.45;
}

.home-chat-send {
    justify-content: center;
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

.home-app-win {
    padding: 16px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #dbeafe;
}

.home-app-win b {
    display: block;
    height: 10px;
    margin-top: 12px;
    border-radius: 999px;
    background: #e2e8f0;
}

.home-app-win b.is-short {
    width: 55%;
    background: #bfdbfe;
}

.home-soft-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-width: 0;
    padding: 28px 28px 26px;
}

.home-soft-tag {
    display: inline-flex;
    margin-bottom: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--blue-soft);
    color: var(--blue);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.home-soft h3 {
    margin: 0 0 10px;
    font-size: 1.45rem;
}

.home-soft-go {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    color: var(--blue);
    font-weight: 800;
}

.home-soft-go .icon {
    width: 22px;
    height: 22px;
    min-width: 22px;
    background: var(--blue-soft);
}

.home-soft-go .icon svg {
    width: 12px;
    height: 12px;
}

.home-soft:hover .home-soft-go,
.home-svc:hover .home-soft-go {
    color: var(--blue-dark);
}

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

.home-proj {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
}

.home-proj .copy {
    flex: 1;
    min-width: 0;
}

.home-proj h3 {
    margin: 0 0 4px;
}

.home-proj .chevron {
    color: #94a3b8;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    background: transparent;
}

.home-proj .chevron svg,
.home-proj .chevron img {
    width: 22px;
    height: 22px;
}

.home-proj:hover .chevron {
    color: var(--blue);
}

.home-cta-band {
    padding: 56px 0;
    background:
        radial-gradient(ellipse 60% 80% at 100% 0%, rgba(96, 165, 250, 0.22), transparent 46%),
        linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 58%, #2563eb 100%);
    color: #fff;
}

.home-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.home-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
    flex: 0 0 auto;
}

.home-cta-ghost {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.42);
}

.home-cta-ghost:hover,
.home-cta-ghost:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.home-cta-ghost .icon {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.home-cta-copy {
    display: flex;
    align-items: center;
    gap: 18px;
}

.home-cta-copy .icon {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.home-cta-band h2 {
    margin: 0 0 8px;
    text-align: left;
    font-size: clamp(1.45rem, 2.8vw, 2rem);
    letter-spacing: -0.035em;
    color: #fff;
}

.home-cta-copy p {
    max-width: 36rem;
    color: #dbeafe;
}

.home-cta-btn {
    flex: 0 0 auto;
    min-height: 50px;
    padding: 12px 22px;
    background: #fff;
    color: var(--blue);
}

.home-cta-btn:hover,
.home-cta-btn:focus-visible {
    background: #eff6ff;
    color: var(--blue-dark);
}

.home-cta-btn .icon {
    background: var(--blue-soft);
    color: var(--blue);
}

.home-cta-band .home-cta-btn:focus-visible {
    outline-color: #fff;
}

@media (max-width: 980px) {
    .home-hero-grid,
    .home-proof-grid,
    .home-offer-grid,
    .home-svc-grid,
    .home-who-grid,
    .home-process-grid,
    .home-express-cards,
    .home-proj-list,
    .home-soft,
    .home-cta-inner,
    .home-cta-copy,
    .home-head {
        grid-template-columns: 1fr 1fr;
        display: grid;
    }

    .home-express-layout {
        grid-template-columns: 1fr;
    }

    .home-express-demo-panels {
        grid-template-columns: 1fr;
    }

    .home-express-demo-bridge {
        transform: rotate(90deg);
    }

    .home-express-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-split-grid,
    .home-method-grid {
        grid-template-columns: 1fr;
    }

    .home-hero-grid,
    .home-soft,
    .home-cta-inner,
    .home-cta-copy,
    .home-head {
        grid-template-columns: 1fr;
    }

    .home-head,
    .home-cta-inner,
    .home-cta-copy {
        justify-items: start;
    }

    .home-svc.is-featured {
        grid-row: auto;
    }

    .home-tools-grid {
        grid-template-columns: 1fr 1fr;
    }

    .home-stage {
        min-height: 320px;
        max-width: 420px;
        margin-inline: auto;
    }

    .home-proof-item + .home-proof-item {
        border-left: 0;
        border-top: 1px solid var(--line);
    }

    .home-cta-actions,
    .home-cta-btn,
    .home-cta-ghost {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .home-hero {
        padding-top: 40px;
        overflow-x: clip;
        overflow-y: visible;
    }

    .home-stage {
        min-height: 0;
        width: 100%;
        max-width: min(100%, 400px);
        margin-inline: auto;
        overflow: visible;
    }

    .home-char {
        width: 100%;
        max-width: 100%;
        height: auto;
        overflow: visible;
        transform-origin: center center;
    }

    .home-offer-grid,
    .home-svc-grid,
    .home-split-grid,
    .home-who-grid,
    .home-method-grid,
    .home-process-grid,
    .home-express-cards,
    .home-proj-list {
        grid-template-columns: 1fr;
    }

    .home-express-actions {
        flex-direction: column;
    }

    .home-express-actions .btn-lg {
        width: 100%;
    }

    .home-express-demo-chrome {
        flex-wrap: wrap;
    }

    .home-express-demo-live {
        margin-left: auto;
    }

    .home-win.is-ui,
    .home-orb {
        display: none;
    }

    .home-win.is-code {
        width: min(200px, 48%);
    }

    .home-mark {
        width: min(220px, 52%);
    }

    .home-section,
    .home-band,
    .home-split,
    .home-express,
    .home-who,
    .home-method,
    .home-process,
    .home-faq,
    .home-cta-band {
        padding: 44px 0;
    }

    .home-collab,
    .home-collab.is-top {
        padding: 20px 0 16px;
    }

    .home-collab-set {
        gap: 36px;
        padding-inline-end: 36px;
    }

    .home-collab-item img,
    .home-collab-logo,
    .home-collab-item::before {
        height: 52px;
    }

    .home-soft-copy,
    .home-svc.is-featured,
    .home-svc {
        padding: 20px 18px;
    }

    .home-tools-grid {
        grid-template-columns: 1fr;
    }
}

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

.value {
    display: flex;
    align-items: center;
    gap: 14px;
}

.value strong,
.service h3,
.wide-card h3,
.page-main h1 {
    display: block;
    letter-spacing: -0.03em;
}

.value span,
.service p,
.wide-card p,
.cta p,
.page-main p {
    color: var(--muted);
}

.section {
    padding: 42px 0;
}

.section h2 {
    margin: 0 0 28px;
    text-align: center;
    font-size: 1.7rem;
    letter-spacing: -0.03em;
}

.cards-3,
.cards-2 {
    display: grid;
    gap: 18px;
}

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

.cards-2 {
    grid-template-columns: 1fr 1fr;
}

.service,
.wide-card,
.cta {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.service:hover,
.wide-card:hover {
    border-color: #bfdbfe;
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.service {
    padding: 28px 24px 24px;
}

.service h3,
.wide-card h3 {
    margin: 14px 0 8px;
    font-size: 1.15rem;
}

.service p,
.wide-card p {
    margin: 0;
}

.wide-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 20px;
    text-decoration: none;
}

.wide-card .copy {
    flex: 1;
    min-width: 0;
}

.wide-card .chevron {
    color: #94a3b8;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
}

.wide-card .chevron img,
.wide-card .chevron svg {
    width: 22px;
    height: 22px;
}

.icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--blue-soft);
    color: var(--blue);
    flex: 0 0 48px;
}

.icon svg,
.icon img,
.icon-raw {
    width: 24px;
    height: 24px;
}

.icon.is-badge {
    background: transparent;
    padding: 0;
}

.icon.is-badge svg,
.icon.is-badge img {
    width: 48px;
    height: 48px;
}

.icon.is-photo {
    overflow: hidden;
    padding: 0;
}

.icon.is-photo img {
    width: 48px;
    height: 48px;
    object-fit: cover;
}

a.service {
    display: block;
    color: inherit;
    text-decoration: none;
}

.product-card .product-kicker {
    margin: 14px 0 0;
    color: var(--blue);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.product-card h3 {
    margin-top: 6px;
}

.product-card .product-price {
    margin-top: 12px;
    color: var(--blue);
    font-size: 1.05rem;
    font-weight: 700;
}

.page-main .catalog-list {
    margin-top: 28px;
}

.page-main .catalog-list .values {
    padding-top: 8px;
}

.cv-page {
    min-height: 48vh;
}

.cv-band {
    padding: 72px 0;
    background: var(--bg);
}

.cv-band-hero {
    padding: 56px 0 64px;
}

.cv-band-alt {
    background: var(--bg-soft);
}

.cv-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0 0 28px;
}

.cv-head-copy {
    min-width: 0;
}

.cv-head h2 {
    margin: 0;
    text-align: left;
    font-size: 1.55rem;
    letter-spacing: -0.03em;
}

.cv-section-lead {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 1rem;
    font-weight: 500;
}

.cv-head .icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
}

.cv-kicker {
    margin: 0 0 8px;
    color: var(--blue);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cv-about-card {
    display: grid;
    gap: 40px 56px;
    align-items: start;
}

.cv-about-card .copy {
    min-width: 0;
}

.cv-about-card h1,
.cv-about-card h3 {
    margin: 0 0 8px;
    letter-spacing: -0.04em;
}

.cv-about-card h1 {
    font-size: clamp(2rem, 4vw, 2.85rem);
    line-height: 1.12;
}

.cv-about-card h3 {
    font-size: 1.25rem;
}

.cv-role {
    margin: 0 0 6px;
    color: var(--text);
    font-size: 1.12rem;
    font-weight: 700;
}

.cv-place {
    margin: 0 0 22px;
    color: var(--muted);
    font-weight: 600;
}

.cv-about-card .copy > p,
.cv-about-card .copy .cv-list,
.cv-about-lead p,
.cv-about-close p {
    color: var(--muted);
}

.cv-about-card .copy > p {
    margin: 0 0 14px;
    max-width: 40rem;
    line-height: 1.65;
}

.cv-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 22px 0 0;
}

.cv-about-lead,
.cv-about-close {
    max-width: 44rem;
    margin: 36px 0 0;
}

.cv-about-lead p,
.cv-about-close p {
    margin: 0 0 14px;
    line-height: 1.7;
}

.cv-about-lead p:last-child,
.cv-about-close p:last-child {
    margin-bottom: 0;
}

.cv-about-close {
    margin-top: 28px;
}

.cv-focus {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 28px;
}

@media (min-width: 1100px) {
    .cv-focus {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.cv-focus-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.cv-focus-card:hover {
    transform: translateY(-3px);
    border-color: #bfdbfe;
    box-shadow: var(--shadow);
}

.cv-focus-card .copy {
    min-width: 0;
}

.cv-focus-card h3 {
    margin: 0 0 6px;
    font-size: 1.02rem;
    letter-spacing: -0.03em;
    line-height: 1.35;
}

.cv-focus-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.cv-about-card.is-extra {
    margin-top: 36px;
    align-items: start;
    grid-template-columns: 1fr;
}

.cv-photo {
    position: relative;
    z-index: 0;
    margin: 0 auto;
    width: 240px;
}

.cv-photo::before {
    content: "";
    position: absolute;
    inset: 12px -10px -16px 8px;
    z-index: -1;
    border-radius: 22px;
    background: radial-gradient(circle at 50% 35%, rgba(37, 99, 235, 0.32), rgba(37, 99, 235, 0.08) 58%, transparent 78%);
    filter: blur(16px);
}

.cv-photo img {
    width: 240px;
    height: 240px;
    object-fit: cover;
    object-position: center 18%;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow:
        0 18px 36px rgba(37, 99, 235, 0.16),
        0 8px 18px rgba(26, 54, 93, 0.08);
}

.cv-timeline {
    position: relative;
    display: grid;
    gap: 18px;
    margin: 0;
    padding: 0 0 0 32px;
}

.cv-timeline::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: #dbeafe;
    border-radius: 2px;
}

.cv-item {
    position: relative;
}

.cv-marker {
    position: absolute;
    left: -32px;
    top: 28px;
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 0 3px #dbeafe;
}

.cv-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.cv-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 22px 20px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.cv-card:hover {
    transform: translateY(-3px);
    border-color: #bfdbfe;
    box-shadow: var(--shadow);
}

.cv-card .copy,
.cv-contact .copy {
    flex: 1;
    min-width: 0;
}

.cv-card h3,
.cv-contact strong {
    margin: 0 0 4px;
    font-size: 1.08rem;
    letter-spacing: -0.03em;
}

.cv-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.cv-card-top h3 {
    margin-bottom: 0;
}

.cv-dates {
    flex: 0 0 auto;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--blue-soft);
    color: var(--blue);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.cv-meta {
    display: block;
    margin: 6px 0 10px;
    color: var(--blue);
    font-size: 0.9rem;
    font-weight: 600;
}

.cv-card p,
.cv-item p {
    margin: 0 0 8px;
    color: var(--muted);
}

.cv-card p:last-child,
.cv-item p:last-child {
    margin-bottom: 0;
}

.cv-list {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    color: var(--muted);
}

.cv-list li {
    position: relative;
    padding-left: 1.1em;
}

.cv-list li + li {
    margin-top: 6px;
}

.cv-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--blue);
}

.cv-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 12px;
    color: var(--blue);
    font-weight: 700;
    text-decoration: none;
    transition: color 0.18s ease, gap 0.18s ease;
}

.cv-link:hover,
.cv-link:focus-visible {
    color: var(--blue-dark);
    gap: 8px;
}

.cv-link .chevron,
.cv-contact .chevron {
    width: 16px;
    height: 16px;
}

.cv-link .chevron img,
.cv-link .chevron svg,
.cv-contact .chevron img,
.cv-contact .chevron svg {
    width: 16px;
    height: 16px;
}

.cv-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.cv-split.is-single {
    grid-template-columns: 1fr;
}

.cv-split-col .cv-head {
    margin-bottom: 18px;
}

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

.cv-item-chips {
    margin-top: 12px;
}

.cv-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

.cv-chip .copy {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

.cv-chip strong {
    font-size: 0.92rem;
    font-weight: 700;
}

.cv-chip .cv-meta {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
}

.cv-chip:hover,
.cv-chip:focus-visible {
    border-color: #93c5fd;
    background: var(--blue-soft);
    transform: translateY(-1px);
}

.cv-contacts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.cv-contact {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: inherit;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.cv-contact:hover,
.cv-contact:focus-visible {
    transform: translateY(-3px);
    border-color: #bfdbfe;
    box-shadow: var(--shadow);
}

.cv-contact .copy strong {
    display: block;
}

.cv-contact .cv-meta {
    margin: 4px 0 0;
    font-weight: 500;
    word-break: break-all;
}

.cv-contact .chevron {
    margin-left: auto;
    opacity: 0.55;
}

.cv-chip:focus-visible,
.cv-contact:focus-visible,
.cv-link:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

@media (min-width: 901px) {
    .cv-about-card {
        grid-template-columns: minmax(0, 1fr) 240px;
    }

    .cv-photo {
        order: 2;
        margin: 0;
        justify-self: end;
    }
}

.cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 32px;
    background: var(--cta);
    border-color: #d7e6ff;
}

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

.cta h2 {
    margin: 0 0 6px;
    text-align: left;
    font-size: 1.25rem;
}

.cta p {
    margin: 0;
}

.client-support-note {
    margin: 16px 0 0;
    max-width: 42rem;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

.client-support-note a {
    color: var(--text);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.client-support-note a:hover,
.client-support-note a:focus-visible {
    color: var(--blue);
}

.cta + .client-support-note {
    margin-top: 18px;
}

.shop-steps + .client-support-note {
    margin-top: 22px;
}

.pdp-note + .client-support-note {
    margin-top: 10px;
}

.client-support-note-foot {
    padding: 0 0 56px;
}

.client-welcome-copy .client-support-note {
    margin-top: 10px;
}

.auth-signup + .client-support-note,
.auth-form + .client-support-note,
.auth-switch + .client-support-note {
    margin-top: 18px;
}

.site-footer {
    margin-top: 20px;
    padding: 48px 0 0;
    border-top: 1px solid var(--line);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 0.8fr 0.9fr 1fr;
    gap: 28px;
    padding-bottom: 36px;
}

.site-footer h3 {
    margin: 0 0 12px;
    font-size: 0.95rem;
}

.site-footer p,
.site-footer a,
.legal {
    color: var(--muted);
}

.site-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-services {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 14px 0 0;
}

.footer-services a {
    color: var(--blue);
    font-weight: 700;
    text-decoration: none;
}

.footer-services a:hover,
.footer-services a:focus-visible {
    text-decoration: underline;
}

.site-footer li {
    margin: 0 0 8px;
}

.site-footer a {
    text-decoration: none;
    text-underline-offset: 3px;
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.site-footer a:not(.logo):hover,
.site-footer a:not(.logo):focus-visible {
    color: var(--blue);
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

.site-footer a:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
    border-radius: 4px;
}

.socials {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.socials a {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--blue);
}

.socials a:hover,
.socials a:focus-visible {
    background: var(--blue-soft);
    border-color: #93c5fd;
    color: var(--blue-dark);
    text-decoration: none;
    transform: translateY(-2px);
}

.socials a:focus-visible {
    outline-offset: 2px;
}

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

.legal {
    padding: 18px 0 28px;
    border-top: 1px solid var(--line);
    text-align: center;
    font-size: 0.88rem;
}

.svc-page {
    min-height: 48vh;
}

.svc-band {
    padding: 72px 0;
    background: var(--bg);
}

.svc-band-hero {
    padding: 64px 0 56px;
    background:
        radial-gradient(circle at 14% 16%, #dbeafe 0, transparent 36%),
        linear-gradient(180deg, #f8fbff 0, #fff 72%);
}

.svc-band-alt {
    background: var(--bg-soft);
}

.svc-band-cta {
    padding: 28px 0 80px;
}

.svc-hero {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: center;
}

.svc-hero-copy {
    min-width: 0;
}

.svc-kicker {
    margin: 0 0 8px;
    color: var(--blue);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.svc-hero h1 {
    margin: 0 0 16px;
    font-size: clamp(2.1rem, 4vw, 3.15rem);
    line-height: 1.12;
    letter-spacing: -0.04em;
}

.svc-intro p,
.svc-empty {
    margin: 0;
    color: var(--muted);
}

.svc-intro p {
    max-width: 36rem;
    font-size: 1.08rem;
}

.svc-intro p + p,
.svc-intro .block-actions,
.svc-hero-actions {
    margin-top: 24px;
}

.svc-intro .block-actions,
.svc-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.svc-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 28px;
}

.svc-head h2 {
    margin: 0;
    text-align: left;
    font-size: 1.55rem;
    letter-spacing: -0.03em;
}

.svc-head .icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
}

.svc-steps,
.svc-grid {
    display: grid;
    gap: 18px;
}

.svc-steps {
    grid-template-columns: repeat(3, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
}

.svc-step,
.svc-card,
.svc-preview-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.svc-step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px 22px 22px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.svc-step:hover {
    border-color: #dbeafe;
    box-shadow: 0 12px 28px rgba(26, 54, 93, 0.06);
}

.svc-step-num {
    position: absolute;
    top: 18px;
    right: 18px;
    color: #bfdbfe;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
}

.svc-step h3,
.svc-card h3 {
    margin: 0 0 8px;
    font-size: 1.15rem;
    letter-spacing: -0.03em;
}

.svc-step p,
.svc-card p,
.svc-preview-card em {
    margin: 0;
    color: var(--muted);
    font-style: normal;
}

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

.svc-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 1px 0 rgba(26, 54, 93, 0.03);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.svc-card .copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    padding: 20px 22px 22px;
}

.svc-card-media,
.svc-preview-media {
    display: block;
    overflow: hidden;
    background:
        linear-gradient(145deg, var(--mg-cover-soft, #dbeafe), #fff 70%);
}

.svc-card-media {
    aspect-ratio: 16 / 10;
    width: 100%;
}

.svc-card-media img,
.svc-preview-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.svc-preview-media {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 16px;
}

.svc-preview-media.is-icon {
    display: grid;
    place-items: center;
    background: var(--blue-soft);
}

.svc-preview-media .icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 16px;
}

.svc-card .icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 16px;
}

.svc-card .icon svg,
.svc-card .icon img {
    width: 26px;
    height: 26px;
}

.svc-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: auto;
    padding-top: 16px;
    color: var(--blue);
    font-size: 0.92rem;
    font-weight: 700;
}

.svc-more-icon {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    color: currentColor;
}

.svc-more-icon svg {
    width: 18px;
    height: 18px;
}

a.svc-card:hover,
a.svc-card:focus-visible,
.svc-card:hover {
    border-color: #93c5fd;
    box-shadow: var(--shadow);
    transform: translateY(-3px);
}

a.svc-card:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

.svc-empty {
    padding: 12px 0 8px;
}

.svc-hero-visual {
    min-width: 0;
}

.svc-preview {
    display: grid;
    gap: 12px;
}

.svc-preview-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    box-shadow: var(--shadow);
}

.svc-preview-card.is-1 {
    transform: rotate(-1.6deg);
}

.svc-preview-card.is-2 {
    margin-left: 18px;
    transform: rotate(1.4deg);
}

.svc-preview-card.is-3 {
    margin-left: 8px;
    transform: rotate(-0.8deg);
}

.svc-preview-card .copy {
    min-width: 0;
}

.svc-preview-card strong {
    display: block;
    letter-spacing: -0.03em;
}

.svc-preview-card em {
    display: block;
    margin-top: 4px;
    font-size: 0.88rem;
}

.svc-page .cta {
    background: var(--cta);
    border-color: #d7e6ff;
}

.svc-page .pager {
    margin-top: 28px;
}

.store-page,
.landing-page {
    min-height: 48vh;
}

.store-lead,
.landing-lead {
    margin: 0 0 28px;
    max-width: 40rem;
    color: var(--muted);
    font-size: 1.05rem;
}

.store-faq .home-faq-list,
.landing-faq .home-faq-list {
    max-width: 760px;
}

.page-main {
    padding: 56px 0 80px;
    min-height: 48vh;
}

.contact-page {
    min-height: 48vh;
}

.contact-band {
    padding: 64px 0 72px;
    background: var(--bg);
}

.contact-band-hero {
    padding: 64px 0 56px;
    background:
        radial-gradient(circle at 88% 12%, #dbeafe 0, transparent 38%),
        linear-gradient(180deg, #f8fbff 0, #fff 72%);
}

.contact-band-main {
    padding: 8px 0 88px;
    background: var(--bg-soft);
}

.contact-hero {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: center;
}

.contact-hero-copy {
    min-width: 0;
}

.contact-kicker {
    margin: 0 0 8px;
    color: var(--blue);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.contact-hero h1 {
    margin: 0 0 16px;
    font-size: clamp(2.1rem, 4vw, 3.15rem);
    line-height: 1.12;
    letter-spacing: -0.04em;
}

.contact-intro p,
.contact-hero .lead,
.contact-form-card .lead {
    margin: 0;
    color: var(--muted);
}

.contact-intro p,
.contact-hero .lead {
    max-width: 36rem;
    font-size: 1.08rem;
}

.contact-intro p + p,
.contact-intro .block-actions {
    margin-top: 12px;
}

.contact-intro a {
    color: var(--blue);
    font-weight: 700;
    text-decoration: none;
}

.contact-intro a:hover,
.contact-intro a:focus-visible {
    color: var(--blue-dark);
    text-decoration: underline;
}

.contact-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.contact-pills li {
    padding: 8px 14px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 700;
}

.contact-hero-panel {
    display: flex;
    justify-content: flex-end;
}

.contact-mock {
    width: min(100%, 380px);
    padding: 14px 14px 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow:
        0 18px 36px rgba(37, 99, 235, 0.12),
        0 8px 18px rgba(26, 54, 93, 0.06);
}

.contact-mock-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
}

.contact-mock-bar i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e2e8f0;
}

.contact-mock-bar i:first-child {
    background: #fecaca;
}

.contact-mock-bar i:nth-child(2) {
    background: #fde68a;
}

.contact-mock-bar i:nth-child(3) {
    background: #bbf7d0;
}

.contact-mock-bar strong {
    margin-left: 8px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.contact-mock-thread {
    display: grid;
    gap: 10px;
}

.contact-mock-thread p {
    margin: 0;
    max-width: 86%;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 0.92rem;
    line-height: 1.4;
}

.contact-mock-thread .is-in {
    background: var(--blue-soft);
    color: var(--text);
    border-bottom-left-radius: 4px;
}

.contact-mock-thread .is-out {
    justify-self: end;
    background: var(--blue);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.contact-mock-mail {
    justify-self: start;
    max-width: 100%;
    padding: 0;
    color: var(--blue);
    font-size: 0.82rem;
    font-weight: 700;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 24px;
    align-items: start;
}

.contact-form-card,
.contact-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.contact-form-card {
    position: relative;
    padding: 32px 32px 28px;
    box-shadow: var(--shadow);
}

.contact-form-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 0 0 24px;
}

.contact-form-card h2 {
    margin: 0 0 6px;
    font-size: 1.35rem;
    letter-spacing: -0.03em;
}

.contact-form-card .lead {
    margin: 0;
}

.contact-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.contact-form-card .field {
    margin-bottom: 16px;
}

.contact-form-card label {
    display: block;
    margin: 0 0 6px;
    font-size: 0.88rem;
    font-weight: 700;
}

.contact-form-card .req {
    color: var(--blue);
}

.contact-form-card input,
.contact-form-card textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg-soft);
    font: inherit;
    color: var(--text);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.contact-form-card textarea {
    min-height: 168px;
    resize: vertical;
}

.contact-form-card input::placeholder,
.contact-form-card textarea::placeholder {
    color: #94a3b8;
}

.contact-form-card input:hover,
.contact-form-card textarea:hover {
    border-color: #93c5fd;
    background: #fff;
}

.contact-form-card input:focus,
.contact-form-card textarea:focus {
    outline: none;
    border-color: var(--blue);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
}

.contact-hint,
.contact-note {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 0.82rem;
}

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

.contact-form-card .btn {
    min-height: 48px;
    padding: 10px 22px;
}

.contact-form-card .btn:hover,
.contact-form-card .btn:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.18);
}

.contact-form-card .btn:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

.contact-form-card .alert {
    padding: 12px 14px;
    border: 1px solid transparent;
}

.contact-form-card .alert-ok {
    border-color: #bbf7d0;
}

.contact-form-card .alert-error {
    border-color: #fecaca;
}

.form-hp,
.contact-hp {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    opacity: 0;
    pointer-events: none;
}

.contact-aside {
    display: grid;
    gap: 14px;
}

.contact-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 18px;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.contact-card:hover,
a.contact-card:hover,
a.contact-card:focus-visible {
    border-color: #bfdbfe;
    box-shadow: var(--shadow);
    transform: translateY(-3px);
}

a.contact-card:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

.contact-card .copy {
    flex: 1;
    min-width: 0;
}

.contact-card strong {
    display: block;
    margin: 0 0 4px;
    font-size: 1.05rem;
    letter-spacing: -0.03em;
}

.contact-card em {
    display: block;
    color: var(--muted);
    font-style: normal;
    overflow-wrap: anywhere;
}

.contact-card .chevron {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-top: 4px;
    opacity: 0.45;
    color: var(--blue);
}

.contact-card .chevron svg {
    width: 16px;
    height: 16px;
}

.contact-socials-card .socials {
    margin-top: 12px;
}

.contact-steps {
    margin: 10px 0 0;
    padding: 0 0 0 1.15em;
    color: var(--muted);
}

.contact-steps li + li {
    margin-top: 6px;
}

.auth-page {
    min-height: 48vh;
    background: var(--bg);
}

.auth-band {
    padding: 64px 0 56px;
    background:
        radial-gradient(circle at 88% 12%, #dbeafe 0, transparent 38%),
        linear-gradient(180deg, #f8fbff 0, #fff 72%);
}

.auth-band-main {
    padding: 8px 0 88px;
    background: var(--bg-soft);
}

.auth-hero {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: center;
}

.auth-hero.is-wide {
    grid-template-columns: 1fr;
    max-width: 46rem;
}

.auth-hero-copy {
    min-width: 0;
}

.auth-hero h1,
.client-welcome h1 {
    margin: 0 0 16px;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.12;
    letter-spacing: -0.04em;
}

.auth-hero .lead,
.client-welcome .lead {
    margin: 0;
    max-width: 36rem;
    color: var(--muted);
    font-size: 1.08rem;
}

.auth-hero-panel {
    display: flex;
    justify-content: flex-end;
}

.auth-mock {
    width: min(100%, 360px);
    padding: 14px 14px 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow:
        0 18px 36px rgba(37, 99, 235, 0.12),
        0 8px 18px rgba(26, 54, 93, 0.06);
}

.auth-mock-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
}

.auth-mock-bar i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e2e8f0;
}

.auth-mock-bar i:first-child {
    background: #fecaca;
}

.auth-mock-bar i:nth-child(2) {
    background: #fde68a;
}

.auth-mock-bar i:nth-child(3) {
    background: #bbf7d0;
}

.auth-mock-bar strong {
    margin-left: 8px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.auth-mock-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}

.auth-mock-stats div {
    padding: 12px 10px;
    background: var(--blue-soft);
    border-radius: 12px;
}

.auth-mock-stats em,
.auth-mock-stats b {
    display: block;
    font-style: normal;
}

.auth-mock-stats em {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.auth-mock-stats b {
    margin-top: 4px;
    color: var(--text);
    font-size: 1.15rem;
    letter-spacing: -0.03em;
}

.auth-mock-rows {
    display: grid;
    gap: 8px;
}

.auth-mock-rows span {
    height: 12px;
    border-radius: 999px;
    background: #e2e8f0;
}

.auth-mock-rows span:nth-child(2) {
    width: 78%;
}

.auth-mock-rows span:nth-child(3) {
    width: 62%;
}

.auth-mock-empty {
    display: grid;
    gap: 8px;
    padding: 16px 14px;
    border: 1px dashed #c5d5e8;
    border-radius: 14px;
    background: #f8fafc;
}

.auth-mock-empty strong {
    color: var(--text);
    font-size: 0.92rem;
    letter-spacing: -0.02em;
}

.auth-mock-empty p {
    margin: 0;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.auth-mock-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.auth-mock-actions span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid #cfe0f5;
    border-radius: 999px;
    background: #fff;
    color: var(--blue);
    font-size: 0.72rem;
    font-weight: 700;
}

.auth-form-wrap {
    display: flex;
    justify-content: center;
}

.auth-card {
    width: min(480px, 100%);
    padding: 36px 32px 28px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.auth-card.is-wide {
    width: min(760px, 100%);
    margin: 0 auto;
}

.auth-brand,
.client-kicker {
    display: inline-block;
    margin: 0 0 10px;
    color: var(--blue);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.auth-brand {
    margin-bottom: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--blue-soft);
    letter-spacing: 0.02em;
    text-transform: none;
    font-size: 0.78rem;
}

.auth-card h2 {
    margin: 0 0 8px;
    font-size: 1.45rem;
    letter-spacing: -0.03em;
}

.auth-card .lead {
    margin: 0 0 22px;
    color: var(--muted);
}

.auth-card .field {
    margin-bottom: 16px;
}

.auth-card label,
.client-form label {
    display: block;
    margin: 0 0 6px;
    font-size: 0.88rem;
    font-weight: 600;
}

.auth-card .field-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.auth-card .field-head label {
    margin: 0;
}

.auth-card .req,
.client-req {
    color: var(--blue);
    font-weight: 700;
}

.client-opt {
    margin-left: 4px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.auth-card input {
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    font: inherit;
    color: var(--text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-card input:hover {
    border-color: #bfdbfe;
}

.auth-card input:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.auth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}

.auth-span {
    grid-column: 1 / -1;
}

.auth-group,
.client-group {
    margin: 0 0 20px;
    padding: 16px 18px 4px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}

.auth-group legend,
.client-group legend {
    padding: 0 6px;
    color: var(--text);
    font-size: 0.92rem;
    font-weight: 800;
}

.auth-submit {
    width: 100%;
    min-height: 46px;
    margin-top: 4px;
}

.auth-card.is-wide .auth-form > .auth-submit {
    width: auto;
    min-width: 200px;
}

.auth-forgot {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
}

.auth-forgot:hover,
.auth-forgot:focus-visible {
    color: var(--blue);
    text-decoration: underline;
}

.auth-signup {
    margin-top: 28px;
    padding: 22px 18px 18px;
    background: var(--blue-soft);
    border: 1px solid #dbeafe;
    border-radius: 14px;
    text-align: center;
}

.auth-signup p {
    margin: 0 0 12px;
    color: var(--text);
    font-weight: 700;
}

.auth-signup .btn {
    justify-content: center;
}

.auth-switch {
    margin: 22px 0 0;
    color: var(--muted);
    font-size: 0.95rem;
    text-align: center;
}

.auth-card.is-wide .auth-switch {
    text-align: left;
}

.auth-switch a {
    color: var(--blue);
    font-weight: 700;
    text-decoration: none;
}

.auth-switch a:hover,
.auth-switch a:focus-visible {
    text-decoration: underline;
}

.alert {
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 0.92rem;
}

.alert-error {
    background: #fef3f2;
    border-color: #fecaca;
    color: #b42318;
}

.alert-ok {
    background: #ecfdf3;
    border-color: #bbf7d0;
    color: #027a48;
    overflow-wrap: anywhere;
}

.page-main .cards-3,
.page-main .cards-2 {
    margin: 24px 0 28px;
}

.page-main .values {
    padding-top: 8px;
    padding-bottom: 20px;
}

.page-main .cta {
    margin: 32px 0 0;
}

.page-main .cta h2 {
    margin: 0 0 6px;
}

.page-main h1 {
    margin: 0 0 16px;
    font-size: 2rem;
}

.page-main h2,
.page-main h3 {
    margin: 28px 0 12px;
    letter-spacing: -0.03em;
}

.page-main blockquote {
    margin: 20px 0;
    padding: 12px 18px;
    border-left: 4px solid var(--blue);
    background: var(--blue-soft);
    border-radius: 0 12px 12px 0;
    color: var(--text);
}

.page-main .block-actions {
    margin: 24px 0;
}

.page-main .block-list {
    margin: 16px 0 20px;
    padding-left: 1.3em;
    color: var(--muted);
}

.page-main .block-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin: 20px 0;
}

.page-blocks {
    padding-top: 24px;
    padding-bottom: 24px;
}

.is-align-center {
    text-align: center;
}

.is-align-right {
    text-align: right;
}

.is-align-center .embed img,
.is-align-right .embed img {
    margin-inline: auto;
}

.is-align-right .embed img {
    margin-left: auto;
    margin-right: 0;
}

.is-align-center .block-actions,
.is-align-right .block-actions {
    display: flex;
}

.is-align-center .block-actions {
    justify-content: center;
}

.is-align-right .block-actions {
    justify-content: flex-end;
}

.page-main .embed img,
.post-main .embed img {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--line);
}

.post-kicker {
    margin: 0 0 8px;
    color: var(--muted);
    font-size: 0.92rem;
}

.post-kicker a {
    color: var(--blue);
    font-weight: 700;
    text-decoration: none;
}

.post-list {
    display: grid;
    gap: 16px;
    margin-top: 32px;
}

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

.pager-info {
    margin: 0;
    color: var(--muted);
    font-size: 0.86rem;
}

.pager-links {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.pager-links a,
.pager-links span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
}

.pager-links a {
    color: var(--blue);
    background: var(--blue-soft);
}

.pager-links a:hover {
    background: #dbeafe;
}

.pager-links .is-current {
    background: var(--blue);
    color: #fff;
}

.pager-gap {
    min-width: auto;
    padding: 0 2px;
    color: var(--muted);
}

.post-card {
    display: flex;
    gap: 18px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-decoration: none;
    background: #fff;
}

.post-card:hover {
    border-color: #bfdbfe;
    box-shadow: var(--shadow);
}

.post-cover {
    flex: 0 0 168px;
    overflow: hidden;
    border-radius: 12px;
    background: var(--blue-soft);
}

.post-cover img {
    width: 100%;
    height: 100%;
    min-height: 110px;
    object-fit: cover;
}

.post-card .copy {
    min-width: 0;
}

.post-card em {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-style: normal;
    font-size: 0.82rem;
}

.post-card h2 {
    margin: 0 0 8px;
    font-size: 1.2rem;
    letter-spacing: -0.03em;
}

.post-card p {
    margin: 0;
}

.empty,
.not-found {
    padding: 80px 0;
    text-align: center;
}

.not-found-actions {
    justify-content: center;
    margin-top: 24px;
}

.client-dash {
    background:
        radial-gradient(circle at 88% 8%, #dbeafe 0, transparent 32%),
        linear-gradient(180deg, #f8fbff 0, #f4f7fb 100%);
    padding: 40px 0 80px;
}

.client-welcome {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 28px 36px;
    align-items: center;
    margin-bottom: 22px;
}

.client-welcome-who {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(26, 54, 93, 0.04);
}

.client-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    flex: 0 0 52px;
}

.client-welcome-name,
.client-welcome-mail {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-welcome-name {
    font-weight: 800;
    letter-spacing: -0.02em;
}

.client-welcome-mail {
    color: var(--muted);
    font-size: 0.86rem;
}

.client-welcome-copy {
    min-width: 0;
}

.client-welcome-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: 0 0 auto;
    justify-self: end;
}

.client-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    gap: 8px;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid #fecaca;
    border-radius: 999px;
    background: #fff;
    color: #b42318;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(26, 54, 93, 0.04);
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.client-logout:hover,
.client-logout:focus-visible {
    background: #fef3f2;
    color: #912018;
    border-color: #f97066;
}

.client-logout:focus-visible {
    outline: 2px solid #b42318;
    outline-offset: 3px;
}

.client-logout .client-nav-ico,
.client-logout svg {
    width: 18px;
    height: 18px;
}

.client-notify {
    position: relative;
    flex: 0 0 auto;
}

.client-notify-toggle {
    display: grid;
    place-items: center;
    position: relative;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    border-radius: 50%;
    list-style: none;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(26, 54, 93, 0.04);
}

.client-notify-toggle::-webkit-details-marker,
.client-notify-toggle::marker {
    display: none;
    content: none;
}

.client-notify-toggle svg {
    width: 22px;
    height: 22px;
}

.client-notify[open] > .client-notify-toggle,
.client-notify-toggle:hover,
.client-notify-toggle:focus-visible {
    border-color: #bfdbfe;
    color: var(--blue);
    box-shadow: 0 0 0 3px var(--blue-soft);
}

.client-notify-toggle:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

.client-notify-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    font-style: normal;
}

.client-notify-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 26;
    width: min(320px, calc(100vw - 28px));
    max-height: min(72vh, calc(100dvh - 88px));
    overflow: auto;
    padding: 12px 10px 8px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.client-notify-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 2px 6px 10px;
}

.client-notify-head strong {
    font-size: 0.92rem;
}

.client-notify-head .ghost-link,
.client-notify-head button {
    border: 0;
    background: none;
    color: var(--blue);
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
    padding: 0;
}

.client-notify-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.client-notify-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.client-notify-list li {
    display: flex;
    align-items: stretch;
    gap: 4px;
}

.client-notify-list li > a:first-child {
    display: grid;
    gap: 2px;
    flex: 1;
    min-width: 0;
    padding: 10px 8px;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
}

.client-notify-list li.is-unread > a:first-child,
.client-notify-list li.is-unread > .client-notify-static {
    background: #eff6ff;
}

.client-notify-list li > a:first-child:hover,
.client-notify-list li > a:first-child:focus-visible {
    background: var(--blue-soft);
}

.client-notify-static {
    display: grid;
    gap: 2px;
    flex: 1;
    min-width: 0;
    padding: 10px 8px;
    border-radius: 10px;
}

.client-notify-action {
    margin-top: 2px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--blue);
    font-style: normal;
}

.client-notify-del {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
}

.client-notify-del:hover,
.client-notify-del:focus-visible {
    color: var(--danger);
}

.client-notify-kind {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--blue);
}

.client-notify-list strong {
    font-size: 0.92rem;
}

.client-notify-list span,
.client-notify-list em {
    color: var(--muted);
    font-size: 0.8rem;
    font-style: normal;
}

.client-notify-empty {
    padding: 12px 8px;
    color: var(--muted);
    font-size: 0.88rem;
}

.client-notify-more {
    margin: 8px 6px 2px;
    font-size: 0.86rem;
}

.client-notify-more a {
    color: var(--blue);
}

.client-notify-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.client-notify-page-head h2 {
    margin: 0;
}

.client-notify-page-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.client-notify-page-item {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.client-notify-go {
    min-height: 32px;
    padding: 0 10px;
    font-size: 0.82rem;
}

.client-notify-page-list li.is-unread {
    box-shadow: inset 3px 0 0 var(--blue);
}

.client-welcome h1 {
    margin: 0 0 8px;
}

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

.client-stats article,
.client-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(26, 54, 93, 0.04);
}

.client-stats article {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
}

.client-stats .icon,
.client-list .icon,
.client-empty-box .icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 12px;
}

.client-stats p,
.client-stats span:not(.icon) {
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
}

.client-stats strong {
    display: block;
    margin: 4px 0 2px;
    font-size: 1.7rem;
    letter-spacing: -0.03em;
}

.client-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 16px;
    margin-bottom: 16px;
}

.client-card {
    padding: 22px 24px;
}

.client-card h2 {
    margin: 0 0 14px;
    font-size: 1.05rem;
}

.client-empty,
.client-empty-box p {
    margin: 0;
    color: var(--muted);
}

.client-empty-box {
    display: grid;
    justify-items: start;
    gap: 10px;
    padding: 28px 8px 8px;
}

.client-empty-box.is-compact {
    padding: 8px 0 0;
}

.client-empty-box h3 {
    margin: 0;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
}

.client-empty-box .btn {
    margin-top: 6px;
}

.client-list,
.client-meta {
    list-style: none;
    margin: 0;
    padding: 0;
}

.client-list li,
.client-meta li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid var(--line);
}

.client-list li:first-child,
.client-meta li:first-child {
    border-top: 0;
    padding-top: 0;
}

.client-list strong,
.client-meta li {
    color: var(--text);
}

.client-key {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.04em;
    word-break: break-all;
}

.client-list span:not(.icon),
.client-meta span {
    display: block;
    color: var(--muted);
    font-size: 0.82rem;
}

.client-list li > div {
    flex: 1 1 auto;
    min-width: 0;
}

.client-meta span {
    margin-bottom: 2px;
}

.client-meta li {
    display: block;
}

.client-list em {
    flex: 0 0 auto;
    align-self: center;
    font-style: normal;
    font-size: 0.78rem;
    font-weight: 700;
    color: #64748b;
    background: #f1f5f9;
    border-radius: 999px;
    padding: 4px 10px;
}

.client-list em.is-ok {
    color: #027a48;
    background: #ecfdf3;
}

.client-list em.is-warn,
.client-license-head em.is-warn {
    color: #b54708;
    background: #fffaeb;
}

.client-list em.is-used,
.client-license-head em.is-used {
    color: #1d4ed8;
    background: #eff6ff;
}

.client-list em.is-grace,
.client-license-head em.is-grace {
    color: #c2410c;
    background: #fff7ed;
}

.client-list em.is-bad,
.client-license-head em.is-bad {
    color: #b42318;
    background: #fef3f2;
}

.client-licenses {
    display: grid;
    gap: 16px;
}

.client-license {
    padding: 18px 18px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #f8fafc;
}

.client-license-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.client-license-head h3 {
    margin: 0 0 4px;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
}

.client-license-meta {
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
}

.client-license-head em {
    flex: 0 0 auto;
    font-style: normal;
    font-size: 0.78rem;
    font-weight: 700;
    color: #64748b;
    background: #f1f5f9;
    border-radius: 999px;
    padding: 4px 10px;
}

.client-license-head em.is-ok {
    color: #027a48;
    background: #ecfdf3;
}

.client-license-key {
    margin: 0 0 12px;
}

.client-license-key code {
    display: inline-block;
    margin-bottom: 6px;
}

.client-license-reveal {
    margin: 0;
}

.client-license-reveal summary {
    cursor: pointer;
    color: var(--blue);
    font-size: 0.88rem;
    font-weight: 700;
}

.client-key-full {
    display: block;
    width: 100%;
    margin: 8px 0 4px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.04em;
}

.client-license h4 {
    margin: 12px 0 8px;
    font-size: 0.92rem;
}

.client-license-devices {
    margin-bottom: 8px;
}

.client-license-add {
    margin: 8px 0 4px;
}

.client-license-add .client-fields {
    margin-bottom: 4px;
}

.client-license-renew {
    margin: 12px 0 0;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.client-sub-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-left: auto;
}

.client-sub-actions .btn {
    padding: 8px 12px;
    font-size: 0.85rem;
}

.client-list a {
    color: inherit;
    text-decoration: none;
}

.client-list a:hover {
    color: var(--blue);
}

.client-back {
    margin: 0 0 14px;
}

.client-subs li {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    margin-bottom: 10px;
}

.client-subs li:first-child {
    padding-top: 16px;
}

.client-subs li:last-child {
    margin-bottom: 0;
}

.client-out {
    margin: 8px 0 0;
}

.client-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 22px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(26, 54, 93, 0.04);
}

.client-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 10px;
    color: #334155;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.client-nav-ico {
    display: inline-flex;
    width: 18px;
    height: 18px;
    color: inherit;
}

.client-nav-ico svg {
    width: 18px;
    height: 18px;
}

.client-nav a:hover,
.client-nav a:focus-visible {
    background: var(--blue-soft);
    color: var(--blue);
}

.client-nav a:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

.client-nav a.is-active {
    background: var(--blue);
    color: #fff;
}

.client-nav a.is-active:hover,
.client-nav a.is-active:focus-visible {
    background: var(--blue-dark);
    color: #fff;
}

.client-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    font-style: normal;
}

.client-nav-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #dc2626;
    font-style: normal;
    flex: 0 0 auto;
}

.client-nav a.is-active .client-nav-badge {
    background: #fff;
    color: var(--blue);
}

.client-nav a.is-active .client-nav-dot {
    background: #fff;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}

@media (min-width: 901px) {
    .client-nav {
        flex-wrap: nowrap;
        gap: 4px;
        padding: 5px;
        overflow-x: auto;
    }

    .client-nav a {
        flex: 0 0 auto;
        gap: 5px;
        min-height: 36px;
        padding: 0 8px;
        font-size: 0.8rem;
        white-space: nowrap;
    }

    .client-nav-ico,
    .client-nav-ico svg {
        width: 16px;
        height: 16px;
    }
}

.client-more {
    margin: 14px 0 0;
}

.client-more a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--blue);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
}

.client-more a svg {
    width: 16px;
    height: 16px;
}

.client-more a.is-back svg {
    transform: rotate(180deg);
}

.client-more a:hover,
.client-more a:focus-visible {
    text-decoration: underline;
}

.client-hint {
    margin: 0 0 16px;
    color: var(--muted);
    font-size: 0.9rem;
}

.client-pay-box {
    margin: 16px 0 0;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
}

.client-pay-box h3 {
    margin: 0 0 8px;
    font-size: 1rem;
}

.client-pay-box p {
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

.client-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}

.client-field {
    margin-bottom: 16px;
}

.client-span {
    grid-column: 1 / -1;
}

.client-form {
    position: relative;
}

.client-form input,
.client-form textarea {
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    font: inherit;
    color: var(--text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.client-form textarea {
    min-height: 140px;
    resize: vertical;
    line-height: 1.5;
}

.client-form input:hover,
.client-form textarea:hover {
    border-color: #bfdbfe;
}

.client-form input:focus,
.client-form textarea:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.client-pass {
    margin: 8px 0 20px;
    padding: 16px 18px 4px;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    background: var(--blue-soft);
}

.client-pass legend {
    padding: 0 6px;
    color: var(--blue);
    font-size: 0.92rem;
    font-weight: 800;
}

.client-form > .btn {
    min-width: 200px;
}

.client-quote-decide {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.client-quote-decide textarea {
    min-height: 88px;
}

.client-quote-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0 8px;
}

.client-quote-actions .btn {
    min-width: 140px;
}

.client-danger {
    margin-top: 20px;
    border-color: #fecaca;
    background: #fff7f7;
}

.client-danger h2 {
    color: #b91c1c;
}

.client-danger .client-hint {
    color: #7f1d1d;
}

.client-danger .client-hint a {
    color: #b91c1c;
    font-weight: 700;
}

.client-danger .btn-danger {
    margin-top: 4px;
}

.client-hold {
    min-height: 180px;
}

.client-dash > .wrap > .alert {
    margin-bottom: 16px;
}

@media (max-width: 900px) {
    .client-welcome {
        grid-template-columns: 1fr auto;
        align-items: start;
    }

    .client-welcome-copy {
        grid-column: 1 / -1;
    }

    .client-welcome-actions {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        align-self: start;
    }

    .client-grid,
    .client-fields,
    .auth-hero:not(.is-wide) {
        grid-template-columns: 1fr;
    }

    .client-stats {
        grid-template-columns: 1fr 1fr;
    }

    .client-nav a {
        flex: 1 1 calc(50% - 8px);
        justify-content: flex-start;
    }

    .auth-hero-panel {
        justify-content: flex-start;
    }

    .auth-mock {
        width: 100%;
    }

    .hero,
    .hero-grid,
    .values,
    .cards-3,
    .cards-2,
    .cv-about-card,
    .cv-cards,
    .cv-contacts,
    .cv-focus,
    .cv-split,
    .footer-grid,
    .cta,
    .cta-copy,
    .post-card,
    .page-main .block-columns,
    .auth-grid,
    .contact-hero,
    .contact-grid,
    .contact-fields {
        grid-template-columns: 1fr;
        display: grid;
    }

    .cta,
    .cta-copy {
        justify-items: start;
    }

    .cv-band,
    .cv-band-hero,
    .contact-band,
    .contact-band-hero {
        padding: 48px 0;
    }

    .contact-band-main {
        padding: 0 0 64px;
    }

    .contact-hero-panel {
        display: none;
    }

    .contact-form-card {
        padding: 24px 20px 22px;
    }

    .cv-about-card {
        justify-items: center;
        text-align: left;
    }

    .cv-about-card .copy {
        width: 100%;
    }

    .cv-card-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .cv-dates {
        white-space: normal;
    }

    .phone {
        right: 0;
        bottom: 0;
    }
}

@media (max-width: 640px) {
    .wrap {
        width: min(var(--max), calc(100% - 28px));
    }

    .hero {
        padding-top: 40px;
    }

    .cv-photo,
    .cv-photo img {
        width: 200px;
        height: 200px;
    }

    .devices {
        min-height: 300px;
    }

    .phone {
        width: 124px;
    }

    .modal-actions {
        flex-direction: column-reverse;
    }

    .modal-actions .btn {
        width: 100%;
    }

    .auth-card {
        padding: 28px 20px 22px;
    }

    .auth-card.is-wide .auth-form > .auth-submit {
        width: 100%;
    }

    .contact-form-card .btn,
    .contact-submit {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .client-stats,
    .auth-mock-stats {
        grid-template-columns: 1fr;
    }

    .auth-band {
        padding: 40px 0 36px;
    }

    .auth-band-main {
        padding-bottom: 64px;
    }

    .client-welcome-who {
        min-width: 0;
    }

    .client-logout {
        width: 46px;
        min-width: 46px;
        padding: 0;
        border-radius: 50%;
    }

    .client-logout-text {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .client-form > .btn,
    .client-nav a {
        width: 100%;
        flex-basis: 100%;
    }
}

.pf-page {
    min-height: 48vh;
}

.pf-hero {
    position: relative;
    overflow: hidden;
    padding: 64px 0 56px;
    background:
        radial-gradient(ellipse 70% 80% at 100% 0%, #dbeafe 0%, transparent 55%),
        linear-gradient(180deg, var(--blue-soft) 0%, var(--bg) 100%);
}

.pf-hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: center;
}

.pf-kicker {
    margin: 0 0 10px;
    color: var(--blue);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pf-hero h1 {
    margin: 0 0 14px;
    font-size: clamp(2.1rem, 4vw, 3.15rem);
    line-height: 1.12;
    letter-spacing: -0.04em;
}

.pf-count {
    display: inline-flex;
    align-items: center;
    margin: 0 0 18px;
    padding: 5px 12px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #fff;
    color: var(--blue);
    font-size: 0.82rem;
    font-weight: 700;
}

.pf-intro {
    max-width: 36rem;
}

.pf-intro p {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 1.08rem;
}

.pf-intro p:last-child {
    margin-bottom: 0;
}

.pf-intro .block-actions {
    margin: 22px 0 0;
}

.pf-hero-copy .hero-actions {
    margin-top: 28px;
}

.pf-hero-art {
    position: relative;
    min-height: 280px;
}

.pf-sketch {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 16px;
    width: min(100%, 360px);
    padding: 20px 22px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.pf-sketch.is-back {
    top: 8px;
    right: 8px;
    opacity: 0.55;
    transform: rotate(4deg);
}

.pf-sketch.is-mid {
    top: 72px;
    right: 36px;
    opacity: 0.78;
    transform: rotate(-3deg);
}

.pf-sketch.is-front {
    top: 136px;
    right: 0;
    z-index: 2;
}

.pf-bars {
    display: grid;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.pf-bars strong,
.pf-bars i {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf-bars strong {
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.25;
}

.pf-bars i {
    color: var(--muted);
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 600;
}

.pf-band {
    padding: 64px 0;
}

.pf-band-alt {
    background: var(--bg-soft);
}

#proyectos {
    scroll-margin-top: 92px;
}

.pf-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0 0 32px;
}

.pf-head h2 {
    margin: 0;
    font-size: 1.7rem;
    letter-spacing: -0.03em;
}

.pf-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.pf-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 10px 28px rgba(26, 54, 93, 0.05);
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

a.pf-card:hover,
a.pf-card:focus-visible {
    transform: translateY(-4px);
    border-color: #93c5fd;
    box-shadow: 0 22px 44px rgba(37, 99, 235, 0.14);
}

a.pf-card:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

.pf-media {
    display: block;
    aspect-ratio: 16 / 10;
    height: auto;
    min-height: 160px;
    background:
        linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    overflow: hidden;
}

.pf-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pf-media.is-tall-crop {
    position: relative;
}

.pf-media.is-tall-crop img,
.public-hub .pf-media.is-tall-crop img,
.home-case-media.is-tall-crop img,
.hub-preview-media.is-tall-crop img {
    object-position: top center;
}

.pf-media.is-tall-crop::after,
.home-case-media.is-tall-crop::after,
.hub-preview-media.is-tall-crop::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 32%;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.2), transparent);
    pointer-events: none;
}

.public-hub .hub-card:hover .pf-media.is-tall-crop img,
.public-hub .hub-card:focus-within .pf-media.is-tall-crop img {
    transform: none;
}

.pf-media.is-tall-scroll {
    position: relative;
    aspect-ratio: auto;
    max-height: min(72vh, 920px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
    background: #0b1220;
}

.pf-media.is-tall-scroll img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

.pf-media-scroll-hint {
    position: sticky;
    bottom: 0;
    z-index: 1;
    display: block;
    padding: 28px 16px 12px;
    margin-top: -44px;
    background: linear-gradient(to top, rgba(11, 18, 32, 0.92) 38%, transparent);
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
    pointer-events: none;
}

.pf-media-expand {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 0.74rem;
    font-weight: 800;
    text-decoration: none;
}

.pf-media-expand:hover,
.pf-media-expand:focus-visible {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(15, 23, 42, 0.88);
    color: #fff;
}

.hub-preview-media .pf-media-expand,
.pf-detail-related .pf-media-expand {
    right: 8px;
    bottom: 8px;
    min-height: 28px;
    padding: 4px 8px;
    font-size: 0.68rem;
}

.pf-media.is-viewable {
    position: relative;
}

.pf-detail-page .pf-media.is-viewable {
    cursor: zoom-in;
}

.pf-cover-viewer {
    position: fixed;
    inset: 0;
    z-index: 260;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.pf-cover-viewer.is-open {
    display: flex;
}

body.pf-cover-viewer-open {
    overflow: hidden;
}

.pf-cover-viewer-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    background: rgba(11, 18, 32, 0.82);
    cursor: zoom-out;
}

.pf-cover-viewer-panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(980px, 100%);
    max-height: calc(100vh - 32px);
    overflow: hidden;
    border-radius: 18px;
    background: #0f172a;
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.45);
}

.pf-cover-viewer-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 12px 16px;
    background: #fff;
    color: var(--text);
}

.pf-cover-viewer-title {
    flex: 1 1 160px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.95rem;
}

.pf-cover-viewer-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.pf-cover-viewer-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--text);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

.pf-cover-viewer-tool:hover,
.pf-cover-viewer-tool:focus-visible {
    border-color: var(--blue);
    color: var(--blue);
}

.pf-cover-viewer-close {
    padding-inline: 14px;
}

.pf-cover-viewer-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-height: min(68vh, 720px);
    overflow: hidden;
    touch-action: none;
    background:
        radial-gradient(circle at 50% 20%, rgba(59, 130, 246, 0.12), transparent 55%),
        #0b1220;
    cursor: grab;
}

.pf-cover-viewer-stage.is-dragging {
    cursor: grabbing;
}

.pf-cover-viewer-stage img {
    display: block;
    max-width: 100%;
    max-height: min(68vh, 720px);
    width: auto;
    height: auto;
    object-fit: contain;
    transform-origin: center center;
    user-select: none;
    -webkit-user-drag: none;
}

.pf-cover-viewer-hint {
    margin: 0;
    padding: 10px 16px 14px;
    background: #0f172a;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.78rem;
    text-align: center;
}

@media (max-width: 720px) {
    .pf-cover-viewer {
        padding: 0;
    }

    .pf-cover-viewer-panel {
        width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }

    .pf-cover-viewer-stage {
        min-height: calc(100vh - 148px);
    }

    .pf-cover-viewer-stage img {
        max-height: calc(100vh - 148px);
    }
}

.pf-media.mg-cover-ph {
    min-height: 160px;
}

.pf-media-icon {
    display: grid;
    place-items: center;
}

.pf-media-icon .icon {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.12);
}

.pf-media-icon .icon img,
.pf-media-icon .icon svg {
    width: 32px;
    height: 32px;
}

.pf-copy {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px 22px 20px;
}

.pf-card h3 {
    margin: 0 0 8px;
    font-size: 1.2rem;
    letter-spacing: -0.03em;
}

.pf-card p {
    margin: 0;
    color: var(--muted);
    flex: 1;
}

.pf-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    color: var(--blue);
    font-size: 0.92rem;
    font-weight: 700;
}

.pf-more .chevron {
    width: 18px;
    height: 18px;
    color: currentColor;
}

.pf-more .chevron img,
.pf-more .chevron svg {
    width: 18px;
    height: 18px;
}

a.pf-card:hover .pf-more,
a.pf-card:focus-visible .pf-more {
    color: var(--blue-dark);
}

.pf-empty {
    margin: 0;
    padding: 36px 24px;
    text-align: center;
    color: var(--muted);
    background: #fff;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
}

.pf-empty a {
    color: var(--blue);
    font-weight: 700;
}

.pf-page .pager {
    margin-top: 28px;
}

.pf-cta {
    box-shadow: 0 14px 32px rgba(37, 99, 235, 0.06);
}

@media (max-width: 900px) {
    .pf-hero-grid,
    .pf-grid,
    .pf-cta,
    .pf-cta .cta-copy {
        grid-template-columns: 1fr;
        display: grid;
    }

    .pf-hero {
        padding: 48px 0 40px;
    }

    .pf-hero-art {
        min-height: 220px;
        max-width: 400px;
        margin: 0 auto;
    }

    .pf-band {
        padding: 48px 0;
    }

    .pf-cta,
    .pf-cta .cta-copy {
        justify-items: start;
    }
}

@media (max-width: 640px) {
    .pf-hero h1 {
        font-size: 2rem;
    }

    .pf-media {
        height: 160px;
    }

    .pf-sketch.is-back,
    .pf-sketch.is-mid {
        display: none;
    }

    .pf-sketch.is-front {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
    }

    .pf-hero-art {
        min-height: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pf-card,
    a.pf-card:hover,
    a.pf-card:focus-visible {
        transition: none;
        transform: none;
    }
}

@media (max-width: 1100px) {
    .svc-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 900px) {
    .svc-hero,
    .svc-steps {
        grid-template-columns: 1fr;
    }

    .svc-hero-visual {
        display: none;
    }

    .svc-band,
    .svc-band-hero {
        padding: 48px 0;
    }

    .svc-band-cta {
        padding: 12px 0 64px;
    }
}

@media (max-width: 700px) {
    .svc-grid {
        grid-template-columns: 1fr;
    }

    .svc-intro .block-actions .btn,
    .svc-hero-actions .btn,
    .store-page .cta .btn,
    .landing-page .cta .btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .svc-card,
    a.svc-card:hover,
    a.svc-card:focus-visible,
    .svc-preview-card {
        transition: none;
        transform: none;
    }
}

.blog-page {
    min-height: 48vh;
}

.blog-hero {
    position: relative;
    overflow: hidden;
    padding: 64px 0 56px;
    background:
        radial-gradient(ellipse 70% 80% at 100% 0%, #dbeafe 0%, transparent 55%),
        linear-gradient(180deg, var(--blue-soft) 0%, var(--bg) 100%);
}

.blog-hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: center;
}

.blog-kicker {
    margin: 0 0 10px;
    color: var(--blue);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.blog-kicker a {
    color: inherit;
    text-decoration: none;
}

.blog-kicker a:hover,
.blog-kicker a:focus-visible {
    text-decoration: underline;
}

.blog-hero h1,
.blog-article-head h1 {
    margin: 0 0 14px;
    font-size: clamp(2.1rem, 4vw, 3.15rem);
    line-height: 1.12;
    letter-spacing: -0.04em;
}

.blog-count {
    display: inline-flex;
    align-items: center;
    margin: 0 0 18px;
    padding: 5px 12px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #fff;
    color: var(--blue);
    font-size: 0.82rem;
    font-weight: 700;
}

.blog-intro,
.blog-lead {
    max-width: 36rem;
}

.blog-intro p,
.blog-lead {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 1.08rem;
}

.blog-intro p:last-child {
    margin-bottom: 0;
}

.blog-hero-copy .hero-actions {
    margin-top: 28px;
}

.blog-hero-art {
    position: relative;
    min-height: 280px;
}

.blog-sketch {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 16px;
    width: min(100%, 360px);
    padding: 20px 22px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.blog-sketch.is-back {
    top: 8px;
    right: 8px;
    opacity: 0.55;
    transform: rotate(4deg);
}

.blog-sketch.is-mid {
    top: 72px;
    right: 36px;
    opacity: 0.78;
    transform: rotate(-3deg);
}

.blog-sketch.is-front {
    top: 132px;
    right: 0;
}

.blog-bars {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.blog-bars strong {
    font-size: 0.98rem;
    letter-spacing: -0.02em;
}

.blog-bars i {
    color: var(--muted);
    font-style: normal;
    font-size: 0.86rem;
}

.blog-band {
    padding: 64px 0;
}

.blog-band-alt {
    background: var(--bg-soft);
}

.blog-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 28px;
}

.blog-head h2 {
    margin: 0;
    text-align: left;
    font-size: 1.55rem;
    letter-spacing: -0.03em;
}

.blog-filters {
    margin: -12px 0 24px;
}

.blog-filters ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.blog-filter {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.blog-filter:hover,
.blog-filter:focus-visible,
.blog-filter.is-current {
    border-color: #bfdbfe;
    background: var(--blue-soft);
    color: var(--blue);
}

.blog-filter:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

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

.blog-empty a {
    color: var(--blue);
    font-weight: 700;
    text-decoration: none;
}

.blog-empty a:hover,
.blog-empty a:focus-visible {
    text-decoration: underline;
}

.blog-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.blog-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(26, 54, 93, 0.04);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.blog-card:hover,
.blog-card:focus-visible {
    border-color: #bfdbfe;
    box-shadow: var(--shadow);
    transform: translateY(-3px);
}

.blog-card:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

.blog-media {
    display: block;
    height: 200px;
    overflow: hidden;
    background: var(--blue-soft);
}

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

.blog-media-icon {
    display: grid;
    place-items: center;
}

.blog-media-icon .icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.12);
}

.blog-card-copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    padding: 22px 22px 20px;
}

.blog-card-copy time {
    color: var(--blue);
    font-size: 0.82rem;
    font-weight: 700;
}

.blog-card-cats {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.blog-card-copy h2 {
    margin: 0;
    font-size: 1.22rem;
    letter-spacing: -0.03em;
    line-height: 1.3;
}

.blog-card-copy p {
    margin: 0;
    color: var(--muted);
    flex: 1;
}

.blog-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    color: var(--blue);
    font-size: 0.92rem;
    font-weight: 700;
}

.blog-more .chevron {
    width: 18px;
    height: 18px;
}

.blog-more .chevron img,
.blog-more .chevron svg {
    width: 18px;
    height: 18px;
}

.blog-article-hero {
    padding: 56px 0 28px;
    background:
        radial-gradient(ellipse 60% 70% at 0% 0%, #dbeafe 0%, transparent 50%),
        linear-gradient(180deg, var(--blue-soft) 0%, var(--bg) 100%);
}

.blog-article-head {
    max-width: 760px;
}

.blog-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin: 18px 0 0;
    color: var(--muted);
    font-size: 0.92rem;
    font-weight: 600;
}

.blog-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.blog-cat {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--blue-soft);
    color: var(--blue);
    font-size: 0.74rem;
    font-weight: 800;
    text-decoration: none;
}

.blog-cat:hover,
.blog-cat:focus-visible {
    background: #dbeafe;
    color: var(--blue);
}

.blog-cat:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

.blog-cover {
    margin: 8px 0 0;
}

.blog-cover img {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.blog-article-body {
    max-width: 760px;
    padding: 36px 0 8px;
}

.blog-prose p {
    margin: 0 0 18px;
    color: var(--text);
    font-size: 1.05rem;
}

.blog-prose .embed img {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.blog-back {
    margin: 28px 0 0;
}

.blog-back a {
    color: var(--blue);
    font-weight: 700;
    text-decoration: none;
}

.blog-back a:hover,
.blog-back a:focus-visible {
    text-decoration: underline;
}

.blog-cta {
    box-shadow: 0 14px 32px rgba(37, 99, 235, 0.06);
}

.blog-page .pager {
    margin-top: 28px;
}

@media (max-width: 900px) {
    .blog-hero-grid,
    .blog-grid,
    .blog-cta,
    .blog-cta .cta-copy {
        grid-template-columns: 1fr;
        display: grid;
    }

    .blog-hero,
    .blog-article-hero {
        padding: 48px 0 40px;
    }

    .blog-hero-art {
        min-height: 220px;
        max-width: 400px;
        margin: 0 auto;
    }

    .blog-band {
        padding: 48px 0;
    }

    .blog-cta,
    .blog-cta .cta-copy {
        justify-items: start;
    }
}

@media (max-width: 640px) {
    .blog-hero h1,
    .blog-article-head h1 {
        font-size: 2rem;
    }

    .blog-media {
        height: 168px;
    }

    .blog-sketch.is-back,
    .blog-sketch.is-mid {
        display: none;
    }

    .blog-sketch.is-front {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
    }

    .blog-hero-art {
        min-height: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .blog-card,
    a.blog-card:hover,
    a.blog-card:focus-visible {
        transition: none;
        transform: none;
    }
}

.support-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

.support-card-head h2 {
    margin-bottom: 6px;
}

.support-card-head .btn {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 0 16px;
}

.support-inbox {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.support-inbox-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.support-chevron {
    display: inline-flex;
    width: 18px;
    height: 18px;
    color: var(--blue);
}

.support-chevron svg {
    width: 18px;
    height: 18px;
}

.support-inbox-row:hover,
.support-inbox-row:focus-visible {
    border-color: #bfdbfe;
    background: var(--blue-soft);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.06);
}

.support-inbox-row:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

.support-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.support-inbox-main strong,
.support-inbox-main span {
    display: block;
}

.support-inbox-main strong {
    margin-bottom: 4px;
    color: var(--text);
}

.support-inbox-main span {
    color: var(--muted);
    font-size: 0.86rem;
}

.support-inbox-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    text-align: right;
}

.support-inbox-meta em {
    font-style: normal;
    font-size: 0.78rem;
    font-weight: 700;
    color: #64748b;
    background: #f1f5f9;
    border-radius: 999px;
    padding: 4px 8px;
}

.support-inbox-meta em.is-ok {
    color: #027a48;
    background: #ecfdf3;
}

.support-inbox-meta em.is-wait,
.client-hint em.is-wait {
    color: #c2410c;
    background: #fff7ed;
}

.support-inbox-meta time {
    color: var(--muted);
    font-size: 0.78rem;
}

.client-hint em {
    display: inline-block;
    font-style: normal;
    font-size: 0.78rem;
    font-weight: 700;
    color: #64748b;
    background: #f1f5f9;
    border-radius: 999px;
    padding: 3px 8px;
}

.client-hint em.is-ok {
    color: #027a48;
    background: #ecfdf3;
}

.support-bubbles {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 8px 0 20px;
}

.support-bubble {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    max-width: 86%;
}

.support-bubble.is-mine {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.support-bubble-body {
    padding: 12px 14px;
    border-radius: 16px 16px 16px 6px;
    background: #f1f5f9;
    border: 1px solid var(--line);
}

.support-bubble.is-mine .support-bubble-body {
    border-radius: 16px 16px 6px 16px;
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

.support-bubble.is-staff:not(.is-mine) .support-avatar,
.support-bubble.is-mine.is-staff .support-avatar {
    background: #1d4ed8;
}

.support-bubble-body header {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: baseline;
    margin-bottom: 6px;
}

.support-bubble-body header strong {
    font-size: 0.86rem;
}

.support-bubble-body header time {
    color: var(--muted);
    font-size: 0.76rem;
}

.support-bubble.is-mine .support-bubble-body header time {
    color: rgba(255, 255, 255, 0.78);
}

.support-bubble-body p {
    margin: 0;
    white-space: pre-wrap;
    line-height: 1.5;
}

.support-attach {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
}

.support-attach-img {
    display: block;
    max-width: 240px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
}

.support-attach-img.is-zoom {
    cursor: zoom-in;
}

.support-attach-img img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 220px;
    object-fit: cover;
}

.support-attach-file {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: baseline;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.06);
    color: inherit;
    text-decoration: none;
    font-size: 0.86rem;
    font-weight: 600;
}

.support-attach-file:hover,
.support-attach-file:focus-visible {
    text-decoration: underline;
}

.support-attach-file em {
    font-style: normal;
    font-weight: 500;
    font-size: 0.78rem;
    opacity: 0.78;
}

.support-bubble.is-mine .support-attach-img {
    border-color: rgba(255, 255, 255, 0.28);
}

.support-bubble.is-mine .support-attach-file {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.media-lightbox {
    z-index: 240;
    padding: 16px;
}

.support-bubbles > .media-lightbox {
    align-self: stretch;
    width: 0;
    height: 0;
    margin: 0;
    overflow: visible;
    pointer-events: none;
}

.support-bubbles > .media-lightbox:target {
    width: auto;
    height: auto;
    pointer-events: auto;
}

.media-lightbox-card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(920px, 100%);
    max-height: calc(100vh - 32px);
    margin: 0;
    overflow: hidden;
    background: #0f172a;
    border-radius: 16px;
    box-shadow: var(--shadow);
}

.media-lightbox-card img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100vh - 110px);
    margin: 0 auto;
    object-fit: contain;
    background: #0f172a;
}

.media-lightbox-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 0;
    padding: 12px 16px;
    background: #fff;
    color: var(--text);
}

.media-lightbox-bar strong {
    flex: 1 1 140px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media-lightbox-bar a:not(.btn) {
    color: var(--blue);
    font-weight: 600;
    text-decoration: none;
}

.media-lightbox-bar a:not(.btn):hover,
.media-lightbox-bar a:not(.btn):focus-visible {
    text-decoration: underline;
}

.support-file-field {
    margin: 0 0 14px;
}

.support-file-field .client-hint {
    margin: 6px 0 0;
}

.support-reply {
    margin-top: 8px;
}

@media (max-width: 700px) {
    .support-card-head {
        flex-direction: column;
    }

    .support-inbox-row {
        grid-template-columns: auto 1fr auto;
    }

    .support-inbox-meta {
        grid-column: 2;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .support-chevron {
        grid-column: 3;
        grid-row: 1 / span 2;
    }

    .support-bubble {
        max-width: 100%;
    }
}

.shop-page {
    min-height: 48vh;
}

.shop-hero {
    padding: 72px 0 56px;
    background:
        radial-gradient(circle at 88% 12%, #dbeafe 0, transparent 32%),
        linear-gradient(180deg, #f8fbff 0, #fff 72%);
}

.shop-hero-grid,
.shop-item-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px 56px;
    align-items: center;
}

.shop-kicker {
    margin: 0 0 10px;
    color: var(--blue);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.shop-kicker a {
    color: inherit;
    text-decoration: none;
}

.shop-kicker a:hover,
.shop-kicker a:focus-visible {
    text-decoration: underline;
}

.shop-hero h1,
.shop-item-copy h1 {
    margin: 0 0 10px;
    font-size: clamp(2.1rem, 4vw, 3rem);
    letter-spacing: -0.04em;
    line-height: 1.12;
}

.shop-count {
    margin: 0 0 14px;
    color: var(--blue);
    font-size: 0.92rem;
    font-weight: 700;
}

.shop-intro p,
.shop-empty,
.shop-item-note {
    color: var(--muted);
}

.shop-intro p {
    margin: 0 0 16px;
    font-size: 1.05rem;
}

.shop-intro p:last-child {
    margin-bottom: 0;
}

.shop-hero-copy .hero-actions,
.shop-item-copy .hero-actions {
    margin-top: 22px;
}

.shop-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.shop-pills li {
    padding: 6px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #dbeafe;
    color: var(--blue);
    font-size: 0.78rem;
    font-weight: 700;
}

.shop-hero-art {
    position: relative;
    min-height: 280px;
}

.shop-sketch {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 14px;
    width: min(320px, 100%);
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow);
}

.shop-sketch.is-back {
    top: 8px;
    right: 8px;
    opacity: 0.55;
    transform: rotate(4deg);
}

.shop-sketch.is-mid {
    top: 72px;
    right: 36px;
    opacity: 0.78;
    transform: rotate(-3deg);
}

.shop-sketch.is-front {
    top: 148px;
    right: 0;
}

.shop-bars {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.shop-bars strong {
    font-size: 0.95rem;
    letter-spacing: -0.02em;
}

.shop-bars i {
    color: var(--muted);
    font-style: normal;
    font-size: 0.8rem;
}

.shop-band {
    padding: 72px 0;
    background: var(--bg);
}

.shop-band-alt {
    background: var(--bg-soft);
}

.shop-band-cta {
    padding-bottom: 88px;
}

.shop-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
}

.shop-head h2 {
    margin: 0;
    font-size: 1.55rem;
    letter-spacing: -0.03em;
}

.shop-head .shop-kicker {
    margin: 0 0 4px;
}

.shop-head-lead {
    margin: 8px 0 0;
    max-width: 52ch;
    color: var(--muted);
    font-size: 0.98rem;
    line-height: 1.55;
}

.shop-result-count {
    margin: 10px 0 0;
    color: var(--blue);
    font-size: 0.86rem;
    font-weight: 700;
}

.shop-band-express {
    background:
        radial-gradient(circle at 92% 8%, #dbeafe 0, transparent 28%),
        var(--bg-soft);
}

.shop-steps,
.shop-grid,
.shop-wide-grid {
    display: grid;
    gap: 18px;
}

.shop-steps {
    grid-template-columns: repeat(3, 1fr);
    list-style: none;
    margin: 0;
    padding: 0;
}

.shop-step,
.shop-card,
.shop-wide,
.shop-empty-card,
.shop-includes {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.shop-step {
    position: relative;
    display: grid;
    gap: 12px;
    padding: 22px 20px 20px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.shop-step:hover {
    border-color: #bfdbfe;
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.shop-step-num {
    position: absolute;
    top: 16px;
    right: 16px;
    color: #bfdbfe;
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1;
}

.shop-step h3,
.shop-card h3,
.shop-wide h3,
.shop-empty-card h3,
.shop-includes h2 {
    margin: 0 0 6px;
    letter-spacing: -0.02em;
}

.shop-step p,
.shop-card p,
.shop-wide p,
.shop-empty-card p {
    margin: 0;
    color: var(--muted);
}

.shop-wide-grid {
    grid-template-columns: 1fr 1fr;
}

.shop-wide {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    align-items: center;
    padding: 20px;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.shop-wide-media,
.shop-media,
.shop-item-media {
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--blue-soft);
}

.shop-wide-media {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    flex: 0 0 72px;
}

.shop-wide-media img,
.shop-media img,
.shop-item-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shop-wide-copy,
.shop-card-copy {
    min-width: 0;
}

.shop-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    color: var(--blue);
    font-size: 0.88rem;
    font-weight: 700;
}

.shop-more .chevron,
.shop-more .chevron svg,
.shop-more .chevron img {
    width: 16px;
    height: 16px;
}

.shop-filter-stack {
    display: grid;
    gap: 12px;
    margin: 0 0 26px;
}

.shop-filters {
    margin: 0;
}

.shop-filters-cats .shop-filter {
    font-weight: 650;
}

.shop-filters ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.shop-filter {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.shop-filter:hover,
.shop-filter:focus-visible,
.shop-filter.is-current {
    border-color: #bfdbfe;
    background: var(--blue-soft);
    color: var(--blue);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.08);
}

.shop-filter:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

.shop-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.shop-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.shop-card-link {
    display: grid;
    grid-template-rows: auto 1fr;
    flex: 1 1 auto;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.shop-card--express {
    border-color: #dbeafe;
}

.shop-media {
    position: relative;
    aspect-ratio: 16 / 10;
    height: auto;
    min-height: 168px;
    background: linear-gradient(145deg, #eff6ff 0%, #f8fafc 100%);
}

.shop-media.is-express-cover::after {
    content: "Express";
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--blue);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

.shop-media img {
    transition: transform 0.28s ease;
}

.shop-card:hover .shop-media img,
.shop-card:focus-within .shop-media img {
    transform: scale(1.04);
}

.shop-media-icon .icon,
.shop-wide-media .icon,
.shop-item-media .icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
}

.shop-card-copy {
    display: grid;
    gap: 8px;
    padding: 18px 18px 10px;
    align-content: start;
}

.shop-card h3 {
    font-size: 1.08rem;
    line-height: 1.28;
}

.shop-card-meta,
.shop-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.shop-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--blue-soft);
    color: var(--blue);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.shop-badge.is-soft {
    background: #f1f5f9;
    color: #475569;
}

.shop-badge.is-accent {
    background: #ecfdf5;
    color: #047857;
}

.shop-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding: 0 18px 16px;
}

.shop-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
}

.shop-card-actions .btn,
.shop-card-btn {
    min-height: 36px;
    padding: 6px 12px;
    font-size: 0.84rem;
    gap: 4px;
}

.shop-price,
.shop-item-price {
    color: var(--blue);
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.shop-card--express .shop-price {
    font-size: 1.2rem;
}

.shop-item-price {
    margin: 8px 0 0;
    font-size: 1.7rem;
}

.shop-card:hover,
.shop-card:focus-within,
a.shop-wide:hover,
a.shop-wide:focus-visible {
    border-color: #bfdbfe;
    box-shadow: var(--shadow);
    transform: translateY(-3px);
}

.shop-card-link:focus-visible,
a.shop-wide:focus-visible,
.shop-kicker a:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

.shop-empty {
    margin: 0;
}

.shop-empty a {
    color: var(--blue);
    font-weight: 700;
}

.shop-empty a:hover,
.shop-empty a:focus-visible {
    text-decoration: underline;
}

.shop-empty-card {
    display: grid;
    justify-items: start;
    gap: 10px;
    padding: 36px 28px;
}

.shop-empty-card .btn {
    margin-top: 8px;
}

.shop-item-hero {
    align-items: start;
}

.shop-item-aside {
    display: grid;
    gap: 18px;
}

.shop-item-media {
    min-height: 240px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
}

.shop-includes {
    padding: 22px 22px 18px;
}

.shop-includes ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.shop-includes li {
    position: relative;
    padding: 8px 0 8px 22px;
    color: var(--muted);
}

.shop-includes li + li {
    border-top: 1px solid #eef2f7;
}

.shop-includes li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 16px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--blue);
}

.shop-item-note {
    margin: 16px 0 0;
    font-size: 0.9rem;
}

.shop-page .cta {
    margin: 0;
}

.shop-page .pager {
    margin-top: 28px;
}

@media (max-width: 1100px) {
    .shop-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 900px) {
    .shop-hero-grid,
    .shop-item-grid,
    .shop-steps,
    .shop-wide-grid {
        grid-template-columns: 1fr;
    }

    .shop-hero,
    .shop-band {
        padding: 48px 0;
    }

    .shop-hero-art {
        min-height: 220px;
        max-width: 400px;
        margin: 0 auto;
    }
}

@media (max-width: 640px) {
    .shop-hero h1,
    .shop-item-copy h1 {
        font-size: 2rem;
    }

    .shop-grid,
    .shop-hero-copy .hero-actions,
    .shop-item-copy .hero-actions {
        grid-template-columns: 1fr;
        display: grid;
    }

    .shop-media {
        min-height: 150px;
    }

    .shop-grid {
        gap: 16px;
    }

    .shop-sketch.is-back,
    .shop-sketch.is-mid {
        display: none;
    }

    .shop-sketch.is-front {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
    }

    .shop-hero-art {
        min-height: 0;
    }

    .shop-wide {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .shop-card,
    .shop-wide,
    .shop-step,
    .shop-card:hover,
    .shop-card:focus-within,
    a.shop-wide:hover,
    a.shop-wide:focus-visible {
        transition: none;
        transform: none;
    }
}

.pdp-page {
    min-height: 48vh;
}

.pdp-hero {
    position: relative;
    overflow: hidden;
    padding: 40px 0 56px;
    background:
        radial-gradient(ellipse 60% 70% at 0% 0%, #dbeafe 0%, transparent 50%),
        linear-gradient(180deg, var(--blue-soft) 0%, var(--bg) 100%);
}

.pdp-crumb {
    margin: 0 0 28px;
}

.pdp-crumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 600;
}

.pdp-crumb li:not(:last-child)::after {
    content: "/";
    margin-left: 8px;
    color: #94a3b8;
    font-weight: 500;
}

.pdp-crumb a {
    color: var(--blue);
    text-decoration: none;
}

.pdp-crumb a:hover,
.pdp-crumb a:focus-visible {
    text-decoration: underline;
}

.pdp-crumb a:focus-visible,
.pdp-related-card:focus-visible,
.pdp-actions .btn:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

.pdp-crumb [aria-current="page"] {
    color: var(--text);
}

.pdp-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 48px;
    align-items: start;
}

.pdp-gallery,
.pdp-figure,
.pdp-placeholder,
.pdp-cover {
    border: 1px solid var(--line);
    border-radius: 24px;
    background: #fff;
    box-shadow: var(--shadow);
}

.pdp-cover-link {
    display: block;
    color: inherit;
    text-decoration: none;
    border-radius: 24px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.pdp-cover-link:hover,
.pdp-cover-link:focus-visible {
    box-shadow: 0 16px 40px rgba(37, 99, 235, 0.14);
    transform: translateY(-2px);
}

.pdp-cover-link:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

.pdp-cover,
.pdp-figure.pdp-cover {
    position: relative;
    aspect-ratio: 16 / 10;
    min-height: 0;
    overflow: hidden;
}

.pdp-cover img,
.pdp-figure.pdp-cover img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    display: block;
}

.pdp-figure {
    position: relative;
    margin: 0;
    overflow: hidden;
}

.pdp-figure:not(.pdp-cover) {
    min-height: 360px;
}

.pdp-figure:not(.pdp-cover) img {
    width: 100%;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
}

.pdp-figure-badge {
    position: absolute;
    left: 16px;
    bottom: 16px;
    margin: 0;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--blue);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pdp-placeholder {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 12px;
    aspect-ratio: 16 / 10;
    min-height: 0;
    background:
        radial-gradient(circle at 30% 20%, #dbeafe 0%, transparent 46%),
        linear-gradient(180deg, #fff 0%, var(--blue-soft) 100%);
}

.pdp-placeholder-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.1);
}

.pdp-placeholder-icon .icon,
.pdp-placeholder-icon svg,
.pdp-placeholder-icon img {
    width: 32px;
    height: 32px;
}

.pdp-placeholder-type {
    color: var(--blue);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mg-cover-ph {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
    box-sizing: border-box;
    aspect-ratio: 16 / 10;
    width: 100%;
    min-height: 0;
    padding: 16px 18px;
    overflow: hidden;
    background:
        radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.55), transparent 34%),
        linear-gradient(145deg, var(--mg-cover-accent, #2563eb) 0%, var(--mg-cover-soft, #dbeafe) 72%);
    color: #0f172a;
}

.mg-cover-ph::before {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
    pointer-events: none;
}

.mg-cover-ph-kicker,
.mg-cover-ph-title,
.mg-cover-ph-slug {
    position: relative;
    z-index: 1;
}

.mg-cover-ph-kicker {
    width: fit-content;
    padding: 4px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mg-cover-accent, #2563eb) 14%, #fff);
    color: var(--mg-cover-accent, #2563eb);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mg-cover-ph-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: clamp(1rem, 2.4vw, 1.35rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.mg-cover-ph-slug {
    color: #64748b;
    font-size: 0.78rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pdp-cover.mg-cover-ph,
.pdp-placeholder.mg-cover-ph {
    border-radius: 24px;
    min-height: 0;
}

.shop-wide-media.mg-cover-ph,
.shop-wide-media.is-placeholder {
    aspect-ratio: 1;
    min-height: 72px;
    padding: 10px;
    border-radius: 18px;
}

.shop-wide-media.mg-cover-ph .mg-cover-ph-title,
.shop-wide-media.mg-cover-ph .mg-cover-ph-slug,
.shop-wide-media.is-placeholder .mg-cover-ph-title,
.shop-wide-media.is-placeholder .mg-cover-ph-slug {
    display: none;
}

.shop-wide-media.mg-cover-ph::before,
.shop-wide-media.is-placeholder::before {
    inset: 8px;
    border-radius: 12px;
}

.product-cover-photo {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 16px;
}

.product-cover-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pdp-kicker {
    margin: 0 0 10px;
    color: var(--blue);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pdp-buy h1 {
    margin: 0 0 12px;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.12;
    letter-spacing: -0.04em;
}

.pdp-price {
    margin: 0 0 16px;
    color: var(--blue);
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.pdp-excerpt {
    margin: 0 0 22px;
    max-width: 36rem;
    color: var(--muted);
    font-size: 1.08rem;
}

.pdp-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.pdp-cat {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--blue-soft);
    color: var(--blue);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.pdp-cat:hover,
.pdp-cat:focus-visible {
    background: #dbeafe;
    color: var(--blue);
}

.pdp-cat:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

.pdp-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0 0 24px;
}

.pdp-meta div {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}

.pdp-meta dt {
    margin: 0 0 4px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pdp-meta dd {
    margin: 0;
    font-weight: 700;
}

.pdp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 16px;
}

.pdp-actions .btn {
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.pdp-actions .btn:hover,
.pdp-actions .btn:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.16);
}

.pdp-note {
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
}

.pdp-band {
    padding: 64px 0;
}

.pdp-band-alt {
    background: var(--bg-soft);
}

.pdp-band-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
}

.pdp-panel {
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: 0 10px 24px rgba(26, 54, 93, 0.04);
}

.pdp-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
}

.pdp-head h2 {
    margin: 0;
    font-size: 1.35rem;
    letter-spacing: -0.03em;
}

.pdp-includes {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pdp-includes li {
    position: relative;
    padding: 10px 0 10px 28px;
    border-top: 1px solid #f1f5f9;
}

.pdp-includes li:first-child {
    border-top: 0;
    padding-top: 0;
}

.pdp-includes li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.05em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--blue);
}

.pdp-prose p {
    margin: 0 0 14px;
    color: var(--text);
    font-size: 1.02rem;
}

.pdp-prose p:last-child {
    margin-bottom: 0;
}

.pdp-prose ul,
.pdp-prose ol {
    margin: 0 0 14px;
    padding-left: 1.2em;
}

.pdp-muted {
    margin: 0;
    color: var(--muted);
}

.pdp-related {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.pdp-related-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(26, 54, 93, 0.04);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.pdp-related-card:hover,
.pdp-related-card:focus-visible {
    border-color: #bfdbfe;
    box-shadow: var(--shadow);
    transform: translateY(-3px);
}

.pdp-related-media {
    display: block;
    aspect-ratio: 16 / 10;
    height: auto;
    overflow: hidden;
    background: var(--blue-soft);
}

.pdp-related-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pdp-related-media-icon {
    display: grid;
    place-items: center;
}

.pdp-related-media-icon .icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.12);
}

.pdp-related-copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    padding: 20px 20px 18px;
}

.pdp-related-copy strong {
    font-size: 1.12rem;
    letter-spacing: -0.03em;
}

.pdp-related-copy p {
    margin: 0;
    color: var(--muted);
    flex: 1;
}

.pdp-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    color: var(--blue);
    font-size: 0.92rem;
    font-weight: 700;
}

.pdp-more .chevron,
.pdp-more .chevron svg,
.pdp-more .chevron img {
    width: 18px;
    height: 18px;
}

.pdp-cta {
    box-shadow: 0 14px 32px rgba(37, 99, 235, 0.06);
}

.pdp-missing-inner {
    max-width: 720px;
}

.pdp-missing-card {
    padding: 40px 36px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: #fff;
    box-shadow: var(--shadow);
    text-align: center;
}

.pdp-missing-icon {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    border-radius: 20px;
    background: var(--blue-soft);
}

.pdp-missing-card h1 {
    margin: 0 0 10px;
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    letter-spacing: -0.04em;
}

.pdp-missing-card p {
    margin: 0 0 24px;
    color: var(--muted);
}

.pdp-missing-card .pdp-actions {
    justify-content: center;
}

@media (max-width: 900px) {
    .pdp-layout,
    .pdp-band-grid,
    .pdp-related,
    .pdp-cta,
    .pdp-cta .cta-copy {
        grid-template-columns: 1fr;
        display: grid;
    }

    .pdp-hero {
        padding: 32px 0 40px;
    }

    .pdp-band {
        padding: 48px 0;
    }

    .pdp-gallery,
    .pdp-figure:not(.pdp-cover),
    .pdp-placeholder:not(.pdp-cover),
    .pdp-figure:not(.pdp-cover) img {
        min-height: 260px;
    }
}

@media (max-width: 640px) {
    .pdp-buy h1 {
        font-size: 2rem;
    }

    .pdp-meta,
    .pdp-actions .btn {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .pdp-panel {
        padding: 22px;
    }

    .pdp-missing-card {
        padding: 28px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pdp-related-card,
    .pdp-actions .btn,
    a.pdp-related-card:hover,
    a.pdp-related-card:focus-visible {
        transition: none;
        transform: none;
    }
}

.has-cookie-banner {
    padding-bottom: 240px;
}

.cookie-legal {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 16px;
    margin-left: 10px;
}

.legal-callout {
    padding: 22px 24px;
    background: var(--blue-soft);
    border: 2px solid var(--blue);
    border-radius: var(--radius);
    box-shadow: 0 10px 28px rgba(26, 54, 93, 0.06);
}

.legal-callout-kicker {
    margin: 0 0 6px;
    color: var(--blue);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.legal-callout h2 {
    margin: 0 0 12px;
    font-size: 1.2rem;
    letter-spacing: -0.03em;
}

.legal-callout ul {
    margin: 0;
    padding-left: 1.15em;
}

.legal-callout li {
    color: var(--text);
    font-size: 1rem;
}

.legal-callout li + li {
    margin-top: 10px;
}

.legal-callout-more {
    margin: 14px 0 0;
}

.legal-callout-more a,
.legal-inline a {
    color: var(--blue);
    font-weight: 700;
}

.legal-inline {
    margin: 14px 0 0;
    padding: 12px 14px;
    background: var(--blue-soft);
    border-left: 3px solid var(--blue);
    border-radius: 10px;
    color: var(--text);
    font-size: 0.92rem;
}

.auth-form .legal-inline {
    margin: 4px 0 16px;
}

.cookie-banner {
    position: fixed;
    z-index: 30;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 12px 20px 18px;
    pointer-events: none;
}

.cookie-card {
    pointer-events: auto;
    width: min(var(--max), 100%);
    margin: 0 auto;
    padding: 20px 22px 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.cookie-copy h2,
.cookie-page h1,
.cookie-panel h2 {
    margin: 0 0 8px;
    letter-spacing: -0.03em;
}

.cookie-copy h2 {
    font-size: 1.15rem;
}

.cookie-copy p,
.cookie-lead,
.cookie-panel p,
.cookie-panel li,
.cookie-toggle em {
    margin: 0;
    color: var(--muted);
}

.cookie-copy p {
    max-width: 72ch;
}

.cookie-copy a,
.cookie-panel a {
    color: var(--blue);
}

.cookie-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.cookie-btn {
    min-height: 44px;
}

.cookie-btn:focus-visible,
.cookie-prefs > summary:focus-visible,
.cookie-toggle input:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

.cookie-prefs {
    margin-top: 14px;
}

.cookie-prefs > summary {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 2px;
    color: var(--blue);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.cookie-prefs > summary::-webkit-details-marker,
.cookie-prefs > summary::marker {
    display: none;
    content: none;
}

.cookie-prefs-body,
.cookie-prefs-form {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.cookie-prefs-body {
    max-height: min(42vh, 360px);
    overflow: auto;
}

.cookie-toggles {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.cookie-toggle {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 12px;
    align-items: start;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg-soft);
}

.cookie-toggle input {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    accent-color: var(--blue);
}

.cookie-toggle input:disabled {
    accent-color: #94a3b8;
}

.cookie-toggle strong {
    display: block;
    font-size: 0.95rem;
}

.cookie-toggle em {
    display: block;
    margin-top: 4px;
    font-style: normal;
    font-size: 0.88rem;
}

.cookie-toggle.is-off {
    opacity: 0.78;
}

.cookie-page {
    min-height: 48vh;
}

.cookie-hero {
    padding: 64px 0 48px;
    background:
        radial-gradient(circle at 88% 12%, #dbeafe 0, transparent 38%),
        linear-gradient(180deg, var(--blue-soft) 0, #fff 72%);
}

.cookie-kicker {
    margin: 0 0 10px;
    color: var(--blue);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cookie-hero h1 {
    margin: 0 0 14px;
    font-size: clamp(2rem, 4vw, 2.8rem);
}

.cookie-lead {
    max-width: 68ch;
    font-size: 1.05rem;
}

.cookie-body {
    padding: 8px 0 88px;
    background: var(--bg-soft);
}

.cookie-layout {
    display: grid;
    gap: 16px;
}

.cookie-panel {
    padding: 24px 26px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 10px 28px rgba(26, 54, 93, 0.04);
}

.cookie-list {
    margin: 0;
    padding-left: 1.15em;
}

.cookie-list li + li {
    margin-top: 8px;
}

.cookie-table-wrap {
    overflow-x: auto;
    margin: 14px 0 12px;
}

.cookie-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.cookie-table th,
.cookie-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.cookie-table th {
    color: var(--text);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cookie-table code,
.cookie-panel code {
    font-size: 0.86em;
}

@media (max-width: 700px) {
    .has-cookie-banner {
        padding-bottom: 280px;
    }

    .cookie-banner {
        padding: 10px 12px 14px;
    }

    .cookie-card {
        padding: 18px 16px 16px;
    }

    .cookie-actions .cookie-btn {
        width: 100%;
    }

    .cookie-legal {
        display: flex;
        margin: 8px 0 0;
    }

    .cookie-hero,
    .cookie-panel,
    .legal-callout {
        padding-left: 0;
        padding-right: 0;
    }

    .cookie-panel,
    .legal-callout {
        padding: 20px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cookie-btn,
    .cookie-prefs > summary {
        transition: none;
    }
}

.pay-page {
    padding: 28px 0 64px;
}

.pay-wrap {
    max-width: 640px;
}

.pay-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 28px 26px 24px;
    box-shadow: 0 10px 30px rgba(15, 40, 80, 0.04);
}

.pay-kicker {
    margin: 0 0 6px;
    color: var(--blue);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pay-card h1 {
    margin: 0 0 12px;
}

.pay-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 16px;
}

.pay-item span {
    color: var(--muted);
    font-size: 0.92rem;
}

.pay-totals {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}

.pay-totals li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
}

.pay-totals .is-total {
    font-weight: 700;
}

.pay-form {
    margin-top: 6px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}

.pay-form .field,
.pay-form fieldset {
    margin: 0 0 20px;
}

.pay-form label {
    display: block;
    margin: 0 0 7px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
}

.pay-form input[type="text"],
.pay-form input[type="email"],
.pay-form input[type="number"],
.pay-form input[type="tel"],
.pay-form input[type="date"],
.pay-form input[type="time"],
.pay-form input[type="datetime-local"],
.pay-form select,
.pay-form textarea {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg-soft);
    font: inherit;
    color: var(--text);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.pay-form textarea {
    min-height: 104px;
    line-height: 1.45;
    resize: vertical;
}

.pay-form input::placeholder,
.pay-form textarea::placeholder {
    color: #94a3b8;
}

.pay-form input:hover,
.pay-form select:hover,
.pay-form textarea:hover {
    border-color: #93c5fd;
    background: #fff;
}

.pay-form input:focus,
.pay-form select:focus,
.pay-form textarea:focus {
    outline: none;
    border-color: var(--blue);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
}

.pay-form .pay-note {
    margin: 0 0 18px;
}

.pay-methods {
    border: 0;
    padding: 0;
    margin: 0 0 20px;
}

.pay-methods legend {
    display: block;
    width: 100%;
    margin: 0 0 10px;
    padding: 0;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
}

.pay-methods-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pay-method {
    position: relative;
    display: block;
    margin: 0;
    padding: 14px 16px 14px 44px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg-soft);
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.pay-method:hover {
    border-color: #93c5fd;
    background: #fff;
}

.pay-method:has(input:checked),
.pay-method:has(input:focus-visible) {
    border-color: var(--blue);
    background: rgba(239, 246, 255, 0.92);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.pay-method input[type="radio"] {
    position: absolute;
    left: 16px;
    top: 18px;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--blue);
}

.pay-method > span {
    display: block;
}

.pay-method strong {
    display: block;
    font-size: 0.96rem;
}

.pay-method i {
    display: block;
    margin-top: 4px;
    font-style: normal;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

.pay-method-help {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.45;
}

.pay-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
    margin: 22px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.pay-form-actions .btn {
    min-height: 48px;
    padding: 10px 22px;
}

.pay-form-actions .btn:hover,
.pay-form-actions .btn:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.18);
}

.pay-form-actions .btn:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

.pay-amount {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 8px 0 18px;
}

.pay-note {
    margin: 16px 0 0;
    color: var(--muted);
    font-size: 0.92rem;
}

.pay-back,
.pay-form-actions.pay-back-outside {
    margin: 16px 0 0;
}

.pay-note code {
    font-size: 0.86em;
}

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

.search-page {
    min-height: 48vh;
}

.search-hero-inner {
    max-width: 40rem;
}

.search-hero h1 {
    margin: 0 0 16px;
    font-size: clamp(2.1rem, 4vw, 3.15rem);
    line-height: 1.12;
    letter-spacing: -0.04em;
}

.search-form-card {
    margin: 28px 0 0;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
}

.search-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.search-field-ico {
    display: grid;
    place-items: center;
    flex: 0 0 48px;
    width: 48px;
    color: var(--blue);
}

.search-field-ico svg {
    width: 22px;
    height: 22px;
}

.search-row input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 48px;
    padding: 10px 8px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    font: inherit;
    color: var(--text);
}

.search-row input[type="search"]::placeholder {
    color: #94a3b8;
}

.search-row input[type="search"]:focus {
    outline: none;
}

.search-row input[type="search"]::-webkit-search-decoration,
.search-row input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.search-form-card:focus-within {
    border-color: #93c5fd;
    box-shadow:
        var(--shadow),
        0 0 0 4px rgba(37, 99, 235, 0.14);
}

.search-form-card .btn {
    flex: 0 0 auto;
    min-height: 48px;
    padding: 10px 18px;
    border-radius: 12px;
}

.search-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.search-shortcuts a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.search-shortcuts a:hover,
.search-shortcuts a:focus-visible {
    border-color: #bfdbfe;
    background: var(--blue-soft);
    color: var(--blue);
}

.search-shortcuts a:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

.search-results-band {
    padding-top: 8px;
    padding-bottom: 80px;
}

.search-count {
    margin: 0 0 20px;
    color: var(--blue);
    font-size: 0.92rem;
    font-weight: 700;
}

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

.search-card.svc-card {
    gap: 12px;
    min-height: 100%;
}

a.search-card:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

.search-badge {
    align-self: flex-start;
}

.search-card h2 {
    margin: 0 0 8px;
    font-size: 1.15rem;
    letter-spacing: -0.03em;
}

.search-card p {
    margin: 0;
    color: var(--muted);
}

.search-empty-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    max-width: 36rem;
    padding: 28px 24px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.search-empty-card h2 {
    margin: 0 0 6px;
    font-size: 1.2rem;
    letter-spacing: -0.03em;
}

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

.not-found-page {
    min-height: 48vh;
}

.not-found-page .not-found-actions {
    justify-content: flex-start;
    margin-top: 22px;
}

.not-found-page h1 {
    margin: 0 0 16px;
    font-size: clamp(2.1rem, 4vw, 3.15rem);
    line-height: 1.12;
    letter-spacing: -0.04em;
}

@media (max-width: 700px) {
    .search-grid {
        grid-template-columns: 1fr;
    }

    .search-row {
        flex-direction: column;
        gap: 6px;
    }

    .search-field-ico {
        display: none;
    }

    .search-row input[type="search"] {
        padding: 10px 14px;
    }

    .search-form-card .btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .search-card.svc-card,
    a.search-card:hover,
    a.search-card:focus-visible,
    .search-shortcuts a {
        transition: none;
        transform: none;
    }
}

.cart-lines li {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 12px;
    align-items: center;
}

.cart-lines li.cart-line {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
}

.cart-line-main {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 12px;
    align-items: center;
    width: 100%;
}

.cart-line-qty {
    margin: 0;
    color: var(--muted, #5b6573);
    font-size: 0.9rem;
    font-weight: 650;
    white-space: nowrap;
}

.cart-customize {
    width: 100%;
    padding-top: 4px;
    border-top: 1px solid var(--line);
}

.cart-customize label {
    display: block;
    margin: 0 0 8px;
    font-weight: 650;
}

.cart-customize textarea {
    display: block;
    width: 100%;
    min-height: 104px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font: inherit;
    line-height: 1.45;
    resize: vertical;
}

.cart-customize-note {
    margin: 8px 0 12px;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

.pay-customize {
    margin: 0 0 18px;
    padding: 14px 16px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 12px;
}

.pay-customize-title,
.pay-customize-line > span {
    display: block;
    margin: 0 0 6px;
    font-weight: 650;
}

.pay-customize-text {
    margin: 0;
    color: var(--text);
    line-height: 1.5;
    white-space: pre-wrap;
}

.pay-customize-line {
    display: block;
    padding-top: 4px;
}

.pay-customize-line .pay-customize-text {
    margin-top: 4px;
    color: var(--muted);
}

.client-customize,
.client-work span {
    display: block;
}

.client-customize {
    margin-top: 6px;
    color: var(--muted);
    line-height: 1.45;
    white-space: pre-wrap;
}

.client-subhead {
    margin: 18px 0 10px;
    font-size: 1rem;
}

.client-delivery-desc {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    line-height: 1.45;
    white-space: pre-wrap;
}

.client-delivery-files {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
    width: 100%;
}

.client-delivery-files.delivery-files {
    list-style: none;
    padding: 0;
}

.client-delivery .delivery-file {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg-soft, #f8fafc);
}

.client-delivery .delivery-file-preview {
    display: block;
    max-width: 200px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
}

.client-delivery .delivery-file-preview img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 160px;
    object-fit: contain;
}

.client-delivery .delivery-file-meta {
    min-width: 0;
    flex: 1;
}

.client-delivery .delivery-file-meta strong {
    display: block;
}

.client-delivery .delivery-file-meta > span {
    color: var(--muted);
    font-size: 0.85rem;
}

.client-delivery .delivery-file-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 8px 0 0;
}

.cart-lines input[type="number"] {
    width: 4.5rem;
    min-height: 40px;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font: inherit;
}

.cart-line-main form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cart-empty-form {
    margin-top: 4px;
}

.pdp-cart-form {
    display: inline;
}

.pdp-variants {
    width: 100%;
    margin: 0 0 14px;
}

.pdp-variants label {
    display: block;
    margin-bottom: 6px;
    font-weight: 650;
}

.pdp-variants select {
    width: 100%;
    max-width: 28rem;
}

.pdp-cta-group {
    display: contents;
}

.pdp-soldout {
    font-weight: 650;
}

.pay-guest {
    margin: 18px 0;
    padding: 16px 0 4px;
    border-top: 1px solid var(--line);
}

.pay-guest legend {
    font-weight: 650;
    margin-bottom: 8px;
}

.pay-guest-warn {
    margin: 0 0 14px;
    color: var(--muted);
    line-height: 1.5;
}

.pay-guest-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
}

.pay-guest-grid .field-wide {
    grid-column: 1 / -1;
}

@media (max-width: 640px) {
    .pay-guest-grid,
    .cart-lines li,
    .cart-line-main {
        grid-template-columns: 1fr;
    }
}

.tools-page {
    background: var(--bg);
}

.tool-hero {
    padding: 36px 0 28px;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--line);
}

.tool-kicker {
    margin: 0 0 8px;
    color: var(--blue);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tool-kicker a {
    color: inherit;
    text-decoration: none;
}

.tool-kicker a:hover,
.tool-kicker a:focus-visible {
    text-decoration: underline;
}

.tool-hero h1,
.tool-app-copy h1 {
    margin: 0 0 10px;
    letter-spacing: -0.04em;
    line-height: 1.15;
}

.tool-count,
.tool-lead {
    margin: 0 0 0;
    color: var(--muted);
}

.tool-hero .tool-count {
    margin-top: 12px;
}

.svc-preview-card.tool-preview-card .copy {
    overflow: hidden;
}

.svc-preview-card.tool-preview-card strong,
.svc-preview-card.tool-preview-card em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tool-intro {
    max-width: 52rem;
    color: var(--muted);
}

.tool-intro p {
    margin: 0 0 8px;
}

.tool-band {
    padding: 28px 0 56px;
}

.tool-filters ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.tool-filter {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 650;
    text-decoration: none;
}

.tool-filter.is-current,
.tool-filter:hover,
.tool-filter:focus-visible {
    border-color: #93c5fd;
    background: var(--blue-soft);
    color: var(--blue);
}

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

.tool-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.tool-card:hover,
.tool-card:focus-within {
    border-color: #bfdbfe;
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.tool-card-media {
    display: block;
    text-decoration: none;
}

.tool-media,
.tool-app-cover {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: linear-gradient(145deg, #eff6ff 0%, #f8fafc 100%);
    border-radius: 0;
    color: var(--blue);
}

.tool-media.is-photo,
.tool-app-cover.is-photo {
    padding: 0;
}

.tool-media img,
.tool-app-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tool-media-icon,
.tool-app-cover-icon {
    display: grid;
    place-items: center;
    min-height: 160px;
}

.tool-media-icon svg,
.tool-app-cover-icon svg {
    width: 48px;
    height: 48px;
}

.tool-card-copy {
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 16px 18px 18px;
}

.tool-card-cats {
    margin: 0;
    color: var(--blue);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.tool-card h2 {
    margin: 0;
    font-size: 1.12rem;
    letter-spacing: -0.02em;
}

.tool-card h2 a {
    color: inherit;
    text-decoration: none;
}

.tool-card h2 a:hover,
.tool-card h2 a:focus-visible {
    color: var(--blue);
}

.tool-card p {
    margin: 0;
    color: var(--muted);
}

.tool-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.tool-card-actions .btn {
    min-height: 38px;
    padding: 0 14px;
}

.tool-how-link {
    color: var(--blue);
    font-weight: 700;
    text-decoration: none;
}

.tool-how-link:hover,
.tool-how-link:focus-visible {
    text-decoration: underline;
}

.tool-empty {
    color: var(--muted);
}

.tool-app-hero {
    padding: 32px 0 24px;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--line);
}

.tool-app-head {
    display: grid;
    gap: 20px;
}

.tool-app-top {
    display: grid;
    gap: 18px;
    align-items: start;
}

.tool-app-cover {
    max-width: 520px;
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow);
}

.tool-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.tool-cat {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--blue-soft);
    color: var(--blue);
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
}

.tool-app-cta .btn,
.tool-app-launch .btn,
.btn-lg {
    min-height: 48px;
    padding: 0 22px;
    font-size: 1.02rem;
}

.tool-cta-use svg,
.tool-cta-shop svg,
.tool-cta-out svg {
    width: 16px;
    height: 16px;
}

.tool-app-body {
    max-width: 760px;
    padding: 32px 0 64px;
}

.tool-howto {
    margin: 0 0 28px;
    padding: 22px 22px 8px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.tool-howto h2 {
    margin: 0 0 12px;
    letter-spacing: -0.02em;
}

.tool-howto-prose {
    font-size: 1.02rem;
}

.tool-howto-prose p,
.tool-howto-prose ul,
.tool-howto-prose ol {
    margin: 0 0 14px;
}

.tool-howto-prose h2,
.tool-howto-prose h3 {
    margin: 8px 0 10px;
    font-size: 1.05rem;
}

.tool-embed {
    margin: 0 0 28px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.tool-embed iframe {
    display: block;
    width: 100%;
    height: 640px;
    border: 0;
    background: var(--bg-soft);
}

.tool-embed-open {
    margin: 0;
    padding: 12px 16px 16px;
}

.tool-app-launch {
    margin: 0 0 28px;
}

.tool-back {
    margin: 8px 0 0;
}

.tool-back a {
    color: var(--blue);
    font-weight: 700;
    text-decoration: none;
}

.tool-back a:hover,
.tool-back a:focus-visible {
    text-decoration: underline;
}

.tool-member-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 4px 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.tool-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.tool-pricing-badge {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.tool-pricing-free {
    background: #f0fdf4;
    color: #15803d;
}

.tool-pricing-paid {
    background: #fef3c7;
    color: #b45309;
}

.tool-sub-badge {
    background: #ecfdf5;
    color: #047857;
}

.tool-member-notice {
    margin: 0 auto;
    max-width: 920px;
    padding: 22px 24px;
    border: 1px solid #bfdbfe;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.95) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.tool-sub-notice {
    border-color: #a7f3d0;
    background: linear-gradient(135deg, rgba(236, 253, 245, 0.95) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.tool-member-notice h2 {
    margin: 0 0 8px;
    font-size: 1.1rem;
}

.tool-member-notice p {
    margin: 0;
    color: var(--muted);
}

.tool-member-notice-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.tool-app-page {
    padding: 0 0 72px;
    background:
        radial-gradient(ellipse 70% 55% at 100% 0%, rgba(219, 234, 254, 0.45) 0%, transparent 58%),
        linear-gradient(180deg, var(--blue-soft) 0%, var(--bg) 260px);
}

.tool-app-page-hero {
    padding: 32px 0 24px;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(6px);
}

.tool-app-shell {
    max-width: 960px;
}

.tool-app-shell-body {
    padding-top: 28px;
}

.tool-app-shell-head {
    margin: 0;
}

.tool-app-shell-head h1 {
    margin: 0 0 10px;
    font-size: clamp(1.65rem, 2.6vw, 2.2rem);
    line-height: 1.15;
    letter-spacing: -0.04em;
}

.tool-app-shell-head .tool-lead {
    max-width: 42rem;
    font-size: 1.02rem;
    line-height: 1.55;
}

.tool-app-gate {
    margin: 0 0 28px;
}

.tool-app-gate-card {
    padding: 32px 28px;
    border: 1px solid #dbeafe;
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(239, 246, 255, 0.94) 100%);
    box-shadow: 0 12px 32px rgba(37, 99, 235, 0.08);
    text-align: center;
}

.tool-app-gate-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 14px;
    border-radius: 16px;
    background: #eff6ff;
    color: var(--blue);
}

.tool-app-gate-icon svg {
    width: 26px;
    height: 26px;
}

.tool-app-gate-card h2 {
    margin: 0 0 10px;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
}

.tool-app-gate-card > p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.tool-app-gate-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 22px;
}

.tool-app-gate-actions .btn {
    min-height: 46px;
    padding: 0 20px;
}

.tool-app-gate-note {
    margin: 18px 0 0;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.tool-widget {
    display: grid;
    gap: 24px;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.tool-form {
    display: grid;
    gap: 16px;
}

.tool-form-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tool-form-grid-wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tool-form .field {
    display: grid;
    gap: 7px;
    align-content: start;
}

.tool-form .field-span {
    grid-column: 1 / -1;
}

.tool-form label {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text, #0f172a);
}

.tool-form input,
.tool-form select,
.tool-form textarea {
    width: 100%;
    min-height: 44px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font: inherit;
    color: inherit;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tool-form textarea {
    min-height: 96px;
    resize: vertical;
    line-height: 1.5;
}

.tool-form select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    padding-right: 36px;
}

.tool-form input:focus,
.tool-form select:focus,
.tool-form textarea:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.tool-form input::placeholder,
.tool-form textarea::placeholder {
    color: #94a3b8;
}

.tool-form-hint {
    margin: 0;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.tool-char-count {
    justify-self: end;
    color: var(--muted);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

.tool-output {
    display: grid;
    gap: 12px;
    padding: 18px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #f8fafc;
}

.tool-results {
    display: grid;
    gap: 10px;
    padding: 20px;
    border: 1px solid #bfdbfe;
    border-radius: 14px;
    background: linear-gradient(180deg, #eff6ff 0%, #f8fbff 100%);
}

.tool-result-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: baseline;
    font-size: 0.96rem;
}

.tool-result-row span {
    color: var(--muted);
}

.tool-result-row strong {
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tool-result-row.is-total {
    padding-top: 4px;
}

.tool-result-row.is-total strong {
    font-size: 1.18rem;
}

.tool-result-row.is-highlight {
    padding-top: 10px;
    margin-top: 2px;
    border-top: 1px dashed #93c5fd;
}

.tool-result-row.is-highlight span {
    color: var(--text, #0f172a);
    font-weight: 600;
}

.tool-result-row.is-highlight strong {
    color: var(--blue);
    font-size: 1.3rem;
}

.tool-output-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.tool-output-head h3 {
    margin: 0;
    font-size: 1rem;
    letter-spacing: -0.01em;
}

.tool-code {
    margin: 0;
    padding: 16px 18px;
    overflow: auto;
    max-height: 320px;
    border-radius: 12px;
    background: #0f172a;
    color: #e2e8f0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.82rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.tool-preview-card {
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}

.tool-preview-label {
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.tool-preview-card strong {
    display: block;
    color: #1a0dab;
    font-size: 1.08rem;
    line-height: 1.35;
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
}

.tool-preview-card em {
    display: block;
    margin: 3px 0 8px;
    color: #006621;
    font-style: normal;
    font-size: 0.88rem;
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
}

.tool-preview-card p {
    margin: 0;
    color: #4d5156;
    font-size: 0.92rem;
    line-height: 1.5;
}

.tool-form-label {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text, #0f172a);
}

.tool-color-field {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.tool-color-field input[type="color"] {
    width: 52px;
    height: 44px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
}

.tool-radio-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tool-radio-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    font-size: 0.9rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tool-radio-chip:has(input:checked) {
    border-color: var(--blue);
    background: #eff6ff;
}

.tool-radio-chip input {
    accent-color: var(--blue);
}

.tool-contrast-preview {
    padding: 22px 24px;
    border: 1px solid var(--line);
    border-radius: 14px;
    transition: background 0.15s ease, color 0.15s ease;
}

.tool-contrast-preview-label {
    margin: 0 0 12px;
    color: inherit;
    opacity: 0.72;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.tool-contrast-preview-text {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
}

.tool-contrast-preview-bold {
    display: none;
    font-size: 1.125rem;
    font-weight: 700;
}

.tool-contrast-score {
    display: grid;
    gap: 14px;
    padding: 20px;
    border: 1px solid #99f6e4;
    border-radius: 14px;
    background: linear-gradient(180deg, #f0fdfa 0%, #f8fffe 100%);
}

.tool-contrast-ratio {
    margin: 0;
    font-size: 1rem;
}

.tool-contrast-ratio strong {
    font-size: 1.35rem;
    font-variant-numeric: tabular-nums;
    color: #0f766e;
}

.tool-wcag-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.tool-wcag-list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    font-size: 0.94rem;
}

.tool-wcag-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.tool-wcag-badge.is-pass {
    background: #dcfce7;
    color: #166534;
}

.tool-wcag-badge.is-fail {
    background: #fee2e2;
    color: #991b1b;
}

.tool-qr-output {
    display: grid;
    gap: 18px;
    justify-items: center;
    padding: 24px;
    border: 1px solid #e0e7ff;
    border-radius: 14px;
    background: linear-gradient(180deg, #eef2ff 0%, #f8faff 100%);
}

.tool-qr-preview-wrap {
    display: grid;
    place-items: center;
    min-height: 200px;
}

.tool-qr-canvas {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.tool-qr-empty {
    margin: 0;
    color: var(--muted);
    font-size: 0.94rem;
    text-align: center;
}

.tool-qr-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

/* Generador de contraseñas */
.tool-check-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tool-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    font-size: 0.92rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tool-check:has(input:checked) {
    border-color: var(--blue);
    background: #eff6ff;
}

.tool-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--blue);
    flex-shrink: 0;
}

.tool-check-block {
    width: 100%;
}

.tool-form input[type="range"] {
    width: 100%;
    min-height: 28px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    accent-color: var(--blue);
    cursor: pointer;
}

.tool-form input[type="range"]:focus {
    outline: none;
    box-shadow: none;
}

.tool-form input[type="range"]:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 4px;
}

.tool-pw-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tool-pw-output {
    display: grid;
    gap: 14px;
    padding: 20px;
    border: 1px solid #bfdbfe;
    border-radius: 14px;
    background: linear-gradient(180deg, #eff6ff 0%, #f8fbff 100%);
}

.tool-pw-empty {
    margin: 0;
    color: var(--muted);
    font-size: 0.94rem;
}

.tool-pw-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.tool-pw-item {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
}

.tool-pw-value {
    flex: 1 1 200px;
    margin: 0;
    padding: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 1.02rem;
    line-height: 1.45;
    word-break: break-all;
    color: #0f172a;
    background: transparent;
}

.tool-pw-copy-one {
    flex: 0 0 auto;
}

.tool-pw-strength {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

.tool-pw-strength-label {
    color: var(--muted);
}

.tool-pw-strength-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background: #e2e8f0;
    color: #334155;
}

.tool-pw-strength-badge.is-weak {
    background: #fee2e2;
    color: #991b1b;
}

.tool-pw-strength-badge.is-fair {
    background: #ffedd5;
    color: #9a3412;
}

.tool-pw-strength-badge.is-good {
    background: #fef08a;
    color: #854d0e;
}

.tool-pw-strength-badge.is-strong {
    background: #dcfce7;
    color: #166534;
}

.tool-pw-status {
    margin: 0;
    min-height: 1.2em;
    color: var(--muted);
    font-size: 0.88rem;
}

/* Calculadora fiscal autónomos */
.calc-fiscal-mode {
    margin: 0;
    padding: 0;
    border: 0;
}

.calc-fiscal-mode legend {
    margin-bottom: 10px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text, #0f172a);
}

.calc-fiscal-mode-options {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.calc-fiscal-mode-option {
    position: relative;
    display: block;
    cursor: pointer;
}

.calc-fiscal-mode-option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.calc-fiscal-mode-option span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.calc-fiscal-mode-option input:focus-visible + span {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.calc-fiscal-mode-option input:checked + span {
    border-color: var(--blue);
    background: #eff6ff;
    color: var(--blue);
}

.calc-fiscal-optional {
    font-weight: 500;
    color: var(--muted);
    font-size: 0.84rem;
}

.calc-fiscal-custom-field.is-hidden {
    display: none;
}

.calc-fiscal-results-wrap {
    display: grid;
    gap: 14px;
}

.calc-fiscal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.calc-fiscal-meta {
    margin: 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: #f1f5f9;
    color: var(--text, #0f172a);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.45;
}

.calc-fiscal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.94rem;
}

.calc-fiscal-table caption {
    caption-side: top;
}

.calc-fiscal-table th,
.calc-fiscal-table td {
    padding: 11px 12px;
    border-bottom: 1px solid #e2e8f0;
    text-align: left;
    vertical-align: middle;
}

.calc-fiscal-table thead th {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: #f8fafc;
}

.calc-fiscal-table tbody th {
    font-weight: 600;
    color: var(--text, #0f172a);
}

.calc-fiscal-table tbody td:nth-child(2) {
    color: var(--muted);
    font-size: 0.88rem;
}

.calc-fiscal-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.calc-fiscal-negative {
    color: #b45309;
}

.calc-fiscal-row-total th,
.calc-fiscal-row-total td {
    font-weight: 700;
}

.calc-fiscal-row-highlight th,
.calc-fiscal-row-highlight td {
    border-bottom: 0;
    background: #eff6ff;
}

.calc-fiscal-row-highlight .calc-fiscal-num {
    color: var(--blue);
    font-size: 1.08rem;
    font-weight: 700;
}

.calc-fiscal-summary {
    margin: 0;
}

.calc-fiscal-print-only {
    display: none;
}

@media print {
    body * {
        visibility: hidden;
    }

    .calc-fiscal-print-only,
    .calc-fiscal-print-only * {
        visibility: visible;
    }

    .calc-fiscal-print-only {
        display: block !important;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        margin: 0;
        padding: 24px;
        background: #fff;
        color: #0f172a;
        font-family: inherit;
        font-size: 14px;
        line-height: 1.6;
        white-space: pre-wrap;
    }
}

.tool-app-page .tool-back {
    margin: 28px 0 0;
    padding-top: 8px;
}

@media (max-width: 760px) {
    .tool-app-page-hero {
        padding: 24px 0 18px;
    }

    .tool-app-shell-body {
        padding-top: 22px;
    }

    .tool-widget {
        padding: 20px 18px;
        border-radius: 16px;
    }

    .tool-form-grid,
    .tool-form-grid-wide {
        grid-template-columns: 1fr;
    }

    .tool-check-grid {
        grid-template-columns: 1fr;
    }

    .tool-pw-actions {
        width: 100%;
    }

    .tool-pw-actions .btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    .tool-app-gate-card {
        padding: 24px 18px;
    }

    .tool-result-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .tool-result-row strong {
        font-size: 1.12rem;
    }

    .calc-fiscal-mode-options {
        grid-template-columns: 1fr;
    }

    .calc-fiscal-table thead {
        display: none;
    }

    .calc-fiscal-table tr {
        display: grid;
        gap: 2px;
        padding: 10px 0;
        border-bottom: 1px solid #e2e8f0;
    }

    .calc-fiscal-table td:nth-child(2) {
        grid-column: 1;
        font-size: 0.82rem;
    }

    .calc-fiscal-table .calc-fiscal-num {
        grid-column: 1;
        text-align: left;
        font-size: 1.05rem;
        font-weight: 700;
    }

    .calc-fiscal-table tbody th {
        display: block;
        padding-bottom: 0;
        border-bottom: 0;
    }

    .calc-fiscal-table th,
    .calc-fiscal-table td {
        display: block;
        padding: 2px 0;
        border-bottom: 0;
    }

    .calc-fiscal-actions {
        width: 100%;
    }

    .calc-fiscal-actions .btn {
        flex: 1 1 auto;
    }
}

@media (max-width: 480px) {
    .tool-app-gate-actions {
        flex-direction: column;
    }

    .tool-app-gate-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 900px) {
    .tool-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .tool-card-copy {
        padding: 14px 16px 16px;
    }

    .tool-app-cover {
        max-width: none;
        border-radius: 16px;
    }
}

.express-page {
    padding: 32px 0 72px;
    background:
        radial-gradient(ellipse 70% 55% at 100% 0%, rgba(219, 234, 254, 0.55) 0%, transparent 58%),
        linear-gradient(180deg, var(--blue-soft) 0%, var(--bg) 220px);
}

.pay-wrap.express-wrap {
    max-width: 1180px;
}

.express-wrap {
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: start;
}

.express-form-card,
.express-preview-card {
    padding: 30px 28px 26px;
}

.express-hero {
    margin: 0 0 24px;
    padding: 22px 22px 20px;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(239, 246, 255, 0.92) 100%);
}

.express-hero .pay-kicker {
    margin-bottom: 8px;
}

.express-form-card h1,
.express-preview-card h2 {
    margin: 0 0 10px;
    font-size: clamp(1.55rem, 2.4vw, 2rem);
    line-height: 1.15;
    letter-spacing: -0.04em;
}

.express-lead,
.express-hint {
    margin: 0;
    color: var(--muted);
    font-size: 0.94rem;
    line-height: 1.55;
}

.express-hint .req {
    color: var(--blue);
    font-weight: 700;
}

.express-form .alert {
    margin-bottom: 20px;
}

.express-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 18px;
}

.express-form .field {
    margin: 0;
    min-width: 0;
}

.express-form .field-wide {
    grid-column: 1 / -1;
}

.express-form label {
    display: block;
    margin: 0 0 7px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
}

.express-form .req {
    color: var(--blue);
    font-weight: 700;
}

.express-form input,
.express-form textarea {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg-soft);
    font: inherit;
    color: var(--text);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.express-form textarea {
    min-height: 132px;
    resize: vertical;
    line-height: 1.45;
}

.express-form input::placeholder,
.express-form textarea::placeholder {
    color: #94a3b8;
}

.express-form input:hover,
.express-form textarea:hover {
    border-color: #93c5fd;
    background: #fff;
}

.express-form input:focus,
.express-form textarea:focus {
    outline: none;
    border-color: var(--blue);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
}

.express-form .field-image input[type="url"] {
    margin-bottom: 10px;
}

.express-image-upload {
    display: grid;
    gap: 8px;
}

.express-form .express-image-file {
    min-height: auto;
    padding: 10px 12px;
    font-size: 0.92rem;
    background: #fff;
    cursor: pointer;
}

.express-image-hint,
.express-image-current {
    margin: 0;
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.45;
}

.express-image-preview {
    display: grid;
    gap: 8px;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    background: #f8fbff;
}

.express-image-preview img {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.express-form > .express-hint {
    margin-top: 18px;
}

.express-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 22px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.express-btn-preview {
    width: 100%;
    min-height: 46px;
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.express-btn-preview:hover,
.express-btn-preview:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
}

.express-actions-secondary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.express-actions-secondary .btn {
    width: 100%;
    min-height: 44px;
}

.express-footer {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.express-footer .pdp-note {
    margin: 0 0 10px;
}

.express-back {
    color: var(--blue);
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
}

.express-back:hover,
.express-back:focus-visible {
    text-decoration: underline;
}

.express-back:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

.express-preview-head {
    margin: 0 0 18px;
}

.express-preview-card h2 {
    font-size: 1.35rem;
}

.express-preview-head .express-hint {
    margin-top: 8px;
}

.express-preview-empty {
    display: grid;
    place-items: center;
    min-height: 320px;
    padding: 28px 24px;
    border: 1px dashed #bfdbfe;
    border-radius: 14px;
    background: var(--blue-soft);
    color: var(--muted);
    text-align: center;
}

.express-preview-empty p {
    margin: 0;
    max-width: 28rem;
    line-height: 1.55;
}

.express-frame-wrap {
    position: relative;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    min-height: 520px;
    box-shadow: 0 12px 28px rgba(26, 54, 93, 0.06);
}

.express-frame {
    display: block;
    width: 100%;
    height: 640px;
    border: 0;
    background: #fff;
}

.express-frame-mask {
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.12);
}

.express-demo-wrap {
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    max-width: 1180px;
}

.express-demo-intro .express-demo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.express-demo-intro .express-hint {
    margin-top: 16px;
}

@media (max-width: 960px) {
    .express-demo-wrap {
        grid-template-columns: 1fr;
    }

    .express-demo-preview {
        order: -1;
    }
}

@media (min-width: 901px) {
    .express-preview-card {
        position: sticky;
        top: 20px;
    }
}

@media (max-width: 900px) {
    .express-wrap {
        grid-template-columns: 1fr;
    }

    .express-preview-card {
        position: static;
    }

    .express-frame {
        height: 480px;
    }
}

@media (max-width: 640px) {
    .express-form-card,
    .express-preview-card {
        padding: 22px 18px 20px;
    }

    .express-hero {
        padding: 18px 16px;
    }

    .express-fields {
        grid-template-columns: 1fr;
    }

    .express-actions-secondary {
        grid-template-columns: 1fr;
    }
}

.express-preview-stage {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.express-preview-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 12px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg-soft);
}

.express-preview-tabs {
    display: inline-flex;
    align-items: stretch;
    flex: 0 1 auto;
    gap: 0;
    min-height: 38px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
}

.express-preview-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.express-preview-tab-link {
    text-decoration: none;
}

.express-preview-tab:hover {
    color: var(--blue);
}

.express-preview-tab.is-active,
.express-preview-tab[aria-selected="true"] {
    background: #eff6ff;
    color: var(--blue);
    box-shadow: none;
}

.express-preview-tab:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

.express-preview-tab[disabled],
.express-preview-tab[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
}

.express-preview-devices {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
}

.express-preview-device {
    min-height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

.express-preview-device.is-active,
.express-preview-device[aria-pressed="true"] {
    background: #eff6ff;
    color: var(--blue);
}

.express-preview-device:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

.express-preview-toolbar-actions {
    display: inline-flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.express-preview-toolbar-actions .btn,
.express-preview-expand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 38px;
    height: 38px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 0.86rem;
    line-height: 1.2;
    white-space: nowrap;
}

.express-preview-open-tab {
    white-space: nowrap;
}

.express-frame-wrap[data-express-device-wrap] {
    transition: max-width 0.22s ease, margin 0.22s ease, box-shadow 0.22s ease;
}

.express-frame-wrap[data-express-device-wrap].is-mobile {
    max-width: 375px;
    margin-inline: auto;
    box-shadow: 0 16px 36px rgba(26, 54, 93, 0.12);
}

.express-preview-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 240;
    align-items: stretch;
    justify-content: center;
    padding: 0;
}

.express-preview-modal.is-open {
    display: flex;
}

body.express-preview-modal-open {
    overflow: hidden;
}

.express-preview-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.72);
}

.express-preview-modal-shell {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(100%, 1440px);
    height: 100%;
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28);
}

.express-preview-modal-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    background: var(--bg-soft);
}

.express-preview-modal-head h2 {
    margin: 0;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
}

.express-preview-modal-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.express-preview-modal-body {
    flex: 1;
    min-height: 0;
    padding: 16px;
    background: #f8fafc;
}

.express-preview-modal-body[data-express-device-wrap] {
    display: flex;
    justify-content: center;
}

.express-preview-modal-body[data-express-device-wrap].is-mobile .express-frame-modal {
    width: 375px;
    max-width: 100%;
}

.express-frame-modal {
    width: 100%;
    height: 100%;
    min-height: calc(100vh - 120px);
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
}

@media (max-width: 760px) {
    .express-preview-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .express-preview-tabs {
        width: 100%;
    }

    .express-preview-tab {
        flex: 1 1 0;
    }

    .express-preview-toolbar-actions {
        margin-left: 0;
        width: 100%;
    }

    .express-preview-toolbar-actions .btn,
    .express-preview-expand {
        flex: 1 1 auto;
        width: 100%;
        justify-content: center;
    }

    .express-preview-modal-tools {
        width: 100%;
    }

    .express-preview-modal-head {
        padding: 12px 14px;
    }

    .express-preview-modal-body {
        padding: 10px;
    }
}

/* Marketplace de /tienda. Se mantiene aislado de fichas de producto y herramientas. */
.shop-market {
    min-height: 60vh;
    background: #fff;
}

.shop-market .market-kicker {
    margin: 0 0 8px;
    color: var(--blue);
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.market-hero {
    position: relative;
    overflow: hidden;
    padding: 48px 0;
    color: #fff;
    background:
        radial-gradient(circle at 8% 0%, rgba(59, 130, 246, 0.32), transparent 34%),
        radial-gradient(circle at 96% 100%, rgba(14, 165, 233, 0.18), transparent 36%),
        linear-gradient(135deg, #081a33 0%, #102d54 58%, #0b3b6f 100%);
}

.market-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.18;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom right, #000, transparent 72%);
}

.market-hero-grid {
    position: relative;
    display: grid;
    gap: 32px;
}

.market-hero-copy {
    min-width: 0;
}

.shop-market .market-hero .market-kicker {
    color: #93c5fd;
}

.market-hero h1 {
    max-width: 780px;
    margin: 0;
    color: #fff;
    font-size: clamp(2.25rem, 8vw, 4.5rem);
    line-height: 1.02;
    letter-spacing: -0.055em;
    text-wrap: balance;
}

.market-hero-lead {
    max-width: 680px;
    margin: 20px 0 0;
    color: #d8e7f8;
    font-size: clamp(1.02rem, 2.3vw, 1.18rem);
    line-height: 1.65;
}

.market-search {
    display: grid;
    gap: 8px;
    max-width: 720px;
    margin-top: 28px;
}

.market-search > label {
    color: #eaf3ff;
    font-size: 0.86rem;
    font-weight: 750;
}

.market-search-control {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    min-height: 58px;
    padding: 6px 6px 6px 16px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(1, 8, 20, 0.28);
}

.market-search-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 21px;
    height: 21px;
    line-height: 0;
    color: #64748b;
}

.market-search-ico svg {
    display: block;
    width: 21px;
    height: 21px;
}

.market-search-control input {
    min-width: 0;
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
}

.market-search-control input::placeholder {
    color: #7b8b9f;
}

.market-search-control:focus-within {
    outline: 3px solid rgba(147, 197, 253, 0.72);
    outline-offset: 3px;
}

.market-search-control .btn {
    grid-column: 1 / -1;
    justify-content: center;
    width: 100%;
    margin-top: 4px;
}

.market-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.market-hero-actions .btn {
    justify-content: center;
}

.market-hero-actions .btn-ghost {
    border-color: rgba(255, 255, 255, 0.36);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.market-hero-actions .btn-ghost:hover,
.market-hero-actions .btn-ghost:focus-visible {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.16);
}

.market-total {
    margin: 16px 0 0;
    color: #b9d3ef;
    font-size: 0.86rem;
    font-weight: 700;
}

.market-explore {
    align-self: center;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.97);
    color: var(--text);
    box-shadow: 0 28px 70px rgba(1, 8, 20, 0.3);
}

.market-explore-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 2px 4px 14px;
    border-bottom: 1px solid var(--line);
}

.market-explore-head > span,
.market-explore-icon {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--blue-soft);
    color: var(--blue);
}

.market-explore-head > span svg,
.market-explore-icon svg {
    width: 21px;
    height: 21px;
}

.market-explore-head p {
    margin: 0 0 2px;
    color: var(--blue);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.market-explore-head h2 {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.25;
    letter-spacing: -0.025em;
}

.market-explore-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 13px 4px;
    border-bottom: 1px solid #edf2f7;
    color: inherit;
    text-decoration: none;
}

.market-explore-row:last-child {
    border-bottom: 0;
}

.market-explore-row > span:nth-child(2) {
    display: grid;
    min-width: 0;
}

.market-explore-row strong {
    font-size: 0.92rem;
    line-height: 1.3;
}

.market-explore-row small {
    overflow: hidden;
    color: var(--muted);
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.market-explore-row > b {
    display: grid;
    place-items: center;
    min-width: 30px;
    height: 30px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.78rem;
}

.market-explore-row:hover,
.market-explore-row:focus-visible {
    color: var(--blue);
}

.market-explore-row:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

.market-trust {
    border-bottom: 1px solid var(--line);
    background: #fff;
}

.market-trust-grid {
    display: grid;
}

.market-trust-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
}

.market-trust-item:last-child {
    border-bottom: 0;
}

.market-trust-icon {
    display: grid;
    place-items: center;
    width: 39px;
    height: 39px;
    border-radius: 11px;
    background: #ecfdf5;
    color: #047857;
}

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

.market-trust-item strong {
    display: block;
    font-size: 0.9rem;
}

.market-trust-item p {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.market-express {
    padding: 52px 0 0;
    background: #fff;
}

.market-express-panel {
    display: grid;
    gap: 28px;
    overflow: hidden;
    padding: 28px;
    border: 1px solid #cfe1fb;
    border-radius: 24px;
    background:
        radial-gradient(circle at 90% 0%, rgba(37, 99, 235, 0.13), transparent 34%),
        linear-gradient(135deg, #eff6ff, #f8fbff);
}

.market-express-copy h2,
.market-section-head h2,
.market-help-panel h2 {
    margin: 0;
    font-size: clamp(1.65rem, 5vw, 2.25rem);
    line-height: 1.12;
    letter-spacing: -0.04em;
    text-wrap: balance;
}

.market-express-copy > p:not(.market-kicker) {
    max-width: 58ch;
    margin: 13px 0 20px;
    color: var(--muted);
}

.market-express-previews {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-items: end;
}

.market-express-preview {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(37, 99, 235, 0.16);
    border-radius: 14px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.1);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.market-express-preview:nth-child(2) {
    transform: translateY(-10px);
}

.market-express-preview:hover,
.market-express-preview:focus-visible {
    transform: translateY(-5px);
    box-shadow: 0 18px 34px rgba(37, 99, 235, 0.17);
}

.market-express-preview:nth-child(2):hover,
.market-express-preview:nth-child(2):focus-visible {
    transform: translateY(-15px);
}

.market-express-preview:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 3px;
}

.market-express-media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #e5edf8;
}

.market-express-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.market-express-preview strong {
    display: block;
    overflow: hidden;
    padding: 9px 10px;
    font-size: 0.74rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.market-catalog {
    scroll-margin-top: 110px;
    padding: 64px 0;
    background: #f5f7fb;
}

.market-catalog.is-express {
    background:
        radial-gradient(circle at 95% 2%, rgba(37, 99, 235, 0.1), transparent 26%),
        #f5f7fb;
}

.market-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
}

.market-section-head p:not(.market-kicker) {
    max-width: 68ch;
    margin: 11px 0 0;
    color: var(--muted);
}

.market-catalog-layout {
    display: grid;
    gap: 24px;
    align-items: start;
}

.market-sidebar,
.market-results {
    min-width: 0;
}

.market-filter-panel {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
}

.market-filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 17px 18px;
    border-bottom: 1px solid var(--line);
}

.market-filter-head h3 {
    margin: 0;
    font-size: 1rem;
    letter-spacing: -0.02em;
}

.market-filter-head a {
    color: var(--blue);
    font-size: 0.75rem;
    font-weight: 750;
    text-decoration: none;
}

.market-filter-head a:hover,
.market-filter-head a:focus-visible {
    text-decoration: underline;
}

.market-filter-group {
    display: block;
    padding: 16px 12px;
}

.market-filter-group + .market-filter-group {
    border-top: 1px solid var(--line);
}

.market-filter-group > p {
    margin: 0 6px 9px;
    color: #64748b;
    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.market-filter-group ul {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    margin: 0;
    padding: 0 0 3px;
    list-style: none;
    scrollbar-width: thin;
}

.market-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    gap: 10px;
    min-height: 42px;
    padding: 8px 11px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: #334155;
    font-size: 0.82rem;
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
}

.market-filter > span {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 8px;
}

.market-filter .icon,
.market-filter .icon svg {
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
}

.market-filter b {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    min-width: 26px;
    height: 24px;
    padding: 0 6px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 0.7rem;
}

.market-filter:hover,
.market-filter:focus-visible {
    border-color: #dbeafe;
    background: #f8fbff;
    color: var(--blue);
}

.market-filter.is-current {
    border-color: #bfdbfe;
    background: var(--blue-soft);
    color: var(--blue-dark);
}

.market-filter.is-current b {
    background: #fff;
    color: var(--blue);
}

.market-filter:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

.market-toolbar {
    display: grid;
    gap: 14px;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: #fff;
}

.market-toolbar > div:first-child {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
}

.market-toolbar strong {
    font-size: 0.93rem;
}

.market-toolbar > div:first-child span {
    color: var(--muted);
    font-size: 0.84rem;
}

.market-sort {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

.market-sort label {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 750;
    white-space: nowrap;
}

.market-sort select {
    flex: 1 1 140px;
    min-width: 0;
    min-height: 40px;
    width: auto;
    max-width: 210px;
    padding: 7px 34px 7px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    background: #fff;
    color: var(--text);
    font: inherit;
    font-size: 0.8rem;
}

.market-sort select:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

.market-sort .btn {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 7px 12px;
    font-size: 0.78rem;
}

.market-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}

.market-card {
    display: flex;
    min-width: 0;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid #dce3ec;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(30, 55, 90, 0.045);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.market-card:hover,
.market-card:focus-within {
    border-color: #a9c9f7;
    box-shadow: 0 18px 38px rgba(30, 64, 110, 0.12);
    transform: translateY(-3px);
}

.market-card-media-link {
    display: block;
    position: relative;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
}

.market-card-media {
    display: grid;
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    place-items: center;
    background: linear-gradient(145deg, #e8f1ff, #f8fafc);
}

.market-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.32s ease;
}

.market-card-media-icon .icon,
.market-card-media-icon .icon svg {
    width: 54px;
    height: 54px;
}

.market-card:hover .market-card-media img,
.market-card:focus-within .market-card-media img {
    transform: scale(1.035);
}

.market-card.is-express .market-card-media::after {
    content: "Web Express";
    position: absolute;
    top: 11px;
    left: 11px;
    padding: 5px 9px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 999px;
    background: rgba(8, 26, 51, 0.84);
    color: #fff;
    font-size: 0.64rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}

.market-card-media-link:focus-visible,
.market-card h3 a:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: -3px;
}

.market-card-body {
    display: grid;
    align-content: start;
    gap: 9px;
    flex: 1 1 auto;
    padding: 16px 16px 12px;
}

.market-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.market-badge {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--blue-soft);
    color: var(--blue-dark);
    font-size: 0.63rem;
    font-weight: 850;
    letter-spacing: 0.035em;
    line-height: 1.2;
    text-transform: uppercase;
}

.market-badge.is-muted {
    background: #f1f5f9;
    color: #526276;
}

.market-badge.is-success {
    background: #ecfdf5;
    color: #047857;
}

.market-card h3 {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.28;
    letter-spacing: -0.025em;
}

.market-card h3 a {
    color: inherit;
    text-decoration: none;
}

.market-card h3 a:hover {
    color: var(--blue);
}

.market-card-body > p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.52;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.market-card-foot {
    display: grid;
    gap: 12px;
    padding: 13px 16px 16px;
    border-top: 1px solid #edf1f6;
}

.market-card-price {
    display: grid;
    gap: 1px;
}

.market-card-price strong {
    color: #0f315a;
    font-size: 1.16rem;
    line-height: 1.2;
    letter-spacing: -0.035em;
}

.market-card-price span {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 650;
}

.market-card-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 7px;
}

.market-card-actions .btn,
.market-card-btn {
    justify-content: center;
    min-height: 39px;
    padding: 7px 10px;
    font-size: 0.78rem;
    white-space: nowrap;
}

.market-empty {
    display: grid;
    justify-items: start;
    gap: 10px;
    min-height: 330px;
    padding: 38px 28px;
    border: 1px dashed #b8c8dc;
    border-radius: 18px;
    background: #fff;
}

.market-empty-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--blue-soft);
    color: var(--blue);
}

.market-empty-icon svg {
    width: 24px;
    height: 24px;
}

.market-empty h3 {
    margin: 4px 0 0;
    font-size: 1.35rem;
    letter-spacing: -0.03em;
}

.market-empty p {
    max-width: 55ch;
    margin: 0 0 5px;
    color: var(--muted);
}

.shop-market .pager {
    margin-top: 25px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}

.market-process {
    padding: 64px 0;
    background: #fff;
}

.market-steps {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.market-step {
    display: grid;
    position: relative;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 13px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
}

.market-step-num {
    position: absolute;
    top: 13px;
    right: 15px;
    color: #d5e3f5;
    font-size: 1.3rem;
    font-weight: 900;
}

.market-step-icon {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    border-radius: 12px;
    background: var(--blue-soft);
    color: var(--blue);
}

.market-step-icon svg {
    width: 21px;
    height: 21px;
}

.market-step h3 {
    margin: 0 25px 5px 0;
    font-size: 1rem;
    letter-spacing: -0.02em;
}

.market-step p {
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.52;
}

.market-help {
    padding: 0 0 72px;
    background: #fff;
}

.market-help-panel {
    display: grid;
    gap: 18px;
    align-items: center;
    padding: 26px;
    border: 1px solid #cfe1fb;
    border-radius: 20px;
    background: linear-gradient(135deg, #f7fbff, #eef6ff);
}

.market-help-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: #fff;
    color: var(--blue);
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.11);
}

.market-help-icon svg {
    width: 26px;
    height: 26px;
}

.market-help-panel h2 {
    font-size: clamp(1.4rem, 4vw, 1.8rem);
}

.market-help-panel div > p:not(.market-kicker) {
    margin: 8px 0 0;
    color: var(--muted);
}

.market-help-panel .btn {
    justify-content: center;
}

@media (min-width: 560px) {
    .market-search-control {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .market-search-control .btn {
        grid-column: auto;
        width: auto;
        margin-top: 0;
    }

    .market-trust-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
    }

    .market-trust-item {
        padding: 22px 18px;
        border-right: 1px solid var(--line);
        border-bottom: 0;
    }

    .market-trust-item:first-child {
        padding-left: 0;
    }

    .market-trust-item:last-child {
        padding-right: 0;
        border-right: 0;
    }

    .market-toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .market-sort {
        flex-wrap: nowrap;
    }

    .market-sort select {
        flex: 0 0 210px;
        width: 210px;
    }

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

    .market-card-foot {
        min-height: 126px;
    }

    .market-help-panel {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .market-help-panel .btn {
        grid-column: 2;
        justify-self: start;
    }
}

@media (min-width: 760px) {
    .market-hero {
        padding: 68px 0;
    }

    .market-express {
        padding-top: 72px;
    }

    .market-express-panel {
        grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
        align-items: center;
        padding: 38px;
    }

    .market-catalog,
    .market-process {
        padding: 80px 0;
    }

    .market-help {
        padding-bottom: 88px;
    }

    .market-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .market-help-panel {
        grid-template-columns: auto minmax(0, 1fr) auto;
        padding: 30px;
    }

    .market-help-panel .btn {
        grid-column: auto;
        justify-self: end;
    }
}

@media (min-width: 960px) {
    .market-hero-grid {
        grid-template-columns: minmax(0, 1.28fr) minmax(330px, 0.72fr);
        align-items: center;
        gap: 54px;
    }

    .market-hero h1 {
        font-size: clamp(3.3rem, 5.3vw, 4.65rem);
    }

    .market-catalog-layout {
        grid-template-columns: 244px minmax(0, 1fr);
        gap: 26px;
    }

    .market-filter-panel {
        position: sticky;
        top: 102px;
    }

    .market-filter-group ul {
        display: grid;
        gap: 3px;
        overflow: visible;
        padding: 0;
    }

    .market-filter {
        flex: initial;
        padding: 8px 9px;
        border-color: transparent;
        white-space: normal;
    }
}

@media (min-width: 1180px) {
    .market-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .market-card-body {
        min-height: 176px;
    }
}

@media (max-width: 559px) {
    .market-hero-actions {
        display: grid;
    }

    .market-express-panel {
        padding: 24px 18px;
    }

    .market-express-previews {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .market-express-preview:nth-child(2) {
        transform: none;
    }

    .market-express-preview:nth-child(3) {
        display: none;
    }

    .market-section-head {
        align-items: start;
    }

    .market-toolbar {
        padding: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .market-card,
    .market-card-media img,
    .market-express-preview,
    .market-card:hover,
    .market-card:focus-within,
    .market-express-preview:hover,
    .market-express-preview:focus-visible {
        transition: none;
        transform: none;
    }
}

/* Home 2026: estilos aislados para la portada comercial. */
.home-v2 {
    --home-ink: #0b1830;
    --home-navy: #0b1f3a;
    --home-navy-light: #12345d;
    --home-blue: #2563eb;
    --home-blue-dark: #1748ad;
    --home-sky: #38bdf8;
    --home-soft: #f3f7fc;
    --home-line: #dce6f2;
    --home-card-shadow: 0 20px 50px rgba(11, 31, 58, 0.09);
    overflow: hidden;
    color: var(--home-ink);
    background: #fff;
}

.home-v2 section {
    scroll-margin-top: 96px;
}

.home-v2 a,
.home-v2 summary {
    -webkit-tap-highlight-color: transparent;
}

.home-v2 a:focus-visible,
.home-v2 summary:focus-visible {
    outline: 3px solid #60a5fa;
    outline-offset: 3px;
}

.home-v2 .icon {
    flex: 0 0 auto;
}

.home-v2-eyebrow {
    margin: 0 0 10px;
    color: var(--home-blue);
    font-size: 0.75rem;
    font-weight: 850;
    letter-spacing: 0.12em;
    line-height: 1.35;
    text-transform: uppercase;
}

.home-intro {
    position: relative;
    padding: 52px 0 62px;
    overflow: hidden;
    background:
        radial-gradient(circle at 92% 8%, rgba(56, 189, 248, 0.22), transparent 34%),
        radial-gradient(circle at 10% 100%, rgba(37, 99, 235, 0.28), transparent 32%),
        linear-gradient(138deg, #071426 0%, #0b1f3a 58%, #12345d 100%);
    color: #fff;
}

.home-intro::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(110deg, #000, transparent 75%);
    pointer-events: none;
}

.home-intro-grid {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 38px;
}

.home-intro-copy {
    align-self: center;
}

.home-intro .home-v2-eyebrow {
    color: #7dd3fc;
}

.home-intro h1 {
    max-width: 760px;
    margin: 0;
    color: #fff;
    font-size: clamp(2.35rem, 10vw, 4.65rem);
    line-height: 0.99;
    letter-spacing: -0.06em;
}

.home-intro h1 span {
    display: block;
    color: #93c5fd;
}

.home-intro-lead {
    max-width: 680px;
    margin: 22px 0 0;
    color: #dbeafe;
    font-size: clamp(1rem, 2.6vw, 1.17rem);
    line-height: 1.68;
}

.home-intro-actions,
.home-section-actions,
.home-final-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.home-intro-actions {
    margin-top: 28px;
}

.home-intro-actions .btn,
.home-section-actions .btn,
.home-final-actions .btn {
    justify-content: center;
    min-height: 50px;
}

.home-v2-primary {
    border-color: var(--home-blue);
    background: var(--home-blue);
    color: #fff;
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.32);
}

.home-v2-primary:hover,
.home-v2-primary:focus-visible {
    border-color: #3b82f6;
    background: #3b82f6;
    color: #fff;
}

.home-intro .home-v2-secondary {
    border-color: rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.home-intro .home-v2-secondary:hover,
.home-intro .home-v2-secondary:focus-visible {
    border-color: rgba(255, 255, 255, 0.68);
    background: rgba(255, 255, 255, 0.13);
    color: #fff;
}

.home-intro .btn .icon,
.home-final-actions .btn .icon {
    background: rgba(255, 255, 255, 0.13);
    color: currentColor;
}

.home-intro-location {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 18px 0 0;
    color: #b8cbe3;
    font-size: 0.86rem;
    line-height: 1.5;
}

.home-inline-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    color: #7dd3fc;
}

.home-inline-icon svg {
    width: 18px;
    height: 18px;
}

.home-route-panel {
    overflow: hidden;
    border: 1px solid rgba(191, 219, 254, 0.28);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.98);
    color: var(--home-ink);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.26);
}

.home-route-panel-head {
    display: grid;
    gap: 4px;
    padding: 19px 20px 17px;
    border-bottom: 1px solid var(--home-line);
    background: linear-gradient(135deg, #f8fbff, #eaf3ff);
}

.home-route-panel-head span {
    color: var(--home-blue);
    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.home-route-panel-head strong {
    font-size: 1.08rem;
    letter-spacing: -0.025em;
}

.home-route-list {
    display: grid;
}

.home-route {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 13px;
    align-items: center;
    min-width: 0;
    padding: 13px 16px;
    color: inherit;
    text-decoration: none;
    transition: background-color 0.18s ease;
}

.home-route + .home-route {
    border-top: 1px solid #e7edf5;
}

.home-route:hover,
.home-route:focus-visible {
    background: #f3f8ff;
    color: inherit;
}

.home-route-media {
    display: grid;
    place-items: center;
    width: 58px;
    height: 48px;
    overflow: hidden;
    border-radius: 10px;
    background: #eaf2ff;
}

.home-route-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-route-media .icon {
    width: 34px;
    height: 34px;
    background: transparent;
    color: var(--home-blue);
}

.home-route-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.home-route-copy small {
    overflow: hidden;
    color: #607188;
    font-size: 0.7rem;
    font-weight: 750;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-route-copy strong {
    overflow: hidden;
    font-size: 0.9rem;
    letter-spacing: -0.02em;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-route-arrow {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    color: #94a3b8;
}

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

.home-route:hover .home-route-arrow {
    color: var(--home-blue);
}

.home-trust {
    position: relative;
    z-index: 2;
    background: #fff;
    border-bottom: 1px solid var(--home-line);
}

.home-trust-grid {
    display: grid;
}

.home-trust-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 13px;
    padding: 21px 0;
}

.home-trust-item + .home-trust-item {
    border-top: 1px solid var(--home-line);
}

.home-trust-item > .icon {
    width: 38px;
    height: 38px;
    background: #eaf2ff;
    color: var(--home-blue);
}

.home-trust-item h2 {
    margin: 0 0 4px;
    font-size: 0.94rem;
    letter-spacing: -0.02em;
}

.home-trust-item p {
    margin: 0;
    color: #607188;
    font-size: 0.82rem;
    line-height: 1.48;
}

.home-solutions,
.home-express-v2,
.home-market,
.home-tools-v2,
.home-process-v2,
.home-collabs-v2,
.home-cases,
.home-faq-v2 {
    padding: 64px 0;
}

.home-v2-head {
    display: grid;
    gap: 16px;
    margin-bottom: 28px;
}

.home-v2-head h2,
.home-faq-intro h2,
.home-final-inner h2 {
    margin: 0;
    color: var(--home-ink);
    font-size: clamp(1.8rem, 6vw, 2.85rem);
    line-height: 1.08;
    letter-spacing: -0.05em;
}

.home-v2-lead {
    max-width: 680px;
    margin: 13px 0 0;
    color: #607188;
    font-size: 0.98rem;
    line-height: 1.62;
}

.home-v2-more,
.home-text-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    color: var(--home-blue);
    font-weight: 800;
    text-decoration: none;
}

.home-v2-more .icon,
.home-text-link .icon,
.home-market-card-foot a .icon {
    width: 22px;
    height: 22px;
    background: #eaf2ff;
    color: currentColor;
}

.home-v2-more .icon svg,
.home-text-link .icon svg,
.home-market-card-foot a .icon svg {
    width: 12px;
    height: 12px;
}

.home-v2-more:hover,
.home-text-link:hover {
    color: var(--home-blue-dark);
}

.home-solutions {
    background:
        radial-gradient(circle at 100% 15%, rgba(56, 189, 248, 0.09), transparent 30%),
        #fff;
}

.home-solutions-grid {
    display: grid;
    gap: 16px;
}

.home-solution {
    overflow: hidden;
    border: 1px solid var(--home-line);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(11, 31, 58, 0.055);
}

.home-solution-custom {
    padding: 24px 20px;
    border-color: #23456e;
    background:
        radial-gradient(circle at 92% 6%, rgba(56, 189, 248, 0.2), transparent 32%),
        linear-gradient(145deg, #0b1f3a, #12345d);
    color: #fff;
}

.home-solution-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.09);
}

.home-solution-icon .icon {
    background: transparent;
    color: #7dd3fc;
}

.home-solution-label {
    margin: 0 0 7px;
    color: var(--home-blue);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.home-solution-custom .home-solution-label {
    color: #7dd3fc;
}

.home-solution h3 {
    margin: 0;
    font-size: clamp(1.35rem, 4.6vw, 1.9rem);
    line-height: 1.12;
    letter-spacing: -0.04em;
}

.home-solution > p:not(.home-solution-label),
.home-solution-body > p:not(.home-solution-label) {
    margin: 12px 0 0;
    color: #607188;
    line-height: 1.58;
}

.home-solution-custom > p:not(.home-solution-label) {
    color: #c8d7e9;
}

.home-service-links {
    display: grid;
    gap: 8px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.home-service-links a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 48px;
    padding: 9px 11px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    text-decoration: none;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}

.home-service-links a:hover,
.home-service-links a:focus-visible {
    border-color: rgba(125, 211, 252, 0.6);
    background: rgba(255, 255, 255, 0.11);
    color: #fff;
}

.home-service-links a > .icon {
    width: 30px;
    height: 30px;
    background: rgba(125, 211, 252, 0.12);
    color: #7dd3fc;
}

.home-service-links a > .icon svg {
    width: 17px;
    height: 17px;
}

.home-service-thumb {
    display: block;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    overflow: hidden;
    border-radius: 10px;
    background: rgba(125, 211, 252, 0.12);
}

.home-service-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-service-thumb.mg-cover-ph {
    aspect-ratio: 1;
    min-height: 36px;
    padding: 4px;
}

.home-service-thumb.mg-cover-ph .mg-cover-ph-title,
.home-service-thumb.mg-cover-ph .mg-cover-ph-slug,
.home-service-thumb.mg-cover-ph .mg-cover-ph-kicker {
    display: none;
}

.home-service-thumb.mg-cover-ph::before {
    inset: 4px;
    border-radius: 6px;
}

.home-service-links span {
    font-size: 0.87rem;
    font-weight: 750;
}

.home-service-arrow {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    color: #8ca3bf;
}

.home-service-arrow svg {
    width: 14px;
    height: 14px;
}

.home-solution-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 20px;
    margin-top: 22px;
}

.home-solution-custom .home-text-link {
    color: #fff;
}

.home-solution-custom .home-text-link.is-muted {
    color: #b8cbe3;
}

.home-solution-custom .home-text-link .icon {
    background: rgba(255, 255, 255, 0.1);
}

.home-solution-media {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 16 / 8.8;
    overflow: hidden;
    background: #eaf2ff;
}

.home-solution-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.home-solution-media.is-placeholder .icon {
    width: 50px;
    height: 50px;
    color: var(--home-blue);
}

.home-solution:hover .home-solution-media img {
    transform: scale(1.025);
}

.home-solution-body {
    padding: 22px 20px 23px;
}

.home-solution-body .home-text-link {
    margin-top: 18px;
}

.home-express-v2 {
    background:
        radial-gradient(circle at 0 25%, rgba(37, 99, 235, 0.09), transparent 30%),
        linear-gradient(180deg, #f3f7fc, #edf4fc);
    border-top: 1px solid var(--home-line);
    border-bottom: 1px solid var(--home-line);
}

.home-express-flow {
    display: grid;
    gap: 10px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}

.home-express-flow li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 13px;
    align-items: start;
    padding: 16px;
    border: 1px solid #d6e3f3;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.76);
}

.home-express-flow li > span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--home-navy);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 850;
}

.home-express-flow strong {
    display: block;
    margin: 1px 0 4px;
    font-size: 0.92rem;
}

.home-express-flow p {
    margin: 0;
    color: #607188;
    font-size: 0.82rem;
    line-height: 1.45;
}

.home-express-grid,
.home-market-grid,
.home-tools-grid-v2,
.home-case-grid {
    display: grid;
    gap: 16px;
}

.home-express-card-v2,
.home-market-card,
.home-tool-card-v2 {
    display: flex;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--home-line);
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(11, 31, 58, 0.055);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.home-express-card-v2 {
    flex-direction: column;
}

.home-express-card-v2:hover,
.home-express-card-v2:focus-within,
.home-market-card:hover,
.home-market-card:focus-within,
.home-tool-card-v2:hover,
.home-tool-card-v2:focus-within {
    border-color: #9fc1ed;
    box-shadow: var(--home-card-shadow);
    transform: translateY(-3px);
}

.home-express-cover-link,
.home-market-cover-link,
.home-tool-cover-link {
    display: block;
    overflow: hidden;
}

.home-express-cover,
.home-market-cover,
.home-tool-cover-v2 {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #eaf2ff;
}

.home-express-cover img,
.home-market-cover img,
.home-tool-cover-v2 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.home-express-card-v2:hover .home-express-cover img,
.home-market-card:hover .home-market-cover img,
.home-tool-card-v2:hover .home-tool-cover-v2 img {
    transform: scale(1.03);
}

.home-express-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    padding: 18px;
}

.home-express-card-body h3,
.home-market-card h3,
.home-tool-card-v2 h3 {
    margin: 0;
    font-size: 1.08rem;
    letter-spacing: -0.03em;
}

.home-express-card-body h3 a,
.home-market-card h3 a,
.home-tool-card-v2 h3 a {
    color: inherit;
    text-decoration: none;
}

.home-express-card-body p,
.home-market-card-body > p,
.home-tool-card-body > p {
    margin: 8px 0 0;
    color: #607188;
    font-size: 0.87rem;
    line-height: 1.5;
}

.home-express-card-foot,
.home-market-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid #e7edf5;
}

.home-express-card-foot > strong,
.home-market-card-foot > strong {
    color: var(--home-ink);
    font-size: 1.02rem;
}

.home-express-card-foot > span {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px 11px;
}

.home-express-card-foot a,
.home-market-card-foot a {
    color: var(--home-blue);
    font-size: 0.8rem;
    font-weight: 800;
    text-decoration: none;
}

.home-section-actions {
    margin-top: 24px;
}

.home-market {
    background: #fff;
}

.home-market-card {
    flex-direction: column;
}

.home-market-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 18px;
}

.home-market-type {
    margin: 0 0 7px !important;
    color: var(--home-blue) !important;
    font-size: 0.7rem !important;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.home-market-card-body > p:not(.home-market-type) {
    flex: 1 1 auto;
}

.home-market-card-foot {
    margin-top: 19px;
}

.home-market-card-foot a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.home-tools-v2 {
    background:
        radial-gradient(circle at 100% 0, rgba(16, 185, 129, 0.08), transparent 30%),
        #f5f9f8;
    border-top: 1px solid #dce9e5;
    border-bottom: 1px solid #dce9e5;
}

.home-tool-card-v2 {
    flex-direction: column;
}

.home-tool-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 18px;
}

.home-tool-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 9px;
}

.home-tool-meta > span {
    color: #5d6e83;
    font-size: 0.69rem;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.home-tool-meta > span.is-account {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #166534;
    letter-spacing: 0;
    text-transform: none;
}

.home-tool-meta > span.is-account.is-sub {
    color: #047857;
}

.home-tool-meta > span.is-pricing {
    font-weight: 850;
}

.home-tool-meta > span.is-pricing.is-free {
    color: #15803d;
}

.home-tool-meta > span.is-pricing.is-paid {
    color: #b45309;
}

.home-tool-meta .icon {
    width: 17px;
    height: 17px;
    padding: 0;
    background: transparent;
    color: currentColor;
}

.home-tool-meta .icon svg {
    width: 14px;
    height: 14px;
}

.home-tool-card-body > p {
    flex: 1 1 auto;
}

.home-tool-card-body .home-text-link {
    margin-top: 18px;
}

.home-process-v2 {
    background:
        radial-gradient(circle at 88% 10%, rgba(56, 189, 248, 0.18), transparent 28%),
        linear-gradient(140deg, #08182c, #0d2848);
    color: #fff;
}

.home-process-v2 .home-v2-eyebrow {
    color: #7dd3fc;
}

.home-process-v2 .home-v2-head h2 {
    color: #fff;
}

.home-process-v2 .home-v2-lead {
    color: #bdcde0;
}

.home-process-grid-v2 {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-process-step {
    position: relative;
    min-height: 190px;
    padding: 21px 19px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.055);
}

.home-process-step > span {
    display: block;
    margin-bottom: 30px;
    color: #7dd3fc;
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.1em;
}

.home-process-step h3 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 1.05rem;
    letter-spacing: -0.025em;
}

.home-process-step p {
    margin: 0;
    color: #bdcde0;
    font-size: 0.88rem;
    line-height: 1.52;
}

.home-collabs-v2 {
    background: #fff;
}

.home-collab-grid-v2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.home-collab-item-v2 {
    display: grid;
    place-items: center;
    min-height: 86px;
    padding: 11px;
    border: 1px solid var(--home-line);
    border-radius: 14px;
    background: #fff;
    color: var(--home-ink);
    text-decoration: none;
}

a.home-collab-item-v2 {
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

a.home-collab-item-v2:hover,
a.home-collab-item-v2:focus-visible {
    border-color: #9fc1ed;
    box-shadow: 0 10px 24px rgba(11, 31, 58, 0.08);
}

.home-collab-logo-v2 {
    display: grid;
    place-items: center;
    width: 100%;
    height: 62px;
}

.home-collab-logo-v2 img {
    max-width: 100%;
    max-height: 54px;
    object-fit: contain;
}

.home-collab-name-v2 {
    color: #607188;
    font-size: 0.82rem;
    font-weight: 750;
    text-align: center;
}

.home-cases {
    background:
        radial-gradient(circle at 0 100%, rgba(37, 99, 235, 0.08), transparent 30%),
        var(--home-soft);
    border-top: 1px solid var(--home-line);
}

.home-case-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--home-line);
    border-radius: 20px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.home-case-card:hover,
.home-case-card:focus-visible {
    border-color: #9fc1ed;
    box-shadow: var(--home-card-shadow);
    color: inherit;
    transform: translateY(-3px);
}

.home-case-number {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 2;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.08em;
}

.home-case-media {
    display: block;
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #eaf2ff;
}

.home-case-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-case-card h3 {
    margin: 16px 18px 8px;
    font-size: 1.16rem;
    letter-spacing: -0.03em;
}

.home-case-card p {
    flex: 1 1 auto;
    margin: 0 18px;
    color: #607188;
    font-size: 0.9rem;
    line-height: 1.55;
}

.home-case-card .home-text-link {
    margin: 16px 18px 18px;
}

.home-faq-v2 {
    background: #fff;
}

.home-faq-layout {
    display: grid;
    gap: 32px;
}

.home-faq-intro > p:not(.home-v2-eyebrow) {
    max-width: 440px;
    margin: 14px 0 22px;
    color: #607188;
    line-height: 1.6;
}

.home-faq-list-v2 {
    display: grid;
    gap: 9px;
}

.home-faq-item-v2 {
    overflow: hidden;
    border: 1px solid var(--home-line);
    border-radius: 14px;
    background: #fff;
}

.home-faq-item-v2[open] {
    border-color: #9fc1ed;
    box-shadow: 0 12px 28px rgba(11, 31, 58, 0.07);
}

.home-faq-item-v2 summary {
    position: relative;
    padding: 17px 48px 17px 18px;
    cursor: pointer;
    list-style: none;
    font-size: 0.94rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.home-faq-item-v2 summary::-webkit-details-marker {
    display: none;
}

.home-faq-item-v2 summary::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 18px;
    color: var(--home-blue);
    font-size: 1.2rem;
    transform: translateY(-50%);
}

.home-faq-item-v2[open] summary::after {
    content: "−";
}

.home-faq-item-v2 p {
    margin: 0;
    padding: 0 18px 18px;
    color: #607188;
    font-size: 0.9rem;
    line-height: 1.58;
}

.home-final-cta {
    padding: 58px 0;
    background:
        radial-gradient(circle at 95% 0, rgba(56, 189, 248, 0.25), transparent 32%),
        linear-gradient(135deg, #1748ad, #2563eb);
    color: #fff;
}

.home-final-inner {
    display: grid;
    gap: 28px;
}

.home-final-inner .home-v2-eyebrow {
    color: #bfdbfe;
}

.home-final-inner h2 {
    color: #fff;
}

.home-final-inner > div:first-child > p:last-child {
    max-width: 680px;
    margin: 15px 0 0;
    color: #dbeafe;
    line-height: 1.62;
}

.home-final-primary {
    border-color: #fff;
    background: #fff;
    color: var(--home-blue-dark);
}

.home-final-primary:hover,
.home-final-primary:focus-visible {
    border-color: #eaf2ff;
    background: #eaf2ff;
    color: var(--home-blue-dark);
}

.home-final-secondary {
    border-color: rgba(255, 255, 255, 0.46);
    background: transparent;
    color: #fff;
}

.home-final-secondary:hover,
.home-final-secondary:focus-visible {
    border-color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

@media (min-width: 560px) {
    .home-intro-actions,
    .home-section-actions,
    .home-final-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .home-intro-actions .btn,
    .home-section-actions .btn,
    .home-final-actions .btn {
        width: auto;
    }

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

    .home-trust-item {
        padding: 20px 18px;
    }

    .home-trust-item + .home-trust-item {
        border-top: 0;
    }

    .home-trust-item:nth-child(even) {
        border-left: 1px solid var(--home-line);
    }

    .home-trust-item:nth-child(n + 3) {
        border-top: 1px solid var(--home-line);
    }

    .home-service-links,
    .home-express-grid,
    .home-market-grid,
    .home-tools-grid-v2,
    .home-case-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-express-flow {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home-collab-grid-v2 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 760px) {
    .home-intro,
    .home-solutions,
    .home-express-v2,
    .home-market,
    .home-tools-v2,
    .home-process-v2,
    .home-collabs-v2,
    .home-cases,
    .home-faq-v2 {
        padding-top: 82px;
        padding-bottom: 82px;
    }

    .home-intro {
        padding-top: 72px;
    }

    .home-v2-head {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        margin-bottom: 36px;
    }

    .home-v2-more {
        justify-self: end;
        margin-bottom: 4px;
    }

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

    .home-solution-custom {
        grid-column: 1 / -1;
        padding: 30px;
    }

    .home-process-grid-v2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-final-cta {
        padding: 72px 0;
    }

    .home-final-inner {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .home-final-actions {
        justify-content: flex-end;
    }
}

@media (min-width: 980px) {
    .home-intro-grid {
        grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr);
        gap: clamp(44px, 6vw, 82px);
        align-items: center;
    }

    .home-intro h1 {
        font-size: clamp(3.6rem, 5.8vw, 5rem);
    }

    .home-route-panel {
        transform: rotate(0.5deg);
    }

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

    .home-trust-item,
    .home-trust-item:nth-child(n + 3) {
        padding: 22px 18px;
        border-top: 0;
    }

    .home-trust-item:nth-child(even),
    .home-trust-item + .home-trust-item {
        border-left: 1px solid var(--home-line);
    }

    .home-trust-item:first-child {
        padding-left: 0;
    }

    .home-trust-item:last-child {
        padding-right: 0;
    }

    .home-solutions-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .home-solution-custom {
        grid-column: span 7;
    }

    .home-solution-express {
        grid-column: span 5;
    }

    .home-solution-market,
    .home-solution-tools {
        grid-column: span 6;
    }

    .home-express-grid,
    .home-market-grid,
    .home-tools-grid-v2 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .home-process-grid-v2 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .home-collab-grid-v2 {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    .home-case-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home-faq-layout {
        grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1.25fr);
        gap: clamp(48px, 8vw, 110px);
        align-items: start;
    }

    .home-faq-intro {
        position: sticky;
        top: 112px;
    }
}

@media (max-width: 379px) {
    .home-route {
        grid-template-columns: 48px minmax(0, 1fr) auto;
        gap: 10px;
        padding-inline: 12px;
    }

    .home-route-media {
        width: 48px;
        height: 42px;
    }

    .home-express-card-foot,
    .home-market-card-foot {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-v2 *,
    .home-v2 *::before,
    .home-v2 *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .home-route-panel,
    .home-express-card-v2:hover,
    .home-express-card-v2:focus-within,
    .home-market-card:hover,
    .home-market-card:focus-within,
    .home-tool-card-v2:hover,
    .home-tool-card-v2:focus-within,
    .home-case-card:hover,
    .home-case-card:focus-visible,
    .home-solution:hover .home-solution-media img,
    .home-express-card-v2:hover .home-express-cover img,
    .home-market-card:hover .home-market-cover img,
    .home-tool-card-v2:hover .home-tool-cover-v2 img {
        transform: none;
    }
}

/* Herramientas, Portfolio y Blog 2026: lenguaje visual compartido con Inicio y Tienda. */
.public-hub {
    --hub-ink: #0b1830;
    --hub-navy: #0b1f3a;
    --hub-blue: #2563eb;
    --hub-blue-dark: #1748ad;
    --hub-soft: #f3f7fc;
    --hub-line: #dce6f2;
    --hub-muted: #607188;
    min-height: 60vh;
    overflow: hidden;
    background: #fff;
    color: var(--hub-ink);
}

.public-hub section {
    scroll-margin-top: 98px;
}

.public-hub a,
.public-hub button {
    -webkit-tap-highlight-color: transparent;
}

.public-hub a:focus-visible,
.public-hub button:focus-visible {
    outline: 3px solid #60a5fa;
    outline-offset: 3px;
}

.hub-hero {
    position: relative;
    overflow: hidden;
    padding: 52px 0 58px;
    color: #fff;
    background:
        radial-gradient(circle at 92% 8%, rgba(56, 189, 248, 0.2), transparent 32%),
        radial-gradient(circle at 8% 100%, rgba(37, 99, 235, 0.26), transparent 34%),
        linear-gradient(138deg, #071426 0%, #0b1f3a 58%, #12345d 100%);
}

.hub-hero-tools {
    background:
        radial-gradient(circle at 92% 8%, rgba(45, 212, 191, 0.2), transparent 32%),
        radial-gradient(circle at 8% 100%, rgba(37, 99, 235, 0.28), transparent 34%),
        linear-gradient(138deg, #071426 0%, #0b2438 58%, #10435a 100%);
}

.hub-hero-blog {
    background:
        radial-gradient(circle at 92% 8%, rgba(129, 140, 248, 0.22), transparent 32%),
        radial-gradient(circle at 8% 100%, rgba(56, 189, 248, 0.2), transparent 34%),
        linear-gradient(138deg, #071426 0%, #111f42 58%, #17345d 100%);
}

.hub-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.42;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: linear-gradient(115deg, #000, transparent 76%);
}

.hub-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 38px;
}

.hub-hero-copy {
    align-self: center;
    min-width: 0;
}

.hub-kicker,
.hub-eyebrow {
    margin: 0 0 10px;
    color: #7dd3fc;
    font-size: 0.74rem;
    font-weight: 850;
    letter-spacing: 0.12em;
    line-height: 1.35;
    text-transform: uppercase;
}

.hub-eyebrow {
    color: var(--hub-blue);
}

.hub-hero h1 {
    max-width: 760px;
    margin: 0;
    color: #fff;
    font-size: clamp(2.35rem, 10vw, 4.65rem);
    line-height: 0.99;
    letter-spacing: -0.06em;
    text-wrap: balance;
}

.hub-intro {
    max-width: 680px;
    margin-top: 21px;
}

.hub-intro p {
    margin: 0 0 10px;
    color: #dbeafe;
    font-size: clamp(1rem, 2.6vw, 1.15rem);
    line-height: 1.66;
}

.hub-intro p:last-child {
    margin-bottom: 0;
}

.hub-intro a:not(.btn) {
    color: #bfdbfe;
}

.hub-hero-actions,
.hub-intro .block-actions {
    display: grid;
    gap: 10px;
    margin-top: 27px;
}

.hub-hero-actions .btn,
.hub-intro .block-actions .btn {
    justify-content: center;
    min-height: 50px;
}

.hub-hero .btn-ghost {
    border-color: rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}

.hub-hero .btn-ghost:hover,
.hub-hero .btn-ghost:focus-visible {
    border-color: rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.hub-hero-count {
    width: fit-content;
    margin: 18px 0 0;
    padding: 6px 11px;
    border: 1px solid rgba(191, 219, 254, 0.28);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #bed3eb;
    font-size: 0.78rem;
    font-weight: 750;
}

.hub-hero-panel {
    align-self: center;
    min-width: 0;
    overflow: hidden;
    padding: 17px;
    border: 1px solid rgba(191, 219, 254, 0.3);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.98);
    color: var(--hub-ink);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.27);
}

.hub-panel-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 3px 3px 15px;
    border-bottom: 1px solid var(--hub-line);
}

.hub-panel-icon,
.hub-empty-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: #eaf2ff;
    color: var(--hub-blue);
}

.tools-v2 .hub-panel-icon {
    background: #ecfdf5;
    color: #047857;
}

.hub-panel-icon svg,
.hub-empty-icon svg {
    width: 22px;
    height: 22px;
}

.hub-panel-head p {
    margin: 0 0 3px;
    color: var(--hub-blue);
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.hub-panel-head h2 {
    margin: 0;
    font-size: 1.04rem;
    line-height: 1.28;
    letter-spacing: -0.025em;
}

.hub-preview-list {
    display: grid;
}

.hub-preview-row {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-width: 0;
    padding: 12px 3px;
    border-bottom: 1px solid #e8eef6;
    color: inherit;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.hub-preview-row:last-child {
    border-bottom: 0;
}

a.hub-preview-row:hover,
a.hub-preview-row:focus-visible {
    background: #f3f8ff;
    color: var(--hub-blue);
}

a.hub-preview-row:focus-visible {
    outline-offset: -1px;
}

.hub-preview-media {
    display: grid;
    position: relative;
    place-items: center;
    width: 62px;
    height: 50px;
    overflow: hidden;
    border-radius: 11px;
    background: #eaf2ff;
    color: var(--hub-blue);
}

.hub-preview-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hub-preview-media svg {
    width: 25px;
    height: 25px;
}

.hub-preview-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.hub-preview-copy small,
.hub-preview-copy strong,
.hub-preview-copy em {
    display: block;
    overflow: hidden;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hub-preview-copy small {
    color: #65768b;
    font-size: 0.66rem;
    font-weight: 750;
}

.hub-preview-copy strong {
    color: var(--hub-ink);
    font-size: 0.88rem;
    letter-spacing: -0.015em;
}

.hub-preview-copy em {
    color: #718198;
    font-size: 0.7rem;
    font-style: normal;
}

.hub-preview-arrow {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    color: #94a3b8;
}

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

a.hub-preview-row:hover .hub-preview-arrow {
    color: var(--hub-blue);
}

.hub-panel-empty {
    display: grid;
    gap: 4px;
    min-height: 145px;
    place-content: center;
    padding: 26px 12px;
    text-align: center;
}

.hub-panel-empty strong {
    font-size: 1rem;
}

.hub-panel-empty span {
    color: var(--hub-muted);
    font-size: 0.82rem;
}

.hub-panel-total {
    margin: 4px 3px 0;
    padding-top: 12px;
    border-top: 1px solid var(--hub-line);
    color: #65768b;
    font-size: 0.72rem;
    font-weight: 750;
    text-align: right;
}

.public-hub .hub-section {
    padding: 60px 0;
    background:
        radial-gradient(circle at 100% 0, rgba(37, 99, 235, 0.065), transparent 27%),
        #f5f7fb;
}

.tools-v2 .hub-section {
    background:
        radial-gradient(circle at 100% 0, rgba(16, 185, 129, 0.07), transparent 28%),
        #f5f9f8;
}

.hub-section-head {
    display: grid;
    gap: 15px;
    margin-bottom: 26px;
}

.hub-section-head h2 {
    margin: 0;
    color: var(--hub-ink);
    font-size: clamp(1.75rem, 6vw, 2.55rem);
    line-height: 1.08;
    letter-spacing: -0.05em;
    text-wrap: balance;
}

.hub-section-head > div > p:last-child:not(.hub-eyebrow) {
    max-width: 680px;
    margin: 12px 0 0;
    color: var(--hub-muted);
    font-size: 0.94rem;
    line-height: 1.6;
}

.hub-results {
    align-self: end;
    justify-self: start;
    padding: 7px 11px;
    border: 1px solid #cfe0f5;
    border-radius: 999px;
    background: #fff;
    color: #52657d;
    font-size: 0.75rem;
    font-weight: 800;
    white-space: nowrap;
}

.hub-filter-shell {
    margin: 0 0 23px;
    padding: 13px;
    overflow: hidden;
    border: 1px solid var(--hub-line);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
}

.hub-filter-shell:empty {
    display: none;
}

.public-hub .hub-filter-shell .tool-filters ul,
.public-hub .hub-filter-shell .blog-filters ul {
    flex-wrap: nowrap;
    gap: 7px;
    overflow-x: auto;
    margin: 0;
    padding: 1px 1px 4px;
    scrollbar-width: thin;
}

.public-hub .hub-filter-shell .blog-filters {
    margin: 0;
}

.public-hub .tool-filter,
.public-hub .blog-filter {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 8px 13px;
    border-color: var(--hub-line);
    border-radius: 10px;
    background: #fff;
    color: #334155;
    font-size: 0.8rem;
    font-weight: 750;
    white-space: nowrap;
}

.public-hub .tool-filter:hover,
.public-hub .tool-filter:focus-visible,
.public-hub .tool-filter.is-current,
.public-hub .blog-filter:hover,
.public-hub .blog-filter:focus-visible,
.public-hub .blog-filter.is-current {
    border-color: #bfdbfe;
    background: #eaf2ff;
    color: var(--hub-blue-dark);
}

.hub-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}

.public-hub .hub-card {
    min-width: 0;
    min-height: 100%;
    overflow: hidden;
    border: 1px solid var(--hub-line);
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(11, 31, 58, 0.05);
    color: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.public-hub .hub-card:hover,
.public-hub .hub-card:focus-visible,
.public-hub .hub-card:focus-within {
    border-color: #9fc1ed;
    box-shadow: 0 20px 46px rgba(11, 31, 58, 0.11);
    color: inherit;
    transform: translateY(-3px);
}

.public-hub a.hub-card:focus-visible {
    outline: 3px solid var(--hub-blue);
    outline-offset: 3px;
}

.public-hub .tool-card-media,
.public-hub .blog-card {
    color: inherit;
}

.public-hub .tool-media,
.public-hub .pf-media,
.public-hub .blog-media {
    display: grid;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    place-items: center;
    background: linear-gradient(145deg, #e8f1ff, #f8fafc);
}

.tools-v2 .tool-media {
    background: linear-gradient(145deg, #e8f8f2, #f8fafc);
}

.public-hub .tool-media img,
.public-hub .pf-media img,
.public-hub .blog-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.34s ease;
}

.public-hub .hub-card:hover .tool-media img,
.public-hub .hub-card:hover .pf-media img,
.public-hub .hub-card:hover .blog-media img,
.public-hub .hub-card:focus-within .tool-media img,
.public-hub .hub-card:focus-within .pf-media img,
.public-hub .hub-card:focus-within .blog-media img {
    transform: scale(1.03);
}

.public-hub .tool-media-icon svg,
.public-hub .blog-media-icon .icon,
.public-hub .blog-media-icon .icon svg {
    width: 54px;
    height: 54px;
}

.public-hub .blog-media-icon .icon {
    background: #fff;
    color: var(--hub-blue);
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.12);
}

.public-hub .tool-card-copy,
.public-hub .pf-copy,
.public-hub .blog-card-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 19px;
}

.hub-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 1px;
}

.hub-badge {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #eaf2ff;
    color: var(--hub-blue-dark);
    font-size: 0.63rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
}

.hub-badge.is-muted {
    background: #f1f5f9;
    color: #526276;
}

.tools-v2 .hub-badge {
    background: #ecfdf5;
    color: #047857;
}

.public-hub .tool-card h2,
.public-hub .pf-card h3,
.public-hub .blog-card-copy h2 {
    margin: 0;
    color: var(--hub-ink);
    font-size: 1.12rem;
    line-height: 1.3;
    letter-spacing: -0.03em;
}

.public-hub .tool-card h2 a {
    color: inherit;
    text-decoration: none;
}

.public-hub .tool-card h2 a:hover,
.public-hub .tool-card h2 a:focus-visible {
    color: var(--hub-blue);
}

.public-hub .tool-card-copy > p,
.public-hub .pf-card p,
.public-hub .blog-card-copy > p {
    display: -webkit-box;
    flex: 1 1 auto;
    overflow: hidden;
    margin: 0;
    color: var(--hub-muted);
    font-size: 0.86rem;
    line-height: 1.54;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.public-hub .tool-member-badge {
    align-self: flex-start;
    margin-top: 0;
}

.public-hub .tool-badges {
    align-self: flex-start;
    margin-top: 2px;
}

.public-hub .tool-card-actions {
    display: flex;
    align-items: center;
    gap: 8px 13px;
    margin-top: auto;
    padding-top: 11px;
    border-top: 1px solid #e8eef6;
}

.public-hub .tool-card-actions .btn {
    justify-content: center;
    min-height: 40px;
    padding: 8px 13px;
    font-size: 0.78rem;
}

.public-hub .tool-how-link,
.public-hub .pf-more,
.public-hub .blog-more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    color: var(--hub-blue);
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
}

.public-hub .pf-more,
.public-hub .blog-more {
    margin-top: auto;
    padding-top: 10px;
}

.public-hub .blog-card-copy time {
    color: var(--hub-blue);
    font-size: 0.74rem;
    font-weight: 800;
}

.public-hub .blog-card-cats {
    color: #65768b;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.public-hub .pf-media.mg-cover-ph {
    min-height: 0;
}

.public-hub .hub-empty {
    display: grid;
    justify-items: center;
    gap: 10px;
    min-height: 290px;
    margin: 0;
    padding: 38px 24px;
    border: 1px dashed #b8c8dc;
    border-radius: 19px;
    background: #fff;
    color: inherit;
    text-align: center;
}

.public-hub .hub-empty h3 {
    margin: 4px 0 0;
    color: var(--hub-ink);
    font-size: 1.3rem;
    letter-spacing: -0.03em;
}

.public-hub .hub-empty p {
    max-width: 54ch;
    margin: 0 0 4px;
    color: var(--hub-muted);
}

.public-hub .pager {
    margin-top: 26px;
    padding: 14px;
    border: 1px solid var(--hub-line);
    border-radius: 15px;
    background: #fff;
}

.public-hub .pager-links a:focus-visible {
    outline: 2px solid var(--hub-blue);
    outline-offset: 2px;
}

.public-hub .hub-footer-section {
    padding: 52px 0 68px;
    background: #fff;
}

.public-hub .hub-footer-section .cta {
    padding: 26px;
    border: 1px solid #244d7d;
    border-radius: 22px;
    background:
        radial-gradient(circle at 96% 0, rgba(56, 189, 248, 0.2), transparent 30%),
        linear-gradient(138deg, #0b1f3a, #12345d);
    color: #fff;
    box-shadow: 0 20px 46px rgba(11, 31, 58, 0.15);
}

.public-hub .hub-footer-section .cta h2 {
    color: #fff;
}

.public-hub .hub-footer-section .cta p {
    color: #c8d7e9;
}

.public-hub .hub-footer-section .cta-copy > .icon {
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.09);
    color: #7dd3fc;
}

.public-hub .hub-footer-section .cta .btn {
    border-color: #fff;
    background: #fff;
    color: var(--hub-blue-dark);
}

.public-hub .hub-footer-section .cta .btn:hover,
.public-hub .hub-footer-section .cta .btn:focus-visible {
    border-color: #eaf2ff;
    background: #eaf2ff;
    color: var(--hub-blue-dark);
}

@media (min-width: 560px) {
    .hub-hero-actions,
    .hub-intro .block-actions {
        display: flex;
        flex-wrap: wrap;
    }

    .hub-hero-actions .btn,
    .hub-intro .block-actions .btn {
        width: auto;
    }
}

@media (min-width: 660px) {
    .hub-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 760px) {
    .hub-hero {
        padding: 72px 0;
    }

    .public-hub .hub-section {
        padding: 78px 0;
    }

    .hub-section-head {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        margin-bottom: 32px;
    }

    .hub-results {
        justify-self: end;
        margin-bottom: 3px;
    }

    .public-hub .hub-footer-section {
        padding: 64px 0 82px;
    }

    .public-hub .hub-footer-section .cta {
        padding: 30px;
    }
}

@media (min-width: 980px) {
    .hub-hero-grid {
        grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr);
        gap: clamp(44px, 6vw, 82px);
        align-items: center;
    }

    .hub-hero h1 {
        font-size: clamp(3.5rem, 5.6vw, 4.8rem);
    }

    .hub-hero-panel {
        transform: rotate(0.4deg);
    }
}

@media (min-width: 1100px) {
    .hub-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 420px) {
    .hub-preview-row {
        grid-template-columns: 52px minmax(0, 1fr) auto;
        gap: 9px;
    }

    .hub-preview-media {
        width: 52px;
        height: 46px;
    }

    .public-hub .tool-card-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .public-hub .tool-card-actions .btn,
    .public-hub .tool-how-link {
        justify-content: center;
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .public-hub *,
    .public-hub *::before,
    .public-hub *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .hub-hero-panel,
    .public-hub .hub-card:hover,
    .public-hub .hub-card:focus-visible,
    .public-hub .hub-card:focus-within,
    .public-hub .hub-card:hover .tool-media img,
    .public-hub .hub-card:hover .pf-media img,
    .public-hub .hub-card:hover .blog-media img {
        transform: none;
    }
}

/* Servicios, Sobre mí, Contacto y área de cliente 2026. */
.public-refresh {
    --refresh-ink: #0b1830;
    --refresh-navy: #0b1f3a;
    --refresh-blue: #2563eb;
    --refresh-blue-dark: #1748ad;
    --refresh-muted: #607188;
    --refresh-soft: #f4f7fb;
    --refresh-line: #dce6f2;
    min-height: 60vh;
    overflow: hidden;
    background: #fff;
    color: var(--refresh-ink);
}

.public-refresh section {
    scroll-margin-top: 98px;
}

.public-refresh a,
.public-refresh button,
.auth-v2 a,
.auth-v2 button,
.client-v2 a,
.client-v2 button,
.client-v2 summary {
    -webkit-tap-highlight-color: transparent;
}

.public-refresh a:focus-visible,
.public-refresh button:focus-visible,
.auth-v2 a:focus-visible,
.auth-v2 button:focus-visible,
.client-v2 a:focus-visible,
.client-v2 button:focus-visible,
.client-v2 summary:focus-visible {
    outline: 3px solid #60a5fa;
    outline-offset: 3px;
}

/* Servicios */
.services-v2 .svc-band {
    padding: 64px 0;
    background: #fff;
}

.services-v2 .svc-band-hero {
    position: relative;
    overflow: hidden;
    padding: 54px 0 62px;
    color: #fff;
    background:
        radial-gradient(circle at 92% 8%, rgba(56, 189, 248, 0.2), transparent 32%),
        radial-gradient(circle at 8% 100%, rgba(37, 99, 235, 0.28), transparent 35%),
        linear-gradient(138deg, #071426 0%, #0b1f3a 58%, #12345d 100%);
}

.services-v2 .svc-band-hero::before,
.about-v2 .cv-band-hero::before,
.contact-v2 .contact-band-hero::before,
.auth-v2 .auth-band:first-child::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.4;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: linear-gradient(115deg, #000, transparent 78%);
}

.services-v2 .svc-hero,
.about-v2 .cv-band-hero > .wrap,
.contact-v2 .contact-hero,
.auth-v2 .auth-hero {
    position: relative;
    z-index: 1;
}

.services-v2 .svc-hero {
    gap: clamp(38px, 6vw, 78px);
}

.services-v2 .svc-kicker {
    color: var(--refresh-blue);
    font-size: 0.74rem;
    font-weight: 850;
    letter-spacing: 0.12em;
}

.services-v2 .svc-band-hero .svc-kicker {
    color: #7dd3fc;
}

.services-v2 .svc-hero h1 {
    max-width: 760px;
    margin-bottom: 20px;
    color: #fff;
    font-size: clamp(2.45rem, 7vw, 4.75rem);
    line-height: 1;
    letter-spacing: -0.06em;
    text-wrap: balance;
}

.services-v2 .svc-band-hero .svc-intro p {
    color: #dbeafe;
    font-size: clamp(1rem, 2.6vw, 1.15rem);
    line-height: 1.65;
}

.services-v2 .svc-hero-actions {
    margin-top: 28px;
}

.services-v2 .svc-band-hero .svc-hero-actions .btn:first-child {
    border-color: #fff;
    background: #fff;
    color: var(--refresh-blue-dark);
}

.services-v2 .svc-band-hero .svc-hero-actions .btn:first-child:hover,
.services-v2 .svc-band-hero .svc-hero-actions .btn:first-child:focus-visible {
    border-color: #eaf2ff;
    background: #eaf2ff;
    color: var(--refresh-blue-dark);
}

.services-v2 .svc-band-hero .btn-ghost {
    border-color: rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}

.services-v2 .svc-band-hero .btn-ghost:hover,
.services-v2 .svc-band-hero .btn-ghost:focus-visible {
    border-color: rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.services-v2 .svc-preview {
    gap: 10px;
}

.services-v2 .svc-preview-card {
    min-width: 0;
    padding: 13px 15px;
    border-color: rgba(191, 219, 254, 0.34);
    border-radius: 17px;
    color: var(--refresh-ink);
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.2);
}

.services-v2 .svc-preview-card.is-2 {
    margin-left: 12px;
}

.services-v2 .svc-preview-card.is-3 {
    margin-left: 4px;
}

.services-v2 .svc-preview-card strong {
    font-size: 0.9rem;
}

.services-v2 .svc-preview-card em {
    color: var(--refresh-muted);
    font-size: 0.76rem;
}

.services-v2 .svc-preview-media {
    width: 58px;
    height: 48px;
    flex-basis: 58px;
    border-radius: 11px;
}

.services-v2 .svc-preview-media .icon {
    width: 58px;
    height: 48px;
    flex-basis: 58px;
    border-radius: 11px;
}

.services-v2 .svc-band-alt {
    background:
        radial-gradient(circle at 100% 0, rgba(37, 99, 235, 0.065), transparent 28%),
        var(--refresh-soft);
}

.services-v2 .svc-head {
    align-items: flex-start;
    margin-bottom: 30px;
}

.services-v2 .svc-head .icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    border-radius: 12px;
}

.services-v2 .svc-head h2 {
    color: var(--refresh-ink);
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    line-height: 1.08;
    letter-spacing: -0.05em;
    text-wrap: balance;
}

.services-v2 .svc-step,
.services-v2 .svc-card {
    border-color: var(--refresh-line);
    border-radius: 19px;
    box-shadow: 0 10px 26px rgba(11, 31, 58, 0.05);
}

.services-v2 .svc-step {
    min-height: 215px;
    padding: 24px 22px;
}

.services-v2 .svc-step .icon {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    border-radius: 13px;
}

.services-v2 .svc-step-num {
    color: #c7d8ec;
    font-size: 1.55rem;
}

.services-v2 .svc-step h3,
.services-v2 .svc-card h3 {
    color: var(--refresh-ink);
}

.services-v2 .svc-step p,
.services-v2 .svc-card p {
    color: var(--refresh-muted);
    line-height: 1.58;
}

.services-v2 .svc-card {
    box-shadow: 0 10px 26px rgba(11, 31, 58, 0.055);
}

.services-v2 .svc-card-media {
    aspect-ratio: 16 / 9;
}

.services-v2 .svc-card .copy {
    padding: 19px 20px 21px;
}

.services-v2 a.svc-card:hover,
.services-v2 a.svc-card:focus-visible,
.services-v2 .svc-card:hover {
    border-color: #9fc1ed;
    box-shadow: 0 20px 46px rgba(11, 31, 58, 0.11);
}

.services-v2 .svc-empty {
    min-height: 220px;
    padding: 44px 24px;
    border: 1px dashed #b8c8dc;
    border-radius: 19px;
    background: var(--refresh-soft);
    color: var(--refresh-muted);
    text-align: center;
}

.services-v2 .pager {
    margin-top: 28px;
    padding: 14px;
    border: 1px solid var(--refresh-line);
    border-radius: 15px;
    background: #fff;
}

.services-v2 .svc-band-cta {
    padding: 52px 0 76px;
    background: #fff;
}

.services-v2 .svc-band-cta .cta {
    padding: 28px;
    border: 1px solid #244d7d;
    border-radius: 22px;
    background:
        radial-gradient(circle at 96% 0, rgba(56, 189, 248, 0.2), transparent 30%),
        linear-gradient(138deg, #0b1f3a, #12345d);
    color: #fff;
    box-shadow: 0 20px 46px rgba(11, 31, 58, 0.15);
}

.services-v2 .svc-band-cta .cta h2 {
    color: #fff;
}

.services-v2 .svc-band-cta .cta p,
.services-v2 .svc-band-cta .client-support-note {
    color: #c8d7e9;
}

.services-v2 .svc-band-cta .cta-copy > .icon {
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.09);
    color: #7dd3fc;
}

.services-v2 .svc-band-cta .cta .btn {
    border-color: #fff;
    background: #fff;
    color: var(--refresh-blue-dark);
}

.services-v2 .svc-band-cta .client-support-note a {
    color: #fff;
}

/* Sobre mí */
.about-v2 .cv-band {
    padding: 64px 0;
    background: #fff;
}

.about-v2 .cv-band-alt {
    background:
        radial-gradient(circle at 100% 0, rgba(37, 99, 235, 0.06), transparent 28%),
        var(--refresh-soft);
}

.about-v2 .cv-band-hero {
    position: relative;
    overflow: hidden;
    padding: 56px 0 64px;
    color: #fff;
    background:
        radial-gradient(circle at 90% 8%, rgba(56, 189, 248, 0.2), transparent 32%),
        radial-gradient(circle at 8% 100%, rgba(37, 99, 235, 0.3), transparent 35%),
        linear-gradient(138deg, #071426 0%, #0b1f3a 58%, #12345d 100%);
}

.about-v2 .cv-kicker {
    color: #7dd3fc;
    font-size: 0.74rem;
    font-weight: 850;
    letter-spacing: 0.12em;
}

.about-v2 .cv-about-card {
    gap: 34px clamp(44px, 7vw, 94px);
    align-items: center;
}

.about-v2 .cv-about-card h1 {
    max-width: 760px;
    color: #fff;
    font-size: clamp(2.5rem, 7vw, 4.75rem);
    line-height: 1;
    letter-spacing: -0.06em;
    text-wrap: balance;
}

.about-v2 .cv-role {
    color: #fff;
    font-size: 1.15rem;
}

.about-v2 .cv-place,
.about-v2 .cv-band-hero .copy > p,
.about-v2 .cv-band-hero .cv-about-lead p,
.about-v2 .cv-band-hero .cv-about-close p {
    color: #c8d7e9;
}

.about-v2 .cv-band-hero .copy > p {
    font-size: 1.04rem;
    line-height: 1.67;
}

.about-v2 .cv-band-hero .btn {
    border-color: #fff;
    background: #fff;
    color: var(--refresh-blue-dark);
}

.about-v2 .cv-photo {
    width: min(290px, 100%);
}

.about-v2 .cv-photo::before {
    inset: 10px -18px -20px 10px;
    background: radial-gradient(circle at 50% 35%, rgba(125, 211, 252, 0.42), rgba(37, 99, 235, 0.15) 58%, transparent 78%);
}

.about-v2 .cv-photo img {
    width: 290px;
    max-width: 100%;
    height: 290px;
    border: 1px solid rgba(191, 219, 254, 0.42);
    border-radius: 24px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.3);
}

.about-v2 .cv-focus {
    gap: 12px;
}

.about-v2 .cv-focus-card {
    padding: 17px 18px;
    border-color: rgba(191, 219, 254, 0.22);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
}

.about-v2 .cv-focus-card .icon {
    background: rgba(255, 255, 255, 0.1);
    color: #7dd3fc;
}

.about-v2 .cv-focus-card h3 {
    color: #fff;
}

.about-v2 .cv-focus-card p {
    color: #c8d7e9;
}

.about-v2 .cv-focus-card:hover {
    border-color: rgba(191, 219, 254, 0.46);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
}

.about-v2 .cv-head {
    margin-bottom: 30px;
}

.about-v2 .cv-head .icon {
    border-radius: 12px;
}

.about-v2 .cv-head h2 {
    color: var(--refresh-ink);
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    line-height: 1.08;
    letter-spacing: -0.05em;
    text-wrap: balance;
}

.about-v2 .cv-section-lead,
.about-v2 .cv-card p,
.about-v2 .cv-item p {
    color: var(--refresh-muted);
    line-height: 1.58;
}

.about-v2 .cv-card,
.about-v2 .cv-contact {
    border-color: var(--refresh-line);
    border-radius: 19px;
    box-shadow: 0 10px 26px rgba(11, 31, 58, 0.05);
}

.about-v2 .cv-card {
    padding: 22px;
}

.about-v2 .cv-card:hover,
.about-v2 .cv-contact:hover,
.about-v2 .cv-contact:focus-visible {
    border-color: #9fc1ed;
    box-shadow: 0 20px 46px rgba(11, 31, 58, 0.11);
}

.about-v2 .cv-marker {
    border-color: var(--refresh-soft);
    background: var(--refresh-blue);
    box-shadow: 0 0 0 4px #bfdbfe;
}

.about-v2 .cv-timeline::before {
    width: 3px;
    background: #cfe0f5;
}

.about-v2 .cv-dates,
.about-v2 .cv-chip {
    border: 1px solid #cfe0f5;
    background: #f3f8ff;
    color: var(--refresh-blue-dark);
}

.about-v2 .cv-chip {
    padding: 9px 14px;
    box-shadow: 0 5px 14px rgba(11, 31, 58, 0.035);
}

.about-v2 .cv-contacts {
    gap: 16px;
}

.about-v2 .client-support-note-foot {
    padding-top: 30px;
    padding-bottom: 64px;
}

/* Contacto */
.contact-v2 .contact-band-hero {
    position: relative;
    overflow: hidden;
    padding: 56px 0 64px;
    color: #fff;
    background:
        radial-gradient(circle at 92% 8%, rgba(45, 212, 191, 0.17), transparent 32%),
        radial-gradient(circle at 8% 100%, rgba(37, 99, 235, 0.3), transparent 35%),
        linear-gradient(138deg, #071426 0%, #0b2438 58%, #10435a 100%);
}

.contact-v2 .contact-hero {
    gap: clamp(38px, 6vw, 78px);
}

.contact-v2 .contact-kicker {
    color: #7dd3fc;
    font-size: 0.74rem;
    font-weight: 850;
    letter-spacing: 0.12em;
}

.contact-v2 .contact-hero h1 {
    max-width: 760px;
    color: #fff;
    font-size: clamp(2.5rem, 7vw, 4.75rem);
    line-height: 1;
    letter-spacing: -0.06em;
    text-wrap: balance;
}

.contact-v2 .contact-intro p,
.contact-v2 .contact-hero .lead {
    color: #dbeafe;
    font-size: clamp(1rem, 2.6vw, 1.15rem);
    line-height: 1.65;
}

.contact-v2 .contact-pills li {
    border-color: rgba(191, 219, 254, 0.28);
    background: rgba(255, 255, 255, 0.08);
    color: #e8f3ff;
}

.contact-v2 .contact-mock {
    padding: 15px;
    border-color: rgba(191, 219, 254, 0.34);
    border-radius: 24px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.27);
}

.contact-v2 .contact-mock-thread p {
    padding: 13px 15px;
}

.contact-v2 .contact-band-main {
    padding: 64px 0 82px;
    background:
        radial-gradient(circle at 100% 0, rgba(16, 185, 129, 0.055), transparent 28%),
        var(--refresh-soft);
}

.contact-v2 .contact-grid {
    gap: 22px;
}

.contact-v2 .contact-form-card,
.contact-v2 .contact-card {
    border-color: var(--refresh-line);
    border-radius: 19px;
}

.contact-v2 .contact-form-card {
    padding: 30px;
    box-shadow: 0 18px 44px rgba(11, 31, 58, 0.09);
}

.contact-v2 .contact-form-head .icon {
    border-radius: 13px;
}

.contact-v2 .contact-form-card h2 {
    color: var(--refresh-ink);
    font-size: 1.5rem;
}

.contact-v2 .contact-form-card .lead,
.contact-v2 .contact-hint,
.contact-v2 .contact-note,
.contact-v2 .contact-card .copy em {
    color: var(--refresh-muted);
}

.contact-v2 .contact-form-card input,
.contact-v2 .contact-form-card textarea {
    border-color: var(--refresh-line);
    background: #f8fafc;
}

.contact-v2 .contact-card {
    padding: 18px;
    box-shadow: 0 8px 22px rgba(11, 31, 58, 0.04);
}

.contact-v2 .contact-card:hover,
.contact-v2 a.contact-card:hover,
.contact-v2 a.contact-card:focus-visible {
    border-color: #9fc1ed;
    box-shadow: 0 16px 36px rgba(11, 31, 58, 0.09);
}

.contact-v2 .contact-card > .icon {
    border-radius: 13px;
}

.contact-v2 .contact-socials-card .socials a {
    background: #f8fafc;
}

.contact-v2 .client-support-note {
    margin: 2px 4px;
    padding: 16px 18px;
    border: 1px solid #cfe0f5;
    border-radius: 15px;
    background: #eaf2ff;
}

/* Acceso y registro de clientes */
.auth-v2 {
    --client-ink: #0b1830;
    --client-blue: #2563eb;
    --client-blue-dark: #1748ad;
    --client-muted: #607188;
    --client-line: #dce6f2;
    min-height: 60vh;
    overflow: hidden;
    background: #f4f7fb;
}

.auth-v2 .auth-band:first-child {
    position: relative;
    overflow: hidden;
    padding: 54px 0 62px;
    color: #fff;
    background:
        radial-gradient(circle at 92% 8%, rgba(56, 189, 248, 0.2), transparent 32%),
        radial-gradient(circle at 8% 100%, rgba(37, 99, 235, 0.28), transparent 35%),
        linear-gradient(138deg, #071426 0%, #0b1f3a 58%, #12345d 100%);
}

.auth-v2 .auth-hero h1 {
    color: #fff;
    font-size: clamp(2.45rem, 7vw, 4.55rem);
    line-height: 1;
    letter-spacing: -0.06em;
    text-wrap: balance;
}

.auth-v2 .auth-hero .client-kicker {
    color: #7dd3fc;
    font-size: 0.74rem;
    font-weight: 850;
    letter-spacing: 0.12em;
}

.auth-v2 .auth-hero .lead {
    color: #dbeafe;
    line-height: 1.65;
}

.auth-v2 .contact-pills li {
    border-color: rgba(191, 219, 254, 0.28);
    background: rgba(255, 255, 255, 0.08);
    color: #e8f3ff;
}

.auth-v2 .auth-mock {
    border-color: rgba(191, 219, 254, 0.34);
    border-radius: 24px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.27);
    animation: auth-mock-float 5.6s ease-in-out infinite;
}

.auth-v2 .auth-mock-bar strong {
    color: #405269;
    font-size: 0.86rem;
    letter-spacing: -0.02em;
}

.auth-v2 .auth-mock-stats div {
    background: #edf5ff;
    border: 1px solid #d7e5f5;
}

.auth-v2 .auth-mock-stats em {
    color: #607188;
}

.auth-v2 .auth-mock-stats b {
    color: #0b1830;
    font-size: 1.28rem;
}

.auth-v2 .auth-mock-empty {
    border-color: #b8c8dc;
    background: linear-gradient(180deg, #fff, #f5f9ff);
}

.auth-v2 .auth-mock-empty strong {
    color: #0b1830;
}

.auth-v2 .auth-mock-actions span {
    border-color: #9fc1ed;
    background: #eaf2ff;
    color: #1748ad;
}

.auth-v2 .auth-band-main {
    padding: 62px 0 82px;
    background:
        radial-gradient(circle at 100% 0, rgba(37, 99, 235, 0.055), transparent 28%),
        #f4f7fb;
}

.auth-v2 .auth-card {
    padding: 32px;
    border-color: var(--client-line);
    border-radius: 21px;
    box-shadow: 0 20px 48px rgba(11, 31, 58, 0.1);
}

.auth-v2 .auth-brand {
    background: #eaf2ff;
    color: var(--client-blue-dark);
}

.auth-v2 .auth-card h2 {
    color: var(--client-ink);
    font-size: 1.55rem;
}

.auth-v2 .auth-card .lead,
.auth-v2 .auth-switch,
.auth-v2 .auth-forgot {
    color: var(--client-muted);
}

.auth-v2 .auth-card .alert {
    margin-bottom: 18px;
    border-radius: 12px;
}

.auth-v2 .auth-card input {
    min-height: 50px;
    border-color: var(--client-line);
    border-radius: 12px;
    background: #f8fafc;
}

.auth-v2 .auth-card input:focus {
    background: #fff;
}

.auth-v2 .auth-submit {
    min-height: 50px;
    border-radius: 12px;
    font-weight: 750;
}

.auth-v2 .auth-group {
    border-color: var(--client-line);
    border-radius: 15px;
    background: #f8fafc;
}

.auth-v2 .auth-group .field input {
    background: #fff;
}

.auth-v2 .auth-signup {
    border-color: #cfe0f5;
    border-radius: 15px;
    background: #edf5ff;
}

.auth-v2 .auth-signup .btn-ghost {
    border-color: #9fc1ed;
    background: #fff;
    color: var(--client-blue-dark);
}

.auth-v2 .auth-signup .btn-ghost:hover,
.auth-v2 .auth-signup .btn-ghost:focus-visible {
    border-color: var(--client-blue);
    background: #eaf2ff;
    color: var(--client-blue-dark);
}

.auth-v2 .client-support-note {
    padding-top: 16px;
    border-top: 1px solid var(--client-line);
}

@keyframes auth-mock-float {
    0%,
    100% {
        transform: translateY(0) rotate(0.4deg);
    }

    50% {
        transform: translateY(-6px) rotate(0.4deg);
    }
}

/* Panel y estados del área de cliente */
.client-v2 {
    --client-ink: #0b1830;
    --client-navy: #0b1f3a;
    --client-blue: #2563eb;
    --client-blue-dark: #1748ad;
    --client-muted: #607188;
    --client-line: #dce6f2;
    min-height: 70vh;
    padding: 34px 0 82px;
    overflow: hidden;
    background:
        radial-gradient(circle at 100% 0, rgba(37, 99, 235, 0.075), transparent 28%),
        #f4f7fb;
}

.client-v2 .client-welcome {
    position: relative;
    z-index: 20;
    isolation: isolate;
    margin-bottom: 18px;
    padding: 26px;
    /* visible: el dropdown .client-notify-panel sale del hero; hidden lo recortaba tras la nav */
    overflow: visible;
    border: 1px solid #244d7d;
    border-radius: 24px;
    background:
        radial-gradient(circle at 96% 0, rgba(56, 189, 248, 0.2), transparent 30%),
        linear-gradient(138deg, #0b1f3a, #12345d);
    color: #fff;
    box-shadow: 0 22px 52px rgba(11, 31, 58, 0.18);
}

.client-v2 .client-welcome::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    opacity: 0.32;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(115deg, #000, transparent 78%);
}

.client-v2 .client-welcome-who {
    padding: 13px 14px;
    border-color: rgba(191, 219, 254, 0.2);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

.client-v2 .client-avatar {
    background: #fff;
    color: var(--client-blue-dark);
    box-shadow: 0 9px 22px rgba(0, 0, 0, 0.15);
}

.client-v2 .client-welcome-name,
.client-v2 .client-welcome h1 {
    color: #fff;
}

.client-v2 .client-welcome-mail,
.client-v2 .client-welcome .lead,
.client-v2 .client-welcome .client-support-note {
    color: #c8d7e9;
}

.client-v2 .client-kicker {
    color: #7dd3fc;
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.12em;
}

.client-v2 .client-welcome h1 {
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.03;
    letter-spacing: -0.055em;
    text-wrap: balance;
}

.client-v2 .client-welcome .client-support-note a {
    color: #fff;
}

.client-v2 .client-notify-toggle,
.client-v2 .client-logout {
    border-color: rgba(191, 219, 254, 0.28);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    box-shadow: none;
}

.client-v2 .client-notify[open] > .client-notify-toggle,
.client-v2 .client-notify-toggle:hover,
.client-v2 .client-notify-toggle:focus-visible,
.client-v2 .client-logout:hover,
.client-v2 .client-logout:focus-visible {
    border-color: rgba(255, 255, 255, 0.58);
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    box-shadow: none;
}

.client-v2 .client-notify-panel {
    border-color: var(--client-line);
    border-radius: 16px;
    color: var(--client-ink);
    box-shadow: 0 24px 54px rgba(11, 31, 58, 0.2);
}

.client-v2 .client-nav {
    gap: 5px;
    margin-bottom: 22px;
    padding: 7px;
    border-color: var(--client-line);
    border-radius: 17px;
    box-shadow: 0 10px 26px rgba(11, 31, 58, 0.06);
}

.client-v2 .client-nav a {
    min-height: 40px;
    border-radius: 11px;
    color: #405269;
}

.client-v2 .client-nav a:hover,
.client-v2 .client-nav a:focus-visible {
    background: #eaf2ff;
    color: var(--client-blue-dark);
}

.client-v2 .client-nav a.is-active,
.client-v2 .client-nav a.is-active:hover,
.client-v2 .client-nav a.is-active:focus-visible {
    background: linear-gradient(135deg, var(--client-blue-dark), var(--client-blue));
    color: #fff;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.2);
}

.client-v2 > .wrap > .alert {
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(11, 31, 58, 0.05);
}

.client-v2 .client-stats {
    gap: 14px;
    margin-bottom: 18px;
}

.client-v2 .client-stats article,
.client-v2 .client-card {
    border-color: var(--client-line);
    border-radius: 19px;
    box-shadow: 0 10px 26px rgba(11, 31, 58, 0.055);
}

.client-v2 .client-stats article {
    min-height: 124px;
    padding: 19px;
}

.client-v2 .client-stats .icon {
    border-radius: 13px;
    background: #eaf2ff;
    color: var(--client-blue);
}

.client-v2 .client-stats article:nth-child(2) .icon {
    background: #ecfdf5;
    color: #047857;
}

.client-v2 .client-stats article:nth-child(3) .icon {
    background: #ecfeff;
    color: #0e7490;
}

.client-v2 .client-stats article:nth-child(4) .icon {
    background: #fff7ed;
    color: #c2410c;
}

.client-v2 .client-stats strong {
    color: var(--client-ink);
    font-size: 1.85rem;
}

.client-v2 .client-stats p,
.client-v2 .client-stats span:not(.icon) {
    color: var(--client-muted);
}

.client-v2 .client-grid {
    gap: 18px;
    margin-bottom: 18px;
}

.client-v2 .client-card {
    padding: 24px;
    background: #fff;
}

.client-v2 .client-card h2 {
    color: var(--client-ink);
    font-size: 1.18rem;
    letter-spacing: -0.03em;
}

.client-v2 .client-list li,
.client-v2 .client-meta li {
    border-color: #e8eef6;
}

.client-v2 .client-list .icon,
.client-v2 .client-empty-box .icon {
    border-radius: 12px;
    background: #edf5ff;
    color: var(--client-blue);
}

.client-v2 .client-list strong,
.client-v2 .client-meta li {
    color: var(--client-ink);
}

.client-v2 .client-list span:not(.icon),
.client-v2 .client-meta span,
.client-v2 .client-hint,
.client-v2 .client-empty-box p {
    color: var(--client-muted);
    line-height: 1.52;
}

.client-v2 .client-more a,
.client-v2 .client-list a,
.client-v2 .auth-forgot {
    text-underline-offset: 3px;
}

.client-v2 .client-empty-box {
    min-height: 210px;
    margin-top: 8px;
    padding: 30px 22px;
    place-content: center;
    justify-items: center;
    border: 1px dashed #b8c8dc;
    border-radius: 16px;
    background: linear-gradient(180deg, #fff, #f5f9ff);
    text-align: center;
}

.client-v2 .client-empty-box.is-compact {
    min-height: 168px;
    padding: 22px 18px;
}

.client-v2 .client-empty-box h3 {
    color: var(--client-ink);
    font-size: 1.02rem;
    letter-spacing: -0.025em;
}

.client-v2 .client-empty-box .btn {
    margin-top: 4px;
    min-height: 40px;
    border-radius: 11px;
}

.client-v2 .client-empty-box .btn-ghost {
    border-color: #9fc1ed;
    background: #fff;
    color: var(--client-blue-dark);
}

.client-v2 .client-empty-box .btn-ghost:hover,
.client-v2 .client-empty-box .btn-ghost:focus-visible {
    border-color: var(--client-blue);
    background: #eaf2ff;
    color: var(--client-blue-dark);
}

.client-v2 .client-subs li,
.client-v2 .client-license,
.client-v2 .support-inbox-row {
    border-color: var(--client-line);
    border-radius: 15px;
    background: #f8fafc;
}

.client-v2 .client-subs li {
    padding: 17px;
}

.client-v2 .client-license {
    padding: 20px;
}

.client-v2 .client-license-key {
    padding: 12px 14px;
    border: 1px solid #d7e5f5;
    border-radius: 12px;
    background: #edf5ff;
}

.client-v2 .client-license-key code {
    color: var(--client-blue-dark);
}

.client-v2 .client-license-reveal summary {
    width: fit-content;
    border-radius: 6px;
    color: var(--client-blue-dark);
}

.client-v2 .client-form input,
.client-v2 .client-form textarea {
    min-height: 50px;
    border-color: var(--client-line);
    border-radius: 12px;
    background: #f8fafc;
}

.client-v2 .client-form input:focus,
.client-v2 .client-form textarea:focus {
    background: #fff;
}

.client-v2 .client-group {
    border-color: var(--client-line);
    border-radius: 15px;
    background: #f8fafc;
}

.client-v2 .client-group input {
    background: #fff;
}

.client-v2 .client-pass {
    border-color: #cfe0f5;
    border-radius: 15px;
    background: #edf5ff;
}

.client-v2 .client-pay-box {
    border-color: #cfe0f5;
    border-radius: 14px;
    background: #edf5ff;
}

.client-v2 .client-danger {
    border-color: #fecaca;
    background: #fff7f7;
}

.client-v2 .support-card-head {
    margin-bottom: 18px;
}

.client-v2 .support-inbox {
    gap: 10px;
}

.client-v2 .support-inbox-row {
    padding: 15px;
}

.client-v2 .support-inbox-row:hover,
.client-v2 .support-inbox-row:focus-visible {
    border-color: #9fc1ed;
    background: #edf5ff;
    box-shadow: 0 12px 26px rgba(11, 31, 58, 0.08);
}

.client-v2 .support-bubbles {
    padding: 18px;
    border: 1px solid var(--client-line);
    border-radius: 17px;
    background: #f8fafc;
}

.client-v2 .support-bubble-body {
    border-color: var(--client-line);
    background: #fff;
    box-shadow: 0 6px 16px rgba(11, 31, 58, 0.045);
}

.client-v2 .support-bubble.is-mine .support-bubble-body {
    border-color: var(--client-blue);
    background: linear-gradient(135deg, var(--client-blue-dark), var(--client-blue));
}

.client-v2 .client-notify-page-list li.is-unread {
    background: #f3f8ff;
    box-shadow: inset 3px 0 0 var(--client-blue);
}

@media (min-width: 760px) {
    .services-v2 .svc-band,
    .about-v2 .cv-band {
        padding-top: 78px;
        padding-bottom: 78px;
    }

    .services-v2 .svc-band-hero,
    .about-v2 .cv-band-hero,
    .contact-v2 .contact-band-hero,
    .auth-v2 .auth-band:first-child {
        padding-top: 72px;
        padding-bottom: 72px;
    }
}

@media (min-width: 980px) {
    .services-v2 .svc-hero h1,
    .about-v2 .cv-about-card h1,
    .contact-v2 .contact-hero h1,
    .auth-v2 .auth-hero h1 {
        font-size: clamp(3.55rem, 5.6vw, 4.8rem);
    }

    .services-v2 .svc-preview,
    .contact-v2 .contact-mock {
        transform: rotate(0.4deg);
    }
}

@media (max-width: 900px) {
    .services-v2 .svc-hero,
    .contact-v2 .contact-hero,
    .contact-v2 .contact-grid,
    .auth-v2 .auth-hero:not(.is-wide) {
        grid-template-columns: 1fr;
    }

    .services-v2 .svc-hero-visual,
    .contact-v2 .contact-hero-panel,
    .auth-v2 .auth-hero-panel {
        justify-content: flex-start;
        width: 100%;
    }

    .services-v2 .svc-preview,
    .contact-v2 .contact-mock,
    .auth-v2 .auth-mock {
        width: min(100%, 560px);
    }

    .auth-v2 .auth-mock {
        animation: none;
        transform: none;
    }

    .about-v2 .cv-about-card {
        justify-items: start;
    }

    .about-v2 .cv-photo {
        margin-inline: 0;
    }

    .client-v2 .client-welcome {
        padding: 22px;
    }

    .client-v2 .client-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .client-v2 .client-nav a {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

@media (max-width: 640px) {
    .services-v2 .svc-band,
    .about-v2 .cv-band {
        padding: 54px 0;
    }

    .services-v2 .svc-band-hero,
    .about-v2 .cv-band-hero,
    .contact-v2 .contact-band-hero,
    .auth-v2 .auth-band:first-child {
        padding: 52px 0 58px;
    }

    .services-v2 .svc-hero h1,
    .about-v2 .cv-about-card h1,
    .contact-v2 .contact-hero h1,
    .auth-v2 .auth-hero h1 {
        font-size: clamp(2.35rem, 12vw, 3.35rem);
    }

    .services-v2 .svc-preview-card.is-1,
    .services-v2 .svc-preview-card.is-2,
    .services-v2 .svc-preview-card.is-3 {
        margin-left: 0;
        transform: none;
    }

    .services-v2 .svc-steps,
    .services-v2 .svc-grid,
    .about-v2 .cv-cards,
    .about-v2 .cv-contacts,
    .about-v2 .cv-focus,
    .about-v2 .cv-split,
    .contact-v2 .contact-fields,
    .client-v2 .client-stats,
    .client-v2 .client-grid,
    .client-v2 .client-fields,
    .auth-v2 .auth-grid {
        grid-template-columns: 1fr;
    }

    .services-v2 .svc-step {
        min-height: 0;
    }

    .services-v2 .svc-band-cta .cta,
    .services-v2 .svc-band-cta .cta-copy {
        display: grid;
        justify-items: start;
    }

    .services-v2 .svc-band-cta .cta .btn {
        justify-content: center;
        width: 100%;
    }

    .about-v2 .cv-photo,
    .about-v2 .cv-photo img {
        width: 220px;
        height: 220px;
    }

    .about-v2 .cv-card-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .about-v2 .cv-dates {
        white-space: normal;
    }

    .contact-v2 .contact-band-main,
    .auth-v2 .auth-band-main {
        padding: 48px 0 64px;
    }

    .contact-v2 .contact-form-card,
    .auth-v2 .auth-card,
    .client-v2 .client-card {
        padding: 22px 18px;
    }

    .auth-v2 .auth-card.is-wide .auth-form > .auth-submit {
        width: 100%;
    }

    .client-v2 {
        padding-top: 20px;
        padding-bottom: 64px;
    }

    .client-v2 .client-welcome {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 20px 12px;
        padding: 18px;
        border-radius: 20px;
    }

    .client-v2 .client-welcome-who {
        min-width: 0;
        padding: 0;
        border: 0;
        background: transparent;
    }

    .client-v2 .client-avatar {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }

    .client-v2 .client-welcome-copy {
        grid-column: 1 / -1;
    }

    .client-v2 .client-welcome-actions {
        grid-column: 2;
        grid-row: 1;
    }

    .client-v2 .client-logout {
        width: 44px;
        min-height: 44px;
        padding: 0;
        border-radius: 50%;
    }

    .client-v2 .client-logout-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .client-v2 .client-stats article {
        min-height: 0;
    }

    .client-v2 .client-list li,
    .client-v2 .client-subs li,
    .client-v2 .client-license-head,
    .client-v2 .support-card-head,
    .client-v2 .client-notify-page-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .client-v2 .client-list li > .icon {
        display: none;
    }

    .client-v2 .client-list em,
    .client-v2 .client-sub-actions,
    .client-v2 .client-license-head em {
        margin-left: 0;
    }

    .client-v2 .client-form > .btn,
    .client-v2 .support-card-head .btn,
    .client-v2 .client-empty-box .btn {
        justify-content: center;
        width: 100%;
        min-width: 0;
    }

    .client-v2 .support-bubbles {
        padding: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .public-refresh *,
    .public-refresh *::before,
    .public-refresh *::after,
    .auth-v2 *,
    .auth-v2 *::before,
    .auth-v2 *::after,
    .client-v2 *,
    .client-v2 *::before,
    .client-v2 *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .services-v2 .svc-preview,
    .contact-v2 .contact-mock,
    .auth-v2 .auth-mock,
    .services-v2 .svc-card:hover,
    .about-v2 .cv-card:hover,
    .about-v2 .cv-contact:hover,
    .contact-v2 .contact-card:hover {
        transform: none;
    }
}

/* Fichas públicas y flujos de detalle 2026. */
.public-detail {
    --detail-ink: #0b1830;
    --detail-navy: #071426;
    --detail-navy-2: #12345d;
    --detail-blue: #2563eb;
    --detail-blue-dark: #1748ad;
    --detail-muted: #607188;
    --detail-line: #dce6f2;
    --detail-soft: #f4f7fb;
    min-height: 60vh;
    overflow: hidden;
    background: #fff;
    color: var(--detail-ink);
}

.public-detail a,
.public-detail button,
.public-detail summary,
.public-detail input,
.public-detail select,
.public-detail textarea {
    -webkit-tap-highlight-color: transparent;
}

.public-detail a:focus-visible,
.public-detail button:focus-visible,
.public-detail summary:focus-visible,
.public-detail input:focus-visible,
.public-detail select:focus-visible,
.public-detail textarea:focus-visible {
    outline: 3px solid #60a5fa;
    outline-offset: 3px;
}

.detail-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 38px 0 68px;
    color: #fff;
    background:
        radial-gradient(circle at 92% 8%, rgba(56, 189, 248, 0.2), transparent 32%),
        radial-gradient(circle at 8% 100%, rgba(37, 99, 235, 0.28), transparent 35%),
        linear-gradient(138deg, var(--detail-navy) 0%, #0b1f3a 58%, var(--detail-navy-2) 100%);
}

.detail-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.4;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: linear-gradient(115deg, #000, transparent 78%);
}

.detail-crumb {
    margin: 0 0 30px;
}

.detail-crumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px 9px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: #b9cae0;
    font-size: 0.8rem;
    font-weight: 700;
}

.detail-crumb li:not(:last-child)::after {
    content: "/";
    margin-left: 9px;
    color: #7590ae;
}

.detail-crumb a {
    color: #dbeafe;
    text-decoration: none;
}

.detail-crumb a:hover,
.detail-crumb a:focus-visible {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.detail-crumb [aria-current="page"] {
    color: #fff;
}

.detail-hero-grid {
    display: grid;
    gap: clamp(32px, 6vw, 76px);
    align-items: center;
}

.detail-hero-copy {
    min-width: 0;
}

.detail-kicker,
.detail-eyebrow {
    margin: 0 0 10px;
    color: #7dd3fc;
    font-size: 0.74rem;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.detail-hero h1 {
    max-width: 820px;
    margin: 0 0 18px;
    color: #fff;
    font-size: clamp(2.4rem, 7vw, 4.7rem);
    line-height: 1;
    letter-spacing: -0.06em;
    text-wrap: balance;
}

.detail-lead {
    max-width: 62ch;
    margin: 0;
    color: #dbeafe;
    font-size: clamp(1rem, 2.4vw, 1.15rem);
    line-height: 1.65;
}

.detail-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.detail-chips li {
    padding: 7px 11px;
    border: 1px solid rgba(191, 219, 254, 0.26);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #e8f3ff;
    font-size: 0.78rem;
    font-weight: 750;
}

.detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

.detail-actions .btn:first-child {
    border-color: #fff;
    background: #fff;
    color: var(--detail-blue-dark);
}

.detail-actions .btn-ghost {
    border-color: rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}

.detail-actions .btn:hover,
.detail-actions .btn:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 9px 22px rgba(0, 0, 0, 0.18);
}

.detail-hero-media {
    min-width: 0;
}

.detail-hero-media > :first-child {
    width: 100%;
    margin: 0;
    border: 1px solid rgba(191, 219, 254, 0.35);
    border-radius: 24px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.28);
}

.detail-placeholder {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 320px;
    aspect-ratio: 16 / 10;
    padding: 28px;
    overflow: hidden;
    background:
        radial-gradient(circle at 86% 12%, rgba(255, 255, 255, 0.72), transparent 30%),
        linear-gradient(145deg, #dbeafe, #f8fafc 72%);
    color: var(--detail-ink);
}

.detail-placeholder-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin-bottom: auto;
    border-radius: 16px;
    background: #fff;
    color: var(--detail-blue);
    box-shadow: 0 12px 28px rgba(11, 31, 58, 0.1);
}

.detail-placeholder-icon svg {
    width: 30px;
    height: 30px;
}

.detail-placeholder-kicker {
    color: var(--detail-blue-dark);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.detail-placeholder strong {
    margin-top: 8px;
    font-size: clamp(1.35rem, 3vw, 2rem);
    line-height: 1.12;
    letter-spacing: -0.04em;
}

.detail-band {
    padding: 68px 0;
    background: #fff;
}

.detail-band-alt {
    background:
        radial-gradient(circle at 100% 0, rgba(37, 99, 235, 0.06), transparent 28%),
        var(--detail-soft);
}

.detail-section-head {
    margin: 0 0 28px;
}

.detail-section-head .detail-eyebrow,
.detail-prose-layout .detail-eyebrow {
    color: var(--detail-blue);
}

.detail-section-head h2,
.detail-prose-layout h2 {
    margin: 0;
    color: var(--detail-ink);
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    line-height: 1.08;
    letter-spacing: -0.05em;
    text-wrap: balance;
}

.detail-prose-layout {
    display: grid;
    gap: 28px;
}

.detail-prose {
    max-width: 780px;
    color: var(--detail-muted);
    font-size: 1.04rem;
    line-height: 1.72;
}

.detail-prose p {
    margin: 0 0 16px;
}

.detail-notices {
    display: grid;
    gap: 12px;
    padding-top: 28px;
}

/* Blog individual */
.blog-detail-v2 .blog-article-head {
    max-width: none;
}

.blog-detail-v2 .blog-kicker {
    color: #7dd3fc;
}

.blog-detail-v2 .blog-cats {
    margin-top: 20px;
}

.blog-detail-v2 .blog-cat {
    border: 1px solid rgba(191, 219, 254, 0.28);
    background: rgba(255, 255, 255, 0.08);
    color: #e8f3ff;
}

.blog-detail-v2 .blog-cat:hover,
.blog-detail-v2 .blog-cat:focus-visible {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.blog-detail-v2 .blog-meta {
    margin-top: 18px;
    color: #b9cae0;
}

.blog-detail-v2 .blog-meta a {
    color: #fff;
}

.blog-detail-v2 .blog-cover {
    overflow: hidden;
    aspect-ratio: 16 / 10;
}

.blog-detail-v2 .blog-cover img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
    object-fit: cover;
    box-shadow: none;
}

.blog-detail-v2 .blog-article-body {
    max-width: 860px;
    padding: 60px 0 68px;
}

.blog-detail-v2 .blog-prose {
    padding: clamp(22px, 4vw, 40px);
    border: 1px solid var(--detail-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(11, 31, 58, 0.07);
}

.blog-detail-v2 .blog-prose p,
.blog-detail-v2 .blog-prose li {
    font-size: 1.04rem;
    line-height: 1.75;
}

.blog-detail-v2 .blog-prose h2,
.blog-detail-v2 .blog-prose h3 {
    color: var(--detail-ink);
    letter-spacing: -0.035em;
}

.blog-detail-v2 .blog-prose img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
}

.blog-detail-v2 .blog-band-alt {
    background: var(--detail-soft);
}

.blog-detail-v2 .blog-band {
    padding: 64px 0;
}

.blog-detail-v2 .hub-footer-section .cta,
.tools-detail-v2 .hub-footer-section .cta,
.pf-detail-page .hub-footer-section .cta {
    border: 1px solid #244d7d;
    border-radius: 22px;
    background:
        radial-gradient(circle at 96% 0, rgba(56, 189, 248, 0.2), transparent 30%),
        linear-gradient(138deg, #0b1f3a, #12345d);
    color: #fff;
    box-shadow: 0 20px 46px rgba(11, 31, 58, 0.15);
}

.blog-detail-v2 .hub-footer-section .cta h2,
.tools-detail-v2 .hub-footer-section .cta h2,
.pf-detail-page .hub-footer-section .cta h2 {
    color: #fff;
}

.blog-detail-v2 .hub-footer-section .cta p,
.tools-detail-v2 .hub-footer-section .cta p,
.pf-detail-page .hub-footer-section .cta p {
    color: #c8d7e9;
}

/* Herramientas individuales y aplicaciones */
.tools-detail-v2 .tool-app-copy h1,
.tool-app-page .tool-app-shell-head h1 {
    color: #fff;
    font-size: clamp(2.35rem, 6vw, 4.2rem);
    line-height: 1;
}

.tools-detail-v2 .tool-app-cover {
    max-width: none;
    aspect-ratio: 16 / 10;
    border-radius: 24px;
}

.tools-detail-v2 .tool-app-cover-icon {
    min-height: 320px;
    background:
        radial-gradient(circle at 80% 15%, #fff, transparent 38%),
        linear-gradient(145deg, #dbeafe, #f8fafc);
}

.tools-detail-v2 .tool-member-badge {
    margin-top: 0;
    border: 1px solid rgba(191, 219, 254, 0.26);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.tools-detail-v2 .tool-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.tools-detail-v2 .tool-pricing-badge {
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.tools-detail-v2 .tool-pricing-free {
    background: rgba(240, 253, 244, 0.16);
    color: #bbf7d0;
}

.tools-detail-v2 .tool-pricing-paid {
    background: rgba(254, 243, 199, 0.16);
    color: #fde68a;
}

.tools-detail-v2 .tool-cats {
    margin-top: 10px;
}

.tools-detail-v2 .tool-cat {
    border: 1px solid rgba(191, 219, 254, 0.26);
    background: rgba(255, 255, 255, 0.08);
    color: #e8f3ff;
}

.tools-detail-v2 .tool-app-body {
    max-width: 960px;
    padding-top: 56px;
    padding-bottom: 68px;
}

.tools-detail-v2 .tool-howto,
.tools-detail-v2 .tool-embed {
    border-color: var(--detail-line);
    border-radius: 19px;
    box-shadow: 0 12px 30px rgba(11, 31, 58, 0.06);
}

.tools-detail-v2 .tool-howto {
    padding: 28px;
}

.tools-detail-v2 .tool-howto .detail-eyebrow {
    color: var(--detail-blue);
}

.tools-detail-v2 .tool-detail-related .tool-card {
    box-shadow: 0 10px 26px rgba(11, 31, 58, 0.055);
}

.tool-app-page {
    padding-bottom: 0;
    background: #fff;
}

.tool-app-page .tool-app-page-hero {
    padding: 38px 0 68px;
    border: 0;
    background:
        radial-gradient(circle at 92% 8%, rgba(56, 189, 248, 0.2), transparent 32%),
        linear-gradient(138deg, #071426, #12345d);
    backdrop-filter: none;
}

.tool-app-page .tool-app-shell {
    max-width: 1060px;
}

.tool-app-page .tool-app-shell-head {
    align-items: center;
}

.tool-app-page .tool-app-shell-head .tool-lead {
    max-width: 62ch;
    color: #dbeafe;
    font-size: 1.05rem;
}

.tool-app-hero-card {
    display: grid;
    justify-items: center;
    gap: 8px;
    min-height: 270px;
    padding: 32px;
    place-content: center;
    border: 1px solid rgba(191, 219, 254, 0.35);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--detail-ink);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.26);
    text-align: center;
}

.tool-app-hero-card strong {
    font-size: 1.2rem;
    letter-spacing: -0.03em;
}

.tool-app-hero-pricing {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.tool-app-hero-pricing.is-free {
    background: #ecfdf5;
    color: #047857;
}

.tool-app-hero-pricing.is-paid {
    background: #fffbeb;
    color: #b45309;
}

.tool-app-page .detail-chips li.is-free {
    border-color: rgba(16, 185, 129, 0.45);
    background: rgba(16, 185, 129, 0.18);
    color: #bbf7d0;
}

.tool-app-page .detail-chips li.is-paid {
    border-color: rgba(245, 158, 11, 0.45);
    background: rgba(245, 158, 11, 0.18);
    color: #fde68a;
}

.tool-app-hero-card > span:last-child {
    color: var(--detail-muted);
    font-size: 0.88rem;
}

.tool-app-hero-icon {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    margin-bottom: 8px;
    border-radius: 19px;
    background: #eaf2ff;
    color: var(--detail-blue);
}

.tool-app-hero-icon svg {
    width: 34px;
    height: 34px;
}

.tool-app-page .tool-app-shell-body {
    padding-top: 54px;
    padding-bottom: 68px;
}

.tool-app-page .tool-widget,
.tool-app-page .tool-app-gate-card {
    border-color: var(--detail-line);
    border-radius: 20px;
    box-shadow: 0 16px 40px rgba(11, 31, 58, 0.08);
}

/* Producto individual */
.product-detail-v2 .pdp-hero {
    padding: 38px 0 68px;
    color: #fff;
    background:
        radial-gradient(circle at 92% 8%, rgba(56, 189, 248, 0.2), transparent 32%),
        radial-gradient(circle at 8% 100%, rgba(37, 99, 235, 0.28), transparent 35%),
        linear-gradient(138deg, #071426, #12345d);
}

.product-detail-v2 .pdp-crumb ol {
    color: #b9cae0;
}

.product-detail-v2 .pdp-crumb a {
    color: #dbeafe;
}

.product-detail-v2 .pdp-crumb [aria-current="page"] {
    color: #fff;
}

.product-detail-v2 .pdp-gallery {
    border-color: rgba(191, 219, 254, 0.35);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.27);
}

.product-detail-v2 .pdp-buy {
    padding: clamp(22px, 4vw, 34px);
    border: 1px solid rgba(191, 219, 254, 0.28);
    border-radius: 22px;
    background: #fff;
    color: var(--detail-ink);
    box-shadow: 0 26px 64px rgba(0, 0, 0, 0.22);
}

.product-detail-v2 .pdp-buy h1 {
    color: var(--detail-ink);
}

.product-detail-v2 .pdp-price,
.product-detail-v2 .pdp-kicker {
    color: var(--detail-blue-dark);
}

.product-detail-v2 .pdp-excerpt,
.product-detail-v2 .pdp-note,
.product-detail-v2 .pdp-buy .client-support-note {
    color: var(--detail-muted);
}

.product-detail-v2 .pdp-meta div,
.product-detail-v2 .pdp-panel,
.product-detail-v2 .pdp-related-card {
    border-color: var(--detail-line);
    box-shadow: 0 10px 26px rgba(11, 31, 58, 0.055);
}

.product-detail-v2 .pdp-band-alt {
    background: var(--detail-soft);
}

.product-detail-v2 .pdp-cta {
    border: 1px solid #244d7d;
    border-radius: 22px;
    background:
        radial-gradient(circle at 96% 0, rgba(56, 189, 248, 0.2), transparent 30%),
        linear-gradient(138deg, #0b1f3a, #12345d);
    color: #fff;
    box-shadow: 0 20px 46px rgba(11, 31, 58, 0.15);
}

.product-detail-v2 .pdp-cta h2 {
    color: #fff;
}

.product-detail-v2 .pdp-cta p {
    color: #c8d7e9;
}

/* Proyecto individual */
.pf-detail-page .pf-media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 24px;
}

.pf-detail-page .pf-media.is-tall-scroll {
    aspect-ratio: auto;
    max-height: min(72vh, 920px);
}

.pf-detail-page .pf-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pf-detail-page .pf-media.is-tall-scroll img {
    height: auto;
    object-fit: contain;
}

.pf-detail-page .pf-media.mg-cover-ph {
    min-height: 320px;
}

.pf-detail-page .pf-detail-related {
    display: grid;
    gap: 22px;
}

.pf-detail-page .pf-detail-related .pf-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--detail-line);
    border-radius: 19px;
    background: #fff;
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(11, 31, 58, 0.055);
}

.pf-detail-page .pf-detail-related .pf-media {
    border-radius: 0;
}

.pf-detail-page .pf-detail-related .pf-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 9px;
    padding: 20px;
}

/* Landings de servicio */
.service-detail-v2 .svc-band-hero .detail-crumb {
    position: relative;
    z-index: 2;
}

.service-detail-v2 .svc-band-hero .svc-hero {
    margin-top: 0;
}

.service-detail-v2 .landing-related {
    background: var(--refresh-soft);
}

/* Personalizado Express: formulario y demo */
.express-detail-v2 .express-detail-crumb {
    margin-bottom: 24px;
}

.express-detail-v2 .detail-crumb {
    margin-bottom: 0;
}

.express-detail-v2 .detail-crumb ol {
    color: var(--detail-muted);
}

.express-detail-v2 .detail-crumb a {
    color: var(--detail-blue-dark);
}

.express-detail-v2 .detail-crumb [aria-current="page"] {
    color: var(--detail-ink);
}

.express-detail-v2 .express-form-card,
.express-detail-v2 .express-preview-card,
.express-detail-v2 .express-demo-intro {
    border-color: var(--detail-line);
    border-radius: 21px;
    box-shadow: 0 18px 44px rgba(11, 31, 58, 0.09);
}

.express-detail-v2 .express-hero {
    border-color: #cfe0f5;
    border-radius: 17px;
    background: #edf5ff;
}

/* Errores públicos */
.not-found-page.public-detail .search-hero {
    min-height: 520px;
    padding: 70px 0;
    color: #fff;
    background:
        radial-gradient(circle at 92% 8%, rgba(56, 189, 248, 0.2), transparent 32%),
        linear-gradient(138deg, #071426, #12345d);
}

.not-found-page.public-detail .search-hero h1 {
    color: #fff;
}

.not-found-page.public-detail .svc-intro p {
    color: #dbeafe;
}

@media (min-width: 760px) {
    .detail-hero {
        padding-top: 46px;
        padding-bottom: 82px;
    }

    .detail-band {
        padding-top: 78px;
        padding-bottom: 78px;
    }

    .detail-prose-layout {
        grid-template-columns: minmax(210px, 0.36fr) minmax(0, 1fr);
        align-items: start;
    }

    .pf-detail-page .pf-detail-related {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 960px) {
    .detail-hero-grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
    }

    .pf-detail-page .pf-detail-related {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .product-detail-v2 .pdp-layout {
        grid-template-columns: 1fr;
    }

    .product-detail-v2 .pdp-gallery {
        max-width: 680px;
    }

    .service-detail-v2 .svc-band-hero .svc-hero {
        margin-top: 0;
    }
}

@media (max-width: 640px) {
    .detail-hero,
    .tool-app-page .tool-app-page-hero,
    .product-detail-v2 .pdp-hero {
        padding: 30px 0 56px;
    }

    .detail-crumb {
        margin-bottom: 24px;
    }

    .detail-hero h1,
    .tools-detail-v2 .tool-app-copy h1,
    .tool-app-page .tool-app-shell-head h1 {
        font-size: clamp(2.25rem, 12vw, 3.2rem);
    }

    .detail-actions,
    .detail-actions .btn {
        width: 100%;
    }

    .detail-actions .btn {
        justify-content: center;
    }

    .detail-placeholder,
    .tools-detail-v2 .tool-app-cover-icon {
        min-height: 240px;
    }

    .detail-band {
        padding: 54px 0;
    }

    .blog-detail-v2 .blog-article-body,
    .tools-detail-v2 .tool-app-body,
    .tool-app-page .tool-app-shell-body {
        padding-top: 44px;
        padding-bottom: 54px;
    }

    .blog-detail-v2 .blog-prose,
    .tools-detail-v2 .tool-howto,
    .tool-app-page .tool-widget {
        padding: 20px 18px;
    }

    .product-detail-v2 .pdp-buy {
        padding: 22px 18px;
    }

    .express-detail-v2 .express-detail-crumb {
        margin-bottom: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .public-detail *,
    .public-detail *::before,
    .public-detail *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .public-detail a:hover,
    .public-detail button:hover {
        transform: none;
    }
}