:root { color-scheme: dark; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; background: var(--vc-bg); color: var(--vc-text); font-family: var(--vc-font-body); overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } /* ── Scroll reveal (shared base — pages relied on a per-page copy of this before; centralizing here so data-reveal works even on pages that never defined it inline) ── */ [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.55s cubic-bezier(0.16,1,0.3,1), transform 0.55s cubic-bezier(0.16,1,0.3,1); } [data-reveal].is-visible { opacity: 1; transform: none; } [data-reveal-delay="1"] { transition-delay: .1s; } [data-reveal-delay="2"] { transition-delay: .2s; } [data-reveal-delay="3"] { transition-delay: .3s; } [data-reveal-delay="4"] { transition-delay: .4s; } button { cursor: pointer; border: none; background: none; padding: 0; } input:focus, select:focus, textarea:focus { outline: none; border-color: rgba(255,18,48,0.65); } input::placeholder, textarea::placeholder { color: rgba(255,255,255,0.5); } ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: #040404; } ::-webkit-scrollbar-thumb { background: #1a1a22; } input[type=range] { -webkit-appearance: none; appearance: none; height: 3px; border-radius: 2px; outline: none; cursor: pointer; width: 100%; background: linear-gradient(90deg, var(--vc-red) var(--p, 40%), rgba(255,255,255,0.12) var(--p, 40%)); border: none; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2.5px solid var(--vc-red); cursor: pointer; box-shadow: 0 0 8px rgba(255,18,48,0.55); } select { -webkit-appearance: none; appearance: none; background-repeat: no-repeat; background-position: right 12px center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23555' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); } .site-shell { background: var(--vc-bg); width: 100%; } :root { /* Wysokość paska nawigacji — używana do kompensacji body (fixed navbar) oraz jako offset dla sticky elementów (np. pasek filtrów katalogu). */ --vc-header-h: 64px; } /* Navbar zablokowany na górze i zawsze widoczny na wszystkich stronach (fixed jest pewniejszy niż sticky na stronach , gdzie scrolluje ). */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: var(--vc-z-nav); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); background: rgba(4,4,4,0.97); border-bottom: 1px solid rgba(255,255,255,0.07); box-shadow: 0 8px 40px rgba(0,0,0,0.5); transition: background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease; } /* Kompensacja wysokości fixed-headera, żeby treść nie chowała się pod paskiem. */ body { padding-top: var(--vc-header-h); } /* Subtelny „smaczek" przy scrollu — mocniejsze tło i cień (wysokość bez zmian). */ .site-header.is-scrolled { background: rgba(2,3,5,0.92); border-bottom-color: rgba(255,18,48,0.18); box-shadow: 0 10px 50px rgba(0,0,0,0.65); } .site-header__inner { max-width: var(--vc-container); margin: 0 auto; padding: 0 clamp(1rem, 2.5vw, 2rem); display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; } .site-logo { display: inline-flex; align-items: center; flex-shrink: 0; line-height: 0; } .site-logo img { height: 40px; width: auto; object-fit: contain; filter: drop-shadow(0 2px 12px rgba(255,18,48,0.22)) drop-shadow(0 1px 8px rgba(0,0,0,0.7)); } .site-nav { display: flex; align-items: center; gap: 2px; flex: 1; justify-content: center; } .site-nav__link { display: inline-flex; align-items: center; min-height: 2.4rem; font-family: var(--vc-font-body); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(255,255,255,0.65); padding: 0 13px; border: 1px solid transparent; border-radius: 7px; transition: all 0.2s ease; white-space: nowrap; } .site-nav__link:hover { color: #fff; background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); } .site-nav__link--active, .site-nav__link[data-active] { color: #fff; background: rgba(255,255,255,0.05); border-color: rgba(255,18,48,0.35); box-shadow: inset 0 -2px 0 rgba(255,18,48,0.8); } .page-section { background: #040404; padding: 0 0 80px; } .page-section--overlap { margin-top: -64px; position: relative; z-index: 10; background: transparent; padding: 0 0 56px; } .page-section--overlap .section-card { background: rgba(10, 13, 22, 0.78); backdrop-filter: blur(20px) saturate(1.15); -webkit-backdrop-filter: blur(20px) saturate(1.15); border-color: rgba(255, 255, 255, 0.10); } .calc-trust-bar { display: flex; gap: 0; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 12px; overflow: hidden; margin-bottom: 20px; background: rgba(10, 13, 22, 0.60); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); max-width: 580px; } .calc-trust-bar .hero-stat:not(:last-child) { border-right: 1px solid rgba(255, 255, 255, 0.06); } @media (max-width: 768px) { .page-section--overlap { margin-top: 0; } } .page-section__inner { max-width: 1280px; margin: 0 auto; padding: 0 clamp(1rem, 3.5vw, 3rem); } .site-header__toggle { display: inline-flex; align-items: center; gap: 8px; font-family: var(--vc-font-body); font-weight: 900; padding: 10px 14px; border: 1px solid rgba(255,255,255,0.15); border-radius: var(--vc-r-md); background: rgba(255,255,255,0.05); color: #f8f8f8; } /* NOTE: dropdown ".site-nav__more*" styles live solely in vc-components.css (canonical [data-open] version). Legacy

rules removed here to avoid CSS load-order conflicts across pages. */ /* Static design-component fallback: public content remains readable when the optional React runtime or a third-party CDN is unavailable. */ .dc-static-fallback x-dc { display: block !important; } .dc-static-fallback .mobile-menu:not(.is-open) { display: none !important; pointer-events: none !important; } .faq-contract-note { margin: 18px 0 0; padding: 16px 18px; border: 1px solid rgba(200, 169, 110, 0.18); border-radius: 12px; background: rgba(200, 169, 110, 0.06); color: rgba(244, 246, 251, 0.68); font-size: 0.82rem; line-height: 1.65; } .faq-contract-note a { color: #f3d8a5; font-weight: 700; } /* Legacy ".site-nav__more*" dropdown rules removed — see vc-components.css. */ .verification-lab { position: relative; overflow: hidden; background: radial-gradient(circle at 78% 20%, rgba(52,103,216,0.16), transparent 34%), radial-gradient(circle at 14% 84%, rgba(255,18,48,0.13), transparent 30%), #05070c; border-top: 1px solid rgba(255,255,255,0.07); border-bottom: 1px solid rgba(255,255,255,0.07); padding: clamp(70px, 8vw, 118px) 0; } .verification-lab::before, .verification-lab::after { content: ''; position: absolute; top: 9%; width: clamp(110px, 18vw, 270px); height: clamp(110px, 18vw, 270px); border-radius: 50%; opacity: 0; filter: blur(18px); pointer-events: none; transition: opacity 0.7s ease, transform 0.9s cubic-bezier(.16,1,.3,1); } .verification-lab::before { left: -7%; background: radial-gradient(circle, rgba(50,115,255,0.48), transparent 68%); transform: translateX(-22px) scale(0.84); } .verification-lab::after { right: -7%; background: radial-gradient(circle, rgba(255,25,52,0.42), transparent 68%); transform: translateX(22px) scale(0.84); } .verification-lab.is-ignited::before, .verification-lab.is-ignited::after { opacity: 1; transform: translateX(0) scale(1); } .verification-lab__inner { position: relative; z-index: 1; width: min(1180px, calc(100% - 32px)); margin: 0 auto; } .verification-lab__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 440px); gap: clamp(28px, 6vw, 80px); align-items: end; margin-bottom: 34px; } .verification-lab__eyebrow { color: #f3d8a5; font: 800 0.76rem/1 var(--vc-font-body); letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 14px; } .verification-lab__title { margin: 0; color: #fff; font: 400 clamp(2.3rem, 5vw, 4.8rem)/0.92 var(--vc-font-title); /* Black Ops One */ text-transform: uppercase; } .verification-lab__lead { margin: 0; color: rgba(255,255,255,0.62); font-size: 0.98rem; line-height: 1.75; } .verification-lab__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .verification-card { position: relative; display: flex; flex-direction: column; min-height: 100%; padding: clamp(24px, 3vw, 38px); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; background: linear-gradient(155deg, rgba(15,20,32,0.94), rgba(7,10,17,0.98)); box-shadow: 0 22px 60px rgba(0,0,0,0.32); transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease; } .verification-card:hover { transform: translateY(-4px); border-color: rgba(200,169,110,0.34); box-shadow: 0 26px 70px rgba(0,0,0,0.42); } .verification-card--premium { border-color: rgba(255,18,48,0.28); background: linear-gradient(155deg, rgba(27,12,20,0.96), rgba(8,10,18,0.98) 56%); } .verification-card__kicker { color: rgba(255,255,255,0.46); font-size: 0.7rem; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; } .verification-card__title { margin: 10px 0 4px; color: #fff; font: 800 clamp(1.55rem, 2.6vw, 2.3rem)/1 var(--vc-font-display); text-transform: uppercase; } .verification-card__price { color: #f3d8a5; font-size: 0.9rem; font-weight: 800; margin-bottom: 22px; } .verification-card ul { display: grid; gap: 11px; margin: 0 0 28px; padding: 0; list-style: none; color: rgba(255,255,255,0.68); font-size: 0.9rem; line-height: 1.5; } .verification-card li::before { content: '✓'; color: #4ae88a; margin-right: 9px; font-weight: 900; } .verification-card__cta { margin-top: auto; display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: 0 20px; border: 1px solid rgba(255,255,255,0.17); border-radius: 9px; background: rgba(255,255,255,0.05); color: #fff; font-size: 0.76rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .verification-card--premium .verification-card__cta { border-color: rgba(255,18,48,0.5); background: linear-gradient(135deg, #d20b28, #8f0018); box-shadow: 0 10px 30px rgba(210,11,40,0.24); } .verification-card__cta:hover { transform: translateY(-2px); } .contract-download { margin-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px; border: 1px solid rgba(200,169,110,0.22); border-radius: 14px; background: rgba(200,169,110,0.055); } .contract-download strong { display: block; color: #fff; margin-bottom: 4px; } .contract-download span { color: rgba(255,255,255,0.5); font-size: 0.8rem; line-height: 1.5; } .contract-download a { color: #f3d8a5; font-size: 0.76rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; } @media (min-width: 1101px) { .contract-download { padding-right: 190px; } } @media (max-width: 820px) { .verification-lab__head, .verification-lab__grid { grid-template-columns: 1fr; } .contract-download { align-items: flex-start; flex-direction: column; } } @media (prefers-reduced-motion: reduce) { .verification-lab::before, .verification-lab::after { opacity: 0.45; transform: none; transition: none; } .verification-card, .verification-card__cta { transition: none; } .verification-card:hover, .verification-card__cta:hover { transform: none; } } @media (min-width: 1101px) { .site-header__toggle { display: none !important; } } @media (max-width: 1100px) { .site-header__inner { flex-wrap: nowrap; justify-content: space-between; } .site-nav, .site-cta--usa { display: none !important; } .site-header__toggle { display: inline-flex !important; margin-left: auto; } } .mobile-menu { position: fixed; inset: 0; z-index: 999; background: rgba(4,4,4,0.98); backdrop-filter: blur(24px); display: flex; flex-direction: column; padding: 80px 2rem 2rem; gap: 4px; } .mobile-menu__close { position: absolute; top: 14px; right: 14px; display: flex; align-items: center; gap: 8px; padding: 9px 13px; font-family: var(--vc-font-body); font-weight: 900; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid rgba(255,255,255,0.14); border-radius: var(--vc-r-md); background: transparent; color: #a9a9a9; } .mobile-menu__link { padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-family: var(--vc-font-display); font-size: 1.8rem; font-weight: 700; text-transform: uppercase; color: #fff; display: block; } .mobile-menu__link--active { color: #ff1230; } .mobile-menu__action { margin-top: 24px; display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; font-family: var(--vc-font-body); font-size: 0.85rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--vc-r-md); color: #fff; background: linear-gradient(135deg,#ff1230,#b90018); box-shadow: 0 2px 16px rgba(255,18,48,0.35); } .hero-panel { position: relative; padding-top: 48px; padding-bottom: 72px; overflow: hidden; background: #040404; } .hero-panel__image-wrap { position: absolute; right: 0; top: 0; bottom: 0; width: 68%; z-index: 0; } .hero-panel__image { width: 100%; height: 100%; object-fit: cover; object-position: 60% 55%; filter: brightness(0.95) saturate(1.12) contrast(1.04); } .hero-panel__overlay, .hero-panel__glow { position: absolute; inset: 0; pointer-events: none; } .hero-panel__overlay { background: linear-gradient(to right,#040404 0%,#040404 18%,rgba(8,8,8,0.80) 32%,rgba(8,8,8,0.15) 55%,rgba(8,8,8,0.0) 100%), linear-gradient(to top,#040404 0%,rgba(8,8,8,0.3) 8%,transparent 20%), linear-gradient(to bottom,#040404 0%,rgba(8,8,8,0.45) 4%,transparent 13%); } .hero-panel__glow { z-index: 2; background: radial-gradient(ellipse 50% 60% at 55% 40%,rgba(255,255,255,0.09) 0%,transparent 100%); mix-blend-mode: screen; } .hero-panel__inner { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; padding: 36px clamp(1rem, 3.5vw, 3rem) 0; display: flex; flex-direction: column; gap: 24px; } .hero-panel__intro { max-width: 580px; } .section-card { background: rgba(12,12,18,0.97); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; padding: 20px; scroll-margin-top: 90px; } .section-title { display: flex; align-items: center; gap: 8px; font-family: var(--vc-font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: #ddd; margin-bottom: 14px; } .section-title__index { color: #ff1230; } .field-grid { display: grid; gap: 9px; margin-bottom: 9px; } .field-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .field-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .field-grid--1-1_5 { grid-template-columns: 1fr 1.5fr; } .form-field { display: flex; flex-direction: column; gap: 5px; } .field-label { font-family: var(--vc-font-display); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #888; } .field-control { height: 40px; padding: 0 11px; border-radius: 7px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09); color: #eee; font-size: 0.88rem; font-weight: 600; transition: border-color 0.2s ease, background 0.2s ease; } .field-select { padding-right: 32px; } .field-input--highlight { background: rgba(255,18,48,0.08); border-color: rgba(255,18,48,0.25); } .field-input__wrapper { position: relative; } .field-suffix { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); font-family: var(--vc-font-display); font-size: 0.75rem; font-weight: 700; color: #444; } select option { background: #0d0d0f; color: #eee; } .slider-group { display: flex; align-items: center; gap: 8px; } .slider-step { font-family: var(--vc-font-display); font-size: 0.75rem; color: #333; flex-shrink: 0; } .text-muted { color: #555; } .toggle-row { display: grid; gap: 9px; margin-bottom: 9px; } .toggle-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .toggle-option { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-radius: 9px; cursor: pointer; text-align: left; transition: all 0.2s ease; } .toggle-option__radio { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .toggle-option__title { font-family: var(--vc-font-display); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } .toggle-option__caption { font-size: 0.75rem; color: #3a3a4a; } .metric-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; } .metric-row__label { font-family: var(--vc-font-display); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #888; } .metric-row__value { font-family: var(--vc-font-hero); font-size: 0.8125rem; color: #eee; } .metric-row__value span { font-size: 0.75rem; color: #444; font-family: var(--vc-font-display); font-weight: 600; } .metric-panel { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .metric-panel__value { font-family: var(--vc-font-hero); font-size: 1.06rem; color: #ffb000; } .metric-panel__meta { display: flex; align-items: center; gap: 5px; font-size: 0.75rem; color: #444; } .sticky-right-panel { position: sticky; top: 80px; } .section-title__index { color: #ff1230; } .section-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; } .tiny-card { padding: 10px; border-radius: 7px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); text-align: center; } .tiny-card--highlight { border-color: rgba(255,18,48,0.18); } .tiny-card--accent { border-color: rgba(255,176,0,0.14); } .tiny-card__label { font-family: var(--vc-font-display); font-size: 0.65rem; letter-spacing: 0.14em; color: #ffb000; text-transform: uppercase; margin-bottom: 2px; } .tiny-card__value { font-family: var(--vc-font-display); font-size: 1.25rem; color: #fff; } .action-row { display: flex; flex-direction: column; gap: 7px; } .action-button { width: 100%; min-height: 40px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.2s ease; } .action-button--ghost { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); color: #aaa; font-family: var(--vc-font-display); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; } .action-button--ghost:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.2); color: #888; } .benefit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .benefit-card { text-align: center; } .benefit-icon { width: 32px; height: 32px; margin: 0 auto 7px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(255,176,0,0.07); border: 1px solid rgba(255,176,0,0.15); color: #ffb000; } .benefit-title { font-family: var(--vc-font-display); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #ccc; margin-bottom: 4px; } .benefit-text { font-size: 0.75rem; line-height: 1.5; color: #383845; } .footer-link { font-family: var(--vc-font-display); font-size: 0.625rem; letter-spacing: 0.14em; color: #282828; text-transform: uppercase; } .footer-link:hover { color: #666; } .section-title span { color: #ff1230; } .toggle-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 9px; } .toggle-row--3 { grid-template-columns: repeat(3, 1fr); } .card-quantity { padding: 10px; border-radius: 7px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); text-align: center; } .card-quantity--highlight { border-color: rgba(255,18,48,0.18); } .card-quantity__label { font-family: var(--vc-font-display); font-size: 8px; letter-spacing: 1.5px; color: #383845; text-transform: uppercase; margin-bottom: 2px; } .card-quantity__value { font-family: var(--vc-font-display); font-size: 11px; font-weight: 600; color: #aaa; } .panel-card { background: rgba(10,8,6,0.98); border: 1px solid rgba(255,176,0,0.16); border-radius: 14px; padding: 18px; margin-bottom: 10px; } .panel-card__header { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; } .panel-card__title { font-family: var(--vc-font-display); font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #ffb000; } .panel-card__subtitle { font-family: var(--vc-font-hero); font-size: clamp(1.8rem, 3vw, 2.5rem); color: #fff; line-height: 1; margin-bottom: 2px; } .panel-card__note { font-size: 9px; color: #383845; margin: 0 0 12px; line-height: 1.5; } .panel-card__actions { display: flex; flex-direction: column; gap: 7px; } .panel-card__button { width: 100%; min-height: 40px; border-radius: 7px; color: #fff; font-family: var(--vc-font-display); font-weight: 700; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.2s; } .panel-card__button--primary { background: linear-gradient(180deg,#ff1230,#b90018); box-shadow: 0 4px 16px rgba(255,18,48,0.35); } .panel-card__button--secondary { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); color: #aaa; font-weight: 600; letter-spacing: 1.5px; } .panel-card__button--secondary:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.2); } .panel-card__currency { font-size: 0.9rem; color: #444; font-family: var(--vc-font-display); font-weight: 400; } .panel-card--compact { padding: 16px; } .panel-card__success { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 13px; border-radius: 8px; background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.22); } .breakdown-table { display: flex; flex-direction: column; gap: 0; } .breakdown-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.04); } .breakdown-row:last-child { border-bottom: none; } .breakdown-row__label { font-size: 11px; color: #666; } .breakdown-row__values { display: flex; gap: 18px; align-items: center; } .breakdown-row__value { font-family: var(--vc-font-display); font-size: 11px; font-weight: 700; color: #ccc; } .breakdown-row__text { font-family: var(--vc-font-display); font-size: 10px; color: #444; } .assumption-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; } .assumption-card { padding: 10px; border-radius: 7px; text-align: center; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); } .assumption-card--danger { border-color: rgba(255,18,48,0.18); } .assumption-card--warning { border-color: rgba(255,176,0,0.14); } .assumption-card__label { font-family: var(--vc-font-display); font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: #888; margin-bottom: 2px; } .assumption-card__value { font-family: var(--vc-font-hero); font-size: 1.25rem; color: #fff; } .breakdown-summary { border-top: 1px solid rgba(255,176,0,0.2); margin-top: 8px; padding-top: 10px; display: flex; justify-content: space-between; align-items: center; } .breakdown-summary__label { font-family: var(--vc-font-display); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #ffb000; } .breakdown-summary__value { font-family: var(--vc-font-hero); font-size: 16px; color: #ffb000; } .feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .feature-card { text-align: center; padding: 16px; border-radius: 14px; background: rgba(10,10,14,0.98); border: 1px solid rgba(255,255,255,0.07); } .feature-card__icon { width: 32px; height: 32px; margin: 0 auto 7px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(255,176,0,0.07); border: 1px solid rgba(255,176,0,0.15); color: #ffb000; } .feature-card__title { font-family: var(--vc-font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #ccc; margin-bottom: 4px; } .feature-card__text { font-size: 0.75rem; line-height: 1.5; color: #383845; } .site-footer { background: #040404; border-top: 1px solid rgba(255,255,255,0.05); padding: 28px clamp(1rem, 3.5vw, 3rem); } .site-footer__inner { max-width: var(--vc-container); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; } .site-footer__brand p { font-size: 0.6875rem; color: #282828; margin: 6px 0 0; } .site-footer__links { display: flex; gap: 22px; flex-wrap: wrap; } .footer-link { font-family: var(--vc-font-display); font-size: 0.625rem; letter-spacing: 0.14em; color: #282828; text-transform: uppercase; } .footer-link:hover { color: #666; } .site-footer__meta { display: flex; align-items: center; gap: 10px; } .site-footer__meta img { height: 16px; opacity: 0.3; } .site-footer__meta span { font-size: 0.625rem; color: #282828; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; } select option { background: #0d0d0f; color: #fff; } @media (max-width: 1100px) { .calculator-grid { grid-template-columns: 1fr; } .feature-grid { grid-template-columns: 1fr; } } .hero-label span { width: 5px; height: 5px; background: var(--vc-red); border-radius: 50%; flex-shrink: 0; } .hero-label { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px; padding: 5px 14px; background: rgba(255,18,48,0.1); border: 1px solid rgba(255,18,48,0.28); border-radius: 20px; } .hero-label__text { font-family: var(--vc-font-display); font-size: 0.625rem; letter-spacing: 0.18em; color: var(--vc-red); text-transform: uppercase; } .hero-title { font-family: var(--vc-font-hero); font-size: clamp(2.4rem, 4.5vw, 3.9rem); font-weight: 400; text-transform: uppercase; line-height: 0.95; margin: 0 0 14px; color: #fff; max-width: 580px; } .hero-title img { height: 0.72em; vertical-align: middle; border-radius: 3px; display: inline; margin-left: 0.15em; box-shadow: 0 1px 6px rgba(0,0,0,0.5); } .hero-copy { color: #8a8a9a; font-size: 0.95rem; line-height: 1.7; margin: 0; max-width: 420px; } .hero-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--vc-font-body); font-size: 0.85rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--vc-r-lg); border: 1px solid rgba(255,18,48,0.60); background: transparent; color: #fff; text-decoration: none; overflow: hidden; width: 331px; height: 72px; flex-shrink: 0; } .hero-cta__flag { width: 126px; height: 55px; overflow: hidden; flex-shrink: 0; border-right: 1px solid rgba(255,18,48,0.38); } .hero-cta__flag img { width: 124px; height: 54px; object-fit: cover; } .section-hero { text-align: center; padding: 80px 40px 52px; max-width: 820px; margin: 0 auto; } .hero__eyebrow { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 22px; } .hero__eyebrow .decorator, .section-header__eyebrow .decorator { width: 36px; height: 1px; background: rgba(255,255,255,0.22); } .hero-label__text, .section-header__eyebrow span, .hero-copy, .hero-title, .text-gradient, .text-gradient-alt { margin: 0; } .hero__title { font-family: var(--vc-font-hero); font-size: clamp(56px, 6vw, 90px); font-weight: 900; line-height: 0.94; letter-spacing: -1px; text-transform: uppercase; margin: 0 0 24px; } .hero__title .text-gradient-alt { display: block; color: #fff; } .hero__title .text-gradient { display: block; font-style: italic; color: #ff1230; } .highlight { color: rgba(255,18,48,0.80); text-decoration: underline; text-decoration-color: rgba(255,18,48,0.35); text-underline-offset: 3px; } .section__inner { max-width: 1280px; margin: 0 auto; padding: 0 48px; } .section-header { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 36px; } .section-header__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; } .section-header__title { font-family: var(--vc-font-title); /* Black Ops One */ font-weight: 400; font-size: clamp(40px, 4.2vw, 58px); line-height: 0.94; letter-spacing: 0.01em; margin: 0; position: relative; display: inline-block; padding-bottom: 18px; } .section-header__title::after { content: ''; position: absolute; left: 2px; bottom: 0; width: min(180px, 42%); height: 3px; border-radius: 99px; background: linear-gradient(90deg, #0d2f6c 0%, #f5f6fa 45%, #ff1230 100%); box-shadow: 0 0 10px rgba(255,18,48,0.35); } .text-gradient { background: linear-gradient(90deg, #ff1230 0%, #ff5566 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .text-gradient-alt { background: linear-gradient(90deg, #4a82e8 0%, #ffffff 40%, #ff5566 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; } .filter-button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.10); background: transparent; color: rgba(255,255,255,0.62); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; font-family: var(--vc-font-body); transition: all 0.25s ease; } .filter-button--primary { border-color: rgba(200,169,110,0.28); background: rgba(200,169,110,0.12); color: #f3d8a5; font-weight: 700; } .filter-button:hover, .filter-button:focus { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.85); } .faq-list { display: grid; gap: 14px; } .faq-item { border: 1px solid rgba(200, 169, 110, 0.12); border-radius: 20px; background: linear-gradient(180deg, rgba(12, 18, 32, 0.98) 0%, rgba(9, 14, 24, 0.98) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 12px 30px rgba(0,0,0,0.18); overflow: hidden; } .faq-summary { display: flex; align-items: center; padding: 22px 24px; gap: 16px; cursor: pointer; color: #f4f6fb; font-size: 15px; font-weight: 600; line-height: 1.5; } .faq-number { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; border: 1px solid rgba(255,18,48,0.35); background: linear-gradient(135deg, rgba(255,18,48,0.18) 0%, rgba(255,18,48,0.08) 100%); color: #ff5566; font-family: var(--vc-font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; flex-shrink: 0; } .faq-title { flex: 1; min-width: 0; } .faq-icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid rgba(200,169,110,0.16); background: rgba(255,255,255,0.03); color: #f4f6fb; font-size: 20px; flex-shrink: 0; transition: transform 0.3s ease; } .faq-item[open] .faq-icon { transform: rotate(45deg); } .faq-content { padding: 0 24px 24px 84px; color: rgba(240, 230, 208, 0.78); font-size: 14px; line-height: 1.72; } .card-panel { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 24px; } .panel-card { border-radius: 24px; overflow: hidden; padding: 18px; background: radial-gradient(circle at 50% 40%, rgba(30, 65, 130, 0.14), transparent 48%), radial-gradient(circle at 78% 72%, rgba(14, 52, 120, 0.10), transparent 38%), linear-gradient(180deg, rgba(7, 10, 16, 0.96) 0%, rgba(4, 6, 10, 0.98) 100%); border: 1px solid rgba(200, 169, 110, 0.12); box-shadow: 0 24px 60px rgba(0,0,0,0.28); } .card-panel__box { padding: 24px; border-radius: 20px; border: 1px solid rgba(200,169,110,0.12); background: linear-gradient(180deg, rgba(12, 18, 32, 0.96) 0%, rgba(9, 14, 24, 0.98) 100%); } .card-panel__header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; } .card-panel__icon { width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, rgba(255,18,48,0.14), rgba(79, 139, 255, 0.14)); border: 1px solid rgba(200,169,110,0.16); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .card-panel__title { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 6px; } .card-panel__text { font-size: 13px; color: rgba(240,230,208,0.65); line-height: 1.6; } .card-panel__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .feature-chip { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,0.92); font-size: 12px; } .feature-chip svg { flex-shrink: 0; } .quick-form { display: flex; gap: 10px; } .quick-form input { flex: 1; padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.04); color: #fff; font-size: 13px; font-family: var(--vc-font-body); } .quick-form button { padding: 12px 24px; border-radius: 12px; border: 1px solid rgba(255,18,48,0.5); background: rgba(255,18,48,0.14); color: #f3f3e3; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .note-card { display: flex; flex-direction: column; gap: 16px; padding: 28px 32px; border-radius: 20px; border: 1px solid rgba(200,169,110,0.12); background: linear-gradient(180deg, rgba(12, 18, 32, 0.96) 0%, rgba(9, 14, 24, 0.98) 100%); } .note-card__title { font-size: 15px; font-weight: 700; color: #fff; } .note-card__action { display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; flex-shrink: 0; } .note-card__action:hover, .quick-form button:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.24); } @media (max-width: 960px) { .section__inner, .site-header__inner { padding: 0 24px; } .section-header__title { font-size: clamp(32px, 7vw, 48px); } .filter-bar { justify-content: center; } .card-panel { position: static; top: auto; } } display: block; } .hero-cta__text { font-family: var(--vc-font-display); font-size: 18px; font-weight: 700; letter-spacing: 3px; color: #fff; padding: 0 24px; white-space: nowrap; text-transform: uppercase; display: inline-flex; align-items: center; } .hero-cta__arrow { font-family: var(--vc-font-display); font-size: 20px; font-weight: 500; color: var(--vc-red); padding-right: 20px; line-height: 1; } .site-nav__link:hover, .site-nav__link--active, .site-nav__link[data-active] { color: #fff; background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.025)); border-color: rgba(255,18,48,0.32); box-shadow: inset 0 -2px 0 rgba(255,18,48,0.72); transform: translateY(-1px); } .site-cta { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; font-family: var(--vc-font-body); font-size: 0.77rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--vc-r-md); color: #fff; background: linear-gradient(135deg, var(--vc-red), var(--vc-red-dark)); box-shadow: 0 2px 16px rgba(255,18,48,0.3); white-space: nowrap; transition: box-shadow 0.2s ease, transform 0.2s ease; } .site-cta:hover { box-shadow: 0 4px 24px rgba(255,18,48,0.52); transform: translateY(-1px); } .site-cta--usa { display: inline-flex; align-items: stretch; overflow: hidden; padding: 0; border-radius: 8px; border: 1.5px solid rgba(255,255,255,0.22); box-shadow: 0 0 0 1.5px rgba(0,40,104,0.50), 0 3px 16px rgba(0,0,0,0.50), 0 0 12px rgba(178,34,52,0.18); white-space: nowrap; flex-shrink: 0; transition: box-shadow 0.22s ease, transform 0.22s ease; text-decoration: none; /* flag stripes */ background: repeating-linear-gradient( 180deg, #B22234 0px, #B22234 3.5px, #f4f6ff 3.5px, #f4f6ff 7px ); } .site-cta--usa:hover { box-shadow: 0 0 0 1.5px rgba(0,50,160,0.85), 0 5px 24px rgba(0,0,0,0.55), 0 0 18px rgba(178,34,52,0.30); transform: translateY(-1px); } /* blue canton — wrapper around the flag SVG */ .site-cta--usa__canton { display: flex; align-items: center; justify-content: center; padding: 6px 9px; background: #002868; border-right: 1px solid rgba(255,255,255,0.15); flex-shrink: 0; } .site-cta--usa__flag { display: block; border-radius: 2px; box-shadow: 0 1px 4px rgba(0,0,0,0.45); flex-shrink: 0; } /* dark label on top of stripes */ .site-cta--usa__text { display: flex; align-items: center; padding: 0 13px 0 9px; font-family: var(--vc-font-body); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: rgba(4, 8, 28, 0.78); text-shadow: 0 1px 3px rgba(0,0,0,0.85); } /* ─── PHONE CTA (nav) ─────────────────────────────────────────── */ @keyframes vcNavPhonePing { 0% { transform: scale(1); opacity: 0.65; } 70% { transform: scale(1.55); opacity: 0.12; } 100% { transform: scale(1.8); opacity: 0; } } @keyframes vcNavPhoneIconWiggle { 0%, 60%, 100% { transform: rotate(0deg); } 10% { transform: rotate(-18deg); } 20% { transform: rotate(16deg); } 30% { transform: rotate(-10deg); } 40% { transform: rotate(8deg); } 50% { transform: rotate(-4deg); } } .site-cta-phone { position: relative; flex-shrink: 0; z-index: 110; } .site-cta-phone__btn { display: inline-flex; align-items: center; gap: 7px; padding: 0 13px 0 11px; height: 38px; border-radius: 8px; border: 1.5px solid rgba(255,18,48,0.55); background: linear-gradient(135deg, #ff1230, #b90018); color: #fff; font-family: var(--vc-font-display); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; position: relative; overflow: visible; box-shadow: 0 2px 14px rgba(255,18,48,0.35); transition: box-shadow 0.22s ease, transform 0.22s ease; white-space: nowrap; } /* Pulsing ring expanding from button */ .site-cta-phone__btn::after { content: ''; position: absolute; inset: -3px; border-radius: inherit; border: 2px solid rgba(255, 18, 48, 0.68); animation: vcNavPhonePing 2.2s cubic-bezier(0, 0, 0.2, 1) infinite; pointer-events: none; } .site-cta-phone__btn:hover { box-shadow: 0 4px 22px rgba(255,18,48,0.55); transform: translateY(-1px); } .site-cta-phone__btn:hover::after { animation-duration: 1.1s; } .site-cta-phone__btn[aria-expanded="true"] { border-color: rgba(255,18,48,0.9); box-shadow: 0 4px 22px rgba(255,18,48,0.55); } .site-cta-phone__btn[aria-expanded="true"] .site-cta-phone__chevron { transform: rotate(180deg); } .site-cta-phone__icon { flex-shrink: 0; animation: vcNavPhoneIconWiggle 4.8s ease-in-out 2.4s infinite; } .site-cta-phone__chevron { flex-shrink: 0; opacity: 0.75; transition: transform 0.2s ease; } @media (prefers-reduced-motion: reduce) { .site-cta-phone__btn::after { animation: none; opacity: 0.4; } .site-cta-phone__icon { animation: none; } } /* dropdown panel */ .site-cta-phone__menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 230px; background: #0d0d0f; border: 1px solid rgba(255,255,255,0.1); border-top: 2px solid #ff1230; border-radius: 10px; box-shadow: 0 16px 48px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,18,48,0.08); overflow: hidden; opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity 0.18s ease, transform 0.18s ease; } .site-cta-phone__menu.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); } /* option rows */ .site-cta-phone__option { display: flex; align-items: center; gap: 13px; padding: 14px 16px; text-decoration: none; color: #f8f8f8; transition: background 0.15s ease; border-bottom: 1px solid rgba(255,255,255,0.06); } .site-cta-phone__option:last-child { border-bottom: none; } .site-cta-phone__option:hover { background: rgba(255,18,48,0.08); } .site-cta-phone__option svg { flex-shrink: 0; color: #ff1230; } .site-cta-phone__option strong { display: block; font-family: var(--vc-font-display); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #fff; line-height: 1.2; } .site-cta-phone__option small { display: block; font-size: 0.72rem; color: rgba(255,255,255,0.45); font-family: var(--vc-font-body); margin-top: 2px; font-weight: 500; } @media (max-width: 900px) { .site-cta-phone { display: none !important; } } /* ─────────────────────────────────────────────────────────────── */ .btn-primary { display: inline-flex; align-items: center; gap: 9px; padding: 11px 22px; font-family: var(--vc-font-body); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; border-radius: var(--vc-r-md); background: linear-gradient(135deg, var(--vc-red), var(--vc-red-dark)); box-shadow: 0 2px 16px rgba(255,18,48,0.35); transition: all 0.2s ease; white-space: nowrap; } .btn-primary:hover { box-shadow: 0 4px 24px rgba(255,18,48,0.52); transform: translateY(-1px); } .btn-outline { display: inline-flex; align-items: center; gap: 9px; padding: 11px 20px; font-family: var(--vc-font-body); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vc-text); border-radius: var(--vc-r-md); border: 1px solid rgba(255,255,255,0.14); background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02)); transition: all 0.2s ease; } .btn-outline:hover { border-color: rgba(255,18,48,0.4); transform: translateY(-1px); } .teaser-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 24px; font-family: var(--vc-font-body); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vc-red); transition: gap 0.2s ease; } .teaser-link:hover { gap: 13px; } .hero-stats { display: flex; gap: 0; border-top: 1px solid rgba(255,255,255,0.06); max-width: 580px; overflow: hidden; border-radius: 20px; } .hero-stat { flex: 1; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; } .hero-stat:not(:last-child) { border-right: 1px solid rgba(255,255,255,0.06); } .hero-stat__top { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; } .hero-stat__marker { width: 2px; height: 18px; border-radius: 1px; flex-shrink: 0; background: linear-gradient(to bottom, #ff1230, rgba(255,18,48,0.2)); } .hero-stat__marker--yellow { background: linear-gradient(to bottom, #ffb000, rgba(255,176,0,0.2)); } .hero-stat__marker--blue { background: linear-gradient(to bottom, #3c78ff, rgba(60,120,255,0.2)); } .hero-stat__amount { font-family: var(--vc-font-hero); font-size: 1.125rem; font-weight: 700; color: #fff; letter-spacing: 1px; } .hero-stat__label { font-family: var(--vc-font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #888; padding-left: 9px; } .hero-stat__note { font-size: 0.75rem; color: #555; padding-left: 9px; margin-top: 1px; } .calculator-grid { display: grid; grid-template-columns: 76px minmax(0, 1fr) 360px; gap: 0; align-items: start; max-width: var(--vc-container); margin: 0 auto; } .form-column { padding: 0 20px 0 4px; display: flex; flex-direction: column; gap: 10px; } .sticky-sidebar { position: sticky; top: 80px; padding-top: 4px; } .step-sidebar { display: flex; flex-direction: column; align-items: center; gap: 0; } .step-item { width: 100%; background: transparent; border: none; padding: 0; margin: 0; color: inherit; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; text-align: center; } .step-item__circle { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--vc-font-hero); font-size: 0.875rem; font-weight: 700; flex-shrink: 0; } .step-item__circle--active { background: rgba(255,18,48,0.15); border: 2px solid #ff1230; color: #ff1230; } .step-item__circle--inactive { background: rgba(255,255,255,0.04); border: 1.5px solid rgba(255,255,255,0.15); color: #555; } .step-item__label { font-family: var(--vc-font-display); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: #555; width: 100%; } .step-item--active .step-item__label { color: #ff1230; } .step-divider { width: 1px; height: 24px; background: rgba(255,255,255,0.07); margin: 4px 0; } .panel-card--section { scroll-margin-top: 90px; } .panel-card__badge { font-family: var(--vc-font-display); font-size: 0.75rem; font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase; color: #ff1230; } .form-grid { display: grid; gap: 9px; } .form-field { display: flex; flex-direction: column; gap: 5px; } .form-field__label { font-family: var(--vc-font-display); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #444; } .form-control { height: 40px; padding: 0 11px; border-radius: 7px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09); color: #eee; font-size: 0.88rem; font-weight: 600; transition: border-color 0.2s; } .form-control--accent { background: rgba(255,18,48,0.08); border-color: rgba(255,18,48,0.25); } .form-control--readonly { width: 100%; padding: 12px 16px; border-radius: 7px; background: rgba(255,176,0,0.06); border: 1px solid rgba(255,176,0,0.18); color: #fff; } .form-field__addon { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); font-family: var(--vc-font-display); font-size: 0.75rem; font-weight: 700; color: #444; } .form-field__input-wrapper { position: relative; } .form-legend { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; } .form-legend span { font-family: var(--vc-font-display); font-size: 0.75rem; color: #444; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } .slider-row { display: flex; align-items: center; gap: 8px; } .slider-row span { font-family: var(--vc-font-display); font-size: 0.75rem; color: #333; flex-shrink: 0; } .radio-card { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-radius: 9px; cursor: pointer; text-align: left; transition: all 0.2s; } .radio-card__control { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .radio-card__label { display: flex; flex-direction: column; gap: 3px; } .radio-card__title { font-family: var(--vc-font-display); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #fff; } .radio-card__subtitle { font-size: 0.75rem; color: #3a3a4a; } .summary-card { background: rgba(10,8,6,0.98); border: 1px solid rgba(255,176,0,0.16); border-radius: 14px; padding: 18px; margin-bottom: 10px; } .summary-card__header { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; } .summary-card__tag { font-family: var(--vc-font-display); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: #ffb000; } .summary-card__icon { display: flex; align-items: center; justify-content: center; color: #ffb000; } .summary-card__amount { font-family: var(--vc-font-hero); font-size: clamp(1.8rem, 3vw, 2.5rem); color: #fff; line-height: 1; margin-bottom: 2px; } .summary-card__unit { font-size: 0.9rem; color: #444; font-family: var(--vc-font-display); font-weight: 400; } .summary-card__text { font-size: 0.75rem; color: #383845; margin: 0 0 12px; line-height: 1.5; } .summary-card__actions { display: flex; flex-direction: column; gap: 7px; } .summary-card--compact { padding: 16px; } .summary-card__badge--muted { color: #888; margin-bottom: 12px; font-size: 0.75rem; } .summary-card__footer { border-top: 1px solid rgba(255,176,0,0.2); margin-top: 8px; padding-top: 10px; display: flex; justify-content: space-between; align-items: center; } .summary-card__footer-label { font-family: var(--vc-font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: #ffb000; } .summary-card__footer-value { font-family: var(--vc-font-hero); font-size: 1rem; color: #ffb000; } .summary-card__disclaimer { font-size: 0.75rem; color: #2e2e3a; margin: 6px 0 0; line-height: 1.5; } .summary-list__row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.04); } .summary-list__row:last-child { border-bottom: none; } .summary-list__value { font-family: var(--vc-font-display); font-size: 0.6875rem; font-weight: 700; color: #ccc; } .summary-list__values { display: flex; gap: 18px; align-items: center; } .research-block { background: rgba(10,10,14,0.98); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; padding: 16px; } .research-title { font-family: var(--vc-font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #888; margin-bottom: 12px; } .research-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .research-step { text-align: center; } .research-step__icon { width: 32px; height: 32px; background: rgba(255,176,0,0.07); border: 1px solid rgba(255,176,0,0.15); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin: 0 auto 7px; } .research-step__title { font-family: var(--vc-font-display); font-size: 0.75rem; font-weight: 700; color: #ccc; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; } .research-step__text { font-size: 0.75rem; color: #383845; line-height: 1.5; } .assumption-card__detail { font-size: 0.6875rem; color: #aaa; } display: flex; flex-direction: column; gap: 7px; } .button--secondary { color: #aaa; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); } .button--secondary:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.2); } .button--primary { width: 100%; min-height: 40px; border-radius: 7px; background: linear-gradient(180deg, #ff1230, #b90018); color: #fff; font-family: var(--vc-font-display); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; box-shadow: 0 4px 16px rgba(255,18,48,0.35); transition: all 0.2s ease; } .button--primary:hover { box-shadow: 0 6px 24px rgba(255,18,48,0.55); transform: translateY(-1px); } .summary-list__values { display: flex; gap: 18px; align-items: center; } .summary-list__value { font-family: var(--vc-font-display); font-size: 0.6875rem; font-weight: 700; color: #ccc; } .slider-row input[type=range] { flex: 1; } .summary-alert { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 13px; border-radius: 8px; background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.22); } .summary-list { display: flex; flex-direction: column; gap: 0; } .summary-list__row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.04); } .summary-list__row:last-child { border-bottom: none; } .summary-list__label { font-size: 0.6875rem; color: #666; } .summary-list__values { display: flex; gap: 18px; align-items: center; } .summary-list__text { font-family: var(--vc-font-display); font-size: 0.6875rem; color: #444; } .summary-list__highlight { font-family: var(--vc-font-display); font-size: 0.6875rem; font-weight: 700; color: #ccc; } .summary-total { border-top: 1px solid rgba(255,176,0,0.2); margin-top: 8px; padding-top: 10px; display: flex; justify-content: space-between; align-items: center; } .summary-total__label { font-family: var(--vc-font-display); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: #ffb000; } .summary-total__value { font-family: var(--vc-font-hero); font-size: 1rem; color: #ffb000; } .feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .feature-card { text-align: center; padding: 16px; border-radius: 14px; background: rgba(10,10,14,0.98); border: 1px solid rgba(255,255,255,0.07); } .feature-card__icon { width: 32px; height: 32px; margin: 0 auto 7px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(255,176,0,0.07); border: 1px solid rgba(255,176,0,0.15); color: #ffb000; } .feature-card__title { font-family: var(--vc-font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #ccc; margin-bottom: 4px; } .feature-card__text { font-size: 0.75rem; line-height: 1.5; color: #383845; } .site-footer { background: #040404; border-top: 1px solid rgba(255,255,255,0.05); padding: 28px clamp(1rem, 3.5vw, 3rem); } .site-footer__inner { max-width: var(--vc-container); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; } .site-footer__brand p { font-size: 0.6875rem; color: #282828; margin: 6px 0 0; } .site-footer__links { display: flex; gap: 22px; flex-wrap: wrap; } .footer-link { font-family: var(--vc-font-display); font-size: 0.625rem; letter-spacing: 0.14em; color: #282828; text-transform: uppercase; } .footer-link:hover { color: #666; } .site-footer__meta { display: flex; align-items: center; gap: 10px; } .site-footer__meta img { height: 16px; opacity: 0.3; } .site-footer__meta span { font-size: 0.625rem; color: #282828; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; } select option { background: #0d0d0f; color: #fff; } @media (max-width: 1100px) { .calculator-grid { grid-template-columns: 1fr; } .feature-grid { grid-template-columns: 1fr; } } @media (max-width: 720px) { .site-header__inner, .section-hero__container, .section-wrapper, .site-footer__inner { padding-left: 1rem; padding-right: 1rem; } .hero-stats { flex-direction: column; } .section-hero__title { font-size: clamp(2.2rem, 8vw, 3.2rem); } .mobile-menu { padding: 80px 1.5rem 1.5rem; } .site-nav { display: none !important; } .calculator-grid { gap: 24px; } } .section-hero { position: relative; padding-top: 40px; overflow: hidden; background: var(--vc-bg); } .section-hero__media { position: absolute; right: 0; top: 0; bottom: 0; width: 68%; z-index: 0; } .section-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 55%; filter: brightness(0.95) saturate(1.12) contrast(1.04); } .section-hero__container { position: relative; z-index: 2; max-width: var(--vc-container); margin: 0 auto; padding: 36px clamp(1rem, 3.5vw, 3rem) 16px; display: flex; flex-direction: column; gap: 24px; } .section-hero__eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px; padding: 5px 14px; background: rgba(255,18,48,0.1); border: 1px solid rgba(255,18,48,0.28); border-radius: 20px; } .section-hero__eyebrow::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--vc-red); flex-shrink: 0; } .section-hero__eyebrow span { font-family: var(--vc-font-display); font-size: 0.625rem; letter-spacing: 0.18em; color: var(--vc-red); text-transform: uppercase; } .section-hero__title { font-family: var(--vc-font-hero); font-size: clamp(2.4rem, 4.5vw, 3.9rem); font-weight: 400; text-transform: uppercase; line-height: 0.95; margin: 0 0 14px; color: #fff; max-width: 580px; } .section-hero__title img { height: 0.72em; vertical-align: middle; border-radius: 3px; display: inline; margin-left: 0.15em; box-shadow: 0 1px 6px rgba(0,0,0,0.5); } .section-hero__copy { color: rgba(255,255,255,0.55); font-size: 0.95rem; line-height: 1.7; margin: 0; max-width: 420px; } .section-hero__overlay, .section-hero__glow { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .section-hero__overlay { background: linear-gradient(to right, var(--vc-bg) 0%, rgba(4,4,4,0.80) 32%, rgba(4,4,4,0.15) 55%, transparent 100%), linear-gradient(to top, var(--vc-bg) 0%, rgba(8,8,8,0.3) 8%, transparent 20%), linear-gradient(to bottom, var(--vc-bg) 0%, rgba(8,8,8,0.45) 4%, transparent 13%); } .section-hero__glow { right: 0; width: 65%; background: radial-gradient(ellipse 50% 60% at 55% 40%, rgba(255,255,255,0.09) 0%, transparent 100%); mix-blend-mode: screen; } .section-wrapper { max-width: var(--vc-container); margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2rem); } .section-header { display: flex; flex-direction: column; gap: 12px; margin-bottom: 36px; } .section-header__label { display: inline-flex; align-items: center; gap: 10px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; } .section-header__label::before, .section-header__label::after { content: ""; display: block; width: 30px; height: 2px; border-radius: 99px; background: linear-gradient(90deg, #0c2d6b 0%, #f2f3f7 50%, var(--vc-red) 100%); } .section-header__title { font-family: var(--vc-font-title); /* Black Ops One */ font-weight: 400; font-size: clamp(40px, 4.2vw, 58px); line-height: 0.94; letter-spacing: 0.01em; margin: 0; position: relative; display: inline-block; padding-bottom: 18px; } .section-header__title--emphasis { background: linear-gradient(90deg, var(--vc-red) 0%, #ff5566 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .section-header__accent { position: absolute; left: 2px; bottom: 0; width: min(180px, 42%); height: 3px; border-radius: 99px; background: linear-gradient(90deg, #0d2f6c 0%, #f5f6fa 45%, var(--vc-red) 100%); box-shadow: 0 0 10px rgba(255,18,48,0.35); } .filter-group { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; } .filter-pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: var(--vc-r-pill); border: 1px solid rgba(255,255,255,0.10); background: transparent; color: rgba(255,255,255,0.62); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; font-family: var(--vc-font-body); transition: all var(--vc-normal); } .filter-pill:hover, .filter-pill--active { color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.18); } .faq-grid { display: grid; gap: 14px; } .faq-item { border: 1px solid rgba(200,169,110,0.12); border-radius: var(--vc-r-2xl); background: linear-gradient(180deg, rgba(12,18,32,0.98) 0%, rgba(9,14,24,0.98) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 12px 30px rgba(0,0,0,0.18); overflow: hidden; } .faq-summary { display: flex; align-items: center; padding: 22px 24px; gap: 16px; cursor: pointer; color: #f4f6fb; font-size: 0.9375rem; font-weight: 600; line-height: 1.5; } .faq-number { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; border: 1px solid rgba(255,18,48,0.35); background: linear-gradient(135deg, rgba(255,18,48,0.18) 0%, rgba(255,18,48,0.08) 100%); color: #ff5566; font-family: var(--vc-font-body); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; flex-shrink: 0; } .faq-icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid rgba(200,169,110,0.16); background: rgba(255,255,255,0.03); color: #f4f6fb; font-size: 1.25rem; flex-shrink: 0; transition: transform 0.3s ease; } .faq-item[open] .faq-icon { transform: rotate(45deg); } .faq-content { padding: 0 24px 24px 84px; color: rgba(240,230,208,0.78); font-size: 0.875rem; line-height: 1.72; } .panel-card { border-radius: 24px; overflow: hidden; padding: 18px; background: radial-gradient(circle at 50% 40%, rgba(30,65,130,0.14), transparent 48%), radial-gradient(circle at 78% 72%, rgba(14,52,120,0.10), transparent 38%), linear-gradient(180deg, rgba(7,10,16,0.96) 0%, rgba(4,6,10,0.98) 100%); border: 1px solid rgba(200,169,110,0.12); box-shadow: 0 24px 60px rgba(0,0,0,0.28); } .panel-card__title { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 6px; } .panel-card__text { font-size: 0.8125rem; color: rgba(240,230,208,0.65); line-height: 1.6; margin-bottom: 16px; } .panel-card__list { display: grid; gap: 16px; } .panel-card__feature { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,0.72); font-size: 0.8125rem; } .panel-card__feature svg { flex-shrink: 0; } .panel-form { display: flex; flex-direction: column; gap: 10px; } .panel-form input, .panel-form textarea, .panel-form select { width: 100%; padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.04); color: #fff; font-size: 0.8125rem; } .panel-form button, .panel-card .button { min-width: 0; } @media (max-width: 900px) { html.vc-process-mobile [data-screen-label="Hero"] { position: relative !important; top: auto !important; } .site-header__inner, .section-hero__container, .section-wrapper { padding-left: 1rem; padding-right: 1rem; } .section-hero__media { width: 100%; height: 420px; } } @media (max-width: 720px) { .site-nav { display: none; } .section-hero__title { font-size: clamp(2.2rem, 8vw, 3.2rem); } .faq-grid, .panel-card__list { gap: 12px; } } .mobile-menu { position: fixed; inset: 0; z-index: 999; background: rgba(4,4,4,0.98); backdrop-filter: blur(24px); display: flex; flex-direction: column; padding: 80px 2rem 2rem; gap: 4px; } .mobile-menu__close { position: absolute; top: 14px; right: 14px; display: flex; align-items: center; gap: 8px; padding: 9px 13px; font-family: var(--vc-font-body); font-weight: 900; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid rgba(255,255,255,0.14); border-radius: var(--vc-r-md); background: transparent; color: #a9a9a9; } .mobile-menu__link { padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-family: var(--vc-font-display); font-size: 1.8rem; font-weight: 700; text-transform: uppercase; color: #fff; display: block; } .mobile-menu__link--active { color: var(--vc-red); } .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--vc-font-body); font-size: 0.85rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--vc-r-lg); border: 1px solid transparent; transition: box-shadow var(--vc-fast), transform var(--vc-fast), background var(--vc-fast); cursor: pointer; text-decoration: none; } .button--primary { color: #fff; background: linear-gradient(135deg, var(--vc-red), var(--vc-red-dark)); box-shadow: 0 2px 16px rgba(255,18,48,0.3); } .button--primary:hover { box-shadow: 0 4px 24px rgba(255,18,48,0.52); transform: translateY(-1px); } .button--outline { color: #fff; background: transparent; border-color: rgba(255,255,255,0.14); box-shadow: 0 0 0 1px rgba(255,255,255,0.18); } .button--outline:hover { background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.025)); border-color: rgba(255,255,255,0.24); } .hero { text-align: center; padding: 80px 40px 52px; max-width: 820px; margin: 0 auto; } .hero__eyebrow { display: inline-flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 22px; color: rgba(255,255,255,0.30); font-family: var(--vc-font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; } .hero__eyebrow::before, .hero__eyebrow::after { content: ''; display: block; width: 36px; height: 1px; background: rgba(255,255,255,0.22); } .hero__title { font-family: var(--vc-font-hero); font-size: clamp(56px, 6vw, 90px); font-weight: 900; line-height: 0.94; letter-spacing: -1px; text-transform: uppercase; margin: 0 0 24px; } .hero__title span { display: block; } .hero__title--accent { color: var(--vc-red); font-style: italic; } .hero__text { font-family: var(--vc-font-body); font-size: 0.9375rem; font-weight: 400; line-height: 1.78; color: rgba(255,255,255,0.48); margin: 0 0 40px; max-width: 600px; margin-left: auto; margin-right: auto; } .hero__text .highlight { color: rgba(255,18,48,0.80); text-decoration: underline; text-decoration-color: rgba(255,18,48,0.35); text-underline-offset: 3px; } .hero__card { display: inline-flex; align-items: center; border: 1.5px solid rgba(255,18,48,0.60); text-decoration: none; overflow: hidden; flex-shrink: 0; width: 331px; height: 72px; border-style: double; color: transparent; } .hero__card-image { width: 126px; height: 55px; overflow: hidden; flex-shrink: 0; border-right: 1px solid rgba(255,18,48,0.38); } .hero__card-image img { width: 124px; height: 54px; object-fit: cover; display: block; opacity: 1; } .hero__card-copy { font-family: var(--vc-font-display); font-size: 18px; font-weight: 700; letter-spacing: 3px; color: #fff; padding: 0 24px; white-space: nowrap; text-transform: uppercase; } .hero__card-arrow { font-family: var(--vc-font-display); font-size: 20px; font-weight: 500; color: var(--vc-red); padding-right: 20px; line-height: 1; } .section { position: relative; } .section--faq { padding: clamp(72px, 7vw, 110px) 0; background: radial-gradient(circle at 0% 0%, rgba(255,18,48,0.08) 0%, transparent 22%), radial-gradient(circle at 100% 100%, rgba(58,102,205,0.10) 0%, transparent 24%), var(--vc-bg); } .section__inner { max-width: 1280px; margin: 0 auto; padding: 0 48px; } .section-header { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 36px; } .section-header__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; } .section-header__eyebrow .decorator { display: block; width: 30px; height: 2px; border-radius: 99px; background: linear-gradient(90deg, #0c2d6b 0%, #f2f3f7 50%, #ff1230 100%); } .section-header__title { font-family: var(--vc-font-title); /* Black Ops One */ font-weight: 400; font-size: clamp(40px, 4.2vw, 58px); line-height: 0.94; letter-spacing: 0.01em; margin: 0; position: relative; display: inline-block; padding-bottom: 18px; } .section-header__title::after { content: ''; position: absolute; left: 2px; bottom: 0; width: min(180px, 42%); height: 3px; border-radius: 99px; background: linear-gradient(90deg, #0d2f6c 0%, #f5f6fa 45%, #ff1230 100%); box-shadow: 0 0 10px rgba(255,18,48,0.35); } .text-gradient { background: linear-gradient(90deg, #ff1230 0%, #ff5566 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .text-gradient-alt { background: linear-gradient(180deg, #fdfefe 0%, #e5e8f0 58%, #b7beca 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; } .filter-button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.10); background: transparent; color: rgba(255,255,255,0.62); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: all 0.25s ease; font-family: var(--vc-font-body); } .filter-button--primary { background: rgba(200,169,110,0.12); border-color: rgba(200,169,110,0.28); color: #f3d8a5; } .filter-button:hover, .filter-button--primary:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.85); } .faq-grid { display: grid; grid-template-columns: 1fr 420px; gap: 64px; align-items: start; } .faq-list { display: grid; gap: 14px; } .faq-card { border: 1px solid rgba(200,169,110,0.12); border-radius: 20px; background: linear-gradient(180deg, rgba(12,18,32,0.98) 0%, rgba(9,14,24,0.98) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 12px 30px rgba(0,0,0,0.18); overflow: hidden; } .faq-card summary { display: flex; align-items: center; padding: 22px 24px; gap: 16px; cursor: pointer; color: #f4f6fb; font-size: 15px; font-weight: 600; line-height: 1.5; } .faq-number { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; border: 1px solid rgba(255,18,48,0.35); background: linear-gradient(135deg, rgba(255,18,48,0.18) 0%, rgba(255,18,48,0.08) 100%); color: #ff5566; font-family: var(--vc-font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; flex-shrink: 0; } .faq-title { flex: 1; min-width: 0; } .faq-chevron { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid rgba(200,169,110,0.16); background: rgba(255,255,255,0.03); color: #f4f6fb; font-size: 20px; flex-shrink: 0; transition: transform 0.3s ease; } .faq-card[open] .faq-chevron { transform: rotate(45deg); } .faq-content { padding: 0 24px 24px 84px; color: rgba(240,230,208,0.78); font-size: 14px; line-height: 1.72; } .card-panel { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 24px; } .card-panel__box, .note-card { border-radius: 24px; overflow: hidden; padding: 18px; background: radial-gradient(circle at 50% 40%, rgba(30,65,130,0.14), transparent 48%), radial-gradient(circle at 78% 72%, rgba(14,52,120,0.10), transparent 38%), linear-gradient(180deg, rgba(7,10,16,0.96) 0%, rgba(4,6,12,0.98) 100%); border: 1px solid rgba(200,169,110,0.12); box-shadow: 0 24px 60px rgba(0,0,0,0.28); } .card-panel__header, .note-card__header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; } .card-panel__icon, .note-card__icon { width: 48px; height: 48px; border-radius: 16px; background: linear-gradient(135deg, rgba(255,18,48,0.14), rgba(79,139,255,0.14)); border: 1px solid rgba(200,169,110,0.16); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .card-panel__title, .note-card__title { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 6px; } .card-panel__text, .note-card__text { font-size: 13px; color: rgba(240,230,208,0.65); line-height: 1.6; } .card-panel__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .feature-chip { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,0.72); font-size: 12px; } .quick-form { display: flex; gap: 10px; } .quick-form input { flex: 1; padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.04); color: #fff; font-size: 13px; outline: none; } .quick-form button { padding: 12px 24px; border-radius: 12px; border: 1px solid rgba(255,18,48,0.5); background: rgba(255,18,48,0.14); color: #f3f3e3; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; } .quick-form button:hover { background: rgba(255,18,48,0.28); border-color: rgba(255,18,48,0.7); } .note-card__action, .note-card__button { display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .note-card__action:hover, .note-card__button:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.24); } @media (max-width: 960px) { .faq-grid { grid-template-columns: 1fr; } .site-header__inner { flex-wrap: wrap; justify-content: center; } .site-nav { order: 3; width: 100%; justify-content: center; } .site-cta { width: 100%; justify-content: center; } } @media (max-width: 720px) { .hero { padding: 60px 24px 40px; } .section__inner { padding: 0 24px; } .filter-bar { justify-content: center; } .card-panel, .note-card, .faq-card { border-radius: 18px; } .quick-form { flex-direction: column; } .quick-form button { width: 100%; } } /* Enforce calculator three-column layout and explicit grid placement This block is placed at the end to take precedence over earlier duplicate rules and to avoid accidental overrides. */ .page-section__inner .calculator-grid { display: grid; grid-template-columns: 76px minmax(0, 1fr) 360px !important; gap: 24px; align-items: start; } .page-section__inner .calculator-grid > .sticky-sidebar { grid-column: 1; } .page-section__inner .calculator-grid > .form-column { grid-column: 2; min-width: 0; } .page-section__inner .calculator-grid > .sticky-right-panel { grid-column: 3; justify-self: stretch; } .sticky-right-panel { position: sticky; top: 80px; padding-top: 4px; width: 100%; max-width: 360px; } @media (max-width: 900px) { .page-section__inner .calculator-grid { grid-template-columns: 1fr !important; gap: 16px; } .page-section__inner .calculator-grid > .sticky-sidebar, .page-section__inner .calculator-grid > .form-column, .page-section__inner .calculator-grid > .sticky-right-panel { grid-column: 1; } .sticky-right-panel { max-width: 100%; position: static; } /* MOBILE FIX: stepper nie może być sticky (pływał i nachodził na treść) — robimy z niego poziomy pasek kroków u góry */ .sticky-sidebar { position: static; top: auto; padding-top: 0; margin-bottom: 4px; } .step-sidebar { flex-direction: row; justify-content: space-between; flex-wrap: nowrap; gap: 6px; overflow-x: auto; padding: 4px 2px; } .step-divider { display: none; } .step-item { width: auto; flex: 1 1 0; min-width: 58px; } .step-item__label { font-size: 0.62rem; } } /* ══════════════════════════════════════════════ LEASING PARTNERS TICKER ══════════════════════════════════════════════ */ .leasing-ticker { position: relative; width: 100%; overflow: hidden; background: #06060e; border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.04); padding: 0; display: flex; align-items: stretch; } .leasing-ticker__label { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 0 20px 0 clamp(16px, 3vw, 40px); border-right: 1px solid rgba(255,255,255,0.07); background: #06060e; z-index: 5; } .leasing-ticker__label span:first-child { font-family: var(--vc-font-body), sans-serif; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.22); white-space: nowrap; } .leasing-ticker__label span:last-child { font-family: var(--vc-font-body), sans-serif; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,18,48,0.45); white-space: nowrap; } .leasing-ticker__track { flex: 1; overflow: hidden; display: flex; align-items: center; height: 76px; /* fade edges */ -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%); } .leasing-ticker__strip { display: flex; align-items: center; gap: 0; animation: leasing-scroll 90s linear infinite; width: max-content; will-change: transform; } .leasing-ticker:hover .leasing-ticker__strip, .leasing-ticker:focus-within .leasing-ticker__strip { animation-play-state: paused; } .leasing-ticker__item { flex-shrink: 0; margin: 0 12px; padding: 8px 18px; background: rgba(255,255,255,0.92); border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; height: 50px; transition: background 0.25s, box-shadow 0.25s; cursor: default; } .leasing-ticker__item:hover { background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,0.4); } .leasing-ticker__item img { height: 32px; width: auto; display: block; object-fit: contain; } @keyframes leasing-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ══════════════════ HERO GRID ══════════════════ */ .hero-grid { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: clamp(28px, 5vw, 72px); } .hero-copy { min-width: 0; } /* Stats grid — 2×2 */ .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; overflow: hidden; background: rgba(255,255,255,0.07); min-width: 280px; align-self: end; flex-shrink: 0; } .hero-stat-item { padding: 18px 20px; background: rgba(4,4,10,0.85); display: flex; flex-direction: column; align-items: flex-start; gap: 5px; } .hero-stat-num { font-family: 'Barlow Condensed', system-ui; font-size: 1.9rem; font-weight: 700; color: #fff; line-height: 1; margin-top: 2px; } .hero-stat-label { font-family: 'Inter', sans-serif; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.38); line-height: 1.3; } /* Responsive: collapse stats below text on tablet/mobile */ @media (max-width: 820px) { .hero-grid { grid-template-columns: 1fr; gap: 32px; } .hero-stats { min-width: 0; width: 100%; grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .hero-stats { grid-template-columns: 1fr 1fr; } .hero-stat-num { font-size: 1.5rem; } } /* ── HIGHWAY DIVIDER ── */ @keyframes smokeRed{0%{transform:translate(0,0) scale(.45);opacity:0}14%{opacity:.5}100%{transform:translate(-120px,-52px) scale(2.6);opacity:0}} @keyframes smokeSilver{0%{transform:translate(0,0) scale(.45);opacity:0}14%{opacity:.45}100%{transform:translate(120px,-52px) scale(2.6);opacity:0}} @keyframes flicker{0%,100%{opacity:.85}43%{opacity:.62}57%{opacity:.95}74%{opacity:.72}} @keyframes tailPulse{0%,100%{opacity:.8}50%{opacity:1}} @keyframes dashFlow{from{background-position-x:0}to{background-position-x:-96px}} @keyframes fogDrift{from{background-position-x:0}to{background-position-x:-520px}} @keyframes heroZoom{from{transform:scale(1.0)}to{transform:scale(1.08)}} /* ── SEGMENTY ── */ .seg-grid{display:grid;grid-template-columns:1fr minmax(240px,380px) 1fr;gap:clamp(1.5rem,3vw,2.5rem);align-items:center;margin-bottom:2rem} @media(max-width:860px){ .seg-grid{grid-template-columns:1fr} .seg-grid>div:nth-child(2){order:-1} } /* ── OFFERS GRID ── */ @media(max-width:1100px){#cards-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){#cards-grid{grid-template-columns:1fr}} @media (prefers-reduced-motion: reduce){ [data-smoke],[data-dash],[data-fog],[data-beam],[data-tail]{animation:none !important} } /* ── HERO SPLIT ── */ .hero-split { position: relative; background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(255,18,48,0.1), transparent 55%), linear-gradient(180deg, #040404 0%, #080808 100%); padding-top: 72px; overflow: hidden; } .hero-split__inner { display: grid; grid-template-columns: 55fr 45fr; gap: 48px; align-items: center; max-width: 1280px; margin: 0 auto; padding: clamp(48px, 6vw, 88px) clamp(1rem, 3vw, 2.5rem) clamp(32px, 4vw, 56px); min-height: calc(100svh - 72px - 100px); } .hero-split__left { display: flex; flex-direction: column; justify-content: center; gap: 0; } .hero-split__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; font-family: 'Inter', sans-serif; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: #ff1230; animation: fadeUp 0.7s ease 0.1s both; } .hero-split__h1 { margin: 0 0 20px; font-family: var(--vc-font-hero), system-ui; /* Black Ops One */ font-size: clamp(2.8rem, 5.5vw, 6.4rem); font-weight: 400; line-height: 0.92; text-transform: uppercase; color: #fff; animation: fadeUp 0.7s ease 0.2s both; } .hero-split__h1 .hs-usa { color: #3970d3; } .hero-split__h1 .hs-canada { color: #ff1230; } .hero-split__h1 .hs-sub { display: block; font-size: 0.42em; color: rgba(255,255,255,0.38); margin-top: 8px; } .hero-split__body { max-width: 500px; margin: 0 0 22px; color: rgba(248,248,248,0.78); font-size: clamp(0.88rem, 1.1vw, 1.02rem); line-height: 1.7; animation: fadeUp 0.7s ease 0.32s both; } .hero-split__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 22px; animation: fadeUp 0.7s ease 0.42s both; } .hero-split__badges { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 24px; animation: fadeUp 0.7s ease 0.5s both; } .hero-badge { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 0.74rem; font-weight: 600; color: rgba(248,248,248,0.78); line-height: 1.35; } .hero-badge svg { flex-shrink: 0; color: #ff1230; } .hero-split__stats { display: flex; flex-wrap: wrap; gap: clamp(16px, 2vw, 28px); animation: fadeUp 0.7s ease 0.58s both; } .hero-split__stat { display: flex; flex-direction: column; gap: 2px; } .hero-split__stat-num { font-family: 'Barlow Condensed', system-ui; font-size: 1.8rem; font-weight: 700; color: #fff; line-height: 1; } .hero-split__stat-label { font-family: 'Inter', sans-serif; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(255,255,255,0.36); } .hero-split__stat-div { width: 1px; background: rgba(255,255,255,0.12); align-self: stretch; margin-top: 4px; } /* RIGHT — video panel */ .hero-split__right { display: flex; align-items: center; justify-content: center; animation: fadeUp 0.8s ease 0.3s both; } .hero-split__video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,18,48,0.28); box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 24px 64px rgba(0,0,0,0.65), 0 0 40px rgba(255,18,48,0.08); } .hero-split__video-frame video { width: 100%; height: 100%; object-fit: cover; display: block; } /* corner accents */ .hero-split__video-frame::before, .hero-split__video-frame::after { content: ''; position: absolute; width: 22px; height: 22px; border-color: #ff1230; border-style: solid; z-index: 2; pointer-events: none; } .hero-split__video-frame::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; border-radius: 16px 0 0 0; } .hero-split__video-frame::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; border-radius: 0 0 16px 0; } /* BRAND BAR */ .hero-brand-bar { border-top: 1px solid rgba(255,255,255,0.06); padding: 18px clamp(1rem, 3vw, 2.5rem); background: rgba(4,4,4,0.6); } .hero-brand-bar__track { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; max-width: 1280px; margin: 0 auto; } .hero-brand { display: inline-flex; align-items: center; justify-content: center; padding: 6px 14px; background: #0d0d0f; border: 1px solid rgba(255,255,255,0.1); border-radius: 7px; font-family: 'Barlow Condensed', system-ui; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.55); transition: color 0.18s ease, border-color 0.18s ease; white-space: nowrap; } .hero-brand:hover { color: #fff; border-color: rgba(255,18,48,0.35); } .hero-brand:active { color: #fff; border-color: rgba(255,18,48,0.5); background: rgba(255,18,48,0.08); } /* ── HERO SPLIT RESPONSIVE ── */ @media (max-width: 900px) { .hero-split__inner { grid-template-columns: 1fr; gap: 32px; min-height: auto; padding-bottom: 40px; } .hero-split__right { order: -1; } .hero-split__video-frame { max-width: 100%; } .hero-split__badges { grid-template-columns: 1fr; } .hero-split__h1 { font-size: clamp(2.4rem, 8vw, 4rem); } } @media (max-width: 600px) { .hero-split__badges { display: none; } .hero-brand-bar__track { gap: 6px; } } /* ── S5: Page hero H1 title class (replaces per-page inline styles) ── */ .page-hero__title { margin: 0 0 16px; font-family: var(--vc-font-hero); /* Black Ops One */ font-size: clamp(3rem, 6vw, 6rem); font-weight: 400; text-transform: uppercase; line-height: 0.88; letter-spacing: -0.01em; color: #fff; } @media (prefers-reduced-motion: reduce) { .vc-leasing-wrap:hover .vc-leasing-track { animation-play-state: paused !important; } [class*="flicker"], .hero-bg-video, .hero-split__bg video { animation: none !important; opacity: 1 !important; } [class*="fogDrift"], [data-fog] { animation: none !important; opacity: 0.4 !important; } [class*="heroZoom"], .hero-zoom-bg { animation: none !important; transform: none !important; } [class*="fadeUp"], [data-reveal], .reveal-up { animation: none !important; opacity: 1 !important; transform: none !important; } } /* ── Mobile nav (canonical header) ─────────────────────────────── */ .mobile-nav { display: none; position: fixed; inset: 0; z-index: 999; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; padding: clamp(48px,8vw,80px) clamp(24px,6vw,56px); background: rgba(4,4,4,.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); overflow-y: auto; } .mobile-nav[aria-hidden="false"] { display: flex; } .mobile-nav__link { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(2rem, 8vw, 3rem); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; color: #fff; text-decoration: none; opacity: .75; transition: opacity .2s, color .2s; line-height: 1.15; } .mobile-nav__link:hover, .mobile-nav__link[data-active] { opacity: 1; color: #FF1230; } .mobile-nav .vc-btn { margin-top: 24px; font-size: .85rem; } /* Close on desktop */ @media (min-width: 901px) { .mobile-nav { display: none !important; } } /* Production audit polish: overflow, reduced-motion and section rhythm */ html, body { max-width: 100%; overflow-x: clip; } .vc-brand-marquee, .vc-brand-marquee__viewport { max-width: 100%; overflow: hidden; } .vc-brand-marquee__track { max-width: none; } .pin-spacer { max-width: 100%; overflow: visible; } @media (max-width: 640px) { .vc-brand-marquee { padding-left: 0 !important; padding-right: 0 !important; } .vc-brand-marquee__track { animation-duration: 180s !important; } } @media (max-width: 900px) { .real-premium-section, .catalog, .catalog-cta-section, .tracking-section, .about-section, .process-section { padding-top: clamp(42px, 9vw, 64px) !important; padding-bottom: clamp(42px, 9vw, 64px) !important; } #hummer-lights-section { padding-top: 48px !important; padding-bottom: 56px !important; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .vc-brand-marquee__track, .vc-hd__dash, .vc-hd__fog, .vc-hd__beam, .vc-hd__smoke { animation: none !important; } .pin-spacer { height: auto !important; min-height: 0 !important; padding: 0 !important; } [data-highway-gsap], [data-reveal] { opacity: 1 !important; transform: none !important; visibility: visible !important; } }