@font-face {
    font-family: 'Akbar';
    src: url('assets/fonts/akbar.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
    --bg-yellow: #FFC82D;
    --color-black: #000000;
    --color-white: #ffffff;
    --color-red: #E63946;
    
    --font-heading: 'Bricolage Grotesque', sans-serif;
    --font-body: 'Poppins', sans-serif;
    --font-subtext: 'Poppins', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

body {
    background-color: var(--bg-yellow);
    color: var(--color-black);
    font-family: var(--font-body);
    overflow-x: clip;
    min-height: 100vh;
}

main {
    width: 100%;
    display: block;
}

.container {
    width: 100%;
    max-width: 1420px;
    margin: 0 auto;
    padding: 0 3.5rem;
    box-sizing: border-box;
}

/* Header - Sticky Navigation Architecture (Zero Layout Shift on Load) */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    padding: calc(1.2rem - 0.52rem * var(--scroll-progress, 0)) 0;
    flex-shrink: 0;
    background: transparent;
    border-bottom: none;
}

/* Progressive Ultra-Luxury Royal Obsidian Burgundy Liquid Glass Layer */
.site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(28, 6, 15, 0.82) 0%, rgba(18, 3, 9, 0.74) 100%);
    backdrop-filter: blur(28px) saturate(190%) contrast(105%);
    -webkit-backdrop-filter: blur(28px) saturate(190%) contrast(105%);
    box-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.65),
                inset 0 1px 0 rgba(247, 236, 221, 0.28),
                inset 0 -1px 0 rgba(247, 236, 221, 0.06);
    border-bottom: 1px solid rgba(247, 236, 221, 0.12);
    opacity: var(--scroll-progress, 0);
    pointer-events: none;
    z-index: 0;
    will-change: opacity, transform;
    transform: translateZ(0);
}

/* Interactive Cursor Refraction Light on Liquid Glass (Inteligentny na otoczenie) */
.site-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(320px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(247, 236, 221, 0.14), transparent 70%);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    will-change: opacity, transform;
    transform: translateZ(0);
}

.site-header:hover::after {
    opacity: var(--scroll-progress, 0);
}

.site-header .logo-svg {
    transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: center center;
    display: block;
}

.site-header.is-scrolled .logo-svg {
    transform: scale(0.88);
}

/* Scrolled Nav Links - Crisp Pure Ivory White on Obsidian Glass */
.site-header.is-scrolled .nav-link,
.site-header.is-scrolled .nav-link:visited {
    color: #FFF9F1 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
}

.site-header.is-scrolled .nav-link::after {
    background: #FFF9F1 !important;
    box-shadow: 0 0 10px rgba(255, 249, 241, 0.8) !important;
}

.site-header.is-scrolled .nav-link:hover,
.site-header.is-scrolled .nav-link.is-active {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.08) !important;
    transform: translateY(-1.5px) !important;
}

.site-header.is-scrolled .nav-link:hover::after,
.site-header.is-scrolled .nav-link.is-active::after {
    width: calc(100% - 24px) !important;
    opacity: 1 !important;
}

/* Scrolled Button Wycena - Crisp Ivory Pill with Deep Burgundy Text */
.site-header.is-scrolled .nav-btn-wycena {
    background: #FFF9F1 !important;
    color: #1F050E !important;
    font-weight: 700 !important;
    padding: 0.52rem 1.6rem !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    transform: scale(0.96);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, background-color 0.25s ease !important;
}

.site-header.is-scrolled .nav-btn-wycena:hover {
    background: #FFFFFF !important;
    color: #1F050E !important;
    transform: scale(1.02) translateY(-1px) !important;
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.25) !important;
}

/* Mathematical Centering Grid for Navigation (Logo is 100% dead center, 0px shift) */
.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
    width: 100%;
}

.nav-left {
    display: flex;
    gap: 3.2rem;
    align-items: center;
    flex: 1 1 0%;
    justify-content: flex-start;
}

.nav-right {
    display: flex;
    gap: 3.2rem;
    align-items: center;
    flex: 1 1 0%;
    justify-content: flex-end;
}

.logo {
    flex: 0 0 auto;
    text-decoration: none;
    font-family: 'Akbar', sans-serif;
    font-size: 4.2rem;
    color: var(--color-white);
    -webkit-text-stroke: 2.5px var(--color-black);
    text-shadow: 5px 5px 0px var(--color-black);
    position: relative;
    letter-spacing: -1px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Nav Links - Pure Ivory White Underline & Soft Pill */
.nav-link,
.nav-link:visited {
    text-decoration: none;
    color: #FFF9F1 !important;
    font-weight: 700;
    font-size: 1.15rem;
    position: relative;
    padding: 0.25rem 0.6rem;
    border-radius: 9999px;
    transition: color 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Subtelne, eleganckie podkreślenie w kolorze kości słoniowej / białym (#FFF9F1) */
.nav-link::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1.5px;
    bottom: -2px;
    left: 0;
    background: #FFF9F1;
    box-shadow: 0 0 10px rgba(255, 249, 241, 0.8);
    transform-origin: center;
    transform: scaleX(0);
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 2px;
}

.nav-link:hover::after,
.nav-link.is-active::after {
    transform: scaleX(1);
}

.nav-link:hover,
.nav-link.is-active {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
}

.logo-sub {
    font-family: 'Akbar', sans-serif;
    font-size: 1.2rem;
    position: absolute;
    bottom: -15px;
    right: -10px;
    color: var(--bg-yellow);
    -webkit-text-stroke: 1.5px var(--color-black);
    text-shadow: 2px 2px 0px var(--color-black);
}

.sound-toggle {
    background: transparent;
    border: 3px solid var(--color-black);
    border-radius: 50px;
    padding: 0.4rem 1.4rem;
    font-weight: 700;
    font-family: inherit;
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: 4px 4px 0px var(--color-black);
    transition: transform 0.1s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sound-toggle:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px var(--color-black);
}

/* Hero Section */
.hero-section {
    min-height: calc(100vh - 85px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 2rem 0 3rem 0;
    box-sizing: border-box;
    width: 100%;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6.5rem;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1420px;
    margin: auto;
    padding: 0 3.5rem;
    box-sizing: border-box;
}

/* Left Column: Graphic Area */
.hero-graphic-col {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    margin: 0;
}


/* 3D browser tilt wrapper — drop-shadow tracks real 3D shape */
.browser-3d-wrapper {
    filter: none;
    transition: filter 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    justify-content: center;
    width: 100%;
}

.browser-3d-wrapper:hover {
    filter: none;
}







.browser-container {
    width: 100%;
    max-width: 540px;
    background: #000000;
    background-clip: padding-box;
    border: 3.5px solid #000000;
    border-radius: 20px;
    overflow: hidden;
    z-index: 2;
    transform: perspective(900px) rotateY(6deg) rotateX(2deg) rotate(-0.5deg);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1), border 0.4s, background 0.4s;
    transform-style: preserve-3d;
    box-shadow: 4px 6px 0px rgba(0,0,0,1);
    display: flex;
    flex-direction: column;
    aspect-ratio: 4 / 3.3;
}

.browser-container.glass-clock-mode {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.browser-container.glass-clock-mode .browser-header {
    display: none !important;
}

.browser-container:hover {
    transform: perspective(900px) rotateY(2deg) rotateX(1deg) rotate(0deg);
}

.browser-header {
    height: 40px;
    background: #f8f9fa;
    border-bottom: 2px solid #000000;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    position: relative;
    flex-shrink: 0;
}

.browser-dots {
    display: flex;
    gap: 6px;
    background: transparent;
    border: none;
    padding: 0;
}

.browser-dot {
    width: 9px;
    height: 9px;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 50%;
}
.browser-dot.red { background: #ff5f56; }
.browser-dot.yellow { background: #ffbd2e; }
.browser-dot.green { background: #27c93f; }

.browser-address {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    border: 1.5px solid #000000;
    border-radius: 20px;
    padding: 2px 1.2rem;
    font-size: 0.72rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 600;
    color: #202124;
}

/* ================== GOOGLE STYLE OVERRIDES ================== */
.browser-container.google-style .browser-header {
    height: 40px;
    background: #f8f9fa;
    border-bottom: 2px solid #000000;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    position: relative;
    flex-shrink: 0;
}

.browser-container.google-style .browser-dots {
    background: transparent;
    border: none;
    padding: 0;
    gap: 6px;
}

.browser-container.google-style .browser-dot {
    width: 9px;
    height: 9px;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 50%;
}
.browser-container.google-style .browser-dot.red { background: #ff5f56; }
.browser-container.google-style .browser-dot.yellow { background: #ffbd2e; }
.browser-container.google-style .browser-dot.green { background: #27c93f; }

.browser-container.google-style .browser-address {
    background: #ffffff;
    border: 1.5px solid #000000;
    border-radius: 20px;
    padding: 2px 1.2rem;
    font-size: 0.72rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 600;
    color: #202124;
}
.browser-content {
    flex: 1;
    padding: 0.8rem 1rem 1rem 1rem;
    background: #FFE000; /* Vivid Electric Yellow — only dashboard */
    display: flex;
    flex-direction: column;
}

/* Dashboard Header & Centered Title */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
    flex-shrink: 0;
    width: 100%;
}

.header-left, .header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dash-panel-title {
    font-family: 'Akbar', sans-serif;
    font-size: 1.45rem;
    color: var(--color-black);
    letter-spacing: 1px;
    display: inline-block;
    transform-origin: center;
}

.dash-panel-title.title-animate {
    animation: titlePopChange 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes titlePopChange {
    0% { transform: scale(1) rotate(0deg); opacity: 1; }
    45%, 55% { transform: scale(0) rotate(-10deg); opacity: 0; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* Header Mock Elements */
.dash-search-mock {
    background: var(--color-white);
    border: 2px solid var(--color-black);
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 0.6rem;
    cursor: pointer;
    box-shadow: 2px 2px 0px var(--color-black);
}

.dash-avatar {
    background: var(--color-white);
    border: 2px solid var(--color-black);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    box-shadow: 2px 2px 0px var(--color-black);
}

.card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* Trend Badges */
.trend-badge {
    font-family: var(--font-heading);
    font-size: 0.58rem;
    border: 1.5px solid var(--color-black);
    border-radius: 8px;
    padding: 1px 6px;
    box-shadow: 1.5px 1.5px 0px var(--color-black);
    line-height: 1;
}
.trend-badge.green {
    background: #2ecc71;
}

/* Goal progress bar */
.goal-progress-bar {
    width: 100%;
    height: 7px;
    background: rgba(0, 0, 0, 0.1);
    border: 1.5px solid var(--color-black);
    border-radius: 4px;
    overflow: hidden;
    margin-top: auto;
}

.goal-progress-fill {
    height: 100%;
    background: var(--color-black);
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Online beacon */
.pulse-beacon {
    width: 6px;
    height: 6px;
    background: #2ecc71;
    border-radius: 50%;
    display: block;
    box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.4);
    animation: beaconPulse 1.2s infinite;
}

@keyframes beaconPulse {
    0% { box-shadow: 0 0 0 0px rgba(46, 204, 113, 0.7); }
    100% { box-shadow: 0 0 0 6px rgba(46, 204, 113, 0); }
}

/* User avatars list */
.online-avatars {
    display: flex;
    align-items: center;
    margin-top: auto;
}

.avatar-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--color-black);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    font-family: var(--font-heading);
    color: var(--color-black);
    background: var(--color-white);
    margin-left: -5px;
    box-shadow: 1px 1px 0px var(--color-black);
}
.avatar-dot.avatar-1 { margin-left: 0; background: #ffbd2e; }
.avatar-dot.avatar-2 { background: #ff5f56; }
.avatar-dot.avatar-3 { background: #27c93f; }
.avatar-dot.avatar-plus { background: var(--color-black); color: var(--color-white); }

/* Sparkline charts */
.sparkline-container {
    width: 100%;
    height: 18px;
    margin-top: auto;
}

.sparkline-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

#sparkline-path {
    transition: d 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mini card labels and descriptions */
.mini-card-top {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.mini-card-sub {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 0.44rem;
    text-transform: uppercase;
    margin-top: 5px;
    letter-spacing: 0.3px;
    line-height: 1;
    padding: 2px 6px;
    border: 1.5px solid var(--color-black);
    border-radius: 6px;
    box-shadow: 1px 1px 0px var(--color-black);
    display: inline-block;
}
.mini-card-sub.text-green {
    background: #00d2d3; /* solid turquoise contrast pill */
    background: #2ecc71; /* High contrast green pill */
    color: var(--color-black);
}
.mini-card-sub.text-red {
    background: #ff7675; /* High contrast red pill */
    color: var(--color-black);
}

/* Dashboard Grid Layout */
.dashboard-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1.8fr 1fr;
    gap: 0.6rem;
    height: 100%;
}

/* Card Widget Styles (Super Colorful & Playful) */
.dash-card {
    background: var(--color-white);
    border: 3px solid var(--color-black);
    border-radius: 12px;
    box-shadow: 4px 4px 0px var(--color-black);
    padding: 0.6rem 0.8rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.2s;
}

.dash-card:hover {
    transform: scale(1.05) rotate(1deg);
}

.chart-card {
    grid-column: 1 / 2;
    justify-content: space-between;
    background: #ff9f43; /* Bright Orange Card */
}

.circle-card {
    grid-column: 2 / 3;
    align-items: center;
    justify-content: space-between;
    background: #ff6b6b; /* Soft Coral Red Card */
}

.online-card {
    grid-column: 3 / 4;
    background: #e84393; /* Vibrant Pink Card */
    justify-content: space-between;
}

.online-indicator-bar {
    display: flex;
    gap: 3px;
    align-items: flex-end;
    height: 18px;
    margin-top: 4px;
}

.bar-fill {
    width: 6px;
    background: var(--color-black);
    border: 1.5px solid var(--color-black);
    border-radius: 2px;
    transform-origin: bottom;
    animation: barBounce 1.5s infinite alternate ease-in-out;
}

.fill-1 { height: 35%; animation-delay: 0.1s; }
.fill-2 { height: 80%; animation-delay: 0.3s; }
.fill-3 { height: 50%; animation-delay: 0.2s; }
.fill-4 { height: 95%; animation-delay: 0.4s; }

@keyframes barBounce {
    0% { transform: scaleY(0.7); }
    100% { transform: scaleY(1); }
}

.mini-card {
    grid-row: 2 / 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
}
.mini-card.card-a { background: #00d2d3; } /* Vibrant Turquoise */
.mini-card.card-b { background: #1dd1a1; } /* Lively Mint Green */
.mini-card.card-c { background: #a29bfe; } /* Soft Lilac Purple */

/* Card Components */
.card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.dash-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 1.5px solid var(--color-black);
}
.dash-dot.blue { background: #3b82f6; }
.dash-dot.pink { background: #ec4899; }

/* ═══════════════════════════════════════════════════
   HERO CENTER SEO BADGE (TOP CENTER OF HERO)
   ═══════════════════════════════════════════════════ */
.hero-center-badge {
    position: relative;
    z-index: 30;
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 1.8rem;
}

.hero-seo-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.35rem 0.95rem;
    background: rgba(0, 0, 0, 0.05);
    border: 1.5px solid var(--color-black);
    border-radius: 9999px;
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-black);
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.15);
    width: fit-content;
    white-space: nowrap;
}

.hero-seo-badge .badge-icon {
    width: 12px;
    height: 12px;
    color: var(--color-black);
    flex-shrink: 0;
}

.main-heading {
    font-family: var(--font-heading);
    font-size: 4.8rem;
    line-height: 0.95;
    color: var(--color-black);
    text-transform: uppercase;
    letter-spacing: -1.5px;
    margin-bottom: 2.5rem;
    text-shadow: 4px 4px 0px rgba(0,0,0,0.1);
}

.dash-card-title {
    font-family: var(--font-heading);
    font-size: 0.68rem;
    color: var(--color-black);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-stat {
    font-family: 'Baloo 2', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--color-black);
    margin-top: 1px;
    line-height: 1.1;
}

/* Donut Chart Overlay */
.donut-container {
    position: relative;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
}

.donut-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Baloo 2', sans-serif;
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--color-black);
    line-height: 1;
}

/* Mini Cards elements */
.mini-card-label {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 0.6rem;
    color: var(--color-black);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
}

.mini-card-val {
    font-family: 'Baloo 2', sans-serif;
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--color-black);
    line-height: 1;
    margin-top: 1px;
}

/* Chart Container & Line Drawing */
.chart-container {
    flex: 1;
    display: flex;
    align-items: flex-end;
    position: relative;
    padding-top: 5px;
}

.chart-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.chart-wave {
    stroke: var(--color-black);
    stroke-width: 4px;
    stroke-linecap: round;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    transition: d 1.2s cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#chart-wave-fill {
    transition: d 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Donut Chart Animation */
.donut-container {
    position: relative;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
}

.donut-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.donut-ring {
    stroke: rgba(0, 0, 0, 0.15);
    stroke-width: 5px;
}

.donut-segment {
    stroke: var(--color-black);
    stroke-width: 5px;
    stroke-linecap: round;
    stroke-dasharray: 88;
    stroke-dashoffset: 88;
    transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Keyframe Animations */
@keyframes drawWave {
    0% { stroke-dashoffset: 400; }
    100% { stroke-dashoffset: 0; }
}

@keyframes drawDonut {
    0% { stroke-dashoffset: 88; }
    100% { stroke-dashoffset: 25; }
}

@keyframes browserFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(1deg); }
}

/* Jagged explosion bubble overlapping top-left of the browser */
.explosion-bubble-container {
    position: absolute;
    top: -30px;
    left: -65px;
    z-index: 12;
    width: 320px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotate(-10deg);
    animation: bubbleWiggle 4s ease-in-out infinite alternate;
}

@keyframes bubbleWiggle {
    0% { transform: rotate(-10deg) scale(1); }
    100% { transform: rotate(-7deg) scale(1.05); }
}

.explosion-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Shadow drop effect */
.explosion-svg path[fill="black"] {
    transform: translate(8px, 8px);
}

.bubble-text-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.bubble-small {
    display: block;
    color: var(--color-red);
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 0.3rem;
}

.bubble-large {
    font-family: var(--font-heading);
    color: var(--color-red);
    font-size: 3.2rem;
    line-height: 0.9;
    text-transform: uppercase;
}

/* Floating stars */
.star-icon {
    font-size: 2.2rem;
    font-weight: bold;
    position: absolute;
    color: var(--color-white);
    -webkit-text-stroke: 2px var(--color-black);
    text-shadow: 3px 3px 0px var(--color-black);
    z-index: 5;
}

.star-1 {
    top: 40px;
    left: 310px;
    transform: rotate(15deg);
}

.star-2 {
    bottom: 120px;
    left: 10px;
    transform: rotate(-15deg);
}

.star-3 {
    bottom: 220px;
    right: 40px;
    transform: rotate(25deg);
}

/* Right Column: Typography & Column Text */

.subtext-col {
    position: relative;
    height: 100%;
}

.subtext-container {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 0;
    height: auto;
    min-height: 8.5rem;
    overflow: visible;
}

.subtext, .subtext-small {
    position: relative;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 500;
    font-size: 0.96rem;
    line-height: 1.55;
    color: #1a1a1a;
    letter-spacing: -0.15px;
}

.subtext .elem-lead, .subtext-small .elem-lead {
    font-weight: 800;
    font-size: 1.05rem;
    color: #000000;
}

.premium-slide-line.premium-line-lead, .premium-slide-line.premium-line-lead-last {
    display: block;
    position: relative;
    overflow: visible;
    min-height: 3.5rem;
    margin-bottom: 0.2rem;
    line-height: 1.35;
}

.hero-text-col {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
    padding-top: 0;
    height: auto;
    width: 100%;
    max-width: 580px;
    margin-left: auto;
}

.main-heading {
    position: relative;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 3.8rem;
    line-height: 1.06;
    text-transform: none;
    font-stretch: normal;
    transition: opacity 0.25s ease;
    min-height: 12.5rem;
    height: auto;
    margin-bottom: 1.5rem;
    overflow: visible;
}






.cta-buttons {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-top: 1.2rem;
}

.btn-icon {
    width: 60px;
    height: 60px;
    background: var(--color-white);
    border: 4px solid var(--color-black);
    border-radius: 50%;
    font-size: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 4px 4px 0px var(--color-black);
    transition: transform 0.1s;
    font-weight: bold;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

#btn-prev, #btn-next {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

.btn-icon:active {
    transform: translate(4px, 4px);
    box-shadow: 0px 0px 0px var(--color-black);
}

/* Slider progress: bar first, then the two dots */
.slider-progress-wrapper {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.progress-bar {
    width: 80px;
    height: 10px;
    background-color: var(--color-black);
    border-radius: 50px;
    position: relative;
    overflow: hidden;
}

.progress-fill {
    width: 0%;
    height: 100%;
    background-color: var(--color-white);
    border-radius: 50px;
    animation: timerFill 7.5s linear forwards;
}

.slider-progress-wrapper .dot {
    width: 10px;
    height: 10px;
    background-color: var(--color-black);
    border-radius: 50%;
    cursor: pointer;
    display: inline-block;
    transition: transform 0.2s ease;
}

.slider-progress-wrapper .dot:hover {
    transform: scale(1.3);
}

@keyframes timerFill {
    0%   { width: 0%; }
    100% { width: 100%; }
}

.scroll-down-icon {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: opacity 0.3s;
}

/* Quality Guarantee Signature */
.signature-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    z-index: 10;
    opacity: 0;
    animation: containerLoop 20s infinite 1s;
    margin-top: 18px;
}

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

.signature-title {
    font-family: 'Baloo 2', sans-serif;
    font-weight: 800;
    font-size: 1.35rem;
    color: var(--color-black);
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0;
    animation: titleFade 20s infinite 1s;
}

.stamp-wrapper {
    position: relative;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stamp-svg {
    width: 100%;
    height: 100%;
    display: block;
    transform-origin: center;
    transform: rotate(-12deg);
    animation: stampSlam 20s infinite 1s;
}

.signature-svg {
    width: 220px;
    height: auto;
    margin-top: 5px;
}

.signature-path {
    stroke: var(--color-black);
    stroke-width: 3.5px;
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    animation: signatureDraw 20s infinite 1s;
}

@keyframes containerLoop {
    0%, 100% { opacity: 0; }
    2%, 80% { opacity: 1; }
    85% { opacity: 0; }
}

@keyframes titleFade {
    0%, 100% { opacity: 0; transform: translateY(5px); }
    3%, 80% { opacity: 0.9; transform: translateY(0); }
    85% { opacity: 0; }
}

@keyframes stampSlam {
    0%, 9% {
        opacity: 0;
        transform: scale(3.5) rotate(-45deg);
    }
    10% {
        opacity: 1;
        transform: scale(1) rotate(-12deg);
    }
    11% {
        transform: scale(1) rotate(-12deg) translate(2px, -2px);
    }
    12% {
        transform: scale(1) rotate(-12deg) translate(-1px, 1px);
    }
    13%, 80% {
        opacity: 1;
        transform: scale(1) rotate(-12deg);
    }
    85%, 100% {
        opacity: 0;
        transform: scale(0.8) rotate(-12deg);
    }
}

@keyframes signatureDraw {
    0% { stroke-dashoffset: 800; }
    15%, 80% { stroke-dashoffset: 0; }
    85%, 100% { stroke-dashoffset: 800; }
}

/* Responsive Styles */
@media (max-width: 1200px) {
    .cta-buttons {
        justify-content: center;
    }
}

/* Base Mobile Menu Defaults (Hidden on Desktop > 900px) */
.mobile-action-pills {
    display: none !important;
}
.mobile-pill-kontakt {
    display: none !important;
}
.pill-shimmer-sweep,
.nav-pulse-dot {
    display: none;
}
.mobile-hamburger-btn {
    display: none !important;
}
.mobile-nav-drawer {
    display: none !important;
}

/* ═══════════════════════════════════════════════════
   MODERN MOBILE ARCHITECTURE (FLOATING PILLS & BESPOKE DRAWER)
   - Transparent top bar (no heavy darkened banner)
   - NO "STUDIO" logo on mobile (hidden)
   - TWO floating animated pills: "Wycena" + "Kontakt"
   - Bespoke modern custom hamburger button
   - Drawer with luxury PIGUŁKI (pills), sand accents,
     and dynamic staggered spring entrance
   - 0% Desktop Impact (strictly <= 900px)
   ═══════════════════════════════════════════════════ */
@media (max-width: 900px) {
    /* 1. Fully Transparent Floating Top Bar Container (No Sudden Snapping) */
    .site-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
        height: auto !important;
        min-height: unset !important;
        max-height: unset !important;
        padding: 10px 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
        pointer-events: none !important; /* Lets clicks pass through empty space */
        transition: none !important; /* Eliminate jerky padding/height steps */
    }

    .site-header::before,
    .site-header::after {
        display: none !important;
    }

    .nav-container {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        pointer-events: none !important;
    }

    /* Absolute Removal of "STUDIO" Logo and Desktop Left Nav on Mobile */
    .site-header .logo,
    .site-header .nav-left {
        display: none !important;
    }

    /* Nav Right as Full-Width Floating Pill Bar */
    .nav-right {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        flex: 1 1 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: none !important;
    }

    /* Hide Desktop Links and Buttons on Mobile */
    .site-header .nav-right .nav-link,
    .site-header .nav-right .nav-btn-wycena {
        display: none !important;
    }

    /* 2. Single Floating Action Pill: KONTAKT (Left Side) */
    .mobile-action-pills {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        pointer-events: auto !important;
    }

    /* Hide Wycena button on mobile - strictly 1 pill: KONTAKT */
    .site-header .nav-right .mobile-pill-wycena,
    .mobile-action-pills .mobile-pill-wycena {
        display: none !important;
    }

    /* Single Luxury Sand-Cream Dynamic Island KONTAKT Pill (Apple-Style Expansion) */
    .site-header .nav-right .mobile-pill-kontakt,
    .site-header .mobile-pill-kontakt,
    .mobile-action-pills .mobile-pill-kontakt {
        position: relative !important;
        overflow: hidden !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 8px 16px !important;
        background: #F7ECDD !important;
        color: #0E0409 !important;
        font-family: var(--font-heading) !important;
        text-decoration: none !important;
        border-radius: 9999px !important;
        border: 1px solid rgba(255, 255, 255, 0.45) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
        -webkit-tap-highlight-color: transparent !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        transition: box-shadow 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                    border-color 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                    background 0.3s ease !important;
        will-change: box-shadow, transform;
    }

    .site-header .mobile-pill-kontakt::after {
        display: none !important;
    }

    .mobile-pill-kontakt.is-expanded {
        border-color: rgba(16, 185, 129, 0.45) !important;
        box-shadow: 0 4px 22px rgba(16, 185, 129, 0.30), 0 2px 8px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
    }

    .mobile-pill-kontakt .pill-title-text {
        color: #0E0409 !important;
        font-weight: 800 !important;
        font-size: 0.88rem !important;
        letter-spacing: -0.2px !important;
        line-height: 1 !important;
        flex-shrink: 0 !important;
    }

    /* Apple Dynamic Island Expandable Tray: Unhurried, Silky Fluid Expansion */
    .mobile-pill-kontakt .pill-status-wrap {
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        max-width: 0 !important;
        opacity: 0 !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        transform: translateX(-10px) scale(0.92) !important;
        pointer-events: none !important;
        /* Closing transition: gentle, calm 0.95s collapse */
        transition: max-width 0.95s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.6s ease,
                    transform 0.95s cubic-bezier(0.4, 0, 0.2, 1) !important;
        will-change: max-width, opacity, transform;
    }

    .mobile-pill-kontakt.is-expanded .pill-status-wrap {
        max-width: 130px !important;
        opacity: 1 !important;
        transform: translateX(0) scale(1) !important;
        pointer-events: auto !important;
        /* Opening transition: majestic, slow 1.25s fluid spring unroll */
        transition: max-width 1.25s cubic-bezier(0.16, 1, 0.3, 1),
                    opacity 0.85s 0.08s ease,
                    transform 1.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .mobile-pill-kontakt .pill-sep {
        color: rgba(14, 4, 9, 0.32) !important;
        font-weight: 800 !important;
        font-size: 0.88rem !important;
        line-height: 1 !important;
        margin: 0 1px 0 2px !important;
        flex-shrink: 0 !important;
    }

    /* Active Beacon Pulse Dot (Green Live Concierge) */
    .mobile-pill-kontakt .pill-status-dot {
        display: inline-block !important;
        width: 7px !important;
        height: 7px !important;
        min-width: 7px !important;
        border-radius: 50% !important;
        background: #10B981 !important;
        box-shadow: 0 0 6px #10B981, 0 0 12px rgba(16, 185, 129, 0.7) !important;
        flex-shrink: 0 !important;
        animation: pillLivePulse 1.8s infinite ease-in-out !important;
    }

    @keyframes pillLivePulse {
        0%, 100% {
            transform: scale(1);
            opacity: 0.9;
            box-shadow: 0 0 6px #10B981;
        }
        50% {
            transform: scale(1.35);
            opacity: 1;
            box-shadow: 0 0 10px #10B981, 0 0 16px rgba(16, 185, 129, 0.85);
        }
    }

    .mobile-pill-kontakt .pill-status-text {
        color: #1A040F !important;
        font-weight: 700 !important;
        font-size: 0.74rem !important;
        letter-spacing: -0.05px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* Micro-animation: Active Spring Compression */
    .mobile-pill-kontakt:active {
        transform: scale(0.93) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    }

    /* Micro-animation: Ambient Light Sheen Sweep across Cream Surface */
    .mobile-pill-kontakt .pill-shimmer-sweep {
        position: absolute !important;
        top: 0 !important;
        left: -120% !important;
        width: 60% !important;
        height: 100% !important;
        background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.7) 50%, transparent 100%) !important;
        transform: skewX(-25deg) !important;
        animation: pillSweepAnim 4.5s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
        pointer-events: none !important;
    }

    @keyframes pillSweepAnim {
        0%, 25% { left: -120%; }
        55%, 100% { left: 220%; }
    }

    /* Continuous Butter-Smooth Scroll Elevation (NO abrupt jump or padding snap) */
    .site-header.is-scrolled .mobile-pill-kontakt {
        transform: translateY(0) !important;
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55), 0 0 16px rgba(247, 236, 221, 0.28) !important;
        border-color: rgba(255, 255, 255, 0.6) !important;
    }

    .site-header.scroll-up .mobile-pill-kontakt {
        transform: translateY(-1px) !important;
    }

    /* 3. Bespoke Modern Architectural CIRCLE Hamburger (border-radius: 50%) */
    .mobile-hamburger-btn {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        background: rgba(18, 4, 11, 0.82) !important;
        backdrop-filter: blur(24px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
        border: 1px solid rgba(247, 236, 221, 0.28) !important;
        border-radius: 50% !important; /* PERFECT CIRCLE */
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
        cursor: pointer !important;
        position: relative !important;
        pointer-events: auto !important;
        -webkit-tap-highlight-color: transparent !important;
        transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 0.35s ease,
                    background 0.3s ease,
                    border-color 0.35s ease !important;
    }

    .mobile-hamburger-btn:active {
        transform: scale(0.88) !important;
        background: rgba(247, 236, 221, 0.18) !important;
        border-color: rgba(247, 236, 221, 0.45) !important;
    }

    /* Kinetic 2-Bar Architectural Hamburger */
    .hamburger-icon-wrapper {
        display: block !important;
        width: 18px !important;
        height: 14px !important;
        position: relative !important;
    }

    .hamburger-bar-top {
        display: block !important;
        width: 18px !important;
        height: 2px !important;
        background: #F7ECDD !important;
        border-radius: 2px !important;
        position: absolute !important;
        top: 3px !important;
        left: 0 !important;
        transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), top 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.25s !important;
        transform-origin: center !important;
    }

    .hamburger-bar-bottom {
        display: block !important;
        width: 12px !important;
        height: 2px !important;
        background: #F7ECDD !important;
        border-radius: 2px !important;
        position: absolute !important;
        bottom: 3px !important;
        left: 0 !important;
        transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), bottom 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
        transform-origin: center !important;
    }

    /* Active State (Kinetic Enter Animation with Ripple + Spring Razor-Sharp 'X' + Luminous Halo) */
    .mobile-hamburger-btn.is-active {
        animation: hamburgerCircleEnter 0.52s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
        background: rgba(247, 236, 221, 0.22) !important;
        border-color: rgba(247, 236, 221, 0.55) !important;
        box-shadow: 0 0 28px rgba(247, 236, 221, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
    }

    @keyframes hamburgerCircleEnter {
        0% {
            transform: scale(1) rotate(0deg);
        }
        20% {
            transform: scale(0.84) rotate(-24deg);
        }
        60% {
            transform: scale(1.14) rotate(196deg);
        }
        82% {
            transform: scale(0.97) rotate(176deg);
        }
        100% {
            transform: scale(1.05) rotate(180deg);
        }
    }

    /* Radiating Luminous Pulse Ripple on Enter */
    .mobile-hamburger-btn::after {
        content: '' !important;
        position: absolute !important;
        inset: -1px !important;
        border-radius: 50% !important;
        border: 1.5px solid rgba(247, 236, 221, 0.8) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transform: scale(1) !important;
    }

    .mobile-hamburger-btn.is-active::after {
        animation: hamburgerPulseRipple 0.62s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    }

    @keyframes hamburgerPulseRipple {
        0% {
            transform: scale(0.9);
            opacity: 0.9;
            border-color: rgba(247, 236, 221, 0.9);
            box-shadow: 0 0 16px rgba(247, 236, 221, 0.65);
        }
        40% {
            opacity: 0.55;
        }
        100% {
            transform: scale(1.68);
            opacity: 0;
            border-color: rgba(247, 236, 221, 0);
            box-shadow: 0 0 26px rgba(247, 236, 221, 0);
        }
    }

    .mobile-hamburger-btn.is-active .hamburger-bar-top {
        top: 6px !important;
        transform: rotate(45deg) !important;
        background: #FFFFFF !important;
        transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), top 0.32s ease, background 0.2s !important;
    }

    .mobile-hamburger-btn.is-active .hamburger-bar-bottom {
        width: 18px !important;
        bottom: 6px !important;
        transform: rotate(-45deg) !important;
        background: #FFFFFF !important;
        transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), bottom 0.32s ease, width 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s !important;
    }

    /* 4. Luxury 3/4 Side-Sheet Mobile Drawer */
    .mobile-nav-drawer {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 99999 !important;
        pointer-events: none !important;
        visibility: hidden !important;
        transition: visibility 0.4s ease !important;
    }

    .mobile-nav-drawer.is-open {
        pointer-events: auto !important;
        visibility: visible !important;
    }

    .mobile-nav-backdrop {
        position: absolute !important;
        inset: 0 !important;
        background: rgba(10, 2, 7, 0.60) !important;
        backdrop-filter: blur(12px) saturate(140%) !important;
        -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
        opacity: 0 !important;
        transition: opacity 0.38s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .mobile-nav-drawer.is-open .mobile-nav-backdrop {
        opacity: 1 !important;
    }

    /* 3/4 Width Slide-out Sheet (~78-80vw, leaves remaining 1/4 page visible & dimmed) */
    .mobile-nav-panel {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        width: clamp(292px, 78vw, 335px) !important;
        height: 100% !important;
        background: linear-gradient(180deg, #16040C 0%, #0D0207 100%) !important;
        border-left: 1px solid rgba(247, 236, 221, 0.22) !important;
        border-top-left-radius: 24px !important;
        border-bottom-left-radius: 24px !important;
        box-shadow: -22px 0 60px rgba(0, 0, 0, 0.92), -2px 0 10px rgba(0, 0, 0, 0.5), inset 1px 0 1px rgba(247, 236, 221, 0.14) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        padding: 1.10rem 0.85rem 1.40rem 0.85rem !important;
        box-sizing: border-box !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        transform: translateX(100%) !important;
        transition: transform 0.44s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .mobile-nav-drawer.is-open .mobile-nav-panel {
        transform: translateX(0) !important;
    }

    /* Minimal High-End Drawer Header */
    .mobile-nav-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding-bottom: 0.8rem !important;
        border-bottom: 1px solid rgba(247, 236, 221, 0.08) !important;
        margin-bottom: 0.8rem !important;
        opacity: 0 !important;
        transform: translateY(-12px) !important;
        transition: opacity 0.38s cubic-bezier(0.16, 1, 0.3, 1), transform 0.38s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .mobile-nav-drawer.is-open .mobile-nav-header {
        opacity: 1 !important;
        transform: translateY(0) !important;
        transition-delay: 0.04s !important;
    }

    .drawer-live-badge {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 4px 10px !important;
        border-radius: 9999px !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid rgba(247, 236, 221, 0.12) !important;
        font-family: var(--font-heading) !important;
        font-size: 0.62rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.08em !important;
        color: rgba(247, 236, 221, 0.7) !important;
        text-transform: uppercase !important;
    }

    .drawer-live-pulse {
        width: 5px !important;
        height: 5px !important;
        border-radius: 50% !important;
        background: #10B981 !important;
        box-shadow: 0 0 6px #10B981 !important;
        animation: radarPulse 2s infinite !important;
    }

    .mobile-nav-close {
        width: 38px !important;
        height: 38px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(247, 236, 221, 0.22) !important;
        color: #F7ECDD !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transform: rotate(-90deg) scale(0.75) !important;
        opacity: 0 !important;
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease, background 0.2s !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .mobile-nav-drawer.is-open .mobile-nav-close {
        transform: rotate(0deg) scale(1) !important;
        opacity: 1 !important;
        transition-delay: 0.08s !important;
    }

    .mobile-nav-close:active {
        transform: scale(0.88) rotate(90deg) !important;
        background: rgba(247, 236, 221, 0.2) !important;
    }

    /* Menu Container with Staggered Kinetic Pills */
    .mobile-nav-menu {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.58rem !important;
        flex: 1 0 auto !important;
    }

    /* All Menu Items in Bespoke Ultra-Luxury Dark Glass with Horizontal Stagger Entrance */
    .mobile-pill-item {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0.62rem 0.80rem !important;
        text-decoration: none !important;
        border-radius: 9999px !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid rgba(247, 236, 221, 0.12) !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28) !important;
        -webkit-tap-highlight-color: transparent !important;
        opacity: 0 !important;
        transform: translateX(22px) scale(0.96) !important;
        transition: opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1),
                    background 0.2s ease,
                    border-color 0.2s ease,
                    box-shadow 0.2s ease !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .mobile-pill-item:active {
        transform: scale(0.96) !important;
        background: rgba(247, 236, 221, 0.12) !important;
        border-color: rgba(247, 236, 221, 0.35) !important;
    }

    /* Dynamic Staggered Horizontal Spring Animation on Drawer Open */
    .mobile-nav-drawer.is-open .mobile-pill-item {
        opacity: 1 !important;
        transform: translateX(0) scale(1) !important;
    }

    .mobile-nav-drawer.is-open .mobile-pill-item:nth-child(1) { transition-delay: 0.08s !important; }
    .mobile-nav-drawer.is-open .mobile-pill-item:nth-child(2) { transition-delay: 0.13s !important; }
    .mobile-nav-drawer.is-open .mobile-pill-item:nth-child(3) { transition-delay: 0.18s !important; }
    .mobile-nav-drawer.is-open .mobile-pill-item:nth-child(4) { transition-delay: 0.23s !important; }
    .mobile-nav-drawer.is-open .mobile-pill-item:nth-child(5) { transition-delay: 0.28s !important; }

    .pill-index {
        font-family: var(--font-heading) !important;
        font-size: 0.66rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.04em !important;
        color: rgba(247, 236, 221, 0.38) !important;
        width: 16px !important;
        flex-shrink: 0 !important;
    }

    .pill-label {
        font-family: var(--font-heading) !important;
        font-size: 0.82rem !important;
        font-weight: 700 !important;
        color: #F7ECDD !important;
        letter-spacing: -0.15px !important;
        flex: 1 !important;
        text-align: left !important;
        margin-left: 3px !important;
        white-space: nowrap !important;
    }

    .pill-chip-bespoke {
        font-family: var(--font-heading) !important;
        font-size: 0.52rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.03em !important;
        padding: 2px 5.5px !important;
        border-radius: 9999px !important;
        background: rgba(247, 236, 221, 0.08) !important;
        border: 1px solid rgba(247, 236, 221, 0.15) !important;
        color: #F7ECDD !important;
        margin-right: 4px !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    .pill-arrow-disc {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 22px !important;
        height: 22px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(247, 236, 221, 0.14) !important;
        color: #F7ECDD !important;
        font-size: 0.76rem !important;
        flex-shrink: 0 !important;
        transition: transform 0.2s ease !important;
    }

    .mobile-pill-item:active .pill-arrow-disc {
        transform: translateX(2px) !important;
    }

    /* Featured highlight for Realizacje: subtle warm glow & rich typography */
    .mobile-pill-item.is-featured {
        background: linear-gradient(135deg, rgba(247, 236, 221, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
        border: 1px solid rgba(247, 236, 221, 0.35) !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 16px rgba(247, 236, 221, 0.12) !important;
        padding: 0.68rem 0.80rem !important;
    }

    .pill-label-group {
        display: flex !important;
        flex-direction: column !important;
        gap: 1px !important;
        flex: 1 !important;
        text-align: left !important;
        margin-left: 3px !important;
        overflow: hidden !important;
    }

    .pill-sublabel {
        font-size: 0.56rem !important;
        color: rgba(247, 236, 221, 0.58) !important;
        font-weight: 500 !important;
        letter-spacing: -0.1px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .pill-chip-bespoke.highlight {
        background: rgba(247, 236, 221, 0.2) !important;
        color: #FFF9F1 !important;
        border-color: rgba(247, 236, 221, 0.4) !important;
        font-weight: 800 !important;
    }

    .pill-arrow-disc.highlight {
        background: #F7ECDD !important;
        color: #13030A !important;
        border: none !important;
        font-weight: 800 !important;
        box-shadow: 0 2px 8px rgba(247, 236, 221, 0.4) !important;
    }

    /* Interaktywna Karta Architekta na linii */
    .drawer-architect-card {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 7px 8px !important;
        border-radius: 9999px !important;
        background: linear-gradient(135deg, rgba(22, 6, 12, 0.95) 0%, rgba(35, 9, 18, 0.95) 100%) !important;
        border: 1px solid rgba(52, 211, 153, 0.35) !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), 0 0 16px rgba(52, 211, 153, 0.15) !important;
        text-decoration: none !important;
        cursor: pointer !important;
        margin-top: 0.15rem !important;
        opacity: 0 !important;
        transform: translateX(22px) scale(0.96) !important;
        transition: opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1),
                    background 0.2s ease,
                    border-color 0.2s ease,
                    box-shadow 0.2s ease !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .mobile-nav-drawer.is-open .drawer-architect-card {
        opacity: 1 !important;
        transform: translateX(0) scale(1) !important;
        transition-delay: 0.34s !important;
    }

    .drawer-architect-card:active {
        transform: scale(0.97) !important;
        border-color: rgba(52, 211, 153, 0.6) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 22px rgba(52, 211, 153, 0.3) !important;
    }

    .drawer-arch-avatar-wrap {
        position: relative !important;
        width: 30px !important;
        height: 30px !important;
        flex-shrink: 0 !important;
    }

    .drawer-arch-avatar {
        width: 30px !important;
        height: 30px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        border: 1.5px solid #D4C5B5 !important;
        display: block !important;
    }

    .drawer-arch-beacon {
        position: absolute !important;
        bottom: -1px !important;
        right: -1px !important;
        width: 8px !important;
        height: 8px !important;
        border-radius: 50% !important;
        background: #10B981 !important;
        border: 1.5px solid #16040C !important;
        box-shadow: 0 0 6px #10B981 !important;
        animation: pillLivePulse 1.8s infinite ease-in-out !important;
    }

    .drawer-arch-info {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1px !important;
        text-align: left !important;
        overflow: hidden !important;
    }

    .drawer-arch-name {
        font-family: var(--font-heading) !important;
        font-size: 0.75rem !important;
        font-weight: 700 !important;
        color: #FFF9F1 !important;
        letter-spacing: -0.15px !important;
        white-space: nowrap !important;
    }

    .drawer-arch-role {
        display: none !important; /* Hide redundant role on compact 3/4 drawer */
    }

    .drawer-arch-status {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        font-size: 0.58rem !important;
        color: #34D399 !important;
        font-weight: 600 !important;
        letter-spacing: -0.1px !important;
        white-space: nowrap !important;
    }

    .drawer-arch-pulse-dot {
        width: 5px !important;
        height: 5px !important;
        border-radius: 50% !important;
        background: #10B981 !important;
        flex-shrink: 0 !important;
    }

    .drawer-arch-call-badge {
        font-family: var(--font-heading) !important;
        font-size: 0.62rem !important;
        font-weight: 800 !important;
        color: #10B981 !important;
        background: rgba(16, 185, 129, 0.14) !important;
        border: 1px solid rgba(16, 185, 129, 0.35) !important;
        padding: 3px 7px !important;
        border-radius: 9999px !important;
        letter-spacing: -0.1px !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    /* Light Shimmer Sweep */
    .pill-shimmer-sweep {
        position: absolute !important;
        top: 0 !important;
        left: -120% !important;
        width: 80% !important;
        height: 100% !important;
        background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.16) 50%, transparent 100%) !important;
        transform: skewX(-20deg) !important;
        pointer-events: none !important;
        animation: pillShimmerMove 4.5s infinite ease-in-out !important;
    }

    @keyframes pillShimmerMove {
        0%, 65% { left: -120%; }
        100% { left: 160%; }
    }

    /* Drawer Footer: Master CTA & Tactile Contact Chips */
    .mobile-nav-footer {
        margin-top: 1.1rem !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.65rem !important;
        padding-top: 0.85rem !important;
        border-top: 1px solid rgba(247, 236, 221, 0.08) !important;
        opacity: 0 !important;
        transform: translateY(14px) !important;
        transition: opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }

    .mobile-nav-drawer.is-open .mobile-nav-footer {
        opacity: 1 !important;
        transform: translateY(0) !important;
        transition-delay: 0.39s !important;
    }

    .mobile-cta-pill {
        position: relative !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.45rem !important;
        width: 100% !important;
        padding: 0.74rem 1.1rem !important;
        background: linear-gradient(135deg, #FFF9F1 0%, #F5E6D3 100%) !important;
        color: #1A030A !important;
        font-family: var(--font-heading) !important;
        font-size: 0.86rem !important;
        font-weight: 800 !important;
        letter-spacing: -0.2px !important;
        text-decoration: none !important;
        border-radius: 9999px !important; /* PURE PILL */
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
        -webkit-tap-highlight-color: transparent !important;
        transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease !important;
    }

    .mobile-cta-pill:active {
        transform: scale(0.96) !important;
    }

    .mobile-contact-chips {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem !important;
    }

    .mobile-chip-pill {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.4rem !important;
        padding: 0.55rem 0.45rem !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(247, 236, 221, 0.16) !important;
        border-radius: 9999px !important; /* PURE PILL */
        color: #FFF9F1 !important;
        text-decoration: none !important;
        font-size: 0.70rem !important;
        font-weight: 600 !important;
        -webkit-tap-highlight-color: transparent !important;
        transition: background 0.2s ease, transform 0.2s !important;
        white-space: nowrap !important;
    }

    .mobile-chip-pill:active {
        background: rgba(255, 255, 255, 0.12) !important;
        transform: scale(0.95) !important;
    }

    /* 4. HERO SECTION MOBILE PERFECTION */
    .hero-section {
        padding-top: calc(60px + 0.85rem) !important;
        padding-bottom: 2.2rem !important;
        overflow-x: hidden !important;
        position: relative !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .hero-center-badge {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        margin: 0 auto 0.65rem auto !important;
        width: fit-content !important;
        max-width: 95% !important;
        text-align: center !important;
    }
    .hero-section .hero-seo-badge {
        font-size: 0.52rem !important;
        padding: 0.22rem 0.6rem !important;
        letter-spacing: 0.35px !important;
        white-space: nowrap !important;
        line-height: 1.2 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        border-width: 1px !important;
        box-sizing: border-box !important;
        max-width: 95vw !important;
    }
    .hero-section .hero-seo-badge .badge-icon {
        width: 9px !important;
        height: 9px !important;
    }
    .hero-section .hero-seo-badge .badge-text {
        font-size: 0.52rem !important;
        letter-spacing: 0.35px !important;
        white-space: nowrap !important;
    }
    .hero-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.4rem !important;
        padding: 0 1rem !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 auto !important;
    }
    /* Google Animation placed cleanly on top */
    .hero-graphic-col {
        order: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .hero-graphic-col .google-card-outer {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        min-height: 320px !important;
        margin: 0 auto !important;
        position: relative !important;
    }
    .hero-graphic-col .browser-3d-wrapper {
        width: 100% !important;
        height: 100% !important;
        transform: none !important;
        filter: none !important;
        display: flex !important;
        justify-content: center !important;
    }
    .hero-graphic-col .browser-container {
        width: 100% !important;
        max-width: 100% !important;
        height: 320px !important;
        transform: none !important;
        aspect-ratio: auto !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
        border-radius: 16px !important;
        border-width: 2.5px !important;
    }
    .hero-graphic-col .red-sticker-circle {
        width: 65px !important;
        height: 65px !important;
        top: -10px !important;
        right: -4px !important;
    }
    .hero-graphic-col .sticker-inner-dash {
        font-size: 8px !important;
    }
    .hero-graphic-col .red-flower-badge {
        width: 28px !important;
        height: 28px !important;
        top: -6px !important;
        left: -4px !important;
    }

    /* Headline and 2-column text placed elegantly below animation */
    .hero-text-col {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    .main-heading {
        font-family: var(--font-heading) !important;
        font-size: clamp(1.95rem, 7.8vw, 2.55rem) !important;
        line-height: 0.96 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-items: start !important;
        justify-items: center !important;
        min-height: 104px !important;
        height: auto !important;
        margin-bottom: 1.15rem !important;
        text-align: center !important;
        width: 100% !important;
        letter-spacing: -0.8px !important;
        color: #FFFFFF !important;
        text-shadow: 3.5px 3.5px 0px #000000 !important;
        position: relative !important;
    }
    .main-heading .premium-text-layer,
    .main-heading .premium-slide-line {
        text-align: center !important;
        width: 100% !important;
    }
    .subtext-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0 !important;
        margin-bottom: 1.35rem !important;
        min-height: 172px !important;
        height: auto !important;
        width: 100% !important;
        max-width: 350px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0.35rem 0 !important;
        position: relative !important;
        align-items: start !important;
        box-sizing: border-box !important;
    }

    /* Estetyczna kreska oddzielająca kolumny tekstowe (Bespoke Sand-Cream Vertical Axis) */
    .subtext-container::before {
        content: '' !important;
        position: absolute !important;
        top: 6px !important;
        bottom: 6px !important;
        left: 50% !important;
        width: 1px !important;
        transform: translateX(-50%) !important;
        background: linear-gradient(180deg, 
            transparent 0%, 
            rgba(247, 236, 221, 0.15) 12%, 
            rgba(247, 236, 221, 0.55) 50%, 
            rgba(247, 236, 221, 0.15) 88%, 
            transparent 100%) !important;
        box-shadow: 0 0 10px rgba(247, 236, 221, 0.28) !important;
        pointer-events: none !important;
    }

    .subtext-col {
        position: relative !important;
        min-height: 172px !important;
        height: auto !important;
        width: 100% !important;
    }

    .subtext-col:first-child {
        padding-right: 15px !important;
        padding-left: 0 !important;
        text-align: right !important;
    }

    .subtext-col:first-child .subtext,
    .subtext-col:first-child .premium-slide-line {
        text-align: right !important;
    }

    .subtext-col:last-child {
        padding-left: 15px !important;
        padding-right: 0 !important;
        text-align: left !important;
    }

    .subtext-col:last-child .subtext-small,
    .subtext-col:last-child .premium-slide-line {
        text-align: left !important;
    }

    .subtext, .subtext-small {
        position: relative !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-items: start !important;
        min-height: 172px !important;
        height: auto !important;
        font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif !important;
        font-size: 0.81rem !important;
        line-height: 1.50 !important;
        letter-spacing: -0.015em !important;
        margin: 0 !important;
        width: 100% !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }

    .subtext {
        color: #FFF9F1 !important;
        font-weight: 500 !important;
    }

    .subtext-small {
        color: rgba(247, 236, 221, 0.90) !important;
        font-weight: 450 !important;
    }
    .premium-text-layer {
        grid-area: 1 / 1 !important;
        position: relative !important;
        height: auto !important;
        width: 100% !important;
    }
    .cta-buttons {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        gap: 0.65rem !important;
        margin: 0 auto !important;
    }
    .btn-icon {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.4rem !important;
        border-width: 3px !important;
        box-shadow: 3px 3px 0px var(--color-black) !important;
        color: #000000 !important;
        -webkit-text-fill-color: #000000 !important;
    }
    .slider-progress-wrapper {
        gap: 0.45rem !important;
    }
    .progress-bar {
        width: 65px !important;
        height: 8px !important;
    }
    #btn-pause-play {
        margin-left: 0.75rem !important;
    }

    .explosion-bubble-container {
        width: 280px;
        height: 180px;
        left: -30px;
        top: -30px;
    }
    .bubble-large {
        font-size: 2.8rem;
    }
    .signature-container {
        margin-top: 10px;
    }
    .signature-svg {
        width: 170px;
    }
    .signature-title {
        font-size: 0.95rem;
        letter-spacing: 1px;
    }
    .stamp-wrapper {
        width: 38px;
        height: 38px;
    }
}



/* ═══════════════════════════════════════════════════
   GOOGLE SEARCH MOCKUP — EXACT SQUARE/PANEL PROPORTIONS & ANIMATION
   ═══════════════════════════════════════════════════ */

/* Outer Card Frame / Chassis */
.hero-graphic-col .google-card-outer {
    position: relative;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    max-width: 540px;
    height: 420px;
    width: 100%;
    margin: -30px 0 0 0;
    box-sizing: border-box;
}

/* Red Flower Badge (Top Left) */
.hero-graphic-col .red-flower-badge {
    position: absolute;
    top: -10px;
    left: -10px;
    z-index: 40;
    animation: rotate-flower 14s linear infinite;
}
@keyframes rotate-flower {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Red Circular Sticker (Top Right Overlap) */
.hero-graphic-col .red-sticker-circle {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 95px;
    height: 95px;
    background: #e00000;
    border-radius: 50%;
    z-index: 45;
    box-shadow: 0 8px 20px rgba(224, 0, 0, 0.35);
    transform: rotate(10deg);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}
.hero-graphic-col .red-sticker-circle:hover {
    transform: rotate(0deg) scale(1.08);
}

.hero-graphic-col .sticker-inner-dash {
    position: absolute;
    inset: 4px;
    border: 2px dashed rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
    font-weight: 800;
    font-size: 11px;
    line-height: 1.15;
    font-family: Arial, Helvetica, sans-serif;
}

/* Container Wrapper Fixes */
.hero-graphic-col .browser-3d-wrapper {
    filter: none !important;
    transform: none !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    justify-content: center !important;
}

.hero-graphic-col .browser-header {
    height: 40px;
    background: #f8f9fa;
    border-bottom: 2px solid #000000;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    position: relative;
    flex-shrink: 0;
}

.browser-content {
    background: #ffffff !important;
    background-image: none !important;
    padding: 0 !important;
    border: none !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Finder Search View Container */
.finder-search-view {
    display: none;
    flex-direction: column;
    flex: 1;
    width: 100%;
    height: 100%;
    background: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    color: #202124;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}

.finder-search-view.active { display: flex; }

/* ─── PHASE 1: GOOGLE HOME SCREEN ─── */
.g-home {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    position: relative;
    transition: opacity 0.4s ease;
    padding: 20px;
    box-sizing: border-box;
    background: #ffffff;
}

.g-logo {
    font-size: 2.8rem;
    font-weight: 800;
    letter-spacing: -1px;
    margin-bottom: 1.3rem;
    position: relative;
    z-index: 2;
}

.g-logo-letter {
    display: inline-block;
    animation: google-wave 2s infinite ease-in-out;
}

.g-logo-letter:nth-child(1) { color: #4285F4; animation-delay: 0s; }
.g-logo-letter:nth-child(2) { color: #EA4335; animation-delay: 0.1s; }
.g-logo-letter:nth-child(3) { color: #FBBC05; animation-delay: 0.2s; }
.g-logo-letter:nth-child(4) { color: #4285F4; animation-delay: 0.3s; }
.g-logo-letter:nth-child(5) { color: #34A853; animation-delay: 0.4s; }
.g-logo-letter:nth-child(6) { color: #EA4335; animation-delay: 0.5s; }

@keyframes google-wave {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* Sparkle decorations */
.g-sparkle {
    position: absolute;
    z-index: 1;
    animation: sparkle-float 3s ease-in-out infinite alternate;
}
.g-sparkle-1 { top: 18%; right: 18%; animation-delay: 0s; }
.g-sparkle-2 { top: 52%; left: 10%; animation-delay: 0.8s; }
.g-sparkle-3 { bottom: 22%; right: 14%; animation-delay: 1.6s; }

@keyframes sparkle-float {
    0% { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(-8px) rotate(15deg); }
}

/* Search box */
.g-searchbox {
    width: 85%;
    max-width: 320px;
    height: 42px;
    border: 1px solid #dfe1e5;
    border-radius: 22px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 10px;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.g-search-icon { flex-shrink: 0; opacity: 0.7; }

.g-input {
    flex-grow: 1;
    font-size: 0.92rem;
    color: #202124;
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
}

.g-cursor {
    display: inline-block;
    width: 2px;
    height: 18px;
    background: #e00000;
    margin-left: 2px;
    animation: g-blink 0.8s infinite;
}
@keyframes g-blink { 0%,100% { opacity: 0; } 50% { opacity: 1; } }

/* ─── RESULTS WRAPPER (Zoomable container) ─── */
.g-results-wrapper {
    display: none;
    flex-direction: column;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: #ffffff;
    transform-origin: 86.8% 38.6%;
    transition: transform 0.65s cubic-bezier(0.25, 1, 0.5, 1), filter 0.65s ease;
}
.g-results-wrapper.g-zoomed {
    transform-origin: 86.8% 38.6%;
    transform: scale(4.8);
    filter: brightness(0.72) saturate(1.1);
    transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1), filter 0.85s ease;
}



/* ─── Ultra-Clean Google #1 Highlight ─── */
.g-result-header-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    margin-bottom: 2px;
}

.g-rank-boost-tag {
    margin-left: auto;
    background: #e6f4ea;
    color: #137333;
    font-size: 0.64rem;
    font-weight: 800;
    padding: 1.5px 7px;
    border-radius: 4px;
    letter-spacing: 0.2px;
    opacity: 0;
    transform: translateY(3px);
    transition: all 0.5s ease;
}

.g-result.g-highlight.g-climb-done .g-rank-boost-tag {
    opacity: 1;
    transform: translateY(0);
}




/* Jaw-Dropping Masked Spring Typography Reveal */

.premium-text-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.premium-slide-line {
    display: block;
    overflow: hidden;
    padding-bottom: 12px;
    margin-bottom: -8px;
}

.premium-elem {
    display: inline-block;
    transform: translateY(115%) translateZ(0);
    opacity: 0;
    will-change: transform, opacity;
    transform-origin: left bottom;
    white-space: pre-wrap;
    -webkit-font-smoothing: antialiased;
}

.premium-elem.elem-in {
    animation: text-reveal-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.premium-elem.elem-out {
    animation: text-reveal-out 0.4s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}

@keyframes text-reveal-in {
    0% {
        transform: translateY(100%) translateZ(0);
        opacity: 0;
    }
    100% {
        transform: translateY(0%) translateZ(0);
        opacity: 1;
    }
}

@keyframes text-reveal-out {
    0% {
        transform: translateY(0%) translateZ(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-70%) translateZ(0);
        opacity: 0;
    }
}

/* Results inner */
.g-results-wrapper {
    display: none;
    flex-direction: column;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: #ffffff;
    transform-origin: 30% 75%;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), filter 1.2s ease;
}

/* ─── GOOGLE SEARCH VIEW & SERP STYLES (MATCHING USER SCREENSHOT) ─── */
.g-results {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 8px 12px 6px;
    box-sizing: border-box;
    background: #ffffff;
    overflow: hidden;
    font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
.g-results::-webkit-scrollbar { display: none; }

.g-results-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
}

.g-results-logo {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    cursor: default;
    line-height: 1;
}

.g-results-searchbox {
    flex-grow: 1;
    height: 25px;
    border: 1px solid #dfe1e5;
    border-radius: 13px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    gap: 6px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(32,33,36,0.06);
}

.g-results-query {
    font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 0.68rem;
    color: #202124;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.g-tabs {
    display: flex;
    gap: 12px;
    border-bottom: 1px solid #ebebeb;
    padding-bottom: 0px;
    margin-bottom: 4px;
}

.g-tab {
    font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 0.64rem;
    color: #5f6368;
    cursor: pointer;
    position: relative;
    font-weight: 400;
    padding-bottom: 3px;
}

.g-tab-active {
    color: #1a73e8 !important;
    font-weight: 500 !important;
    border-bottom: 2.5px solid #1a73e8 !important;
    margin-bottom: -1px;
}

.g-stats {
    font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 0.58rem;
    color: #70757a;
    margin-bottom: 6px;
}

/* Results Body (list + map) */
.g-results-body {
    display: flex;
    gap: 10px;
    flex-grow: 1;
    align-items: stretch;
    min-height: 0;
    overflow: hidden;
}

.g-results-list {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px;
}

/* Individual Organic Result matching user screenshot */
.g-result {
    display: flex;
    gap: 7px;
    align-items: flex-start;
    padding: 1px 0;
    border-radius: 6px;
    position: relative;
    opacity: 1;
    background: transparent;
    transition: transform 0.85s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.6s ease, background 0.3s ease;
}

.g-result.g-highlight {
    background: #f8fafd;
    border-radius: 6px;
    padding: 2px 4px;
    margin: 0 -4px;
    box-shadow: 0 1px 6px rgba(26, 115, 232, 0.12);
}

/* Circular Numbered Badge matching user screenshot */
.g-result-badge {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #e8eaed;
    color: #5f6368;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.60rem;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    flex-shrink: 0;
    margin-top: 1.5px;
    transition: background 0.4s ease, color 0.4s ease;
}

.g-badge-client,
.g-result.g-highlight .g-result-badge {
    background: #1a73e8 !important;
    color: #ffffff !important;
}

.g-result-info {
    display: flex;
    flex-direction: column;
    gap: 0.5px;
    min-width: 0;
    flex-grow: 1;
}

/* Green Domain URL matching user screenshot */
.g-result-url {
    font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 0.58rem;
    color: #0f9d58; /* Iconic Google Green */
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.15;
}

/* Blue Bold Title matching user screenshot */
.g-result-title {
    font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 0.74rem;
    color: #1a0dab !important;
    font-weight: 700;
    text-decoration: none;
    line-height: 1.2;
    margin: 0.5px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.g-result-title:hover {
    text-decoration: underline;
}

/* Description Snippet matching user screenshot */
.g-result-desc {
    font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 0.55rem;
    color: #4d5156;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Review Stars for Client */
.g-result-stars {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 1px;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.4s ease, max-height 0.4s ease;
}
.g-result.g-climb-done .g-result-stars {
    opacity: 1;
    max-height: 15px;
    margin-top: 1.5px;
}
.g-stars {
    color: #fbbc04;
    font-size: 0.60rem;
    letter-spacing: 0.5px;
}
.g-stars-text {
    font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 0.50rem;
    font-weight: 500;
    color: #4d5156;
}

/* Podobne pytania / People Also Ask Widget matching user screenshot */
.g-paa-box {
    border-top: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
    padding: 3px 0 4px;
    margin: 3px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.g-paa-title {
    font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 0.64rem;
    font-weight: 700;
    color: #202124;
    line-height: 1.2;
    margin-bottom: 1px;
}

.g-paa-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5px 0;
    border-bottom: 1px solid #f8f9fa;
}
.g-paa-item:last-child {
    border-bottom: none;
}

.g-paa-q {
    font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 0.56rem;
    color: #1a0dab;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.g-paa-chevron {
    flex-shrink: 0;
    margin-left: 4px;
    opacity: 0.7;
}

/* Map Column matching user screenshot */
.g-map-col {
    width: 175px;
    height: 250px;
    border-radius: 14px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid #dadce0;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.g-map-svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ─── Synchronized Navigation Route (135px total length) ─── */
.g-map-route {
    stroke: #1a73e8;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 135;
    stroke-dashoffset: 135;
    filter: drop-shadow(0 2px 5px rgba(26, 115, 232, 0.45));
}
.g-map-route.g-draw-route-fast {
    animation: gDrawRouteFast 2.0s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes gDrawRouteFast {
    0% { stroke-dashoffset: 135; opacity: 0.9; }
    8% { opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 1; }
}

/* ─── GPS Navigation Puck Traveling on Route (100% Synced) ─── */
.g-map-puck-group {
    offset-path: path('M 25 120 L 48 120 L 48 65 L 105 65');
    offset-distance: 0%;
    opacity: 0;
    pointer-events: none;
}
.g-map-puck-group.g-puck-running {
    opacity: 1;
    animation: gPuckTravel 2.0s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes gPuckTravel {
    0% {
        offset-distance: 0%;
        transform: scale(0.6);
        opacity: 0;
    }
    5% {
        transform: scale(1);
        opacity: 1;
    }
    96% {
        offset-distance: 96%;
        transform: scale(1);
        opacity: 1;
    }
    100% {
        offset-distance: 100%;
        transform: scale(1.4);
        opacity: 0;
    }
}

/* ─── Multi-Color Dopamine Ripple Waves at (105, 65) ─── */
.g-map-impact-wave {
    opacity: 0;
    pointer-events: none;
    transform-origin: 105px 65px;
}
.g-map-impact-wave.g-impact-active {
    animation: gMapImpactBurst 0.9s cubic-bezier(0.1, 0.8, 0.25, 1) forwards;
}
.g-map-impact-wave.wave-red.g-impact-active {
    animation-delay: 0.08s;
}
.g-map-impact-wave.wave-gold.g-impact-active {
    animation-delay: 0.16s;
}
@keyframes gMapImpactBurst {
    0% {
        r: 3.5;
        stroke-width: 3.5;
        opacity: 1;
    }
    35% {
        opacity: 0.9;
    }
    100% {
        r: 38;
        stroke-width: 0.5;
        opacity: 0;
    }
}

/* ─── 3D Red Google Map Pin & Dopamine Celebration ─── */
.g-map-pin-container {
    position: absolute;
    width: 22px;
    height: 28px;
    transform: translate(-50%, -100%);
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    perspective: 600px;
    transform-style: preserve-3d;
}

.g-map-pin-svg {
    transform-origin: 12px 28px;
    transform-style: preserve-3d;
    transition: filter 0.3s ease;
}
.g-map-pin-svg.g-pin-spin-jump-epic {
    animation: gPinSpinJumpEpic 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes gPinSpinJumpEpic {
    0% {
        transform: translateY(0) rotateY(0deg) scale(1, 1);
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
    }
    16% {
        transform: translateY(3px) rotateY(0deg) scale(1.22, 0.78);
        filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
    }
    45% {
        transform: translateY(-16px) rotateY(180deg) scale(1.12, 1.12);
        filter: drop-shadow(0 0 16px rgba(234, 67, 53, 0.85)) drop-shadow(0 8px 12px rgba(251, 188, 4, 0.6));
    }
    72% {
        transform: translateY(2px) rotateY(360deg) scale(1.18, 0.82);
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    }
    86% {
        transform: translateY(-3px) rotateY(360deg) scale(0.97, 1.03);
    }
    100% {
        transform: translateY(0) rotateY(360deg) scale(1, 1);
        filter: drop-shadow(0 0 10px rgba(234, 67, 53, 0.6)) drop-shadow(0 2px 4px rgba(0,0,0,0.25));
    }
}

/* ─── Floating Dopamine Trophy Badge Above Pin ─── */
.g-pin-badge {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translate(-50%, 8px) scale(0);
    opacity: 0;
    pointer-events: none;
    z-index: 30;
    white-space: nowrap;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.22)) drop-shadow(0 2px 4px rgba(234, 67, 53, 0.25));
}
.g-pin-badge.g-badge-active {
    animation: gPinBadgeSpring 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes gPinBadgeSpring {
    0% {
        transform: translate(-50%, 8px) scale(0.1);
        opacity: 0;
    }
    60% {
        transform: translate(-50%, -10px) scale(1.1);
        opacity: 1;
    }
    82% {
        transform: translate(-50%, -5px) scale(0.96);
    }
    100% {
        transform: translate(-50%, -7px) scale(1);
        opacity: 1;
    }
}
.g-pin-badge-inner {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #ffffff;
    border: 1.5px solid #fbbc04;
    border-radius: 18px;
    padding: 3px 8px 3px 6px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.g-pin-badge-crown {
    font-size: 0.85rem;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(251, 188, 4, 0.5));
    animation: gCrownWiggle 2s ease infinite;
}
@keyframes gCrownWiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-8deg); }
    75% { transform: rotate(8deg); }
}
.g-pin-badge-text-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
}
.g-pin-badge-title {
    font-size: 0.6rem;
    font-weight: 800;
    color: #202124;
    display: flex;
    align-items: center;
    gap: 3px;
    letter-spacing: -0.1px;
}
.g-pin-badge-num {
    background: linear-gradient(135deg, #1e8e3e, #137333);
    color: #ffffff;
    font-size: 0.5rem;
    font-weight: 900;
    padding: 0.5px 3.5px;
    border-radius: 3px;
    letter-spacing: 0;
}
.g-pin-badge-stars {
    font-size: 0.48rem;
    color: #fbbc04;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 2px;
}
.g-pin-badge-stars span {
    color: #5f6368;
    font-weight: 700;
}
.g-pin-badge-arrow {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #fbbc04;
    margin: 0 auto;
    position: relative;
    top: -0.5px;
}

/* ─── Confetti & Star Sparkles Burst ─── */
.g-pin-sparkles {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 28;
}
.g-sparkle {
    position: absolute;
    font-size: 0.75rem;
    line-height: 1;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
}
.g-pin-sparkles.g-sparkles-active .sp-1 {
    animation: gSparkleBurst1 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.g-pin-sparkles.g-sparkles-active .sp-2 {
    animation: gSparkleBurst2 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.05s forwards;
}
.g-pin-sparkles.g-sparkles-active .sp-3 {
    animation: gSparkleBurst3 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.03s forwards;
}
.g-pin-sparkles.g-sparkles-active .sp-4 {
    animation: gSparkleBurst4 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.07s forwards;
}
.g-pin-sparkles.g-sparkles-active .sp-5 {
    animation: gSparkleBurst5 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.04s forwards;
}
@keyframes gSparkleBurst1 {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    50% { opacity: 1; }
    100% { transform: translate(calc(-50% - 24px), calc(-50% - 22px)) scale(1.3) rotate(-35deg); opacity: 0; }
}
@keyframes gSparkleBurst2 {
    0% { transform: translate(-50%, -50%) scale(0); color: #fbbc04; opacity: 1; }
    50% { opacity: 1; }
    100% { transform: translate(calc(-50% + 24px), calc(-50% - 24px)) scale(1.4) rotate(40deg); opacity: 0; }
}
@keyframes gSparkleBurst3 {
    0% { transform: translate(-50%, -50%) scale(0); color: #1a73e8; opacity: 1; }
    50% { opacity: 1; }
    100% { transform: translate(calc(-50% - 28px), calc(-50% + 6px)) scale(1.2) rotate(-50deg); opacity: 0; }
}
@keyframes gSparkleBurst4 {
    0% { transform: translate(-50%, -50%) scale(0); color: #ea4335; opacity: 1; }
    50% { opacity: 1; }
    100% { transform: translate(calc(-50% + 26px), calc(-50% + 8px)) scale(1.3) rotate(30deg); opacity: 0; }
}
@keyframes gSparkleBurst5 {
    0% { transform: translate(-50%, -50%) scale(0); color: #fbbc04; opacity: 1; }
    50% { opacity: 1; }
    100% { transform: translate(calc(-50% + 2px), calc(-50% - 32px)) scale(1.5) rotate(15deg); opacity: 0; }
}

/* ─── Cinematic Overlay with Radar Spotlight ─── */
.browser-container.g-cine-active,
.browser-container.g-cine-active .browser-content,
.browser-container.g-cine-active .finder-search-view,
.browser-container.g-cine-active .g-results-wrapper,
.browser-container.g-cine-active .g-results {
    background: #0f172a !important;
}

/* Instantly hide search results list and header elements during zoom to eliminate text/border flashing ("dziwne paski") */
.browser-container.g-cine-active .g-results-list,
.browser-container.g-cine-active .g-results-header,
.browser-container.g-cine-active .g-tabs,
.browser-container.g-cine-active .g-stats,
.g-results-wrapper.g-zoomed .g-results-list,
.g-results-wrapper.g-zoomed .g-results-header,
.g-results-wrapper.g-zoomed .g-tabs,
.g-results-wrapper.g-zoomed .g-stats {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: none !important;
}

.g-results-list,
.g-results-header,
.g-tabs,
.g-stats {
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.g-cine-overlay {
    position: absolute;
    top: -1.5px; left: -1.5px; right: -1.5px; bottom: -1.5px;
    background: radial-gradient(circle at 86.8% 38.6%, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.1) 12%, rgba(15, 23, 42, 0.85) 24%, #0f172a 34%, #0f172a 100%);
    z-index: 150;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 24px;
    box-sizing: border-box;
    border-radius: 0 0 16.5px 16.5px;
}
.g-cine-overlay.g-active {
    opacity: 1;
}

/* ─── HUD Target Scanner Reticle on Pin (Pixel-perfect centered at 86.8% 38.6%) ─── */
.g-hud-target-scope {
    position: absolute;
    left: 86.8%;
    top: 38.6%;
    width: 86px;
    height: 86px;
    transform: translate(-50%, -50%) scale(0.65);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.g-cine-overlay.g-active .g-hud-target-scope {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.g-scope-bracket {
    position: absolute;
    width: 14px;
    height: 14px;
    border-color: #4285f4;
    border-style: solid;
    border-width: 0;
}
.g-scope-bracket.b-tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.g-scope-bracket.b-tr { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.g-scope-bracket.b-bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.g-scope-bracket.b-br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }

.g-scope-radar-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 62px;
    height: 62px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px dashed rgba(66, 133, 244, 0.55);
    animation: gRadarSpin 8s linear infinite;
}
@keyframes gRadarSpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.g-scope-data-tag {
    position: absolute;
    bottom: -24px;
    right: -6px;
    white-space: nowrap;
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, monospace;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #a8c7fa;
    background: rgba(15, 23, 42, 0.9);
    padding: 3px 10px;
    border-radius: 100px;
    border: 1px solid rgba(66, 133, 244, 0.45);
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* ─── Glassmorphic HUD Narrative Cards ─── */
.g-cine-card {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%) scale(0.92) translateX(-15px);
    width: 250px;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-sizing: border-box;
}
.g-cine-card.g-show {
    opacity: 1;
    transform: translateY(-50%) scale(1) translateX(0);
}
.g-cine-card.g-exit {
    opacity: 0;
    transform: translateY(-50%) scale(1.05) translateY(-14px);
    transition: all 0.3s ease-in;
}

.g-cine-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 100px;
    margin-bottom: 8px;
}
.g-cine-badge.badge-red {
    background: rgba(234, 67, 53, 0.2);
    color: #fca5a5;
    border: 1px solid rgba(234, 67, 53, 0.45);
}
.g-cine-badge.badge-blue {
    background: rgba(66, 133, 244, 0.2);
    color: #a8c7fa;
    border: 1px solid rgba(66, 133, 244, 0.45);
}
.g-cine-badge.badge-green {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.45);
}
.g-cine-badge.badge-gold {
    background: rgba(251, 188, 4, 0.2);
    color: #fde047;
    border: 1px solid rgba(251, 188, 4, 0.5);
}

.g-badge-pulse-red, .g-badge-pulse-blue, .g-badge-pulse-green, .g-badge-pulse-gold {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}
.g-badge-pulse-blue {
    background: #4285f4;
    box-shadow: 0 0 6px #4285f4;
    animation: gPulseSlow 1.2s infinite ease-in-out;
}
.g-badge-pulse-red {
    background: #ea4335;
    box-shadow: 0 0 6px #ea4335;
    animation: gPulseSlow 1.2s infinite ease-in-out;
}
.g-badge-pulse-green {
    background: #22c55e;
    box-shadow: 0 0 6px #22c55e;
    animation: gPulseSlow 1.2s infinite ease-in-out;
}
.g-badge-pulse-gold {
    background: #fbbc04;
    box-shadow: 0 0 6px #fbbc04;
    animation: gPulseSlow 1.2s infinite ease-in-out;
}
@keyframes gPulseSlow {
    0%, 100% { opacity: 0.6; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.3); }
}

.g-cine-card-1 {
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 22px rgba(234, 67, 53, 0.15);
    border-color: rgba(234, 67, 53, 0.28);
}
.g-cine-card-2 {
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 25px rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.35);
}
.g-cine-card-3 {
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 25px rgba(251, 188, 4, 0.22);
    border-color: rgba(251, 188, 4, 0.35);
}

.g-cine-title {
    font-size: 1.12rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 6px 0;
    line-height: 1.25;
    letter-spacing: -0.2px;
}
.g-cine-card-1 .g-cine-title {
    background: linear-gradient(135deg, #ffffff 0%, #fca5a5 60%, #ef4444 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.g-cine-card-2 .g-cine-title {
    background: linear-gradient(135deg, #ffffff 0%, #86efac 50%, #22c55e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.g-cine-card-3 .g-cine-title {
    background: linear-gradient(135deg, #ffffff 0%, #fde047 50%, #fbbc04 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.g-cine-sub {
    font-size: 0.68rem;
    color: #94a3b8;
    margin: 0;
    line-height: 1.4;
}

.g-cine-motto {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 3.5px 10px;
    border-radius: 100px;
    margin-top: 8px;
}
.g-cine-motto.motto-red {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.35);
}
.g-cine-motto.motto-green {
    color: #86efac;
    background: rgba(34, 197, 94, 0.16);
    border: 1px solid rgba(34, 197, 94, 0.38);
}

.g-cine-stars-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}
.g-cine-stars {
    color: #fbbc04;
    font-size: 0.75rem;
    letter-spacing: 1px;
}
.g-cine-score {
    font-size: 0.65rem;
    font-weight: 700;
    color: #ffffff;
}
.g-cine-tag {
    font-size: 0.55rem;
    color: #ffd700;
    background: rgba(251, 188, 4, 0.18);
    padding: 2.5px 9px;
    border-radius: 100px;
    font-weight: 700;
    border: 1px solid rgba(251, 188, 4, 0.4);
}

.g-map-card {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #ffffff;
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.4s;
    z-index: 20;
    width: 85%;
}
.g-map-card.g-active {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    visibility: visible;
}
.g-map-card-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.g-map-card-info strong {
    font-size: 0.7rem;
    color: #202124;
    font-weight: 600;
}
.g-map-card-info span {
    font-size: 0.55rem;
    color: #70757a;
    margin-top: 2px;
}
.g-map-nav-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #4285f4;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.g-notif {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%) translateY(26px) scale(0.92);
    width: auto;
    max-width: 92%;
    white-space: nowrap;
    background: rgba(15, 23, 42, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1.5px solid rgba(34, 197, 94, 0.45);
    border-radius: 100px;
    padding: 7px 18px 7px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 22px rgba(34, 197, 94, 0.25);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.5s;
    z-index: 25;
}
.g-notif.g-visible {
    transform: translateX(-50%) translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
}

.g-notif-icon-box {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 0 14px rgba(34, 197, 94, 0.6);
    animation: gPhoneRinging 1.5s infinite ease-in-out;
}
@keyframes gPhoneRinging {
    0%, 100% { transform: rotate(0deg) scale(1); }
    15% { transform: rotate(-14deg) scale(1.08); }
    30% { transform: rotate(14deg) scale(1.08); }
    45% { transform: rotate(-8deg) scale(1.04); }
    60% { transform: rotate(8deg) scale(1.04); }
    75% { transform: rotate(0deg) scale(1); }
}

.g-notif-icon-box svg {
    width: 15px;
    height: 15px;
    fill: #ffffff;
}

.g-notif-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

.g-notif-title {
    font-size: 0.76rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.1px;
    line-height: 1.25;
}

.g-notif-sub {
    font-size: 0.62rem;
    color: #94a3b8;
    margin-top: 1.5px;
    line-height: 1.25;
    display: flex;
    align-items: center;
    gap: 5px;
}

.g-notif-calling-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 6px #22c55e;
    animation: gPulseSlow 1.2s infinite ease-in-out;
}

.premium-notif {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-left: none; /* override old */
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0,0,0,0.04);
    border-radius: 16px;
    padding: 12px 14px;
    margin: 0 16px 20px;
}

.premium-notif .g-notif-avatar {
    position: relative;
    width: 38px;
    height: 38px;
    background: #e6f4ea; /* Google green light */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.premium-notif .g-notif-avatar svg {
    width: 22px;
    height: 22px;
    z-index: 2;
}

.premium-notif .g-pulse-circle {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #188038;
    opacity: 0.2;
    animation: g-pulse-green-notif 2s infinite ease-out;
}

@keyframes g-pulse-green-notif {
    0% { transform: scale(1); opacity: 0.4; }
    100% { transform: scale(1.7); opacity: 0; }
}

.premium-notif .g-notif-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-left: 2px;
}

.premium-notif .g-notif-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.premium-notif .g-notif-header strong {
    font-size: 0.82rem;
    color: #111111;
    font-weight: 700;
}

.premium-notif .g-notif-time {
    font-size: 0.65rem;
    color: #188038;
    font-weight: 600;
}

.premium-notif .g-notif-msg {
    font-size: 0.72rem;
    color: #5f6368;
    line-height: 1.3;
}

/* ─── Soft Ambient Depth-of-Field Blur Backdrop for Lead Flood ─── */
.g-flood-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.38);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 0 0 10px 10px;
}
.g-flood-backdrop.g-active {
    opacity: 1;
}

.g-mini-notif {
    position: absolute;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1.5px solid rgba(255, 255, 255, 0.98);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.06);
    border-radius: 40px;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #111827;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px) scale(0.9);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.g-mini-notif svg {
    width: 18px;
    height: 18px;
    fill: #188038;
    flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════
   MANIFESTO / STORY SECTION (Full A4 Screen • #400D1C)
   ═══════════════════════════════════════════════════ */
.manifesto-section {
    background-color: #400D1C;
    color: #F7ECDD;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 95px 48px 75px 48px;
    position: relative;
    width: 100%;
    border-top: none;
    border-bottom: none;
    border-top-left-radius: var(--manifesto-radius, 0px);
    border-top-right-radius: var(--manifesto-radius, 0px);
    box-shadow: var(--manifesto-shadow, none);
    overflow: hidden;
    box-sizing: border-box;
    will-change: border-top-left-radius, border-top-right-radius, box-shadow;
}

.manifesto-container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.manifesto-content-wrap {
    position: relative;
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
}

.manifesto-copy {
    width: 100%;
    text-align: center;
    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: clamp(23px, 2.35vw, 32px);
    letter-spacing: -1.28px;
    line-height: 1.38;
    color: #F7ECDD;
    perspective: 1000px;
    -webkit-perspective: 1000px;
}

.manifesto-text-bold {
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 1.38em;
}

.manifesto-text-normal {
    font-weight: 400;
    color: #F7ECDD;
    margin-bottom: 0;
}

/* Typography Kinetic 3D Masked Reveal (Crisp, High-End & Dignified) */
.manifesto-word-mask {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: 0.18em;
    margin-bottom: -0.18em;
}

/* Specific 3D Unfold stage for the bold manifesto headline (no harsh line clipping) */
.manifesto-text-bold .manifesto-word-mask {
    overflow: visible;
    perspective: 1200px;
    -webkit-perspective: 1200px;
    transform-style: preserve-3d;
}

/* Normal paragraph baseline words */
.manifesto-text-normal .manifesto-word-inner {
    display: inline-block;
    position: relative;
    opacity: 0;
    transform: translate3d(0, 115%, 0);
    transition: 
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--word-delay, 0s);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform, opacity;
    background-image: linear-gradient(90deg, #D6BFA3, #F7ECDD);
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 0% 2px;
}

.manifesto-content-wrap.is-revealed .manifesto-text-normal .manifesto-word-inner {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* ========================================================
   PREMIUM BESPOKE 3D TYPOGRAPHY ENTRANCE FOR BOLD HEADLINE:
   - 3D Depth tilt along X axis (unfurling from spatial depth)
   - Optical Focus Pull (lens blur 8px -> 0px)
   - Luminous Champagne Bloom -> Crisp Authority White
   - Kinetic Scale bloom (0.93 -> 1)
   ======================================================== */
.manifesto-text-bold .manifesto-word-inner {
    display: inline-block;
    position: relative;
    opacity: 0;
    color: #F7D8B5;
    text-shadow: 0 0 20px rgba(247, 216, 181, 0.6);
    transform: translate3d(0, 32px, -35px) rotateX(-50deg) scale(0.93);
    filter: blur(8px);
    -webkit-filter: blur(8px);
    transition: 
        transform 0.95s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.85s cubic-bezier(0.16, 1, 0.3, 1),
        color 0.95s ease,
        text-shadow 0.95s ease;
    transition-delay: var(--word-delay, 0s);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform, opacity, filter;
    background-image: linear-gradient(90deg, #D6BFA3, #F7ECDD);
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 0% 2px;
}

.manifesto-content-wrap.is-revealed .manifesto-text-bold .manifesto-word-inner {
    opacity: 1;
    color: #FFFFFF;
    text-shadow: 0 0 0 transparent;
    transform: translate3d(0, 0, 0) rotateX(0deg) scale(1);
    filter: blur(0px);
    -webkit-filter: blur(0px);
}

/* Luxury Interactive Hover (Zero Collision, Zero Smudge, Champagne Underline) */
@media (hover: hover) and (pointer: fine) {
    .manifesto-content-wrap.is-revealed .manifesto-word-inner {
        cursor: pointer;
    }

    /* Paragraph 1 (Bold White) shifts to warm champagne with lift */
    .manifesto-content-wrap.is-revealed .manifesto-text-bold .manifesto-word-inner:hover {
        transform: translateY(-3px) scale(1.02);
        color: #F7D8B5;
        text-shadow: 0 2px 14px rgba(247, 216, 181, 0.35);
        background-size: 100% 2px;
        transition: 
            transform 0.22s cubic-bezier(0.2, 0, 0, 1),
            color 0.2s ease,
            text-shadow 0.2s ease,
            background-size 0.26s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Paragraph 2 (Cream) shifts to brilliant white with lift */
    .manifesto-content-wrap.is-revealed .manifesto-text-normal .manifesto-word-inner:hover {
        transform: translateY(-3px);
        color: #FFFFFF;
        background-size: 100% 2px;
        background-image: linear-gradient(90deg, #FFFFFF, #D6BFA3);
        transition: 
            transform 0.24s cubic-bezier(0.2, 0, 0, 1),
            color 0.22s ease,
            background-size 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    }
}

/* Paper Airplane and Dashed Arc Trail */
.manifesto-plane-trail-wrap {
    position: absolute;
    right: -110px;
    top: 40px;
    width: 170px;
    height: 270px;
    pointer-events: none;
    z-index: 2;
}

.manifesto-trail-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 170px;
    height: 270px;
    overflow: visible;
}

.manifesto-trail-path {
    stroke: rgba(247, 236, 221, 0.8);
    stroke-dasharray: 210;
    stroke-dashoffset: 210;
    transition: stroke-dashoffset 1.35s cubic-bezier(0.22, 1, 0.36, 1) 0.42s, opacity 0.5s ease 0.42s;
    opacity: 0.1;
}

.manifesto-plane-sprite {
    position: absolute;
    left: 17.4px;
    top: 194px;
    width: 52px;
    height: 54px;
    transform: translate3d(24px, -135px, 0) rotate(38deg) scale(0.6);
    opacity: 0;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
    transition: 
        transform 1.3s cubic-bezier(0.28, 1.35, 0.55, 1) 0.50s,
        opacity 0.5s ease 0.50s;
    pointer-events: auto;
    cursor: pointer;
}

.manifesto-content-wrap.is-revealed .manifesto-trail-path {
    stroke-dashoffset: 0;
    opacity: 0.8;
}

.manifesto-content-wrap.is-revealed .manifesto-plane-sprite {
    transform: translate3d(0, 0, 0) rotate(84deg) scale(1);
    opacity: 1;
}

.manifesto-plane-sprite:hover {
    transform: rotate(80deg) scale(1.15) translate(-4px, 4px) !important;
}

.manifesto-plane-sprite svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Respect Reduced Motion preference */
@media (prefers-reduced-motion: reduce) {
    .manifesto-word-inner {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
        animation: none !important;
    }
    .manifesto-trail-path {
        stroke-dashoffset: 0 !important;
        opacity: 0.8 !important;
        transition: none !important;
    }
    .manifesto-plane-sprite {
        transform: rotate(84deg) scale(1) !important;
        opacity: 1 !important;
        transition: none !important;
    }
}

/* Featured Realizacje / Work featured on */
.manifesto-featured-wrap {
    margin-top: 56px;
    width: 100%;
    max-width: 1100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.manifesto-featured-title {
    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: clamp(12px, 1.2vw, 14px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3.5px;
    color: rgba(247, 236, 221, 0.72);
    margin-bottom: 28px;
    display: inline-flex;
    align-items: center;
    gap: 16px;
}

.manifesto-featured-title::before,
.manifesto-featured-title::after {
    content: '';
    display: inline-block;
    width: 28px;
    height: 1px;
    background-color: rgba(247, 236, 221, 0.3);
}

.manifesto-logos-marquee {
    width: 100%;
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    padding: 12px 0;
}

.manifesto-logos-track {
    display: flex;
    align-items: center;
    width: max-content;
    gap: 72px;
    animation: marqueeManifestoLogos 48s linear infinite;
}

.manifesto-logos-marquee:hover .manifesto-logos-track {
    animation-play-state: paused;
}

@keyframes marqueeManifestoLogos {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.manifesto-logo-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.76;
    transition: opacity 0.25s ease, transform 0.25s ease, color 0.25s ease;
    color: rgba(247, 236, 221, 0.82);
    flex-shrink: 0;
    cursor: pointer;
    text-decoration: none;
    user-select: none;
}

.manifesto-logo-item:hover {
    opacity: 1;
    transform: translateY(-1px);
    color: #FFFFFF;
}

.brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.brand-icon {
    display: block;
    height: 28px;
    width: auto;
    flex-shrink: 0;
    fill: currentColor;
    transition: transform 0.25s ease;
}

.manifesto-logo-item:hover .brand-icon {
    transform: scale(1.05);
}

.brand-text-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    gap: 2px;
}

.brand-title {
    line-height: 1.1;
    white-space: nowrap;
    transition: color 0.25s ease;
}

.brand-sub {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(247, 236, 221, 0.55);
    white-space: nowrap;
    line-height: 1;
    transition: color 0.25s ease;
}

.manifesto-logo-item:hover .brand-sub {
    color: rgba(255, 255, 255, 0.85);
}

/* Specific Brand Styles */
.pernak-icon {
    height: 30px;
    width: 33px;
}

.pernak-title {
    font-family: "Outfit", "Plus Jakarta Sans", sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.5px;
}


.dretech-icon {
    height: 28px;
    width: 27px;
}

.dretech-title {
    font-family: "Space Grotesk", sans-serif;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 2.2px;
}

.maszyny-icon {
    height: 27px;
    width: 29px;
    flex-shrink: 0;
}

.maszyny-title {
    font-family: "Space Grotesk", sans-serif;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 2.2px;
    display: inline-flex;
    align-items: baseline;
}

.maszyny-pl-accent {
    color: #D4C5B5;
    font-weight: 800;
    letter-spacing: 2px;
    margin-left: 0.5px;
    transition: color 0.25s ease, text-shadow 0.25s ease;
}

.manifesto-logo-item:hover .maszyny-pl-accent {
    color: #FAF7F2;
    text-shadow: 0 0 10px rgba(212, 197, 181, 0.4);
}

.maszyny-sub {
    font-family: "Space Grotesk", sans-serif;
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.panoramic-icon {
    height: 22px;
    width: 28px;
}

.panoramic-title {
    font-family: "Cinzel", serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 4.5px;
}

/* Center Signature Dot */
.manifesto-dot {
    display: none;
}

/* Responsive Scaling */
@media (max-width: 1240px) {
    .manifesto-copy {
        max-width: 920px;
        margin: 0 auto;
    }
    .manifesto-plane-trail-wrap {
        right: -60px;
        transform: scale(0.85);
        transform-origin: right top;
    }
}

@media (max-width: 1024px) {
    .manifesto-section {
        padding: 85px 32px 70px 32px;
        min-height: auto;
    }
    .manifesto-copy {
        font-size: 25px;
        letter-spacing: -0.9px;
        max-width: 840px;
    }
    .manifesto-plane-trail-wrap {
        right: -30px;
        top: 45px;
        transform: scale(0.8);
        transform-origin: right top;
    }
    .manifesto-featured-wrap {
        margin-top: 40px;
    }
    .manifesto-logos-track {
        gap: 48px;
    }
    .manifesto-dot {
        margin-top: 32px;
    }
}

@media (max-width: 900px) {
    /* Manifesto mobile optimization: hardware-accelerated 60/120fps, zero blur filter lag */
    .manifesto-text-bold .manifesto-word-inner {
        transform: translate3d(0, 22px, 0) !important;
        filter: none !important;
        -webkit-filter: none !important;
        text-shadow: none !important;
        will-change: transform, opacity !important;
        transition: 
            transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
            opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
            color 0.7s ease !important;
        transition-delay: var(--word-delay, 0s) !important;
    }

    .manifesto-content-wrap.is-revealed .manifesto-text-bold .manifesto-word-inner {
        opacity: 1 !important;
        color: #FFFFFF !important;
        transform: translate3d(0, 0, 0) !important;
        filter: none !important;
        -webkit-filter: none !important;
    }

    .manifesto-text-normal .manifesto-word-inner {
        transform: translate3d(0, 18px, 0) !important;
        will-change: transform, opacity !important;
        transition: 
            transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
            opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
        transition-delay: var(--word-delay, 0s) !important;
    }

    .manifesto-content-wrap.is-revealed .manifesto-text-normal .manifesto-word-inner {
        opacity: 1 !important;
        transform: translate3d(0, 0, 0) !important;
    }
}

@media (max-width: 768px) {
    .manifesto-section {
        padding: 75px 20px 60px 20px;
        min-height: auto;
    }
    .manifesto-copy {
        font-size: 20px;
        letter-spacing: -0.5px;
        line-height: 1.42;
    }
    .manifesto-plane-trail-wrap {
        position: relative;
        right: auto;
        top: auto;
        margin: 25px auto 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 80px;
        height: 70px;
    }
    .manifesto-trail-svg {
        display: none;
    }
    .manifesto-plane-sprite {
        position: static;
        transform: scale(0.65) rotate(-52deg);
        opacity: 0;
        transition: transform 0.85s cubic-bezier(0.34, 1.4, 0.64, 1) 0.4s, opacity 0.5s ease 0.4s;
    }
    .manifesto-content-wrap.is-revealed .manifesto-plane-sprite {
        transform: scale(1) rotate(-52deg);
        opacity: 1;
    }
    .manifesto-featured-wrap {
        margin-top: 35px;
    }
    .manifesto-featured-title {
        font-size: 11px;
        letter-spacing: 2.5px;
        margin-bottom: 20px;
    }
    .manifesto-logos-track {
        gap: 40px;
        animation-duration: 24s;
    }
    .manifesto-logo-item {
        height: 28px;
    }
    .brand-lockup {
        gap: 7px;
    }
    .brand-icon {
        height: 19px;
    }
    .dretech-icon { height: 19px; width: 19px; }
    .pernak-icon { height: 20px; width: 22px; }
    .maszyny-icon { height: 19px; width: 21px; }
    .panoramic-icon { height: 17px; width: 22px; }
    .legal-icon { height: 18px; width: 18px; }
    .vogt-icon { height: 17px; width: 17px; }

    .dretech-text { font-size: 15px; letter-spacing: 1.5px; }
    .pernak-text { font-size: 14px; letter-spacing: 2px; }
    .maszyny-text { font-size: 14px; letter-spacing: 1px; }
    .maszyny-title { font-size: 15px; letter-spacing: 1.6px; }
    .maszyny-pl-accent { letter-spacing: 1.4px; }
    .panoramic-text { font-size: 14px; letter-spacing: 3px; }
    .legal-text { font-size: 13px; letter-spacing: 1.5px; }
    .vogt-text { font-size: 12px; letter-spacing: 2.5px; }
    .manifesto-dot {
        margin-top: 28px;
    }
}

/* ═══════════════════════════════════════════════════
   SHOWCASE / FEATURED PROJECTS SECTION (MATCHING SCREENSHOT)
   ═══════════════════════════════════════════════════ */
.showcase-section {
    position: relative;
    width: 100%;
    padding: 20px 48px 90px 48px;
    background-color: #400D1C;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
    scroll-margin-top: 80px;
}

.showcase-container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* SVG Flight Trail & Airplane Overlay */
.showcase-trail-wrap {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
}

.showcase-trail-svg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.showcase-trail-path {
    stroke: rgba(247, 236, 221, 0.75);
    stroke-width: 1.5;
    stroke-dasharray: 8 6;
    stroke-linecap: butt;
    fill: none;
}

.showcase-plane-sprite {
    position: absolute;
    width: 58px;
    height: 60px;
    transform-origin: center center;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.45));
}

/* Project Tiles Row */
.project-tiles-row {
    display: flex;
    gap: 25px;
    width: 100%;
    align-items: stretch;
    position: relative;
}

.project-tile {
    border-radius: 40px;
    overflow: hidden;
    height: 595px;
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(247, 236, 221, 0.1);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background: #161214;
    text-decoration: none;
}

.project-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 65px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(252, 144, 115, 0.4);
}

.project-tile.tile-wide {
    flex: 0 0 calc(60.7% - 13px);
    width: calc(60.7% - 13px);
}

.project-tile.tile-narrow {
    flex: 0 0 calc(39.3% - 12px);
    width: calc(39.3% - 12px);
}

/* Custom Widescreen Proportions for Row 2 (DRETECH) & Row 3 (Panoramic)
   Matches standard 16:9 widescreen dashboards perfectly so screenshots are displayed in full without cropping */
.project-tiles-row-2 .project-tile,
.project-tiles-row-3 .project-tile {
    height: 520px;
}

.project-tiles-row-2 .project-tile.tile-wide,
.project-tiles-row-3 .project-tile.tile-wide {
    flex: 0 0 calc(64% - 13px);
    width: calc(64% - 13px);
}

.project-tiles-row-2 .project-tile.tile-narrow,
.project-tiles-row-3 .project-tile.tile-narrow {
    flex: 0 0 calc(36% - 12px);
    width: calc(36% - 12px);
}

/* Card Tiles */
.project-tile.tile-white-card {
    background: #F7ECDD;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(186, 84, 57, 0.12);
    cursor: default;
}
.project-tile.tile-white-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Case Study Content Layout */
.tile-case-study {
    display: flex;
    flex-direction: column;
}

.case-study-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 14px;
    padding: 32px 30px 32px 30px;
    box-sizing: border-box;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    color: #1A1614;
}

.case-header-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    font-family: 'Space Grotesk', -apple-system, sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #8A4F3D;
    background: rgba(186, 84, 57, 0.08);
    padding: 5px 13px 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(186, 84, 57, 0.22);
    margin-bottom: 2px;
}

.case-pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #BA5439;
    box-shadow: 0 0 6px rgba(186, 84, 57, 0.6);
}

.case-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.case-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 19px;
    font-weight: 800;
    color: #12100E;
    letter-spacing: -0.4px;
    line-height: 1.2;
    margin: 0;
}

.case-points-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.case-point-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.case-bullet-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(220, 53, 38, 0.12);
    color: #DC2626;
    font-size: 13px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin-top: 1px;
}

.case-bullet-icon.solution {
    background: rgba(16, 124, 65, 0.12);
    color: #107C41;
    font-size: 11px;
}

.case-point-item p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.48;
    color: #38322E;
    font-weight: 500;
}

.case-point-item p strong {
    color: #110E0C;
    font-weight: 800;
}

.case-block-separator {
    display: block;
    width: 100%;
    height: 1px;
    min-height: 1px;
    flex-shrink: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(26, 22, 20, 0.16) 15%, rgba(26, 22, 20, 0.16) 85%, transparent 100%);
    margin: 4px 0;
}

/* ==========================================================================
   Apple Liquid Glass Carousel - High Refraction & Fluid Physics
   ========================================================================== */

.project-tile.tile-panoramic-card {
    background: #080B11;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.project-tile.tile-panoramic-card.apple-liquid-slider-tile {
    cursor: grab;
    user-select: none;
    touch-action: pan-y;
}

.project-tile.tile-panoramic-card.apple-liquid-slider-tile:active {
    cursor: grabbing;
}

.apple-slider-viewport {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    border-radius: 40px;
    perspective: 1400px;
}

.apple-slider-track {
    display: flex;
    width: 100%;
    height: 100%;
    will-change: transform;
    transform-style: preserve-3d;
}

.apple-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: #080B11;
    transform-style: preserve-3d;
}

.apple-slide-inner {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.apple-slide .tile-full-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    image-rendering: auto;
    pointer-events: none;
    will-change: transform, filter;
    transition: transform 0.68s cubic-bezier(0.16, 1, 0.3, 1), filter 0.68s ease;
}

.apple-slide .slide-pos-left {
    object-position: left top;
}

.apple-slide .slide-pos-center {
    object-position: center center;
}

/* Dynamic Glass Sheen Glare across display on swipe */
.apple-glass-sheen {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 8;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.08) 48%, rgba(255, 255, 255, 0.22) 50%, rgba(255, 255, 255, 0.06) 53%, transparent 68%);
    opacity: 0;
    transform: translateX(-100%);
}

.apple-glass-sheen.is-active {
    animation: appleSheenGlance 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes appleSheenGlance {
    0% {
        opacity: 0.8;
        transform: translateX(-100%);
    }
    100% {
        opacity: 0;
        transform: translateX(100%);
    }
}

/* Ambient Glass Vignette */
.apple-glass-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 9;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 20px 40px rgba(0, 0, 0, 0.4);
    border-radius: 40px;
}

/* ========================================================
   APPLE VISIONOS LIQUID GLASS 3-PIECE FLOATING DOCK
   ======================================================== */
.apple-liquid-glass-dock {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    user-select: none;
    pointer-events: auto;
}

/* 1. Separate Floating Circular Arrow Buttons */
.apple-glass-arrow {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(28px) saturate(190%) brightness(105%);
    -webkit-backdrop-filter: blur(28px) saturate(190%) brightness(105%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 
        0 8px 24px -2px rgba(0, 0, 0, 0.12),
        0 2px 6px rgba(0, 0, 0, 0.05),
        inset 0 1px 1.5px rgba(255, 255, 255, 1),
        inset 0 -1px 1px rgba(0, 0, 0, 0.03);
    color: #1D1D1F;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: 
        background 0.25s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
        color 0.2s ease,
        opacity 0.2s ease;
}

.apple-glass-arrow:hover:not(:disabled):not(.is-disabled) {
    background: rgba(255, 255, 255, 0.95);
    transform: scale(1.06);
    box-shadow: 
        0 12px 28px -2px rgba(0, 0, 0, 0.16),
        0 4px 10px rgba(0, 0, 0, 0.08),
        inset 0 1px 2px rgba(255, 255, 255, 1);
    color: #000000;
}

.apple-glass-arrow:active:not(:disabled):not(.is-disabled) {
    transform: scale(0.94);
    background: rgba(255, 255, 255, 0.86);
}

.apple-glass-arrow:disabled,
.apple-glass-arrow.is-disabled {
    opacity: 0.38;
    cursor: not-allowed;
    color: #8E929D;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), inset 0 1px 1px rgba(255, 255, 255, 0.85);
}

.apple-glass-arrow svg {
    width: 13px;
    height: 13px;
    stroke-width: 2.6;
    stroke: currentColor;
    display: block;
}

/* 2. Separate Floating Center Pill Capsule for Dots */
.apple-liquid-dots-rail {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    height: 42px;
    padding: 0 22px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(28px) saturate(190%) brightness(105%);
    -webkit-backdrop-filter: blur(28px) saturate(190%) brightness(105%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 
        0 8px 24px -2px rgba(0, 0, 0, 0.12),
        0 2px 6px rgba(0, 0, 0, 0.05),
        inset 0 1px 1.5px rgba(255, 255, 255, 1),
        inset 0 -1px 1px rgba(0, 0, 0, 0.03);
    transition: 
        background 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.apple-liquid-dots-rail:hover {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 
        0 12px 30px -2px rgba(0, 0, 0, 0.15),
        0 4px 10px rgba(0, 0, 0, 0.07),
        inset 0 1px 2px rgba(255, 255, 255, 1);
}

/* Inactive Pearl Dots */
.apple-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #B4B7C1;
    border: none;
    padding: 0;
    cursor: pointer;
    position: relative;
    z-index: 2;
    transition: background 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

.apple-dot:hover {
    background: #7D8290;
    transform: scale(1.3);
}

.apple-dot.is-active {
    opacity: 0;
}

/* Active Molten Liquid Glide Pill (Deep dark sleek pill, matching SS2) */
.apple-liquid-glide-pill {
    position: absolute;
    top: 50%;
    left: 0;
    height: 7px;
    border-radius: 9999px;
    background: #1D1D1F;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    z-index: 3;
    transform: translate3d(0, -50%, 0);
    will-change: transform, width;
    transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1), width 0.35s cubic-bezier(0.2, 0.9, 0.3, 1);
}

/* Mobile Responsiveness for 3-Piece Dock */
@media (max-width: 768px) {
    .apple-liquid-glass-dock {
        bottom: 16px;
        gap: 8px;
    }
    .apple-glass-arrow {
        width: 36px;
        height: 36px;
    }
    .apple-liquid-dots-rail {
        height: 36px;
        padding: 0 16px;
        gap: 10px;
    }
    .apple-dot {
        width: 6px;
        height: 6px;
    }
    .apple-liquid-glide-pill {
        height: 6px;
    }
}

/* ========================================================
   APPLE MAGNETIC CURSOR FOLLOWER BADGE (Row 3 Slider)
   ======================================================== */
.apple-liquid-slider-tile {
    cursor: pointer;
}

.apple-magnetic-cursor-badge {
    position: fixed;
    top: 0;
    left: 0;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(11, 15, 25, 0.88);
    backdrop-filter: blur(28px) saturate(210%) brightness(120%);
    -webkit-backdrop-filter: blur(28px) saturate(210%) brightness(120%);
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    box-shadow: 
        0 16px 40px rgba(0, 0, 0, 0.65),
        0 4px 12px rgba(0, 0, 0, 0.3),
        inset 0 1.5px 2px 0 rgba(255, 255, 255, 0.85),
        0 0 28px rgba(251, 191, 36, 0.22);
    opacity: 0;
    transform: translate3d(-100px, -100px, 0) scale(0);
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    will-change: transform, opacity;
}

.apple-magnetic-cursor-badge.is-visible {
    opacity: 1;
}

.cursor-badge-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
}

.cursor-badge-icon {
    color: #FBBF24;
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.5));
}

.cursor-badge-text {
    font-family: 'Space Grotesk', -apple-system, sans-serif;
    font-size: 8.5px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.9px;
    color: #FFFFFF;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    text-transform: uppercase;
}

/* ========================================================
   APPLE VISIONOS FLOATING SPATIAL SHOWCASE & FLIP MORPH
   ======================================================== */
.apple-spatial-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden !important;
}

.apple-spatial-lightbox.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Atmospheric Frosted Ambient Backdrop */
.apple-lightbox-scrim {
    position: absolute;
    inset: 0;
    background: rgba(4, 7, 14, 0.82);
    backdrop-filter: blur(48px) saturate(190%) brightness(0.55);
    -webkit-backdrop-filter: blur(48px) saturate(190%) brightness(0.55);
    opacity: 0;
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: zoom-out;
}

.apple-spatial-lightbox.is-open .apple-lightbox-scrim {
    opacity: 1;
}

/* Apple VisionOS Dynamic Ambient Chromatic Bloom behind the floating stage */
.apple-lightbox-ambient-glow {
    position: absolute;
    width: min(90vw, 1420px);
    height: min(72vh, 850px);
    border-radius: 50%;
    filter: blur(85px);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transform: scale(0.85);
    transition: opacity 0.55s ease 0.1s, transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.1s, background 0.7s ease;
    will-change: transform, opacity, background;
    /* Default amber glow */
    background: radial-gradient(ellipse at center, rgba(251, 191, 36, 0.28) 0%, rgba(59, 130, 246, 0.14) 50%, transparent 75%);
}

.apple-spatial-lightbox.is-open .apple-lightbox-ambient-glow {
    opacity: 0.65;
    transform: scale(1);
}

/* Floating Topbar Capsule Pill */
.apple-lightbox-top-pill {
    position: fixed;
    top: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(-22px) scale(0.94);
    opacity: 0;
    height: 40px;
    padding: 0 18px;
    border-radius: 9999px;
    background: rgba(18, 22, 34, 0.72);
    backdrop-filter: blur(28px) saturate(200%);
    -webkit-backdrop-filter: blur(28px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    z-index: 10;
    user-select: none;
    pointer-events: none;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.10s, opacity 0.35s ease 0.10s;
}

.apple-spatial-lightbox.is-open .apple-lightbox-top-pill {
    transform: translateX(-50%) translateY(0) scale(1);
    opacity: 1;
}

.apple-lightbox-tag {
    font-family: 'Space Grotesk', -apple-system, sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
    padding: 3px 8px;
    border-radius: 9999px;
    background: rgba(251, 191, 36, 0.18);
    color: #FBBF24;
    border: 1px solid rgba(251, 191, 36, 0.35);
}

.apple-lightbox-divider {
    color: rgba(255, 255, 255, 0.25);
    font-size: 10px;
}

.apple-lightbox-title {
    font-family: 'Syne', -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: -0.2px;
    margin: 0;
    white-space: nowrap;
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.apple-lightbox-counter {
    font-family: 'Space Grotesk', monospace, sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
}

/* Floating Close Glass Disc (Top-Right) - Vivid Red Base, Vibrant Emerald Green Hover */
.apple-lightbox-close-disc {
    position: fixed;
    top: 26px;
    right: 32px;
    z-index: 10;
    height: 44px;
    padding: 0 16px;
    border-radius: 9999px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.20) 0%, rgba(185, 28, 28, 0.30) 100%);
    backdrop-filter: blur(28px) saturate(200%);
    -webkit-backdrop-filter: blur(28px) saturate(200%);
    border: 1px solid rgba(255, 82, 82, 0.58);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 22px rgba(239, 68, 68, 0.32), inset 0 1px 1.5px rgba(255, 140, 140, 0.5);
    color: #FF5A5A;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    transform: translateY(-20px) scale(0.94);
    opacity: 0;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.32s ease, background 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease;
}

.apple-lightbox-close-disc svg {
    stroke: currentColor;
    filter: drop-shadow(0 0 6px rgba(255, 82, 82, 0.5));
    transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), stroke 0.28s ease, filter 0.28s ease;
}

.apple-spatial-lightbox.is-open .apple-lightbox-close-disc {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.apple-spatial-lightbox.is-open .apple-lightbox-close-disc:hover,
.apple-lightbox-close-disc:hover {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.28) 0%, rgba(21, 128, 61, 0.38) 100%);
    color: #4ADE80;
    border-color: rgba(74, 222, 128, 0.75);
    transform: translateY(0) scale(1.06);
    box-shadow: 0 0 32px rgba(34, 197, 94, 0.55), 0 10px 30px rgba(0, 0, 0, 0.55), inset 0 1px 2px rgba(167, 243, 208, 0.7);
}

.apple-lightbox-close-disc:hover svg {
    stroke: #4ADE80;
    transform: rotate(90deg) scale(1.12);
    filter: drop-shadow(0 0 10px rgba(74, 222, 128, 0.85));
}

.apple-lightbox-close-disc:active {
    transform: translateY(0) scale(0.94);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.38) 0%, rgba(21, 128, 61, 0.50) 100%);
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.75), inset 0 2px 4px rgba(0, 0, 0, 0.6);
}

.apple-lightbox-close-disc .close-label {
    font-family: 'Space Grotesk', -apple-system, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: inherit;
    text-shadow: 0 0 10px rgba(255, 82, 82, 0.35);
    transition: color 0.28s ease, text-shadow 0.28s ease;
}

.apple-lightbox-close-disc:hover .close-label {
    color: #FFFFFF;
    text-shadow: 0 0 14px rgba(74, 222, 128, 0.8);
}

.apple-lightbox-close-disc .esc-badge {
    font-family: 'Space Grotesk', monospace, sans-serif;
    font-size: 9px;
    font-weight: 800;
    padding: 2px 5px;
    border-radius: 4px;
    background: rgba(255, 69, 58, 0.22);
    border: 1px solid rgba(255, 69, 58, 0.42);
    color: #FFA39E;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: background 0.28s ease, border-color 0.28s ease, color 0.28s ease, box-shadow 0.28s ease;
}

.apple-lightbox-close-disc:hover .esc-badge {
    background: rgba(34, 197, 94, 0.30);
    border-color: rgba(74, 222, 128, 0.65);
    color: #86EFAC;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Floating Navigation Chevrons */
.apple-lightbox-floating-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%) scale(0.88);
    opacity: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(18, 22, 34, 0.68);
    backdrop-filter: blur(28px) saturate(200%);
    -webkit-backdrop-filter: blur(28px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.4);
    color: rgba(255, 255, 255, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.18s, opacity 0.35s ease 0.18s, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.apple-spatial-lightbox.is-open .apple-lightbox-floating-nav {
    transform: translateY(-50%) scale(1);
    opacity: 1;
}

.apple-lightbox-floating-nav.prev {
    left: 32px;
}

.apple-lightbox-floating-nav.next {
    right: 32px;
}

.apple-lightbox-floating-nav:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.45);
    transform: translateY(-50%) scale(1.12);
    box-shadow: 0 0 24px rgba(255, 255, 255, 0.4), inset 0 1px 1.5px #FFFFFF;
}

.apple-lightbox-floating-nav:active {
    transform: translateY(-50%) scale(0.94);
}

/* Floating Stage & Hero Shared Element */
.apple-lightbox-stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
    perspective: 1600px;
}

.apple-lightbox-hero {
    position: relative;
    pointer-events: auto;
    border-radius: 20px;
    overflow: hidden;
    background: #080B11;
    box-shadow: 
        0 0 0 1px rgba(255, 255, 255, 0.16),
        0 44px 110px -20px rgba(0, 0, 0, 0.88),
        0 18px 45px rgba(0, 0, 0, 0.55);
    will-change: transform, opacity, width, height, border-radius, box-shadow;
    transform-origin: center center;
    transform-style: preserve-3d;
    cursor: default;
    transition: box-shadow 0.4s ease;
}

.apple-lightbox-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0.22);
    z-index: 6;
}

/* Specular Glass Sheen moving with 3D tilt */
.apple-lightbox-sheen {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    border-radius: inherit;
    background: radial-gradient(circle 550px at var(--sheen-x, 50%) var(--sheen-y, 30%), rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.03) 45%, transparent 75%);
    opacity: 0;
    transition: opacity 0.4s ease;
    mix-blend-mode: overlay;
}

.apple-spatial-lightbox.is-open .apple-lightbox-sheen {
    opacity: 1;
}

.apple-lightbox-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
    border-radius: inherit;
    transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.26s cubic-bezier(0.16, 1, 0.3, 1), filter 0.22s ease;
}

/* Bottom Floating VisionOS Dock */
.apple-lightbox-floating-dock {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(24px) scale(0.94);
    opacity: 0;
    height: 44px;
    padding: 0 18px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(28px) saturate(190%) brightness(105%);
    -webkit-backdrop-filter: blur(28px) saturate(190%) brightness(105%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 
        0 14px 36px -4px rgba(0, 0, 0, 0.35),
        0 4px 12px rgba(0, 0, 0, 0.15),
        inset 0 1px 1.5px rgba(255, 255, 255, 1);
    display: inline-flex;
    align-items: center;
    gap: 16px;
    z-index: 10;
    user-select: none;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.22s, opacity 0.35s ease 0.22s;
}

.apple-spatial-lightbox.is-open .apple-lightbox-floating-dock {
    transform: translateX(-50%) translateY(0) scale(1);
    opacity: 1;
}

.apple-lightbox-dots-rail {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    position: relative;
    padding: 2px 4px;
}

.apple-lightbox-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #B4B7C1;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    z-index: 2;
}

.apple-lightbox-dot:hover {
    background: #7D8290;
    transform: scale(1.3);
}

.apple-lightbox-dot.is-active {
    opacity: 0;
}

.apple-lightbox-glide-pill {
    position: absolute;
    top: 50%;
    left: 0;
    height: 7px;
    border-radius: 9999px;
    background: #1D1D1F;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    z-index: 3;
    transform: translate3d(0, -50%, 0);
    will-change: transform, width;
    transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1), width 0.35s ease;
}

.apple-lightbox-hint {
    font-family: 'Space Grotesk', -apple-system, sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #4A4D57;
    letter-spacing: 0.2px;
    white-space: nowrap;
    border-left: 1px solid rgba(0, 0, 0, 0.12);
    padding-left: 14px;
}

.apple-lightbox-mobile-swipe-hint {
    display: none !important;
}

/* Responsiveness for compact screen heights (e.g. laptop / devtools) */
@media (max-height: 680px) {
    .apple-lightbox-top-pill {
        top: 14px;
        height: 34px;
        padding: 0 14px;
    }
    .apple-lightbox-close-disc {
        top: 12px;
        right: 18px;
        height: 38px;
        padding: 0 14px;
    }
    .apple-lightbox-floating-dock {
        bottom: 14px;
        height: 38px;
    }
}

@media (max-width: 900px) {
    .apple-spatial-lightbox,
    .apple-lightbox-stage,
    .apple-lightbox-hero,
    .apple-lightbox-image,
    .apple-lightbox-scrim {
        touch-action: none !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        -webkit-touch-callout: none !important;
    }
    .apple-magnetic-cursor-badge {
        display: none !important;
    }
    .apple-lightbox-floating-nav {
        display: none;
    }
    .apple-lightbox-top-pill {
        top: 14px;
        left: 14px;
        right: auto;
        transform: translateY(-22px) scale(0.94);
        max-width: calc(100% - 70px);
        box-sizing: border-box;
        padding: 0 10px;
        height: 38px;
        gap: 6px;
        display: inline-flex;
        align-items: center;
        overflow: hidden;
        white-space: nowrap;
    }
    .apple-spatial-lightbox.is-open .apple-lightbox-top-pill {
        transform: translateY(0) scale(1);
    }
    .apple-lightbox-tag {
        font-size: 8.5px;
        font-weight: 800;
        letter-spacing: 0.4px;
        padding: 2.5px 6px;
        border-radius: 9999px;
        white-space: nowrap;
        flex-shrink: 0;
        line-height: 1.2;
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .apple-lightbox-divider {
        font-size: 9px;
        flex-shrink: 0;
        opacity: 0.35;
    }
    .apple-lightbox-title {
        font-size: 11.5px;
        font-weight: 600;
        letter-spacing: -0.1px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
        margin: 0;
    }
    .apple-lightbox-counter {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.3px;
        white-space: nowrap;
        flex-shrink: 0;
        line-height: 1;
    }
    .apple-lightbox-close-disc {
        top: 14px;
        right: 14px;
        width: 38px;
        height: 38px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        flex-shrink: 0;
    }
    .apple-lightbox-close-disc .close-label,
    .apple-lightbox-close-disc .esc-badge {
        display: none;
    }
    .apple-lightbox-floating-dock {
        bottom: 18px;
        height: 42px;
        padding: 0 12px;
    }
    .apple-lightbox-hint {
        display: none;
    }

    /* Mobile Real-time Typewriter Gesture Hint (Shown in lower empty filling) */
    .apple-lightbox-mobile-swipe-hint {
        position: fixed !important;
        bottom: 74px !important;
        left: 50% !important;
        transform: translateX(-50%) translateY(10px) scale(0.94) !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 7px !important;
        padding: 6px 14px !important;
        border-radius: 9999px !important;
        background: rgba(18, 5, 12, 0.82) !important;
        backdrop-filter: blur(20px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
        border: 1px solid rgba(247, 236, 221, 0.22) !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65), 0 0 16px rgba(247, 236, 221, 0.10), inset 0 1px 1px rgba(255, 255, 255, 0.15) !important;
        z-index: 12 !important;
        pointer-events: none !important;
        opacity: 0 !important;
        will-change: transform, opacity;
        transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }

    .apple-spatial-lightbox.is-open .apple-lightbox-mobile-swipe-hint.is-visible {
        opacity: 1 !important;
        transform: translateX(-50%) translateY(0) scale(1) !important;
    }

    .apple-lightbox-mobile-swipe-hint.is-dimmed {
        opacity: 0.38 !important;
        transition: opacity 0.8s ease !important;
    }

    .apple-lightbox-mobile-swipe-hint.is-dismissed {
        opacity: 0 !important;
        transform: translateX(-50%) translateY(12px) scale(0.92) !important;
        transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .swipe-hint-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #34D399 !important;
        flex-shrink: 0 !important;
        animation: swipeHintNudge 2.2s infinite ease-in-out !important;
    }

    @keyframes swipeHintNudge {
        0%, 100% { transform: translateX(0); }
        25% { transform: translateX(-3px); }
        75% { transform: translateX(3px); }
    }

    .swipe-hint-text {
        font-family: var(--font-heading), 'Space Grotesk', -apple-system, sans-serif !important;
        font-size: 0.72rem !important; /* 11.5px */
        font-weight: 700 !important;
        color: #F7ECDD !important;
        letter-spacing: -0.1px !important;
        white-space: nowrap !important;
        line-height: 1 !important;
    }

    .swipe-hint-cursor {
        display: inline-block !important;
        width: 1.5px !important;
        height: 11px !important;
        background: #34D399 !important;
        border-radius: 1px !important;
        margin-left: 1px !important;
        box-shadow: 0 0 6px rgba(52, 211, 153, 0.8) !important;
        animation: swipeCursorBlink 0.85s infinite ease-in-out !important;
    }

    @keyframes swipeCursorBlink {
        0%, 100% { opacity: 1; }
        50% { opacity: 0; }
    }
}

/* Mockup Inside Tile */
.cs-hero-mock {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    isolation: isolate;
}

.cs-hero-zoom {
    position: absolute;
    inset: 0;
    animation: csHeroZoomTileLap 18s ease-in-out infinite;
    will-change: transform;
}

.tile-narrow .cs-hero-zoom {
    animation-name: csHeroZoomTileIn;
}

@keyframes csHeroZoomTileLap {
    0%, 100% { transform: scale(1.32); }
    50% { transform: scale(1.37); }
}

@keyframes csHeroZoomTileIn {
    0%, 100% { transform: scale(1.18); }
    50% { transform: scale(1.23); }
}

@media (prefers-reduced-motion: reduce) {
    .cs-hero-zoom { animation: none !important; }
    .tile-wide .cs-hero-zoom { transform: scale(1.32) !important; }
    .tile-narrow .cs-hero-zoom { transform: scale(1.18) !important; }
}

.cs-hero-plate {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 0;
}

.cs-hero-screen {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.cs-hero-vid {
    position: absolute;
    top: 0;
    left: 0;
    width: 1000px;
    height: 671px;
    object-fit: cover;
    transform-origin: 0 0;
    backface-visibility: hidden;
    border-radius: 22px;
}

.cs-mock-phone .cs-hero-vid {
    width: 462px;
    height: 1000px;
    border-radius: 64px;
}

.cs-mock-ex .cs-hero-vid {
    width: 462px;
    height: 1000px;
    border-radius: 64px;
}

.cs-mock-watch {
    --warp-zoom: 1;
}
@media (min-width: 901px) {
    .cs-mock-watch:not(.tile-mock) {
        --warp-zoom: 1.3;
    }
}
.cs-mock-watch.tile-mock {
    --warp-zoom: 1.8;
}
.cs-mock-watch .cs-hero-plate {
    width: calc(100% * var(--warp-zoom));
    height: calc(100% * var(--warp-zoom));
    left: calc((100% - 100% * var(--warp-zoom)) / 2);
    top: calc((100% - 100% * var(--warp-zoom)) / 2);
    right: auto;
    bottom: auto;
}
.cs-mock-watch .cs-hero-zoom {
    animation: none;
    transform: none;
    will-change: auto;
}
.cs-mock-watch .cs-hero-vid {
    width: 885.96px;
    height: 1078.95px;
    border-radius: 230px;
}

/* Tile Hover Overlay */
.tile-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(64, 13, 28, 0.75);
    opacity: 0;
    z-index: 5;
    transition: opacity 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    text-align: center;
}

.project-tile:hover .tile-overlay,
.project-tile:focus-visible .tile-overlay {
    opacity: 1;
}

.tile-overlay-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 38px;
    letter-spacing: -1.2px;
    line-height: 1.2;
    color: #FFF9F1;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.tile-overlay-subtitle {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    font-size: 18px;
    letter-spacing: -0.5px;
    line-height: 1.4;
    color: rgba(247, 236, 221, 0.9);
    max-width: 420px;
    margin: 0;
}

/* Responsive Breakpoints */
@media (max-width: 1100px) {
    .project-tile {
        height: 500px;
    }
    .project-tiles-row-2 .project-tile,
    .project-tiles-row-3 .project-tile {
        height: 440px;
    }
}

@media (max-width: 980px) {
    .showcase-section {
        padding: 20px 24px 70px 24px;
    }
    .project-tiles-row {
        flex-direction: column;
        gap: 20px;
    }
    .project-tiles-row-2 {
        display: flex !important;
        flex-direction: column !important;
    }
    .project-tiles-row-2 .tile-panoramic-card {
        order: -1 !important;
    }
    .project-tiles-row-2 .tile-case-study {
        order: 2 !important;
    }
    .project-tile.tile-wide,
    .project-tile.tile-narrow,
    .project-tiles-row-2 .project-tile.tile-wide,
    .project-tiles-row-2 .project-tile.tile-narrow,
    .project-tiles-row-3 .project-tile.tile-wide,
    .project-tiles-row-3 .project-tile.tile-narrow {
        width: 100%;
        flex: none;
        height: 460px;
    }
    .project-tiles-row-2 .project-tile.tile-wide,
    .project-tiles-row-3 .project-tile.tile-wide,
    .project-tile.tile-panoramic-card {
        height: clamp(230px, 56.25vw, 460px);
    }
    .project-tile.tile-case-study,
    .project-tiles-row-2 .project-tile.tile-case-study,
    .project-tiles-row-3 .project-tile.tile-case-study {
        height: auto;
        min-height: auto;
    }
    .tile-case-study .case-study-content {
        height: auto;
        padding: 28px 22px 38px 22px;
        gap: 14px;
    }
    .showcase-trail-wrap {
        display: none;
    }
}

/* ── Panel Klienta Michał • Dedykowany Portal Analityczny (Phone Mockup) ── */
.phone-app-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 462px;
    height: 1000px;
    border-radius: 64px;
    background: #080B11;
    color: #FFFFFF;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    overflow: hidden;
    transform-origin: 0 0;
    backface-visibility: hidden;
    user-select: none;
    -webkit-user-select: none;
    box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.95);
}

/* iOS Dynamic Island & Status Bar */
.phone-app-screen .app-status-bar {
    height: 52px;
    padding: 15px 30px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: rgba(255, 255, 255, 0.9);
    position: relative;
    z-index: 30;
}
.dynamic-island {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 28px;
    background: #000000;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 11px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.island-dot { width: 9px; height: 9px; border-radius: 50%; background: #1C2434; }
.island-cam { width: 11px; height: 11px; border-radius: 50%; background: #0F1420; border: 1px solid #1C2434; }

.phone-app-screen .app-status-icons { display: flex; gap: 6px; align-items: center; }
.ios-signal-bars { display: block; color: #FFFFFF; }
.ios-5g-text {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: #FFFFFF;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
}
.ios-battery-pill {
    width: 25px;
    height: 12.5px;
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    border-radius: 4px;
    padding: 1.2px;
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
.ios-battery-pill::after {
    content: '';
    position: absolute;
    right: -3px;
    top: 2.8px;
    width: 1.8px;
    height: 4.2px;
    background: rgba(255, 255, 255, 0.45);
    border-radius: 0 1.2px 1.2px 0;
}
.ios-battery-core {
    width: 100%;
    height: 100%;
    background: #FFD60A;
    border-radius: 1.8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ios-battery-pct {
    font-size: 8px;
    font-weight: 800;
    color: #000000;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    line-height: 1;
    letter-spacing: -0.3px;
}

/* Slider Container */
.phone-app-screen .screens-slider {
    position: absolute;
    top: 52px;
    bottom: 78px;
    left: 0;
    width: 924px;
    display: flex;
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.phone-app-screen .screen-view {
    width: 462px;
    height: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 12px 24px 16px;
    position: relative;
    justify-content: space-between;
}

/* ── VIEW 1: LIVE DASHBOARD STATS ── */
.dash-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.dash-user-info { display: flex; align-items: center; gap: 12px; }
.user-avatar {
    width: 42px; height: 42px; border-radius: 14px;
    background: linear-gradient(135deg, #1E293B, #334155);
    border: 1px solid rgba(255, 255, 255, 0.18);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 15px; color: #FFF;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.user-greeting-label { font-size: 10.5px; font-weight: 700; color: rgba(255, 255, 255, 0.45); text-transform: uppercase; letter-spacing: 0.6px; }
.user-name-title { font-size: 17px; font-weight: 800; color: #FFF; letter-spacing: -0.3px; }

.live-sync-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
    background: rgba(46, 213, 115, 0.12); border: 1px solid rgba(46, 213, 115, 0.3);
    border-radius: 100px; font-size: 11px; font-weight: 700; color: #2ED573;
}
.live-pulse {
    width: 6px; height: 6px; border-radius: 50%; background: #2ED573; box-shadow: 0 0 8px #2ED573;
    animation: pulseGreen 1.5s infinite;
}
.live-divider { color: rgba(255,255,255,0.25); margin: 0 1px; }
.live-online-num { color: #A7F3D0; font-weight: 800; font-family: 'Space Grotesk', sans-serif; }
@keyframes pulseGreen { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.3; transform: scale(0.8); } }

/* Client Live Polish Typing / Action Input */
#viewDashboard {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.dash-search-box {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 9px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    transition: all 0.3s ease;
    cursor: pointer;
}
.dash-search-box.active {
    background: rgba(18, 25, 38, 0.96);
    border-color: #3884FF;
    box-shadow: 0 0 18px rgba(56, 132, 255, 0.38);
}
.search-box-left {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1;
    overflow: hidden;
}
.search-lens-icon {
    flex-shrink: 0;
}
.search-input-content {
    position: relative;
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
}
.search-placeholder {
    color: rgba(255, 255, 255, 0.4);
    transition: opacity 0.2s ease;
}
.search-placeholder.hidden {
    display: none;
}
.search-typed-text {
    color: #FFFFFF;
    font-weight: 700;
    letter-spacing: -0.2px;
}
.search-caret {
    display: inline-block;
    width: 2px;
    height: 14px;
    background: #3884FF;
    margin-left: 2px;
    vertical-align: middle;
    opacity: 0;
}
.search-caret.blinking {
    animation: iosCaretBlink 0.9s infinite;
}
@keyframes iosCaretBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
.search-box-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    background: rgba(56, 132, 255, 0.15);
    border: 1px solid rgba(56, 132, 255, 0.3);
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    color: #70A1FF;
    flex-shrink: 0;
    transition: all 0.3s ease;
}
.search-box-badge.success {
    background: rgba(46, 213, 115, 0.15);
    border-color: rgba(46, 213, 115, 0.4);
    color: #2ED573;
}
.search-box-badge .badge-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

/* Modern Priority Pills (Nowoczesne Pigułki) */
.dash-priority-pills-row {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    overflow-x: auto;
    scrollbar-width: none;
}
.dash-priority-pills-row::-webkit-scrollbar { display: none; }
.priority-pill {
    padding: 5px 11px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 100px;
    font-size: 10.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(10px);
}
.priority-pill:hover,
.priority-pill.active {
    background: rgba(56, 132, 255, 0.16);
    border-color: rgba(56, 132, 255, 0.45);
    color: #FFFFFF;
    box-shadow: 0 2px 10px rgba(56, 132, 255, 0.25);
}
.priority-pill.pulse {
    animation: prioPillPulse 1.2s infinite;
}
@keyframes prioPillPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(56, 132, 255, 0.3); }
    50% { box-shadow: 0 0 18px rgba(46, 213, 115, 0.6); border-color: #2ED573; color: #2ED573; }
}

/* Timeframe Selector Pills */
.dash-timeframe-row {
    display: flex;
    gap: 7px;
    margin-bottom: 12px;
}
.timeframe-pill {
    padding: 6px 13px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 100px;
    font-size: 11.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: all 0.2s ease;
}
.timeframe-pill.active {
    background: rgba(56, 132, 255, 0.22);
    border-color: #3884FF;
    color: #FFF;
    box-shadow: 0 2px 10px rgba(56, 132, 255, 0.35);
}

/* Big Metric Hero Card with Chart */
.metric-hero-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 26px;
    padding: 18px 20px 16px;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(16px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
}
.metric-hero-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 5px; }
.metric-hero-title { font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, 0.65); }
.metric-hero-badge {
    display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px;
    background: rgba(56, 132, 255, 0.15); border: 1px solid rgba(56, 132, 255, 0.3);
    border-radius: 100px; font-size: 10.5px; font-weight: 700; color: #3884FF;
}

.metric-hero-val {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 46px;
    font-weight: 900;
    letter-spacing: -1.8px;
    line-height: 1.1;
    color: #FFFFFF;
    margin-bottom: 4px;
}
.metric-hero-val span { font-size: 26px; color: #3884FF; margin-left: 2px; }

.metric-hero-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: #2ED573;
    font-weight: 700;
    margin-bottom: 12px;
}
.metric-hero-sub span.compare { color: rgba(255, 255, 255, 0.4); font-weight: 500; }

/* SVG Live Area Chart with traveling dot */
.chart-container {
    width: 100%;
    height: 100px;
    position: relative;
    margin-top: 4px;
}
.chart-svg { width: 100%; height: 100%; overflow: visible; }
.chart-area {
    fill: url(#blueAreaGrad);
    opacity: 0.7;
}
.chart-line {
    fill: none;
    stroke: #3884FF;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 4px 12px rgba(56, 132, 255, 0.65));
}
.chart-live-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 2.5px solid #3884FF;
    box-shadow: 0 0 14px #3884FF, 0 0 24px rgba(56, 132, 255, 0.9);
    position: absolute;
    transform: translate(-50%, -50%);
    left: 0%;
    top: 90%;
    z-index: 4;
    pointer-events: none;
}
.chart-live-dot.peaked {
    animation: pingPeakDot 1.4s infinite;
}
@keyframes pingPeakDot {
    0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 14px #3884FF; }
    50% { transform: translate(-50%, -50%) scale(1.4); box-shadow: 0 0 24px #2ED573, 0 0 35px #2ED573; }
}
.chart-peak-badge {
    position: absolute;
    right: -6px;
    top: -18px;
    background: rgba(46, 213, 115, 0.2);
    border: 1px solid rgba(46, 213, 115, 0.5);
    color: #2ED573;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 100px;
    box-shadow: 0 4px 12px rgba(46, 213, 115, 0.3);
    opacity: 0;
    transform: translateY(6px) scale(0.9);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    white-space: nowrap;
    z-index: 5;
}
.chart-peak-badge.active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Scrubbing Tooltip on Chart Line */
.chart-scrub-tooltip {
    position: absolute;
    left: 68%;
    top: 15%;
    background: rgba(15, 23, 42, 0.94);
    border: 1.5px solid #3884FF;
    border-radius: 12px;
    padding: 6px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), 0 0 16px rgba(56, 132, 255, 0.35);
    backdrop-filter: blur(12px);
    opacity: 0;
    transform: translate(-50%, -100%) scale(0.85);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    z-index: 10;
}
.chart-scrub-tooltip.active {
    opacity: 1;
    transform: translate(-50%, -100%) scale(1);
}
.chart-scrub-tooltip .scrub-title { font-size: 10px; color: rgba(255, 255, 255, 0.5); font-weight: 700; text-transform: uppercase; }
.chart-scrub-tooltip .scrub-val { font-size: 13px; color: #70A1FF; font-weight: 800; font-family: 'Space Grotesk', sans-serif; }
.chart-scrub-guide {
    position: absolute;
    left: 68%;
    top: 38px;
    height: 62px;
    width: 1.5px;
    background: linear-gradient(180deg, #3884FF, transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.chart-scrub-guide.active { opacity: 1; }

/* 2x2 Grid of Key Metrics */
.metrics-grid-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}
.mini-stat-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 19px;
    padding: 13px 15px;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.mini-stat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}
.mini-stat-icon {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: rgba(56, 132, 255, 0.12);
    color: #3884FF;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mini-stat-icon svg { width: 14px; height: 14px; stroke-width: 2.2; }
.mini-stat-growth {
    font-size: 10.5px;
    font-weight: 800;
    color: #2ED573;
}
.mini-stat-title {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 2px;
}
.mini-stat-val {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #FFF;
    letter-spacing: -0.5px;
}
.mini-stat-val span { font-size: 13px; font-weight: 700; }

/* Live Activity Feed */
.activity-feed-card {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 20px;
    padding: 14px 16px;
    margin-bottom: 12px;
}
.feed-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 11px;
}
.feed-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(255, 255, 255, 0.45);
}
.feed-live-indicator {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 700;
    color: #2ED573;
}
.feed-items-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.feed-item {
    display: flex;
    align-items: center;
    gap: 10px;
}
.feed-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.feed-dot.green { background: #2ED573; box-shadow: 0 0 6px #2ED573; }
.feed-dot.blue { background: #3884FF; box-shadow: 0 0 6px #3884FF; }
.feed-dot.purple { background: #A855F7; box-shadow: 0 0 6px #A855F7; }
.feed-dot.cyan { background: #00D2FF; box-shadow: 0 0 6px #00D2FF; }
.feed-text {
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.feed-time {
    font-size: 10px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
}

/* Live Action Trigger Card */
.growth-action-card {
    background: linear-gradient(135deg, #182C61 0%, #204094 60%, #2B57D8 100%);
    border-radius: 20px;
    padding: 15px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 12px 28px rgba(32, 64, 148, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.growth-action-card.clicked { transform: scale(0.97); }
.growth-action-card::after {
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 60%);
    animation: rotateGlow 6s linear infinite;
}
@keyframes rotateGlow { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.action-left { position: relative; z-index: 2; }
.action-tag { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; color: #A0C4FF; margin-bottom: 2px; }
.action-title { font-size: 14.5px; font-weight: 700; color: #FFF; line-height: 1.25; }
.action-btn-circle {
    width: 38px; height: 38px; border-radius: 12px; background: #FFFFFF; color: #182C61;
    display: flex; align-items: center; justify-content: center; position: relative; z-index: 2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
}

.growth-action-card.pressed {
    transform: scale(0.96) !important;
    box-shadow: 0 0 24px rgba(56, 132, 255, 0.7) !important;
}

/* ── VIEW 2: DRILLDOWN GROWTH ANALYTICS ── */
.view-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.nav-back-pill {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px; font-size: 11.5px; font-weight: 700; color: #FFF; cursor: pointer;
    transition: all 0.2s ease;
}
.nav-back-pill.pressed {
    transform: scale(0.95) !important;
    background: rgba(56, 132, 255, 0.3) !important;
    border-color: #3884FF !important;
}
.view-top-title { font-size: 15px; font-weight: 800; color: #FFF; }
.view-top-period { font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.45); }

/* Ultra-Modern Pills Filter (Zero Emojis!) */
.filter-pills-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    overflow-x: auto;
    scrollbar-width: none;
}
.filter-pills-row::-webkit-scrollbar { display: none; }
.modern-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 15px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 13px;
    font-size: 11.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.modern-pill svg { width: 14px; height: 14px; stroke: currentColor; fill: none; transition: stroke 0.3s ease; }
.modern-pill.active {
    background: rgba(56, 132, 255, 0.18);
    border-color: #3884FF;
    color: #FFFFFF;
    box-shadow: 0 4px 16px rgba(56, 132, 255, 0.35);
}
.modern-pill.active svg { stroke: #3884FF; }
.modern-pill.pressed {
    transform: scale(0.95) !important;
    box-shadow: 0 0 16px rgba(56, 132, 255, 0.6) !important;
}

/* Big Bar Chart Analytics Card */
.analytics-chart-card {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 16px 20px 14px;
    margin-bottom: 12px;
    position: relative;
    overflow: visible;
}
.chart-card-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.chart-card-title { font-size: 13px; font-weight: 800; color: rgba(255, 255, 255, 0.95); letter-spacing: -0.2px; }
.chart-card-metric {
    font-size: 12px;
    font-weight: 800;
    color: #2ED573;
    padding: 4px 10px;
    background: rgba(46, 213, 115, 0.12);
    border: 1px solid rgba(46, 213, 115, 0.3);
    border-radius: 100px;
    transition: all 0.3s ease;
}

/* Benchmark Dotted Target Line */
.chart-benchmark-line {
    position: absolute;
    left: 20px;
    right: 20px;
    top: 86px;
    border-top: 1.5px dashed rgba(255, 255, 255, 0.16);
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
    z-index: 3;
}
.chart-benchmark-line span {
    font-size: 9.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.45);
    background: #0B0E17;
    padding: 1px 6px;
    border-radius: 4px;
    margin-top: -8px;
}

.bars-wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 154px;
    padding: 0 4px;
    position: relative;
    z-index: 2;
}
.bar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    height: 100%;
    justify-content: flex-end;
    position: relative;
    cursor: pointer;
}
.bar-val-badge {
    font-size: 10px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.65);
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: -0.2px;
    transition: all 0.3s ease;
}
.bar-col.highlight .bar-val-badge {
    color: #2ED573;
    font-weight: 900;
    transform: scale(1.05);
}
.bar-track {
    width: 28px;
    height: 114px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}
.bar-fill {
    width: 100%;
    background: linear-gradient(180deg, #3884FF 0%, #1844A6 100%);
    border-radius: 8px;
    height: 0%;
    transition: height 0.9s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease;
    position: relative;
}
.bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 8px 8px 0 0;
}
.bar-col.highlight .bar-fill {
    background: linear-gradient(180deg, #2ED573 0%, #0E8548 100%);
    box-shadow: 0 0 18px rgba(46, 213, 115, 0.6);
}
.bar-col.highlight .bar-fill::after {
    background: #FFFFFF;
    box-shadow: 0 0 8px #2ED573;
}
.bar-label {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    transition: color 0.3s ease;
}
.bar-col.highlight .bar-label {
    color: #2ED573;
    font-weight: 800;
}

/* Floating Detail Tooltip for Bars */
.bar-floating-tooltip {
    position: absolute;
    right: 8px;
    left: auto;
    top: 52px;
    background: #0B132B;
    border: 1.5px solid #2ED573;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.7), 0 0 20px rgba(46, 213, 115, 0.35);
    border-radius: 14px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    transform: translateY(-8px) scale(0.85);
    opacity: 0;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    white-space: nowrap;
    z-index: 15;
}
.bar-floating-tooltip.active {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.bar-floating-tooltip .tooltip-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
}
.bar-floating-tooltip .tooltip-header .tooltip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2ED573;
    box-shadow: 0 0 6px #2ED573;
}
.bar-floating-tooltip .tooltip-body {
    display: flex;
    align-items: center;
    gap: 8px;
}
.bar-floating-tooltip .tooltip-val {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 900;
    color: #FFFFFF;
}
.bar-floating-tooltip .tooltip-pct {
    font-size: 11px;
    font-weight: 800;
    color: #2ED573;
    background: rgba(46, 213, 115, 0.2);
    padding: 2px 6px;
    border-radius: 6px;
}
.bar-floating-tooltip::after {
    content: '';
    position: absolute;
    bottom: -6px;
    right: 22px;
    width: 10px;
    height: 10px;
    background: #0B132B;
    border-right: 1.5px solid #2ED573;
    border-bottom: 1.5px solid #2ED573;
    transform: rotate(45deg);
}

/* Results Breakdown Card */
.results-list-card {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 14px 18px;
    margin-bottom: 12px;
}
.result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.result-row:last-child { border-bottom: none; }
.result-label-wrap { display: flex; align-items: center; gap: 10px; }
.result-dot { width: 7.5px; height: 7.5px; border-radius: 50%; }
.result-title { font-size: 12px; font-weight: 700; color: #FFF; }
.result-val { font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 800; color: #FFF; }

/* Target / Goal Progress Card */
.goal-progress-card {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 14px 18px;
    margin-bottom: 12px;
}
.goal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.goal-title { font-size: 12px; font-weight: 700; color: #FFF; }
.goal-pct { font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 800; color: #2ED573; }
.goal-bar-track {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 100px;
    overflow: hidden;
    margin-bottom: 6px;
}
.goal-bar-fill {
    width: 84%;
    height: 100%;
    background: linear-gradient(90deg, #3884FF, #2ED573);
    border-radius: 100px;
    box-shadow: 0 0 10px rgba(46, 213, 115, 0.4);
}
.goal-sub { display: flex; justify-content: space-between; font-size: 10.5px; color: rgba(255, 255, 255, 0.4); font-weight: 600; }

/* ROI Highlight Card */
.roi-highlight-card {
    background: linear-gradient(135deg, rgba(46, 213, 115, 0.12) 0%, rgba(56, 132, 255, 0.08) 100%);
    border: 1px solid rgba(46, 213, 115, 0.25);
    border-radius: 20px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.roi-title { font-size: 12px; font-weight: 700; color: #FFF; margin-bottom: 2px; }
.roi-sub { font-size: 10.5px; font-weight: 500; color: rgba(255, 255, 255, 0.5); }
.roi-badge {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 22px;
    font-weight: 900;
    color: #2ED573;
    letter-spacing: -0.5px;
}

/* ── REALISTIC MODERN BOTTOM NAVIGATION (ZERO EMOJIS) ── */
.app-bottom-nav {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 462px;
    height: 78px;
    background: rgba(8, 11, 17, 0.9);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0 32px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    backdrop-filter: blur(20px);
    z-index: 30;
}
.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}
.nav-item svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-item span { font-size: 10px; font-weight: 700; letter-spacing: -0.1px; }
.nav-item.active { color: #3884FF; }
.nav-item.active::before {
    content: ''; position: absolute; top: -14px; width: 20px; height: 3px;
    background: #3884FF; border-radius: 10px; box-shadow: 0 0 10px #3884FF;
}

/* Virtual Hand Touch Cursor & Realistic Ripple */
.virtual-cursor {
    position: absolute; width: 28px; height: 28px; pointer-events: none; z-index: 99; opacity: 0;
    transform: translate(-50%, -50%); transition: opacity 0.3s ease, left 0.5s cubic-bezier(0.25, 1, 0.5, 1), top 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.7));
}
.cursor-circle {
    width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, 0.92);
    border: 2px solid #3884FF; box-shadow: 0 0 16px rgba(56, 132, 255, 0.9); transform: scale(1); transition: transform 0.15s ease;
}
.virtual-cursor.clicking .cursor-circle { transform: scale(0.68); background: #3884FF; }

.touch-ripple {
    position: absolute;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(56, 132, 255, 0.7) 0%, rgba(56, 132, 255, 0) 70%);
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.2);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.1, 0.8, 0.3, 1), opacity 0.4s ease-out;
    z-index: 98;
}
.touch-ripple.active {
    transform: translate(-50%, -50%) scale(2);
    opacity: 1;
}

/* ── AUTHENTIC APPLE iOS KEYBOARD & KEY POPUP (Matching User Screenshot 2) ── */
.ios-keyboard-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 462px;
    height: 290px;
    background: rgba(26, 26, 28, 0.96);
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    border-top: 0.5px solid rgba(255, 255, 255, 0.15);
    display: flex;
    flex-direction: column;
    padding: 0 4px 10px;
    transform: translateY(100%);
    transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 45;
    pointer-events: none;
    box-sizing: border-box;
}
.ios-keyboard-overlay.active {
    transform: translateY(0);
    pointer-events: auto;
}

/* Predictive Text Row */
.ios-kb-predictive {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 6px;
    padding: 0 8px;
}
.predictive-item {
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    letter-spacing: -0.2px;
    flex: 1;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
}
.predictive-item.active {
    color: #FFFFFF;
    font-weight: 700;
}
.predictive-divider {
    width: 1px;
    height: 18px;
    background: rgba(255, 255, 255, 0.15);
}

/* Key rows */
.ios-kb-keys {
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
}
.kb-row {
    display: flex;
    gap: 5px;
    justify-content: center;
    width: 100%;
}
.kb-key {
    height: 42px;
    background: #545458;
    color: #FFFFFF;
    border: none;
    border-radius: 6px;
    font-size: 19px;
    font-weight: 400;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
    flex: 1;
    max-width: 40px;
    transition: background 0.1s ease;
    user-select: none;
    -webkit-user-select: none;
}
.kb-row-2 {
    padding: 0 18px;
}
.kb-row-3 {
    justify-content: space-between;
}
.kb-key-modifier {
    background: #3A3A3C;
    max-width: 46px;
    flex: 1.2;
}
.kb-row-4 {
    justify-content: space-between;
    align-items: center;
}
.kb-key-num {
    background: #3A3A3C;
    max-width: 46px;
    font-size: 15px;
    font-weight: 500;
}
.kb-key-emoji, .kb-key-mic {
    background: transparent;
    box-shadow: none;
    max-width: 38px;
    color: rgba(255, 255, 255, 0.85);
}
.kb-key-space {
    flex: 5;
    max-width: 210px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
}
.kb-key-return {
    background: #007AFF;
    max-width: 86px;
    flex: 2;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
.kb-key.pressed, .kb-key:active {
    background: #737376 !important;
}
.kb-key-return.pressed {
    background: #0056B3 !important;
}

/* Apple Key Magnifier Popup Bubble (Matching User Screenshot 2) */
.ios-key-popup-bubble {
    position: absolute;
    width: 46px;
    height: 52px;
    background: #636366;
    border-radius: 9px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 5px;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -100%) scale(0.9);
    transition: opacity 0.08s ease, transform 0.08s ease;
    z-index: 100;
    box-sizing: border-box;
}
.ios-key-popup-bubble.active {
    opacity: 1;
    transform: translate(-50%, -100%) scale(1);
}
.popup-bubble-char {
    font-size: 26px;
    font-weight: 500;
    color: #FFFFFF;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    line-height: 1;
}
.ios-key-popup-bubble::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 10px;
    background: #636366;
    border-radius: 0 0 6px 6px;
}

/* ── CAMPAIGN LOGISTICS POPUP MODAL (Wysoka Jakość • Apple iOS Sheet) ── */
.campaign-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 7, 13, 0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 55;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.campaign-modal-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

.campaign-logistics-modal {
    position: absolute;
    bottom: 22px;
    left: 14px;
    right: 14px;
    background: rgba(18, 24, 38, 0.95);
    border: 1px solid rgba(56, 132, 255, 0.3);
    border-radius: 28px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(56, 132, 255, 0.25);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    padding: 16px 20px 20px;
    display: flex;
    flex-direction: column;
    z-index: 60;
    transform: translateY(115%) scale(0.96);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
    box-sizing: border-box;
}
.campaign-logistics-modal.active {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}
.campaign-logistics-modal.closing {
    transform: translateY(30px) scale(0.92);
    opacity: 0;
    pointer-events: none;
}

.modal-drag-pill {
    width: 38px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 100px;
    margin: 0 auto 12px;
}

.modal-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.modal-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(46, 213, 115, 0.14);
    border: 1px solid rgba(46, 213, 115, 0.35);
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    color: #2ED573;
}
.status-live-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2ED573;
    box-shadow: 0 0 8px #2ED573;
    animation: pulseGreen 1.4s infinite;
}
.modal-team-tag {
    font-size: 9.5px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.modal-title-area {
    margin-bottom: 14px;
}
.modal-icon-title {
    display: flex;
    align-items: center;
    gap: 12px;
}
.modal-check-glow {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(46, 213, 115, 0.15);
    border: 1px solid rgba(46, 213, 115, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 16px rgba(46, 213, 115, 0.35);
    flex-shrink: 0;
}
.modal-headline {
    font-size: 17px;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 2px 0;
    letter-spacing: -0.3px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
}
.modal-subheadline {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
    font-weight: 500;
}

.modal-logistics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}
.logistics-box {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 8px 11px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.logistics-lbl {
    font-size: 9.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.logistics-val {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 12.5px;
    font-weight: 800;
    color: #FFFFFF;
}

.modal-deploy-card {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    padding: 10px 12px;
    margin-bottom: 14px;
}
.deploy-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 6px;
}
.deploy-pct {
    color: #2ED573;
    font-weight: 800;
}
.deploy-bar-track {
    height: 5px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 8px;
}
.deploy-bar-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #3884FF 0%, #2ED573 100%);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(46, 213, 115, 0.5);
    transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.deploy-checklist {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.deploy-check-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.82);
    font-weight: 500;
}
.deploy-check-item svg {
    flex-shrink: 0;
}

.modal-action-btn {
    width: 100%;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, #007AFF 0%, #0056B3 100%);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #FFFFFF;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 122, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
}
.modal-action-btn.pressed,
.modal-action-btn:active {
    transform: scale(0.97) !important;
    background: #004BB3 !important;
    box-shadow: 0 2px 10px rgba(0, 122, 255, 0.6) !important;
}

/* ── 3D RETRO CRT COMPUTER MONITOR (Autorski Model Pracy) ── */
.project-tile.tile-wide.tile-retro-crt {
    background: #110E14 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    cursor: default;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 2;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-tile.tile-wide.tile-retro-crt:hover {
    transform: translateY(-3px);
    box-shadow: 0 36px 95px rgba(0, 0, 0, 0.65), inset 0 0 0 1px rgba(252, 144, 115, 0.3);
}

.project-tile.tile-retro-crt .tile-overlay {
    display: none !important;
}

/* ── RETRO CRT CHASSIS (90s BEIGE HEAVY HOUSING) ── */
.crt-chassis {
    width: 100%;
    height: 100%;
    background: linear-gradient(172deg, #EBE6D8 0%, #DFD9CB 35%, #D0C9BA 70%, #C2BAAB 100%);
    border-radius: 32px;
    box-shadow: 
        inset 2px 2px 3px rgba(255, 255, 255, 0.9),
        inset -4px -4px 8px rgba(0, 0, 0, 0.4),
        0 16px 40px rgba(0, 0, 0, 0.6);
    border: 2px solid #BAAF9F;
    display: grid;
    grid-template-columns: 1fr 96px;
    grid-template-rows: 1fr 48px;
    padding: 16px 16px 10px 18px;
    gap: 12px 14px;
    position: relative;
    user-select: none;
}

.crt-chassis::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 40px;
    right: 40px;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
    border-radius: 3px;
    pointer-events: none;
}

/* ── MULTI-STEP RECESSED SCREEN HOUSING (DEEP BEZEL) ── */
.crt-screen-housing {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    background: linear-gradient(135deg, #B5AC9C 0%, #9C9383 100%);
    border-radius: 26px;
    padding: 11px;
    box-shadow: 
        inset 4px 5px 10px rgba(0, 0, 0, 0.65),
        inset -3px -3px 6px rgba(255, 255, 255, 0.5),
        0 1px 2px rgba(255, 255, 255, 0.5);
    position: relative;
    display: flex;
}

/* Inner Bezel Step Down */
.crt-inner-bezel {
    flex: 1;
    background: #6E685B;
    border-radius: 20px;
    padding: 6px;
    box-shadow: 
        inset 3px 3px 6px rgba(0, 0, 0, 0.8),
        inset -1px -1px 3px rgba(255, 255, 255, 0.2);
    display: flex;
}

/* ── THE CURVED CRT GLASS BULB ── */
.crt-glass-frame {
    flex: 1;
    border-radius: 16px;
    background: #020808;
    position: relative;
    overflow: hidden;
    box-shadow: 
        inset 0 0 45px rgba(0, 0, 0, 0.95),
        inset 0 0 100px rgba(0, 0, 0, 0.7),
        0 0 0 2px #1A1D1C;
    display: flex;
    flex-direction: column;
}

/* ── REALISTIC CEILING LAMP REFLECTION (AS IN SCREENSHOT 2) ── */
.crt-lamp-reflection {
    position: absolute;
    top: 25px;
    left: 110px;
    width: 260px;
    height: 70px;
    background: linear-gradient(115deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 55%, transparent 75%);
    transform: rotate(-18deg) skewX(-25deg);
    filter: blur(5px);
    pointer-events: none;
    z-index: 25;
    border-radius: 10px;
}

/* Corner Glass Glare & Deep Tube Shadow */
.crt-glass-glare {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 24;
    background: 
        radial-gradient(ellipse at 15% 15%, rgba(255, 255, 255, 0.15) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 50%, transparent 65%, rgba(0, 0, 0, 0.6) 100%);
    box-shadow: inset 0 0 35px rgba(0, 0, 0, 0.85);
}

/* Authentic Phosphor Scanlines (Softened for crystal-clear readability) */
.crt-scanlines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 22;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.12) 0px,
        rgba(0, 0, 0, 0.12) 1.5px,
        transparent 1.5px,
        transparent 3.5px
    );
    opacity: 0.35;
}

/* Electrical Life Glow */
.crt-glass-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 23;
    background: radial-gradient(circle at 50% 50%, rgba(30, 240, 255, 0.03) 0%, transparent 80%);
    animation: crtBloom 5s ease-in-out infinite alternate;
}
@keyframes crtBloom {
    0% { opacity: 0.6; }
    100% { opacity: 1; }
}

/* ── RETRO DESKTOP ENVIRONMENT ── */
.retro-desktop {
    flex: 1;
    background: radial-gradient(circle at 45% 40%, #008E8E 0%, #007373 60%, #004D4D 100%);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 12px 14px 6px;
    z-index: 10;
    overflow: hidden;
}

/* Left Desktop Icons Rail */
.desktop-icons-rail {
    position: absolute;
    top: 12px;
    left: 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 5;
}
.desktop-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 56px;
    cursor: pointer;
    text-align: center;
    transition: transform 0.15s ease;
}
.desktop-icon-item:hover {
    transform: scale(1.05);
}
.desktop-icon-item svg {
    width: 28px;
    height: 28px;
    filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.6));
    margin-bottom: 2px;
}
.desktop-icon-label {
    font-size: 9px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    color: #FFFFFF;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.95);
    line-height: 1.1;
    padding: 1px 4px;
    border-radius: 2px;
}
.desktop-icon-item:hover .desktop-icon-label {
    background: #000080;
}

/* ── RETRO OS APPLICATION WINDOW ── */
.retro-window-container {
    position: relative;
    z-index: 10;
    margin-left: 54px;
    margin-right: 2px;
    margin-top: 2px;
}

.retro-window {
    background: #ECE9D8;
    border-top: 2px solid #FFFFFF;
    border-left: 2px solid #FFFFFF;
    border-right: 2px solid #4B5056;
    border-bottom: 2px solid #4B5056;
    box-shadow: 
        4px 6px 18px rgba(0, 0, 0, 0.65),
        inset 1px 1px 0 #DFDBD0;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
}

/* Classic Title Bar */
.retro-titlebar {
    background: linear-gradient(90deg, #0A246A 0%, #1A5FA8 60%, #3A7BB8 100%);
    padding: 4px 6px 4px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.retro-titlebar-left {
    display: flex;
    align-items: center;
    gap: 6px;
}
.retro-titlebar-icon {
    width: 14px;
    height: 14px;
    fill: #FFCC00;
}
.retro-titlebar-text {
    color: #FFFFFF;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
}
.retro-window-controls {
    display: flex;
    gap: 3px;
}
.retro-btn-ctrl {
    width: 16px;
    height: 15px;
    background: #ECE9D8;
    border-top: 1.5px solid #FFFFFF;
    border-left: 1.5px solid #FFFFFF;
    border-right: 1.5px solid #333;
    border-bottom: 1.5px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 900;
    color: #000;
    cursor: pointer;
}
.retro-btn-ctrl:active {
    border-top: 1.5px solid #333;
    border-left: 1.5px solid #333;
    border-right: 1.5px solid #FFF;
    border-bottom: 1.5px solid #FFF;
}

/* Window Interior Content */
.retro-window-body {
    padding: 24px 28px 26px;
    background: #FFFFFF;
    position: relative;
    min-height: 295px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.retro-content-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 420px;
}

/* Nagłówek (Monumentalny Outfit 900 Ultra-Bold: czerń + ciemnozielony kodowania) */
.retro-main-heading {
    font-family: 'Outfit', sans-serif;
    font-size: 34px;
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -0.8px;
    color: #000000;
}
.retro-main-heading .green-code-highlight {
    color: #234E70;
    display: inline;
}

/* Pod nim tekst */
.retro-sub-desc {
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #1E293B;
    line-height: 1.5;
    letter-spacing: -0.2px;
    max-width: 420px;
}
.retro-sub-desc strong {
    font-weight: 800;
    color: #000000;
}

/* ── DUŻA PIGUŁKA: Zobacz konkretne przykłady (#234E70) ── */
.retro-cta-row {
    margin-top: 10px;
    display: flex;
    align-items: center;
}

.retro-action-pill {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 34px;
    background: linear-gradient(135deg, #1A3C57 0%, #234E70 100%);
    border: 1.5px solid #2F648F;
    border-radius: 100px;
    color: #FFFFFF;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.2px;
    text-decoration: none;
    box-shadow: 
        0 8px 24px rgba(35, 78, 112, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.retro-action-pill::after {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transform: skewX(-20deg);
    animation: pillShine 4s infinite;
    pointer-events: none;
}
@keyframes pillShine {
    0% { left: -100%; }
    30%, 100% { left: 220%; }
}

.retro-action-pill:hover {
    transform: translateY(-2px) scale(1.02);
    background: linear-gradient(135deg, #234E70 0%, #2D638E 100%);
    box-shadow: 
        0 12px 30px rgba(35, 78, 112, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.retro-action-pill svg {
    width: 17px;
    height: 17px;
    stroke: #BEE3F8;
    stroke-width: 2.8;
    fill: none;
    transition: transform 0.25s ease;
}
.retro-action-pill:hover svg {
    transform: translateX(4px);
}

/* Retro Taskbar at bottom of CRT */
.retro-taskbar {
    height: 26px;
    background: #D4D0C8;
    border-top: 2px solid #FFFFFF;
    box-shadow: inset 0 -1px 0 #404040;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
    position: relative;
    z-index: 12;
}
.retro-start-btn {
    height: 20px;
    padding: 0 8px;
    background: #D4D0C8;
    border-top: 1.5px solid #FFFFFF;
    border-left: 1.5px solid #FFFFFF;
    border-right: 1.5px solid #404040;
    border-bottom: 1.5px solid #404040;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    font-weight: 900;
    color: #000000;
    cursor: pointer;
}
.retro-start-btn svg {
    width: 12px;
    height: 12px;
}
.retro-taskbar-tasks {
    display: flex;
    gap: 4px;
    margin-left: 6px;
    flex: 1;
}
.retro-task-pill {
    padding: 2px 8px;
    background: #EAE6DF;
    border-top: 1px solid #404040;
    border-left: 1px solid #404040;
    border-right: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    font-size: 10px;
    font-weight: 700;
    color: #111;
    display: flex;
    align-items: center;
    gap: 4px;
}
.retro-systray {
    border-top: 1px solid #808080;
    border-left: 1px solid #808080;
    border-right: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    padding: 2px 7px;
    font-size: 11px;
    font-family: 'VT323', monospace;
    font-weight: 700;
    color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    letter-spacing: 0.5px;
}

/* ── RIGHT CONTROL PANEL (VINTAGE ROTARY KNOBS & GRILLES) ── */
.crt-right-panel {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    background: linear-gradient(180deg, #C7C0AF 0%, #B8B09F 100%);
    border-radius: 18px;
    padding: 12px 10px;
    box-shadow: 
        inset 2px 2px 4px rgba(0, 0, 0, 0.4),
        inset -1px -1px 3px rgba(255, 255, 255, 0.45);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

/* Rotary Knobs Column */
.dials-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
    width: 100%;
}

.dial-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    position: relative;
}
.dial-label {
    font-size: 8px;
    font-weight: 800;
    color: #554E40;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.dial-ticks {
    position: absolute;
    top: 13px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1.5px dotted #6D6554;
    pointer-events: none;
}
.rotary-dial {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #3F3B36 0%, #201D1B 70%, #100F0D 100%);
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.55),
        inset 1px 1px 2px rgba(255, 255, 255, 0.3),
        inset -1px -1px 2px rgba(0, 0, 0, 0.85),
        0 0 0 2px #6B6455;
    position: relative;
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, filter 0.2s ease;
}
.dial-wrapper {
    cursor: pointer;
}
.dial-wrapper:hover .rotary-dial {
    filter: brightness(1.15);
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.65),
        inset 1px 1px 2px rgba(255, 255, 255, 0.45),
        inset -1px -1px 2px rgba(0, 0, 0, 0.85),
        0 0 0 2px #8E8572;
}
.rotary-dial:active {
    transform: scale(0.95);
}

.rotary-dial::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 9px;
    background: #FFFFFF;
    border-radius: 2px;
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.8);
}
.rotary-dial::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, 0.15);
}

/* Retro Speaker Grille Slots */
.crt-speaker-slats {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3.5px;
    padding: 0 6px;
}
.slat-line {
    height: 2.5px;
    background: #4E483A;
    border-radius: 2px;
    box-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
}

/* ── BOTTOM CHASSIS BAR (BRAND BADGE, BUTTONS, LED) ── */
.crt-bottom-bar {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    position: relative;
}

/* ── AUTHENTIC RETRO MECHANICAL POWER SWITCH & SOCKET ── */
.crt-power-switch-socket {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px 4px 8px;
    background: #111215;
    border-radius: 6px;
    border: 1px solid #23272C;
    border-bottom-color: #383D45;
    border-right-color: #2F333A;
    box-shadow: 
        inset 0 2px 5px rgba(0, 0, 0, 0.95),
        inset 0 0 2px rgba(0, 0, 0, 1),
        0 1px 0 rgba(255, 255, 255, 0.35); /* Chassis lip highlight */
}

/* Vintage CRT Brand Emblem Badge */
.crt-brand-plate {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 3px;
    border: 1px solid #141618;
    background: linear-gradient(180deg, #2A2C30 0%, #1D1E22 50%, #151618 100%);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.18), inset 0 -1px 1px rgba(0,0,0,0.8);
    cursor: pointer;
    user-select: none;
    outline: none;
    font-family: inherit;
    transition: all 0.15s ease;
}
.crt-brand-plate:hover {
    background: linear-gradient(180deg, #32353A 0%, #222428 50%, #181A1C 100%);
}
.crt-brand-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00E676;
    box-shadow: 0 0 6px #00E676;
    transition: all 0.3s ease;
}
.tile-retro-crt.is-crt-off .crt-brand-dot {
    background: #64748B;
    box-shadow: none;
}
.crt-brand-name {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 800;
    color: #F1F5F9;
    letter-spacing: 0.6px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.9);
}

/* Tactile Socket Divider */
.crt-socket-divider {
    width: 1px;
    height: 20px;
    background: rgba(0, 0, 0, 0.8);
    border-right: 1px solid rgba(255, 255, 255, 0.14);
}

/* Physical Mechanical Rocker Switch ("Klasyczny włącza-wyłącza" I / O) */
.crt-rocker-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.crt-rocker-label {
    font-family: 'Space Grotesk', -apple-system, sans-serif;
    font-size: 8px;
    font-weight: 800;
    color: #8E95A2;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.crt-rocker-switch {
    position: relative;
    width: 62px;
    height: 26px;
    padding: 2px;
    background: #0B0C0E;
    border: 1px solid #1A1D22;
    border-bottom-color: #383E48;
    border-right-color: #2D323A;
    border-radius: 4px;
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.95),
        0 1px 1px rgba(255, 255, 255, 0.25);
    cursor: pointer;
    outline: none;
    user-select: none;
    transition: transform 0.08s ease;
}
.crt-rocker-switch:hover {
    border-color: #2D323A;
    border-bottom-color: #4B5260;
}
.crt-rocker-switch:active {
    transform: scale(0.96);
}
.crt-rocker-switch:focus-visible {
    box-shadow: 0 0 0 2px #00E676, inset 0 2px 4px rgba(0, 0, 0, 0.95);
}

.rocker-plate {
    display: flex;
    width: 100%;
    height: 100%;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.rocker-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.16s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.rocker-ribs {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.25;
    background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(255, 255, 255, 0.3) 2px,
        rgba(0, 0, 0, 0.6) 3px
    );
}

.rocker-text {
    font-family: 'Space Grotesk', -apple-system, monospace, sans-serif;
    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: 0.5px;
    position: relative;
    z-index: 2;
    line-height: 1;
}

/* ON state: I is pressed down, O is raised */
.crt-rocker-switch[aria-pressed="true"] .rocker-on {
    background: linear-gradient(180deg, #151719 0%, #0E0F11 100%);
    box-shadow: 
        inset 0 3px 6px rgba(0, 0, 0, 0.95),
        inset 1px 0 2px rgba(0, 0, 0, 0.8),
        inset 0 -1px 3px rgba(0, 230, 118, 0.2);
    transform: translateY(1.2px);
}
.crt-rocker-switch[aria-pressed="true"] .rocker-on .rocker-text {
    color: #00E676;
    text-shadow: 0 0 6px rgba(0, 230, 118, 0.9), 0 0 12px rgba(0, 230, 118, 0.5);
}
.crt-rocker-switch[aria-pressed="true"] .rocker-off {
    background: linear-gradient(180deg, #3E4249 0%, #2A2C32 45%, #1F2125 100%);
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.45),
        -1px 0 3px rgba(0, 0, 0, 0.7),
        0 2px 3px rgba(0, 0, 0, 0.6);
    transform: translateY(-0.8px);
}
.crt-rocker-switch[aria-pressed="true"] .rocker-off .rocker-text {
    color: #6B7280;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
}

/* OFF state: O is pressed down, I is raised */
.crt-rocker-switch[aria-pressed="false"] .rocker-on,
.tile-retro-crt.is-crt-off .crt-rocker-switch .rocker-on {
    background: linear-gradient(180deg, #3E4249 0%, #2A2C32 45%, #1F2125 100%);
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.45),
        1px 0 3px rgba(0, 0, 0, 0.7),
        0 2px 3px rgba(0, 0, 0, 0.6);
    transform: translateY(-0.8px);
}
.crt-rocker-switch[aria-pressed="false"] .rocker-on .rocker-text,
.tile-retro-crt.is-crt-off .crt-rocker-switch .rocker-on .rocker-text {
    color: #6B7280;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
}
.crt-rocker-switch[aria-pressed="false"] .rocker-off,
.tile-retro-crt.is-crt-off .crt-rocker-switch .rocker-off {
    background: linear-gradient(180deg, #151719 0%, #0E0F11 100%);
    box-shadow: 
        inset 0 3px 6px rgba(0, 0, 0, 0.95),
        inset -1px 0 2px rgba(0, 0, 0, 0.8),
        inset 0 -1px 3px rgba(245, 158, 11, 0.2);
    transform: translateY(1.2px);
}
.crt-rocker-switch[aria-pressed="false"] .rocker-off .rocker-text,
.tile-retro-crt.is-crt-off .crt-rocker-switch .rocker-off .rocker-text {
    color: #F59E0B;
    text-shadow: 0 0 6px rgba(245, 158, 11, 0.9), 0 0 12px rgba(245, 158, 11, 0.5);
}

/* Status Badge next to switch */
.crt-pwr-status {
    font-family: 'Space Grotesk', monospace, sans-serif;
    font-size: 8.5px;
    font-weight: 900;
    padding: 3px 7px;
    border-radius: 3px;
    background: rgba(0, 230, 118, 0.12);
    color: #00E676;
    border: 1px solid rgba(0, 230, 118, 0.45);
    box-shadow: 0 0 6px rgba(0, 230, 118, 0.2);
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}
.tile-retro-crt.is-crt-off .crt-pwr-status {
    background: rgba(245, 158, 11, 0.12);
    color: #FBBF24;
    border-color: rgba(245, 158, 11, 0.45);
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.2);
}
.tile-retro-crt.is-crt-off .crt-led-bulb {
    background: #F59E0B;
    box-shadow: 0 0 8px #F59E0B, 0 0 14px rgba(245, 158, 11, 0.7);
}
.tile-retro-crt.is-crt-off .crt-led-text {
    color: #B45309;
}

/* ── CRT SCREEN POWER & ANIMATIONS ── */
.crt-standby-screen {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, #081414 0%, #010404 100%);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 21;
    pointer-events: none;
}
.crt-standby-aperture {
    position: absolute;
    width: 140px;
    height: 8px;
    background: radial-gradient(ellipse at center, rgba(110, 231, 183, 0.95) 0%, rgba(16, 185, 129, 0.6) 35%, rgba(6, 95, 70, 0.2) 70%, transparent 100%);
    box-shadow: 
        0 0 16px rgba(110, 231, 183, 0.8),
        0 0 35px rgba(16, 185, 129, 0.5),
        inset 0 0 4px #FFFFFF;
    border-radius: 50%;
    filter: blur(0.5px);
    opacity: 0;
    transform: scale(0.6, 0.2);
}
.tile-retro-crt.is-crt-off .crt-standby-screen {
    display: flex;
    pointer-events: auto;
    cursor: pointer;
}
.tile-retro-crt.is-crt-off .crt-standby-aperture {
    opacity: 1;
    animation: crtApertureBreathing 2.6s ease-in-out infinite alternate;
}
.tile-retro-crt.is-crt-off .retro-desktop {
    display: none !important;
}
.tile-retro-crt.is-crt-off .crt-power-button {
    border-top: 2px solid #555044;
    border-left: 2px solid #555044;
    border-right: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
    background: linear-gradient(180deg, #CBC5B6 0%, #B8B09E 100%);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}
.tile-retro-crt.is-crt-off .crt-brand-plate {
    background: linear-gradient(180deg, #222428 0%, #18191B 50%, #111214 100%);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08), inset 0 -1px 1px rgba(0, 0, 0, 0.9);
}

@keyframes crtApertureBreathing {
    0% {
        transform: scale(0.45, 0.12);
        opacity: 0.5;
        box-shadow: 0 0 8px rgba(110, 231, 183, 0.4), 0 0 18px rgba(16, 185, 129, 0.25);
    }
    50% {
        transform: scale(0.95, 0.7);
        opacity: 0.9;
        box-shadow: 0 0 24px rgba(110, 231, 183, 0.9), 0 0 45px rgba(16, 185, 129, 0.6);
    }
    100% {
        transform: scale(0.4, 0.1);
        opacity: 0.4;
        box-shadow: 0 0 6px rgba(110, 231, 183, 0.35), 0 0 14px rgba(16, 185, 129, 0.2);
    }
}

.tile-retro-crt.anim-turning-off .retro-desktop {
    animation: crtShutdown 0.68s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    transform-origin: center center;
    pointer-events: none;
}
@keyframes crtShutdown {
    0% {
        transform: scale(1, 1);
        filter: brightness(1) contrast(1);
        opacity: 1;
    }
    40% {
        transform: scale(1, 0.005);
        filter: brightness(4) contrast(2) drop-shadow(0 0 12px #FFFFFF);
        opacity: 1;
    }
    75% {
        transform: scale(0.015, 0.015);
        filter: brightness(8) contrast(3) drop-shadow(0 0 18px #A7F3D0);
        border-radius: 50%;
        opacity: 1;
    }
    100% {
        transform: scale(0, 0);
        filter: brightness(10);
        opacity: 0;
    }
}

.tile-retro-crt.anim-turning-on .retro-desktop {
    animation: crtTurnOn 0.78s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transform-origin: center center;
}
@keyframes crtTurnOn {
    0% {
        transform: scale(0.01, 0.01);
        filter: brightness(9) contrast(3) drop-shadow(0 0 20px #FFFFFF);
        opacity: 0;
        border-radius: 50%;
    }
    15% {
        transform: scale(0.05, 0.05);
        filter: brightness(8) contrast(3) drop-shadow(0 0 25px #6EE7B7);
        opacity: 1;
        border-radius: 50%;
    }
    45% {
        transform: scale(1, 0.006);
        filter: brightness(4) contrast(2) drop-shadow(0 0 14px #A7F3D0);
        opacity: 1;
        border-radius: 0;
    }
    85% {
        transform: scale(1, 1.03);
        filter: brightness(1.25) contrast(1.1);
        opacity: 1;
    }
    100% {
        transform: scale(1, 1);
        filter: brightness(1) contrast(1);
        opacity: 1;
    }
}

/* Power Controls & LED */
.crt-power-cluster {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Square Retro Power Button */
.crt-power-button {
    width: 28px;
    height: 26px;
    background: linear-gradient(180deg, #ECE9DF 0%, #CBC5B6 100%);
    border-top: 2px solid #FFFFFF;
    border-left: 2px solid #FFFFFF;
    border-right: 2px solid #555044;
    border-bottom: 2px solid #555044;
    box-shadow: 0 2px 4px rgba(0,0,0,0.35);
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.1s ease;
}
.crt-power-button:active,
.crt-power-button[aria-pressed="false"],
.tile-retro-crt.is-crt-off .crt-power-button {
    border-top: 2px solid #555044;
    border-left: 2px solid #555044;
    border-right: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
    background: linear-gradient(180deg, #CBC5B6 0%, #B8B09E 100%);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
    transform: translateY(1px);
}
.crt-power-button svg {
    width: 12px;
    height: 12px;
    stroke: #333;
    stroke-width: 2.4;
}

/* Glowing Green CRT Power LED */
.crt-power-led-group {
    display: flex;
    align-items: center;
    gap: 6px;
}
.crt-led-bulb {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22C55E;
    box-shadow: 0 0 8px #22C55E, 0 0 14px rgba(34, 197, 94, 0.7);
    animation: ledPulse 3s ease-in-out infinite alternate;
}
.crt-led-text {
    font-size: 8px;
    font-weight: 800;
    color: #554E40;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

/* ── RESPONSIVE ADAPTATIONS ── */
@media (max-width: 980px) {
    .project-tile.tile-wide.tile-retro-crt {
        height: auto;
        min-height: 520px;
        flex: none;
        width: 100%;
    }
    .crt-chassis {
        grid-template-columns: 1fr 74px;
        padding: 12px 10px 8px 12px;
        gap: 10px;
    }
    .rotary-dial {
        width: 34px;
        height: 34px;
    }
    .dial-ticks {
        display: none;
    }
    .floating-mini-palette {
        display: none;
    }
    .retro-content-wrap {
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .crt-chassis {
        display: flex;
        flex-direction: column;
        padding: 10px;
        gap: 10px;
    }
    .crt-screen-housing {
        height: 420px;
        padding: 8px;
    }
    .desktop-icons-rail {
        display: none;
    }
    .retro-window-container {
        margin-left: 0;
    }
    .retro-main-heading {
        font-size: 20px;
    }
    .crt-right-panel {
        display: none;
    }
    .crt-bottom-bar {
        padding: 6px 26px 6px 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        height: auto;
        box-sizing: border-box;
    }
    .crt-power-switch-socket {
        gap: 5px;
        padding: 2px 5px;
        flex-shrink: 1;
        min-width: 0;
    }
    .crt-brand-plate {
        padding: 2px 5px;
        gap: 4px;
    }
    .crt-brand-name {
        font-size: 8.5px;
        letter-spacing: 0.2px;
    }
    .crt-power-switch-socket .crt-pwr-status {
        display: none;
    }
    .crt-rocker-wrapper {
        gap: 4px;
        flex-shrink: 0;
    }
    .crt-rocker-label {
        font-size: 7px;
    }
    .crt-rocker-switch {
        width: 40px;
        height: 20px;
    }
    .crt-power-cluster {
        gap: 6px;
        flex-shrink: 0;
    }
    .crt-led-text {
        font-size: 7px;
    }
    .crt-power-button {
        width: 20px;
        height: 19px;
        flex-shrink: 0;
    }
    .crt-power-button svg {
        width: 10px;
        height: 10px;
    }
}

/* ========================================================
   SOUND SYSTEM STYLES
   ======================================================== */

.sound-toggle.is-active {
    background: #10B981;
    color: #FFFFFF;
}

/* ========================================================
   TESTIMONIALS SECTION (BURGUNDY EXTENSION & LIQUID GLASS)
   ======================================================== */
.testimonials-section {
    position: relative;
    width: 100%;
    background-color: #400D1C;
    padding: 30px 48px 110px 48px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.testimonials-container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.testimonials-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 3.5rem;
}

.testimonials-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(247, 236, 221, 0.25);
    padding: 7px 20px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #F7ECDD;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    margin-bottom: 1.4rem;
}

.testimonials-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #27C93F;
    box-shadow: 0 0 10px rgba(39, 201, 63, 0.8);
}

.testimonials-title {
    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(2.3rem, 4.2vw, 3.6rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.03em;
    color: #FFF9F1;
    margin: 0 0 1.2rem 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.testimonials-desc {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    font-weight: 500;
    color: rgba(247, 236, 221, 0.82);
    max-width: 680px;
    line-height: 1.6;
    margin: 0;
}

/* 3-Column Glass Grid */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    width: 100%;
    align-items: stretch;
}

/* Liquid Glass Review Card */
.glass-review-card {
    position: relative;
    border-radius: 32px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 100%);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(247, 236, 221, 0.16);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.18);
    padding: 38px 32px 32px 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.35s ease, box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform, box-shadow;
}

.glass-review-card:hover {
    transform: translateY(-6px);
    border-color: rgba(214, 191, 163, 0.45);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

/* ── DESKTOP CARD DECK FAN-OUT ANIMATION ── */
@media (min-width: 1101px) {
    .testimonials-grid.is-deck .glass-review-card {
        transition: transform 1.15s cubic-bezier(0.16, 1, 0.3, 1),
                    opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
                    box-shadow 0.95s cubic-bezier(0.16, 1, 0.3, 1),
                    border-color 0.4s ease;
        will-change: transform, opacity;
    }

    /* Center card is on top */
    .testimonials-grid.is-deck .glass-review-card:nth-child(2) {
        z-index: 3;
        transform: translate3d(0, 0, 0) scale(1);
    }

    /* Left card tucked behind center card */
    .testimonials-grid.is-deck:not(.is-expanded) .glass-review-card:nth-child(1) {
        z-index: 1;
        transform: translate3d(calc(100% + 28px), 0, 0) scale(0.94) rotate(-2deg);
        opacity: 0;
        pointer-events: none;
    }

    /* Right card tucked behind center card */
    .testimonials-grid.is-deck:not(.is-expanded) .glass-review-card:nth-child(3) {
        z-index: 1;
        transform: translate3d(calc(-100% - 28px), 0, 0) scale(0.94) rotate(2deg);
        opacity: 0;
        pointer-events: none;
    }

    /* Center card slight elevation when single */
    .testimonials-grid.is-deck:not(.is-expanded) .glass-review-card:nth-child(2) {
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.28);
    }

    /* When expanded: Left and Right cards slide out into position */
    .testimonials-grid.is-deck.is-expanded .glass-review-card:nth-child(1) {
        z-index: 2;
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
        opacity: 1;
        pointer-events: auto;
        transition-delay: 0.05s;
    }

    .testimonials-grid.is-deck.is-expanded .glass-review-card:nth-child(3) {
        z-index: 2;
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
        opacity: 1;
        pointer-events: auto;
        transition-delay: 0.10s;
    }

    /* Hover effects restored once expanded */
    .testimonials-grid.is-deck.is-expanded .glass-review-card:hover {
        transform: translateY(-6px);
        border-color: rgba(214, 191, 163, 0.45);
        box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.3);
    }
}

@media (prefers-reduced-motion: reduce) {
    .testimonials-grid.is-deck .glass-review-card {
        transform: none !important;
        opacity: 1 !important;
        transition: none !important;
    }
}

.glass-card-top {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.glass-quote-icon {
    display: flex;
    align-items: center;
}

.glass-review-quote {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.03rem;
    font-weight: 500;
    line-height: 1.66;
    color: rgba(255, 250, 244, 0.94);
    margin: 0;
    letter-spacing: -0.012em;
}

.glass-card-bottom {
    margin-top: 28px;
}

.glass-card-divider {
    width: 100%;
    height: 1px;
    background: rgba(247, 236, 221, 0.14);
    margin-bottom: 20px;
}

.glass-author-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.glass-author-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(214, 191, 163, 0.5);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
}

.glass-author-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
}

.glass-author-name {
    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #FFF9F1;
    letter-spacing: -0.01em;
}

.glass-author-role {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(247, 236, 221, 0.72);
}

@media (max-width: 1100px) {
    .testimonials-grid {
        grid-template-columns: 1fr;
        max-width: 620px;
        gap: 22px;
    }
    .testimonials-section {
        padding: 20px 24px 80px 24px;
    }
}

/* ========================================================
   TESTIMONIALS ACTION: "DODAJ OPINIĘ" LUXURY PILL
   ======================================================== */
.testimonials-action-wrap {
    margin-top: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: relative;
    z-index: 5;
}

.testimonials-add-pill {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(214, 191, 163, 0.32);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    padding: 12px 24px 12px 20px;
    color: #FFF9F1;
    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.32s cubic-bezier(0.2, 0, 0, 1),
                border-color 0.28s ease,
                box-shadow 0.32s cubic-bezier(0.2, 0, 0, 1),
                background 0.28s ease;
    text-decoration: none;
    user-select: none;
    outline: none;
}

.testimonials-add-pill:hover {
    transform: translateY(-3px) scale(1.02);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(214, 191, 163, 0.7);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.5), 0 0 24px rgba(214, 191, 163, 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

.testimonials-add-pill:active {
    transform: translateY(-1px) scale(0.99);
}

.testimonials-add-pill.is-activating {
    transform: scale(0.94);
    border-color: rgba(39, 201, 63, 0.95);
    background: rgba(39, 201, 63, 0.15);
    box-shadow: 0 0 35px rgba(39, 201, 63, 0.6), 0 0 75px rgba(39, 201, 63, 0.35);
}

.testimonials-add-pill.is-welcoming {
    box-shadow: 0 0 28px rgba(39, 201, 63, 0.55), 0 0 55px rgba(214, 191, 163, 0.35);
    border-color: rgba(39, 201, 63, 0.85);
    transform: translateY(-2px) scale(1.02);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease, border-color 0.6s ease;
}

.pill-click-wave {
    position: absolute;
    inset: -3px;
    border-radius: 999px;
    border: 2px solid #27C93F;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.95);
}

.testimonials-add-pill.is-activating .pill-click-wave {
    animation: pillWaveBurst 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes pillWaveBurst {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.4); opacity: 0; }
}

.pill-dot-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #27C93F;
    box-shadow: 0 0 10px rgba(39, 201, 63, 0.9);
    position: relative;
    flex-shrink: 0;
}

.pill-dot-pulse::after {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 50%;
    border: 1px solid rgba(39, 201, 63, 0.8);
    animation: pillPulse 2.2s infinite ease-out;
}

@keyframes pillPulse {
    0% { transform: scale(0.9); opacity: 1; }
    100% { transform: scale(2.2); opacity: 0; }
}

.pill-icon {
    stroke: #D6BFA3;
    transition: transform 0.3s ease;
}

.testimonials-add-pill:hover .pill-icon {
    transform: rotate(90deg);
}

.pill-label {
    letter-spacing: -0.01em;
}

.pill-label-mobile {
    display: none;
}

.pill-label-desktop {
    display: inline;
}

.pill-tag {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #F7D8B5;
    background: rgba(214, 191, 163, 0.16);
    border: 1px solid rgba(214, 191, 163, 0.28);
    padding: 3px 10px;
    border-radius: 999px;
    margin-left: 2px;
}

@media (max-width: 768px) {
    .testimonials-add-pill {
        max-width: calc(100% - 24px) !important;
        box-sizing: border-box !important;
        padding: 11px 18px 11px 16px !important;
        gap: 9px !important;
        font-size: 0.88rem !important;
    }
    .testimonials-add-pill .pill-tag {
        font-size: 0.68rem !important;
        padding: 3px 8px !important;
        flex-shrink: 0 !important;
    }
}

@media (max-width: 600px) {
    .faq-action-wrap,
    .testimonials-action-wrap {
        padding: 0 16px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }
    .pill-label-desktop {
        display: none !important;
    }
    .pill-label-mobile {
        display: inline !important;
    }
    .testimonials-add-pill {
        max-width: 100% !important;
        width: auto !important;
        padding: 10px 16px 10px 14px !important;
        gap: 8px !important;
        font-size: 0.82rem !important;
        border-radius: 9999px !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }
    .testimonials-add-pill .pill-label {
        white-space: nowrap !important;
        letter-spacing: -0.01em !important;
    }
    .testimonials-add-pill .pill-tag {
        font-size: 0.66rem !important;
        padding: 3px 8px !important;
        letter-spacing: 0.05em !important;
        flex-shrink: 0 !important;
    }
    .testimonials-add-pill .pill-icon {
        width: 14px !important;
        height: 14px !important;
        flex-shrink: 0 !important;
    }
    .testimonials-add-pill .pill-dot-pulse {
        width: 7px !important;
        height: 7px !important;
        flex-shrink: 0 !important;
    }
}

/* ========================================================
   CLIENT PORTAL OVERLAY: DEDICATED APPLE FACE ID & MACOS SECURITY
   ======================================================== */
.client-portal-overlay {
    position: fixed;
    inset: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    width: 100dvw;
    height: 100%;
    height: 100dvh;
    z-index: 99999;
    background-color: #0B0206;
    background: radial-gradient(circle at 50% 38%, rgba(28, 5, 15, 0.99) 0%, #0A0205 100%);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.45s;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    box-sizing: border-box;
    padding: max(84px, calc(env(safe-area-inset-top) + 64px)) 20px max(36px, calc(env(safe-area-inset-bottom) + 24px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    perspective: 1400px;
}

.client-portal-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.client-portal-overlay.is-closing {
    opacity: 0;
    visibility: visible;
    pointer-events: none;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.5s;
}

/* ── Top Bar inside Portal ── */
.portal-top-bar {
    position: fixed;
    top: 24px;
    left: 36px;
    right: 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100001;
    pointer-events: none;
    transform: translate3d(0, -28px, 0);
    opacity: 0;
    transition: transform 0.52s cubic-bezier(0.16, 1, 0.3, 1) 0.12s,
                opacity 0.45s ease 0.12s;
}

.client-portal-overlay.is-open .portal-top-bar {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

.client-portal-overlay.is-closing .portal-top-bar {
    transform: translate3d(0, -32px, 0) scale(0.96);
    opacity: 0;
    filter: blur(4px);
    transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.32s ease,
                filter 0.32s ease;
}

/* Lewy Górny Róg: Bardzo widoczny przycisk powrotu */
.portal-back-btn {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(247, 236, 221, 0.35);
    border-radius: 999px;
    padding: 11px 24px;
    color: #FFF9F1;
    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.2);
    transition: all 0.28s cubic-bezier(0.2, 0, 0, 1);
    outline: none;
}

.portal-back-btn:hover {
    background: #FFFFFF;
    color: #18040B;
    border-color: #FFFFFF;
    transform: translateX(-4px);
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.6);
}

.portal-back-btn:active {
    transform: translateX(-1px) scale(0.98);
}

.portal-back-btn svg {
    transition: transform 0.25s ease;
}

.portal-back-btn:hover svg {
    transform: translateX(-3px);
}

/* Prawy Górny Róg: Subtelne automatyczne odliczanie */
.portal-countdown-badge {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(247, 236, 221, 0.2);
    border-radius: 999px;
    padding: 8px 18px;
    color: rgba(247, 236, 221, 0.88);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.countdown-pie-wrap {
    width: 18px;
    height: 18px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.countdown-pie-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.countdown-pie-svg .pie-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.16);
    stroke-width: 2.6;
}

.countdown-pie-svg .pie-fill {
    fill: none;
    stroke: #27C93F;
    stroke-width: 2.6;
    stroke-dasharray: 56.5;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s linear, stroke 0.3s;
}

/* ── Central macOS Lock Screen Container ── */
.client-portal-container {
    width: 100%;
    max-width: 660px;
    margin: auto 0;
    position: relative;
    z-index: 2;
    transform-style: preserve-3d;
}

.client-portal-card {
    position: relative;
    width: 100%;
    border-radius: 38px;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.02) 100%);
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    border: 1px solid rgba(247, 236, 221, 0.22);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.25);
    padding: 46px 40px 40px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    transform: perspective(1200px) rotateX(12deg) scale(0.88) translate3d(0, 52px, -30px);
    opacity: 0;
    filter: blur(10px);
    transition: transform 0.68s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.52s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.55s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity, filter;
    backface-visibility: hidden;
}

.client-portal-overlay.is-open .client-portal-card {
    transform: perspective(1200px) rotateX(0deg) scale(1) translate3d(0, 0, 0);
    opacity: 1;
    filter: blur(0px);
}

.client-portal-overlay.is-closing .client-portal-card {
    transform: perspective(1200px) rotateX(-6deg) scale(0.86) translate3d(0, 42px, -60px);
    opacity: 0;
    filter: blur(14px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    transition: transform 0.48s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.42s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.45s ease;
}

/* Luminous Security Perimeter Scan Beam */
.portal-card-border-beam {
    position: absolute;
    inset: -1px;
    border-radius: 38px;
    padding: 1.5px;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.portal-card-border-beam::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(39, 201, 63, 0.85) 50deg, rgba(0, 210, 255, 0.95) 95deg, transparent 150deg);
    animation: borderBeamSpin 4.6s linear infinite;
}

@keyframes borderBeamSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.client-portal-overlay.is-open .portal-card-border-beam {
    opacity: 0.95;
}

.client-portal-overlay.is-closing .portal-card-border-beam {
    opacity: 0;
    transform: scale(0.94);
    transition: opacity 0.35s ease, transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}

.portal-ambient-glow {
    position: absolute;
    top: -120px;
    left: 50%;
    transform: translateX(-50%) scale(0.35);
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(39, 201, 63, 0.22) 0%, rgba(39, 201, 63, 0) 70%);
    pointer-events: none;
    opacity: 0;
    transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.08s,
                opacity 0.8s ease 0.08s,
                background 0.7s ease;
}

.client-portal-overlay.is-open .portal-ambient-glow {
    transform: translateX(-50%) scale(1);
    opacity: 0.9;
}

.client-portal-overlay.is-closing .portal-ambient-glow {
    transform: translateX(-50%) scale(0.25);
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.38s ease;
}

/* ========================================================
   AUTHENTIC APPLE FACE ID BIOMETRIC PRECISION HUB (PURE CIRCLE)
   ======================================================== */
.face-id-module {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24px;
    position: relative;
    z-index: 2;
    transform: scale(0.72) translate3d(0, 22px, 0);
    opacity: 0;
    transition: transform 0.64s cubic-bezier(0.34, 1.45, 0.64, 1) 0.14s,
                opacity 0.45s ease 0.14s;
}

.client-portal-overlay.is-open .face-id-module {
    transform: scale(1) translate3d(0, 0, 0);
    opacity: 1;
}

.client-portal-overlay.is-closing .face-id-module {
    transform: scale(0.72) translate3d(0, -18px, 0);
    opacity: 0;
    filter: blur(6px);
    transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.36s ease,
                filter 0.36s ease;
}

.client-portal-overlay.is-open .truedepth-ticks {
    animation: ticksIgnitionWave 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes ticksIgnitionWave {
    0% { opacity: 0.2; }
    40% { opacity: 1; filter: drop-shadow(0 0 6px rgba(48, 209, 88, 0.9)); }
    100% { opacity: 1; filter: drop-shadow(0 0 0px transparent); }
}

/* Face ID Biometric Hub Container (Pure Circle 144x144) */
.apple-fid-hub {
    position: relative;
    width: 144px;
    height: 144px;
    margin: 0 auto 16px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 800px;
}

/* Concentric Outer Glass Rim */
.apple-fid-glass-rim {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 80%, rgba(255, 255, 255, 0.06) 100%);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4), 0 0 25px rgba(0, 210, 255, 0.08);
    transition: border-color 0.85s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

/* TrueDepth Radial Ray Sensor Ring (Pure Circle) */
.apple-truedepth-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.truedepth-ticks line {
    stroke: rgba(255, 255, 255, 0.22);
    stroke-width: 1.6;
    stroke-linecap: round;
    transition: stroke 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Rotating Laser Beacon around the ring */
.truedepth-beacon {
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    transform-origin: center center;
    animation: truedepthBeaconSpin 3.8s linear infinite;
    pointer-events: none;
}

@keyframes truedepthBeaconSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.truedepth-beacon-svg {
    width: 100%;
    height: 100%;
}

.beacon-circle {
    transition: stroke 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Concentric Sonar / LiDAR Depth Ring Pulse */
.apple-fid-depth-pulse {
    position: absolute;
    inset: 18px;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 210, 255, 0.5);
    pointer-events: none;
    opacity: 0;
    animation: fidDepthPulse 3.2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
    transition: border-color 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fidDepthPulse {
    0% { transform: scale(0.65); opacity: 0.85; }
    50% { opacity: 0.4; }
    100% { transform: scale(1.18); opacity: 0; }
}

/* Subtle TrueDepth Dot Matrix (30,000 dots simulation) */
.apple-fid-dots {
    position: absolute;
    inset: 12px;
    background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1.2px, transparent 1.2px);
    background-size: 8px 8px;
    border-radius: 50%;
    opacity: 0.32;
    pointer-events: none;
    transition: opacity 0.85s ease;
}

/* Outward Rejection Shockwave Ring */
.apple-fid-shockwave {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #FF453A;
    pointer-events: none;
    opacity: 0;
    transform: scale(1);
}

@keyframes shockwaveBurst {
    0% { transform: scale(0.95); opacity: 0.9; }
    100% { transform: scale(1.35); opacity: 0; }
}

/* The 3D Gimbal containing the Apple Face ID Glyph (Realistic Head Spatial Scan) */
.apple-fid-gimbal {
    position: relative;
    width: 72px;
    height: 72px;
    transform-style: preserve-3d;
    animation: faceIdleScan 5.6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.face-id-module.is-error .apple-fid-gimbal {
    animation-play-state: paused;
}

@keyframes faceIdleScan {
    0%, 100% {
        transform: perspective(600px) rotateY(0deg) rotateX(0deg) translateZ(0);
    }
    20% {
        transform: perspective(600px) rotateY(-15deg) rotateX(5deg) translateZ(8px);
    }
    45% {
        transform: perspective(600px) rotateY(15deg) rotateX(-5deg) translateZ(10px);
    }
    70% {
        transform: perspective(600px) rotateY(-8deg) rotateX(-4deg) translateZ(6px);
    }
    85% {
        transform: perspective(600px) rotateY(6deg) rotateX(3deg) translateZ(4px);
    }
}

/* 3D Shaker Isolation Layer (Prevents timeline reset / jerk on return) */
.apple-fid-shaker {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.apple-fid-shaker.is-shaking {
    animation: faceShakeNo 0.7s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes faceShakeNo {
    0%, 100% {
        transform: perspective(600px) rotateY(0deg) rotateZ(0deg);
    }
    18% {
        transform: perspective(600px) rotateY(-22deg) rotateZ(-3deg) scale(0.96);
    }
    36% {
        transform: perspective(600px) rotateY(20deg) rotateZ(3deg) scale(0.96);
    }
    54% {
        transform: perspective(600px) rotateY(-12deg) rotateZ(-1.5deg);
    }
    72% {
        transform: perspective(600px) rotateY(8deg) rotateZ(1deg);
    }
    88% {
        transform: perspective(600px) rotateY(-3deg) rotateZ(0deg);
    }
}

/* SVG Face Glyph */
.apple-fid-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.apple-fid-feature {
    fill: #FFFFFF;
    transition: fill 0.85s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dynamic Expressive Eyebrows */
.fid-brow {
    opacity: 0;
    transform-origin: center;
    transform: translateY(3px) scale(0.85);
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.face-id-module.is-frowning .fid-brow {
    opacity: 1;
}

.face-id-module.is-frowning .fid-brow-left {
    transform: translateY(-1px) rotate(16deg);
    transform-origin: 22px 19px;
}

.face-id-module.is-frowning .fid-brow-right {
    transform: translateY(-1px) rotate(-16deg);
    transform-origin: 50px 19px;
}

/* Eye Blinking & Skeptical Squint */
.fid-eye {
    transform-origin: center;
    animation: eyeBlink 4.6s infinite;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.face-id-module.is-frowning .fid-eye {
    animation: none;
    transform: scaleY(0.7) scaleX(1.08);
}

@keyframes eyeBlink {
    0%, 94%, 98%, 100% { transform: scaleY(1); }
    96% { transform: scaleY(0.1); }
}

/* Apple Holographic Laser Scanline Sweep Bar */
.apple-fid-laser {
    position: absolute;
    top: 0;
    left: 2px;
    right: 2px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0, 220, 255, 0.95), rgba(48, 209, 88, 0.95), transparent);
    box-shadow: 0 0 14px rgba(0, 220, 255, 0.85), 0 0 4px #FFFFFF;
    border-radius: 999px;
    pointer-events: none;
    opacity: 0.9;
    animation: laserVerticalScan 2.6s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
    transition: background 0.85s ease, box-shadow 0.85s ease;
}

@keyframes laserVerticalScan {
    0% {
        top: 4px;
        opacity: 0.2;
    }
    20% {
        opacity: 0.95;
    }
    80% {
        opacity: 0.95;
    }
    100% {
        top: 68px;
        opacity: 0.2;
    }
}

/* Status Pill */
.face-id-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(48, 209, 88, 0.12);
    border: 1px solid rgba(48, 209, 88, 0.3);
    border-radius: 999px;
    padding: 6px 16px;
    color: #30D158;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", 'Space Grotesk', sans-serif;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transform: scale(0.84);
    opacity: 0;
    transition: transform 0.48s cubic-bezier(0.16, 1, 0.3, 1) 0.24s,
                opacity 0.42s ease 0.24s,
                background-color 0.85s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.85s cubic-bezier(0.16, 1, 0.3, 1),
                color 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.client-portal-overlay.is-open .face-id-status {
    transform: scale(1);
    opacity: 1;
}

.face-id-status .status-text {
    transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.face-id-status .status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
    animation: fidDotBlink 2s ease-in-out infinite;
}

@keyframes fidDotBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ── Portal Content & Form ── */
.portal-content {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.portal-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(247, 236, 221, 0.18);
    padding: 5px 16px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #F7D8B5;
    margin-bottom: 1rem;
}

.portal-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #D6BFA3;
}

.portal-heading {
    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(1.35rem, 2.7vw, 1.85rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.025em;
    color: #FFF9F1;
    margin: 0 0 0.8rem 0;
    transform: translate3d(0, 22px, 0);
    opacity: 0;
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.22s,
                opacity 0.45s ease 0.22s;
}

.client-portal-overlay.is-open .portal-heading {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

.client-portal-overlay.is-closing .portal-heading {
    transform: translate3d(0, 16px, 0);
    opacity: 0;
    filter: blur(4px);
    transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1) 0.04s,
                opacity 0.3s ease 0.04s,
                filter 0.3s ease 0.04s;
}

.portal-desc {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.94rem;
    font-weight: 500;
    line-height: 1.6;
    color: rgba(247, 236, 221, 0.78);
    margin: 0 0 1.8rem 0;
    max-width: 500px;
    transform: translate3d(0, 20px, 0);
    opacity: 0;
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.3s,
                opacity 0.45s ease 0.3s;
}

.client-portal-overlay.is-open .portal-desc {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

.client-portal-overlay.is-closing .portal-desc {
    transform: translate3d(0, 18px, 0);
    opacity: 0;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1) 0.02s,
                opacity 0.28s ease 0.02s;
}

/* macOS-Style Lock Screen Input */
.portal-login-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.portal-input-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 440px;
    background: rgba(0, 0, 0, 0.42);
    border: 1px solid rgba(247, 236, 221, 0.24);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45), 0 4px 18px rgba(0, 0, 0, 0.25);
    border-radius: 999px;
    padding: 6px 8px 6px 20px;
    box-sizing: border-box;
    transform: translate3d(0, 24px, 0) scale(0.95);
    opacity: 0;
    transition: transform 0.58s cubic-bezier(0.16, 1, 0.3, 1) 0.38s,
                opacity 0.45s ease 0.38s,
                border-color 0.24s ease,
                box-shadow 0.24s ease,
                background 0.24s ease;
}

.client-portal-overlay.is-open .portal-input-wrapper {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
}

.client-portal-overlay.is-closing .portal-input-wrapper {
    transform: translate3d(0, 22px, 0) scale(0.93);
    opacity: 0;
    filter: blur(4px);
    transition: transform 0.36s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease,
                filter 0.3s ease;
}

.portal-input-wrapper:focus-within {
    border-color: #27C93F;
    box-shadow: 0 0 0 3px rgba(39, 201, 63, 0.28), inset 0 2px 5px rgba(0, 0, 0, 0.5);
    background: rgba(0, 0, 0, 0.54);
}

.portal-input-lock {
    color: rgba(247, 236, 221, 0.5);
    display: flex;
    align-items: center;
    margin-right: 12px;
    flex-shrink: 0;
    transition: color 0.24s ease;
}

.portal-input-wrapper:focus-within .portal-input-lock {
    color: #27C93F;
}

.portal-password-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #FFFFFF;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Space Grotesk', sans-serif;
    font-size: 0.98rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 8px 0;
}

.portal-password-input::placeholder {
    color: rgba(247, 236, 221, 0.42);
    font-size: 0.88rem;
    letter-spacing: 0;
}

.portal-submit-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #FFF9F1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.portal-submit-btn:hover {
    background: #27C93F;
    border-color: #27C93F;
    color: #0A1C0E;
    transform: scale(1.06);
}

.portal-submit-btn:active {
    transform: scale(0.96);
}

.portal-feedback-msg {
    margin-top: 14px;
    min-height: 22px;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.84rem;
    font-weight: 600;
    color: #FF453A;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.24s ease, transform 0.24s ease;
}

.portal-feedback-msg.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.portal-footer-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    color: rgba(247, 236, 221, 0.55);
    font-size: 0.76rem;
    font-weight: 500;
    transform: translate3d(0, 14px, 0);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.46s,
                opacity 0.45s ease 0.46s;
}

.client-portal-overlay.is-open .portal-footer-badge {
    transform: translate3d(0, 0, 0);
    opacity: 0.75;
}

.client-portal-overlay.is-closing .portal-footer-badge {
    transform: translate3d(0, 14px, 0);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

/* ── AUTHENTIC MACOS LOCK SCREEN SHAKE & APPLE RED REJECTION ── */
@keyframes appleMacShake {
    0%, 100% { transform: translate3d(0, 0, 0); }
    10% { transform: translate3d(-18px, 0, 0); }
    22% { transform: translate3d(16px, 0, 0); }
    34% { transform: translate3d(-12px, 0, 0); }
    46% { transform: translate3d(10px, 0, 0); }
    58% { transform: translate3d(-6px, 0, 0); }
    70% { transform: translate3d(4px, 0, 0); }
    82% { transform: translate3d(-2px, 0, 0); }
}

.client-portal-card.has-error {
    animation: appleMacShake 0.65s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    border-color: rgba(255, 69, 58, 0.6);
    box-shadow: 0 35px 95px rgba(0, 0, 0, 0.7), 0 0 55px rgba(255, 69, 58, 0.28), inset 0 0 22px rgba(255, 69, 58, 0.14);
}

.client-portal-card.has-error .portal-ambient-glow {
    background: radial-gradient(circle, rgba(255, 69, 58, 0.35) 0%, rgba(255, 69, 58, 0.08) 50%, transparent 75%);
    opacity: 1;
}

.face-id-module.is-error .apple-fid-glass-rim,
.face-id-module.is-calming .apple-fid-glass-rim {
    border-color: rgba(255, 69, 58, 0.65);
    box-shadow: inset 0 0 20px rgba(255, 69, 58, 0.18), 0 0 30px rgba(255, 69, 58, 0.3);
}

.face-id-module.is-error .truedepth-ticks line,
.face-id-module.is-calming .truedepth-ticks line {
    stroke: rgba(255, 69, 58, 0.45);
}

.face-id-module.is-error .beacon-circle,
.face-id-module.is-calming .beacon-circle {
    stroke: #FF453A;
}

.face-id-module.is-error .apple-fid-depth-pulse,
.face-id-module.is-calming .apple-fid-depth-pulse {
    border-color: rgba(255, 69, 58, 0.7);
}

.face-id-module.is-error .apple-fid-feature,
.face-id-module.is-calming .apple-fid-feature {
    fill: #FF453A;
}

.face-id-module.is-error .apple-fid-laser,
.face-id-module.is-calming .apple-fid-laser {
    background: linear-gradient(90deg, transparent, #FF453A, #FF3B30, transparent);
    box-shadow: 0 0 16px #FF453A, 0 0 4px #FFFFFF;
}

.face-id-module.is-error .apple-fid-shockwave {
    animation: shockwaveBurst 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.face-id-module.is-error .face-id-status,
.face-id-module.is-calming .face-id-status {
    background: rgba(255, 69, 58, 0.14);
    border-color: rgba(255, 69, 58, 0.45);
    color: #FF453A;
}

.portal-input-wrapper.is-error {
    border-color: #FF453A;
    box-shadow: 0 0 0 3px rgba(255, 69, 58, 0.35), 0 0 24px rgba(255, 69, 58, 0.3), inset 0 2px 5px rgba(0, 0, 0, 0.55);
    background: rgba(255, 69, 58, 0.07);
}

.portal-input-wrapper.is-error .portal-input-lock {
    color: #FF453A;
}

@media (max-width: 768px) {
    .client-portal-overlay {
        padding: max(68px, calc(env(safe-area-inset-top) + 52px)) 16px max(24px, calc(env(safe-area-inset-bottom) + 16px));
    }
    .portal-top-bar {
        top: 14px;
        left: 14px;
        right: 14px;
    }
    .portal-back-btn {
        padding: 8px 16px;
        font-size: 0.82rem;
    }
    .portal-countdown-badge {
        padding: 6px 12px;
        font-size: 0.74rem;
    }
    .client-portal-card {
        padding: 30px 18px 24px 18px;
        border-radius: 28px;
    }
    .portal-card-border-beam {
        border-radius: 28px;
    }
    .apple-fid-hub {
        width: 112px;
        height: 112px;
        margin-bottom: 12px;
    }
    .apple-fid-gimbal {
        width: 60px;
        height: 60px;
    }
    .portal-heading {
        font-size: clamp(1.2rem, 4.8vw, 1.45rem);
        margin-bottom: 0.5rem;
    }
    .portal-desc {
        font-size: 0.86rem;
        margin-bottom: 1.3rem;
        line-height: 1.5;
    }
    .portal-footer-badge {
        margin-top: 16px;
        font-size: 0.72rem;
    }
}

@media (max-width: 480px) {
    .client-portal-overlay {
        padding: max(58px, calc(env(safe-area-inset-top) + 44px)) 12px max(20px, calc(env(safe-area-inset-bottom) + 14px));
    }
    .client-portal-card {
        padding: 24px 14px 20px 14px;
        border-radius: 24px;
    }
    .portal-card-border-beam {
        border-radius: 24px;
    }
    .portal-top-bar {
        top: 10px;
        left: 10px;
        right: 10px;
    }
    .portal-back-btn {
        padding: 7px 12px;
        font-size: 0.78rem;
    }
    .portal-back-btn span {
        display: none;
    }
    .portal-back-btn::after {
        content: 'Wróć';
        display: inline;
        font-size: 0.8rem;
    }
    .portal-countdown-badge {
        padding: 5px 10px;
        font-size: 0.7rem;
    }
    .apple-fid-hub {
        width: 98px;
        height: 98px;
        margin-bottom: 10px;
    }
    .apple-fid-gimbal {
        width: 52px;
        height: 52px;
    }
    .face-id-status {
        padding: 4px 12px;
        font-size: 0.68rem;
    }
    .portal-heading {
        font-size: 1.15rem;
        margin-bottom: 0.4rem;
    }
    .portal-desc {
        font-size: 0.8rem;
        line-height: 1.42;
        margin-bottom: 1.1rem;
    }
    .portal-input-wrapper {
        padding: 4px 6px 4px 16px;
    }
    .portal-password-input {
        font-size: 0.9rem;
        padding: 6px 0;
    }
    .portal-footer-badge {
        margin-top: 12px;
        font-size: 0.68rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .client-portal-overlay,
    .client-portal-card,
    .portal-top-bar,
    .face-id-module,
    .face-id-status,
    .portal-heading,
    .portal-desc,
    .portal-input-wrapper,
    .portal-footer-badge,
    .portal-ambient-glow,
    .portal-card-border-beam,
    .portal-card-border-beam::before,
    .truedepth-ticks {
        transition-duration: 0.01ms !important;
        animation: none !important;
        transform: none !important;
        filter: none !important;
        opacity: 1 !important;
    }
}

/* ========================================================
   SEKCJA FAQ / NAJCZĘŚCIEJ ZADAWANE PYTANIA (#faq)
   AUTORSKI SYSTEM DARK LUXURY & ACCORDION (AWWWARDS GRADE)
   ======================================================== */
.faq-section {
    position: relative;
    width: 100%;
    background-color: #400D1C;
    background: radial-gradient(ellipse at 50% 0%, #581226 0%, #400D1C 45%, #24050F 100%);
    padding: 90px 48px 105px 48px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #FFF9F1;
}

.faq-ambient-glow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1100px;
    height: 560px;
    background: radial-gradient(circle at 50% 20%, rgba(247, 236, 221, 0.08) 0%, rgba(212, 175, 55, 0.04) 40%, transparent 75%);
    pointer-events: none;
    z-index: 1;
}

.faq-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 !important;
}

/* ── FAQ HEADER ── */
.faq-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 3.5rem;
    width: 100%;
}

.faq-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(247, 236, 221, 0.2);
    padding: 7px 22px;
    border-radius: 999px;
    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #F7ECDD;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.1);
    margin-bottom: 1.2rem;
}

.faq-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #D4AF37;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.85);
}

.faq-title {
    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(2.3rem, 4.2vw, 3.6rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.035em;
    color: #FFF9F1;
    margin: 0 0 1.1rem 0;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}

.faq-subtitle {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(1rem, 1.5vw, 1.14rem);
    font-weight: 500;
    color: rgba(247, 236, 221, 0.82);
    max-width: 680px;
    line-height: 1.65;
    margin: 0 0 2.2rem 0;
}

/* ── MORPHING TABS / KATEGORIE (LAYOUT PROJECTION) ── */
.faq-filter-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: rgba(18, 5, 10, 0.55);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(247, 236, 221, 0.16);
    border-radius: 999px;
    padding: 5px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.08);
    max-width: 100%;
}

.faq-tab-list {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Morphing glider pill (pływający aktywny wskaźnik) */
.faq-tab-glider {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(247, 236, 221, 0.18) 0%, rgba(247, 236, 221, 0.07) 100%);
    border: 1px solid rgba(247, 236, 221, 0.35);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), 0 0 15px rgba(212, 175, 55, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.25);
    pointer-events: none;
    z-index: 1;
    transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
                width 0.42s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.25s ease;
    will-change: transform, width;
    opacity: 0;
}

.faq-tab-glider.is-ready {
    opacity: 1;
}

.faq-tab-btn {
    position: relative;
    z-index: 2;
    appearance: none;
    background: transparent;
    border: none;
    padding: 9px 20px;
    border-radius: 999px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: rgba(247, 236, 221, 0.72);
    cursor: pointer;
    outline: none;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}

.faq-tab-btn:hover {
    color: #FFF9F1;
}

.faq-tab-btn:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(247, 236, 221, 0.8);
}

.faq-tab-btn[aria-selected="true"] {
    color: #FFFFFF;
}

.faq-tab-counter {
    background: rgba(247, 236, 221, 0.1);
    border: 1px solid rgba(247, 236, 221, 0.2);
    border-radius: 999px;
    padding: 1px 7px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #F7ECDD;
    font-family: 'JetBrains Mono', monospace;
    transition: background 0.28s ease, color 0.28s ease;
}

.faq-tab-btn[aria-selected="true"] .faq-tab-counter {
    background: rgba(247, 236, 221, 0.24);
    color: #FFFFFF;
}

/* ── LISTA PYTAŃ FAQ (ACCORDION) ── */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    margin-bottom: 3.5rem;
}

/* Pojedyncza Karta Pytania */
.faq-card {
    position: relative;
    border-radius: 999px;
    background: linear-gradient(145deg, rgba(32, 9, 18, 0.62) 0%, rgba(18, 5, 11, 0.78) 100%);
    backdrop-filter: blur(28px) saturate(120%);
    -webkit-backdrop-filter: blur(28px) saturate(120%);
    border: 1px solid rgba(247, 236, 221, 0.12);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.36), inset 0 1px 1px rgba(255, 255, 255, 0.07);
    overflow: hidden;
    transition: border-color 0.35s ease,
                background 0.35s ease,
                box-shadow 0.35s ease;
    will-change: transform, opacity;
}

/* Dynamic Spotlight Gradient (podążający za kursorem) */
.faq-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(550px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(247, 236, 221, 0.07) 0%, transparent 65%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
    z-index: 1;
}

.faq-card:hover::before {
    opacity: 1;
}

.faq-card:hover {
    border-color: rgba(247, 236, 221, 0.28);
    background: linear-gradient(145deg, rgba(38, 11, 22, 0.7) 0%, rgba(22, 6, 13, 0.85) 100%);
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.45), 0 0 25px rgba(212, 175, 55, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.14);
}

.faq-card.is-open {
    border-radius: 34px;
    border-color: rgba(247, 236, 221, 0.42);
    background: linear-gradient(145deg, rgba(42, 12, 24, 0.85) 0%, rgba(24, 6, 14, 0.95) 100%);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.58), 0 0 35px rgba(212, 175, 55, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0.18);
}

/* Ukrywanie kart (do obsługi GSAP) */
.faq-card.is-hidden {
    display: none;
}

/* Przycisk nagłówka akordeonu */
.faq-trigger {
    position: relative;
    z-index: 2;
    width: 100%;
    appearance: none;
    background: transparent;
    border: none;
    padding: 18px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    cursor: pointer;
    text-align: left;
    color: inherit;
    outline: none;
    user-select: none;
    border-radius: inherit;
}

.faq-trigger:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(247, 236, 221, 0.7);
    border-radius: 18px;
}

/* Cyfrowy numer porządkowy pytania - Apple VisionOS Circular Optical Lens */
.faq-q-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 80%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 1px 1.5px rgba(255, 255, 255, 0.22), 0 4px 14px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font-family: 'Space Grotesk', -apple-system, sans-serif;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #FFF9F1;
    flex-shrink: 0;
    transition: all 0.38s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

.faq-card:hover .faq-q-tag {
    background: radial-gradient(circle at 35% 30%, rgba(247, 236, 221, 0.16) 0%, rgba(255, 255, 255, 0.03) 80%);
    border-color: rgba(247, 236, 221, 0.3);
    color: #FFFFFF;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3), 0 0 16px rgba(247, 236, 221, 0.12);
    transform: scale(1.05);
}

.faq-card.is-open .faq-q-tag {
    background: radial-gradient(circle at 35% 30%, rgba(232, 185, 138, 0.22) 0%, rgba(255, 255, 255, 0.04) 80%);
    border-color: rgba(232, 185, 138, 0.45);
    color: #FFFFFF;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.38), 0 0 20px rgba(232, 185, 138, 0.22);
}

/* Treść pytania */
.faq-q-title {
    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(1.02rem, 1.35vw, 1.2rem);
    font-weight: 700;
    line-height: 1.38;
    letter-spacing: -0.018em;
    color: #FFF9F1;
    margin: 0;
    flex: 1;
    transition: color 0.3s ease;
}

.faq-card.is-open .faq-q-title {
    color: #FFFFFF;
}

/* Wskaźnik rozwijania (+ na ×) */
.faq-icon-bubble {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(247, 236, 221, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-icon-cross {
    position: relative;
    width: 14px;
    height: 14px;
    display: block;
}

.faq-icon-cross::before,
.faq-icon-cross::after {
    content: '';
    position: absolute;
    background: #F7ECDD;
    border-radius: 2px;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.35s ease;
}

.faq-icon-cross::before {
    top: 6px;
    left: 0;
    width: 14px;
    height: 2px;
}

.faq-icon-cross::after {
    left: 6px;
    top: 0;
    width: 2px;
    height: 14px;
}

.faq-card.is-open .faq-icon-bubble {
    background: #F7ECDD;
    border-color: #F7ECDD;
    transform: rotate(135deg);
    box-shadow: 0 0 20px rgba(247, 236, 221, 0.45);
}

.faq-card.is-open .faq-icon-cross::before,
.faq-card.is-open .faq-icon-cross::after {
    background: #120408;
}

/* ── PŁYNNE ROZWIJANIE TREŚCI (GSAP) ── */
.faq-body {
    height: 0;
    overflow: hidden;
    will-change: height;
}

.faq-body-overflow {
    overflow: hidden;
}

.faq-body-content {
    padding: 2px 28px 28px 28px;
    opacity: 0;
    transform: translateY(15px);
    position: relative;
    z-index: 2;
    will-change: opacity, transform;
}


.faq-answer-p {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.98rem;
    line-height: 1.7;
    color: rgba(247, 236, 221, 0.88);
    margin: 0 0 14px 0;
}

.faq-answer-p strong {
    color: #FFF9F1;
    font-weight: 700;
}

.faq-bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.92rem;
    line-height: 1.58;
    color: rgba(247, 236, 221, 0.82);
}

.faq-bullets li {
    position: relative;
    padding-left: 22px;
}

.faq-bullets li::before {
    content: '◆';
    position: absolute;
    left: 4px;
    color: #D4AF37;
    font-size: 0.68rem;
    top: 3px;
}

.faq-bullets li strong {
    color: #FFF9F1;
}

/* ── MIKRO-PIGUŁKI REZULTATÓW ── */
.faq-sub-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(247, 236, 221, 0.1);
}

.faq-sub-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(247, 236, 221, 0.15);
    border-radius: 999px;
    padding: 6px 15px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.82rem;
    color: rgba(247, 236, 221, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.25s ease;
}

.faq-sub-pill:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(247, 236, 221, 0.35);
    transform: translateY(-1px);
}

.faq-sub-pill .gold-highlight {
    color: #F7ECDD;
    font-weight: 800;
}

/* ── PRZYCISK CTA DOLNY ── */
.faq-action-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
    position: relative;
    z-index: 5;
    margin-top: 10px;
}

/* Dostępność dla czytników ekranowych */
.faq-sr-status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── RESPONSYWNOŚĆ FAQ ── */
@media (max-width: 900px) {
    .faq-section {
        padding: 70px 24px 85px 24px;
    }
    .faq-title {
        font-size: 2.3rem;
    }
    .faq-trigger {
        padding: 16px 20px;
        gap: 14px;
    }
    .faq-body-content {
        padding: 0 20px 22px 20px;
    }

    /* Likwidacja "wielkiej pigułki" na telefonach - elegancki horyzontalny rail niezależnych pigułek */
    .faq-filter-wrapper {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 2rem 0 !important;
        display: block !important;
    }
    .faq-tab-list {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 8px !important;
        padding: 4px 24px 10px 24px !important;
        margin: 0 -24px !important;
        scrollbar-width: none !important;
        justify-content: flex-start !important;
        scroll-snap-type: x proximity;
    }
    .faq-tab-list::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
    .faq-tab-glider {
        display: none !important;
    }
    .faq-tab-btn {
        flex-shrink: 0 !important;
        scroll-snap-align: start;
        border-radius: 9999px !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid rgba(247, 236, 221, 0.16) !important;
        color: rgba(247, 236, 221, 0.75) !important;
        padding: 9px 16px !important;
        font-size: 0.82rem !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    .faq-tab-btn[aria-selected="true"] {
        background: #FFF9F1 !important;
        color: #120408 !important;
        border-color: #FFF9F1 !important;
        box-shadow: 0 4px 18px rgba(247, 236, 221, 0.22), 0 2px 6px rgba(0, 0, 0, 0.4) !important;
        font-weight: 700 !important;
    }
    .faq-tab-btn[aria-selected="true"] .faq-tab-counter {
        background: rgba(18, 4, 8, 0.12) !important;
        color: #120408 !important;
        border: 1px solid rgba(18, 4, 8, 0.18) !important;
        font-weight: 800 !important;
    }
    .faq-tab-counter {
        background: rgba(247, 236, 221, 0.08) !important;
        color: rgba(247, 236, 221, 0.75) !important;
        border: 1px solid rgba(247, 236, 221, 0.14) !important;
    }
}

@media (max-width: 600px) {
    .faq-section {
        padding: 55px 16px 70px 16px;
    }
    .faq-title {
        font-size: 1.85rem;
    }
    .faq-tab-list {
        padding: 4px 16px 10px 16px !important;
        margin: 0 -16px !important;
    }
    .faq-trigger {
        padding: 15px 16px;
    }
    .faq-q-tag {
        height: 26px;
        padding: 0 9px;
        font-size: 0.72rem;
        gap: 5px;
    }
    .faq-icon-bubble {
        width: 32px;
        height: 32px;
    }
    .faq-icon-cross {
        width: 12px;
        height: 12px;
    }
    .faq-icon-cross::before {
        top: 5px;
        width: 12px;
    }
    .faq-icon-cross::after {
        left: 5px;
        height: 12px;
    }
    .faq-body-content {
        padding: 0 16px 20px 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .faq-card,
    .faq-body,
    .faq-body-content,
    .faq-icon-bubble,
    .faq-tab-glider,
    .faq-tab-btn {
        transition-duration: 0.01ms !important;
        animation: none !important;
    }
}

/* ========================================================
   EXECUTIVE DISPATCH & VIP KONTAKT (#kontakt)
   AWWWARDS & APPLE DESIGN AWARD STANDARD • 100% AUTORSKI KOD
   ======================================================== */

.exec-dispatch-section {
    position: relative;
    width: 100%;
    background-color: #0B0408;
    background: radial-gradient(circle at 50% -10%, #2A0915 0%, #15050B 40%, #070204 100%);
    padding: 130px 48px 150px 48px;
    box-sizing: border-box;
    overflow: hidden;
    color: #FFF9F1;
    display: flex;
    justify-content: center;
}

/* Ambient Spatial Glow Orbs */
.exec-glow {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.6;
    z-index: 1;
}

.exec-glow-1 {
    top: 5%;
    left: 10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.12) 0%, transparent 70%);
}

.exec-glow-2 {
    bottom: 10%;
    right: 5%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(52, 211, 153, 0.10) 0%, transparent 70%);
}

.exec-glow-3 {
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    height: 400px;
    background: radial-gradient(circle, rgba(214, 191, 163, 0.08) 0%, transparent 70%);
}

.exec-container {
    max-width: 1380px;
    width: 100%;
    position: relative;
    z-index: 10;
}

/* Section Header / Pitch Banner */
.exec-header {
    text-align: center;
    max-width: 920px;
    margin: 0 auto 75px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.exec-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 100px;
    padding: 8px 18px;
    margin-bottom: 24px;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.exec-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34D399;
    box-shadow: 0 0 10px #34D399;
    animation: execPulseBeacon 1.8s ease-in-out infinite;
}

.exec-badge-text {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #F3E8DC;
    text-transform: uppercase;
}

.exec-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2.4rem, 4.6vw, 4.2rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.035em;
    color: #FFFFFF;
    margin: 0 0 22px 0;
}

.exec-title-gradient {
    background: linear-gradient(135deg, #FFFFFF 0%, #F5D7B5 50%, #D4B28C 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.exec-subtitle {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.12rem;
    font-weight: 400;
    line-height: 1.65;
    color: rgba(243, 232, 220, 0.75);
    margin: 0;
    max-width: 780px;
}

.exec-subtitle strong {
    color: #34D399;
    font-weight: 700;
}

/* 2-Column Balanced Architecture (Grid) */
.exec-split-grid {
    display: grid;
    grid-template-columns: 1fr 430px;
    gap: 65px;
    align-items: start;
}

/* ── LEWA STRONA: DISPATCH TERMINAL CARD ── */
.exec-left-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.exec-terminal-card {
    background: rgba(22, 12, 18, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 36px;
    padding: 36px;
    backdrop-filter: blur(35px);
    -webkit-backdrop-filter: blur(35px);
    box-shadow: 0 35px 90px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    display: flex;
    flex-direction: column;
    gap: 32px;
    position: relative;
    overflow: hidden;
}

/* Terminal HUD Top Bar */
.terminal-hud-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-wrap: wrap;
    gap: 12px;
}

.hud-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hud-indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34D399;
    box-shadow: 0 0 12px #34D399;
}

.hud-sys-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.74rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.08em;
}

.hud-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hud-latency-tag, .hud-secure-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem;
    font-weight: 600;
    color: rgba(214, 191, 163, 0.85);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 3px 8px;
    letter-spacing: 0.05em;
}

/* STATE 1: SCANNING RADAR VIEW */
.terminal-scan-view {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 10px 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.terminal-scan-view.is-hidden {
    display: none;
    opacity: 0;
}

/* Sonar Dish */
.sonar-dish-wrap {
    flex-shrink: 0;
}

.sonar-dish {
    position: relative;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, #0F1713 0%, #080C0B 75%, #040605 100%);
    border: 1.5px solid rgba(52, 211, 153, 0.35);
    box-shadow: 0 0 35px rgba(52, 211, 153, 0.15), inset 0 0 25px rgba(0, 0, 0, 0.8);
    overflow: hidden;
}

.sonar-grid-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(52, 211, 153, 0.18);
    pointer-events: none;
}

.sonar-grid-ring.r-1 { width: 40px; height: 40px; }
.sonar-grid-ring.r-2 { width: 85px; height: 85px; }
.sonar-grid-ring.r-3 { width: 130px; height: 130px; }

.sonar-axis-h {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(52, 211, 153, 0.12);
}

.sonar-axis-v {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(52, 211, 153, 0.12);
}

.sonar-beam {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(52, 211, 153, 0.45) 0deg, rgba(52, 211, 153, 0.08) 55deg, transparent 90deg);
    animation: sonarSpin 2.4s linear infinite;
    pointer-events: none;
}

.sonar-center-beacon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #34D399;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 14px #34D399;
    z-index: 5;
}

.sonar-blip {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #A855F7;
    box-shadow: 0 0 10px #A855F7;
    animation: sonarBlipPulse 2.4s ease-out infinite;
}

.sonar-blip.blip-1 { top: 32%; left: 68%; animation-delay: 0.8s; }
.sonar-blip.blip-2 { top: 70%; left: 35%; animation-delay: 1.6s; }

/* Scan Telemetry Text */
.scan-telemetry-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.scan-status-headline {
    display: flex;
    align-items: center;
    gap: 12px;
}

.scan-live-spinner {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(52, 211, 153, 0.3);
    border-top-color: #34D399;
    border-radius: 50%;
    animation: spinRotate 0.8s linear infinite;
}

.scan-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0;
    letter-spacing: -0.02em;
}

.scan-desc {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
    line-height: 1.45;
}

.scan-progress-track {
    width: 100%;
    height: 5px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    overflow: hidden;
    margin: 6px 0;
}

.scan-progress-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #A855F7 0%, #34D399 100%);
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(52, 211, 153, 0.6);
    transition: width 0.15s ease-out;
}

.scan-log-feed {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.74rem;
}

.log-row {
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    gap: 8px;
}

.log-row.passed .log-sym { color: #34D399; font-weight: 800; }
.log-row.passed strong { color: #FFFFFF; }
.log-row.pending .log-sym { color: #A855F7; animation: blinkFast 0.8s infinite; }

/* STATE 2: MATCHED VIEW (EXECUTIVE REVEALED) */
.terminal-matched-view {
    display: flex;
    flex-direction: column;
    gap: 22px;
    animation: matchedCardReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.terminal-matched-view.is-hidden {
    display: none;
}

.matched-banner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(52, 211, 153, 0.1);
    border: 1px solid rgba(52, 211, 153, 0.3);
    border-radius: 100px;
    padding: 7px 16px;
    align-self: flex-start;
}

.matched-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34D399;
    box-shadow: 0 0 10px #34D399;
    animation: execPulseBeacon 1.2s infinite;
}

.matched-banner-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #34D399;
    text-transform: uppercase;
}

.matched-timestamp {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.70rem;
    color: rgba(52, 211, 153, 0.8);
    margin-left: 6px;
    padding-left: 8px;
    border-left: 1px solid rgba(52, 211, 153, 0.3);
}

.matched-profile-row {
    display: flex;
    align-items: center;
    gap: 20px;
}

.profile-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.profile-avatar {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: linear-gradient(145deg, #24131E 0%, #150911 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-initials {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.4rem;
    font-weight: 900;
    color: #FFFFFF;
    letter-spacing: 0.05em;
}

.avatar-live-beacon {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #34D399;
    border: 2.5px solid #0E050A;
    box-shadow: 0 0 10px #34D399;
}

.profile-info {
    flex: 1;
}

.profile-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.profile-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.45rem;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0;
    letter-spacing: -0.02em;
}

.profile-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.35);
    border-radius: 100px;
    padding: 3px 10px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.68rem;
    font-weight: 800;
    color: #C084FC;
    letter-spacing: 0.04em;
}

.profile-role {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 8px 0;
}

.profile-meta-tags {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.meta-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.70rem;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 2px 8px;
}

.meta-tag.green {
    color: #34D399;
    border-color: rgba(52, 211, 153, 0.25);
    background: rgba(52, 211, 153, 0.06);
}

.matched-quote {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.02rem;
    font-style: italic;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
    margin: 0;
    padding-left: 20px;
    border-left: 2px solid rgba(168, 85, 247, 0.6);
}

/* ── GIGANTIC HERO CALL MONOLITH (HERO FOCAL POINT) ── */
.hero-call-monolith {
    position: relative;
    background: linear-gradient(135deg, rgba(35, 18, 28, 0.7) 0%, rgba(18, 9, 15, 0.85) 100%);
    border: 1.5px solid rgba(214, 191, 163, 0.35);
    border-radius: 28px;
    padding: 32px 36px;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.hero-call-monolith:hover {
    transform: translateY(-4px);
    border-color: rgba(52, 211, 153, 0.6);
    box-shadow: 0 35px 90px rgba(0, 0, 0, 0.8), 0 0 50px rgba(52, 211, 153, 0.2);
}

.monolith-glow-aura {
    position: absolute;
    top: -50%;
    right: -20%;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(52, 211, 153, 0.18) 0%, rgba(168, 85, 247, 0.08) 50%, transparent 70%);
    filter: blur(50px);
    pointer-events: none;
    transition: opacity 0.4s ease;
    opacity: 0.6;
}

.hero-call-monolith:hover .monolith-glow-aura {
    opacity: 1;
}

.monolith-meta-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    position: relative;
    z-index: 2;
}

.monolith-label-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 100px;
    padding: 6px 14px;
}

/* Audio Waveform Bars */
.waveform-bar {
    width: 2.5px;
    border-radius: 2px;
    background: #34D399;
    animation: waveBounce 1.2s ease-in-out infinite alternate;
}
.waveform-bar.b1 { height: 8px; animation-delay: 0.1s; }
.waveform-bar.b2 { height: 14px; animation-delay: 0.3s; }
.waveform-bar.b3 { height: 18px; animation-delay: 0.5s; }
.waveform-bar.b4 { height: 10px; animation-delay: 0.2s; }

.monolith-label-text {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #FFFFFF;
    text-transform: uppercase;
}

.monolith-call-speed {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.74rem;
    font-weight: 600;
    color: #34D399;
}

/* Big Call Link Anchor */
.monolith-call-btn {
    text-decoration: none;
    display: block;
    position: relative;
    z-index: 2;
}

.call-btn-inner {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 10px 0;
}

.call-icon-disc {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #34D399 0%, #10B981 100%);
    color: #061A12;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 25px rgba(52, 211, 153, 0.5);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.monolith-call-btn:hover .call-icon-disc {
    transform: scale(1.1) rotate(-8deg);
}

.call-number-block {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.call-number-digits {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2.4rem, 4.2vw, 3.8rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #FFFFFF;
    text-shadow: 0 4px 30px rgba(255, 255, 255, 0.3), 0 0 60px rgba(52, 211, 153, 0.35);
    transition: color 0.2s ease;
}

.monolith-call-btn:hover .call-number-digits {
    color: #A7F3D0;
}

.call-number-sub {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.65);
    margin-top: 6px;
}

.call-chevron {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    flex-shrink: 0;
    transition: transform 0.3s ease, background 0.3s ease;
}

.monolith-call-btn:hover .call-chevron {
    transform: translateX(6px);
    background: rgba(52, 211, 153, 0.2);
    color: #34D399;
}

/* Secondary VIP Actions */
.monolith-secondary-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.action-wa-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(37, 211, 102, 0.12);
    border: 1px solid rgba(37, 211, 102, 0.35);
    border-radius: 12px;
    padding: 10px 18px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.84rem;
    font-weight: 700;
    color: #25D366;
    text-decoration: none;
    transition: all 0.2s ease;
}

.action-wa-pill:hover {
    background: rgba(37, 211, 102, 0.22);
    border-color: rgba(37, 211, 102, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.2);
}

.recheck-scan-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 10px 14px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s ease;
}

.recheck-scan-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
}

.monolith-guarantee-note {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
    position: relative;
    z-index: 2;
}

/* ── PRAWA STRONA: AUTENTYCZNY IPHONE 16 PRO MAX ── */
.exec-right-col {
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
    min-width: 0;
}

.contact-phone-mockup {
    width: 100%;
    max-width: 430px;
    position: relative;
    min-width: 0;
}

/* Tytanowa obudowa iPhone Pro Max (410px x natural height) */
.phone-chassis {
    position: relative;
    border-radius: 54px;
    padding: 12px;
    background: linear-gradient(145deg, #444750 0%, #191A20 38%, #2B2D36 72%, #111216 100%);
    box-shadow: 0 40px 100px -15px rgba(0, 0, 0, 0.88),
                0 20px 60px -10px rgba(64, 13, 28, 0.65),
                0 0 0 1.5px rgba(255, 255, 255, 0.2),
                inset 0 1px 1.5px rgba(255, 255, 255, 0.45),
                inset 0 -1px 2px rgba(0, 0, 0, 0.9);
}

.phone-btn {
    position: absolute;
    background: #383A42;
    border-radius: 2px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.phone-btn-action { left: -3px; top: 90px; width: 3px; height: 28px; }
.phone-btn-vol-up { left: -3px; top: 130px; width: 3px; height: 48px; }
.phone-btn-vol-down { left: -3px; top: 190px; width: 3px; height: 48px; }
.phone-btn-power { right: -3px; top: 145px; width: 3px; height: 72px; }

/* Ramka ekranu */
.phone-screen-bezel {
    position: relative;
    border-radius: 44px;
    padding: 2.5px;
    background: #000000;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* Wnętrze ekranu: Luksusowy Apple Obsidian Dark Mode */
.phone-screen-inner {
    position: relative;
    border-radius: 42px;
    background: #0B0B0F;
    background: radial-gradient(circle at 50% 0%, rgba(26, 15, 24, 0.9) 0%, rgba(14, 9, 13, 0.98) 45%, #08080B 100%);
    overflow: hidden;
    min-height: 860px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: inset 0 0 35px rgba(0, 0, 0, 0.95);
}

.phone-screen-glare {
    position: absolute;
    top: 0;
    left: -40%;
    width: 180%;
    height: 40%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, transparent 65%);
    pointer-events: none;
    z-index: 20;
}

/* iOS 18 Status Bar */
.phone-status-bar {
    height: 42px;
    padding: 12px 22px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 25;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #FFFFFF;
}

/* Dynamic Island */
.phone-dynamic-island {
    position: absolute;
    top: 9px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 25px;
    background: #000000;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.phone-dynamic-island.is-expanded {
    width: 250px;
    height: 36px;
    background: #18221D;
    border: 1px solid rgba(52, 211, 153, 0.5);
    box-shadow: 0 4px 20px rgba(52, 211, 153, 0.35);
}

.island-default-content {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    gap: 5px;
    transition: opacity 0.2s ease;
}

.phone-dynamic-island.is-expanded .island-default-content {
    display: none;
}

.island-expanded-content {
    display: none;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    animation: fadeIn 0.3s ease;
}

.phone-dynamic-island.is-expanded .island-expanded-content {
    display: flex;
}

.island-success-icon {
    font-size: 0.85rem;
    font-weight: 900;
    color: #34D399;
}

.island-alert-text {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 0.76rem;
    font-weight: 600;
    color: #FFFFFF;
}

.island-camera {
    width: 8.5px;
    height: 8.5px;
    border-radius: 50%;
    background: radial-gradient(circle, #13243B 20%, #000000 80%);
    border: 1px solid #1C2D47;
}

.island-sensor {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #080C14;
}

.island-dot {
    width: 4.5px;
    height: 4.5px;
    border-radius: 50%;
    background: #34D399;
    opacity: 0.85;
}

.phone-status-icons {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 800;
}

.phone-signal-bars { display: block; color: #FFFFFF; }
.phone-5g-tag { font-size: 10px; font-weight: 800; letter-spacing: -0.2px; }

.phone-battery-pill {
    width: 21px;
    height: 10.5px;
    border: 1.1px solid rgba(255, 255, 255, 0.65);
    border-radius: 3px;
    padding: 1px;
    position: relative;
    box-sizing: border-box;
}

.phone-battery-pill::after {
    content: '';
    position: absolute;
    right: -2.4px;
    top: 2.2px;
    width: 1.6px;
    height: 4px;
    background: rgba(255, 255, 255, 0.65);
    border-radius: 0 1px 1px 0;
}

.phone-battery-fill {
    width: 100%;
    height: 100%;
    background: #34D399;
    border-radius: 1px;
}

/* ── SWIFTUI STUDIO APPLICATION (INSIDE SCREEN) ── */
.swiftui-studio-app {
    padding: 12px 18px 16px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 10;
    overflow-y: auto;
}

.swiftui-studio-app::-webkit-scrollbar {
    display: none;
}

/* Nav Bar */
.swiftui-nav-bar {
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.swiftui-brand {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 0.70rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.swiftui-badge-live {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 0.62rem;
    font-weight: 800;
    color: #34D399;
    background: rgba(52, 211, 153, 0.12);
    border: 1px solid rgba(52, 211, 153, 0.3);
    border-radius: 100px;
    padding: 2px 7px;
    letter-spacing: 0.05em;
}

.swiftui-large-title {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    margin: 0 0 2px 0;
}

.swiftui-lead {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* Form Body */
.swiftui-scroll-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.swiftui-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.swiftui-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 0.70rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: rgba(235, 235, 245, 0.6);
    text-transform: uppercase;
    padding: 0 4px;
}

.section-required {
    color: #A855F7;
    font-weight: 600;
}

/* SwiftUI Cards Grid */
.swiftui-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.swiftui-card {
    background: #18181B;
    border: 1.5px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    position: relative;
    text-align: left;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    outline: none;
}

.swiftui-card:hover {
    background: #202024;
    border-color: rgba(255, 255, 255, 0.15);
}

.swiftui-card:active {
    transform: scale(0.96);
}

.swiftui-card.is-selected {
    background: #1E1826;
    border-color: #A855F7;
    box-shadow: 0 0 16px rgba(168, 85, 247, 0.35), inset 0 0 12px rgba(168, 85, 247, 0.15);
}

.card-icon-bubble {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    flex-shrink: 0;
}

.card-icon-bubble.purple { background: linear-gradient(135deg, #9333EA 0%, #7E22CE 100%); }
.card-icon-bubble.blue   { background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%); }
.card-icon-bubble.emerald{ background: linear-gradient(135deg, #10B981 0%, #047857 100%); }
.card-icon-bubble.amber  { background: linear-gradient(135deg, #F59E0B 0%, #B45309 100%); }

.card-text-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.card-title {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.2;
}

.card-subtitle {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 0.66rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.25;
}

.card-check-pip {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    transition: all 0.2s ease;
}

.swiftui-card.is-selected .card-check-pip {
    background: #A855F7;
    border-color: #A855F7;
    color: #FFFFFF;
    box-shadow: 0 0 8px #A855F7;
}

/* iOS 18 Segmented Control */
.swiftui-segmented-control {
    display: flex;
    position: relative;
    background: #18181B;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 3px;
}

.segmented-indicator {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(33.333% - 2px);
    background: #323238;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 7px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.segment-btn {
    flex: 1;
    text-align: center;
    padding: 8px 0;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 2;
    transition: color 0.2s ease;
}

.segment-btn.is-active {
    color: #FFFFFF;
}

/* Inset Grouped Table */
.swiftui-inset-table {
    background: #18181B;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    overflow: hidden;
}

.table-row {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    position: relative;
}

.cell-label {
    width: 90px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    flex-shrink: 0;
}

.cell-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #FFFFFF;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 0.86rem;
}

.cell-input::placeholder {
    color: rgba(255, 255, 255, 0.28);
}

.cell-valid-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: transparent;
    transition: background 0.2s ease;
}

.cell-valid-dot.valid {
    background: #34D399;
    box-shadow: 0 0 6px #34D399;
}

.table-separator {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin-left: 14px;
}

/* Sticky Bottom Action Bar */
.swiftui-bottom-bar {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.swiftui-submit-btn {
    width: 100%;
    background: linear-gradient(135deg, #9333EA 0%, #7E22CE 100%);
    color: #FFFFFF;
    border: none;
    border-radius: 14px;
    padding: 14px 18px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 0.94rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 8px 24px rgba(147, 51, 234, 0.38);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.swiftui-submit-btn:hover {
    background: linear-gradient(135deg, #A855F7 0%, #9333EA 100%);
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(147, 51, 234, 0.48);
}

.swiftui-submit-btn:active {
    transform: scale(0.97);
}

.swiftui-submit-btn.is-loading .btn-spinner {
    display: inline-block;
}

.btn-spinner {
    display: none;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: spinRotate 0.8s linear infinite;
}

.btn-arrow {
    font-size: 0.88rem;
    transition: transform 0.2s ease;
}

.swiftui-submit-btn:hover .btn-arrow {
    transform: translateX(3px);
}

.swiftui-footer-promise {
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.45);
}

.swiftui-alert-feedback {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 0.74rem;
    color: #F87171;
    text-align: center;
    min-height: 18px;
}

/* Success Screen inside Phone */
.swiftui-success-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px 10px;
    gap: 14px;
    animation: fadeIn 0.4s ease;
}

.success-icon-disc {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(52, 211, 153, 0.12);
    border: 2px solid rgba(52, 211, 153, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 25px rgba(52, 211, 153, 0.25);
}

.success-title {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0;
}

.success-desc {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.45;
    margin: 0;
}

.success-meta-card {
    width: 100%;
    background: #18181B;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 0.76rem;
}

.meta-row {
    display: flex;
    justify-content: space-between;
    color: rgba(255, 255, 255, 0.6);
}

.meta-row strong { color: #FFFFFF; }
.meta-row strong.green { color: #34D399; }

.success-reset-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.8);
    padding: 8px 16px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 0.76rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.success-reset-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
}

.phone-home-bar {
    width: 110px;
    height: 4.5px;
    background: rgba(255, 255, 255, 0.45);
    border-radius: 10px;
    margin: 0 auto 8px auto;
}


/* ── MULTI-APP PHONE SYSTEM STYLES (iOS 18) ── */

.phone-apps-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    min-height: 520px;
}

.phone-app-screen {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 10px 18px 85px 18px; /* space for floating dock */
    overflow-y: auto;
    animation: appScreenFade 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.phone-app-screen::-webkit-scrollbar {
    display: none;
}

@keyframes appScreenFade {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

/* ── FLOATING iOS APP DOCK (MENU SYSTEMOWE) ── */
.phone-ios-dock {
    position: absolute;
    bottom: 18px;
    left: 14px;
    right: 14px;
    background: rgba(28, 28, 34, 0.78);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 26px;
    padding: 6px 12px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 40;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.dock-app-btn {
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 4px 8px;
    cursor: pointer;
    position: relative;
    outline: none;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.dock-app-btn:active {
    transform: scale(0.88);
}

.dock-icon-box {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.22s ease;
}

.dock-app-btn.is-active .dock-icon-box {
    background: linear-gradient(135deg, #A855F7 0%, #7E22CE 100%);
    border-color: #C084FC;
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(168, 85, 247, 0.5);
    transform: translateY(-2px);
}

.dock-app-label {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.2s ease;
}

.dock-app-btn.is-active .dock-app-label {
    color: #FFFFFF;
}

.dock-notif-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #EF4444;
    color: #FFFFFF;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 0.60rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.8);
    border: 1.5px solid #1C1C22;
}

/* ── APP 2: iMESSAGE CZAT STYLES ── */
.imessage-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 14px;
}

.imessage-contact-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.imessage-avatar {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2A1726 0%, #170914 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.82rem;
    font-weight: 800;
    color: #FFF;
}

.imessage-online-dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #34D399;
    border: 1.5px solid #0B0B0F;
    box-shadow: 0 0 6px #34D399;
}

.imessage-details {
    display: flex;
    flex-direction: column;
}

.imessage-name {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0;
}

.imessage-sub {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.5);
}

.imessage-encrypted-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62rem;
    color: #34D399;
    background: rgba(52, 211, 153, 0.1);
    border: 1px solid rgba(52, 211, 153, 0.25);
    border-radius: 6px;
    padding: 2px 6px;
}

.imessage-messages-scroll {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
    flex: 1;
}

.imessage-timestamp {
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 0.64rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 4px;
}

.imessage-bubble {
    max-width: 82%;
    padding: 10px 14px;
    border-radius: 18px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 0.82rem;
    line-height: 1.4;
    animation: bubblePop 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.imessage-bubble.received {
    align-self: flex-start;
    background: #26262B;
    color: #FFFFFF;
    border-bottom-left-radius: 4px;
}

.imessage-bubble.sent {
    align-self: flex-end;
    background: #0A84FF;
    color: #FFFFFF;
    border-bottom-right-radius: 4px;
}

.imessage-bubble.typing {
    align-self: flex-start;
    background: #26262B;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
    font-size: 0.74rem;
    display: flex;
    align-items: center;
    gap: 4px;
}

@keyframes bubblePop {
    from { opacity: 0; transform: translateY(8px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.imessage-quick-replies {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.quick-replies-label {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.45);
}

.quick-chips-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.quick-chip-btn {
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 10px;
    padding: 8px 12px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 0.76rem;
    font-weight: 600;
    color: #E9D5FF;
    text-align: left;
    cursor: pointer;
    transition: all 0.18s ease;
}

.quick-chip-btn:hover {
    background: rgba(168, 85, 247, 0.22);
    border-color: #A855F7;
    color: #FFFFFF;
    transform: translateX(2px);
}

.imessage-input-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #1C1C20;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 6px 12px;
}

.imessage-input-fake {
    flex: 1;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.35);
}

.imessage-send-arrow {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #0A84FF;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.85rem;
}

/* ── APP 3: AUDYT I STATYSTYKI STYLES ── */
.stats-screen-header {
    margin-bottom: 14px;
}

.stats-meta-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.64rem;
    font-weight: 800;
    color: #34D399;
    letter-spacing: 0.08em;
}

.stats-title {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
    font-size: 1.45rem;
    font-weight: 800;
    color: #FFFFFF;
    margin: 2px 0;
}

.stats-sub {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
}

.stats-content-scroll {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.stats-hero-gauge {
    background: #18181D;
    border: 1px solid rgba(52, 211, 153, 0.25);
    border-radius: 18px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.gauge-ring-wrap {
    position: relative;
    width: 74px;
    height: 74px;
    flex-shrink: 0;
}

.gauge-circular-chart {
    width: 100%;
    height: 100%;
}

.gauge-circle-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 3.2;
}

.gauge-circle-fill {
    fill: none;
    stroke: #34D399;
    stroke-width: 3.4;
    stroke-linecap: round;
    animation: gaugeProgress 1.4s ease-out forwards;
}

@keyframes gaugeProgress {
    0% { stroke-dasharray: 0, 100; }
    100% { stroke-dasharray: 100, 100; }
}

.gauge-number-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gauge-val {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 900;
    color: #FFFFFF;
    line-height: 1;
}

.gauge-label {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 0.52rem;
    font-weight: 700;
    color: #34D399;
    text-transform: uppercase;
}

.gauge-verdict {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gauge-verdict strong {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 0.84rem;
    color: #FFFFFF;
}

.gauge-verdict span {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 0.70rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.35;
}

.stats-telemetry-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.telemetry-card {
    background: #18181D;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tele-val {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    color: #FFFFFF;
}

.tele-val.green { color: #34D399; }

.tele-label {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
}

.stats-comparison-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.25);
    border-radius: 12px;
    padding: 10px 12px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.85);
}

.stats-comparison-banner strong {
    color: #C084FC;
}

/* ── APP 4: BEZPOŚREDNIE POŁĄCZENIE (iOS Call Screen) ── */
.ios-call-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 10px;
    gap: 8px;
}

.call-top-status {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.66rem;
    font-weight: 800;
    color: #34D399;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}

.call-avatar-giant {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(145deg, #2E1528 0%, #150711 100%);
    border: 2px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.8rem;
    font-weight: 900;
    color: #FFFFFF;
    margin-bottom: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.call-pulse-ring {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1.5px solid #34D399;
    animation: callPulse 1.6s ease-out infinite;
}

@keyframes callPulse {
    0% { transform: scale(0.95); opacity: 0.8; }
    100% { transform: scale(1.35); opacity: 0; }
}

.call-contact-name {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0;
}

.call-contact-role {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.6);
}

.call-number-preview {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    color: #34D399;
    margin: 6px 0;
}

.call-note {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    max-width: 240px;
    line-height: 1.35;
    margin: 0 0 14px 0;
}

.call-action-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.call-big-green-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: #FFFFFF;
    text-decoration: none;
    padding: 14px 20px;
    border-radius: 16px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 0.94rem;
    font-weight: 700;
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
    transition: all 0.2s ease;
}

.call-big-green-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(16, 185, 129, 0.55);
}

.call-wa-alt-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(37, 211, 102, 0.1);
    border: 1px solid rgba(37, 211, 102, 0.3);
    color: #25D366;
    text-decoration: none;
    padding: 10px 16px;
    border-radius: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    transition: all 0.2s ease;
}

.call-wa-alt-btn:hover {
    background: rgba(37, 211, 102, 0.18);
    border-color: #25D366;
}



/* ── KEYFRAME ANIMATIONS ── */
@keyframes execPulseBeacon {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.7; }
}

@keyframes sonarSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes sonarBlipPulse {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.6); opacity: 1; }
}

@keyframes spinRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes blinkFast {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

@keyframes waveBounce {
    0% { transform: scaleY(0.4); }
    100% { transform: scaleY(1.3); }
}

@keyframes matchedCardReveal {
    0% { opacity: 0; transform: translateY(16px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ── RESPONSIVE BREAKPOINTS (MOBILE-FIRST PRECISION) ── */
@media (max-width: 1100px) {
    .exec-split-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .exec-right-col {
        justify-content: center;
    }
    .exec-terminal-card {
        padding: 28px;
    }
    .hero-call-monolith {
        padding: 26px 24px;
    }
}

@media (max-width: 640px) {
    .exec-dispatch-section {
        padding: 90px 20px 110px 20px;
    }
    .exec-terminal-card {
        padding: 20px 16px;
        border-radius: 24px;
    }
    .terminal-scan-view {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
    }
    .scan-status-headline {
        justify-content: center;
    }
    .hero-call-monolith {
        padding: 20px 16px;
        border-radius: 20px;
    }
    .call-number-digits {
        font-size: 2.1rem;
    }
    .call-btn-inner {
        gap: 14px;
    }
    .call-icon-disc {
        width: 48px;
        height: 48px;
    }
    .matched-profile-row {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* Highlight pill used in pricing title */
.pill-highlight-yellow {
    display: inline-block;
    background-color: #FEF08A;
    border: 2.5px solid #000000;
    padding: 0px 10px;
    border-radius: 8px;
    box-shadow: 2px 2px 0px #000000;
    color: #000000;
}

/* ==========================================================================
   SEKCJA PAKIETY & CENNIK (#cennik)
   ========================================================================== */

.pricing-section {
    background-color: #F8FAFC;
    padding: 6.5rem 1.5rem;
    position: relative;
    border-top: 3px solid #000000;
    border-bottom: 3px solid #000000;
}

.pricing-header {
    text-align: center;
    max-width: 840px;
    margin: 0 auto 4rem;
}

.pricing-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 0.82rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: #000000;
    color: #FFC82D;
    padding: 6px 18px;
    border-radius: 999px;
    margin-bottom: 1.2rem;
}

.pricing-title {
    font-family: 'Poppins', sans-serif;
    font-size: 2.7rem;
    font-weight: 900;
    line-height: 1.2;
    color: #0F172A;
    margin-bottom: 1rem;
    letter-spacing: -0.5px;
}

.pricing-subtitle {
    font-family: 'Poppins', sans-serif;
    font-size: 1.05rem;
    line-height: 1.6;
    color: #475569;
}

.pricing-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    align-items: stretch;
    margin-bottom: 3.5rem;
}

.pricing-card {
    background: #FFFFFF;
    border: 3px solid #000000;
    border-radius: 16px;
    padding: 2.6rem 2rem;
    display: flex;
    flex-direction: column;
    box-shadow: 6px 6px 0px #000000;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    position: relative;
}

.pricing-card:hover {
    transform: translate(-4px, -4px);
    box-shadow: 10px 10px 0px #000000;
}

.pkg-featured {
    background: #FFFAF0;
    box-shadow: 8px 8px 0px #000000;
    transform: scale(1.03);
    z-index: 2;
}

.pkg-featured:hover {
    transform: scale(1.03) translate(-4px, -4px);
    box-shadow: 12px 12px 0px #000000;
}

.pkg-featured-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: #FFC82D;
    border: 2.5px solid #000000;
    padding: 5px 16px;
    border-radius: 999px;
    font-family: 'Poppins', sans-serif;
    font-weight: 900;
    font-size: 0.72rem;
    color: #000000;
    letter-spacing: 0.8px;
    white-space: nowrap;
    box-shadow: 2px 2px 0px #000000;
}

.pkg-top-meta {
    margin-bottom: 1.2rem;
}

.pkg-tag {
    display: inline-block;
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 10px;
    border-radius: 4px;
    background: #F1F5F9;
    color: #475569;
    margin-bottom: 0.6rem;
}

.pkg-tag-gold {
    background: #FEF3C7;
    color: #B45309;
}

.pkg-name {
    font-family: 'Poppins', sans-serif;
    font-size: 1.6rem;
    font-weight: 900;
    color: #0F172A;
    margin-bottom: 0.5rem;
}

.pkg-desc {
    font-family: 'Poppins', sans-serif;
    font-size: 0.88rem;
    line-height: 1.5;
    color: #64748B;
}

.pkg-price-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 1.2rem 0 0.3rem;
}

.pkg-from {
    font-size: 1rem;
    color: #64748B;
    font-weight: 600;
}

.pkg-price-num {
    font-family: 'Baloo 2', 'Poppins', sans-serif;
    font-size: 3.4rem;
    line-height: 1;
    color: #000000;
}

.pkg-currency {
    font-size: 0.95rem;
    font-weight: 700;
    color: #64748B;
}

.pkg-lead-time {
    font-size: 0.82rem;
    font-weight: 600;
    color: #059669;
    margin-bottom: 1.5rem;
    display: block;
}

.pkg-features-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-bottom: 2rem;
    flex-grow: 1;
    border-top: 1.5px solid #E2E8F0;
    padding-top: 1.5rem;
}

.pkg-features-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9rem;
    line-height: 1.45;
    color: #334155;
}

.pkg-check-svg {
    width: 18px;
    height: 18px;
    color: #10B981;
    flex-shrink: 0;
    margin-top: 2px;
}

.check-gold {
    color: #D97706;
}

.pkg-btn {
    display: block;
    text-align: center;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 0.98rem;
    padding: 14px 20px;
    border-radius: 12px;
    transition: all 0.2s ease;
    border: 2.5px solid #000000;
}

.pkg-btn-outline {
    background: #FFFFFF;
    color: #000000;
    box-shadow: 3px 3px 0px #000000;
}

.pkg-btn-outline:hover {
    background: #000000;
    color: #FFFFFF;
}

.pkg-btn-primary {
    background: #FFC82D;
    color: #000000;
    box-shadow: 4px 4px 0px #000000;
    font-size: 1.05rem;
    padding: 16px 20px;
}

.pkg-btn-primary:hover {
    background: #000000;
    color: #FFC82D;
}

/* Trust Footer */
.pricing-trust-footer {
    display: flex;
    justify-content: space-around;
    gap: 2rem;
    background: #FFFFFF;
    border: 2.5px solid #000000;
    border-radius: 14px;
    padding: 1.6rem 2rem;
    box-shadow: 4px 4px 0px #000000;
    flex-wrap: wrap;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: #1E293B;
}

.trust-icon {
    width: 22px;
    height: 22px;
    color: #059669;
    flex-shrink: 0;
}

/* ==========================================================================
   RESPONSYWNOŚĆ SEKCJI (MOBILE / TABLET BREAKPOINTS)
   ========================================================================== */

@media (max-width: 1080px) {
    .pricing-cards-grid {
        grid-template-columns: 1fr;
        max-width: 520px;
        margin: 0 auto 3rem;
    }
    .pkg-featured {
        transform: none !important;
    }
}

@media (max-width: 640px) {
    .pricing-section {
        padding: 4.5rem 1rem;
    }
    .pricing-title {
        font-size: 2rem;
    }
    .pricing-trust-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.1rem;
        padding: 1.2rem;
    }
}





/* ==========================================================================
   SEKCJA SEO #1: CZYSTY KOD VS WORDPRESS (#kod-seo)
   ========================================================================== */
.seo-tech-section {
    position: relative;
    padding: 100px 0 90px;
    background-color: var(--bg-yellow, #FFC82D);
    border-bottom: 3px solid #000;
}

.seo-tech-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.seo-section-header {
    text-align: center;
    max-width: 920px;
    margin: 0 auto 55px;
}

.seo-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #000;
    color: #FFC82D;
    padding: 6px 18px;
    border-radius: 999px;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 22px;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.25);
}

.seo-badge .badge-dot {
    color: #10B981;
    font-size: 1.1rem;
    line-height: 1;
}

.seo-section-title {
    font-family: var(--font-heading, "Baloo 2", cursive);
    font-size: clamp(2.1rem, 4.2vw, 3.3rem);
    line-height: 1.15;
    color: #000;
    margin-bottom: 20px;
    letter-spacing: -0.01em;
}

.seo-section-subtitle {
    font-family: var(--font-body, "Poppins", sans-serif);
    font-size: 1.05rem;
    line-height: 1.65;
    color: #1a1a1a;
    font-weight: 500;
}

/* Comparison Cards Grid */
.seo-comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-bottom: 60px;
}

.seo-comp-card {
    background: #fff;
    border: 3.5px solid #000;
    border-radius: 20px;
    padding: 38px 34px;
    box-shadow: 7px 7px 0 #000;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.seo-comp-card:hover {
    transform: translateY(-4px);
    box-shadow: 9px 9px 0 #000;
}

.seo-comp-card.competitor-card {
    background: #FFF7F7;
    border-color: #000;
}

.seo-comp-card.our-card {
    background: #F0FDF4;
    border-color: #000;
    border-width: 4px;
    box-shadow: 8px 8px 0 #000;
}

.seo-card-badge {
    align-self: flex-start;
    padding: 6px 14px;
    border-radius: 8px;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    border: 2px solid #000;
    margin-bottom: 20px;
}

.seo-card-badge.bad {
    background: #FEE2E2;
    color: #991B1B;
}

.seo-card-badge.winner {
    background: #FEF08A;
    color: #000;
    box-shadow: 2px 2px 0 #000;
}

.seo-comp-card h3 {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.65rem;
    font-weight: 800;
    color: #000;
    margin-bottom: 12px;
    line-height: 1.25;
}

.seo-comp-card .card-intro {
    font-family: "Poppins", sans-serif;
    font-size: 0.94rem;
    color: #4B5563;
    line-height: 1.55;
    margin-bottom: 26px;
}

.seo-metrics-list {
    list-style: none;
    padding: 0;
    margin: 0 0 26px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex-grow: 1;
}

.seo-metric-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: "Poppins", sans-serif;
    font-size: 0.92rem;
    line-height: 1.45;
}

.seo-metric-item .metric-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 900;
    font-size: 0.8rem;
    border: 2px solid #000;
    margin-top: 1px;
}

.metric-icon.cross {
    background: #EF4444;
    color: #fff;
}

.metric-icon.check {
    background: #10B981;
    color: #fff;
}

.seo-metric-item strong {
    color: #000;
    font-weight: 700;
}

.seo-card-footer {
    padding-top: 20px;
    border-top: 2px dashed rgba(0,0,0,0.18);
    font-family: "JetBrains Mono", monospace;
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.seo-comp-card.our-card .seo-card-footer {
    color: #065F46;
}

/* 4 Pillars Grid */
.seo-pillars-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.seo-pillar-box {
    background: #fff;
    border: 3px solid #000;
    border-radius: 16px;
    padding: 26px 22px;
    box-shadow: 5px 5px 0 #000;
    display: flex;
    flex-direction: column;
}

.seo-pillar-num {
    font-family: "JetBrains Mono", monospace;
    font-size: 1.25rem;
    font-weight: 900;
    color: #000;
    background: #FFC82D;
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 2px solid #000;
    margin-bottom: 16px;
    box-shadow: 2px 2px 0 #000;
}

.seo-pillar-box h3 {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.18rem;
    font-weight: 800;
    color: #000;
    line-height: 1.3;
    margin-bottom: 10px;
}

.seo-pillar-box p {
    font-family: "Poppins", sans-serif;
    font-size: 0.86rem;
    line-height: 1.55;
    color: #374151;
    margin: 0;
}

/* ==========================================================================
   SEKCJA SEO #2: LOKALIZACJE TRÓJMIASTO (#lokalizacje)
   ========================================================================== */
/* ==========================================================================
   SEKCJA SEO: LOKALIZACJE TRÓJMIASTO (#lokalizacje) - LUXURY DARK GLASS
   ========================================================================== */
.seo-locations-section {
    position: relative;
    padding: 120px 0 100px;
    background: #0D0407;
    background: radial-gradient(circle at 50% 0%, rgba(186, 84, 57, 0.12) 0%, transparent 60%),
                radial-gradient(circle at 10% 90%, rgba(252, 144, 115, 0.05) 0%, transparent 50%),
                #0D0407;
    overflow: hidden;
    border-top: 1px solid rgba(247, 236, 221, 0.08);
    border-bottom: 1px solid rgba(247, 236, 221, 0.08);
}

.seo-locations-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(252, 144, 115, 0.4), transparent);
}

.seo-locations-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 28px;
    position: relative;
    z-index: 2;
}

.loc-header {
    text-align: center;
    max-width: 860px;
    margin: 0 auto 65px;
}

.loc-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    border-radius: 999px;
    background: rgba(252, 144, 115, 0.08);
    border: 1px solid rgba(252, 144, 115, 0.22);
    color: #FC9073;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    margin-bottom: 22px;
    box-shadow: 0 0 24px rgba(252, 144, 115, 0.12);
    transition: all 0.3s ease;
}

.loc-badge:hover {
    background: rgba(252, 144, 115, 0.14);
    border-color: rgba(252, 144, 115, 0.4);
    box-shadow: 0 0 32px rgba(252, 144, 115, 0.22);
    transform: translateY(-1px);
}

.loc-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #FC9073;
    box-shadow: 0 0 8px #FC9073;
    animation: locPulseDot 2.2s infinite ease-in-out;
}

@keyframes locPulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.75); }
}

.loc-title {
    font-family: 'Space Grotesk', -apple-system, sans-serif;
    font-size: clamp(32px, 4.2vw, 52px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -1.2px;
    color: #F7ECDD;
    margin: 0 0 20px;
}

.loc-desc {
    font-size: 16px;
    line-height: 1.68;
    color: rgba(247, 236, 221, 0.72);
    margin: 0 auto;
    font-weight: 400;
}

/* 3 Cities Grid */
.loc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-bottom: 50px;
}

.glass-loc-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    height: 100%;
}

.glass-loc-card {
    position: relative;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(247, 236, 221, 0.1);
    border-radius: 24px;
    padding: 38px 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
                border-color 0.35s ease,
                box-shadow 0.35s ease,
                background 0.35s ease;
    overflow: hidden;
}

.glass-loc-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 140px;
    background: radial-gradient(circle at 50% -20%, rgba(252, 144, 115, 0.15), transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.glass-loc-card:hover {
    transform: translateY(-6px);
    border-color: rgba(252, 144, 115, 0.35);
    background: rgba(255, 255, 255, 0.045);
    box-shadow: 0 28px 60px -15px rgba(0, 0, 0, 0.7),
                0 0 30px rgba(252, 144, 115, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.glass-loc-card:hover::before {
    opacity: 1;
}

.loc-card-badge {
    display: inline-block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: rgba(247, 236, 221, 0.55);
    margin-bottom: 14px;
    transition: color 0.3s ease;
}

.loc-card-badge.hq {
    color: #FC9073;
}

.loc-card-h3 {
    font-family: 'Space Grotesk', -apple-system, sans-serif;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.6px;
    color: #F7ECDD;
    margin: 0 0 16px;
    transition: color 0.3s ease;
}

.glass-loc-card:hover .loc-card-h3 {
    color: #FFFFFF;
}

.loc-card-text {
    font-size: 14.5px;
    line-height: 1.68;
    color: rgba(247, 236, 221, 0.72);
    margin: 0 0 26px;
    flex-grow: 1;
}

.loc-card-entities {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.loc-entity-chip {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(247, 236, 221, 0.05);
    border: 1px solid rgba(247, 236, 221, 0.1);
    color: rgba(247, 236, 221, 0.8);
    transition: all 0.25s ease;
}

.glass-loc-card:hover .loc-entity-chip {
    background: rgba(252, 144, 115, 0.08);
    border-color: rgba(252, 144, 115, 0.22);
    color: #F7ECDD;
    transform: translateY(-1px);
}

.loc-card-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #FC9073;
    transition: gap 0.25s ease, color 0.25s ease;
    padding-top: 14px;
    border-top: 1px solid rgba(247, 236, 221, 0.08);
}

.glass-loc-card:hover .loc-card-arrow {
    gap: 12px;
    color: #FFB39F;
}

/* NAP Bar */
.loc-nap-bar {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(247, 236, 221, 0.09);
    border-radius: 20px;
    padding: 24px 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    margin-bottom: 24px;
}

.loc-nap-col h4 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: rgba(247, 236, 221, 0.5);
    margin: 0 0 6px;
}

.loc-nap-col p {
    font-size: 14.5px;
    font-weight: 600;
    color: #F7ECDD;
    margin: 0;
}

.loc-nap-link {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 16px;
    font-weight: 800;
    color: #FC9073;
    text-decoration: none;
    transition: color 0.25s ease;
}

.loc-nap-link:hover {
    color: #FFB39F;
}

.loc-guarantee-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(39, 201, 63, 0.08);
    border: 1px solid rgba(39, 201, 63, 0.25);
    color: #4ADE80;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.seo-hidden-address {
    font-style: normal;
    font-size: 12px;
    line-height: 1.6;
    color: rgba(247, 236, 221, 0.35);
    text-align: center;
    margin-top: 18px;
}

/* Responsive */
@media (max-width: 1024px) {
    .loc-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .loc-nap-bar {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px;
        gap: 18px;
    }
    .loc-nap-col:last-child {
        justify-content: flex-start !important;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .seo-locations-section {
        padding: 85px 0 70px;
    }
    .loc-header {
        margin-bottom: 45px;
    }
    .loc-title {
        font-size: 30px;
    }
    .loc-desc {
        font-size: 14.5px;
    }
    .glass-loc-card {
        padding: 28px 24px;
    }
}





/* ========================================================
   APPLE VISIONOS & iOS 18 LIQUID GLASS SYSTEM SPECIFICATION
   HIGH-REFRACTION BLUR • SPECULAR RIM LIGHTS • SPRING HAPTICS
   ======================================================== */

.phone-screen-inner {
    position: relative;
    border-radius: 44px;
    background: #08080C;
    background: radial-gradient(circle at 85% 15%, rgba(168, 85, 247, 0.24) 0%, transparent 50%),
                radial-gradient(circle at 15% 85%, rgba(59, 130, 246, 0.20) 0%, transparent 55%),
                radial-gradient(circle at 50% 50%, rgba(18, 12, 22, 0.98) 0%, #060609 100%);
    overflow: hidden;
    min-height: 860px;
    height: 860px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: inset 0 0 45px rgba(0, 0, 0, 0.95), 0 25px 60px rgba(0, 0, 0, 0.5);
}

.phone-apps-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    height: 100%;
}

.phone-app-screen {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 14px 18px 105px 18px; /* ample breathing room for floating liquid dock */
    overflow-y: auto;
    animation: liquidAppFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.phone-app-screen::-webkit-scrollbar {
    display: none;
}

@keyframes liquidAppFadeIn {
    0% { opacity: 0; transform: scale(0.96) translateY(6px); filter: blur(4px); }
    100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

/* ── APPLE VISIONOS FLOATING LIQUID GLASS DOCK ── */
.phone-ios-dock {
    position: absolute;
    bottom: 22px;
    left: 14px;
    right: 14px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(35px) saturate(210%) brightness(108%);
    -webkit-backdrop-filter: blur(35px) saturate(210%) brightness(108%);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 32px;
    padding: 7px 12px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 50;
    box-shadow: 
        0 20px 45px -5px rgba(0, 0, 0, 0.75),
        0 4px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 1.5px rgba(255, 255, 255, 0.4),
        inset 0 -1px 1px rgba(0, 0, 0, 0.2);
}

.dock-app-btn {
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 4px 6px;
    cursor: pointer;
    position: relative;
    outline: none;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.dock-app-btn:active {
    transform: scale(0.88);
}

.dock-icon-box {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.75);
    transition: all 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}

.dock-app-btn.is-active .dock-icon-box {
    background: linear-gradient(135deg, #A855F7 0%, #7E22CE 100%);
    border-color: rgba(255, 255, 255, 0.6);
    color: #FFFFFF;
    box-shadow: 
        0 6px 20px rgba(168, 85, 247, 0.55),
        inset 0 1px 2px rgba(255, 255, 255, 0.65);
    transform: translateY(-3px) scale(1.06);
}

.dock-app-label {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 0.64rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.2s ease;
}

.dock-app-btn.is-active .dock-app-label {
    color: #FFFFFF;
}

.dock-notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #EF4444;
    color: #FFFFFF;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 0.62rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.9);
    border: 1.5px solid #1C1C22;
    animation: execPulseBeacon 2s infinite;
}

/* ── LIQUID GLASS APP TILES (BRIEF APP) ── */
.swiftui-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
}

.swiftui-card {
    background: rgba(255, 255, 255, 0.045);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 16px;
    padding: 13px 11px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    cursor: pointer;
    position: relative;
    text-align: left;
    box-shadow: 
        0 8px 24px -4px rgba(0, 0, 0, 0.35),
        inset 0 1px 1px rgba(255, 255, 255, 0.22),
        inset 0 -1px 1px rgba(0, 0, 0, 0.15);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    outline: none;
}

.swiftui-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.28);
    transform: translateY(-2px);
    box-shadow: 
        0 12px 28px -2px rgba(0, 0, 0, 0.45),
        inset 0 1px 1.5px rgba(255, 255, 255, 0.35);
}

.swiftui-card:active {
    transform: scale(0.96);
}

.swiftui-card.is-selected {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.26) 0%, rgba(99, 102, 241, 0.16) 100%);
    border-color: rgba(192, 132, 252, 0.75);
    box-shadow: 
        0 0 24px rgba(168, 85, 247, 0.45),
        0 8px 24px rgba(0, 0, 0, 0.4),
        inset 0 1px 2px rgba(255, 255, 255, 0.5);
    transform: scale(1.02);
}

.card-icon-bubble {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.35);
}

.card-icon-bubble.purple { background: linear-gradient(135deg, #A855F7 0%, #7E22CE 100%); }
.card-icon-bubble.blue   { background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%); }
.card-icon-bubble.emerald{ background: linear-gradient(135deg, #10B981 0%, #047857 100%); }
.card-icon-bubble.amber  { background: linear-gradient(135deg, #F59E0B 0%, #B45309 100%); }

.card-title {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 0.84rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.22;
}

.card-subtitle {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 0.67rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.25;
}

.card-check-pip {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 900;
    color: transparent;
    transition: all 0.2s ease;
}

.swiftui-card.is-selected .card-check-pip {
    background: #A855F7;
    border-color: #A855F7;
    color: #FFFFFF;
    box-shadow: 0 0 10px #A855F7;
}

/* ── LIQUID GLASS SEGMENTED BUDGET SLIDER ── */
.swiftui-segmented-control {
    display: flex;
    position: relative;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 3px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3);
}

.segmented-indicator {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(33.333% - 2px);
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(25px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 9px;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.4),
        inset 0 1px 1.5px rgba(255, 255, 255, 0.55);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.segment-btn {
    flex: 1;
    text-align: center;
    padding: 9px 0;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 0.80rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 2;
    transition: color 0.2s ease;
}

.segment-btn.is-active {
    color: #FFFFFF;
    text-shadow: 0 1px 8px rgba(255, 255, 255, 0.4);
}

/* ── LIQUID GLASS INSET TABLE ── */
.swiftui-inset-table {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 
        0 8px 24px -4px rgba(0, 0, 0, 0.35),
        inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

.table-row {
    display: flex;
    align-items: center;
    padding: 11px 14px;
    position: relative;
}

.cell-label {
    width: 95px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    flex-shrink: 0;
}

.cell-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #FFFFFF;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 0.86rem;
}

.cell-input::placeholder {
    color: rgba(255, 255, 255, 0.32);
}

.table-separator {
    height: 1px;
    background: rgba(255, 255, 255, 0.07);
    margin-left: 14px;
}

/* ── LIQUID GLASS PRIMARY ACTION BUTTON ── */
.swiftui-submit-btn {
    width: 100%;
    background: linear-gradient(135deg, #9333EA 0%, #6366F1 50%, #3B82F6 100%);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 15px;
    padding: 15px 20px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    box-shadow: 
        0 10px 30px rgba(147, 51, 234, 0.45),
        inset 0 1px 2px rgba(255, 255, 255, 0.6);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.swiftui-submit-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    animation: liquidSheen 3.5s infinite;
}

@keyframes liquidSheen {
    0% { left: -100%; }
    30%, 100% { left: 100%; }
}

.swiftui-submit-btn:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 
        0 15px 35px rgba(147, 51, 234, 0.6),
        inset 0 1px 2px rgba(255, 255, 255, 0.8);
}

.swiftui-submit-btn:active {
    transform: scale(0.97);
}

/* ==========================================================================
   NOWA LUKSUSOWA SEKCJA KONTAKTOWA (#kontakt) // ELECTRIC MINT & CYBER CYAN
   Luksusowa sekcja kontaktowa: Prawdziwa Paleta Piaskowa (Natural Sand & Stone Linen),
   natychmiastowe klikanie pigułek (zero opóźnień), estetyczna mikro-walidacja,
   kinowa animacja sukcesu WOW oraz zbalansowany profil Olafa Zaboklickiego
   ========================================================================== */
.luxury-contact-section {
    position: relative;
    padding: 115px 0 135px;
    background: #140309;
    background: radial-gradient(circle at 18% 18%, rgba(212, 197, 181, 0.06) 0%, transparent 55%),
                radial-gradient(circle at 82% 78%, rgba(212, 197, 181, 0.04) 0%, transparent 55%),
                #140309;
    overflow: hidden;
    border-top: 1px solid rgba(212, 197, 181, 0.14);
}

.luxury-contact-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 197, 181, 0.35), transparent);
}

.contact-ambient-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(160px);
    pointer-events: none;
    z-index: 1;
}

.contact-ambient-glow.glow-top {
    top: -120px;
    right: 12%;
    width: 480px;
    height: 480px;
    background: rgba(212, 197, 181, 0.05);
}

.contact-ambient-glow.glow-bottom {
    bottom: -120px;
    left: 8%;
    width: 520px;
    height: 520px;
    background: rgba(212, 197, 181, 0.04);
}

.contact-container {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}

.contact-luxury-grid {
    display: grid;
    grid-template-columns: 1fr 480px;
    gap: 75px;
    align-items: center;
}

/* LEWA STRONA: Formularz */
.contact-form-col {
    display: flex;
    flex-direction: column;
    position: relative;
}

.contact-pretitle {
    font-family: 'Caveat', cursive, sans-serif;
    font-size: 27px;
    font-weight: 700;
    color: #D4C5B5;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    text-shadow: 0 0 16px rgba(212, 197, 181, 0.25);
}

.contact-main-heading {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(40px, 4.5vw, 64px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -1.8px;
    color: #FAF7F2;
    margin: 0 0 28px;
}

.contact-heading-highlight {
    background: linear-gradient(135deg, #FAF7F2 0%, #D4C5B5 60%, #B8A898 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 20px rgba(212, 197, 181, 0.25));
}

.contact-subheading-group {
    margin-bottom: 34px;
}

.contact-subheading {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 29px;
    font-weight: 800;
    letter-spacing: -0.6px;
    color: #FAF7F2;
    margin: 0 0 8px;
}

.contact-subdesc {
    font-size: 15.5px;
    line-height: 1.6;
    color: rgba(251, 246, 239, 0.72);
    margin: 0;
}

/* Formularz & Płynne dwufazowe zgaśnięcie */
.luxury-contact-form {
    display: flex;
    flex-direction: column;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.35s ease;
}

.luxury-contact-form.is-exiting {
    opacity: 0;
    transform: translateY(-16px) scale(0.98);
    filter: blur(5px);
    pointer-events: none;
}

.luxury-contact-form.is-hidden {
    display: none !important;
}

.ref-field-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 28px;
    position: relative;
}

.field-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.ref-field-label {
    display: inline-block;
    font-size: 13.5px;
    font-weight: 700;
    color: rgba(251, 246, 239, 0.88);
    letter-spacing: 0.3px;
    margin-bottom: 12px;
}

.field-label-row .ref-field-label {
    margin-bottom: 0;
}

/* INTERAKTYWNA MIKRO-WALIDACJA W CZASIE RZECZYWISTYM (REAL-TIME APPLE GLASS CAPSULE) */
.field-validation-badge {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 11px 3px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(212, 197, 181, 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.15px;
    color: rgba(251, 246, 239, 0.7);
    opacity: 0;
    transform: translateY(4px) scale(0.92);
    pointer-events: none;
    transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                background-color 0.2s ease,
                border-color 0.2s ease,
                color 0.2s ease,
                box-shadow 0.2s ease;
}

/* Pulsujący punkt w trakcie wpisywania */
.field-validation-badge .badge-pulse-dot {
    display: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(212, 197, 181, 0.85);
    box-shadow: 0 0 6px rgba(212, 197, 181, 0.7);
    animation: liveBadgeDotPulse 1.1s infinite ease-in-out;
}

@keyframes liveBadgeDotPulse {
    0%, 100% { transform: scale(0.85); opacity: 0.6; }
    50% { transform: scale(1.25); opacity: 1; }
}

/* SVG ikona weryfikacji z rysowanym checkmarkiem */
.field-validation-badge .badge-check-svg {
    display: none;
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.field-validation-badge .badge-check-circle {
    fill: rgba(212, 197, 181, 0.22);
    stroke: #D4C5B5;
    stroke-width: 1.3;
}

.field-validation-badge .badge-check-mark {
    fill: none;
    stroke: #FAF7F2;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 14;
    stroke-dashoffset: 14;
}

/* STAN 1: UŻYTKOWNIK WPISUJE (Płynny live status w locie) */
.field-validation-badge.is-typing {
    opacity: 1;
    transform: translateY(0) scale(1);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(212, 197, 181, 0.24);
    color: rgba(251, 246, 239, 0.75);
}

.field-validation-badge.is-typing .badge-pulse-dot {
    display: inline-block;
}

.field-validation-badge.is-typing .badge-check-svg {
    display: none;
}

/* STAN 2: POTWIERDZONE / ZWERYFIKOWANE (Luksusowy piaskowy badge z animacją rysowania) */
.field-validation-badge.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    background: rgba(212, 197, 181, 0.16);
    border-color: #D4C5B5;
    color: #FAF7F2;
    box-shadow: 0 2px 14px rgba(212, 197, 181, 0.25),
                inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

.field-validation-badge.is-visible .badge-pulse-dot {
    display: none;
}

.field-validation-badge.is-visible .badge-check-svg {
    display: inline-block;
}

.field-validation-badge.is-visible .badge-check-mark {
    animation: drawBadgeCheck 0.28s 0.04s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes drawBadgeCheck {
    to {
        stroke-dashoffset: 0;
    }
}

/* Przebiegający rozbłysk świetlny po zatwierdzeniu */
.field-validation-badge.is-visible::before {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: skewX(-20deg);
    animation: badgeShineSweep 0.55s 0.05s ease-out forwards;
}

@keyframes badgeShineSweep {
    to {
        left: 180%;
    }
}

.ref-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(212, 197, 181, 0.22);
    border-radius: 999px;
    padding: 14px 24px;
    color: #FAF7F2;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 15px;
    box-sizing: border-box;
    box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    outline: none;
}

.ref-textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(212, 197, 181, 0.22);
    border-radius: 20px;
    padding: 16px 24px;
    color: #FAF7F2;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 15px;
    line-height: 1.55;
    box-sizing: border-box;
    box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    min-height: 80px;
    resize: vertical;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    outline: none;
}

.ref-input::placeholder,
.ref-textarea::placeholder {
    color: rgba(251, 246, 239, 0.38);
    font-size: 14.5px;
}

.ref-input:hover,
.ref-textarea:hover {
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(212, 197, 181, 0.4);
}

.ref-input:focus,
.ref-textarea:focus {
    outline: none;
    background: rgba(212, 197, 181, 0.05);
    border-color: #D4C5B5;
    box-shadow: 0 0 0 3px rgba(212, 197, 181, 0.15),
                0 8px 24px -2px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.ref-input.is-valid {
    border-color: rgba(212, 197, 181, 0.7);
    box-shadow: 0 0 16px rgba(212, 197, 181, 0.16),
                inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* PIGUŁKI WYBORU — MINIMALISTYCZNE, SZYBKIE (0 MS) I SPÓJNE Z DESIGNEM */
.pills-choice-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.pill-choice-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8.5px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(212, 197, 181, 0.18);
    color: rgba(251, 246, 239, 0.78);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.15px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    outline: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    will-change: transform, background-color, border-color, box-shadow;
    transition: transform 0.12s cubic-bezier(0.2, 0.8, 0.2, 1),
                background-color 0.15s ease,
                border-color 0.15s ease,
                color 0.15s ease,
                box-shadow 0.15s ease;
}

.pill-choice-btn * {
    pointer-events: none;
}

/* Fala świetlna rozbłysku przy kliknięciu (Sheen Ripple) */
.pill-choice-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: radial-gradient(circle at center, rgba(212, 197, 181, 0.45) 0%, transparent 70%);
    opacity: 0;
    pointer-events: none;
}

/* Stan Hover */
.pill-choice-btn:hover {
    background: rgba(212, 197, 181, 0.08);
    border-color: rgba(212, 197, 181, 0.4);
    color: #FAF7F2;
    transform: translateY(-1px);
}

/* Stan Wciśnięcia (natychmiastowy micro-press w 0 ms) */
.pill-choice-btn:active {
    transform: scale(0.95);
    background: rgba(212, 197, 181, 0.15);
}

/* STAN ZAZNACZONY — Satynowy trawertyn z czarnym tekstem (1:1 z przyciskiem «Wyślij» i kartą) */
.pill-choice-btn.is-selected {
    background: linear-gradient(135deg, #D4C5B5 0%, #B8A898 100%);
    border-color: rgba(255, 255, 255, 0.5);
    color: #160B0E;
    font-weight: 800;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 16px rgba(212, 197, 181, 0.28);
}

.pill-choice-btn.is-selected:hover {
    background: linear-gradient(135deg, #E2D6C8 0%, #C4B5A5 100%);
    color: #000000;
    border-color: rgba(255, 255, 255, 0.7);
}

/* NOWA DEDYKOWANA ANIMACJA SPRĘŻYSTEGO KLIKNIĘCIA OD ZERA (0 ms GPU SPRING POP) */
.pill-choice-btn.pill-pop-anim {
    animation: pillTactilePop 0.26s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.pill-choice-btn.pill-pop-anim::after {
    animation: pillRipplePulse 0.28s ease-out forwards;
}

@keyframes pillTactilePop {
    0% {
        transform: scale(0.94);
    }
    45% {
        transform: scale(1.05);
    }
    75% {
        transform: scale(0.98);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes pillRipplePulse {
    0% {
        opacity: 0.85;
        transform: scale(0.6);
    }
    100% {
        opacity: 0;
        transform: scale(1.4);
    }
}

/* Przycisk wysyłki (Satynowy Ciepły Trawertyn — Czysty Luksus) */
.ref-submit-wrap {
    margin-top: 14px;
}

.ref-submit-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 44px;
    border-radius: 999px;
    background: linear-gradient(135deg, #D4C5B5 0%, #B8A898 100%);
    color: #160B0E;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: 0.4px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    cursor: pointer;
    box-shadow: 0 10px 28px -4px rgba(0, 0, 0, 0.55), 0 0 22px rgba(212, 197, 181, 0.22), inset 0 1px 1.5px rgba(255, 255, 255, 0.4);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.25s ease;
}

.ref-submit-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: buttonSheen 3.4s infinite;
}

@keyframes buttonSheen {
    0% { left: -100%; }
    25%, 100% { left: 100%; }
}

.ref-submit-btn:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #E2D6C8 0%, #C4B5A5 100%);
    box-shadow: 0 14px 36px -4px rgba(0, 0, 0, 0.65), 0 0 28px rgba(212, 197, 181, 0.35);
}

.ref-submit-btn:active {
    transform: scale(0.97);
}

.ref-submit-btn.is-loading {
    opacity: 0.9;
    cursor: wait;
}

.btn-spinner {
    width: 16px;
    height: 16px;
    border: 2.5px solid rgba(26, 13, 18, 0.25);
    border-top-color: #1A0D12;
    border-radius: 50%;
    animation: btnSpin 0.7s linear infinite;
    display: inline-block;
}

@keyframes btnSpin {
    to { transform: rotate(360deg); }
}

/* ========================================================
   KINOWA ANIMACJA POTWIERDZENIA WYSŁANIA (NATURAL SAND SUCCESS)
   ======================================================== */
.contact-success-view {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.contact-success-view.is-active {
    display: flex;
    animation: successCinematicIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes successCinematicIn {
    0% {
        opacity: 0;
        transform: translateY(28px) scale(0.96);
        filter: blur(6px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.success-hero-box {
    position: relative;
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 24px;
}

.success-icon-wrap {
    position: relative;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: radial-gradient(135% 135% at 30% 25%, rgba(255, 255, 255, 0.08) 0%, rgba(212, 197, 181, 0.04) 55%, rgba(0, 0, 0, 0.25) 100%);
    border: 1px solid rgba(212, 197, 181, 0.22);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 10px 30px -4px rgba(0, 0, 0, 0.35),
                0 0 24px rgba(212, 197, 181, 0.14),
                inset 0 1px 1.5px rgba(255, 255, 255, 0.22);
    overflow: hidden;
    transform: scale(0.9);
    opacity: 0;
}

.contact-success-view.is-active .success-icon-wrap {
    animation: successIconPop 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes successIconPop {
    0% {
        transform: scale(0.85);
        opacity: 0;
    }
    60% {
        transform: scale(1.03);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Luksusowy rozbłysk świetlny sweep po zatwierdzeniu */
.contact-success-view.is-active .success-icon-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    left: -130%;
    width: 65%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    transform: skewX(-25deg);
    animation: successIconSweep 0.75s 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes successIconSweep {
    to {
        left: 170%;
    }
}

/* Miękka aura ciepłego trawertynu */
.success-glow-ring {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 197, 181, 0.25) 0%, rgba(212, 197, 181, 0.05) 55%, transparent 70%);
    pointer-events: none;
    animation: successRingBreathe 3s infinite ease-in-out;
}

@keyframes successRingBreathe {
    0%, 100% { transform: scale(1); opacity: 0.45; }
    50% { transform: scale(1.18); opacity: 0.8; }
}

.success-svg {
    width: 76px;
    height: 76px;
    position: relative;
    z-index: 2;
}

.success-circle-bg {
    stroke: rgba(212, 197, 181, 0.16);
}

.success-circle-fill {
    stroke: #D4C5B5;
    stroke-dasharray: 196;
    stroke-dashoffset: 196;
    transform-origin: center;
    transform: rotate(-90deg);
}

.contact-success-view.is-active .success-circle-fill {
    animation: drawSuccessCircle 0.6s 0.08s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes drawSuccessCircle {
    to { stroke-dashoffset: 0; }
}

.success-check-path {
    stroke: #FAF7F2;
    stroke-dasharray: 44;
    stroke-dashoffset: 44;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.contact-success-view.is-active .success-check-path {
    animation: drawSuccessCheck 0.4s 0.42s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes drawSuccessCheck {
    to { stroke-dashoffset: 0; }
}

.success-title-box {
    display: flex;
    flex-direction: column;
}

.success-badge-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 13px;
    border-radius: 999px;
    background: rgba(212, 197, 181, 0.12);
    border: 1px solid rgba(212, 197, 181, 0.28);
    color: #D4C5B5;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
    width: fit-content;
}

.badge-sand-dot,
.badge-green-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #D4C5B5;
    box-shadow: 0 0 8px #D4C5B5;
    animation: dotPulse 2s infinite ease-in-out;
}

.success-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.8px;
    color: #FAF7F2;
    margin: 0 0 4px;
}

.success-subtitle {
    font-size: 14.5px;
    color: rgba(251, 246, 239, 0.72);
    margin: 0;
    font-weight: 500;
}

/* Szklana Karta VIP w odcieniu naturalnego piasku */
.success-card-summary {
    width: 100%;
    background: linear-gradient(165deg, rgba(35, 12, 20, 0.75) 0%, rgba(18, 5, 10, 0.9) 100%);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(212, 197, 181, 0.2);
    border-radius: 22px;
    padding: 24px 28px;
    box-sizing: border-box;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

.card-shimmer-sweep {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 197, 181, 0.1), transparent);
    animation: cardShimmer 3.2s 0.6s infinite;
    pointer-events: none;
}

@keyframes cardShimmer {
    0% { left: -100%; }
    30%, 100% { left: 100%; }
}

.summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 0;
    border-bottom: 1px solid rgba(251, 246, 239, 0.08);
    font-size: 14px;
    animation: rowFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.summary-row:nth-child(2) { animation-delay: 0.25s; }
.summary-row:nth-child(3) { animation-delay: 0.33s; }
.summary-row:nth-child(4) { animation-delay: 0.41s; }
.summary-row:nth-child(5) { animation-delay: 0.49s; }

@keyframes rowFadeIn {
    0% { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}

.summary-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.summary-label {
    color: rgba(251, 246, 239, 0.65);
    font-weight: 500;
}

.summary-val {
    color: #FAF7F2;
    font-weight: 700;
    text-align: right;
}

.summary-val.highlight-sand,
.summary-val.highlight-mint {
    color: #D4C5B5;
    font-weight: 800;
}

.vip-live-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #D4C5B5;
    box-shadow: 0 0 8px #D4C5B5;
    margin-right: 6px;
    vertical-align: middle;
    animation: dotPulse 1.8s infinite;
}

.success-actions-row {
    display: flex;
    gap: 14px;
    align-items: center;
    animation: rowFadeIn 0.5s 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.btn-reset-form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(212, 197, 181, 0.22);
    color: #FAF7F2;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
}

.btn-reset-form:hover {
    background: rgba(212, 197, 181, 0.08);
    border-color: #D4C5B5;
    color: #D4C5B5;
    transform: translateY(-1px);
}

/* KONTENER PRZYCISKU TELEFONU Z DYMKIEM AKTYWNOŚCI WŁAŚCICIELA */
.success-phone-wrap {
    position: relative;
    display: inline-flex;
}

.owner-speech-bubble {
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    z-index: 60;
    background: rgba(22, 6, 12, 0.96);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(212, 197, 181, 0.32);
    box-shadow: 0 18px 40px -6px rgba(0, 0, 0, 0.82),
                0 0 28px rgba(212, 197, 181, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
    border-radius: 18px;
    padding: 13px 16px;
    width: 325px;
    box-sizing: border-box;
    text-decoration: none;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-8px) scale(0.85);
    pointer-events: none;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.25s ease,
                box-shadow 0.25s ease;
}

.owner-speech-bubble.is-visible {
    opacity: 1;
    pointer-events: auto;
    animation: ownerBubblePopIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes ownerBubblePopIn {
    0% {
        opacity: 0;
        transform: translateY(-12px) scale(0.78);
    }
    65% {
        opacity: 1;
        transform: translateY(3px) scale(1.03);
    }
    82% {
        transform: translateY(-1px) scale(0.99);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.owner-speech-bubble:hover {
    border-color: #D4C5B5;
    box-shadow: 0 22px 46px -4px rgba(0, 0, 0, 0.9),
                0 0 32px rgba(212, 197, 181, 0.28);
    transform: translateY(-2px);
}

.bubble-arrow-top {
    position: absolute;
    top: -7px;
    right: 125px;
    width: 12px;
    height: 12px;
    background: #16060C;
    border-left: 1px solid rgba(212, 197, 181, 0.32);
    border-top: 1px solid rgba(212, 197, 181, 0.32);
    transform: rotate(45deg);
}

.bubble-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

.bubble-beacon-wrap {
    position: relative;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.bubble-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid #D4C5B5;
    box-shadow: 0 0 12px rgba(212, 197, 181, 0.3);
}

.bubble-live-beacon {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #34D399;
    border: 2px solid #16060C;
    box-shadow: 0 0 8px #34D399;
}

.bubble-live-beacon::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 50%;
    border: 1.5px solid #34D399;
    animation: beaconPulse 1.8s infinite;
}

@keyframes beaconPulse {
    0% { transform: scale(1); opacity: 0.9; }
    100% { transform: scale(2.3); opacity: 0; }
}

.bubble-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.bubble-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding-right: 18px;
}

.bubble-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    color: #FAF7F2;
    letter-spacing: -0.2px;
}

.bubble-pill-status {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(52, 211, 153, 0.16);
    color: #34D399;
    border: 1px solid rgba(52, 211, 153, 0.35);
}

.bubble-desc {
    font-size: 12px;
    line-height: 1.35;
    color: rgba(251, 246, 239, 0.78);
    margin: 0;
}

.bubble-desc strong {
    color: #D4C5B5;
    font-weight: 600;
}

.bubble-close-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(212, 197, 181, 0.2);
    color: rgba(251, 246, 239, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.bubble-close-btn:hover {
    background: rgba(212, 197, 181, 0.18);
    color: #FAF7F2;
    border-color: #D4C5B5;
}

.btn-call-direct.is-active-ringing {
    animation: btnGentlePulse 2.4s infinite;
}

@keyframes btnGentlePulse {
    0%, 100% {
        box-shadow: 0 4px 18px rgba(11, 70, 50, 0.5), 0 0 16px rgba(52, 211, 153, 0.2);
        transform: translateY(0);
    }
    50% {
        box-shadow: 0 8px 28px rgba(11, 70, 50, 0.75), 0 0 28px rgba(52, 211, 153, 0.45);
        transform: translateY(-1px);
    }
}

/* PRAWA STRONA: KARTA OLAFA ZABOKLICKIEGO */
.contact-card-col {
    position: relative;
}

.contact-detect-card {
    position: relative;
    border-radius: 30px;
    background: #0E0409;
    border: 1px solid rgba(212, 197, 181, 0.2);
    overflow: hidden;
    box-shadow: 0 28px 70px -15px rgba(0, 0, 0, 0.9),
                0 0 35px rgba(212, 197, 181, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
    min-height: 560px;
    display: flex;
    flex-direction: column;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-detect-card:hover {
    border-color: rgba(212, 197, 181, 0.38);
    box-shadow: 0 32px 80px -15px rgba(0, 0, 0, 0.95),
                0 0 45px rgba(212, 197, 181, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Stan 1: Searching (Animacja sonaru) */
.detect-view-searching {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 55px 36px 45px;
    background: radial-gradient(circle at 50% 30%, rgba(212, 197, 181, 0.06) 0%, transparent 65%), #0E0409;
    z-index: 2;
    visibility: visible;
    transition: opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
                visibility 0.5s;
}

.detect-view-searching.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.96);
    visibility: hidden;
    transition: opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
                visibility 0s linear 0.5s;
}

.skeleton-profile-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.skeleton-avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(212, 197, 181, 0.2);
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
}

.skeleton-pill {
    height: 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    position: relative;
    overflow: hidden;
}

.skeleton-pill.pill-lg { width: 180px; height: 14px; }
.skeleton-pill.pill-md { width: 135px; }
.skeleton-pill.pill-sm { width: 90px; }

.skeleton-avatar::after,
.skeleton-pill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(212, 197, 181, 0.15), transparent);
    animation: skeletonShimmer 2s infinite ease-in-out;
}

@keyframes skeletonShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.search-indicator-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

/* Radar Sonar Rings */
.sonar-wrap {
    position: relative;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.sonar-wave {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 1.5px solid rgba(212, 197, 181, 0.3);
    animation: sonarPulse 2.2s infinite cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sonar-wave.wave-2 {
    animation-delay: 1.1s;
}

@keyframes sonarPulse {
    0% { transform: scale(0.5); opacity: 0.8; }
    100% { transform: scale(1.6); opacity: 0; }
}

.search-spinner {
    width: 48px;
    height: 48px;
    position: relative;
    z-index: 2;
}

.spinner-svg {
    width: 100%;
    height: 100%;
    animation: searchSpin 1.2s linear infinite;
}

@keyframes searchSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.spinner-track { stroke: rgba(212, 197, 181, 0.15); }
.spinner-head { stroke: #D4C5B5; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(212, 197, 181, 0.6)); }

.search-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 25px;
    font-weight: 800;
    color: #FAF7F2;
    letter-spacing: -0.5px;
    margin: 0 0 6px;
}

.search-subtitle {
    font-size: 14px;
    color: rgba(251, 246, 239, 0.65);
    margin: 0;
    font-weight: 500;
}

/* Stan 2: Found (OLAF ZABOKLICKI + NUMER W CZARNYM MIEJSCU) */
.detect-view-found {
    position: relative;
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    z-index: 3;
    visibility: visible;
    transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
                visibility 0.6s;
}

.detect-view-found.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(1.03);
    visibility: hidden;
    transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
                visibility 0s linear 0.6s;
}

.found-card-photo-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #000;
}

.found-card-photo {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.found-card-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 15px;
    border-radius: 999px;
    background: rgba(14, 4, 9, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(212, 197, 181, 0.22);
    color: #FAF7F2;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
}

.found-card-body {
    flex: 1;
    width: 100%;
    padding: 28px 28px 32px;
    background: linear-gradient(135deg, #D4C5B5 0%, #B8A898 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
}

.found-card-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.8px;
    color: #160B0E;
    margin: 0 0 4px;
}

.found-card-role {
    font-size: 14px;
    font-weight: 600;
    color: rgba(22, 11, 14, 0.75);
    margin: 0 0 14px;
    letter-spacing: 0.3px;
}

/* WIDOCZNY NUMER TELEFONU W TRAWERTYNOWYM MIEJSCU */
.found-card-phone-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(22, 11, 14, 0.08);
    border: 1px solid rgba(22, 11, 14, 0.2);
    color: #160B0E;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-decoration: none;
    margin-bottom: 20px;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.found-card-phone-badge:hover {
    background: rgba(22, 11, 14, 0.14);
    border-color: #160B0E;
    color: #000000;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.phone-badge-icon {
    display: flex;
    align-items: center;
}

.found-card-buttons-row {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.btn-call-direct {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, #0B4632 0%, #052419 100%);
    border: 1px solid rgba(52, 211, 153, 0.5);
    color: #FAF7F2;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 4px 18px rgba(11, 70, 50, 0.45), 0 0 16px rgba(52, 211, 153, 0.2);
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.btn-call-direct:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #106E4E 0%, #083E2C 100%);
    border-color: rgba(52, 211, 153, 0.7);
    color: #FFFFFF;
    box-shadow: 0 8px 26px rgba(11, 70, 50, 0.65), 0 0 22px rgba(52, 211, 153, 0.35);
}

.btn-call-direct:active {
    transform: scale(0.97);
}

.btn-email-direct {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border-radius: 999px;
    background: rgba(22, 11, 14, 0.08);
    border: 1px solid rgba(22, 11, 14, 0.22);
    color: #160B0E;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.btn-email-direct:hover {
    background: rgba(22, 11, 14, 0.14);
    border-color: #160B0E;
    color: #000000;
    transform: translateY(-2px);
}

/* Responsywność */
@media (max-width: 1024px) {
    .contact-luxury-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .contact-detect-card {
        max-width: 520px;
        margin: 0 auto;
        min-height: 520px;
        width: 100%;
    }
}

@media (max-width: 900px) {
    /* Na telefonach: Karta z animacją detekcji doradcy i zdjęciem jako pierwsza, przed formularzem */
    .contact-luxury-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 45px !important;
    }
    .contact-card-col {
        order: -1 !important;
        width: 100% !important;
    }
    .contact-form-col {
        order: 2 !important;
        width: 100% !important;
    }
    .contact-detect-card {
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    /* ── ZAPOBIEGANIE NIENATURALNEMU ZOOMOWI NA TELEFONACH (iOS Safari Auto-Zoom Fix) ── */
    /* Gdy pole tekstowe ma font-size < 16px, iPhone automatycznie przybliża całą stronę.
       Wymuszenie 16px dla pól tekstowych na telefonach całkowicie blokuje zbędny zoom. */
    .ref-input,
    .ref-textarea,
    .portal-password-input,
    .cell-input,
    .form-input,
    .form-textarea,
    .form-select,
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    textarea,
    select {
        font-size: 16px !important;
        touch-action: manipulation;
    }

    .ref-input::placeholder,
    .ref-textarea::placeholder {
        font-size: 15px !important;
    }
}

@media (pointer: coarse) and (max-width: 1024px) {
    /* Dodatkowa ochrona dla urządzeń dotykowych iOS (iPhone/iPad) */
    .ref-input,
    .ref-textarea,
    .portal-password-input,
    .cell-input,
    .form-input,
    .form-textarea,
    .form-select,
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    textarea,
    select {
        font-size: 16px !important;
        touch-action: manipulation;
    }
}

@media (max-width: 768px) {
    .luxury-contact-section {
        padding: 85px 0 95px;
    }
    .contact-container {
        padding: 0 20px;
    }
    .contact-main-heading {
        font-size: 34px;
    }
    .contact-subheading {
        font-size: 24px;
    }
    .pills-choice-wrap {
        gap: 6px;
    }
    .pill-choice-btn {
        padding: 7px 13px;
        font-size: 12px;
    }
    .contact-detect-card {
        min-height: 480px;
    }
    .found-card-body {
        padding: 24px 20px 28px;
    }
    .found-card-buttons-row {
        flex-direction: column;
        width: 100%;
    }
    .btn-call-direct, .btn-email-direct {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
    .success-hero-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    .success-actions-row {
        flex-direction: column;
        width: 100%;
    }
    .btn-reset-form, .success-actions-row .btn-call-direct {
        width: 100%;
        text-align: center;
        justify-content: center;
        box-sizing: border-box;
    }
    .success-phone-wrap {
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: stretch;
        position: relative;
    }
    .owner-speech-bubble {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        margin-top: 14px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .owner-speech-bubble:not(.is-visible) {
        display: none;
    }
    .owner-speech-bubble.is-visible {
        display: block;
        animation: ownerBubblePopIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }
    .bubble-arrow-top {
        right: auto;
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
    }
}

/* ========================================================
   MODERN BESPOKE PRIVACY POLICY MODAL (RODO 2026)
   Apple Glassmorphism • Fluid Spring Physics • Accessible
   ======================================================== */
.privacy-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.privacy-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.privacy-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(14, 2, 7, 0.78);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.privacy-modal-wrapper {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 820px;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
}

.privacy-modal-container {
    background: linear-gradient(180deg, rgba(38, 8, 20, 0.97) 0%, rgba(20, 4, 11, 0.98) 100%);
    border: 1px solid rgba(247, 236, 221, 0.16);
    border-radius: 28px;
    box-shadow: 0 35px 90px -15px rgba(0, 0, 0, 0.85),
                0 0 60px -10px rgba(226, 141, 112, 0.15),
                inset 0 1px 0 rgba(247, 236, 221, 0.25);
    color: #F7ECDD;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 64px);
    overflow: hidden;
    transform: translateY(30px) scale(0.96);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

.privacy-modal-overlay.is-open .privacy-modal-container {
    transform: translateY(0) scale(1);
}

.privacy-modal-overlay.is-closing .privacy-modal-container {
    transform: translateY(20px) scale(0.96);
    opacity: 0;
}

.privacy-modal-drag-bar {
    width: 44px;
    height: 5px;
    background: rgba(247, 236, 221, 0.22);
    border-radius: 999px;
    margin: 12px auto 0 auto;
    display: none;
}

@media (max-width: 768px) {
    .privacy-modal-drag-bar {
        display: block;
    }
}

/* Modal Header */
.privacy-modal-header {
    padding: 28px 36px 20px 36px;
    border-bottom: 1px solid rgba(247, 236, 221, 0.08);
    position: relative;
    flex-shrink: 0;
}

.privacy-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(226, 141, 112, 0.12);
    border: 1px solid rgba(226, 141, 112, 0.3);
    border-radius: 9999px;
    padding: 4px 12px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #E28D70;
    margin-bottom: 10px;
}

.privacy-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #E28D70;
    box-shadow: 0 0 8px #E28D70;
    animation: privacyDotGlow 2s infinite ease-in-out;
}

@keyframes privacyDotGlow {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
}

.privacy-modal-title {
    font-family: 'Space Grotesk', 'Bricolage Grotesque', sans-serif;
    font-size: 1.85rem;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: -0.025em;
    margin: 0 0 6px 0;
    line-height: 1.15;
}

.privacy-modal-subtitle {
    font-size: 0.84rem;
    color: rgba(247, 236, 221, 0.6);
    margin: 0;
}

.privacy-close-btn {
    position: absolute;
    top: 26px;
    right: 28px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(247, 236, 221, 0.08);
    border: 1px solid rgba(247, 236, 221, 0.16);
    color: #F7ECDD;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    outline: none;
}

.privacy-close-btn:hover {
    background: rgba(247, 236, 221, 0.18);
    color: #FFFFFF;
    transform: scale(1.06);
    border-color: rgba(247, 236, 221, 0.3);
}

.privacy-close-btn:active {
    transform: scale(0.95);
}

.privacy-esc-pill {
    position: absolute;
    bottom: -18px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: rgba(247, 236, 221, 0.4);
    pointer-events: none;
}

@media (max-width: 600px) {
    .privacy-esc-pill {
        display: none;
    }
}

/* Modal Body */
.privacy-modal-body {
    padding: 28px 36px 24px 36px;
    overflow-y: auto;
    flex-grow: 1;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.privacy-modal-body::-webkit-scrollbar {
    width: 6px;
}

.privacy-modal-body::-webkit-scrollbar-track {
    background: rgba(247, 236, 221, 0.03);
    border-radius: 8px;
}

.privacy-modal-body::-webkit-scrollbar-thumb {
    background: rgba(247, 236, 221, 0.2);
    border-radius: 8px;
}

.privacy-modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(226, 141, 112, 0.5);
}

.privacy-intro-box {
    background: rgba(247, 236, 221, 0.05);
    border: 1px solid rgba(247, 236, 221, 0.1);
    border-left: 3px solid #E28D70;
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 28px;
}

.privacy-intro-box p {
    font-size: 0.98rem;
    line-height: 1.65;
    color: #FFF9F1;
    margin: 0;
    font-weight: 500;
}

/* Privacy Section */
.privacy-section {
    position: relative;
    padding-left: 48px;
    margin-bottom: 28px;
}

.privacy-sec-number {
    position: absolute;
    left: 0;
    top: 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    color: #E28D70;
    opacity: 0.85;
    line-height: 1.2;
}

.privacy-sec-content h3 {
    font-family: 'Space Grotesk', 'Bricolage Grotesque', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 10px 0;
    line-height: 1.35;
}

.privacy-sec-content p {
    font-size: 0.92rem;
    line-height: 1.68;
    color: rgba(247, 236, 221, 0.85);
    margin: 0 0 10px 0;
}

.privacy-sec-content p:last-child {
    margin-bottom: 0;
}

.privacy-sec-content strong {
    color: #FFFFFF;
    font-weight: 600;
}

.privacy-email-link {
    color: #E28D70;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.privacy-email-link:hover {
    color: #FFAE93;
}

.privacy-list {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.privacy-list li {
    font-size: 0.91rem;
    line-height: 1.62;
    color: rgba(247, 236, 221, 0.85);
    position: relative;
    padding-left: 20px;
}

.privacy-list li::before {
    content: '•';
    position: absolute;
    left: 4px;
    top: 0;
    color: #E28D70;
    font-size: 1.1rem;
}

.privacy-list-check {
    list-style: none;
    padding: 0;
    margin: 10px 0 14px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
}

@media (max-width: 640px) {
    .privacy-list-check {
        grid-template-columns: 1fr;
    }
}

.privacy-list-check li {
    font-size: 0.9rem;
    color: rgba(247, 236, 221, 0.9);
    position: relative;
    padding-left: 22px;
    line-height: 1.45;
}

.privacy-list-check li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: #4ade80;
    font-weight: 800;
    font-size: 0.85rem;
}

.privacy-notice-box {
    background: rgba(226, 141, 112, 0.08);
    border: 1px solid rgba(226, 141, 112, 0.22);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 0.87rem !important;
    line-height: 1.55 !important;
    color: #F7ECDD !important;
    margin: 14px 0 !important;
}

/* Modal Footer */
.privacy-modal-footer {
    padding: 18px 36px 24px 36px;
    border-top: 1px solid rgba(247, 236, 221, 0.08);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    background: rgba(22, 4, 12, 0.8);
    flex-shrink: 0;
}

.privacy-confirm-btn {
    background: linear-gradient(135deg, #E28D70 0%, #C8694B 100%);
    color: #120309;
    border: none;
    border-radius: 9999px;
    padding: 11px 28px;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(226, 141, 112, 0.35);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.privacy-confirm-btn:hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 8px 24px rgba(226, 141, 112, 0.55);
    filter: brightness(1.06);
}

.privacy-confirm-btn:active {
    transform: translateY(1px) scale(0.98);
}

@media (max-width: 768px) {
    .privacy-modal-overlay {
        padding: 10px;
        align-items: flex-end;
    }
    .privacy-modal-container {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        max-height: 90vh;
    }
    .privacy-modal-header {
        padding: 18px 20px 14px 20px;
    }
    .privacy-modal-title {
        font-size: 1.45rem;
    }
    .privacy-close-btn {
        top: 16px;
        right: 16px;
        width: 36px;
        height: 36px;
    }
    .privacy-modal-body {
        padding: 20px 20px 16px 20px;
    }
    .privacy-section {
        padding-left: 36px;
    }
    .privacy-sec-number {
        font-size: 1rem;
    }
    .privacy-sec-content h3 {
        font-size: 1.05rem;
    }
    .privacy-modal-footer {
        padding: 14px 20px 20px 20px;
        justify-content: stretch;
    }
    .privacy-confirm-btn {
        width: 100%;
        text-align: center;
        padding: 13px 20px;
    }
}