:root {
    --uf-bg: rgb(12, 12, 12);
    --uf-bg-soft: rgb(18, 15, 22);
    --uf-panel: rgba(245, 245, 245, 0.055);
    --uf-panel-strong: rgba(245, 245, 245, 0.09);
    --uf-line: rgba(190, 195, 200, 0.18);
    --uf-line-strong: rgba(200, 160, 255, 0.48);
    --uf-text: rgb(245, 245, 245);
    --uf-muted: rgba(190, 195, 200, 0.76);
    --uf-faint: rgba(190, 195, 200, 0.52);
    --uf-accent: rgb(200, 160, 255);
    --uf-accent-strong: rgb(226, 207, 255);
    --uf-cyan: rgb(190, 195, 200);
    --uf-section-black: rgb(12, 12, 12);
    --uf-section-lavender: rgb(200, 160, 255);
    --uf-text-strong: rgb(245, 245, 245);
    --uf-text-soft: rgb(190, 195, 200);
    --uf-on-accent: rgb(12, 12, 12);
}

html {
    background: var(--uf-bg);
}

body.uf-layout {
    min-height: 100vh;
    overflow-x: hidden;
    background: var(--uf-bg);
    color: var(--uf-text);
    font-family: "Inter", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.uf-drawer-open {
    overflow: hidden;
}

body.uf-layout a {
    text-decoration: none;
}

html,
body.uf-layout,
#front-main {
    max-width: 100%;
    overflow-x: clip;
}

@supports not (overflow: clip) {
    html,
    body.uf-layout,
    #front-main {
        overflow-x: hidden;
    }
}

#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--uf-accent), var(--uf-accent-strong));
}

.uf-stage-grid {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    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: 72px 72px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 70%);
}

.uf-shell {
    width: min(calc(100% - clamp(2rem, 5vw, 5rem)), 1680px);
    max-width: 1680px;
    margin-inline: auto;
}

.uf-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(5, 5, 5, 0.94);
    transition: background-color 0.25s ease, border-color 0.25s ease, backdrop-filter 0.25s ease;
}

.uf-header.is-scrolled,
body:not([data-front-page]) .uf-header:hover,
body[data-front-page] .uf-header {
    border-bottom-color: rgba(201, 167, 255, 0.36);
    background: rgba(5, 5, 5, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.uf-utility-bar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: #111111;
}

.uf-utility-inner {
    display: flex;
    min-height: 28px;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.uf-utility-inner nav {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.uf-utility-inner a {
    color: rgba(255, 255, 255, 0.68);
    transition: color 0.16s ease;
}

.uf-utility-inner a:hover,
.uf-utility-inner a:focus-visible {
    color: var(--uf-accent);
}

.uf-main-header-row {
    height: 66px;
}

.uf-main-header-row > .uf-shell {
    height: 100%;
}

.uf-header nav {
    align-self: stretch;
}

.uf-header nav > .group {
    align-self: stretch;
    position: static;
}

.uf-header nav > .group > .uf-nav-link {
    min-height: 100%;
}
.uf-brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: #fff;
}

.uf-brand-logo {
    display: block;
    width: clamp(176px, 14vw, 230px);
    height: auto;
    max-height: 64px;
    object-fit: contain;
}

.uf-nav-link,
.uf-ghost-link,
.uf-primary-link {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    font-family: "Barlow Condensed", "Inter", sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.uf-nav-link {
    color: rgba(247, 247, 244, 0.72);
}

.uf-nav-link:hover,
.uf-mobile-drawer a:hover {
    color: var(--uf-accent);
}

.uf-ghost-link,
.uf-primary-link {
    padding: 0 1rem;
    border: 1px solid var(--uf-line);
}

.uf-ghost-link {
    color: rgba(247, 247, 244, 0.76);
    background: rgba(255, 255, 255, 0.035);
}

.uf-ghost-link:hover {
    border-color: var(--uf-line-strong);
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.uf-primary-link {
    color: #050505;
    background: var(--uf-accent);
    border-color: var(--uf-accent);
}

.uf-primary-link:hover {
    transform: none;
    background: #e0cdff;
    border-color: #e0cdff;
}

.uf-icon-button {
    display: inline-flex;
    width: 44px;
    height: 44px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid var(--uf-line);
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.05);
}

.uf-icon-button span {
    display: block;
    width: 18px;
    height: 2px;
    background: #fff;
}

.mega-menu {
    position: absolute;
    top: calc(100% - 1px);
    left: 0;
    z-index: 40;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(0);
    transition: opacity 0.24s ease, visibility 0.24s ease;
}

.mega-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -22px;
    height: 22px;
}

.group:hover .mega-menu,
.group:focus-within .mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.uf-mega-menu,
.uf-layout .mega-menu {
    border-top: 1px solid rgba(201, 167, 255, 0.12);
    border-bottom: 1px solid rgba(201, 167, 255, 0.16);
    background: rgba(9, 8, 13, 0.95) !important;
    box-shadow: 0 36px 90px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.uf-menu-title {
    margin-bottom: 1rem;
    color: var(--uf-accent);
    font-family: "Barlow Condensed", "Inter", sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.uf-menu-list {
    display: grid;
    gap: 0.7rem;
    color: var(--uf-muted);
    font-weight: 700;
}

.uf-menu-list a:hover {
    color: #fff;
}

.uf-layout .uf-mega-menu > .uf-shell,
.uf-layout .mega-menu > .container {
    max-height: min(520px, calc(100svh - 94px));
    overflow-y: auto;
    overscroll-behavior: contain;
}

.uf-product-menu-grid {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) repeat(3, minmax(0, 0.9fr));
    gap: 1rem;
}

.uf-product-menu-intro,
.uf-product-menu-column {
    min-width: 0;
    padding: 1.15rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.035);
}

.uf-product-menu-intro {
    display: flex;
    min-height: 260px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    background:
        linear-gradient(145deg, rgba(201, 167, 255, 0.15), rgba(255, 255, 255, 0.035) 58%),
        rgba(255, 255, 255, 0.035);
}

.uf-product-menu-intro h3 {
    margin: 0.75rem 0 1.3rem;
    color: #fff;
    font-family: "Barlow Condensed", "Inter", sans-serif;
    font-size: clamp(1.9rem, 2.4vw, 3rem);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: 0;
    text-transform: uppercase;
}

.uf-product-menu-intro a,
.uf-card-link {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    border-bottom: 1px solid currentColor;
    color: var(--uf-accent);
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.uf-product-menu-links {
    display: grid;
    gap: 0.55rem;
}

.uf-product-menu-links a {
    display: grid;
    min-width: 0;
    min-height: 58px;
    align-content: center;
    gap: 0.22rem;
    padding: 0.75rem;
    border: 1px solid transparent;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.16);
    transition: border-color 0.18s ease, background-color 0.18s ease;
}

.uf-product-menu-links a:hover,
.uf-product-menu-links a:focus-visible {
    outline: none;
    border-color: rgba(201, 167, 255, 0.42);
    background: rgba(201, 167, 255, 0.08);
}

.uf-product-menu-links span {
    color: #fff;
    font-size: 0.9rem;
    font-weight: 850;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.uf-product-menu-links small {
    color: rgba(247, 247, 244, 0.55);
    font-size: 0.73rem;
    font-weight: 700;
    line-height: 1.4;
}

.auto-film-menu-grid {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 280px;
    gap: 1.25rem;
    min-height: 300px;
}

.auto-film-main-list {
    border-right: 1px solid var(--uf-line);
    padding-right: 1.25rem;
}

.auto-film-main-item {
    display: flex;
    width: 100%;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--uf-muted);
    text-align: left;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.auto-film-main-item:hover,
.auto-film-main-item.is-active,
.auto-film-main-item:focus-visible {
    outline: none;
    color: #fff;
    border-color: var(--uf-line-strong);
    background: rgba(201, 167, 255, 0.08);
}

.auto-film-main-name {
    font-size: 0.9rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.auto-film-main-count {
    display: inline-flex;
    min-width: 1.55rem;
    height: 1.55rem;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    color: #050505;
    background: var(--uf-accent);
    font-family: "Barlow Condensed", "Inter", sans-serif;
    font-size: 0.66rem;
    font-weight: 800;
}

.auto-film-sub-panel {
    display: none;
}

.auto-film-sub-panel.is-active {
    display: block;
}

.auto-film-sub-group {
    border-left: 1px solid var(--uf-line-strong);
    padding-left: 1.25rem;
}

.auto-film-page-link {
    display: flex;
    min-height: 40px;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--uf-muted);
    font-size: 0.88rem;
    font-weight: 750;
    transition: color 0.2s ease, transform 0.2s ease;
}

.auto-film-page-link:hover {
    color: #fff;
    transform: translateX(4px);
}

.auto-film-page-arrow {
    color: var(--uf-accent);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.auto-film-page-link:hover .auto-film-page-arrow {
    opacity: 1;
}

.auto-film-info-panel {
    overflow: hidden;
    padding: 1rem;
    border: 1px solid var(--uf-line);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.045);
}

.auto-film-info-thumb-wrap {
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.32);
}

.auto-film-info-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.auto-film-info-panel:hover .auto-film-info-thumb {
    transform: scale(1.04);
}

.uf-mobile-drawer {
    position: fixed;
    inset: 0;
    z-index: 120;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
}

.uf-drawer-overlay {
    position: absolute;
    inset: 0;
    opacity: 0;
    background: rgba(0, 0, 0, 0.68);
    transition: opacity 0.25s ease;
}

.uf-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    width: min(88vw, 430px);
    height: 100%;
    flex-direction: column;
    padding: 2rem;
    background: #08070b;
    border-left: 1px solid var(--uf-line);
    transform: none;
    transition: opacity 0.22s ease;
}

.uf-mobile-drawer.active {
    visibility: visible;
    pointer-events: auto;
}

.uf-mobile-drawer.active .uf-drawer-overlay {
    opacity: 1;
}

.uf-mobile-drawer.active .uf-drawer-panel {
    transform: none;
}

.uf-close-button {
    position: relative;
    width: 44px;
    height: 44px;
    border: 1px solid var(--uf-line);
    border-radius: 3px;
}

.uf-close-button::before,
.uf-close-button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 2px;
    background: #fff;
}

.uf-close-button::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.uf-close-button::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.uf-hero {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
    background: #000;
}

.uf-hero-media,
.uf-hero-media video,
.uf-hero-shade {
    position: absolute;
    inset: 0;
}

.uf-hero-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.uf-hero-shade {
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.42) 52%, rgba(0, 0, 0, 0.78) 100%),
        linear-gradient(180deg, rgba(5, 5, 7, 0.12) 0%, rgba(5, 5, 7, 0.92) 100%);
}

.uf-hero-inner {
    position: relative;
    z-index: 2;
    display: grid;
    min-height: 100svh;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 3rem;
    align-items: end;
    padding-top: 10rem;
    padding-bottom: 4rem;
}

.uf-hero-copy {
    max-width: 920px;
}

.uf-kicker {
    color: var(--uf-accent);
    font-family: "Barlow Condensed", "Inter", sans-serif;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.uf-hero h1 {
    margin: 1.2rem 0 1.5rem;
    color: #fff;
    font-family: "Barlow Condensed", "Inter", "Pretendard", sans-serif;
    font-size: 6.8rem;
    font-weight: 900;
    line-height: 0.92;
    letter-spacing: 0;
    text-transform: uppercase;
}

.uf-hero p:not(.uf-kicker) {
    max-width: 720px;
    color: rgba(247, 247, 244, 0.74);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.8;
}

.uf-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 2rem;
}

.uf-hero-index {
    display: grid;
    gap: 0.75rem;
}

.uf-hero-index div {
    padding: 1.25rem;
    border: 1px solid var(--uf-line);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.052);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.uf-hero-index strong,
.uf-hero-index span {
    display: block;
}

.uf-hero-index strong {
    font-family: "Barlow Condensed", "Inter", sans-serif;
    font-size: 2rem;
    color: #fff;
}

.uf-hero-index span {
    margin-top: 0.35rem;
    color: var(--uf-faint);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.uf-action-band {
    border-block: 1px solid rgba(255, 255, 255, 0.1);
    background: #f7f7f4;
    color: #111111;
}

.uf-action-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.uf-action-card {
    display: grid;
    min-height: 118px;
    gap: 0.35rem;
    align-content: center;
    padding: 1.35rem 1.5rem;
    border-left: 1px solid #dedede;
    color: #111111;
    background: #f7f7f4;
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

.uf-action-card:last-child {
    border-right: 1px solid #dedede;
}

.uf-action-card:hover,
.uf-action-card:focus-visible {
    outline: none;
    background: #ffffff;
    border-color: var(--uf-accent);
}

.uf-action-card span {
    color: var(--uf-accent);
    font-family: "Barlow Condensed", "Inter", sans-serif;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.uf-action-card strong {
    color: #111111;
    font-family: "Barlow Condensed", "Inter", sans-serif;
    font-size: clamp(1.45rem, 2.2vw, 2.15rem);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: 0;
    text-transform: uppercase;
}

.uf-action-card em {
    color: #5d6268;
    font-size: 0.88rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.45;
}

.uf-section {
    position: relative;
    overflow-x: clip;
    padding: 8rem 0;
    background: var(--uf-bg);
}

.uf-section-flush {
    border-top: 1px solid var(--uf-line);
}

.uf-section-heading {
    max-width: 980px;
    margin-bottom: 3rem;
}

.uf-section-heading h2,
.uf-tech-grid h2,
.uf-about-grid h2 {
    margin-top: 0.9rem;
    color: #fff;
    font-size: 3.8rem;
    font-weight: 950;
    line-height: 1.04;
    letter-spacing: 0;
}

.uf-product-hub {
    border-top: 1px solid #dedede;
    background: #f7f7f4;
    color: #111111;
}

.uf-product-hub .uf-section-heading h2 {
    color: #111111;
}

.uf-product-hub .uf-kicker {
    color: #7a56b8;
}

.uf-product-family-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.uf-family-card {
    overflow: hidden;
    border: 1px solid #dedede;
    border-radius: 4px;
    background: #ffffff;
    color: #111111;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.uf-family-card:hover,
.uf-family-card:focus-within {
    border-color: rgba(201, 167, 255, 0.8);
    transform: none;
}

.uf-family-card img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background: #111111;
}

.uf-family-card > div {
    display: grid;
    min-height: 270px;
    align-content: start;
    gap: 0.85rem;
    padding: 1.4rem;
}

.uf-family-card h3 {
    color: #111111;
    font-family: "Barlow Condensed", "Inter", sans-serif;
    font-size: clamp(1.8rem, 2.6vw, 2.9rem);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: 0;
    text-transform: uppercase;
}

.uf-family-card p:not(.uf-kicker) {
    color: #5d6268;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.7;
}

.uf-family-card .uf-card-link {
    align-self: end;
    color: #111111;
}

.uf-package-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.uf-package-card,
.uf-product-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--uf-line);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.045);
    transition: transform 0.24s ease, border-color 0.24s ease, background-color 0.24s ease;
}

.uf-package-card::before,
.uf-product-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--uf-accent);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.uf-package-card:hover,
.uf-product-card:hover {
    transform: none;
    border-color: var(--uf-line-strong);
    background: rgba(201, 167, 255, 0.07);
}

.uf-package-card:hover::before,
.uf-product-card:hover::before {
    opacity: 1;
}

.uf-product-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.uf-product-card-link:focus-visible {
    outline: 2px solid var(--uf-accent);
    outline-offset: 4px;
}

.uf-package-card img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.uf-package-card > div {
    padding: 1.5rem;
}

.uf-package-card h3,
.uf-product-card h3 {
    margin: 0.65rem 0 1rem;
    color: #fff;
    font-size: 1.55rem;
    font-weight: 950;
    line-height: 1.15;
    letter-spacing: 0;
}

.uf-package-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.5rem;
    color: var(--uf-muted);
    font-size: 0.94rem;
    font-weight: 700;
}

.uf-package-card li::before {
    content: "";
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    margin-right: 0.55rem;
    border-radius: 2px;
    background: var(--uf-accent);
    vertical-align: 0.08rem;
}

.uf-tech-band {
    background:
        linear-gradient(180deg, rgba(201, 167, 255, 0.08), rgba(5, 5, 7, 0)),
        var(--uf-bg-soft);
    border-block: 1px solid var(--uf-line);
}

.uf-tech-grid,
.uf-about-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 4rem;
    align-items: center;
}

.uf-tech-grid h2 span {
    color: var(--uf-accent);
}

.uf-tech-grid p:not(.uf-kicker),
.uf-about-grid p {
    color: var(--uf-muted);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.85;
}

.uf-tech-image {
    overflow: hidden;
    border: 1px solid var(--uf-line);
    border-radius: 4px;
    background: #000;
}

.uf-tech-image img {
    width: 100%;
    min-height: 520px;
    object-fit: cover;
    opacity: 0.9;
}

.uf-lineup {
    overflow: clip;
}

.uf-lineup-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2rem;
}

.uf-swiper-actions {
    display: flex;
    gap: 0.6rem;
}

.uf-arrow-button {
    width: 48px;
    height: 48px;
    border: 1px solid var(--uf-line);
    border-radius: 3px;
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
    font-size: 2rem;
    line-height: 1;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.uf-arrow-button:hover {
    color: #050505;
    border-color: var(--uf-accent);
    background: var(--uf-accent);
}

.uf-product-swiper {
    overflow: visible !important;
    padding-left: max(1rem, calc((100vw - 1680px) / 2 + 2.5rem));
    padding-right: max(1rem, calc((100vw - 1680px) / 2 + 2.5rem));
}

.uf-product-swiper .swiper-wrapper {
    transition-timing-function: linear !important;
}

.uf-product-swiper .swiper-slide {
    width: 460px;
    height: auto;
}

.uf-lineup-empty {
    margin: 0;
    padding: 2rem;
    border: 1px solid var(--uf-line);
    border-radius: 4px;
    color: var(--uf-muted);
    background: rgba(255, 255, 255, 0.045);
    font-weight: 700;
    text-align: center;
}

.uf-product-card {
    height: 100%;
    padding: 1rem;
}

.uf-product-card img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 3px;
    margin-bottom: 1.3rem;
}

.uf-product-card p:not(.uf-kicker) {
    min-height: 84px;
    color: var(--uf-muted);
    font-size: 0.95rem;
    font-weight: 650;
    line-height: 1.7;
}

.uf-product-card dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
    margin-top: 1.5rem;
}

.uf-product-card dl div {
    padding: 0.85rem 0.65rem;
    border: 1px solid var(--uf-line);
    border-radius: 3px;
    text-align: center;
}

.uf-product-card dt {
    color: var(--uf-faint);
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.uf-product-card dd {
    margin-top: 0.25rem;
    color: #fff;
    font-family: "Barlow Condensed", "Inter", sans-serif;
    font-size: 1rem;
    font-weight: 800;
}

.uf-about-band {
    background:
        linear-gradient(90deg, rgba(201, 167, 255, 0.1), rgba(255, 255, 255, 0.03)),
        #08080b;
    border-top: 1px solid var(--uf-line);
}

.uf-about-head {
    max-width: 960px;
    margin-bottom: 2.5rem;
}

.uf-about-head h2 {
    margin-top: 0.9rem;
    color: #fff;
    font-size: 3.5rem;
    font-weight: 950;
    line-height: 1.04;
    letter-spacing: 0;
}

.uf-trust-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.uf-trust-card {
    display: grid;
    min-height: 190px;
    align-content: end;
    gap: 0.55rem;
    padding: 1.3rem;
    border: 1px solid var(--uf-line);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.045);
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.uf-trust-card:hover,
.uf-trust-card:focus-visible {
    outline: none;
    border-color: rgba(201, 167, 255, 0.62);
    background: rgba(201, 167, 255, 0.07);
}

.uf-trust-card span {
    color: var(--uf-accent);
    font-family: "Barlow Condensed", "Inter", sans-serif;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.uf-trust-card strong {
    color: #fff;
    font-family: "Barlow Condensed", "Inter", sans-serif;
    font-size: clamp(1.55rem, 2.2vw, 2.3rem);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: 0;
    text-transform: uppercase;
}

.uf-trust-card em {
    color: var(--uf-muted);
    font-size: 0.9rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.55;
}

.uf-footer {
    padding: 5rem 0 2.5rem;
    border-top: 1px solid var(--uf-line);
    background: #030304;
}

.uf-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 0.7fr));
    gap: 3rem;
}

.uf-footer p,
.uf-footer a {
    display: block;
    color: rgba(247, 247, 244, 0.5);
    font-size: 0.92rem;
    font-weight: 650;
    line-height: 1.8;
}

.uf-footer a:hover {
    color: var(--uf-accent);
}

.uf-footer h4 {
    margin-bottom: 1rem;
    color: var(--uf-accent);
    font-family: "Barlow Condensed", "Inter", sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.uf-footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid var(--uf-line);
}

.uf-footer-bottom-links,
.uf-footer-legal,
.uf-footer-socials {
    display: flex;
    align-items: center;
}

.uf-footer-bottom-links {
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 0.75rem;
}

.uf-footer-legal {
    gap: 1.5rem;
}

.uf-footer-socials {
    justify-content: flex-end;
    gap: 0.8rem;
}

.uf-footer-social-link {
    display: inline-flex;
    width: 2.35rem;
    height: 2.35rem;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 3px;
    color: rgba(247, 247, 244, 0.72);
    transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.uf-footer-social-link svg {
    display: block;
    width: 1.28rem;
    height: 1.28rem;
}

.uf-footer-social-link:hover,
.uf-footer-social-link:focus-visible {
    outline: none;
    color: #fff;
    border-color: rgba(247, 247, 244, 0.22);
    background: rgba(247, 247, 244, 0.08);
}

.uf-footer-stats {
    margin-top: 0;
    padding: 4rem 0 2rem;
    border-top: 1px solid rgba(200, 160, 255, 0.18);
    background:
        radial-gradient(circle at 50% 0%, rgba(200, 160, 255, 0.16), transparent 34rem),
        #030304;
}

body.uf-layout[data-front-page="home"] .uf-footer {
    padding-top: 2.75rem;
}

.uf-footer-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
}

.uf-footer-stat {
    position: relative;
    min-width: 0;
    padding-left: 1.15rem;
}

.uf-footer-stat::before {
    position: absolute;
    top: 0.2rem;
    bottom: 0.18rem;
    left: 0;
    width: 2px;
    content: "";
    background: linear-gradient(180deg, var(--uf-accent), rgba(226, 207, 255, 0.26));
}

.uf-footer-stat-label {
    display: block;
    min-height: 2.2rem;
    color: var(--uf-accent);
    font-size: 0.84rem;
    font-weight: 850;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.uf-footer-stat-value {
    display: block;
    margin-top: 0.85rem;
    color: #fff;
    font-family: "Orbitron", "Inter", sans-serif;
    font-size: 3rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    line-height: 1.05;
    overflow-wrap: anywhere;
    text-shadow: 0 0 24px rgba(200, 160, 255, 0.24);
}

@media (max-width: 1180px) {
    .uf-footer-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 2rem;
    }

    .uf-footer-stat-value {
        font-size: 2.65rem;
    }
}

@media (max-width: 640px) {
    .uf-footer-stats {
        padding: 2.75rem 0 1.75rem;
    }

    .uf-footer-stats-grid {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    .uf-footer-stat-label {
        min-height: 0;
    }

    .uf-footer-stat-value {
        font-size: 2.15rem;
    }
}

.reveal,
.reveal-card {
    opacity: 0;
    visibility: hidden;
}

.reduce-motion .reveal,
.reduce-motion .reveal-card,
.reduce-motion .split-text .char,
.reduce-motion .split-text .word,
.reduce-motion .split-text .line {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
}

.line {
    overflow: hidden;
    padding-bottom: 0.08em;
}

@media (max-width: 1180px) {
    .auto-film-menu-grid {
        grid-template-columns: 1fr;
    }

    .auto-film-main-list {
        border-right: 0;
        border-bottom: 1px solid var(--uf-line);
        padding-right: 0;
        padding-bottom: 1.25rem;
    }

    .uf-hero-inner {
        grid-template-columns: 1fr;
    }

    .uf-hero-index {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .uf-product-menu-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .uf-product-family-grid,
    .uf-package-grid,
    .uf-tech-grid,
    .uf-about-grid,
    .uf-trust-grid,
    .uf-footer-grid,
    .uf-action-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .uf-hero h1 {
        font-size: 4.4rem;
    }

    .uf-section {
        padding: 5rem 0;
    }

    .uf-section-heading h2,
    .uf-tech-grid h2,
    .uf-about-grid h2,
    .uf-about-head h2 {
        font-size: 2.6rem;
    }

    .uf-product-swiper .swiper-slide {
        width: 82vw;
    }
}

@media (max-width: 640px) {
    .uf-shell {
        width: min(calc(100% - 1.25rem), 1680px);
    }

    .uf-brand-logo {
        width: 156px;
        max-height: 46px;
    }

    .uf-hero-inner {
        padding-bottom: 2rem;
    }

    .uf-hero h1 {
        font-size: 3.2rem;
    }

    .uf-hero p:not(.uf-kicker) {
        font-size: 1rem;
    }

    .uf-hero-index {
        grid-template-columns: 1fr;
    }

    .uf-lineup-head,
    .uf-footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .uf-footer-bottom-links {
        align-items: flex-start;
        flex-direction: column;
        justify-content: flex-start;
        gap: 1rem;
    }

    .uf-product-swiper {
        overflow: hidden !important;
        padding-inline: 0.625rem;
    }

    .uf-product-swiper .swiper-slide {
        width: calc(100vw - 1.25rem);
    }

    .uf-utility-inner {
        justify-content: center;
    }

    .uf-utility-inner > span {
        display: none;
    }

    .uf-utility-inner nav {
        gap: 0.7rem;
    }

    .uf-main-header-row {
        height: 66px;
    }

    .uf-action-card {
        min-height: 108px;
        border-right: 1px solid #dedede;
        border-bottom: 1px solid #dedede;
    }

    .uf-family-card > div,
    .uf-trust-card {
        min-height: auto;
    }
}


/* KAION SHIELD / PPF front additions */
.uf-drawer-panel {
    overflow-y: auto;
}

.uf-mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
    font-weight: 900;
}

.uf-mobile-nav section {
    display: grid;
    gap: 0.75rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--uf-line);
}

.uf-mobile-nav .mobile-nav-link {
    color: #fff;
    font-size: 1.45rem;
    line-height: 1.15;
}

.uf-mobile-nav section > div {
    display: grid;
    gap: 0.5rem;
}

.uf-mobile-nav section > div a {
    color: var(--uf-muted);
    font-size: 0.95rem;
    font-weight: 750;
    line-height: 1.4;
}

.ppf-mega-menu .uf-shell {
    max-width: 1500px;
}

.ppf-mega-browser {
    display: grid;
    grid-template-columns: minmax(250px, 0.42fr) minmax(0, 1fr);
    gap: 1rem;
    min-height: 320px;
}

.ppf-mega-categories,
.ppf-mega-series-panel {
    min-width: 0;
    border: 1px solid var(--uf-line);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.035);
}

.ppf-mega-categories {
    display: grid;
    align-content: start;
    gap: 0.5rem;
    padding: 1rem;
}

.ppf-mega-compact-head {
    padding: 0.25rem 0.25rem 0.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ppf-mega-compact-head h3 {
    margin: 0.45rem 0 0;
    color: #fff;
    font-family: "Barlow Condensed", "Inter", sans-serif;
    font-size: clamp(1.8rem, 2.5vw, 2.8rem);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: 0;
    text-transform: uppercase;
}

.ppf-mega-category {
    display: grid;
    width: 100%;
    min-width: 0;
    gap: 0.28rem;
    padding: 0.85rem;
    border: 1px solid transparent;
    border-radius: 3px;
    color: rgba(247, 247, 244, 0.7);
    text-align: left;
    background: transparent;
    transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.ppf-mega-category:hover,
.ppf-mega-category:focus-visible,
.ppf-mega-category.is-active {
    outline: none;
    color: #fff;
    border-color: rgba(201, 167, 255, 0.46);
    background: rgba(201, 167, 255, 0.08);
}

.ppf-mega-category span {
    color: inherit;
    font-family: "Barlow Condensed", "Inter", sans-serif;
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ppf-mega-category small {
    color: rgba(247, 247, 244, 0.52);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.45;
}

.ppf-mega-series-panel {
    padding: 1.2rem;
}

.ppf-mega-series-group {
    display: none;
    min-height: 100%;
    align-content: start;
    gap: 1rem;
}

.ppf-mega-series-group.is-active {
    display: grid;
}

.ppf-mega-series-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ppf-mega-series-head h4 {
    margin: 0.35rem 0 0;
    color: #fff;
    font-family: "Barlow Condensed", "Inter", sans-serif;
    font-size: clamp(2rem, 3vw, 3.4rem);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: 0;
    text-transform: uppercase;
}

.ppf-mega-series-head a {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 0 0.85rem;
    border: 1px solid rgba(201, 167, 255, 0.46);
    border-radius: 2px;
    color: var(--uf-accent);
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ppf-mega-series-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.ppf-mega-series-links a {
    display: grid;
    min-width: 0;
    gap: 0.35rem;
    min-height: 88px;
    padding: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.18);
    transition: border-color 0.18s ease, background-color 0.18s ease;
}

.ppf-mega-series-links a:hover,
.ppf-mega-series-links a:focus-visible {
    outline: none;
    border-color: rgba(201, 167, 255, 0.46);
    background: rgba(201, 167, 255, 0.08);
}

.ppf-mega-series-links span {
    color: #fff;
    font-size: 0.95rem;
    font-weight: 850;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.ppf-mega-series-links small {
    color: rgba(247, 247, 244, 0.56);
    font-size: 0.75rem;
    font-weight: 700;
}

.ppf-mega-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.58fr) minmax(0, 1fr);
    gap: 2rem;
}

.ppf-mega-hero {
    min-height: 360px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 1.5rem;
    border: 1px solid var(--uf-line);
    border-radius: 4px;
    background:
        linear-gradient(135deg, rgba(201, 167, 255, 0.14), rgba(255, 255, 255, 0.04) 42%, rgba(5, 5, 7, 0.65)),
        #07090a;
}

.ppf-mega-hero h3 {
    margin: 0.85rem 0 1rem;
    color: #fff;
    font-size: clamp(2rem, 3vw, 3.5rem);
    font-weight: 950;
    line-height: 0.98;
    letter-spacing: 0;
}

.ppf-mega-hero p:not(.uf-kicker) {
    max-width: 420px;
    margin-bottom: 1.4rem;
    color: var(--uf-muted);
    font-size: 0.95rem;
    font-weight: 650;
    line-height: 1.75;
}

.ppf-mega-lines {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.ppf-mega-line {
    min-width: 0;
    border: 1px solid var(--uf-line);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.035);
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.ppf-mega-line:hover {
    border-color: rgba(201, 167, 255, 0.42);
    background: rgba(201, 167, 255, 0.07);
    transform: none;
}

.ppf-mega-line > a {
    display: grid;
    gap: 0.4rem;
    min-height: 112px;
    padding: 1.15rem;
}

.ppf-mega-line span {
    color: #fff;
    font-family: "Barlow Condensed", "Inter", sans-serif;
    font-size: 0.9rem;
    font-weight: 850;
    letter-spacing: 0.08em;
}

.ppf-mega-line small {
    color: var(--uf-muted);
    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1.55;
}

.ppf-mega-series {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    max-height: 0;
    margin: 0;
    padding: 0 1.15rem;
    overflow: hidden;
    list-style: none;
    opacity: 0;
    transform: translateY(-0.25rem);
    transition: max-height 0.22s ease, opacity 0.16s ease, padding 0.18s ease, transform 0.18s ease;
}

.ppf-mega-line:hover .ppf-mega-series,
.ppf-mega-line:focus-within .ppf-mega-series {
    max-height: 260px;
    padding-bottom: 1rem;
    opacity: 1;
    transform: translateY(0);
}

.ppf-mega-line li a {
    display: block;
    min-width: 0;
    color: var(--uf-muted);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.ppf-mega-line li a:hover,
.ppf-mega-line li a:focus-visible {
    color: #fff;
}

.ppf-page {
    --ppf-accent: #c9a7ff;
    --ppf-accent-soft: rgba(201, 167, 255, 0.16);
    --ppf-panel: rgba(255, 255, 255, 0.048);
    --ppf-border: rgba(255, 255, 255, 0.12);
    overflow: hidden;
    background: #040606;
    color: #fff;
}

.ppf-hero {
    position: relative;
    min-height: 92svh;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border-bottom: 1px solid var(--ppf-border);
    background:
        linear-gradient(110deg, rgba(0, 0, 0, 0.9), rgba(4, 8, 9, 0.74) 52%, rgba(4, 6, 6, 0.94)),
        #040606;
}

.ppf-hero-visual {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: max(2rem, 8vw);
    pointer-events: none;
}

.ppf-vehicle-silhouette {
    position: relative;
    width: min(58vw, 980px);
    aspect-ratio: 2.65 / 1;
    opacity: 0.72;
    transform: translateY(5vh);
}

.ppf-vehicle-silhouette::before,
.ppf-vehicle-silhouette::after,
.ppf-vehicle-silhouette span {
    content: "";
    position: absolute;
    display: block;
}

.ppf-vehicle-silhouette::before {
    left: 4%;
    right: 2%;
    bottom: 24%;
    height: 34%;
    border: 1px solid rgba(201, 167, 255, 0.36);
    border-radius: 52% 48% 18% 16% / 72% 74% 24% 28%;
    background: linear-gradient(180deg, rgba(201, 167, 255, 0.1), rgba(255, 255, 255, 0.03));
    box-shadow: inset 0 0 42px rgba(201, 167, 255, 0.08);
}

.ppf-vehicle-silhouette::after {
    left: 20%;
    right: 20%;
    bottom: 48%;
    height: 30%;
    border-top: 1px solid rgba(255, 255, 255, 0.34);
    border-left: 1px solid rgba(201, 167, 255, 0.24);
    border-right: 1px solid rgba(201, 167, 255, 0.24);
    border-radius: 58% 42% 0 0 / 100% 100% 0 0;
}

.ppf-vehicle-silhouette span:nth-child(1),
.ppf-vehicle-silhouette span:nth-child(2) {
    bottom: 13%;
    width: 16%;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 167, 255, 0.16), rgba(0, 0, 0, 0.7) 58%);
}

.ppf-vehicle-silhouette span:nth-child(1) {
    left: 17%;
}

.ppf-vehicle-silhouette span:nth-child(2) {
    right: 13%;
}

.ppf-vehicle-silhouette span:nth-child(3) {
    left: 0;
    right: 0;
    bottom: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 167, 255, 0.76), transparent);
}

.ppf-hero-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
    gap: 3rem;
    align-items: end;
    padding-top: 10.5rem;
    padding-bottom: 4rem;
}

.ppf-hero-copy {
    max-width: 940px;
}

.ppf-hero-logo {
    display: block;
    width: min(100%, 620px);
    height: auto;
    margin-bottom: 1.45rem;
    filter: drop-shadow(0 22px 42px rgba(0, 0, 0, 0.5));
}

.ppf-hero h1 {
    margin: 1rem 0 1.25rem;
    color: #fff;
    font-family: "Barlow Condensed", "Inter", "Pretendard", sans-serif;
    font-size: clamp(4rem, 9.2vw, 9.4rem);
    font-weight: 950;
    line-height: 0.86;
    letter-spacing: 0;
}

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

.ppf-hero-lede {
    max-width: 740px;
    color: rgba(255, 255, 255, 0.75);
    font-size: clamp(1rem, 1.25vw, 1.18rem);
    font-weight: 650;
    line-height: 1.82;
}

.ppf-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 2rem;
}

.ppf-hero-index {
    display: grid;
    gap: 0.75rem;
}

.ppf-hero-index div,
.ppf-line-card,
.ppf-product-card,
.ppf-color-panel,
.ppf-tech-card,
.ppf-studio-copy {
    border: 1px solid var(--ppf-border);
    border-radius: 4px;
    background: var(--ppf-panel);
}

.ppf-hero-index div {
    padding: 1.25rem;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.ppf-hero-index strong,
.ppf-hero-index span {
    display: block;
}

.ppf-hero-index strong {
    color: #fff;
    font-family: "Barlow Condensed", "Inter", sans-serif;
    font-size: 2.1rem;
    font-weight: 850;
}

.ppf-hero-index span {
    margin-top: 0.35rem;
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ppf-page .uf-kicker,
.ppf-page .uf-menu-title {
    color: var(--ppf-accent);
}

.ppf-page .uf-primary-link {
    border-color: var(--ppf-accent);
    background: var(--ppf-accent);
}

.ppf-section {
    padding: 7rem 0;
    background: #040606;
}

.ppf-section:nth-of-type(even) {
    background: #070909;
}

.ppf-section-head {
    max-width: 980px;
    margin-bottom: 2.5rem;
}

.ppf-section-head h2,
.ppf-story-grid h2,
.ppf-studio-grid h2 {
    margin-top: 0.9rem;
    color: #fff;
    font-size: clamp(2.35rem, 4.8vw, 4.9rem);
    font-weight: 950;
    line-height: 1.02;
    letter-spacing: 0;
}

.ppf-section-head p:not(.uf-kicker),
.ppf-story-copy,
.ppf-studio-copy p,
.ppf-studio-copy li {
    color: rgba(255, 255, 255, 0.66);
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.82;
}

.ppf-story-grid,
.ppf-studio-grid,
.ppf-data-layout,
.ppf-color-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 4rem;
    align-items: start;
}

.ppf-story-copy {
    display: grid;
    gap: 1rem;
    padding-top: 0.4rem;
}

.ppf-story-brand {
    display: grid;
    gap: 1.35rem;
}

.ppf-brand-logo-card {
    width: min(100%, 560px);
    padding: clamp(0.85rem, 2vw, 1.4rem);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
}

.ppf-brand-logo-card img {
    display: block;
    width: 100%;
    height: auto;
}

.ppf-story-copy strong {
    color: #fff;
}

.ppf-story-highlight {
    margin-top: 0.45rem;
    padding: 1rem 1.15rem;
    border-left: 3px solid var(--ppf-accent);
    background: rgba(201, 167, 255, 0.08);
}

.ppf-line-grid,
.ppf-tech-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.ppf-line-card {
    display: grid;
    min-height: 230px;
    align-content: space-between;
    padding: 1.35rem;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.ppf-line-card:hover,
.ppf-product-card:hover,
.ppf-tech-card:hover {
    border-color: rgba(201, 167, 255, 0.42);
    background: rgba(201, 167, 255, 0.07);
    transform: translateY(-3px);
}

.ppf-line-card span,
.ppf-product-card p:first-child,
.ppf-color-chip small,
.ppf-tech-card span {
    color: var(--ppf-accent);
    font-family: "Barlow Condensed", "Inter", sans-serif;
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 850;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ppf-line-card strong {
    display: block;
    color: #fff;
    font-size: 1.65rem;
    font-weight: 950;
    line-height: 1.12;
}

.ppf-line-card em {
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.92rem;
    font-style: normal;
    font-weight: 650;
    line-height: 1.65;
}

.ppf-product-grid {
    display: grid;
    gap: 1rem;
}

.ppf-category-product-stack {
    display: grid;
    gap: 1.35rem;
}

.ppf-category-selector {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.65rem;
    margin-bottom: 1rem;
}

.ppf-category-tab {
    display: grid;
    min-width: 0;
    min-height: 82px;
    align-content: space-between;
    gap: 0.35rem;
    padding: 0.82rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.68);
    background: rgba(255, 255, 255, 0.035);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.ppf-category-tab:hover,
.ppf-category-tab:focus-visible,
.ppf-category-tab.is-active {
    outline: none;
    color: #fff;
    border-color: rgba(201, 167, 255, 0.54);
    background: rgba(201, 167, 255, 0.09);
}

.ppf-category-tab strong {
    min-width: 0;
    color: inherit;
    font-size: 1rem;
    font-weight: 920;
    line-height: 1.18;
    overflow-wrap: anywhere;
}

.ppf-category-tab span {
    min-width: 0;
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.64rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    line-height: 1.2;
    overflow-wrap: anywhere;
    text-transform: uppercase;
}

.ppf-category-products[hidden] {
    display: none !important;
}

.ppf-category-products {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--ppf-border);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.025);
}

.ppf-category-products-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.25rem 0.25rem 0.95rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ppf-category-products-head p {
    margin: 0 0 0.45rem;
    color: var(--ppf-accent);
    font-family: "Barlow Condensed", "Inter", sans-serif;
    font-size: 0.66rem;
    font-weight: 850;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ppf-category-products-head h3 {
    margin: 0;
    color: #fff;
    font-size: 1.3rem;
    font-weight: 950;
    line-height: 1.2;
    letter-spacing: 0;
}

.ppf-category-products-head span {
    display: block;
    margin-top: 0.35rem;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.86rem;
    font-weight: 650;
    line-height: 1.55;
}

.ppf-category-products-head img {
    width: min(160px, 34vw);
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.ppf-series-stack {
    display: grid;
    gap: 1rem;
}

.ppf-series-products {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.16);
}

.ppf-series-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.ppf-series-head p {
    margin: 0 0 0.35rem;
    color: var(--ppf-accent);
    font-family: "Barlow Condensed", "Inter", sans-serif;
    font-size: 0.62rem;
    font-weight: 850;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ppf-series-head h4 {
    margin: 0;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: 0;
}

.ppf-series-head span {
    display: block;
    margin-top: 0.25rem;
    color: rgba(255, 255, 255, 0.56);
    font-size: 0.8rem;
    font-weight: 650;
    line-height: 1.5;
}

.ppf-series-head img {
    width: min(130px, 30vw);
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.ppf-series-showcase {
    display: grid;
    grid-template-columns: minmax(280px, 0.85fr) minmax(360px, 1.15fr);
    gap: 1rem;
    align-items: start;
}

.ppf-roll-list {
    display: grid;
    gap: 0.75rem;
    max-height: min(720px, 72vh);
    overflow: auto;
    padding-right: 0.15rem;
}

.ppf-roll-item {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 0.85rem;
    align-items: center;
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.04);
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.ppf-roll-item:hover {
    border-color: rgba(201, 167, 255, 0.34);
    background: rgba(201, 167, 255, 0.075);
    transform: none;
}

.ppf-roll-media {
    min-width: 0;
    overflow: hidden;
    border-radius: 5px;
    background: #0a0d0e;
}

.ppf-roll-media img,
.ppf-roll-media span {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background:
        linear-gradient(120deg, rgba(201, 167, 255, 0.12), rgba(255, 255, 255, 0.04)),
        #0a0d0e;
}

.ppf-roll-copy {
    min-width: 0;
}

.ppf-roll-copy p {
    margin: 0 0 0.28rem;
    color: var(--ppf-accent);
    font-family: "Barlow Condensed", "Inter", sans-serif;
    font-size: 0.62rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ppf-roll-copy h5 {
    margin: 0;
    color: #fff;
    font-size: 0.98rem;
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.ppf-roll-detail {
    margin-top: 0.6rem;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.55;
}

.ppf-roll-detail p,
.ppf-rich-detail p {
    margin: 0 0 0.7rem;
}

.ppf-series-panel {
    min-width: 0;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.24);
}

.ppf-series-car,
.ppf-series-car-placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 8;
    object-fit: cover;
    margin-bottom: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    background: #0a0d0e;
}

.ppf-spec-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
    margin: 0;
}

.ppf-spec-list div {
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.035);
}

.ppf-spec-list div.is-empty {
    grid-column: 1 / -1;
}

.ppf-spec-list dt {
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.62rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    line-height: 1.35;
    text-transform: uppercase;
}

.ppf-spec-list dd {
    margin: 0.25rem 0 0;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 750;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.ppf-rich-detail {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.7;
}

.ppf-rich-detail img,
.ppf-roll-detail img {
    max-width: 100%;
    height: auto;
    border-radius: 3px;
}

.ppf-category-browser {
    display: grid;
    gap: 1rem;
}

.ppf-series-selector {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: 0.6rem;
    padding: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.035);
}

.ppf-series-tab {
    position: relative;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 0.68rem;
    row-gap: 0.16rem;
    align-items: center;
    min-width: 0;
    min-height: 72px;
    padding: 0.5rem 0.58rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    color: rgba(255, 255, 255, 0.66);
    background: rgba(0, 0, 0, 0.18);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.ppf-series-tab:hover,
.ppf-series-tab:focus-visible,
.ppf-series-tab.is-active {
    outline: none;
    color: #fff;
    border-color: rgba(201, 167, 255, 0.52);
    background: rgba(201, 167, 255, 0.09);
}

.ppf-series-tab.is-active::after {
    content: "";
    position: absolute;
    inset: auto 0.58rem 0.42rem 0.58rem;
    height: 2px;
    background: var(--ppf-accent);
}

.ppf-series-tab img,
.ppf-series-tab > span {
    grid-row: 1 / span 2;
    display: block;
    width: 56px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 2px;
    background:
        linear-gradient(120deg, rgba(201, 167, 255, 0.14), rgba(255, 255, 255, 0.04)),
        #0a0d0e;
}

.ppf-series-tab strong {
    min-width: 0;
    color: inherit;
    font-size: 0.86rem;
    font-weight: 900;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.ppf-series-tab small {
    min-width: 0;
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
    text-transform: uppercase;
}

.ppf-series-live-panel {
    min-width: 0;
    min-height: min(620px, 76vh);
}

.ppf-series-products[hidden] {
    display: none !important;
}

.ppf-series-view {
    padding: 0;
    border: 0;
    background: transparent;
}

.ppf-series-head--compact {
    align-items: flex-start;
    margin-bottom: 1rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ppf-series-panel {
    display: grid;
    gap: 1rem;
}

.ppf-series-spec-zone,
.ppf-series-car-zone {
    min-width: 0;
}

.ppf-series-car-zone {
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ppf-series-car-switcher {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
    margin-top: 0.75rem;
}

.ppf-car-option {
    display: grid;
    min-width: 0;
    gap: 0.45rem;
    padding: 0.45rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    color: rgba(255, 255, 255, 0.64);
    background: rgba(255, 255, 255, 0.035);
    text-align: left;
    transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.ppf-car-option:hover,
.ppf-car-option:focus-visible,
.ppf-car-option.is-active {
    outline: none;
    color: #fff;
    border-color: rgba(201, 167, 255, 0.52);
    background: rgba(201, 167, 255, 0.08);
}

.ppf-car-option img,
.ppf-car-option > span {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 2px;
    background:
        linear-gradient(120deg, rgba(201, 167, 255, 0.14), rgba(255, 255, 255, 0.04)),
        #0a0d0e;
}

.ppf-series-car-placeholder {
    background:
        linear-gradient(120deg, rgba(201, 167, 255, 0.14), rgba(255, 255, 255, 0.04)),
        #0a0d0e;
}

.ppf-car-option strong {
    color: inherit;
    font-size: 0.74rem;
    font-weight: 850;
    line-height: 1.2;
    overflow-wrap: anywhere;
}


.ppf-category-browser {
    grid-template-columns: minmax(500px, 1.05fr) minmax(420px, 0.95fr);
    column-gap: clamp(2rem, 4vw, 4rem);
    row-gap: 1.35rem;
    align-items: start;
}

.ppf-series-live-panel,
.ppf-series-view.is-active,
.ppf-series-showcase {
    display: contents;
}

.ppf-series-live-panel {
    min-height: 0;
}

.ppf-roll-list {
    grid-column: 1;
    grid-row: 1 / span 2;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: clamp(1.05rem, 2vw, 1.55rem) clamp(0.72rem, 1.4vw, 1rem);
    max-height: none;
    overflow: visible;
    padding-right: 0;
}

.ppf-roll-item {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.ppf-roll-item:hover {
    border-color: transparent;
    background: transparent;
}

.ppf-roll-media {
    border-radius: 0;
    background: #f4f7f7;
}

.ppf-roll-media img,
.ppf-roll-media span {
    aspect-ratio: 1 / 0.9;
    background:
        linear-gradient(140deg, rgba(255, 255, 255, 0.92), rgba(210, 220, 222, 0.76)),
        #eef3f3;
}

.ppf-roll-copy {
    margin-top: 0.48rem;
    text-align: center;
}

.ppf-roll-copy p,
.ppf-roll-copy h5 {
    display: inline;
    margin: 0;
    color: rgba(255, 255, 255, 0.84);
    font-family: "Inter", sans-serif;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1.28;
    letter-spacing: 0;
    text-transform: none;
}

.ppf-roll-copy h5::before {
    content: " - ";
}

.ppf-roll-detail {
    display: none;
}

.ppf-series-panel {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    padding: 1.15rem 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.ppf-series-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #c9dcff 0 24%, rgba(201, 220, 255, 0.36) 24% 100%);
}

.ppf-series-head--compact {
    margin-bottom: 0;
    padding: 1rem 0 1.05rem;
    border-bottom: 1px solid rgba(185, 206, 240, 0.22);
}

.ppf-series-head h4 {
    color: #bcd3f4;
    font-size: clamp(1.28rem, 2.2vw, 1.72rem);
    font-weight: 930;
}

.ppf-series-head span {
    color: rgba(205, 220, 245, 0.66);
}

.ppf-spec-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid rgba(185, 206, 240, 0.18);
}

.ppf-spec-list div {
    padding: 1.05rem 0.85rem 1.25rem 0;
    border: 0;
    border-right: 1px solid rgba(185, 206, 240, 0.12);
    border-bottom: 1px solid rgba(185, 206, 240, 0.18);
    border-radius: 0;
    background: transparent;
}

.ppf-spec-list div:nth-child(3n) {
    border-right: 0;
}

.ppf-spec-list dt {
    color: rgba(165, 183, 214, 0.72);
    font-size: 0.62rem;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: none;
}

.ppf-spec-list dd {
    margin-top: 0.62rem;
    color: #c7dcff;
    font-size: clamp(1rem, 1.7vw, 1.35rem);
    font-weight: 820;
    line-height: 1.28;
}

.ppf-rich-detail {
    border-color: rgba(185, 206, 240, 0.18);
    color: rgba(205, 220, 245, 0.7);
}

.ppf-series-car-zone {
    display: none;
}

.ppf-series-selector {
    grid-column: 2;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
    gap: 0.75rem;
    align-items: start;
    padding: 0;
    border: 0;
    background: transparent;
}

.ppf-series-tab {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 0.45rem;
    min-height: 0;
    padding: 0.28rem;
    border-color: transparent;
    border-radius: 0;
    color: rgba(190, 207, 235, 0.74);
    background: transparent;
    text-align: center;
}

.ppf-series-tab:hover,
.ppf-series-tab:focus-visible,
.ppf-series-tab.is-active {
    color: #fff;
    border-color: #fff;
    background: rgba(255, 255, 255, 0.035);
}

.ppf-series-tab.is-active::after {
    content: none;
}

.ppf-series-tab img,
.ppf-series-tab > span {
    grid-row: auto;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 0;
}

.ppf-series-tab strong {
    font-size: 0.64rem;
    font-weight: 820;
    line-height: 1.25;
}

.ppf-series-tab small {
    display: none;
}

@media (max-width: 1180px) {
    .ppf-category-browser {
        grid-template-columns: 1fr;
    }

    .ppf-roll-list,
    .ppf-series-panel,
    .ppf-series-selector {
        grid-column: 1;
        grid-row: auto;
    }
}

@media (max-width: 760px) {
    .ppf-roll-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem 0.75rem;
    }

    .ppf-spec-list {
        grid-template-columns: 1fr;
    }

    .ppf-spec-list div,
    .ppf-spec-list div:nth-child(3n) {
        border-right: 0;
    }

    .ppf-series-selector {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.ppf-empty-series {
    display: grid;
    gap: 0.35rem;
    padding: 1.2rem;
    border: 1px solid var(--ppf-border);
    border-radius: 4px;
    background: var(--ppf-panel);
}

.ppf-empty-series strong {
    color: #fff;
    font-size: 1rem;
    font-weight: 900;
}

.ppf-empty-series span {
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.86rem;
    font-weight: 650;
    line-height: 1.55;
}

.ppf-product-card {
    overflow: hidden;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.ppf-product-card img,
.ppf-placeholder-media {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background:
        linear-gradient(120deg, rgba(201, 167, 255, 0.12), rgba(255, 255, 255, 0.04)),
        #0a0d0e;
}

.ppf-product-card > div:not(.ppf-placeholder-media) {
    padding: 1.2rem;
}

.ppf-product-card h3 {
    margin: 0.55rem 0 1rem;
    color: #fff;
    font-size: 1.35rem;
    font-weight: 950;
    line-height: 1.18;
    letter-spacing: 0;
}

.ppf-product-card dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    margin: 0 0 1rem;
}

.ppf-product-card dl div {
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 3px;
}

.ppf-product-card dt {
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.62rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ppf-product-card dd {
    margin-top: 0.2rem;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 750;
    word-break: keep-all;
}

.ppf-color-panel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 1rem;
}

.ppf-color-chip {
    display: grid;
    min-width: 0;
    gap: 0.45rem;
    padding: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.18);
}

.ppf-color-chip span {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 1;
    border-radius: 4px;
    background: var(--chip-color, #9aa4ad);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.ppf-color-chip strong {
    min-width: 0;
    color: #fff;
    font-size: 0.86rem;
    font-weight: 850;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.ppf-tech-card {
    min-height: 150px;
    display: grid;
    align-content: space-between;
    padding: 1.25rem;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.ppf-tech-card strong {
    color: #fff;
    font-size: 1.18rem;
    font-weight: 900;
}

.ppf-studio-section {
    border-top: 1px solid var(--ppf-border);
    background:
        linear-gradient(90deg, rgba(201, 167, 255, 0.08), rgba(255, 255, 255, 0.02)),
        #050606;
}

.ppf-studio-copy {
    padding: 1.5rem;
}

.ppf-studio-copy ul {
    display: grid;
    gap: 0.75rem;
    margin: 1.5rem 0;
    padding: 0;
    list-style: none;
}

.ppf-studio-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.ppf-studio-actions .uf-primary-link,
.ppf-studio-actions .uf-ghost-link {
    min-width: 180px;
}

.ppf-studio-copy li {
    position: relative;
    padding-left: 1rem;
}

.ppf-studio-copy li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: var(--ppf-accent);
}

@media (max-width: 1280px) {
    .ppf-line-grid,
    .ppf-tech-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1180px) {
    .ppf-mega-grid,
    .ppf-mega-browser,
    .ppf-story-grid,
    .ppf-studio-grid,
    .ppf-data-layout,
    .ppf-color-layout,
    .ppf-series-showcase,
    .ppf-hero-inner {
        grid-template-columns: 1fr;
    }

    .ppf-hero-index {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ppf-vehicle-silhouette {
        width: 82vw;
        opacity: 0.36;
    }
}

@media (max-width: 760px) {
    .ppf-mega-lines,
    .ppf-mega-series-links,
    .ppf-line-grid,
    .ppf-tech-grid,
    .ppf-color-panel,
    .ppf-product-card dl,
    .ppf-spec-list,
    .ppf-series-car-switcher,
    .ppf-series-selector,
    .ppf-category-selector {
        grid-template-columns: 1fr;
    }

    .ppf-hero {
        min-height: 88svh;
    }

    .ppf-category-products-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .ppf-category-products-head img {
        width: 100%;
    }


    .ppf-series-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .ppf-series-head img {
        width: 100%;
    }

    .ppf-hero-inner {
        gap: 2rem;
        padding-top: 9rem;
        padding-bottom: 3rem;
    }

    .ppf-hero-logo {
        width: min(100%, 430px);
        margin-bottom: 1rem;
    }

    .ppf-hero-index {
        grid-template-columns: 1fr;
    }

    .ppf-section {
        padding: 4.5rem 0;
    }

    .ppf-line-card {
        min-height: 190px;
    }

    .ppf-roll-list {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }

    .ppf-roll-item {
        grid-template-columns: 92px minmax(0, 1fr);
    }
}


.ppf-data-section > .uf-shell {
    width: min(calc(100% - clamp(1rem, 2.2vw, 2.5rem)), 1920px);
    max-width: 1920px;
}

.ppf-data-section .ppf-data-layout {
    grid-template-columns: 1fr;
    gap: 1.35rem;
}

.ppf-data-section .ppf-section-head {
    max-width: 1280px;
    margin-bottom: 0.35rem;
}

.ppf-category-selector {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.5rem;
    margin-bottom: 1.35rem;
}

.ppf-category-tab {
    min-height: 70px;
    padding: 0.72rem 0.82rem;
}

.ppf-category-tab span {
    text-transform: none;
}

.ppf-category-products {
    gap: 1.35rem;
    padding: clamp(0.9rem, 1.6vw, 1.45rem);
}

.ppf-category-products-head {
    padding-bottom: 1.1rem;
}

.ppf-category-browser {
    display: grid;
    grid-template-columns: minmax(0, 1.32fr) minmax(420px, 0.68fr);
    column-gap: clamp(1.7rem, 3vw, 3.4rem);
    row-gap: 1.2rem;
    align-items: start;
}

.ppf-series-live-panel,
.ppf-series-view.is-active,
.ppf-series-showcase {
    display: contents;
}

.ppf-series-selector {
    grid-column: 1 / -1;
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(8, 128px);
    justify-content: space-between;
    gap: 0.72rem;
    align-items: start;
    overflow-x: auto;
    scrollbar-width: thin;
    padding: 0 0 1.05rem;
    border: 0;
    border-bottom: 1px solid rgba(185, 206, 240, 0.16);
    background: transparent;
}

.ppf-series-tab {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 0.42rem;
    width: 128px;
    min-height: 0;
    min-width: 0;
    padding: 0.3rem;
    border: 2px solid transparent;
    border-radius: 0;
    color: rgba(190, 207, 235, 0.78);
    background: transparent;
    text-align: center;
}

.ppf-series-tab:hover,
.ppf-series-tab:focus-visible,
.ppf-series-tab.is-active {
    color: #fff;
    border-color: #fff;
    background: rgba(255, 255, 255, 0.04);
}

.ppf-series-tab.is-active::after {
    content: none;
}

.ppf-series-tab img,
.ppf-series-tab > span {
    grid-row: auto;
    width: 116px;
    height: 65px;
    object-fit: cover;
    border-radius: 0;
}

.ppf-series-tab strong {
    color: inherit;
    font-size: 0.68rem;
    font-weight: 820;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.ppf-series-tab small,
.ppf-series-car-zone {
    display: none;
}

.ppf-roll-list {
    grid-column: 1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: clamp(1rem, 1.5vw, 1.55rem) clamp(0.72rem, 1vw, 1rem);
    max-height: none;
    overflow: visible;
    padding-right: 0;
}

.ppf-roll-item {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.ppf-roll-item:hover {
    border-color: transparent;
    background: transparent;
}

.ppf-roll-media {
    border-radius: 0;
    background: #eef3f3;
}

.ppf-roll-media img,
.ppf-roll-media span {
    aspect-ratio: 1 / 0.9;
    object-fit: cover;
    background:
        linear-gradient(140deg, rgba(255, 255, 255, 0.92), rgba(210, 220, 222, 0.76)),
        #eef3f3;
}

.ppf-roll-copy {
    display: block;
    margin-top: 0.5rem;
    min-width: 0;
    text-align: center;
}

.ppf-roll-code,
.ppf-roll-name,
.ppf-roll-copy p,
.ppf-roll-copy h5 {
    display: block;
    margin: 0;
    font-family: "Inter", sans-serif;
    letter-spacing: 0;
    text-transform: none;
}

.ppf-roll-code,
.ppf-roll-copy p {
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.62rem;
    font-weight: 820;
    line-height: 1.2;
}

.ppf-roll-name,
.ppf-roll-copy h5 {
    margin-top: 0.2rem;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.56rem;
    font-weight: 720;
    line-height: 1.28;
    overflow-wrap: anywhere;
}

.ppf-roll-copy h5::before {
    content: none;
}

.ppf-roll-specs {
    display: grid;
    gap: 0.16rem;
    margin: 0.48rem 0 0;
}

.ppf-roll-specs div {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    min-width: 0;
    color: rgba(201, 220, 255, 0.66);
    font-size: 0.54rem;
    line-height: 1.25;
}

.ppf-roll-specs dt,
.ppf-roll-specs dd {
    margin: 0;
}

.ppf-roll-specs dt {
    color: rgba(165, 183, 214, 0.72);
    font-weight: 760;
}

.ppf-roll-specs dd {
    font-weight: 820;
    overflow-wrap: anywhere;
}

.ppf-roll-detail {
    display: none;
}

.ppf-series-panel {
    position: relative;
    grid-column: 2;
    grid-row: 2;
    padding: 1.15rem 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.ppf-series-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #c9dcff 0 24%, rgba(201, 220, 255, 0.36) 24% 100%);
}

.ppf-series-head--compact {
    margin-bottom: 0;
    padding: 1rem 0 1.05rem;
    border-bottom: 1px solid rgba(185, 206, 240, 0.22);
}

.ppf-series-head h4 {
    color: #bcd3f4;
    font-size: clamp(1.26rem, 1.75vw, 1.72rem);
    font-weight: 930;
}

.ppf-series-head span {
    color: rgba(205, 220, 245, 0.72);
    font-size: 0.9rem;
    line-height: 1.65;
}

.ppf-spec-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid rgba(185, 206, 240, 0.18);
}

.ppf-spec-list div {
    padding: 1.05rem 0.85rem 1.25rem 0;
    border: 0;
    border-right: 1px solid rgba(185, 206, 240, 0.12);
    border-bottom: 1px solid rgba(185, 206, 240, 0.18);
    border-radius: 0;
    background: transparent;
}

.ppf-spec-list div:nth-child(3n) {
    border-right: 0;
}

.ppf-spec-list dt {
    color: rgba(165, 183, 214, 0.72);
    font-size: 0.62rem;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: none;
}

.ppf-spec-list dd {
    margin-top: 0.62rem;
    color: #c7dcff;
    font-size: clamp(1rem, 1.45vw, 1.28rem);
    font-weight: 820;
    line-height: 1.28;
}

.ppf-rich-detail {
    display: block;
    margin-top: 1.05rem;
    border-color: rgba(185, 206, 240, 0.18);
    color: rgba(205, 220, 245, 0.7);
}


@media (min-width: 1181px) {
    .ppf-series-panel {
        position: sticky;
        top: 6.25rem;
        align-self: start;
    }
}

@media (max-width: 1180px) {
    .ppf-data-section > .uf-shell {
        width: min(calc(100% - 1.25rem), 100%);
    }

    .ppf-category-browser {
        grid-template-columns: 1fr;
    }

    .ppf-roll-list,
    .ppf-series-panel,
    .ppf-series-selector {
        grid-column: 1;
        grid-row: auto;
    }
}

@media (max-width: 760px) {
    .ppf-roll-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem 0.7rem;
    }

    .ppf-series-selector {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ppf-spec-list {
        grid-template-columns: 1fr;
    }

    .ppf-spec-list div,
    .ppf-spec-list div:nth-child(3n) {
        border-right: 0;
    }
}

.ppf-product-media-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: rgba(255, 255, 255, 0.08);
}

.ppf-product-media-grid img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background: #0a0d0e;
}

@media (max-width: 560px) {
    .ppf-product-media-grid,
    .ppf-roll-item {
        grid-template-columns: 1fr;
    }
}

/* XPEL-like public desktop header requested on 2026-06-27 */
body.uf-layout .uf-utility-bar {
    display: none;
}

body.uf-layout .uf-header,
body.uf-layout .uf-header.is-scrolled,
body.uf-layout:not([data-front-page]) .uf-header:hover,
body.uf-layout[data-front-page] .uf-header {
    border-bottom: 1px solid rgba(17, 17, 17, 0.14);
    background: rgba(255, 255, 255, 0.97);
    color: #111;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

body.uf-layout .uf-main-header-row {
    height: 88px;
}

body.uf-layout .uf-main-header-row > .uf-shell {
    height: 100%;
    width: min(calc(100% - 96px), 1344px);
    max-width: 1344px;
}

body.uf-layout .uf-brand {
    color: #111;
    flex: 0 0 auto;
}

body.uf-layout .uf-brand-logo {
    width: clamp(176px, 14vw, 230px);
}

.uf-xpel-nav {
    position: static;
    height: 100%;
    margin-left: auto;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
}

.uf-xpel-nav-item {
    position: static;
    display: flex;
    height: 100%;
    align-items: center;
}

.uf-xpel-nav-link,
.uf-xpel-event-link {
    display: inline-flex;
    min-height: 88px;
    align-items: center;
    justify-content: center;
    color: #111;
    font-family: "Barlow Condensed", "Pretendard", sans-serif;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
    text-transform: none;
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.uf-xpel-nav-link {
    padding: 0 clamp(0.48rem, 0.78vw, 0.92rem);
}

.uf-xpel-direct-link {
    margin-left: 0.1rem;
}

.uf-xpel-auth-link {
    padding-inline: clamp(0.42rem, 0.62vw, 0.74rem);
    font-size: 16px;
}

.uf-xpel-event-link {
    min-height: 34px;
    margin-left: 0.72rem;
    padding: 0 0.62rem;
    border: 2px solid #111;
    font-size: 17px;
    font-weight: 900;
}

.uf-xpel-nav-link:hover,
.uf-xpel-nav-link:focus-visible,
.uf-xpel-nav-item:hover > .uf-xpel-nav-link,
.uf-xpel-nav-item:focus-within > .uf-xpel-nav-link,
.uf-xpel-event-link:hover,
.uf-xpel-event-link:focus-visible {
    color: #111;
    outline: none;
    background: rgba(201, 167, 255, 0.16);
}

.uf-xpel-event-link:hover,
.uf-xpel-event-link:focus-visible {
    border-color: var(--uf-accent);
}

.uf-xpel-menu {
    position: absolute;
    top: calc(100% - 1px);
    left: 0;
    z-index: 45;
    width: 100%;
    min-height: 232px;
    color: #111;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(34px);
    border-top: 1px solid rgba(17, 17, 17, 0.12);
    border-bottom: 1px solid rgba(17, 17, 17, 0.12);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.18);
    transition:
        opacity 0.24s ease,
        visibility 0.24s ease,
        transform 0.36s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.uf-xpel-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -18px;
    height: 18px;
}

.uf-xpel-nav-item:hover .uf-xpel-menu,
.uf-xpel-nav-item:focus-within .uf-xpel-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.uf-xpel-menu-inner {
    width: min(calc(100% - 206px), 1234px) !important;
    max-width: 1234px !important;
    padding-top: 48px;
    padding-bottom: 52px;
}

.uf-xpel-menu-block {
    min-width: 0;
}

.uf-xpel-menu-block h3 {
    margin: 0 0 1.02rem;
    color: #111;
    font-family: "Barlow Condensed", "Pretendard", sans-serif;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.15;
}

.uf-xpel-menu-block ul {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.uf-xpel-menu-block a {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    color: #1a1a1a;
    font-family: "Inter", "Pretendard", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.25;
    transition: color 0.18s ease, transform 0.18s ease;
}

.uf-xpel-menu-block a:hover,
.uf-xpel-menu-block a:focus-visible {
    color: #6f40bb;
    outline: none;
    transform: translateX(4px);
}

.uf-xpel-subheads {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 0.34rem;
    color: #111;
    font-family: "Inter", "Pretendard", sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}

.uf-xpel-technology-groups {
    display: grid;
    gap: 1.35rem;
}

.uf-xpel-technology-group h4 {
    margin: 0 0 0.45rem;
    color: rgba(245, 245, 245, 0.62);
    font-family: "Inter", "Pretendard", sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.mobile-nav-film-technology {
    display: block;
    margin: 0.8rem 0 0.2rem;
    color: rgba(245, 245, 245, 0.58);
    font-size: 0.72rem;
    font-weight: 800;
}


.uf-xpel-two-col,
.uf-xpel-product-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
}

.uf-xpel-menu-item-wide {
    grid-column: 1 / -1;
}

.uf-xpel-menu-item-wide a {
    width: 100%;
    white-space: normal;
    word-break: keep-all;
}

.uf-xpel-film-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.55fr 0.95fr;
    gap: 34px;
}

.uf-xpel-menu-story,
.uf-xpel-menu-ppf,
.uf-xpel-menu-service,
.uf-xpel-menu-support {
    display: grid;
    grid-template-columns: minmax(220px, 360px) 1fr;
    gap: 40px;
}

.uf-xpel-menu-ppf .uf-xpel-menu-block,
.uf-xpel-menu-service .uf-xpel-menu-block,
.uf-xpel-menu-support .uf-xpel-menu-block,
.uf-xpel-menu-story .uf-xpel-menu-block {
    max-width: 360px;
}

body.uf-layout .uf-header .uf-icon-button {
    border-color: rgba(17, 17, 17, 0.18);
    background: rgba(17, 17, 17, 0.04);
}

body.uf-layout .uf-header .uf-icon-button span {
    background: #111;
}

@media (max-width: 1280px) {
    .uf-xpel-nav-link {
        padding: 0 0.46rem;
        font-size: 16px;
    }

    .uf-xpel-event-link {
        margin-left: 0.42rem;
        font-size: 16px;
    }
}

@media (max-width: 1023px) {
    body.uf-layout .uf-main-header-row > .uf-shell {
        width: min(calc(100% - 2rem), 1344px);
    }
}

/* KAION SHIELD dynamic content polish */
.ppf-brand-logo-card {
    width: min(100%, 620px);
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.ppf-brand-logo-card img {
    filter: drop-shadow(0 22px 42px rgba(0, 0, 0, 0.42));
}

.ppf-story-copy,
.ppf-section-head p:not(.uf-kicker),
.ppf-studio-copy p,
.ppf-studio-copy li,
.ppf-category-products-head span,
.ppf-series-head span,
.ppf-rich-detail,
.ppf-product-desc {
    word-break: keep-all;
    overflow-wrap: break-word;
}

.ppf-category-tab strong,
.ppf-category-tab span,
.ppf-series-tab strong,
.ppf-roll-name,
.ppf-product-korean,
.ppf-product-legacy,
.ppf-roll-specs dd,
.ppf-spec-list dd {
    word-break: keep-all;
    overflow-wrap: break-word;
    hyphens: none;
}

.ppf-roll-list {
    grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
    gap: clamp(0.85rem, 1.2vw, 1.2rem);
}

.ppf-roll-item {
    display: grid;
    align-content: start;
    min-height: 100%;
    padding: 0.78rem;
    border: 1px solid rgba(185, 206, 240, 0.13);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.035);
}

.ppf-roll-item:hover,
.ppf-roll-item:focus-within {
    border-color: rgba(201, 167, 255, 0.42);
    background: rgba(201, 167, 255, 0.07);
}

.ppf-roll-media {
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.ppf-roll-media img,
.ppf-roll-media span {
    aspect-ratio: 1 / 0.82;
}

.ppf-roll-copy {
    margin-top: 0.68rem;
    text-align: left;
}

.ppf-roll-code,
.ppf-roll-copy p.ppf-roll-code {
    color: rgba(201, 220, 255, 0.9);
    font-size: 0.64rem;
    line-height: 1.3;
}

.ppf-roll-name,
.ppf-roll-copy h5 {
    color: #fff;
    font-size: clamp(0.82rem, 0.78vw, 0.96rem);
    line-height: 1.35;
}

.ppf-product-korean,
.ppf-product-legacy {
    display: block;
    margin-top: 0.24rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.72rem;
    font-weight: 720;
    line-height: 1.35;
}

.ppf-product-legacy {
    color: rgba(201, 220, 255, 0.62);
}

.ppf-roll-specs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.22rem;
    margin-top: 0.62rem;
}

.ppf-roll-specs div {
    display: grid;
    grid-template-columns: minmax(58px, 0.45fr) minmax(0, 1fr);
    justify-content: stretch;
    gap: 0.42rem;
    padding-top: 0.22rem;
    border-top: 1px solid rgba(185, 206, 240, 0.1);
    text-align: left;
}

.ppf-roll-specs dt,
.ppf-roll-specs dd {
    font-size: 0.62rem;
    line-height: 1.35;
}

.ppf-product-desc {
    display: -webkit-box;
    margin-top: 0.72rem !important;
    color: rgba(255, 255, 255, 0.58) !important;
    font-family: "Inter", "Pretendard", sans-serif !important;
    font-size: 0.72rem !important;
    font-weight: 650 !important;
    line-height: 1.58 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ppf-roll-detail {
    display: block;
    margin-top: 0.75rem;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.74rem;
    line-height: 1.58;
    white-space: pre-line;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.ppf-rich-detail {
    white-space: pre-line;
}

.ppf-spec-list dd {
    font-size: clamp(0.92rem, 1.05vw, 1.12rem);
}

.ppf-empty-series strong,
.ppf-empty-series span {
    word-break: keep-all;
}

@media (max-width: 760px) {
    .ppf-roll-list {
        grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    }

    .ppf-product-desc {
        -webkit-line-clamp: 4;
    }
}

/* KAION SHIELD product card line-wrap fix */
.ppf-roll-item {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
}

.ppf-roll-copy {
    width: 100%;
}

.ppf-roll-specs div {
    grid-template-columns: minmax(72px, 0.4fr) minmax(0, 1fr);
}

.ppf-product-desc {
    max-height: calc(1.58em * 3);
    -webkit-line-clamp: 3;
}

@media (max-width: 760px) {
    .ppf-roll-list {
        grid-template-columns: 1fr !important;
    }

    .ppf-product-desc {
        max-height: calc(1.58em * 3);
        -webkit-line-clamp: 3;
    }
}

/* KAION SHIELD simplified roll cards */
.ppf-roll-copy {
    margin-top: 0.75rem;
    text-align: center;
}

.ppf-roll-name,
.ppf-roll-copy h5 {
    margin: 0;
    font-size: clamp(0.9rem, 0.86vw, 1.02rem);
    line-height: 1.35;
}
.ppf-roll-copy .ppf-roll-code {
    margin: 0.32rem 0 0;
    color: rgba(201, 220, 255, 0.68);
    font-size: 0.68rem;
    font-weight: 720;
    line-height: 1.25;
    letter-spacing: 0.02em;
}
/* KAION SHIELD brand slogan sizing */
.ppf-story-brand h2 {
    max-width: 100%;
    font-size: clamp(1.05rem, 2.1vw, 2.05rem);
    line-height: 1.18;
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
}
/* KAION SHIELD product data heading sizing */
.ppf-data-section .ppf-section-head h2 {
    max-width: 900px;
    font-size: clamp(1.35rem, 2.5vw, 2.35rem);
    line-height: 1.22;
    word-break: keep-all;
}

.ppf-data-section .ppf-section-head p:not(.uf-kicker) {
    max-width: 820px;
    font-size: 0.95rem;
    line-height: 1.68;
}
/* KAION SHIELD technology heading sizing */
.ppf-tech-section .ppf-section-head h2 {
    max-width: 900px;
    font-size: clamp(1.35rem, 2.45vw, 2.35rem);
    line-height: 1.22;
    word-break: keep-all;
}
/* KAION SHIELD compact front typography */
.ppf-page .ppf-hero h1 {
    font-size: clamp(3rem, 6.6vw, 6.1rem);
    line-height: 0.92;
}

.ppf-page .ppf-hero-index strong {
    font-size: clamp(1.35rem, 2vw, 1.72rem);
}

.ppf-page .ppf-section-head h2,
.ppf-page .ppf-studio-grid h2 {
    max-width: 900px;
    font-size: clamp(1.3rem, 2.3vw, 2.2rem);
    line-height: 1.24;
    word-break: keep-all;
}

.ppf-page .ppf-story-brand h2 {
    max-width: 100%;
    font-size: clamp(1.02rem, 2vw, 1.9rem);
    line-height: 1.18;
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
}

.ppf-page .ppf-section-head p:not(.uf-kicker),
.ppf-page .ppf-story-copy,
.ppf-page .ppf-studio-copy p,
.ppf-page .ppf-studio-copy li {
    font-size: 0.94rem;
    line-height: 1.68;
}

.ppf-page .ppf-line-card strong {
    font-size: clamp(1.08rem, 1.55vw, 1.38rem);
    line-height: 1.18;
}

.ppf-page .ppf-product-card h3 {
    font-size: clamp(1rem, 1.45vw, 1.18rem);
}

.ppf-page .ppf-category-products-head h3 {
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
}

/* Customer palette layer: lavender / black */
body.uf-layout {
    --uf-bg: rgb(12, 12, 12);
    --uf-bg-soft: rgb(18, 15, 22);
    --uf-section-black: rgb(12, 12, 12);
    --uf-section-lavender: rgb(200, 160, 255);
    --uf-text: rgb(245, 245, 245);
    --uf-text-strong: rgb(245, 245, 245);
    --uf-text-soft: rgb(190, 195, 200);
    --uf-muted: rgba(190, 195, 200, 0.76);
    --uf-faint: rgba(190, 195, 200, 0.52);
    --uf-accent: rgb(200, 160, 255);
    --uf-accent-strong: rgb(226, 207, 255);
    --uf-line: rgba(190, 195, 200, 0.18);
    --uf-line-strong: rgba(200, 160, 255, 0.52);
    --uf-panel: rgba(245, 245, 245, 0.055);
    --uf-panel-strong: rgba(245, 245, 245, 0.09);
    --uf-on-accent: rgb(12, 12, 12);
    background:
        linear-gradient(180deg, rgba(200, 160, 255, 0.12) 0, rgba(12, 12, 12, 0) 34rem),
        var(--uf-section-black) !important;
    color: var(--uf-text) !important;
}

body.uf-layout::selection {
    color: var(--uf-on-accent);
    background: var(--uf-accent);
}

body.uf-layout #front-main,
body.uf-layout .ppf-page,
body.uf-layout .product-page-front,
body.uf-layout .front-content-page,
body.uf-layout .gallery-page,
body.uf-layout .gallery-view-page,
body.uf-layout .map-page,
body.uf-layout .warranty-search-page {
    background: var(--uf-section-black) !important;
    color: var(--uf-text) !important;
}

body.uf-layout #front-main > section:nth-of-type(odd),
body.uf-layout .front-content-page,
body.uf-layout .gallery-page,
body.uf-layout .gallery-view-page,
body.uf-layout .map-page,
body.uf-layout .warranty-search-page,
body.uf-layout .product-page-front,
body.uf-layout .ppf-page {
    background:
        linear-gradient(180deg, rgba(200, 160, 255, 0.12) 0, rgba(12, 12, 12, 0) 24rem),
        var(--uf-section-black) !important;
}

body.uf-layout #front-main > section:nth-of-type(even),
body.uf-layout .uf-action-band,
body.uf-layout .uf-product-hub,
body.uf-layout .uf-tech-band,
body.uf-layout .uf-about-band,
body.uf-layout .ppf-section:nth-of-type(even),
body.uf-layout .ppf-studio-section {
    background:
        linear-gradient(135deg, rgba(12, 12, 12, 0.72) 0%, rgba(12, 12, 12, 0.9) 56%, rgba(12, 12, 12, 0.98) 100%),
        var(--uf-section-lavender) !important;
    color: var(--uf-text) !important;
}

body.uf-layout .uf-section,
body.uf-layout .ppf-section,
body.uf-layout .front-content-page,
body.uf-layout .gallery-page,
body.uf-layout .gallery-view-page,
body.uf-layout .map-page,
body.uf-layout .warranty-search-page,
body.uf-layout .product-page-section,
body.uf-layout .product-page-feature,
body.uf-layout .product-page-ending {
    position: relative;
}

body.uf-layout .uf-section::before,
body.uf-layout .ppf-section::before,
body.uf-layout .front-content-page::before,
body.uf-layout .gallery-page::before,
body.uf-layout .gallery-view-page::before,
body.uf-layout .map-page::before,
body.uf-layout .warranty-search-page::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(200, 160, 255, 0.72), transparent);
    opacity: 0.68;
}

body.uf-layout .uf-stage-grid {
    background-image:
        linear-gradient(rgba(200, 160, 255, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(190, 195, 200, 0.035) 1px, transparent 1px) !important;
    opacity: 0.9;
}

body.uf-layout .uf-header,
body.uf-layout .uf-header.is-scrolled,
body.uf-layout:not([data-front-page]) .uf-header:hover,
body.uf-layout[data-front-page] .uf-header {
    border-bottom: 1px solid rgba(200, 160, 255, 0.26) !important;
    background: rgba(12, 12, 12, 0.9) !important;
    color: var(--uf-text) !important;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28) !important;
}

body.uf-layout .uf-brand,
body.uf-layout .uf-brand-logo,
body.uf-layout .uf-xpel-nav-link,
body.uf-layout .uf-xpel-event-link,
body.uf-layout .uf-mobile-nav a,
body.uf-layout .mobile-nav-link {
    color: var(--uf-text) !important;
    fill: var(--uf-text) !important;
}

body.uf-layout .text-rainbow-gold,
body.uf-layout .front-content-kicker,
body.uf-layout .product-page-kicker,
body.uf-layout .product-page-label,
body.uf-layout .gallery-view-content a,
body.uf-layout .map-shop-phone,
body.uf-layout .info-window-title,
body.uf-layout .uf-kicker,
body.uf-layout .uf-menu-title,
body.uf-layout .ppf-page .uf-kicker,
body.uf-layout .ppf-page .uf-menu-title,
body.uf-layout .ppf-roll-code,
body.uf-layout .ppf-roll-copy .ppf-roll-code {
    color: var(--uf-accent) !important;
    fill: var(--uf-accent) !important;
}

body.uf-layout h1,
body.uf-layout h2,
body.uf-layout h3,
body.uf-layout h4,
body.uf-layout h5,
body.uf-layout .text-white,
body.uf-layout .uf-section-heading h2,
body.uf-layout .uf-tech-grid h2,
body.uf-layout .uf-about-head h2,
body.uf-layout .uf-product-hub .uf-section-heading h2,
body.uf-layout .uf-action-card strong,
body.uf-layout .uf-family-card h3,
body.uf-layout .uf-package-card h3,
body.uf-layout .uf-product-card h3,
body.uf-layout .uf-trust-card strong,
body.uf-layout .ppf-section-head h2,
body.uf-layout .ppf-story-grid h2,
body.uf-layout .ppf-studio-grid h2,
body.uf-layout .ppf-line-card strong,
body.uf-layout .ppf-product-card h3,
body.uf-layout .ppf-tech-card strong,
body.uf-layout .ppf-category-products-head h3,
body.uf-layout .ppf-series-head h4,
body.uf-layout .ppf-roll-name,
body.uf-layout .ppf-roll-copy h5,
body.uf-layout .warranty-search-head h1,
body.uf-layout .warranty-search-card h2,
body.uf-layout .warranty-results-head h2,
body.uf-layout .warranty-empty-state strong,
body.uf-layout .front-content-title,
body.uf-layout .contact-pane-title,
body.uf-layout .gallery-view-content h1,
body.uf-layout .gallery-view-content h2,
body.uf-layout .gallery-view-content h3,
body.uf-layout .gallery-view-content h4,
body.uf-layout .map-shop-name {
    color: var(--uf-text) !important;
}

body.uf-layout [class*="text-white/"],
body.uf-layout .text-gray-400,
body.uf-layout .uf-hero p:not(.uf-kicker),
body.uf-layout .uf-action-card em,
body.uf-layout .uf-family-card p:not(.uf-kicker),
body.uf-layout .uf-package-card ul,
body.uf-layout .uf-product-card p:not(.uf-kicker),
body.uf-layout .uf-tech-grid p:not(.uf-kicker),
body.uf-layout .uf-about-grid p,
body.uf-layout .uf-trust-card em,
body.uf-layout .uf-footer p,
body.uf-layout .uf-footer a,
body.uf-layout .front-content-subtitle,
body.uf-layout .front-page-copy,
body.uf-layout .gallery-view-content,
body.uf-layout .gallery-view-chip,
body.uf-layout .gallery-label,
body.uf-layout .gallery-reset,
body.uf-layout .gallery-chip,
body.uf-layout .map-field-label,
body.uf-layout .map-status,
body.uf-layout .map-category-chip,
body.uf-layout .map-shop-business,
body.uf-layout .map-shop-address,
body.uf-layout .map-shop-meta,
body.uf-layout .map-empty-state,
body.uf-layout .map-pagination-summary,
body.uf-layout .warranty-search-head p:not(.uf-kicker),
body.uf-layout .warranty-label,
body.uf-layout .warranty-result-meta span,
body.uf-layout .warranty-result-meta strong,
body.uf-layout .warranty-results-head p,
body.uf-layout .warranty-empty-state span,
body.uf-layout .contact-pane-copy,
body.uf-layout .contact-label,
body.uf-layout .ppf-section-head p:not(.uf-kicker),
body.uf-layout .ppf-story-copy,
body.uf-layout .ppf-studio-copy p,
body.uf-layout .ppf-studio-copy li,
body.uf-layout .ppf-line-card em,
body.uf-layout .ppf-category-tab,
body.uf-layout .ppf-category-tab span,
body.uf-layout .ppf-category-products-head span,
body.uf-layout .ppf-series-head span,
body.uf-layout .ppf-spec-list dt,
body.uf-layout .ppf-rich-detail,
body.uf-layout .ppf-product-desc,
body.uf-layout .ppf-roll-detail,
body.uf-layout .ppf-product-korean,
body.uf-layout .ppf-product-legacy {
    color: var(--uf-text-soft) !important;
}

body.uf-layout [class*="bg-white/"],
body.uf-layout [class*="bg-rainbow-gray"],
body.uf-layout .uf-hero-index div,
body.uf-layout .uf-action-card,
body.uf-layout .uf-family-card,
body.uf-layout .uf-package-card,
body.uf-layout .uf-product-card,
body.uf-layout .uf-trust-card,
body.uf-layout .gallery-filter-shell,
body.uf-layout .gallery-card,
body.uf-layout .gallery-chip,
body.uf-layout .gallery-view-meta-card,
body.uf-layout .gallery-view-chip,
body.uf-layout .gallery-back-link,
body.uf-layout .map-control-panel,
body.uf-layout .map-results-panel,
body.uf-layout .map-category-chip,
body.uf-layout .map-shop-item,
body.uf-layout .map-page-button,
body.uf-layout .map-page-ellipsis,
body.uf-layout .warranty-search-card,
body.uf-layout .warranty-result-card,
body.uf-layout .warranty-empty-state,
body.uf-layout .warranty-link-button,
body.uf-layout .contact-form-wrapper,
body.uf-layout .ppf-hero-index div,
body.uf-layout .ppf-line-card,
body.uf-layout .ppf-product-card,
body.uf-layout .ppf-color-panel,
body.uf-layout .ppf-tech-card,
body.uf-layout .ppf-studio-copy,
body.uf-layout .ppf-category-tab,
body.uf-layout .ppf-category-products,
body.uf-layout .ppf-series-products,
body.uf-layout .ppf-series-selector,
body.uf-layout .ppf-series-tab,
body.uf-layout .ppf-roll-item,
body.uf-layout .ppf-series-panel,
body.uf-layout .ppf-spec-list div,
body.uf-layout .ppf-empty-series,
body.uf-layout .auto-film-info-panel,
body.uf-layout .auto-film-main-item,
body.uf-layout .auto-film-sub-group {
    border-color: var(--uf-line) !important;
    background: rgba(245, 245, 245, 0.055) !important;
    color: var(--uf-text) !important;
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.22);
}

body.uf-layout .uf-family-card,
body.uf-layout .uf-action-card,
body.uf-layout .uf-product-hub,
body.uf-layout .ppf-brand-logo-card {
    color: var(--uf-text) !important;
}

body.uf-layout .uf-family-card .uf-card-link {
    color: var(--uf-accent) !important;
    border-bottom-color: currentColor;
}

body.uf-layout .uf-family-card .uf-card-link:hover,
body.uf-layout .uf-family-card .uf-card-link:focus-visible {
    color: #ffffff !important;
    outline: none;
}

body.uf-layout .uf-xpel-menu,
body.uf-layout .uf-mega-menu,
body.uf-layout .mega-menu,
body.uf-layout .uf-mobile-drawer,
body.uf-layout .uf-drawer-panel {
    border-color: rgba(200, 160, 255, 0.22) !important;
    background: rgba(12, 12, 12, 0.96) !important;
    color: var(--uf-text) !important;
    box-shadow: 0 36px 90px rgba(0, 0, 0, 0.44) !important;
}

body.uf-layout .uf-xpel-menu-block h3,
body.uf-layout .uf-xpel-menu-block a,
body.uf-layout .uf-xpel-subheads,
body.uf-layout .uf-product-menu-intro h3,
body.uf-layout .uf-product-menu-links a,
body.uf-layout .uf-product-menu-links span,
body.uf-layout .uf-product-menu-links small,
body.uf-layout .auto-film-page-link,
body.uf-layout .auto-film-main-name,
body.uf-layout .auto-film-main-count {
    color: var(--uf-text) !important;
}

body.uf-layout .uf-xpel-nav-link:hover,
body.uf-layout .uf-xpel-nav-link:focus-visible,
body.uf-layout .uf-xpel-nav-item:hover > .uf-xpel-nav-link,
body.uf-layout .uf-xpel-nav-item:focus-within > .uf-xpel-nav-link,
body.uf-layout .uf-xpel-event-link:hover,
body.uf-layout .uf-xpel-event-link:focus-visible,
body.uf-layout .uf-product-menu-links a:hover,
body.uf-layout .uf-product-menu-links a:focus-visible,
body.uf-layout .uf-xpel-menu-block a:hover,
body.uf-layout .uf-xpel-menu-block a:focus-visible,
body.uf-layout .auto-film-page-link:hover,
body.uf-layout .ppf-category-tab:hover,
body.uf-layout .ppf-category-tab:focus-visible,
body.uf-layout .ppf-category-tab.is-active,
body.uf-layout .ppf-series-tab:hover,
body.uf-layout .ppf-series-tab:focus-visible,
body.uf-layout .ppf-series-tab.is-active {
    color: var(--uf-text) !important;
    border-color: var(--uf-line-strong) !important;
    background: rgba(200, 160, 255, 0.14) !important;
}

body.uf-layout .uf-primary-link,
body.uf-layout .bg-rainbow-gold,
body.uf-layout .gallery-submit,
body.uf-layout .map-search-button,
body.uf-layout .map-page-button.is-active,
body.uf-layout .info-window-route,
body.uf-layout .map-as-badge,
body.uf-layout .info-window-as-badge,
body.uf-layout .map-studio-badge,
body.uf-layout .info-window-studio-badge,
body.uf-layout .warranty-submit,
body.uf-layout .warranty-link-button.is-primary,
body.uf-layout .contact-submit,
body.uf-layout .front-form-alert.is-success,
body.uf-layout .ppf-page .uf-primary-link {
    position: relative;
    overflow: hidden;
    border-color: var(--uf-accent) !important;
    background: var(--uf-accent) !important;
    color: var(--uf-on-accent) !important;
    box-shadow: 0 18px 48px rgba(200, 160, 255, 0.24) !important;
}

body.uf-layout .uf-ghost-link,
body.uf-layout .gallery-reset,
body.uf-layout .gallery-back-link,
body.uf-layout .warranty-link-button,
body.uf-layout .map-page-button {
    border-color: var(--uf-line) !important;
    background: rgba(245, 245, 245, 0.055) !important;
    color: var(--uf-text) !important;
}

body.uf-layout .uf-primary-link::after,
body.uf-layout .gallery-submit::after,
body.uf-layout .map-search-button::after,
body.uf-layout .warranty-submit::after,
body.uf-layout .warranty-link-button.is-primary::after,
body.uf-layout .contact-submit::after {
    content: "";
    position: absolute;
    inset: -55% -80%;
    background: linear-gradient(105deg, transparent 36%, rgba(245, 245, 245, 0.44) 50%, transparent 64%);
    transform: translateX(-120%) rotate(10deg);
    transition: transform 0.58s cubic-bezier(0.22, 0.61, 0.36, 1);
}

body.uf-layout .uf-primary-link:hover::after,
body.uf-layout .gallery-submit:hover::after,
body.uf-layout .map-search-button:hover::after,
body.uf-layout .warranty-submit:hover::after,
body.uf-layout .warranty-link-button.is-primary:hover::after,
body.uf-layout .contact-submit:hover::after {
    transform: translateX(120%) rotate(10deg);
}

body.uf-layout .uf-primary-link > *,
body.uf-layout .gallery-submit > *,
body.uf-layout .map-search-button > *,
body.uf-layout .warranty-submit > *,
body.uf-layout .warranty-link-button.is-primary > *,
body.uf-layout .contact-submit > * {
    position: relative;
    z-index: 1;
}

body.uf-layout .uf-hero-shade,
body.uf-layout .gallery-view-hero::after,
body.uf-layout .product-page-hero,
body.uf-layout .product-page-feature,
body.uf-layout .product-page-ending,
body.uf-layout .ppf-hero {
    background-image:
        linear-gradient(90deg, rgba(12, 12, 12, 0.94), rgba(12, 12, 12, 0.5) 52%, rgba(12, 12, 12, 0.9)),
        linear-gradient(180deg, rgba(200, 160, 255, 0.2), rgba(12, 12, 12, 0.95)) !important;
}

body.uf-layout .product-page-hero,
body.uf-layout .product-page-feature,
body.uf-layout .product-page-ending {
    background-image:
        linear-gradient(90deg, rgba(12, 12, 12, 0.94), rgba(12, 12, 12, 0.56) 52%, rgba(12, 12, 12, 0.9)),
        linear-gradient(180deg, rgba(200, 160, 255, 0.18), rgba(12, 12, 12, 0.96)),
        var(--front-hero-image) !important;
}

body.uf-layout .product-page-feature {
    background-image:
        linear-gradient(90deg, rgba(12, 12, 12, 0.94), rgba(12, 12, 12, 0.58)),
        linear-gradient(180deg, rgba(200, 160, 255, 0.16), rgba(12, 12, 12, 0.94)),
        var(--front-feature-image) !important;
}

body.uf-layout .product-page-ending {
    background-image:
        linear-gradient(180deg, rgba(12, 12, 12, 0.42), rgba(12, 12, 12, 0.96)),
        linear-gradient(90deg, rgba(200, 160, 255, 0.18), rgba(12, 12, 12, 0)),
        var(--front-ending-image) !important;
}

body.uf-layout .uf-hero h1,
body.uf-layout .ppf-hero h1,
body.uf-layout .product-page-title {
    text-shadow: 0 0 32px rgba(200, 160, 255, 0.22);
}

body.uf-layout .uf-family-card:hover,
body.uf-layout .uf-package-card:hover,
body.uf-layout .uf-product-card:hover,
body.uf-layout .uf-trust-card:hover,
body.uf-layout .gallery-card:hover,
body.uf-layout .map-shop-item:hover,
body.uf-layout .product-page-card:hover,
body.uf-layout .ppf-line-card:hover,
body.uf-layout .ppf-product-card:hover,
body.uf-layout .ppf-tech-card:hover,
body.uf-layout .ppf-roll-item:hover,
body.uf-layout .ppf-roll-item:focus-within {
    transform: translateY(-4px) !important;
    border-color: var(--uf-line-strong) !important;
    background: rgba(200, 160, 255, 0.105) !important;
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(200, 160, 255, 0.1) !important;
}

body.uf-layout .gallery-input,
body.uf-layout .gallery-select,
body.uf-layout .map-select,
body.uf-layout .warranty-input,
body.uf-layout .contact-input,
body.uf-layout .contact-select,
body.uf-layout .contact-textarea {
    border-color: var(--uf-line) !important;
    background-color: rgba(12, 12, 12, 0.58) !important;
    color: var(--uf-text) !important;
}

body.uf-layout .gallery-input:focus,
body.uf-layout .gallery-select:focus,
body.uf-layout .map-select:focus,
body.uf-layout .warranty-input:focus,
body.uf-layout .contact-input:focus,
body.uf-layout .contact-select:focus,
body.uf-layout .contact-textarea:focus,
body.uf-layout .focus\:border-rainbow-gold:focus {
    border-color: rgba(200, 160, 255, 0.82) !important;
    box-shadow: 0 0 0 4px rgba(200, 160, 255, 0.14) !important;
}

body.uf-layout .gallery-select,
body.uf-layout .map-select,
body.uf-layout .contact-select {
    background-image:
        linear-gradient(45deg, transparent 50%, rgba(200, 160, 255, 0.95) 50%),
        linear-gradient(135deg, rgba(200, 160, 255, 0.95) 50%, transparent 50%) !important;
}

body.uf-layout .gallery-select option,
body.uf-layout .map-select option,
body.uf-layout .contact-select option {
    color: var(--uf-text) !important;
    background: var(--uf-section-black) !important;
}

body.uf-layout [class*="border-white/"],
body.uf-layout .border-rainbow-gold,
body.uf-layout .gallery-input:focus,
body.uf-layout .gallery-select:focus,
body.uf-layout .map-select:focus,
body.uf-layout .product-page-table-wrap,
body.uf-layout .product-page-table th,
body.uf-layout .product-page-table td,
body.uf-layout .product-page-metric,
body.uf-layout .product-page-card,
body.uf-layout .gallery-view-content img,
body.uf-layout .gallery-view-content blockquote,
body.uf-layout .warranty-results-head,
body.uf-layout .map-category-legend,
body.uf-layout .map-pagination,
body.uf-layout .ppf-series-head--compact,
body.uf-layout .ppf-rich-detail {
    border-color: var(--uf-line) !important;
}

body.uf-layout .product-page-table,
body.uf-layout .product-page-metric,
body.uf-layout .product-page-card,
body.uf-layout .gallery-view-content blockquote,
body.uf-layout .warranty-error,
body.uf-layout .front-form-alert.is-error,
body.uf-layout .contact-error ul {
    background: rgba(200, 160, 255, 0.08) !important;
    color: var(--uf-text) !important;
}

body.uf-layout .product-page-table td,
body.uf-layout .product-page-subtitle,
body.uf-layout .product-page-copy,
body.uf-layout .product-page-section p,
body.uf-layout .product-page-ending p,
body.uf-layout .product-page-card span,
body.uf-layout .product-page-metric span,
body.uf-layout .product-page-metric small {
    color: var(--uf-text-soft) !important;
}

body.uf-layout .product-page-table td:first-child,
body.uf-layout .product-page-metric strong,
body.uf-layout .product-page-card strong,
body.uf-layout .product-page-table th,
body.uf-layout .product-page-name,
body.uf-layout .warranty-result-code {
    color: var(--uf-accent) !important;
}

body.uf-layout .uf-icon-button,
body.uf-layout .uf-header .uf-icon-button {
    border-color: rgba(200, 160, 255, 0.28) !important;
    background: rgba(245, 245, 245, 0.06) !important;
}

body.uf-layout .uf-icon-button span,
body.uf-layout .uf-header .uf-icon-button span,
body.uf-layout .uf-close-button::before,
body.uf-layout .uf-close-button::after {
    background: var(--uf-text) !important;
}

body.uf-layout .from-black,
body.uf-layout [class*="from-black"] {
    --tw-gradient-from: rgba(12, 12, 12, 0.88) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgba(12, 12, 12, 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

body.uf-layout [class*="via-black"] {
    --tw-gradient-to: rgba(12, 12, 12, 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), rgba(12, 12, 12, 0.72) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

body.uf-layout [class*="to-[#050507]"] {
    --tw-gradient-to: rgb(12, 12, 12) var(--tw-gradient-to-position) !important;
}

body.uf-layout .ppf-vehicle-silhouette::before,
body.uf-layout .ppf-vehicle-silhouette::after,
body.uf-layout .ppf-vehicle-silhouette span {
    border-color: rgba(200, 160, 255, 0.46) !important;
}

body.uf-layout .ppf-vehicle-silhouette span:nth-child(3) {
    background: linear-gradient(90deg, transparent, rgba(200, 160, 255, 0.88), transparent) !important;
}

body.uf-layout .uf-footer {
    background: var(--uf-section-black) !important;
}

@media (prefers-reduced-motion: reduce) {
    body.uf-layout .uf-primary-link::after,
    body.uf-layout .gallery-submit::after,
    body.uf-layout .map-search-button::after,
    body.uf-layout .warranty-submit::after,
    body.uf-layout .warranty-link-button.is-primary::after,
    body.uf-layout .contact-submit::after {
        transition: none;
    }

    body.uf-layout .uf-family-card:hover,
    body.uf-layout .uf-package-card:hover,
    body.uf-layout .uf-product-card:hover,
    body.uf-layout .uf-trust-card:hover,
    body.uf-layout .gallery-card:hover,
    body.uf-layout .map-shop-item:hover,
    body.uf-layout .product-page-card:hover,
    body.uf-layout .ppf-line-card:hover,
    body.uf-layout .ppf-product-card:hover,
    body.uf-layout .ppf-tech-card:hover,
    body.uf-layout .ppf-roll-item:hover,
    body.uf-layout .ppf-roll-item:focus-within {
        transform: none !important;
    }
}


/* Customer palette variable bridge */
body.uf-layout .ppf-page {
    --ppf-accent: var(--uf-accent) !important;
    --ppf-accent-soft: rgba(200, 160, 255, 0.16) !important;
    --ppf-panel: rgba(245, 245, 245, 0.055) !important;
    --ppf-border: var(--uf-line) !important;
}

body.uf-layout [class*="bg-rainbow-gold/"] {
    background-color: rgba(200, 160, 255, 0.12) !important;
}

body.uf-layout [class*="border-rainbow-gold/"] {
    border-color: rgba(200, 160, 255, 0.34) !important;
}

body.uf-layout .uf-primary-link::after,
body.uf-layout .gallery-submit::after,
body.uf-layout .map-search-button::after,
body.uf-layout .warranty-submit::after,
body.uf-layout .warranty-link-button.is-primary::after,
body.uf-layout .contact-submit::after {
    pointer-events: none;
}


/* Hero media clarity pass */
body.uf-layout .uf-hero-shade {
    background:
        linear-gradient(90deg, rgba(12, 12, 12, 0.62) 0%, rgba(12, 12, 12, 0.18) 52%, rgba(12, 12, 12, 0.54) 100%),
        linear-gradient(180deg, rgba(200, 160, 255, 0.12) 0%, rgba(12, 12, 12, 0.5) 92%) !important;
}

body.uf-layout .uf-hero-media video {
    opacity: 1 !important;
    filter: brightness(1.16) saturate(1.08) contrast(1.04);
}

body.uf-layout .gallery-view-hero img,
body.uf-layout .map-hero img {
    opacity: 0.68 !important;
    filter: brightness(1.12) saturate(1.08) contrast(1.03);
}

body.uf-layout .gallery-view-hero::after {
    background:
        linear-gradient(180deg, rgba(12, 12, 12, 0.14) 0%, rgba(12, 12, 12, 0.42) 62%, rgba(12, 12, 12, 0.78) 100%),
        linear-gradient(90deg, rgba(12, 12, 12, 0.52), rgba(12, 12, 12, 0.06)) !important;
}

body.uf-layout .product-page-hero {
    background-image:
        linear-gradient(90deg, rgba(12, 12, 12, 0.62), rgba(12, 12, 12, 0.2) 52%, rgba(12, 12, 12, 0.52)),
        linear-gradient(180deg, rgba(200, 160, 255, 0.12), rgba(12, 12, 12, 0.58)),
        var(--front-hero-image) !important;
}

body.uf-layout .product-page-feature {
    background-image:
        linear-gradient(90deg, rgba(12, 12, 12, 0.64), rgba(12, 12, 12, 0.22)),
        linear-gradient(180deg, rgba(200, 160, 255, 0.1), rgba(12, 12, 12, 0.58)),
        var(--front-feature-image) !important;
}

body.uf-layout .product-page-ending {
    background-image:
        linear-gradient(180deg, rgba(12, 12, 12, 0.22), rgba(12, 12, 12, 0.66)),
        linear-gradient(90deg, rgba(200, 160, 255, 0.12), rgba(12, 12, 12, 0)),
        var(--front-ending-image) !important;
}

body.uf-layout .ppf-hero {
    background:
        linear-gradient(110deg, rgba(12, 12, 12, 0.72), rgba(12, 12, 12, 0.36) 52%, rgba(12, 12, 12, 0.78)),
        var(--uf-section-black) !important;
}

body.uf-layout .from-black,
body.uf-layout [class*="from-black"] {
    --tw-gradient-from: rgba(12, 12, 12, 0.56) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgba(12, 12, 12, 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

body.uf-layout [class*="via-black"] {
    --tw-gradient-to: rgba(12, 12, 12, 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), rgba(12, 12, 12, 0.42) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

body.uf-layout [class*="to-[#050507]"] {
    --tw-gradient-to: rgba(12, 12, 12, 0.78) var(--tw-gradient-to-position) !important;
}

body.uf-layout .uf-hero h1,
body.uf-layout .uf-hero p,
body.uf-layout .ppf-hero h1,
body.uf-layout .ppf-hero-lede,
body.uf-layout .product-page-title,
body.uf-layout .product-page-subtitle,
body.uf-layout .map-hero-title,
body.uf-layout .map-hero p,
body.uf-layout .gallery-view-hero h1 {
    text-shadow: 0 2px 22px rgba(0, 0, 0, 0.58), 0 0 24px rgba(200, 160, 255, 0.16);
}


/* PPF selected series panel spacing */
body.uf-layout .ppf-data-section .ppf-category-browser {
    column-gap: clamp(2rem, 3.6vw, 4.25rem) !important;
}

body.uf-layout .ppf-data-section .ppf-series-panel {
    align-self: start;
    padding: clamp(1.25rem, 1.8vw, 2rem) !important;
    margin-left: clamp(0.25rem, 0.9vw, 0.85rem);
    border: 1px solid rgba(190, 195, 200, 0.18) !important;
    border-radius: 4px !important;
    background:
        linear-gradient(145deg, rgba(200, 160, 255, 0.1), rgba(245, 245, 245, 0.045) 48%, rgba(12, 12, 12, 0.2)),
        rgba(245, 245, 245, 0.055) !important;
    box-shadow: 0 28px 86px rgba(0, 0, 0, 0.28) !important;
    overflow: hidden;
}

body.uf-layout .ppf-data-section .ppf-series-panel::before {
    left: clamp(1.25rem, 1.8vw, 2rem) !important;
    right: clamp(1.25rem, 1.8vw, 2rem) !important;
    background: linear-gradient(90deg, rgba(200, 160, 255, 0.82) 0 28%, rgba(190, 195, 200, 0.22) 28% 100%) !important;
}

body.uf-layout .ppf-data-section .ppf-series-head--compact {
    padding: 1.05rem 0 1.1rem !important;
    margin-bottom: 1rem !important;
}

body.uf-layout .ppf-data-section .ppf-spec-list div {
    padding: 1rem 0.85rem 1.1rem !important;
}

body.uf-layout .ppf-data-section .ppf-rich-detail {
    margin-top: 1.1rem !important;
    padding: 1.05rem 0 0 !important;
}

body.uf-layout .ppf-data-section .ppf-data-sheet-list {
    margin-top: 1.1rem;
    padding-top: 1.05rem;
    border-top: 1px solid rgba(190, 195, 200, 0.18);
}

body.uf-layout .ppf-data-section .ppf-data-sheet-title {
    margin: 0 0 0.6rem;
    color: var(--uf-accent);
    font-size: 0.64rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.uf-layout .ppf-data-section .ppf-data-sheet-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

body.uf-layout .ppf-data-section .ppf-data-sheet-links a {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 0.4rem 0.62rem;
    border: 1px solid rgba(190, 195, 200, 0.2);
    border-radius: 3px;
    color: rgba(245, 245, 245, 0.82);
    background: rgba(245, 245, 245, 0.045);
    font-size: 0.72rem;
    font-weight: 760;
    line-height: 1.25;
    overflow-wrap: anywhere;
    transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

body.uf-layout .ppf-data-section .ppf-data-sheet-links a:hover,
body.uf-layout .ppf-data-section .ppf-data-sheet-links a:focus-visible {
    outline: none;
    color: #fff;
    border-color: rgba(200, 160, 255, 0.54);
    background: rgba(200, 160, 255, 0.12);
}

body.uf-layout .ppf-data-section .ppf-series-car-zone {
    display: block !important;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--uf-line) !important;
}

body.uf-layout .ppf-data-section .ppf-series-car-zone .uf-kicker {
    margin-bottom: 0.85rem;
}

body.uf-layout .ppf-data-section .ppf-series-car {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 280px;
    object-fit: cover;
    padding: clamp(0.35rem, 0.7vw, 0.65rem);
    border: 1px solid rgba(190, 195, 200, 0.18) !important;
    border-radius: 4px !important;
    background: rgba(12, 12, 12, 0.42) !important;
    box-shadow: inset 0 0 0 1px rgba(200, 160, 255, 0.08), 0 18px 52px rgba(0, 0, 0, 0.24);
}

/* Persistent KAION SHIELD PPF entry point */
.uf-kaion-float {
    position: fixed;
    top: 58%;
    right: clamp(0.8rem, 1.5vw, 1.5rem);
    z-index: 110;
    display: flex;
    overflow: hidden;
    width: 4.25rem;
    height: 4.25rem;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    box-sizing: border-box;
    border: 1px solid rgba(91, 182, 235, 0.36);
    border-radius: 0.55rem;
    background: rgba(5, 14, 22, 0.94);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.34);
    transform: translateY(-50%);
    will-change: width, transform;
    transition: width 0.42s cubic-bezier(0.22, 1, 0.36, 1), padding 0.32s ease, border-color 0.25s ease, border-radius 0.32s ease, background-color 0.32s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.uf-kaion-float-mark,
.uf-kaion-float-wordmark {
    display: block;
    height: auto;
    transition: opacity 0.28s ease, filter 0.35s ease, transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}

.uf-kaion-float-mark {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    height: 2.7rem;
    margin-inline: auto;
    opacity: 1;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.3));
}

.uf-kaion-float-wordmark {
    position: absolute;
    left: 50%;
    width: auto;
    max-width: calc(100% - 1.5rem);
    height: 2.7rem;
    opacity: 0;
    transform: translateX(calc(-50% + 0.55rem));
}

.uf-kaion-float:hover,
.uf-kaion-float:focus-visible {
    outline: none;
    width: clamp(8.5rem, 10vw, 10.5rem);
    padding: 0 0.75rem;
    border-color: rgba(91, 182, 235, 0.36);
    border-radius: 0.55rem;
    background: rgba(5, 14, 22, 0.94);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.34);
    transform: translateY(-50%) translateX(-0.2rem);
}

.uf-kaion-float:hover .uf-kaion-float-mark,
.uf-kaion-float:focus-visible .uf-kaion-float-mark {
    opacity: 0;
    transform: scale(0.88);
}

.uf-kaion-float:hover .uf-kaion-float-wordmark,
.uf-kaion-float:focus-visible .uf-kaion-float-wordmark {
    opacity: 1;
    filter: none;
    transform: translateX(-50%);
}

@media (max-width: 760px) {
    .uf-kaion-float {
        top: auto;
        right: 0.75rem;
        bottom: max(1rem, env(safe-area-inset-bottom));
        width: 3.7rem;
        height: 3.7rem;
        padding: 0;
        border-radius: 0.5rem;
        transform: none;
    }

    .uf-kaion-float-mark {
        width: auto;
        height: 2.4rem;
    }

    .uf-kaion-float:hover,
    .uf-kaion-float:focus-visible {
        width: 3.7rem;
        padding: 0;
        border-color: rgba(91, 182, 235, 0.5);
        background: rgba(5, 14, 22, 0.96);
        box-shadow: 0 14px 32px rgba(0, 0, 0, 0.36);
        transform: translateY(-0.15rem);
    }

    .uf-kaion-float:hover .uf-kaion-float-mark,
    .uf-kaion-float:focus-visible .uf-kaion-float-mark {
        opacity: 1;
        transform: none;
    }

    .uf-kaion-float-wordmark {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .uf-kaion-float {
        transition: none;
    }

    .uf-kaion-float-mark,
    .uf-kaion-float-wordmark {
        transition: none;
    }
}

@media (max-width: 1180px) {
    body.uf-layout .ppf-data-section .ppf-category-browser {
        column-gap: 1rem !important;
    }

    body.uf-layout .ppf-data-section .ppf-series-panel {
        margin-left: 0;
        margin-top: 0.5rem;
    }
}

@media (max-width: 760px) {
    body.uf-layout .ppf-data-section .ppf-series-panel {
        padding: 1rem !important;
    }

    body.uf-layout .ppf-data-section .ppf-series-panel::before {
        left: 1rem !important;
        right: 1rem !important;
    }

    body.uf-layout .ppf-data-section .ppf-series-car {
        max-height: 220px;
    }
}


/* SPECTRA technology landing showcase */
body.uf-layout .uf-tech-band.uf-tech-band--spectra {
    overflow: hidden;
    border-block: 1px solid rgba(217, 194, 145, 0.28) !important;
    background:
        linear-gradient(135deg, rgba(5, 5, 7, 0.96) 0%, rgba(14, 26, 23, 0.94) 48%, rgba(6, 7, 9, 0.98) 100%),
        #050507 !important;
    isolation: isolate;
}

.uf-tech-band--spectra::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    z-index: -1;
    height: 12rem;
    pointer-events: none;
    background: linear-gradient(0deg, rgba(217, 194, 145, 0.14), rgba(217, 194, 145, 0));
}

.uf-tech-showcase {
    display: grid;
    gap: 2rem;
}

.uf-tech-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(22rem, 0.8fr);
    gap: 2rem;
    align-items: stretch;
}

.uf-tech-copy {
    min-width: 0;
    align-self: center;
}

.uf-tech-headline {
    max-width: 58rem;
    margin: 0;
    color: #fff;
    font-size: 2.35rem;
    font-weight: 950;
    line-height: 1.02;
    letter-spacing: 0;
    word-break: keep-all;
}

.uf-tech-headline .line {
    overflow: hidden;
}

.uf-tech-headline .word {
    will-change: transform, opacity, filter;
}

.uf-tech-lead {
    max-width: 52rem;
    margin: 1.5rem 0 0;
    color: rgba(245, 245, 245, 0.76);
    font-size: 1.04rem;
    font-weight: 650;
    line-height: 1.82;
    word-break: keep-all;
}

.uf-tech-proof-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    max-width: 46rem;
    margin-top: 2rem;
}

.uf-tech-proof-row span {
    min-height: 3.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(217, 194, 145, 0.28);
    border-radius: 4px;
    color: rgba(245, 245, 245, 0.86);
    background: rgba(245, 245, 245, 0.055);
    font-family: Orbitron, sans-serif;
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.uf-tech-spectrum-panel {
    position: relative;
    min-height: 34rem;
    overflow: hidden;
    border: 1px solid rgba(217, 194, 145, 0.24);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(245, 245, 245, 0.08), rgba(245, 245, 245, 0.02)),
        linear-gradient(135deg, rgba(34, 48, 43, 0.96), rgba(5, 5, 7, 0.98));
    box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.28);
}

.uf-tech-spectrum-panel::before {
    content: "";
    position: absolute;
    inset: 1.25rem;
    border: 1px solid rgba(245, 245, 245, 0.1);
    border-radius: 6px;
    pointer-events: none;
}

.uf-tech-spectrum-grid {
    position: absolute;
    inset: -12% -18%;
    background-image:
        repeating-linear-gradient(90deg, rgba(217, 194, 145, 0.2) 0 1px, transparent 1px 4.6rem),
        repeating-linear-gradient(0deg, rgba(245, 245, 245, 0.08) 0 1px, transparent 1px 4.6rem),
        linear-gradient(115deg, transparent 8%, rgba(124, 217, 187, 0.18) 36%, rgba(217, 194, 145, 0.2) 52%, transparent 72%);
    transform: skewX(-10deg);
    opacity: 0.72;
}

.uf-tech-metric-stack {
    position: relative;
    z-index: 1;
    height: 100%;
    min-height: 34rem;
    display: grid;
    align-content: center;
    gap: 1rem;
    padding: 2rem;
}

.uf-tech-metric {
    min-height: 12rem;
    display: grid;
    align-content: center;
    gap: 0.3rem;
    padding: 1.5rem;
    border: 1px solid rgba(245, 245, 245, 0.14);
    border-radius: 6px;
    background: rgba(5, 5, 7, 0.62);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.uf-tech-metric span,
.uf-tech-metric em,
.uf-tech-spectrum-caption span {
    color: rgba(245, 245, 245, 0.52);
    font-family: Orbitron, sans-serif;
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.uf-tech-metric strong {
    color: #fff;
    font-family: Orbitron, sans-serif;
    font-size: 4rem;
    font-weight: 950;
    line-height: 0.95;
    letter-spacing: 0;
}

.uf-tech-spectrum-caption {
    position: absolute;
    left: 2rem;
    right: 2rem;
    bottom: 2rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid rgba(245, 245, 245, 0.12);
    padding-top: 1rem;
}

.uf-tech-spectrum-caption strong {
    color: rgba(245, 245, 245, 0.9);
    font-size: 0.9rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.uf-tech-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.uf-tech-feature-card {
    position: relative;
    min-height: 18rem;
    overflow: hidden;
    padding: 1.45rem;
    border: 1px solid rgba(245, 245, 245, 0.1);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(245, 245, 245, 0.075), rgba(245, 245, 245, 0.032));
    transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.uf-tech-feature-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, rgba(217, 194, 145, 0.96), rgba(124, 217, 187, 0.78), rgba(245, 245, 245, 0));
}

.uf-tech-feature-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 0%, rgba(245, 245, 245, 0.09) 44%, transparent 60%);
    transform: translateX(-120%);
    transition: transform 520ms ease;
}

.uf-tech-feature-card:hover,
.uf-tech-feature-card:focus-within {
    transform: translateY(-4px);
    border-color: rgba(217, 194, 145, 0.34);
    background-color: rgba(217, 194, 145, 0.035);
}

.uf-tech-feature-card:hover::after,
.uf-tech-feature-card:focus-within::after {
    transform: translateX(120%);
}

.uf-tech-feature-index {
    display: inline-flex;
    margin-bottom: 1.65rem;
    color: rgba(217, 194, 145, 0.88);
    font-family: Orbitron, sans-serif;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.14em;
}

.uf-tech-feature-card h3 {
    margin: 0 0 0.9rem;
    color: #fff;
    font-size: 1.12rem;
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: 0;
    word-break: keep-all;
}

.uf-tech-feature-card p {
    margin: 0;
    color: rgba(245, 245, 245, 0.66);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.72;
    word-break: keep-all;
}



.uf-tech-feature-card {
    padding: 0;
    cursor: pointer;
    perspective: 1200px;
    transform-style: preserve-3d;
}

.uf-tech-feature-card::before,
.uf-tech-feature-card::after {
    z-index: 2;
}

.uf-tech-feature-card:focus-visible {
    outline: 2px solid rgba(217, 194, 145, 0.72);
    outline-offset: 4px;
}

.uf-tech-feature-inner {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.uf-tech-feature-card.is-flipped .uf-tech-feature-inner {
    transform: rotateY(180deg);
}

.uf-tech-feature-face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-radius: inherit;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.uf-tech-feature-face--front {
    padding: 1.45rem;
    background: linear-gradient(180deg, rgba(245, 245, 245, 0.075), rgba(245, 245, 245, 0.032));
}

.uf-tech-feature-face--back {
    justify-content: flex-end;
    background: #050505;
    transform: rotateY(180deg);
}

.uf-tech-feature-face--back img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
}

.uf-tech-feature-face--back::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(5, 5, 5, 0.08) 0%, rgba(5, 5, 5, 0.28) 42%, rgba(5, 5, 5, 0.86) 100%);
}

.uf-tech-feature-back-copy {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 0.36rem;
    width: 100%;
    margin-top: auto;
    padding: 1rem 1rem 1.05rem;
    color: #fff;
}

.uf-tech-feature-back-copy strong {
    color: #fff;
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: 0;
    word-break: keep-all;
}

.uf-tech-feature-back-copy p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: rgba(245, 245, 245, 0.8);
    font-size: 0.68rem;
    font-weight: 650;
    line-height: 1.58;
    letter-spacing: 0;
    word-break: keep-all;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
}

body.uf-modal-open { overflow: hidden; }
.uf-tech-modal[hidden] { display: none; }
.uf-tech-modal { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: clamp(0.75rem, 2vw, 1.5rem); }
.uf-tech-modal-backdrop { position: absolute; inset: 0; background: rgba(3, 3, 5, 0.86); backdrop-filter: blur(12px); opacity: 0; animation: uf-tech-backdrop-in 280ms ease forwards; }
.uf-tech-modal-dialog { position: relative; width: min(1500px, 96vw); height: 94vh; overflow-y: auto; overscroll-behavior: contain; border: 1px solid rgba(217, 194, 145, 0.34); border-radius: 10px; background: linear-gradient(145deg, #17151d, #0a090d); box-shadow: 0 30px 100px rgba(0, 0, 0, 0.72); transform-origin: top left; scrollbar-width: none; -ms-overflow-style: none; }
.uf-tech-modal-dialog::-webkit-scrollbar { display: none; width: 0; height: 0; }
.uf-tech-modal-dialog:focus { outline: none; }
.uf-tech-modal-copy { padding: clamp(2rem, 6vw, 5rem); text-align: center; }
.uf-tech-modal-copy h2 { margin: 0 0 1.5rem; color: #fff; font-size: clamp(1.65rem, 4vw, 3rem); line-height: 1.25; word-break: keep-all; }
.uf-tech-modal-body { color: rgba(245, 245, 245, 0.76); font-size: clamp(0.95rem, 1.5vw, 1.08rem); font-weight: 600; line-height: 1.9; word-break: keep-all; }
.uf-tech-modal-body img { display: block; max-width: 100%; height: auto; margin-right: auto; margin-left: auto; }
.uf-tech-modal-close { position: fixed; top: clamp(1.25rem, 3vh, 2rem); right: clamp(1.25rem, 3vw, 2.5rem); z-index: 10002; width: 2.75rem; height: 2.75rem; border: 1px solid rgba(245, 245, 245, 0.2); border-radius: 50%; background: rgba(5, 5, 5, 0.78); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); cursor: pointer; }
.uf-tech-modal-close::before, .uf-tech-modal-close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 1rem; height: 1px; background: #fff; }
.uf-tech-modal-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.uf-tech-modal-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.uf-tech-modal-close:focus-visible { outline: 2px solid #d9c291; outline-offset: 3px; }
@keyframes uf-tech-backdrop-in { to { opacity: 1; } }

@media (max-width: 720px) {
    .uf-tech-modal { padding: 0.75rem; }
    .uf-tech-modal-dialog { width: calc(100vw - 1.5rem); height: calc(100vh - 1.5rem); }
    .uf-tech-modal-copy { padding: 4.5rem 1.5rem 2rem; }
    .uf-tech-modal-close { top: 1.25rem; right: 1.25rem; }
}

@media (min-width: 900px) {
    .uf-tech-headline {
        font-size: 4.35rem;
    }

    .uf-tech-metric strong {
        font-size: 4.75rem;
    }
}

@media (min-width: 1280px) {
    .uf-tech-headline {
        font-size: 5.2rem;
    }
}

@media (max-width: 1180px) {
    .uf-tech-stage {
        grid-template-columns: 1fr;
    }

    .uf-tech-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .uf-tech-showcase {
        gap: 1.2rem;
    }

    .uf-tech-proof-row,
    .uf-tech-feature-grid {
        grid-template-columns: 1fr;
    }

    .uf-tech-proof-row span {
        justify-content: flex-start;
        padding-inline: 1rem;
    }

    .uf-tech-spectrum-panel,
    .uf-tech-metric-stack {
        min-height: 28rem;
    }

    .uf-tech-metric-stack {
        padding: 1rem;
    }

    .uf-tech-metric {
        min-height: 10rem;
        padding: 1rem;
    }

    .uf-tech-spectrum-caption {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .uf-tech-feature-card,
    .uf-tech-feature-inner,
    .uf-tech-feature-card::after {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}


/* Front headline rhythm: compact one-line desktop titles */
body.uf-layout .uf-section-heading,
body.uf-layout .uf-about-head,
body.uf-layout .ppf-section-head {
    max-width: min(100%, 1320px) !important;
}

body.uf-layout .uf-section-heading h2,
body.uf-layout .uf-about-head h2,
body.uf-layout .uf-tech-grid h2,
body.uf-layout .uf-about-grid h2,
body.uf-layout .ppf-section-head h2,
body.uf-layout .ppf-story-grid h2,
body.uf-layout .ppf-studio-grid h2,
body.uf-layout .front-content-title,
body.uf-layout .warranty-search-head h1,
body.uf-layout .map-hero-title,
body.uf-layout .gallery-page h1,
body.uf-layout .gallery-view-hero h1,
body.uf-layout .product-page-title {
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    letter-spacing: 0 !important;
}

@media (min-width: 1024px) {
    body.uf-layout .uf-section-heading h2,
    body.uf-layout .uf-about-head h2,
    body.uf-layout .uf-tech-grid h2,
    body.uf-layout .uf-about-grid h2 {
        max-width: 1320px !important;
        font-size: clamp(2rem, 2.35vw, 2.55rem) !important;
        line-height: 1.16 !important;
        white-space: nowrap;
    }

    body.uf-layout .ppf-section-head h2,
    body.uf-layout .ppf-story-grid h2,
    body.uf-layout .ppf-studio-grid h2 {
        max-width: 1320px !important;
        font-size: clamp(1.75rem, 2.05vw, 2.25rem) !important;
        line-height: 1.18 !important;
        white-space: nowrap;
    }

    body.uf-layout .front-content-title,
    body.uf-layout .warranty-search-head h1,
    body.uf-layout .map-hero-title,
    body.uf-layout .gallery-page h1,
    body.uf-layout .gallery-view-hero h1,
    body.uf-layout .product-page-title {
        font-size: clamp(2.25rem, 3.15vw, 3.8rem) !important;
        line-height: 1.08 !important;
        white-space: nowrap;
    }

    body.uf-layout .ppf-hero h1,
    body.uf-layout .uf-hero h1 {
        font-size: clamp(4.2rem, 5.6vw, 5.8rem) !important;
        line-height: 0.94 !important;
        white-space: nowrap;
    }

    body.uf-layout .uf-lineup-head,
    body.uf-layout .ppf-section-head,
    body.uf-layout .warranty-search-head,
    body.uf-layout .front-content-header {
        max-width: 1320px !important;
    }
}

@media (min-width: 1280px) {
    body.uf-layout .uf-section-heading h2,
    body.uf-layout .uf-about-head h2,
    body.uf-layout .uf-tech-grid h2,
    body.uf-layout .uf-about-grid h2 {
        font-size: clamp(2rem, 2.1vw, 2.75rem) !important;
    }

    body.uf-layout .ppf-section-head h2,
    body.uf-layout .ppf-story-grid h2,
    body.uf-layout .ppf-studio-grid h2 {
        font-size: clamp(1.75rem, 1.85vw, 2.35rem) !important;
    }
}

@media (max-width: 1023px) {
    body.uf-layout .uf-section-heading h2,
    body.uf-layout .uf-about-head h2,
    body.uf-layout .uf-tech-grid h2,
    body.uf-layout .uf-about-grid h2,
    body.uf-layout .ppf-section-head h2,
    body.uf-layout .ppf-story-grid h2,
    body.uf-layout .ppf-studio-grid h2 {
        font-size: clamp(1.45rem, 5.8vw, 2.35rem) !important;
        line-height: 1.22 !important;
        white-space: normal;
    }

    body.uf-layout .front-content-title,
    body.uf-layout .warranty-search-head h1,
    body.uf-layout .map-hero-title,
    body.uf-layout .gallery-page h1,
    body.uf-layout .gallery-view-hero h1,
    body.uf-layout .product-page-title {
        font-size: clamp(2rem, 8.2vw, 3.05rem) !important;
        line-height: 1.08 !important;
        white-space: normal;
    }
}

@media (max-width: 560px) {
    body.uf-layout .uf-section-heading h2,
    body.uf-layout .uf-about-head h2,
    body.uf-layout .uf-tech-grid h2,
    body.uf-layout .uf-about-grid h2,
    body.uf-layout .ppf-section-head h2,
    body.uf-layout .ppf-story-grid h2,
    body.uf-layout .ppf-studio-grid h2 {
        font-size: clamp(1.32rem, 5.4vw, 1.8rem) !important;
    }
}


/* Final desktop headline fit */
@media (min-width: 1024px) {
    body.uf-layout .uf-hero-copy {
        max-width: min(100%, 1180px) !important;
    }

    body.uf-layout .uf-hero h1 br,
    body.uf-layout .product-page-title br,
    body.uf-layout .map-hero-title br {
        display: none !important;
    }

    body.uf-layout .uf-hero h1,
    body.uf-layout .ppf-hero h1 {
        font-size: clamp(3.1rem, 4.1vw, 4.4rem) !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    body.uf-layout .map-hero-title {
        font-size: clamp(2.15rem, 3vw, 3.5rem) !important;
        line-height: 1.08 !important;
        white-space: nowrap !important;
    }

    body.uf-layout .product-page-title {
        max-width: min(100%, 1180px) !important;
        font-size: clamp(2rem, 2.55vw, 3.05rem) !important;
        line-height: 1.08 !important;
        white-space: nowrap !important;
    }
}


/* Home landing hero title tuning */
body.uf-layout[data-front-page="home"] .uf-hero h1 {
    font-size: 4.76rem !important;
}

@media (max-width: 900px) {
    body.uf-layout[data-front-page="home"] .uf-hero h1 {
        font-size: 3.08rem !important;
    }
}

@media (max-width: 640px) {
    body.uf-layout[data-front-page="home"] .uf-hero h1 {
        font-size: 2.24rem !important;
    }
}

@media (min-width: 1024px) {
    body.uf-layout[data-front-page="home"] .uf-hero h1 {
        font-size: clamp(2.17rem, 2.87vw, 3.08rem) !important;
    }
}



/* Home pinned belief scroll */
body.uf-layout[data-front-page="home"] .uf-belief-scroll {
    min-height: 100svh;
    overflow: hidden;
    padding: 0;
    color: var(--uf-text) !important;
    background:
        linear-gradient(115deg, rgba(12, 12, 12, 0.98) 0%, rgba(13, 24, 24, 0.92) 52%, rgba(12, 12, 12, 0.98) 100%),
        var(--uf-section-black) !important;
    isolation: isolate;
}


body.uf-layout[data-front-page="home"] .uf-belief-backgrounds {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

body.uf-layout[data-front-page="home"] .uf-belief-bg {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.08);
    will-change: opacity, transform, filter;
}

body.uf-layout[data-front-page="home"] .uf-belief-bg.is-active {
    opacity: 1;
    visibility: visible;
}

body.uf-layout[data-front-page="home"] .uf-belief-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.04);
    filter: saturate(0.92) contrast(1.05);
}

body.uf-layout[data-front-page="home"] .uf-belief-scroll::before {
    z-index: 3;
    background: linear-gradient(90deg, transparent, rgba(124, 217, 187, 0.68), rgba(190, 195, 200, 0.5), transparent);
}

body.uf-layout[data-front-page="home"] .uf-belief-scroll::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(124, 217, 187, 0.1), transparent 34%, rgba(190, 195, 200, 0.08)),
        repeating-linear-gradient(90deg, rgba(245, 245, 245, 0.045) 0 1px, transparent 1px 7rem);
    opacity: 0.64;
}

body.uf-layout[data-front-page="home"] .uf-belief-pin {
    position: relative;
    z-index: 2;
    display: grid;
    min-height: 100svh;
    grid-template-columns: minmax(12rem, 0.34fr) minmax(0, 1fr);
    gap: 4rem;
    align-items: center;
    padding: 7rem 0 5rem;
}

body.uf-layout[data-front-page="home"] .uf-belief-meta {
    display: grid;
    min-height: 24rem;
    align-content: center;
    gap: 1.2rem;
    padding-left: 1.25rem;
    border-left: 2px solid rgba(124, 217, 187, 0.58);
}

body.uf-layout[data-front-page="home"] .uf-belief-meta strong {
    color: rgba(245, 245, 245, 0.92);
    font-family: "Barlow Condensed", "Inter", sans-serif;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
}

body.uf-layout[data-front-page="home"] .uf-belief-steps {
    display: grid;
    width: min(100%, 12rem);
    gap: 0.7rem;
    margin-top: 0.6rem;
}

body.uf-layout[data-front-page="home"] .uf-belief-step {
    display: block;
    height: 3px;
    border-radius: 999px;
    background: rgba(245, 245, 245, 0.2);
    opacity: 0.56;
    transform: scaleX(0.38);
    transform-origin: left center;
    transition: opacity 0.22s ease, transform 0.22s ease, background-color 0.22s ease;
}

body.uf-layout[data-front-page="home"] .uf-belief-step.is-active {
    background: linear-gradient(90deg, var(--uf-accent), var(--uf-cyan));
    opacity: 1;
    transform: scaleX(1);
}

body.uf-layout[data-front-page="home"] .uf-belief-copy {
    position: relative;
    display: grid;
    min-width: 0;
    gap: 1rem;
}

body.uf-layout[data-front-page="home"] .uf-belief-card {
    min-width: 0;
    padding: 1.2rem 0;
    border-top: 1px solid rgba(245, 245, 245, 0.12);
}

body.uf-layout[data-front-page="home"] .uf-belief-scroll.is-ready .uf-belief-copy {
    min-height: 34rem;
}

body.uf-layout[data-front-page="home"] .uf-belief-scroll.is-ready .uf-belief-card {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    border-top: 0;
    opacity: 0;
    visibility: hidden;
    will-change: transform, opacity, filter;
}

body.uf-layout[data-front-page="home"] .uf-belief-scroll.is-ready .uf-belief-card.is-active {
    opacity: 1;
    visibility: visible;
}

body.uf-layout[data-front-page="home"] .uf-belief-number {
    display: inline-flex;
    margin-bottom: 1.3rem;
    color: var(--uf-accent);
    font-family: Orbitron, sans-serif;
    font-size: 0.86rem;
    font-weight: 900;
    letter-spacing: 0.14em;
}

body.uf-layout[data-front-page="home"] .uf-belief-card h2 {
    max-width: 62rem;
    margin: 0;
    color: #fff;
    font-size: 4rem;
    font-weight: 950;
    line-height: 1.08;
    letter-spacing: 0;
    word-break: keep-all;
    overflow-wrap: break-word;
}

body.uf-layout[data-front-page="home"] .uf-belief-card p {
    max-width: 66rem;
    margin: 1.4rem 0 0;
    color: rgba(245, 245, 245, 0.72);
    font-size: 1.12rem;
    font-weight: 650;
    line-height: 1.85;
    word-break: keep-all;
    overflow-wrap: break-word;
}

body.uf-layout[data-front-page="home"] .uf-belief-scroll.is-reduced-motion {
    min-height: auto;
}

body.uf-layout[data-front-page="home"] .uf-belief-scroll.is-reduced-motion .uf-belief-pin {
    min-height: auto;
    padding: 6rem 0;
}

body.uf-layout[data-front-page="home"] .uf-belief-scroll.is-reduced-motion .uf-belief-card {
    position: relative;
    opacity: 1;
    visibility: visible;
    transform: none !important;
    filter: none !important;
}

@media (max-width: 1180px) {
    body.uf-layout[data-front-page="home"] .uf-belief-pin {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    body.uf-layout[data-front-page="home"] .uf-belief-meta {
        min-height: auto;
    }

    body.uf-layout[data-front-page="home"] .uf-belief-steps {
        width: min(100%, 22rem);
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    body.uf-layout[data-front-page="home"] .uf-belief-card h2 {
        font-size: 3rem;
    }
}

@media (max-width: 720px) {
    body.uf-layout[data-front-page="home"] .uf-belief-pin {
        gap: 2rem;
        padding: 6rem 0 4rem;
    }

    body.uf-layout[data-front-page="home"] .uf-belief-meta strong {
        font-size: 1.45rem;
    }

    body.uf-layout[data-front-page="home"] .uf-belief-scroll.is-ready .uf-belief-copy {
        min-height: 36rem;
    }

    body.uf-layout[data-front-page="home"] .uf-belief-card h2 {
        font-size: 2.15rem;
        line-height: 1.18;
    }

    body.uf-layout[data-front-page="home"] .uf-belief-card p {
        font-size: 1rem;
        line-height: 1.78;
    }
}

@media (max-width: 420px) {
    body.uf-layout[data-front-page="home"] .uf-belief-scroll.is-ready .uf-belief-copy {
        min-height: 39rem;
    }

    body.uf-layout[data-front-page="home"] .uf-belief-card h2 {
        font-size: 1.86rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.uf-layout[data-front-page="home"] .uf-belief-card,
    body.uf-layout[data-front-page="home"] .uf-belief-step {
        transition: none !important;
        transform: none !important;
    }
}


/* KAION SHIELD blue theme */
body.uf-layout[data-front-page="ppf"] {
    --uf-section-black: rgb(12, 12, 12);
    --uf-section-lavender: rgb(0, 36, 80);
    --uf-text: rgb(245, 245, 245);
    --uf-text-strong: rgb(245, 245, 245);
    --uf-text-soft: rgb(190, 195, 200);
    --uf-muted: rgba(190, 195, 200, 0.78);
    --uf-faint: rgba(190, 195, 200, 0.56);
    --uf-accent: rgb(0, 122, 255);
    --uf-accent-strong: rgb(58, 154, 255);
    --uf-line: rgba(190, 195, 200, 0.2);
    --uf-line-strong: rgba(0, 122, 255, 0.58);
    --uf-panel: rgba(245, 245, 245, 0.055);
    --uf-panel-strong: rgba(245, 245, 245, 0.09);
    --uf-on-accent: rgb(245, 245, 245);
    background: rgb(12, 12, 12) !important;
}

body.uf-layout[data-front-page="ppf"] .ppf-page {
    --ppf-accent: rgb(0, 122, 255) !important;
    --ppf-accent-soft: rgba(0, 122, 255, 0.16) !important;
    --ppf-panel: rgba(245, 245, 245, 0.055) !important;
    --ppf-border: rgba(190, 195, 200, 0.2) !important;
    background:
        linear-gradient(180deg, rgba(0, 36, 80, 0.2) 0, rgba(12, 12, 12, 0) 36rem),
        rgb(12, 12, 12) !important;
    color: rgb(245, 245, 245) !important;
}

body.uf-layout[data-front-page="ppf"] .ppf-hero {
    background:
        linear-gradient(90deg, rgba(12, 12, 12, 0.9) 0%, rgba(12, 12, 12, 0.64) 38%, rgba(0, 36, 80, 0.3) 70%, rgba(12, 12, 12, 0.58) 100%),
        linear-gradient(180deg, rgba(0, 36, 80, 0.42) 0%, rgba(12, 12, 12, 0.92) 100%),
        var(--ppf-hero-bg-image, url("/kaion-shield-supercar-hero.png")) center center / cover no-repeat !important;
    border-bottom-color: rgba(0, 122, 255, 0.34) !important;
}

body.uf-layout[data-front-page="ppf"] .ppf-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(circle at 78% 58%, rgba(0, 122, 255, 0.28), rgba(0, 122, 255, 0) 34%),
        linear-gradient(90deg, rgba(12, 12, 12, 0.62) 0%, rgba(12, 12, 12, 0.1) 62%, rgba(12, 12, 12, 0.2) 100%);
}

body.uf-layout[data-front-page="ppf"] .ppf-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(0, 122, 255, 0), rgba(0, 122, 255, 0.8), rgba(190, 195, 200, 0));
}

body.uf-layout[data-front-page="ppf"] .ppf-hero-visual {
    display: none !important;
}

body.uf-layout[data-front-page="ppf"] .ppf-hero-inner {
    isolation: isolate;
}

body.uf-layout[data-front-page="ppf"] .ppf-hero h1,
body.uf-layout[data-front-page="ppf"] .ppf-section-head h2,
body.uf-layout[data-front-page="ppf"] .ppf-story-grid h2,
body.uf-layout[data-front-page="ppf"] .ppf-studio-grid h2 {
    color: rgb(245, 245, 245) !important;
    text-shadow: 0 2px 26px rgba(0, 0, 0, 0.62), 0 0 28px rgba(0, 122, 255, 0.2) !important;
}

body.uf-layout[data-front-page="ppf"] .ppf-hero-lede,
body.uf-layout[data-front-page="ppf"] .ppf-section-head p:not(.uf-kicker),
body.uf-layout[data-front-page="ppf"] .ppf-story-copy,
body.uf-layout[data-front-page="ppf"] .ppf-studio-copy p,
body.uf-layout[data-front-page="ppf"] .ppf-studio-copy li,
body.uf-layout[data-front-page="ppf"] .ppf-line-card em,
body.uf-layout[data-front-page="ppf"] .ppf-rich-detail,
body.uf-layout[data-front-page="ppf"] .ppf-spec-list dt,
body.uf-layout[data-front-page="ppf"] .ppf-category-tab span,
body.uf-layout[data-front-page="ppf"] .ppf-series-head span {
    color: rgb(190, 195, 200) !important;
}

body.uf-layout[data-front-page="ppf"] .ppf-page .uf-kicker,
body.uf-layout[data-front-page="ppf"] .ppf-roll-code,
body.uf-layout[data-front-page="ppf"] .ppf-product-korean,
body.uf-layout[data-front-page="ppf"] .ppf-product-legacy {
    color: rgb(0, 122, 255) !important;
}

body.uf-layout[data-front-page="ppf"] .uf-action-band,
body.uf-layout[data-front-page="ppf"] .ppf-section:nth-of-type(even),
body.uf-layout[data-front-page="ppf"] .ppf-studio-section {
    background:
        linear-gradient(135deg, rgba(0, 36, 80, 0.9) 0%, rgba(12, 12, 12, 0.92) 58%, rgba(12, 12, 12, 1) 100%) !important;
    color: rgb(245, 245, 245) !important;
}

body.uf-layout[data-front-page="ppf"] .ppf-section:nth-of-type(odd) {
    background:
        linear-gradient(180deg, rgba(0, 36, 80, 0.18), rgba(12, 12, 12, 0) 18rem),
        rgb(12, 12, 12) !important;
}

body.uf-layout[data-front-page="ppf"] .uf-action-card,
body.uf-layout[data-front-page="ppf"] .ppf-hero-index div,
body.uf-layout[data-front-page="ppf"] .ppf-line-card,
body.uf-layout[data-front-page="ppf"] .ppf-product-card,
body.uf-layout[data-front-page="ppf"] .ppf-tech-card,
body.uf-layout[data-front-page="ppf"] .ppf-studio-copy,
body.uf-layout[data-front-page="ppf"] .ppf-category-tab,
body.uf-layout[data-front-page="ppf"] .ppf-category-products,
body.uf-layout[data-front-page="ppf"] .ppf-series-products,
body.uf-layout[data-front-page="ppf"] .ppf-series-selector,
body.uf-layout[data-front-page="ppf"] .ppf-series-tab,
body.uf-layout[data-front-page="ppf"] .ppf-roll-item,
body.uf-layout[data-front-page="ppf"] .ppf-series-panel,
body.uf-layout[data-front-page="ppf"] .ppf-spec-list div,
body.uf-layout[data-front-page="ppf"] .ppf-empty-series,
body.uf-layout[data-front-page="ppf"] .ppf-brand-logo-card {
    border-color: rgba(190, 195, 200, 0.2) !important;
    background:
        linear-gradient(145deg, rgba(0, 122, 255, 0.08), rgba(245, 245, 245, 0.045) 46%, rgba(12, 12, 12, 0.26)),
        rgba(245, 245, 245, 0.055) !important;
    color: rgb(245, 245, 245) !important;
    box-shadow: 0 24px 82px rgba(0, 0, 0, 0.26) !important;
}

body.uf-layout[data-front-page="ppf"] .uf-action-card strong,
body.uf-layout[data-front-page="ppf"] .ppf-line-card strong,
body.uf-layout[data-front-page="ppf"] .ppf-product-card h3,
body.uf-layout[data-front-page="ppf"] .ppf-tech-card strong,
body.uf-layout[data-front-page="ppf"] .ppf-series-head h4,
body.uf-layout[data-front-page="ppf"] .ppf-roll-name,
body.uf-layout[data-front-page="ppf"] .ppf-roll-copy h5 {
    color: rgb(245, 245, 245) !important;
}

body.uf-layout[data-front-page="ppf"] .uf-action-card em {
    color: rgb(190, 195, 200) !important;
}

body.uf-layout[data-front-page="ppf"] .uf-primary-link,
body.uf-layout[data-front-page="ppf"] .ppf-page .uf-primary-link {
    border-color: rgb(0, 122, 255) !important;
    background: rgb(0, 122, 255) !important;
    color: rgb(245, 245, 245) !important;
    box-shadow: 0 18px 48px rgba(0, 122, 255, 0.28) !important;
}

body.uf-layout[data-front-page="ppf"] .uf-ghost-link {
    border-color: rgba(0, 122, 255, 0.45) !important;
    background: rgba(0, 122, 255, 0.08) !important;
    color: rgb(245, 245, 245) !important;
}

body.uf-layout[data-front-page="ppf"] .ppf-category-tab:hover,
body.uf-layout[data-front-page="ppf"] .ppf-category-tab:focus-visible,
body.uf-layout[data-front-page="ppf"] .ppf-category-tab.is-active,
body.uf-layout[data-front-page="ppf"] .ppf-series-tab:hover,
body.uf-layout[data-front-page="ppf"] .ppf-series-tab:focus-visible,
body.uf-layout[data-front-page="ppf"] .ppf-series-tab.is-active,
body.uf-layout[data-front-page="ppf"] .ppf-line-card:hover,
body.uf-layout[data-front-page="ppf"] .ppf-product-card:hover,
body.uf-layout[data-front-page="ppf"] .ppf-tech-card:hover,
body.uf-layout[data-front-page="ppf"] .ppf-roll-item:hover,
body.uf-layout[data-front-page="ppf"] .ppf-roll-item:focus-within {
    border-color: rgba(0, 122, 255, 0.62) !important;
    background: rgba(0, 122, 255, 0.14) !important;
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(0, 122, 255, 0.16) !important;
}

body.uf-layout[data-front-page="ppf"] .ppf-data-section .ppf-series-panel::before {
    background: linear-gradient(90deg, rgba(0, 122, 255, 0.9) 0 28%, rgba(190, 195, 200, 0.22) 28% 100%) !important;
}

body.uf-layout[data-front-page="ppf"] .ppf-story-highlight {
    border-left-color: rgba(0, 122, 255, 0.78) !important;
    background: rgba(0, 122, 255, 0.08) !important;
}

body.uf-layout[data-front-page="ppf"] .uf-primary-link::after,
body.uf-layout[data-front-page="ppf"] .ppf-page .uf-primary-link::after {
    background: linear-gradient(105deg, transparent 36%, rgba(245, 245, 245, 0.42) 50%, transparent 64%) !important;
}

body.uf-layout[data-front-page="ppf"] .ppf-brand-logo-card {
    display: block;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.uf-layout[data-front-page="ppf"] .ppf-brand-logo-card img {
    max-width: min(100%, 560px);
    filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.34));
}

@media (max-width: 760px) {
    body.uf-layout[data-front-page="ppf"] .ppf-hero {
        background-position: 62% center !important;
    }
}


.uf-entry-popup[hidden] {
    display: none !important;
}

body.uf-entry-popup-open {
    overflow: hidden;
}

.uf-entry-popup {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: grid;
    place-items: center;
    padding: 1.5rem;
}

.uf-entry-popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 4, 8, 0.82);
    backdrop-filter: blur(10px);
}

.uf-entry-popup-dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 760px);
    max-height: calc(100vh - 3rem);
    overflow: auto;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 18px;
    background: #fff;
    color: #101216;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
}

.uf-entry-popup-image {
    display: block;
    width: 100%;
    max-height: 62vh;
    object-fit: contain;
    background: #090b0f;
}

.uf-entry-popup-copy {
    padding: 1.6rem 1.75rem 0.5rem;
}

body.uf-layout .uf-entry-popup-copy h2 {
    margin: 0 0 0.75rem;
    color: #090b0f !important;
    font-size: clamp(1.35rem, 3vw, 2rem);
    font-weight: 900;
    line-height: 1.25;
}

.uf-entry-popup-content {
    color: #4c515a;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.75;
}

.uf-entry-popup-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 1rem;
    border-bottom: 2px solid #090b0f;
    color: #090b0f;
    font-size: 0.95rem;
    font-weight: 900;
    text-decoration: none;
}

.uf-entry-popup-link:hover,
.uf-entry-popup-link:focus-visible {
    color: #8a6500;
    border-bottom-color: #d4a514;
}

.uf-entry-popup-icon-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
}

.uf-entry-popup-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin: 1rem 1.75rem 1.75rem;
}

.uf-entry-popup-snooze,
.uf-entry-popup-close {
    min-height: 3.1rem;
    padding: 0.8rem 1rem;
    border-radius: 8px;
    font-weight: 900;
}

.uf-entry-popup-snooze {
    border: 1px solid #d4d7dc;
    background: #fff;
    color: #303640;
}

.uf-entry-popup-close {
    border: 1px solid #090b0f;
    background: #090b0f;
    color: #fff;
}

.uf-entry-popup button {
    cursor: pointer;
}

.uf-entry-popup button:focus-visible,
.uf-entry-popup-dialog:focus-visible {
    outline: 3px solid #f0c24a;
    outline-offset: 3px;
}

@media (max-width: 760px) {
    .uf-entry-popup {
        align-items: end;
        padding: 0.75rem;
    }

    .uf-entry-popup-dialog {
        width: 100%;
        max-height: calc(100dvh - 1.5rem);
        border-radius: 15px;
    }

    .uf-entry-popup-image {
        max-height: 52dvh;
    }

    .uf-entry-popup-copy {
        padding: 1.25rem 1.25rem 0.25rem;
    }

    .uf-entry-popup-actions {
        grid-template-columns: 1fr;
        margin: 1rem 1.25rem 1.25rem;
    }
}