/* scaled-by: scripts/scale-css-units.mjs @ 0.9 */
/* Vivlico Landing v4 – Sport Editorial */
:root {
    --v4-navy: #0c1526;
    --v4-navy-soft: #151f35;
    --v4-snow: #f7f9fc;
    --v4-ice: #e8f2fc;
    --v4-blue: #82b3f3;
    --v4-blue-deep: #5a8fd4;
    --v4-accent: #87c1f3;
    --v4-accent-2: #7fc5f6;
    --v4-warm: #ffb454;
    --v4-text: #5a6578;
    --v4-text-strong: #1a2744;
    --v4-text-light: rgba(255, 255, 255, .82);
    --v4-line: rgba(130, 179, 243, .28);
    --v4-font: "DM Sans", system-ui, sans-serif;
    --v4-display: "Outfit", system-ui, sans-serif;
    --v4-radius: 20px;
    --v4-radius-lg: 27px;
    --v4-shadow: 0 22px 58px rgba(12, 21, 38, .14);
    --v4-shadow-soft: 0 13px 36px rgba(12, 21, 38, .1);
    --v4-nav-h: 3.825rem;

    /* Modal theme bridge (assets/css/modals.css) */
    --primaryColor: var(--v4-blue);
    --primaryFadeColor: var(--v4-ice);
    --primaryHoverColor: #6891e0;
    --backgroundColor1: #fff;
    --headerColor: #1a2744;
    --writeColor: var(--v4-text);
    --writeColor3: #99a0ad;
    --textFontFamily: var(--v4-font);
    --headerFontFamily: var(--v4-display);
    --fadeOutBackgroundSolid: rgba(248, 249, 250, .95);
    --secondaryColor: #f1f2f6;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--v4-nav-h); }
body { margin: 0; font-family: var(--v4-font); color: var(--v4-text); background: var(--v4-snow); line-height: 1.6; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; }
a { color: var(--v4-blue-deep); }

.v4-skip { position: absolute; left: -8999.1px; top: 0; z-index: 9999; padding: 0.45rem 0.9rem; background: #fff; color: var(--v4-navy); }
.v4-skip:focus { left: 0.9rem; top: 0.9rem; }

.v4-wrap { width: min(100% - 1.8rem, 66.6rem); margin-inline: auto; }

/* Loader */
.v4-loader { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; background: var(--v4-navy); transition: opacity .5s, visibility .5s; }
.v4-loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.v4-loader span { width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .15); border-top-color: var(--v4-accent); animation: v4spin .8s linear infinite; }
@keyframes v4spin { to { transform: rotate(360deg); } }

/* ============ HEADER ============ */
.v4-top { position: fixed; top: 0; left: 0; right: 0; z-index: 200; transition: background .3s, box-shadow .3s; }
.v4-top.is-solid { background: rgba(12, 21, 38, .92); backdrop-filter: blur(14px); box-shadow: 0 4px 29px rgba(0, 0, 0, .2); }
.v4-top__inner { display: flex; align-items: center; gap: 0.9rem; max-width: 72rem; margin-inline: auto; padding: 0.585rem 0.9rem; }
.v4-logo img { height: 1.17rem; width: auto; filter: brightness(0) invert(1); }
.v4-top__nav { display: none; gap: 0.225rem; margin-left: auto; }
.v4-top__nav a { padding: 0.405rem 0.72rem; color: rgba(255, 255, 255, .88); text-decoration: none; font-weight: 600; font-size: 0.99rem; border-radius: 8px; transition: background .2s, color .2s; }
.v4-top__nav a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.v4-top__actions { display: none; gap: 0.45rem; }
.v4-burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 2.25rem; height: 2.25rem; margin-left: auto; border: none; background: transparent; cursor: pointer; }
.v4-burger span { display: block; width: 1.26rem; height: 1.8px; background: #fff; border-radius: 1.8px; transition: transform .25s; }
.v4-burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.v4-burger[aria-expanded="true"] span:last-child { transform: translateY(-3.6px) rotate(-45deg); }
.v4-top__mobile { display: flex; flex-direction: column; gap: 0.225rem; padding: 0.9rem; background: var(--v4-navy-soft); border-top: 1px solid rgba(255, 255, 255, .08); }
.v4-top__mobile[hidden] { display: none; }
.v4-top__mobile a, .v4-top__mobile button { padding: 0.675rem; color: #fff; text-decoration: none; background: transparent; border: none; text-align: left; font-size: 0.9rem; font-weight: 600; cursor: pointer; border-radius: 7px; }
.v4-top__mobile a:hover, .v4-top__mobile button:hover { background: rgba(255, 255, 255, .08); }
@media (min-width: 980px) {
    .v4-top__nav, .v4-top__actions { display: flex; }
    .v4-burger, .v4-top__mobile { display: none !important; }
}

/* ============ BUTTONS ============ */
.v4-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; border: 1.8px solid transparent; border-radius: 899px; font-family: var(--v4-display); font-weight: 700; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s; text-decoration: none; }
.v4-btn:hover { transform: translateY(-1.8px); }
.v4-btn:focus-visible { outline: 1.8px solid var(--v4-accent); outline-offset: 3px; }
.v4-btn--sm { padding: 0.405rem 1.35rem; font-size: 0.765rem; }
.v4-btn--lg { padding: 0.828rem 1.53rem; font-size: 0.918rem; }
.v4-btn--solid { background: linear-gradient(135deg, var(--v4-accent), var(--v4-blue)); color: #fff; box-shadow: 0 7px 25px rgba(130, 179, 243, .45); }
.v4-btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.v4-btn--glass { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .35); backdrop-filter: blur(7px); }
.v4-btn--dark { background: var(--v4-navy); color: #fff; }

/* ============ TYPOGRAPHY HELPERS ============ */
.v4-kicker { margin: 0 0 0.54rem; font-size: 0.702rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--v4-accent); }
.v4-kicker--dark { color: var(--v4-blue-deep); }
.v4-head { text-align: center; max-width: 41.4rem; margin: 0 auto 2.7rem; }
.v4-head h2 { margin: 0; font-family: var(--v4-display); font-size: clamp(1.665rem, 4.9vw, 2.7rem); font-weight: 800; color: var(--v4-text-strong); line-height: 1.12; letter-spacing: -0.01em; }
.v4-head--light h2, .v4-head--light .v4-kicker { color: #fff; }
.v4-sub { margin: 0.9rem auto 0; font-size: clamp(0.9rem, 2.2vw, 1.026rem); max-width: 39.6rem; }
.v4-sub--dark { color: var(--v4-text); }

/* ============ HERO ============ */
.v4-hero { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--v4-nav-h) + 1.35rem) 0 2.7rem; overflow: hidden; }
.v4-hero__bg { position: absolute; inset: 0; }
.v4-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.v4-hero__overlay { position: absolute; inset: 0; background: linear-gradient(110deg, rgba(12, 21, 38, .95) 0%, rgba(12, 21, 38, .82) 36%, rgba(12, 21, 38, .5) 64%, rgba(12, 21, 38, .25) 100%); }
.v4-hero__shell { position: relative; z-index: 1; width: min(100% - 1.8rem, 75.6rem); margin-inline: auto; padding-inline: clamp(0.9rem, 3.3vw, 1.8rem); display: grid; gap: clamp(1.8rem, 5.6vw, 2.7rem); align-items: center; }
@media (max-width: 1023px) {
    .v4-hero__shell { display: flex; flex-direction: column; gap: 0.765rem; padding-bottom: 36px;}
    .v4-hero__copy { display: contents; }
    .v4-hero__intro { order: 1; }
    .v4-hero__device { order: 2; padding: 0; margin: -0.135rem 0; }
    .v4-hero__device::before { inset: -4% -6%; }
    .v4-hero__browser { box-shadow: 0 16px 36px rgba(0, 0, 0, .45); }
    .v4-lead { margin-bottom: 0; }
    .v4-hero__cta { order: 3; margin-top: 0.315rem; }
    .v4-hero__stats {
        order: 4;
        margin-top: 1.35rem;
        --hero-shell-pad: clamp(0.9rem, 3.3vw, 1.8rem);
        width: calc(100% + 2 * var(--hero-shell-pad));
        margin-inline: calc(-1 * var(--hero-shell-pad));
        padding: 0;
        gap: 0.495rem;
    }
    .v4-hero__stats li { padding: 0.72rem 0.36rem; }
}
@media (min-width: 1024px) {
    .v4-hero__shell { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(1.35rem, 3.3vw, 2.7rem); }
}
.v4-hero__copy { max-width: 36rem; }
.v4-hero h1 { margin: 0; font-family: var(--v4-display); font-size: clamp(2.16rem, 7.3vw, 3.96rem); font-weight: 800; color: #fff; line-height: 1.04; letter-spacing: -0.02em; }
.v4-hero h1 em { font-style: normal; background: linear-gradient(90deg, var(--v4-accent), var(--v4-accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.v4-lead { margin: 1.215rem 0 0; font-size: clamp(0.945rem, 2.4vw, 1.152rem); color: var(--v4-text-light); max-width: 40em; }
.v4-hero__cta { display: flex; flex-wrap: wrap; gap: 0.72rem; margin-top: 1.8rem; }
.v4-hero__cta--center { justify-content: center; }
.v4-hero__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.63rem; margin: 2.025rem 0 0; padding: 0; list-style: none; }
@media (min-width: 560px) { .v4-hero__stats { grid-template-columns: repeat(4, 1fr); } }
.v4-hero__stats li { padding: 0.81rem 0.585rem; text-align: center; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); border-radius: 13px; backdrop-filter: blur(7px); }
.v4-hero__stats strong { display: block; font-family: var(--v4-display); font-size: clamp(1.17rem, 3.3vw, 1.53rem); font-weight: 800; color: #fff; }
.v4-hero__stats span { font-size: 0.684rem; color: rgba(255, 255, 255, .68); }

/* Hero device: large browser + floating phone */
.v4-hero__device { position: relative; display: flex; justify-content: center; align-items: center; padding: 0.9rem 0; }
.v4-hero__browser { width: min(100%, 41.4rem); border-radius: 14px; overflow: hidden; background: #0e1730; box-shadow: 0 36px 81px rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .12); }
.v4-hero__shot { width: 100%; height: auto; display: block; background: #0f1830; }
.v4-hero__phone { position: absolute; right: -0.45rem; bottom: -1.35rem; width: clamp(5.85rem, 17.8vw, 9.45rem); border-radius: 20px; overflow: hidden; box-shadow: 0 23px 45px rgba(0, 0, 0, .5); border: 4px solid #0e1730; background: #0e1730; }
@media (max-width: 540px) { .v4-hero__phone { display: none; } }
.v4-hero__device::before { content: ""; position: absolute; inset: -12% -16%; background: radial-gradient(circle, rgba(130, 179, 243, .35), transparent 66%); z-index: -1; }

.v4-hero__scroll { position: absolute; bottom: 1.125rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.315rem; color: rgba(255, 255, 255, .6); font-size: 0.648rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: color .2s; animation: v4bounce 2s ease-in-out infinite; }
.v4-hero__scroll:hover { color: rgba(255, 255, 255, .92); }
@keyframes v4bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(5px); } }

/* ============ MODULES ============ */
.v4-modules { padding: clamp(3.6rem, 10vw, 5.85rem) 0; background: linear-gradient(180deg, #fff 0%, var(--v4-ice) 50%, #fff 100%); }
.v4-modules__nav {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem 0.5rem;
    margin-top: 1.125rem; font-size: 0.9rem; font-weight: 600;
}
.v4-modules__nav a { color: var(--v4-blue-deep); text-decoration: none; }
.v4-modules__nav a:hover { text-decoration: underline; }
.v4-modules__nav span { color: var(--v4-text); opacity: 0.45; user-select: none; }
.v4-modules__list { display: flex; flex-direction: column; gap: clamp(1.35rem, 4.4vw, 2.475rem); }
.v4-module { display: grid; gap: 0; background: #fff; border: 1px solid var(--v4-line); border-radius: var(--v4-radius-lg); overflow: hidden; box-shadow: var(--v4-shadow-soft); }
@media (min-width: 900px) {
    .v4-module { grid-template-columns: 1.05fr 1fr; align-items: stretch; }
    .v4-module--flip .v4-module__media { order: 2; }
}
.v4-module__media { position: relative; background: #0f1830; min-height: 14.4rem; display: flex; align-items: center; justify-content: center; padding: clamp(1.125rem, 3.3vw, 2.025rem); overflow: hidden; }
.v4-module__media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, rgba(130, 179, 243, .35), transparent 60%); pointer-events: none; }
.v4-module__shot { position: relative; width: 100%; border-radius: 11px; box-shadow: 0 18px 45px rgba(0, 0, 0, .4); border: 1px solid rgba(255, 255, 255, .1); }
.v4-module__body { padding: clamp(1.575rem, 4.4vw, 0.9rem); display: flex; flex-direction: column; }
.v4-module__title { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 0.9rem; margin: 0 0 1.17rem; font-family: var(--v4-display); font-size: clamp(1.26rem, 3.3vw, 1.665rem); font-weight: 800; color: var(--v4-text-strong); line-height: 1.15; }
.v4-module__title-text { flex: 1; min-width: 0; }
.v4-module__icon { flex: 0 0 2.79rem; width: 2.79rem; height: 2.79rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 13px; font-size: 1.125rem; color: #fff; background: linear-gradient(135deg, var(--v4-accent), var(--v4-blue)); }
.v4-module__body > p { margin: 0 0 0.99rem; font-size: 0.9rem; }
.v4-module__list { margin: 0 0 1.26rem; padding: 0; list-style: none; }
@media (min-width: 560px) {
    .v4-module__list { columns: 2; column-gap: clamp(0.675rem, 2.2vw, 1.125rem); column-fill: balance; }
}
.v4-module__list li { position: relative; padding-left: 1.44rem; font-size: 0.828rem; color: var(--v4-text-strong); margin-bottom: 0.495rem; break-inside: avoid; }
.v4-module__list li:last-child { margin-bottom: 0; }
.v4-module__list li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; top: 0.045rem; font-size: 0.648rem; color: var(--v4-blue-deep); }
.v4-module__cta { margin: 1rem 0 0; }
.v4-module__cta .v4-btn--solid { color: #fff; }
.v4-module__foot { margin-top: auto; display: flex; align-items: baseline; gap: 0.54rem; flex-wrap: wrap; padding-top: 0.9rem; border-top: 1px solid var(--v4-line); }
.v4-module__price { font-family: var(--v4-display); font-size: 1.44rem; font-weight: 800; color: var(--v4-blue-deep); }
.v4-module__priceNote { font-size: 0.765rem; color: var(--v4-text); }
.v4-module__badge { display: inline-flex; align-items: center; gap: 0.36rem; align-self: flex-start; padding: 0.27rem 0.675rem; margin-bottom: 0.9rem; border-radius: 899px; font-size: 0.648rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: var(--v4-ice); color: var(--v4-blue-deep); width: fit-content; }

/* ============ APP ============ */
.v4-app { position: relative; padding: clamp(3.6rem, 11.1vw, 5.85rem) 0; color: #fff; overflow: hidden; }
.v4-app__bg { position: absolute; inset: 0; }
.v4-app__bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.32) saturate(1.1); }
.v4-app__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(12, 21, 38, .9), rgba(90, 143, 212, .4)); }
.v4-app__grid { position: relative; z-index: 1; display: grid; gap: 2.25rem; align-items: center; }
@media (min-width: 900px) { .v4-app__grid { grid-template-columns: 1fr 1.1fr; } }
.v4-app__phones { position: relative; display: flex; justify-content: center; align-items: center; min-height: 21.6rem; }
.v4-app__phone { border-radius: 23px; overflow: hidden; border: 5px solid #0e1730; background: #0e1730; box-shadow: 0 27px 54px rgba(0, 0, 0, .5); transition: transform .4s; }
.v4-app__phone.is-front { width: clamp(9.9rem, 28.9vw, 13.5rem); position: relative; z-index: 2; }
.v4-app__phone.is-back { width: clamp(8.1rem, 24.4vw, 11.25rem); position: absolute; left: 50%; transform: translateX(-78%) rotate(-7deg); opacity: .9; z-index: 1; filter: brightness(.92); }
@media (max-width: 560px) { .v4-app__phone.is-back { display: none; } }
.v4-app__content .v4-kicker { color: var(--v4-accent); }
.v4-app__content h2 { margin: 0 0 0.675rem; font-family: var(--v4-display); font-size: clamp(1.665rem, 4.4vw, 2.43rem); font-weight: 800; }
.v4-app__content > p { color: rgba(255, 255, 255, .85); max-width: 38em; }
.v4-app__features { display: grid; gap: 0.585rem; margin: 1.575rem 0; }
@media (min-width: 600px) { .v4-app__features { grid-template-columns: 1fr 1fr; } }
.v4-app-feat { display: flex; gap: 0.675rem; align-items: flex-start; padding: 0.765rem; border-radius: 13px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); cursor: pointer; transition: background .2s, transform .2s; }
.v4-app-feat:hover { transform: translateY(-1.8px); }
.v4-app-feat.is-active { background: rgba(255, 255, 255, .18); border-color: var(--v4-accent); }
.v4-app-feat i { color: var(--v4-accent); margin-top: 0.135rem; font-size: 0.945rem; }
.v4-app-feat strong { display: block; font-size: 0.846rem; }
.v4-app-feat span { font-size: 0.738rem; color: rgba(255, 255, 255, .75); }
.v4-app__stores { display: flex; flex-wrap: wrap; gap: 0.675rem; margin-top: 0.45rem; }
.v4-store-btn { width: 9.45rem; height: 2.79rem; border: none; border-radius: 9px; cursor: pointer; background-color: rgba(0, 0, 0, .35); background-image: url(https://vivlico.b-cdn.net/HomePage2/HP_Main_Download_Apple.webp); background-repeat: no-repeat; background-position: center; background-size: contain; transition: transform .2s; }
.v4-store-btn:hover { transform: translateY(-1.8px); }
.v4-store-btn--google { background-image: url(https://vivlico.b-cdn.net/HomePage2/HP_Main_Download_Google.webp); }

/* ============ VOICES ============ */
.v4-voices { padding: clamp(3.6rem, 11.1vw, 4.95rem) 0; background: linear-gradient(180deg, var(--v4-navy) 0%, var(--v4-navy-soft) 100%); }
.v4-voices__slider { position: relative; max-width: 45rem; margin-inline: auto; min-height: 14.4rem; }
.v4-voice { position: absolute; inset: 0; opacity: 0; transform: translateY(13px); transition: opacity .45s, transform .45s; pointer-events: none; padding: clamp(1.35rem, 4.4vw, 2.25rem); border-radius: var(--v4-radius); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.v4-voice.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; z-index: 1; }
.v4-voice__stars { color: var(--v4-warm); font-size: 0.81rem; margin-bottom: 0.9rem; letter-spacing: 0.15em; }
.v4-voice blockquote { margin: 0 0 1.35rem; }
.v4-voice blockquote p { margin: 0; font-size: clamp(0.945rem, 2.9vw, 1.17rem); font-style: italic; color: rgba(255, 255, 255, .94); line-height: 1.55; }
.v4-voice__meta { display: flex; align-items: flex-start; gap: 0.765rem; }
.v4-voice__meta img { flex-shrink: 0; width: 2.7rem; height: 2.7rem; border-radius: 50%; object-fit: cover; border: 1.8px solid var(--v4-blue); }
.v4-voice__meta > div { min-width: 0; flex: 1; }
.v4-voice__meta strong { display: block; color: #fff; font-size: 0.855rem; line-height: 1.35; overflow-wrap: anywhere; }
.v4-voice__meta span { display: block; margin-top: 0.135rem; font-size: 0.738rem; color: rgba(255, 255, 255, .6); line-height: 1.4; overflow-wrap: anywhere; }
.v4-voices__controls { display: flex; gap: 0.9rem; justify-content: center; align-items: center; margin-top: 1.575rem; }
.v4-voices__dots { display: flex; gap: 0.45rem; }
.v4-voices__dots button { width: 0.54rem; height: 0.54rem; padding: 0; border: none; border-radius: 50%; background: rgba(255, 255, 255, .25); cursor: pointer; transition: background .2s, transform .2s; }
.v4-voices__dots button.is-active { background: var(--v4-accent); transform: scale(1.3); }
.v4-icon-btn { width: 2.475rem; height: 2.475rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: transparent; color: #fff; cursor: pointer; transition: background .2s; }
.v4-icon-btn:hover { background: rgba(255, 255, 255, .12); }

/* ============ PRICING ============ */
.v4-pricing { padding: clamp(3.6rem, 11.1vw, 5.4rem) 0; background: #fff; }
.v4-pricing .v4-wrap { width: min(100% - 1.8rem, 81rem); }
.v4-pricing__grid { display: grid; gap: 0.765rem; grid-template-columns: 1fr; max-width: 19.8rem; margin-inline: auto; }
@media (min-width: 900px) { .v4-pricing__grid { max-width: none; grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .v4-pricing__grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.v4-price { padding: 1.215rem 0.9rem; border-radius: var(--v4-radius); background: var(--v4-snow); border: 1px solid var(--v4-line); text-align: center; transition: transform .2s, box-shadow .2s; }
.v4-price:hover { transform: translateY(-3.6px); box-shadow: var(--v4-shadow-soft); }
.v4-price--hero { background: linear-gradient(145deg, var(--v4-ice), #fff); border-color: var(--v4-blue); box-shadow: 0 11px 32px rgba(130, 179, 243, .25); }
.v4-price__tag-slot { display: flex; align-items: center; justify-content: center; min-height: 1.395rem; margin-bottom: 0.495rem; }
.v4-price__tag { display: inline-block; margin: 0; padding: 0.225rem 0.63rem; border-radius: 899px; font-size: 0.612rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; background: var(--v4-blue); color: #fff; }
.v4-price h3 { margin: 0 0 0.27rem; font-size: clamp(0.792rem, 1.2vw, 0.945rem); font-weight: 700; color: var(--v4-text-strong); line-height: 1.25; }
.v4-price__val { font-family: var(--v4-display); font-size: clamp(1.395rem, 2.2vw, 1.89rem); font-weight: 800; color: var(--v4-blue-deep); line-height: 1.1; }
.v4-price__val small { display: block; margin-top: 0.135rem; font-size: 0.648rem; font-weight: 600; color: var(--v4-text); line-height: 1.25; }
.v4-price p { margin: 0.495rem 0 0; font-size: 0.738rem; color: var(--v4-text); line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
@media (min-width: 1180px) {
    .v4-price { padding: 1.035rem 0.675rem; }
    .v4-price h3 { font-size: 0.99rem; }
    .v4-price__val { font-size: 1.395rem; }
    .v4-price p { font-size: 0.684rem; }
}

/* ============ FINAL CTA ============ */
.v4-final { position: relative; padding: clamp(3.6rem, 10vw, 5.4rem) 0; overflow: hidden; background: var(--v4-navy); }
.v4-final__bg { position: absolute; inset: 0; }
.v4-final__bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.4) saturate(1.05); }
.v4-final__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(12, 21, 38, .82), rgba(90, 143, 212, .35)); }
.v4-final__box { position: relative; z-index: 1; text-align: center; max-width: 39.6rem; }
.v4-final__box h2 { margin: 0 0 0.765rem; font-family: var(--v4-display); font-size: clamp(1.62rem, 5.1vw, 2.52rem); font-weight: 800; color: #fff; }
.v4-final__box p { margin: 0 auto 1.575rem; color: rgba(255, 255, 255, .85); max-width: 38em; }

/* ============ FAQ ============ */
.v4-faq { padding: clamp(3.15rem, 8.9vw, 4.95rem) 0; background: var(--v4-snow); }
.v4-faq__wrap { max-width: 45rem; }
.v4-faq__item { border: 1px solid var(--v4-line); border-radius: 13px; background: #fff; margin-bottom: 0.675rem; overflow: hidden; }
.v4-faq__item summary { padding: 0.99rem 1.215rem; font-family: var(--v4-display); font-weight: 700; color: var(--v4-text-strong); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 0.9rem; }
.v4-faq__item summary::-webkit-details-marker { display: none; }
.v4-faq__item summary::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 0.72rem; color: var(--v4-blue-deep); transition: transform .25s; }
.v4-faq__item[open] summary::after { transform: rotate(180deg); }
.v4-faq__answer { padding: 0 1.215rem 1.08rem; }
.v4-faq__answer p { margin: 0; }

/* ============ FOOTER ============ */
.v4-foot { padding: 2.7rem 0 2.25rem; background: var(--v4-navy); color: rgba(255, 255, 255, .75); font-size: 0.828rem; }
.v4-foot__modules {
    display: flex; flex-wrap: wrap; gap: 0.45rem 0.9rem; margin-bottom: 0.9rem;
}
.v4-foot__modules a {
    color: rgba(255, 255, 255, 0.88); text-decoration: none; font-size: 0.9rem; font-weight: 600;
}
.v4-foot__modules a:hover { color: #fff; text-decoration: underline; }
.v4-foot__grid { display: grid; gap: 1.8rem; align-items: start; }
@media (min-width: 768px) { .v4-foot__grid { grid-template-columns: 1.4fr auto 1fr; } }
.v4-foot__brand img { height: 1.26rem; width: auto; filter: brightness(0) invert(1); margin-bottom: 0.9rem; }
.v4-foot__brand p { margin: 0; max-width: 30em; }
.v4-foot__team { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; padding: 0; border: none; background: transparent; cursor: pointer; color: #fff; }
.v4-foot__team img { width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; border: 1.8px solid var(--v4-blue); }
.v4-foot__links { display: flex; flex-direction: column; gap: 0.495rem; }
.v4-foot__links a { color: rgba(255, 255, 255, .85); text-decoration: none; display: flex; align-items: center; gap: 0.495rem; }
.v4-foot__links a i { width: 0.99rem; color: var(--v4-accent); }
.v4-foot__links a:hover { color: var(--v4-accent); }

/* Back to top */
.v4-back-to-top { position: fixed; right: 1.125rem; bottom: 1.125rem; z-index: 150; width: 2.61rem; height: 2.61rem; display: grid; place-items: center; border-radius: 50%; background: var(--v4-blue); color: #fff; text-decoration: none; box-shadow: var(--v4-shadow-soft); opacity: 0; pointer-events: none; transform: translateY(11px); transition: opacity .3s, transform .3s; }
.v4-back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* ============ FADE-IN ============ */
.v4-fade { opacity: 0; transform: translateY(23px); transition: opacity .7s ease, transform .7s ease; }
.v4-fade.is-in { opacity: 1; transform: translateY(0); }
.v4-fade[data-delay="1"] { transition-delay: .1s; }
.v4-fade[data-delay="2"] { transition-delay: .2s; }
.v4-fade[data-delay="3"] { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .v4-fade { opacity: 1; transform: none; transition: none; }
    .v4-hero__scroll { animation: none; }
    .v4-voice { transition: none; }
}

/* Modal inputs */
input.landing, textarea.landing { width: 100%; padding: 0.585rem 0.765rem; border: 1px solid #ddd; border-radius: 9px; font-family: inherit; }

/* ============ LEGAL / INFO MODALS ============ */
.modalLogin.v4-legal-modal {
    border-radius: var(--v4-radius-lg);
    padding: clamp(1.035rem, 3.3vw, 1.485rem) clamp(1.035rem, 3.3vw, 1.665rem) clamp(0.9rem, 2.9vw, 1.215rem);
    font-family: var(--v4-font);
    color: var(--v4-text);
}

.modalLogin.v4-legal-modal .modalTitle { margin-bottom: 0.135rem; }
.modalLogin.v4-legal-modal .modalTitle h1 {
    font-family: var(--v4-display);
    font-size: 1.035rem;
    font-weight: 800;
    color: var(--v4-blue-deep);
    letter-spacing: 0.01em;
}

.modalLogin.v4-legal-modal .infoBox { margin: 0; padding: 0; }
.modalLogin.v4-legal-modal .infoBox > h4 { display: none; }

.modalLogin.v4-legal-modal .scrollBox {
    height: calc(88.9vh - 198px);
    max-height: calc(88.9vh - 198px);
    margin-top: 0;
    padding-right: 0.405rem;
    scrollbar-color: rgba(130, 179, 243, .75) transparent;
}

.modalLogin.v4-legal-modal .v4-legal__head {
    margin-bottom: 0.9rem;
    padding-bottom: 0.765rem;
    border-bottom: 1px solid var(--v4-line);
}

.modalLogin.v4-legal-modal .v4-legal__title {
    margin: 0;
    font-family: var(--v4-display);
    font-size: clamp(1.215rem, 2.9vw, 1.485rem);
    font-weight: 800;
    color: var(--v4-text-strong);
    line-height: 1.2;
}

.modalLogin.v4-legal-modal .v4-legal__lead {
    margin: 0.405rem 0 0;
    font-size: 0.828rem;
    line-height: 1.5;
    color: var(--v4-text);
}

.modalLogin.v4-legal-modal .v4-legal__block {
    padding: 0.9rem 0;
    border-top: 1px solid var(--v4-line);
}

.modalLogin.v4-legal-modal .v4-legal__block:first-child { padding-top: 0; border-top: none; }
.modalLogin.v4-legal-modal .v4-legal__person + .v4-legal__person { margin-top: 0.225rem; }

.modalLogin.v4-legal-modal .v4-legal__label,
.modalLogin.v4-legal-modal .v4-legal__person-name {
    margin: 0 0 0.495rem;
    font-family: var(--v4-display);
    font-size: 0.855rem;
    font-weight: 700;
    color: var(--v4-text-strong);
    line-height: 1.35;
}

.modalLogin.v4-legal-modal .v4-legal__person-name { font-size: 0.972rem; color: var(--v4-blue-deep); }

.modalLogin.v4-legal-modal .v4-legal__body p {
    margin: 0 0 0.765rem;
    font-size: 0.846rem;
    line-height: 1.65;
    color: var(--v4-text);
}

.modalLogin.v4-legal-modal .v4-legal__body p:last-child { margin-bottom: 0; }

.modalLogin.v4-legal-modal .v4-legal__list {
    margin: 0 0 0.855rem;
    padding: 0 0 0 1.035rem;
    list-style: disc;
}

.modalLogin.v4-legal-modal .v4-legal__list li {
    margin: 0 0 0.405rem;
    font-size: 0.828rem;
    line-height: 1.55;
    color: var(--v4-text-strong);
}

.modalLogin.v4-legal-modal .v4-legal__list-sub {
    margin-left: 0.765rem;
    color: var(--v4-text);
    font-size: 0.792rem;
}

.modalLogin.v4-legal-modal .v4-legal__body a {
    color: var(--v4-blue-deep);
    text-decoration: underline;
    text-underline-offset: 1.8px;
}

.modalLogin.v4-legal-modal .v4-legal__body a:hover { color: var(--v4-blue); }

.modalLogin.v4-legal-modal .scrollBox.security {
    padding: 0;
    margin-top: 0;
}

.modalLogin.v4-legal-modal .scrollBox.security h2,
.modalLogin.v4-legal-modal .scrollBox.security h3 {
    margin: 1.215rem 0 0.495rem;
    font-family: var(--v4-display);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--v4-text-strong);
    line-height: 1.35;
}

.modalLogin.v4-legal-modal .scrollBox.security h2:first-child,
.modalLogin.v4-legal-modal .scrollBox.security h3:first-child { margin-top: 0; }

.modalLogin.v4-legal-modal .scrollBox.security h2 { font-size: 0.945rem; }

.modalLogin.v4-legal-modal .scrollBox.security p {
    margin: 0 0 0.765rem;
    font-size: 0.828rem;
    line-height: 1.65;
    color: var(--v4-text);
}

.modalLogin.v4-legal-modal .scrollBox.security li {
    margin: 0 0 0.495rem 0.9rem;
    font-size: 0.828rem;
    line-height: 1.6;
    color: var(--v4-text);
}

.modalLogin.v4-legal-modal .v4-legal__back {
    margin-top: 0.765rem;
    color: var(--v4-blue-deep);
    font-weight: 600;
}

.modalLogin.v4-legal-modal .v4-legal__back:hover { color: var(--v4-blue); }

@media (max-width: 640px) {
    .modalLogin.v4-legal-modal .scrollBox {
        height: calc(88.9vh - 180px);
        max-height: calc(88.9vh - 180px);
    }
}

/* Subpages (e.g. /skiverbaende/) */
.v4-subpage-hero {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: calc(var(--v4-nav-h) + 1.8rem) 0 2.7rem;
    overflow: hidden;
}
.v4-subpage-hero .v4-hero__shell { grid-template-columns: 1fr; max-width: 48.6rem; }
.v4-subpage-hero .v4-hero__copy { text-align: center; margin-inline: auto; }
.v4-subpage-hero .v4-hero__cta { justify-content: center; }
.v4-subpage-hero h1 { font-size: clamp(1.89rem, 5.6vw, 2.88rem); }
.v4-subpage-hero h1 em { font-style: normal; background: linear-gradient(90deg, var(--v4-accent), var(--v4-accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.v4-sb-band { padding: clamp(3.15rem, 9vw, 5.4rem) 0; }
.v4-sb-band--ice { background: linear-gradient(180deg, #fff 0%, var(--v4-ice) 45%, #fff 100%); }
.v4-sb-band--navy { background: linear-gradient(180deg, var(--v4-navy) 0%, var(--v4-navy-soft) 100%); color: #fff; }
.v4-sb-band--navy .v4-head h2,
.v4-sb-band--navy .v4-kicker { color: #fff; }
.v4-sb-band--navy .v4-sub { color: rgba(255, 255, 255, .82); }

.v4-sb-path { display: grid; gap: 1.08rem; margin-top: 0.45rem; }
@media (min-width: 720px) { .v4-sb-path { grid-template-columns: repeat(3, 1fr); } }
.v4-sb-path__card {
    padding: 1.35rem 1.17rem;
    border-radius: var(--v4-radius);
    background: #fff;
    border: 1px solid var(--v4-line);
    box-shadow: var(--v4-shadow-soft);
    text-align: center;
}
.v4-sb-path__card i {
    display: grid;
    place-items: center;
    width: 2.7rem;
    height: 2.7rem;
    margin: 0 auto 0.81rem;
    border-radius: 13px;
    font-size: 1.08rem;
    color: #fff;
    background: linear-gradient(135deg, var(--v4-accent), var(--v4-blue));
}
.v4-sb-path__card strong { display: block; margin-bottom: 0.45rem; font-family: var(--v4-display); font-size: 1.0125rem; color: var(--v4-text-strong); }
.v4-sb-path__card p { margin: 0; font-size: 0.828rem; color: var(--v4-text); line-height: 1.55; }

.v4-sb-partners { display: grid; gap: 0.81rem; align-items: stretch; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.25rem), 1fr)); }
.v4-sb-partner {
    display: flex;
    align-items: center;
    gap: 0.765rem;
    min-height: 4.05rem;
    padding: 1.08rem 0.99rem;
    border-radius: var(--v4-radius);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    transition: transform .2s, background .2s;
}
.v4-sb-partner:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .11); }
.v4-sb-partner i { flex-shrink: 0; font-size: 1.0125rem; color: var(--v4-accent); }
.v4-sb-partner span { font-size: 0.855rem; font-weight: 600; color: rgba(255, 255, 255, .94); line-height: 1.35; }

.v4-sb-split {
    display: grid;
    gap: 1.8rem;
    align-items: center;
}
@media (min-width: 900px) { .v4-sb-split { grid-template-columns: 1fr 1.05fr; gap: 2.7rem; } }
.v4-sb-split__media {
    position: relative;
    border-radius: var(--v4-radius-lg);
    overflow: hidden;
    background: #0f1830;
    box-shadow: var(--v4-shadow);
    border: 1px solid var(--v4-line);
}
.v4-sb-split__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 25% 15%, rgba(130, 179, 243, .3), transparent 55%);
    pointer-events: none;
}
.v4-sb-split__media img { width: 100%; height: auto; display: block; }
.v4-sb-split__body h2 {
    margin: 0 0 0.9rem;
    font-family: var(--v4-display);
    font-size: clamp(1.35rem, 3.6vw, 1.89rem);
    font-weight: 800;
    color: var(--v4-text-strong);
    line-height: 1.15;
}
.v4-sb-split__body p { margin: 0 0 0.9rem; font-size: 0.9rem; color: var(--v4-text); }
.v4-sb-checklist { margin: 0; padding: 0; list-style: none; }
.v4-sb-checklist li {
    position: relative;
    padding-left: 1.44rem;
    margin-bottom: 0.585rem;
    font-size: 0.855rem;
    color: var(--v4-text-strong);
}
.v4-sb-checklist li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0.09rem;
    font-size: 0.648rem;
    color: var(--v4-blue-deep);
}

.v4-sb-benefits { display: grid; gap: 0.81rem; }
@media (min-width: 600px) { .v4-sb-benefits { grid-template-columns: repeat(2, 1fr); } }
.v4-sb-benefit {
    padding: 1.26rem 1.08rem;
    border-radius: var(--v4-radius);
    background: #fff;
    border: 1px solid var(--v4-line);
    box-shadow: var(--v4-shadow-soft);
}
.v4-sb-benefit i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.34rem;
    height: 2.34rem;
    margin-bottom: 0.72rem;
    border-radius: 11px;
    font-size: 0.99rem;
    color: #fff;
    background: linear-gradient(135deg, var(--v4-accent), var(--v4-blue));
}
.v4-sb-benefit h3 { margin: 0 0 0.45rem; font-family: var(--v4-display); font-size: 1.0125rem; font-weight: 800; color: var(--v4-text-strong); }
.v4-sb-benefit p { margin: 0; font-size: 0.828rem; color: var(--v4-text); line-height: 1.55; }
.v4-sb-benefit a { font-weight: 600; }

.v4-subpage .v4-faq__wrap { max-width: 45rem; margin-inline: auto; }
.v4-subpage .v4-faq > .v4-head { margin-bottom: 1.8rem; }

.v4-top__nav a[aria-current="page"] { background: rgba(255, 255, 255, .14); color: #fff; }

.v4-seo-fallback h3 { font-size: 1.125rem; margin: 0 0 0.5rem; }
.v4-seo-fallback p { margin: 0 0 0.75rem; line-height: 1.6; }