/* ==========================================================================
SECTION LAYOUTS & HEADERS - DANIEL WOŹNIAK
========================================================================== */
.section-main-title {
font-size: 2.5rem !important;
font-weight: var(--font-weight-bold) !important;
line-height: var(--line-height-tight) !important;
letter-spacing: -0.02em !important;
color: var(--text-primary-light) !important;
margin: 0 !important;
font-family: var(--font-family-base) !important;
display: block !important;
opacity: 1 !important;
visibility: visible !important;
ext-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
position: relative !important;
z-index: var(--z-elevated) !important;
}
.section-secondary-text {
font-size: clamp(1rem, 2.2vw, 1.1rem) !important;
font-weight: var(--font-weight-medium) !important;
line-height: var(--line-height-normal) !important;
color: var(--text-primary-light) !important;
margin: 0 !important;
display: block !important;
opacity: 1 !important;
visibility: visible !important;
ext-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
position: relative !important;
z-index: var(--z-elevated) !important;
}
.section-secondary-subtext {
font-size: clamp(0.85rem, 2vw, 0.95rem) !important;
font-weight: var(--font-weight-normal) !important;
line-height: var(--line-height-relaxed) !important;
color: var(--text-light) !important;
margin: 0 !important;
opacity: 1 !important;
display: block !important;
visibility: visible !important;
ext-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
position: relative !important;
z-index: var(--z-elevated) !important;
}
.pillars-intro,
.pillars-title,
.pillars-subtitle,
.mapa-title,
.mapa-subtitle,
.ai-title,
.ai-subtitle,
.ceo-problems-title,
.ceo-problems-subtitle,
.video-title,
.video-subtitle {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.section-dark {
background: var(--primary-dark);
color: var(--text-primary-light);
}
.section-light {
background: var(--white);
color: var(--text-primary-dark);
}
.section-gradient {
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-medium) 100%);
color: var(--text-primary-light);
}
section {
position: relative;
padding: 3rem 0;
isolation: isolate;
}
section:nth-child(even):not(.hero):not(.newsletter-section) {
background: linear-gradient(135deg,
rgba(0, 122, 204, 0.03) 0%,
rgba(10, 25, 47, 0.8) 50%,
rgba(247, 147, 30, 0.02) 100%
);
border-top: 1px solid rgba(0, 122, 204, 0.1);
border-bottom: 1px solid rgba(247, 147, 30, 0.1);
}
section:nth-child(odd):not(.hero):not(.newsletter-section) {
background: linear-gradient(45deg,
rgba(247, 147, 30, 0.02) 0%,
rgba(15, 30, 52, 0.9) 50%,
rgba(0, 122, 204, 0.03) 100%
);
border-top: 1px solid rgba(247, 147, 30, 0.1);
border-bottom: 1px solid rgba(0, 122, 204, 0.1);
}
.newsletter-section {
background: linear-gradient(135deg,
rgba(0, 122, 204, 0.05) 0%,
rgba(8, 20, 35, 0.95) 100%
);
border: 1px solid rgba(0, 122, 204, 0.2);
}
.ai-circle {
background: linear-gradient(45deg,
rgba(247, 147, 30, 0.04) 0%,
rgba(12, 22, 40, 0.95) 100%
);
border: 1px solid rgba(247, 147, 30, 0.15);
}
.booking-section {
background: linear-gradient(135deg,
rgba(0, 122, 204, 0.06) 0%,
rgba(5, 15, 30, 0.98) 100%
);
border: 2px solid rgba(0, 122, 204, 0.3);
}
section::after {
display: none;
left: 50%;
ransform: translateX(-50%);
width: 120px;
height: 4px;
background: linear-gradient(90deg, transparent, rgba(0,122,204,0.8), rgba(247,147,30,0.6), transparent);
opacity: 1;
border-radius: 2px;
animation: dividerPulse 3s ease-in-out infinite;
z-index: 10;
}
section.reveal {
opacity: 0;
ransform: translateY(30px);
ransition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
section.reveal.animate-in {
opacity: 1;
ransform: translateY(0);
}
@keyframes dividerPulse {
0%, 100% {
opacity: 0.8;
ransform: translateX(-50%) scaleX(1);
}
50% {
opacity: 1;
ransform: translateX(-50%) scaleX(1.2);
}
}
.hero::after,
.footer::after,
.domkniecie::after {
display: none;
}
.section-divider {
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent-blue), transparent);
margin: var(--space-2xl) 0;
opacity: 0.3;
}
.section-divider-animated {
animation: dividerPulse 3s ease-in-out infinite;
}
.section-padding-sm {
padding: var(--space-xl) 0;
}
.section-padding-md {
padding: var(--space-xl) 0;
}
.section-padding-lg {
padding: var(--space-2xl) 0;
}
.section-overlay {
position: relative;
}
.section-overlay::before {
content: '';
position: absolute;
op: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
z-index: var(--z-negative);
}
.section-overlay > * {
position: relative;
z-index: var(--z-normal);
}
.progress-bar {
position: fixed;
op: 0;
left: 0;
width: 100%;
height: 3px;
background: var(--primary-medium);
z-index: var(--z-sticky);
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--accent-blue), var(--accent-blue-light));
width: 0%;
ransition: width 0.3s ease;
}
@media (max-width: 768px) {
.section-main-title {
font-size: clamp(2rem, 8vw, 3rem) !important;
ext-align: center;
}
.section-secondary-text {
font-size: clamp(1rem, 4vw, 1.2rem) !important;
ext-align: center;
}
.section-secondary-subtext {
font-size: clamp(0.9rem, 3.5vw, 1rem) !important;
ext-align: center;
}
.section-padding-lg {
padding: var(--space-2xl) 0;
}
}
@media (max-width: 480px) {
.section-main-title {
font-size: clamp(1.5rem, 10vw, 2.5rem) !important;
}
.section-secondary-text {
font-size: clamp(0.95rem, 5vw, 1.1rem) !important;
}
.section-secondary-subtext {
font-size: clamp(0.85rem, 4vw, 0.95rem) !important;
}
}/* ==========================================================================
GRID SYSTEM & CONTAINERS - DANIEL WOŹNIAK
========================================================================== */
.container {
width: 100%;
max-width: var(--container-width);
margin: 0 auto;
padding: 0 var(--container-padding);
}
.container-fluid {
width: 100%;
padding: 0 var(--container-padding);
}
.container-narrow {
max-width: 1000px;
}
.container-wide {
max-width: 1600px;
}
.section {
padding: var(--space-4xl) 0;
ransition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.section-sm {
padding: var(--space-2xl) 0;
}
.section-lg {
padding: var(--space-4xl) 0;
}
.grid {
display: grid;
gap: var(--space-lg);
}
.grid-cols-1 { grid-template-columns: 1fr; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
.section-header-layout {
display: grid !important;
grid-template-columns: 1.2fr 0.8fr !important;
gap: var(--space-3xl) !important;
align-items: end !important;
margin-bottom: var(--space-2xl) !important;
opacity: 1 !important;
visibility: visible !important;
position: relative !important;
z-index: var(--z-elevated) !important;
}
.section-header-main {
position: relative !important;
opacity: 1 !important;
visibility: visible !important;
z-index: var(--z-elevated) !important;
}
.section-header-secondary {
display: flex !important;
flex-direction: column !important;
gap: var(--space-lg) !important;
padding-top: 8rem !important;
opacity: 1 !important;
visibility: visible !important;
position: relative !important;
z-index: var(--z-elevated) !important;
}
.flex {
display: flex;
}
.flex-col {
flex-direction: column;
}
.flex-row {
flex-direction: row;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-nowrap {
flex-wrap: nowrap;
}
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.self-start { align-self: flex-start; }
.self-center { align-self: center; }
.self-end { align-self: flex-end; }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }
.gap-2xl { gap: var(--space-2xl); }
.gap-3xl { gap: var(--space-3xl); }
@media (max-width: 768px) {
.container {
padding: 0 var(--space-md);
}
.section {
padding: var(--space-2xl) 0;
}
.section-header-layout {
grid-template-columns: 1fr !important;
gap: var(--space-xl) !important;
ext-align: center !important;
}
.grid-cols-2,
.grid-cols-3,
.grid-cols-4,
.grid-cols-6 {
grid-template-columns: 1fr;
}
.grid-cols-2.mobile-2 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.container {
padding: 0 var(--space-sm);
}
.section {
padding: var(--space-xl) 0;
}
.gap-lg, .gap-xl, .gap-2xl, .gap-3xl {
gap: var(--space-md);
}
}/* ==========================================================================
CSS VARIABLES - DANIEL WOŹNIAK DESIGN SYSTEM
========================================================================== */
:root {
--primary-dark: #0a192f;
--primary-medium: #172a45;
--primary-light: #233554;
--accent-blue: #007acc;
--accent-blue-light: #4f96d8;
--accent-blue-dark: #005a99;
--accent-orange: #f7931e;
--accent-orange-light: #ffb366;
--text-primary: #ffffff;
--text-primary-light: #ffffff;
--text-primary-dark: #0a192f;
--text-secondary: #8892b0;
--text-muted: #495670;
--text-light: #cbd5e1;
--white: #ffffff;
--surface-card: rgba(255, 255, 255, 0.05);
--surface-card-hover: rgba(255, 255, 255, 0.1);
--surface-dark: #0f1419;
--surface-overlay: rgba(0, 0, 0, 0.4);
--card-border: rgba(255, 255, 255, 0.1);
--card-border-hover: rgba(0, 122, 204, 0.3);
--space-xs: 0.25rem; 
--space-sm: 0.5rem; 
--space-md: 1rem; 
--space-lg: 1.5rem; 
--space-xl: 2rem; 
--space-2xl: 3rem; 
--space-3xl: 4rem; 
--space-4xl: 6rem; 
--font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-family-mono: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-tight: 1.2;
--line-height-normal: 1.4;
--line-height-relaxed: 1.6;
--border-radius-sm: 4px;
--border-radius-md: 8px;
--border-radius-lg: 12px;
--border-radius-xl: 16px;
--border-radius-full: 9999px;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 8px 32px rgba(0, 0, 0, 0.3);
--shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.4);
--shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.5);
--shadow-glow-blue: 0 16px 48px rgba(0, 122, 204, 0.2);
--shadow-glow-orange: 0 16px 48px rgba(247, 147, 30, 0.2);
--transition-fast: 0.15s ease;
--transition-normal: 0.3s ease;
--transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
--z-negative: -1;
--z-normal: 1;
--z-elevated: 10;
--z-sticky: 100;
--z-modal: 1000;
--z-tooltip: 1100;
--container-width: 1200px;
--container-width-narrow: 1000px;
--container-width-wide: 1600px;
--container-padding: 2rem;
--breakpoint-sm: 480px;
--breakpoint-md: 768px;
--breakpoint-lg: 1024px;
--breakpoint-xl: 1280px;
--glass-bg: rgba(255, 255, 255, 0.05);
--glass-border: rgba(255, 255, 255, 0.1);
--glass-blur: blur(10px);
--grid-gap: var(--space-lg);
--grid-gap-sm: var(--space-md);
--grid-gap-lg: var(--space-2xl);
}
@media (prefers-color-scheme: dark) {
:root {
--shadow-md: 0 8px 32px rgba(0, 0, 0, 0.6);
--shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.7);
}
}
@media (prefers-reduced-motion: reduce) {
:root {
--transition-fast: none;
--transition-normal: none;
--transition-slow: none;
}
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
ransition-duration: 0.01ms !important;
}
}/* ==========================================================================
CRITICAL CSS - ABOVE THE FOLD STYLES
Load immediately, other styles can be deferred
========================================================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
line-height: 1.6;
color: #ffffff;
background: #0a192f;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
:root {
--primary-dark: #0a192f;
--primary-medium: #172a45;
--accent-blue: #007acc;
--accent-blue-light: #4f96d8;
--white: #ffffff;
--text-primary: #ffffff;
--text-primary-light: #ffffff;
--text-muted: #495670;
--text-light: #cbd5e1;
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;
--space-3xl: 4rem;
--space-4xl: 6rem;
--container-width: 1200px;
--container-padding: 2rem;
--border-radius-lg: 12px;
--transition-normal: 0.3s ease;
}
.container {
width: 100%;
max-width: var(--container-width);
margin: 0 auto;
padding: 0 var(--container-padding);
}
.hero-section {
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-medium) 100%);
padding: 8rem 0 4rem 0;
position: relative;
overflow: hidden;
}
.hero-content {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 2rem;
align-items: center;
max-width: 1200px;
margin: 0 auto;
}
.hero-left h1 {
font-size: clamp(2rem, 5.5vw, 3.2rem);
font-weight: 600;
color: white;
margin-bottom: 1rem;
line-height: 1.2;
letter-spacing: -0.01em;
}
@media (max-width: 768px) {
.container {
padding: 0 var(--space-md);
}
.hero-content {
grid-template-columns: 1fr;
ext-align: center;
gap: var(--space-xl);
}
.hero-left h1 {
font-size: clamp(1.8rem, 8vw, 2.5rem);
}
}
.wf-loading body {
visibility: hidden;
}
.wf-active body,
.wf-inactive body {
visibility: visible;
}/* ==========================================================================
GRID SYSTEM & CONTAINERS - DANIEL WOŹNIAK
========================================================================== */
.container {
width: 100%;
max-width: var(--container-width);
margin: 0 auto;
padding: 0 var(--container-padding);
}
.container-fluid {
width: 100%;
padding: 0 var(--container-padding);
}
.container-narrow {
max-width: 1000px;
}
.container-wide {
max-width: 1600px;
}
.section {
padding: var(--space-4xl) 0;
ransition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.section-sm {
padding: var(--space-2xl) 0;
}
.section-lg {
padding: var(--space-4xl) 0;
}
.grid {
display: grid;
gap: var(--space-lg);
}
.grid-cols-1 { grid-template-columns: 1fr; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
.section-header-layout {
display: grid !important;
grid-template-columns: 1.2fr 0.8fr !important;
grid-template-rows: auto auto !important;
gap: var(--space-3xl) !important;
align-items: start !important;
margin-bottom: var(--space-2xl) !important;
opacity: 1 !important;
visibility: visible !important;
position: relative !important;
z-index: var(--z-elevated) !important;
}
.section-header-main {
grid-column: 1 !important;
grid-row: 1 !important;
position: relative !important;
opacity: 1 !important;
visibility: visible !important;
z-index: var(--z-elevated) !important;
}
.section-header-secondary {
grid-column: 2 !important;
grid-row: 2 !important;
display: flex !important;
flex-direction: column !important;
gap: var(--space-lg) !important;
opacity: 1 !important;
visibility: visible !important;
position: relative !important;
z-index: var(--z-elevated) !important;
}
.flex {
display: flex;
}
.flex-col {
flex-direction: column;
}
.flex-row {
flex-direction: row;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-nowrap {
flex-wrap: nowrap;
}
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.self-start { align-self: flex-start; }
.self-center { align-self: center; }
.self-end { align-self: flex-end; }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }
.gap-2xl { gap: var(--space-2xl); }
.gap-3xl { gap: var(--space-3xl); }
@media (max-width: 768px) {
.container {
padding: 0 var(--space-md);
}
.section {
padding: var(--space-2xl) 0;
}
.section-header-layout {
grid-template-columns: 1fr !important;
gap: var(--space-xl) !important;
ext-align: center !important;
}
.grid-cols-2,
.grid-cols-3,
.grid-cols-4,
.grid-cols-6 {
grid-template-columns: 1fr;
}
.grid-cols-2.mobile-2 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.container {
padding: 0 var(--space-sm);
}
.section {
padding: var(--space-xl) 0;
}
.gap-lg, .gap-xl, .gap-2xl, .gap-3xl {
gap: var(--space-md);
}
}/* ==========================================================================
BUTTON COMPONENTS - DANIEL WOŹNIAK SHARED SYSTEM
========================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: var(--space-md) var(--space-xl);
border: none;
border-radius: var(--border-radius-lg);
font-family: var(--font-family-base);
font-weight: var(--font-weight-semibold);
font-size: 1rem;
line-height: 1;
ext-decoration: none;
cursor: pointer;
ransition: var(--transition-normal);
position: relative;
overflow: hidden;
white-space: nowrap;
}
.btn:disabled {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
.btn-primary {
background: var(--accent-blue);
color: var(--white);
box-shadow: var(--shadow-md);
}
.btn-primary:hover {
background: var(--accent-blue-light);
ransform: translateY(-2px);
box-shadow: var(--shadow-glow-blue);
}
.btn-primary:active {
ransform: translateY(0);
}
.btn-secondary {
background: transparent;
color: var(--accent-blue);
border: 2px solid var(--accent-blue);
}
.btn-secondary:hover {
background: var(--accent-blue);
color: var(--white);
ransform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn-ghost {
background: transparent;
color: var(--text-light);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.btn-ghost:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.3);
color: var(--white);
}
.btn-glass {
background: var(--glass-bg);
color: var(--white);
border: 1px solid var(--glass-border);
backdrop-filter: var(--glass-blur);
}
.btn-glass:hover {
background: var(--surface-card-hover);
border-color: var(--card-border-hover);
ransform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn-orange {
background: var(--accent-orange);
color: var(--white);
box-shadow: var(--shadow-md);
}
.btn-orange:hover {
background: var(--accent-orange-light);
ransform: translateY(-2px);
box-shadow: var(--shadow-glow-orange);
}
.btn-sm {
padding: var(--space-sm) var(--space-lg);
font-size: 0.875rem;
}
.btn-lg {
padding: var(--space-lg) var(--space-2xl);
font-size: 1.125rem;
}
.btn-xl {
padding: var(--space-xl) var(--space-3xl);
font-size: 1.25rem;
font-weight: var(--font-weight-bold);
}
.btn-icon {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
}
.btn-icon-only {
padding: var(--space-md);
aspect-ratio: 1;
}
.btn-group {
display: inline-flex;
border-radius: var(--border-radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.btn-group .btn {
border-radius: 0;
border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.btn-group .btn:first-child {
border-left: none;
border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
}
.btn-group .btn:last-child {
border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
}
.btn-loading {
position: relative;
color: transparent;
}
.btn-loading::after {
content: '';
position: absolute;
op: 50%;
left: 50%;
ransform: translate(-50%, -50%);
width: 20px;
height: 20px;
border: 2px solid transparent;
border-top: 2px solid currentColor;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
o {
ransform: translate(-50%, -50%) rotate(360deg);
}
}
.btn-cta {
position: relative;
background: linear-gradient(135deg, var(--accent-blue), var(--accent-blue-light));
color: var(--white);
font-weight: var(--font-weight-bold);
ext-transform: uppercase;
letter-spacing: 0.05em;
overflow: hidden;
}
.btn-cta::before {
content: '';
position: absolute;
op: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
ransition: var(--transition-slow);
}
.btn-cta:hover::before {
left: 100%;
}
.btn-cta:hover {
ransform: translateY(-3px) scale(1.02);
box-shadow: var(--shadow-xl);
}
@media (max-width: 768px) {
.btn {
padding: var(--space-sm) var(--space-lg);
font-size: 0.9rem;
}
.btn-lg {
padding: var(--space-md) var(--space-xl);
font-size: 1rem;
}
.btn-xl {
padding: var(--space-lg) var(--space-2xl);
font-size: 1.125rem;
}
}
@media (max-width: 480px) {
.btn-group {
flex-direction: column;
}
.btn-group .btn {
border-left: none;
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0;
}
.btn-group .btn:first-child {
border-top: none;
border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}
.btn-group .btn:last-child {
border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
}
}/* ==========================================================================
CARD COMPONENTS - DANIEL WOŹNIAK
========================================================================== */
.section-title {
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 800;
color: var(--text-primary-light);
ext-align: center;
margin-bottom: 3rem;
background: linear-gradient(135deg, var(--accent-blue), var(--accent-gold));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.pillars-section {
padding: 5rem 0;
background: linear-gradient(135deg,
rgba(10, 25, 47, 0.98) 0%,
rgba(26, 54, 93, 0.95) 50%,
rgba(10, 25, 47, 0.98) 100%
);
position: relative;
overflow: hidden;
}
.pillars-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin: 0 auto;
max-width: 1400px;
}
.card {
background: var(--card-bg);
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
overflow: hidden;
ransition: var(--transition-normal);
}
.card:hover {
ransform: translateY(-4px);
box-shadow: var(--shadow-xl);
}
.card-header {
padding: var(--space-lg);
border-bottom: 1px solid var(--card-border);
}
.card-body {
padding: var(--space-lg);
}
.card-footer {
padding: var(--space-lg);
border-top: 1px solid var(--card-border);
background: rgba(0, 0, 0, 0.02);
}
.pillar-card {
background: transparent;
perspective: 1000px;
min-height: 400px;
border: 1px solid var(--card-border);
border-radius: var(--border-radius-lg);
ransition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.pillar-card-inner {
position: relative;
width: 100%;
height: 100%;
ext-align: center;
ransition: transform 0.8s;
ransform-style: preserve-3d;
}
.pillar-card:hover .pillar-card-inner {
ransform: rotateY(180deg);
}
.pillar-card-front,
.pillar-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding: var(--space-lg);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: var(--border-radius-lg);
ext-align: center;
}
.pillar-card-front {
padding-top: 2.5rem;
}
.pillar-card-back {
padding-top: 1.5rem;
ransform: rotateY(180deg);
background: var(--primary-dark);
color: var(--white);
}
.pillar-number {
font-size: 3rem;
font-weight: var(--font-weight-bold);
color: var(--accent-blue);
margin-bottom: var(--space-md);
font-family: var(--font-family-mono);
}
.pillar-title {
font-size: clamp(1.1rem, 2.8vw, 1.3rem);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-md);
line-height: var(--line-height-tight);
color: var(--text-primary-light);
ext-align: center;
min-height: 3.2rem;
display: flex;
align-items: center;
justify-content: center;
}
.pillar-desc {
font-size: clamp(0.85rem, 1.8vw, 0.95rem);
line-height: var(--line-height-relaxed);
color: var(--text-light);
ext-align: center;
margin-top: auto;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.pillar-card-back .pillar-desc {
color: var(--text-light);
}
.pillar-image {
width: 100%;
height: 220px;
object-fit: cover;
object-position: center top;
border-radius: var(--border-radius-md);
margin-top: var(--space-sm);
border: 2px solid rgba(0, 122, 204, 0.3);
ransition: var(--transition-normal);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.pillar-card:hover .pillar-image {
border-color: rgba(0, 122, 204, 0.6);
ransform: scale(1.05);
box-shadow: 0 8px 25px rgba(0, 122, 204, 0.3);
}
.pillar-card-front::before {
content: '';
position: absolute;
op: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, rgba(0, 122, 204, 0.8) 0%, rgba(247, 147, 30, 0.8) 100%);
border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
animation: pillarPulse 3s ease-in-out infinite;
}
.pillar-card-back::before {
content: '';
position: absolute;
op: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, rgba(247, 147, 30, 0.8) 0%, rgba(0, 122, 204, 0.8) 100%);
border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
animation: pillarPulse 3s ease-in-out infinite;
}
.pillar-card:hover .pillar-card-front::before,
.pillar-card:hover .pillar-card-back::before {
height: 4px;
box-shadow: 0 0 15px rgba(247, 147, 30, 0.4);
}
@keyframes pillarPulse {
0%, 100% {
opacity: 0.6;
ransform: scaleX(1);
}
50% {
opacity: 1;
ransform: scaleX(1.02);
}
}
.pillar-card {
border: 1px solid rgba(247, 147, 30, 0.1);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 8px rgba(247, 147, 30, 0.05);
ransition: all var(--transition-normal);
}
.pillar-card:hover {
border-color: rgba(247, 147, 30, 0.3);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(247, 147, 30, 0.15);
}
.pillar-question {
font-size: clamp(1rem, 2.5vw, 1.2rem);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-sm);
line-height: var(--line-height-tight);
color: var(--text-primary-light);
font-style: italic;
ext-align: center;
}
.insight-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--border-radius-lg);
padding: var(--space-xl);
ext-align: center;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
ransition: var(--transition-normal);
}
.insight-card:hover {
border-color: rgba(0, 122, 204, 0.3);
ransform: translateY(-8px);
box-shadow: 0 16px 48px rgba(0, 122, 204, 0.2);
}
.insight-icon {
font-size: 3rem;
margin-bottom: var(--space-md);
display: block;
}
.insight-title {
font-size: clamp(1.125rem, 2.5vw, 1.25rem);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-md);
color: var(--text-primary-light);
}
.insight-desc {
font-size: clamp(0.875rem, 2vw, 1rem);
line-height: var(--line-height-relaxed);
color: var(--text-light);
}
.insight-item {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--border-radius-lg);
padding: var(--space-xl);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
ransition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
border-left: 6px solid var(--accent-blue);
position: relative;
opacity: 0;
ransform: translateY(30px);
animation: staggeredReveal 0.8s ease-out forwards;
}
.insight-item:nth-child(1) { animation-delay: 0.1s; }
.insight-item:nth-child(2) { animation-delay: 0.2s; }
.insight-item:nth-child(3) { animation-delay: 0.3s; }
.insight-item:nth-child(4) { animation-delay: 0.4s; }
.insight-item:nth-child(5) { animation-delay: 0.5s; }
.insight-item:nth-child(6) { animation-delay: 0.6s; }
@keyframes staggeredReveal {
o {
opacity: 1;
ransform: translateY(0);
}
}
.insight-item::before {
content: '';
position: absolute;
op: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
border-radius: var(--border-radius-lg);
opacity: 0;
ransition: opacity 0.3s ease;
pointer-events: none;
z-index: -1;
}
.insight-item:hover::before {
opacity: 1;
}
.insight-item:hover {
ransform: translateY(-4px);
box-shadow: 0 16px 48px rgba(0, 122, 204, 0.2);
border-left-color: var(--accent-gold);
}
.insight-header {
margin-bottom: var(--space-lg);
}
.insight-tag {
display: inline-block;
background: var(--accent-blue);
color: var(--white);
padding: var(--space-xs) var(--space-sm);
border-radius: var(--border-radius-sm);
font-size: 0.75rem;
font-weight: var(--font-weight-semibold);
ext-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--space-md);
}
.insight-quote {
font-size: clamp(1rem, 2.5vw, 1.125rem);
font-style: italic;
color: var(--text-muted);
margin-bottom: var(--space-md);
}
.insight-quote::before {
content: '"';
color: var(--accent-blue);
font-size: 1.5em;
margin-right: 0.25em;
}
.insight-quote::after {
content: '"';
color: var(--accent-blue);
font-size: 1.5em;
margin-left: 0.25em;
}
.insight-response h4 {
color: var(--primary-dark);
font-size: clamp(1.125rem, 2.5vw, 1.25rem);
margin-bottom: var(--space-sm);
}
.insight-response p {
color: var(--text-muted);
line-height: var(--line-height-relaxed);
}
.insight-response strong {
color: var(--accent-blue);
font-weight: var(--font-weight-semibold);
}
.vip-black-card {
background: linear-gradient(135deg, #000000 0%, #1a1a2e 100%);
border: 1px solid #333;
border-radius: var(--border-radius-xl);
min-height: 280px;
position: relative;
overflow: hidden;
cursor: pointer;
ransition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
box-shadow: 0 0 30px rgba(212, 175, 55, 0.1);
animation: premiumGlow 3s ease-in-out infinite alternate;
}
@keyframes premiumGlow {
0% {
box-shadow:
0 0 30px rgba(212, 175, 55, 0.1),
0 0 60px rgba(212, 175, 55, 0.05);
}
100% {
box-shadow:
0 0 50px rgba(212, 175, 55, 0.2),
0 0 100px rgba(212, 175, 55, 0.1);
}
}
.vip-black-card::before {
content: '';
position: absolute;
op: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, #d4af37 0%, #ffd700 100%);
opacity: 0.3;
}
.vip-black-card:hover {
ransform: translateY(-8px) scale(1.02);
border-color: #d4af37;
box-shadow:
0 25px 80px rgba(212, 175, 55, 0.2),
0 0 50px rgba(212, 175, 55, 0.1);
}
.black-card-front {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
min-height: 280px;
opacity: 1;
ransition: opacity 0.6s ease;
}
.vip-black-card:hover .black-card-front {
opacity: 0;
}
.vip-minimal {
display: flex;
gap: 1rem;
margin-bottom: 2rem;
}
.vip-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #d4af37;
opacity: 0.6;
animation: vipPulse 2s ease-in-out infinite;
}
.vip-dot:nth-child(2) {
animation-delay: 0.3s;
}
.vip-dot:nth-child(3) {
animation-delay: 0.6s;
}
.mystery-text {
font-size: 0.9rem;
color: #888;
font-weight: 500;
letter-spacing: 0.1em;
ext-align: center;
}
.black-card-reveal {
position: absolute;
op: 0;
left: 0;
right: 0;
bottom: 0;
padding: 3rem 2rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 0;
ransform: translateY(15px);
ransition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.vip-black-card:hover .black-card-reveal {
opacity: 1;
ransform: translateY(0);
}
.vip-content {
ext-align: center;
margin-bottom: 3rem;
}
.vip-main-question {
font-size: clamp(1.6rem, 3vw, 2rem);
font-weight: 700;
color: #ffffff;
margin: 0 0 1.5rem 0;
line-height: 1.2;
letter-spacing: -0.02em;
}
.vip-separator {
width: 60px;
height: 2px;
background: linear-gradient(90deg, #d4af37 0%, #ffd700 100%);
margin: 0 auto 1.5rem auto;
border-radius: 1px;
}
.vip-challenge-text {
font-size: 1rem;
color: #d4af37;
line-height: 1.5;
font-weight: 500;
margin: 0;
letter-spacing: 0.01em;
}
.vip-cta-section {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.vip-cta-button {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 1.2rem 2rem;
background: linear-gradient(135deg, #d4af37 0%, #ffd700 100%);
color: #000;
ext-decoration: none;
border-radius: 8px;
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 0.03em;
ransition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
box-shadow: 0 8px 30px rgba(212, 175, 55, 0.25);
}
.vip-cta-button:hover {
ransform: translateY(-2px);
box-shadow: 0 12px 40px rgba(212, 175, 55, 0.4);
background: linear-gradient(135deg, #ffd700 0%, #d4af37 100%);
}
.vip-cta-text {
font-size: inherit;
font-weight: inherit;
}
.vip-qualifier {
font-size: 0.8rem;
color: #999;
font-weight: 500;
margin: 0;
opacity: 0.8;
ext-align: center;
}
@keyframes vipPulse {
0%, 100% {
opacity: 0.4;
ransform: scale(1);
}
50% {
opacity: 1;
ransform: scale(1.2);
}
}
@media (max-width: 768px) {
.vip-black-card {
min-height: 250px;
}
.black-card-front {
min-height: 250px;
}
.vip-question {
font-size: 1.3rem;
}
.mystery-text {
font-size: 0.8rem;
}
}
/* ==========================================================================
LIFESTYLE SECTION - FLIP CARDS BASED ON PILLARS
========================================================================== */
.lifestyle-section {
padding: 5rem 0;
background: linear-gradient(135deg,
rgba(10, 25, 47, 0.98) 0%,
rgba(26, 54, 93, 0.95) 50%,
rgba(10, 25, 47, 0.98) 100%
);
}
.lifestyle-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin: 0 auto;
max-width: 1400px;
}
.lifestyle-card {
background: transparent;
perspective: 1000px;
min-height: 350px;
border-radius: var(--border-radius-lg);
ransition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.lifestyle-card-inner {
position: relative;
width: 100%;
height: 100%;
ext-align: center;
ransition: transform 0.8s;
ransform-style: preserve-3d;
}
.lifestyle-card:hover .lifestyle-card-inner {
ransform: rotateY(180deg);
}
.lifestyle-card-front,
.lifestyle-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: var(--space-xl);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: var(--border-radius-lg);
ext-align: center;
}
.lifestyle-card-back {
ransform: rotateY(180deg);
background: var(--primary-dark);
color: var(--white);
justify-content: space-between;
padding-top: 2rem;
padding-bottom: 2rem;
}
.lifestyle-number {
font-size: 2rem;
font-weight: 900;
color: var(--accent-blue);
margin-bottom: 1rem;
font-family: var(--font-family-mono);
}
.lifestyle-card-title {
font-size: clamp(0.9rem, 1.8vw, 1rem);
font-weight: 700;
margin-bottom: 1.5rem;
line-height: 1.35;
color: var(--text-primary-light);
ext-align: center;
max-width: 280px;
margin-left: auto;
margin-right: auto;
word-break: normal;
overflow-wrap: break-word;
hyphens: manual;
letter-spacing: 0;
ext-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
white-space: normal;
display: block;
padding: 0 0.5rem;
}
.lifestyle-icon {
font-size: 3rem;
margin-top: auto;
}
.lifestyle-back-title {
font-size: 1.2rem;
font-weight: 700;
color: var(--accent-gold);
margin-bottom: 1rem;
ext-align: center;
}
.lifestyle-desc {
font-size: 0.9rem;
line-height: 1.5;
color: var(--text-light);
ext-align: center;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.lifestyle-detail {
font-size: 0.8rem;
color: var(--accent-blue);
font-weight: 600;
ext-align: center;
padding: 0.5rem 1rem;
background: rgba(0, 122, 204, 0.1);
border-radius: var(--border-radius-md);
border: 1px solid rgba(0, 122, 204, 0.2);
}
@media (max-width: 768px) {
.lifestyle-grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
.lifestyle-card {
min-height: 320px;
}
.lifestyle-card-title {
font-size: 0.9rem;
max-width: 260px;
line-height: 1.3;
margin-bottom: 1rem;
letter-spacing: 0;
padding: 0 0.25rem;
}
.lifestyle-number {
font-size: 1.5rem;
}
}
@media (max-width: 480px) {
.lifestyle-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.lifestyle-card {
min-height: 300px;
}
.lifestyle-card-title {
font-size: 0.85rem;
max-width: 240px;
font-weight: 700;
line-height: 1.25;
letter-spacing: 0;
padding: 0 0.5rem;
}
}
/* ==========================================================================
GAMECHANGERY SECTION - ACHIEVEMENT CARDS
========================================================================== */
.gamechangery-section {
padding: 5rem 0;
background: linear-gradient(135deg,
rgba(26, 54, 93, 0.95) 0%,
rgba(10, 25, 47, 0.98) 50%,
rgba(26, 54, 93, 0.95) 100%
);
}
.gamechangery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin: 0 auto;
max-width: 1200px;
}
.gamechanger-card {
background: transparent;
border: none;
border-radius: var(--border-radius-lg);
padding: 0;
ext-align: center;
position: relative;
height: 300px;
perspective: 1000px;
}
.gamechanger-card-inner {
position: relative;
width: 100%;
height: 100%;
ext-align: center;
ransition: transform 0.6s;
ransform-style: preserve-3d;
}
.gamechanger-card:hover .gamechanger-card-inner {
ransform: rotateY(180deg);
}
.gamechanger-card-front, .gamechanger-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: var(--border-radius-lg);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
padding: var(--space-xl);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.gamechanger-card-front::before {
content: '';
position: absolute;
op: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent-blue) 0%, var(--accent-gold) 100%);
opacity: 0.6;
border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}
.gamechanger-card-back {
background: rgba(247, 147, 30, 0.1);
border: 1px solid rgba(247, 147, 30, 0.3);
ransform: rotateY(180deg);
}
.gamechanger-card-back::before {
content: '';
position: absolute;
op: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent-gold) 0%, var(--accent-blue) 100%);
opacity: 0.8;
border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}
.gamechanger-icon {
font-size: 3rem;
margin-bottom: 1rem;
}
.gamechanger-number {
position: absolute;
op: 1rem;
right: 1rem;
font-size: 1rem;
font-weight: 900;
color: var(--accent-blue);
background: rgba(0, 122, 204, 0.1);
padding: 0.5rem;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-family-mono);
}
.gamechanger-title {
font-size: clamp(1.2rem, 2.5vw, 1.4rem);
font-weight: 700;
color: var(--text-primary-light);
margin-bottom: 1rem;
line-height: 1.2;
}
.gamechanger-desc {
font-size: 0.95rem;
line-height: 1.7;
color: var(--text-light);
ext-align: left;
font-weight: 400;
letter-spacing: 0.02em;
padding: 0.5rem 0;
border-left: 3px solid rgba(0, 122, 204, 0.2);
padding-left: 1rem;
margin-top: 0.5rem;
background: rgba(0, 122, 204, 0.02);
border-radius: 0 8px 8px 0;
}
.gamechanger-back-title {
font-size: 1.3rem;
font-weight: 700;
color: var(--accent-gold);
margin-bottom: 1rem;
ext-align: center;
}
.gamechanger-back-desc {
color: var(--text-primary-light);
font-size: 1rem;
line-height: 1.5;
margin-bottom: 1.5rem;
ext-align: center;
}
.gamechanger-benefit {
display: flex;
align-items: center;
justify-content: flex-start;
ext-align: left;
margin-bottom: 0.8rem;
font-size: 0.9rem;
color: var(--text-primary-light);
font-weight: 500;
width: 100%;
}
/* ==========================================================================
CEO CIRCLE CTA SECTION - AI ASSISTANTS + LIVE CHAT
========================================================================== */
.ceo-circle-cta {
padding: 5rem 0;
background: linear-gradient(135deg,
rgba(10, 25, 47, 0.98) 0%,
rgba(0, 122, 204, 0.05) 50%,
rgba(10, 25, 47, 0.98) 100%
);
position: relative;
overflow: hidden;
}
.circle-layout {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 4rem;
align-items: stretch;
max-width: 1200px;
margin: 0 auto;
}
.circle-value {
display: flex;
flex-direction: column;
justify-content: center;
}
.circle-header {
margin-bottom: 2rem;
}
.circle-title {
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 900;
color: var(--text-primary-light);
margin-bottom: 1rem;
background: linear-gradient(135deg, var(--accent-blue), var(--accent-gold));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.circle-subtitle {
font-size: clamp(1rem, 2.2vw, 1.2rem);
color: var(--text-secondary);
margin-bottom: 1rem;
line-height: 1.4;
}
.circle-timing {
font-size: clamp(0.9rem, 2vw, 1rem);
color: var(--accent-gold);
font-weight: 600;
font-style: italic;
}
.circle-benefits {
margin-top: 2rem;
}
.benefit-item {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1.5rem;
padding: 1rem;
background: rgba(255, 255, 255, 0.02);
border-radius: var(--border-radius-md);
border-left: 3px solid rgba(0, 122, 204, 0.3);
ransition: all 0.3s ease;
}
.benefit-item:hover {
background: rgba(255, 255, 255, 0.05);
border-left-color: var(--accent-gold);
ransform: translateX(4px);
}
.benefit-icon {
font-size: 1.5rem;
flex-shrink: 0;
}
.benefit-text {
font-size: clamp(0.9rem, 1.8vw, 1rem);
color: var(--text-light);
line-height: 1.5;
font-weight: 500;
}
.ai-assistants-grid {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 2rem;
}
.assistant-card {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--border-radius-lg);
backdrop-filter: blur(10px);
ransition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
position: relative;
overflow: hidden;
}
.assistant-card::after {
content: '';
position: absolute;
op: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(0, 122, 204, 0.1), transparent);
ransition: left 0.6s ease;
}
.assistant-card:hover::after,
.assistant-card.active::after {
left: 100%;
}
.assistant-card:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(0, 122, 204, 0.3);
ransform: translateY(-2px);
box-shadow: 0 8px 32px rgba(0, 122, 204, 0.15);
}
.assistant-card.active {
background: rgba(0, 122, 204, 0.1);
border-color: rgba(0, 122, 204, 0.4);
ransform: translateY(-2px);
box-shadow: 0 8px 32px rgba(0, 122, 204, 0.2);
}
.assistant-card.active::before {
content: '';
position: absolute;
left: 0;
op: 0;
bottom: 0;
width: 4px;
background: var(--accent-blue);
border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
}
.assistant-icon {
font-size: 2.5rem;
flex-shrink: 0;
}
.assistant-info {
flex: 1;
}
.assistant-name {
font-size: 1.1rem;
font-weight: 700;
color: var(--text-primary-light);
margin-bottom: 0.5rem;
line-height: 1.3;
}
.assistant-desc {
font-size: 0.9rem;
color: var(--text-secondary);
line-height: 1.4;
margin-bottom: 0.8rem;
}
.assistant-tag {
font-size: 0.75rem;
color: var(--accent-blue);
font-weight: 600;
ext-transform: uppercase;
letter-spacing: 0.05em;
background: rgba(0, 122, 204, 0.1);
padding: 0.25rem 0.75rem;
border-radius: 20px;
display: inline-block;
}
.ai-chat-container {
display: flex;
align-items: stretch;
height: 100%;
}
.ai-chat-interface {
width: 100%;
height: 100%;
min-height: 600px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--border-radius-xl);
backdrop-filter: blur(20px);
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
position: relative;
}
.chat-header {
padding: 1.5rem;
background: rgba(0, 122, 204, 0.08);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
position: relative;
}
.chat-header::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg,
var(--accent-blue) 0%,
ransparent 20%,
var(--accent-blue) 40%,
ransparent 60%,
var(--accent-blue) 80%,
ransparent 100%);
background-size: 200% 100%;
animation: voiceWave 2s ease-in-out infinite;
}
@keyframes voiceWave {
0%, 100% { background-position: 200% 0; opacity: 0.3; }
50% { background-position: -200% 0; opacity: 1; }
}
.active-assistant {
display: flex;
align-items: center;
gap: 1rem;
}
.assistant-avatar {
width: 48px;
height: 48px;
background: rgba(0, 122, 204, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
border: 2px solid rgba(0, 122, 204, 0.3);
}
.assistant-name-active {
font-size: 1.1rem;
font-weight: 700;
color: var(--text-primary-light);
margin-bottom: 0.25rem;
}
.assistant-status {
font-size: 0.8rem;
color: var(--accent-blue);
font-weight: 500;
}
.assistant-status::before {
content: '● ';
animation: none !important;
color: #4ade80;
}
.chat-messages {
flex: 1;
padding: 1.5rem 1.5rem 120px 1.5rem;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(0, 122, 204, 0.3) transparent;
}
.message {
display: flex;
gap: 1rem;
animation: messageSlideIn 0.5s ease-out;
}
@keyframes messageSlideIn {
from {
opacity: 0;
ransform: translateY(20px);
}
o {
opacity: 1;
ransform: translateY(0);
}
}
.message.typing .message-content::after {
content: '|';
color: var(--accent-blue);
animation: typingCursor 1s infinite;
margin-left: 2px;
}
@keyframes typingCursor {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
margin-bottom: 1.5rem;
}
.ai-message .message-avatar {
width: 32px;
height: 32px;
background: rgba(0, 122, 204, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
flex-shrink: 0;
}
.message-content {
flex: 1;
background: rgba(255, 255, 255, 0.05);
padding: 1rem 1.5rem;
border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) var(--border-radius-lg);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.message-content p {
color: var(--text-light);
font-size: 0.9rem;
line-height: 1.5;
margin-bottom: 1rem;
}
.message-content p:last-child {
margin-bottom: 0;
}
.message-content ul {
color: var(--text-light);
font-size: 0.9rem;
line-height: 1.5;
margin: 0.5rem 0;
padding-left: 0;
}
.message-content li {
margin-bottom: 0.5rem;
}
.message-content strong {
color: var(--text-primary-light);
font-weight: 700;
}
.chat-input-container {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 1.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.05);
background: rgba(255, 255, 255, 0.02);
border-radius: 0 0 var(--border-radius-xl) var(--border-radius-xl);
}
.scroll-to-bottom {
position: absolute;
bottom: 140px;
right: 20px;
width: 40px;
height: 40px;
background: rgba(0, 122, 204, 0.9);
border: none;
border-radius: 50%;
color: white;
cursor: pointer;
opacity: 0;
ransform: translateY(20px);
ransition: all 0.3s ease;
font-size: 16px;
z-index: 10;
}
.scroll-to-bottom.visible {
opacity: 1;
ransform: translateY(0);
}
.scroll-to-bottom:hover {
background: rgba(0, 122, 204, 1);
ransform: scale(1.1);
}
.chat-input-wrapper {
display: flex;
gap: 0.5rem;
align-items: center;
}
.chat-input {
flex: 1;
padding: 1rem 1.5rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--border-radius-lg);
color: var(--text-light);
font-size: 0.9rem;
backdrop-filter: blur(10px);
ransition: all 0.3s ease;
}
.chat-input:focus {
outline: none;
border-color: var(--accent-blue);
box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.2);
background: rgba(255, 255, 255, 0.08);
}
.chat-input::placeholder {
color: var(--text-secondary);
}
.send-button {
width: 48px;
height: 48px;
background: var(--accent-blue);
border: none;
border-radius: var(--border-radius-lg);
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
ransition: all 0.3s ease;
}
.send-button:hover {
background: #1e40af;
ransform: translateY(-1px);
box-shadow: 0 4px 16px rgba(0, 122, 204, 0.4);
}
.chat-disclaimer {
margin-top: 0.75rem;
ext-align: center;
}
.chat-disclaimer p {
font-size: 0.75rem;
color: var(--text-secondary);
font-style: italic;
}
@media (max-width: 768px) {
.circle-layout {
grid-template-columns: 1fr;
gap: 2rem;
}
.ai-assistants-grid {
margin-top: 1.5rem;
}
.assistant-card {
padding: 1rem;
gap: 0.75rem;
}
.assistant-icon {
font-size: 2rem;
}
.ai-chat-interface {
height: 500px;
}
.chat-header {
padding: 1rem;
}
.assistant-avatar {
width: 40px;
height: 40px;
font-size: 1.2rem;
}
.chat-messages {
padding: 1rem;
}
.message-content {
padding: 0.75rem 1rem;
}
.chat-input-container {
padding: 1rem;
}
}
.ai-interface-layout {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 3rem;
align-items: stretch;
margin-top: 3rem;
position: relative;
overflow: hidden;
}
.ai-interface-layout::before {
content: '';
position: absolute;
op: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 30%, rgba(0, 122, 204, 0.02) 1px, transparent 1px),
radial-gradient(circle at 60% 70%, rgba(247, 147, 30, 0.02) 1px, transparent 1px),
radial-gradient(circle at 80% 20%, rgba(0, 122, 204, 0.01) 1px, transparent 1px);
background-size: 50px 50px, 80px 80px, 120px 120px;
animation: particleFloat 20s linear infinite;
pointer-events: none;
z-index: 1;
}
@keyframes particleFloat {
0% { transform: translateY(0) translateX(0); }
100% { transform: translateY(-100px) translateX(50px); }
}
.ai-assistants-side {
display: flex;
align-items: stretch;
height: 100%;
position: relative;
z-index: 2;
}
.ai-assistants-side .newsletter-core {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
ext-align: left;
}
@media (max-width: 768px) {
.ai-interface-layout {
grid-template-columns: 1fr;
gap: 2rem;
}
}
.concierge-card {
width: 100%;
background: rgba(255, 255, 255, 0.05);
border: 2px solid rgba(0, 122, 204, 0.2);
border-radius: var(--border-radius-xl);
padding: 0;
backdrop-filter: blur(20px);
overflow: hidden;
}
.concierge-scarcity-box {
background: rgba(247, 147, 30, 0.1);
border: 2px solid rgba(247, 147, 30, 0.2);
border-radius: var(--border-radius-lg);
padding: 1.5rem;
margin: 2rem 2rem 0 2rem;
ext-align: center;
position: relative;
}
.concierge-scarcity-box::before {
content: '';
position: absolute;
op: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent-gold) 0%, #ff6b35 100%);
animation: scarcityPulse 2s ease-in-out infinite;
}
.scarcity-title {
font-size: 1.1rem;
font-weight: 700;
color: var(--text-primary-light);
margin-bottom: 1rem;
}
.scarcity-counter {
display: flex;
justify-content: center;
gap: 1rem;
}
.counter-item {
display: flex;
flex-direction: column;
align-items: center;
min-width: 60px;
}
.counter-number {
font-size: 1.8rem;
font-weight: 900;
color: var(--accent-gold);
font-family: var(--font-family-mono);
background: rgba(247, 147, 30, 0.1);
padding: 0.5rem;
border-radius: 8px;
min-width: 50px;
display: inline-block;
}
.counter-label {
font-size: 0.7rem;
font-weight: 600;
color: var(--text-secondary);
ext-transform: uppercase;
letter-spacing: 0.05em;
margin-top: 0.25rem;
}
.concierge-form {
padding: 2rem;
}
.concierge-form .form-group {
margin-bottom: 1.5rem;
}
.concierge-form .form-input {
width: 100%;
padding: 1rem;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--border-radius-md);
background: rgba(255, 255, 255, 0.05);
color: var(--text-primary-light);
font-size: 0.9rem;
ransition: all 0.3s ease;
}
.concierge-form .form-input:focus {
outline: none;
border-color: var(--accent-gold);
box-shadow: 0 0 0 2px rgba(247, 147, 30, 0.2);
background: rgba(255, 255, 255, 0.08);
}
.concierge-form label {
display: block;
font-size: 0.85rem;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 0.5rem;
}
.concierge-submit {
width: 100%;
padding: 1.2rem;
background: linear-gradient(135deg, var(--accent-gold) 0%, #ff6b35 100%);
color: #000;
border: none;
border-radius: var(--border-radius-lg);
font-weight: 800;
font-size: 1rem;
cursor: pointer;
ransition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1rem;
}
.concierge-submit:hover {
ransform: translateY(-2px);
box-shadow: 0 12px 35px rgba(247, 147, 30, 0.4);
background: linear-gradient(135deg, #ff6b35 0%, var(--accent-gold) 100%);
}
.concierge-urgency {
ext-align: center;
padding: 1rem;
background: rgba(255, 107, 107, 0.05);
border: 1px solid rgba(255, 107, 107, 0.1);
border-radius: var(--border-radius-md);
}
.concierge-urgency p {
font-size: 0.85rem;
color: #ff6b6b;
font-weight: 600;
margin: 0;
font-style: italic;
}
@keyframes scarcityPulse {
0%, 100% {
opacity: 0.6;
ransform: scaleX(1);
}
50% {
opacity: 1;
ransform: scaleX(1.02);
}
}
@media (max-width: 768px) {
.lifestyle-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.gamechangery-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.lifestyle-card:hover .lifestyle-card-inner {
ransform: none;
}
.lifestyle-card-back {
position: static;
ransform: none;
margin-top: 1rem;
background: var(--primary-light);
}
.circle-layout {
grid-template-columns: 1fr;
gap: 2rem;
margin: 0 1rem;
}
.concierge-scarcity-box {
margin: 1.5rem 1.5rem 0 1.5rem;
}
.scarcity-counter {
gap: 0.5rem;
}
.counter-number {
font-size: 1.4rem;
padding: 0.3rem;
min-width: 40px;
}
}
.timeline-item {
position: relative;
padding-left: var(--space-2xl);
margin-bottom: var(--space-2xl);
}
.timeline-badge {
position: absolute;
left: 0;
op: 0;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
background: var(--white);
border: 3px solid var(--accent-blue);
box-shadow: var(--shadow-md);
}
.timeline-card {
background: var(--white);
border-radius: var(--border-radius-lg);
padding: var(--space-xl);
box-shadow: var(--shadow-md);
ransition: var(--transition-normal);
}
.timeline-card:hover {
ransform: translateX(8px);
box-shadow: var(--shadow-lg);
}
.timeline-title {
font-size: clamp(1.25rem, 3vw, 1.5rem);
font-weight: var(--font-weight-semibold);
color: var(--primary-dark);
margin-bottom: var(--space-md);
}
.timeline-meta {
font-size: clamp(0.875rem, 2vw, 1rem);
line-height: var(--line-height-relaxed);
color: var(--text-muted);
margin-bottom: var(--space-md);
}
.timeline-meta strong {
color: var(--primary-dark);
font-weight: var(--font-weight-semibold);
}
.timeline-thanks {
font-style: italic;
color: var(--accent-blue);
font-weight: var(--font-weight-medium);
}
@media (max-width: 768px) {
.pillar-card,
.insight-card,
.insight-item {
margin-bottom: var(--space-lg);
}
.pillar-card:hover .pillar-card-inner {
ransform: none;
}
.pillar-card-back {
position: static;
ransform: none;
margin-top: var(--space-md);
background: var(--primary-light);
}
.timeline-item {
padding-left: var(--space-lg);
}
.timeline-badge {
width: 30px;
height: 30px;
font-size: 1rem;
}
}
.card-compact {
padding: var(--space-md);
}
.card-spacious {
padding: var(--space-2xl);
}
.card-borderless {
box-shadow: none;
border: none;
}
.card-outlined {
box-shadow: none;
border: 2px solid var(--card-border);
}
.card-elevated {
box-shadow: var(--shadow-xl);
}/* ==========================================================================
UTILITY CLASSES - DANIEL WOŹNIAK SHARED SYSTEM
========================================================================== */
.m-0 { margin: 0; }
.m-xs { margin: var(--space-xs); }
.m-sm { margin: var(--space-sm); }
.m-md { margin: var(--space-md); }
.m-lg { margin: var(--space-lg); }
.m-xl { margin: var(--space-xl); }
.m-2xl { margin: var(--space-2xl); }
.m-3xl { margin: var(--space-3xl); }
.m-auto { margin: auto; }
.mt-0 { margin-top: 0; }
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mt-3xl { margin-top: var(--space-3xl); }
.mb-0 { margin-bottom: 0; }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }
.mb-3xl { margin-bottom: var(--space-3xl); }
.ml-0 { margin-left: 0; }
.ml-xs { margin-left: var(--space-xs); }
.ml-sm { margin-left: var(--space-sm); }
.ml-md { margin-left: var(--space-md); }
.ml-lg { margin-left: var(--space-lg); }
.ml-xl { margin-left: var(--space-xl); }
.ml-auto { margin-left: auto; }
.mr-0 { margin-right: 0; }
.mr-xs { margin-right: var(--space-xs); }
.mr-sm { margin-right: var(--space-sm); }
.mr-md { margin-right: var(--space-md); }
.mr-lg { margin-right: var(--space-lg); }
.mr-xl { margin-right: var(--space-xl); }
.mr-auto { margin-right: auto; }
.p-0 { padding: 0; }
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }
.p-2xl { padding: var(--space-2xl); }
.p-3xl { padding: var(--space-3xl); }
.pt-0 { padding-top: 0; }
.pt-xs { padding-top: var(--space-xs); }
.pt-sm { padding-top: var(--space-sm); }
.pt-md { padding-top: var(--space-md); }
.pt-lg { padding-top: var(--space-lg); }
.pt-xl { padding-top: var(--space-xl); }
.pt-2xl { padding-top: var(--space-2xl); }
.pt-3xl { padding-top: var(--space-3xl); }
.pb-0 { padding-bottom: 0; }
.pb-xs { padding-bottom: var(--space-xs); }
.pb-sm { padding-bottom: var(--space-sm); }
.pb-md { padding-bottom: var(--space-md); }
.pb-lg { padding-bottom: var(--space-lg); }
.pb-xl { padding-bottom: var(--space-xl); }
.pb-2xl { padding-bottom: var(--space-2xl); }
.pb-3xl { padding-bottom: var(--space-3xl); }
.pl-0 { padding-left: 0; }
.pl-xs { padding-left: var(--space-xs); }
.pl-sm { padding-left: var(--space-sm); }
.pl-md { padding-left: var(--space-md); }
.pl-lg { padding-left: var(--space-lg); }
.pl-xl { padding-left: var(--space-xl); }
.pr-0 { padding-right: 0; }
.pr-xs { padding-right: var(--space-xs); }
.pr-sm { padding-right: var(--space-sm); }
.pr-md { padding-right: var(--space-md); }
.pr-lg { padding-right: var(--space-lg); }
.pr-xl { padding-right: var(--space-xl); }
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }
.text-5xl { font-size: 3rem; }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.leading-tight { line-height: var(--line-height-tight); }
.leading-normal { line-height: var(--line-height-normal); }
.leading-relaxed { line-height: var(--line-height-relaxed); }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.text-primary { color: var(--text-primary); }
.text-primary-light { color: var(--text-primary-light); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-light { color: var(--text-light); }
.text-white { color: var(--white); }
.text-blue { color: var(--accent-blue); }
.text-orange { color: var(--accent-orange); }
.bg-primary { background-color: var(--primary-dark); }
.bg-primary-medium { background-color: var(--primary-medium); }
.bg-blue { background-color: var(--accent-blue); }
.bg-orange { background-color: var(--accent-orange); }
.bg-white { background-color: var(--white); }
.bg-transparent { background-color: transparent; }
.border { border: 1px solid var(--card-border); }
.border-t { border-top: 1px solid var(--card-border); }
.border-b { border-bottom: 1px solid var(--card-border); }
.border-l { border-left: 1px solid var(--card-border); }
.border-r { border-right: 1px solid var(--card-border); }
.border-none { border: none; }
.rounded { border-radius: var(--border-radius-md); }
.rounded-sm { border-radius: var(--border-radius-sm); }
.rounded-lg { border-radius: var(--border-radius-lg); }
.rounded-xl { border-radius: var(--border-radius-xl); }
.rounded-full { border-radius: var(--border-radius-full); }
.shadow-none { box-shadow: none; }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }
.z-negative { z-index: var(--z-negative); }
.z-normal { z-index: var(--z-normal); }
.z-elevated { z-index: var(--z-elevated); }
.z-sticky { z-index: var(--z-sticky); }
.z-modal { z-index: var(--z-modal); }
.w-full { width: 100%; }
.w-auto { width: auto; }
.w-fit { width: fit-content; }
.max-w-full { max-width: 100%; }
.max-w-screen { max-width: 100vw; }
.h-full { height: 100%; }
.h-screen { height: 100vh; }
.h-auto { height: auto; }
.min-h-screen { min-height: 100vh; }
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-scroll { overflow: scroll; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-hidden { overflow-y: hidden; }
.transition { transition: var(--transition-normal); }
.transition-fast { transition: var(--transition-fast); }
.transition-slow { transition: var(--transition-slow); }
.transition-none { transition: none; }
.transform { transform: translateZ(0); } 
.scale-95 { transform: scale(0.95); }
.scale-100 { transform: scale(1); }
.scale-105 { transform: scale(1.05); }
.scale-110 { transform: scale(1.1); }
.hover\:scale-105:hover { transform: scale(1.05); }
.hover\:scale-110:hover { transform: scale(1.1); }
.hover\:opacity-75:hover { opacity: 0.75; }
.hover\:opacity-100:hover { opacity: 1; }
.focus\:outline-none:focus { outline: none; }
.focus\:ring:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 122, 204, 0.3);
}
.glass {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
backdrop-filter: var(--glass-blur);
}
.glass-hover:hover {
background: var(--surface-card-hover);
border-color: var(--card-border-hover);
}
@media (max-width: 768px) {
.md\:hidden { display: none; }
.md\:block { display: block; }
.md\:flex { display: flex; }
.md\:grid { display: grid; }
.md\:text-center { text-align: center; }
.md\:text-left { text-align: left; }
}
@media (max-width: 480px) {
.sm\:hidden { display: none; }
.sm\:block { display: block; }
.sm\:flex { display: flex; }
.sm\:text-center { text-align: center; }
.sm\:p-sm { padding: var(--space-sm); }
.sm\:px-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
}/* ==========================================================================
BASE STYLES - DANIEL WOŹNIAK SHARED SYSTEM
========================================================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 14px;
line-height: 1.6;
color: var(--text-primary);
background: var(--primary-dark);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tight);
color: var(--text-primary-light);
letter-spacing: -0.02em;
font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
ext-rendering: optimizeLegibility;
}
h1 {
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: var(--font-weight-bold);
letter-spacing: -0.03em;
line-height: 1.1;
ext-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
h2 {
font-size: clamp(1.6rem, 4vw, 2.8rem);
font-weight: var(--font-weight-bold);
letter-spacing: -0.025em;
line-height: 1.15;
margin-bottom: 1.5rem;
}
h3 {
font-size: clamp(1.2rem, 2.5vw, 1.8rem);
font-weight: var(--font-weight-semibold);
letter-spacing: -0.02em;
line-height: 1.25;
margin-bottom: 1rem;
}
p {
margin-bottom: var(--space-md);
color: var(--text-muted);
font-size: clamp(0.9rem, 2.2vw, 1rem);
line-height: 1.7;
font-feature-settings: 'kern' 1;
hyphens: auto;
word-break: break-word;
}
.large-text {
font-size: clamp(1rem, 2.5vw, 1.2rem);
line-height: 1.6;
font-weight: var(--font-weight-medium);
}
.small-text {
font-size: clamp(0.8rem, 1.8vw, 0.9rem);
line-height: 1.5;
opacity: 0.8;
}
.text-gradient {
background: linear-gradient(135deg, var(--accent-blue), var(--accent-orange));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: var(--font-weight-bold);
}
a {
color: var(--accent-blue);
ext-decoration: none;
ransition: var(--transition-normal);
}
a:hover {
color: var(--accent-blue-light);
}
button:focus,
a:focus,
input:focus,
extarea:focus {
outline: 2px solid var(--accent-blue);
outline-offset: 2px;
}
* {
ransition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
::selection {
background: var(--accent-blue);
color: var(--white);
}
::-moz-selection {
background: var(--accent-blue);
color: var(--white);
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--primary-medium);
}
::-webkit-scrollbar-thumb {
background: var(--accent-blue);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--accent-blue-light);
}
img {
max-width: 100%;
height: auto;
display: block;
}
.loading {
opacity: 0.7;
pointer-events: none;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}/* ==========================================================================
NEWSLETTER MINIMAL - CLEAN & FOCUSED
========================================================================== */
.newsletter-minimal {
padding: 4rem 0;
background: linear-gradient(135deg,
rgba(10, 25, 47, 0.95) 0%,
rgba(0, 122, 204, 0.05) 50%,
rgba(10, 25, 47, 0.95) 100%
);
position: relative;
overflow: hidden;
}
.newsletter-minimal::before {
content: '';
position: absolute;
op: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(ellipse at center,
rgba(0, 122, 204, 0.03) 0%,
ransparent 70%
);
pointer-events: none;
}
.newsletter-centered {
display: flex;
justify-content: center;
align-items: center;
min-height: 400px;
}
.newsletter-core {
max-width: 600px;
ext-align: center;
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--border-radius-xl);
padding: 3rem 2rem;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
}
.newsletter-core::before {
content: '';
position: absolute;
op: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
var(--accent-blue) 0%,
var(--accent-gold) 100%
);
}
.newsletter-title {
font-size: clamp(2rem, 4vw, 2.5rem);
font-weight: 900;
color: #ffffff !important;
margin-bottom: 0.5rem;
ext-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
background: none !important;
-webkit-background-clip: initial !important;
-webkit-text-fill-color: #ffffff !important;
background-clip: initial !important;
}
.newsletter-tagline {
font-size: 1.1rem;
color: var(--text-secondary);
margin-bottom: 2rem;
line-height: 1.5;
}
.newsletter-highlight {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-bottom: 2.5rem;
padding: 1rem 1.5rem;
background: rgba(0, 122, 204, 0.1);
border: 1px solid rgba(0, 122, 204, 0.2);
border-radius: var(--border-radius-lg);
}
.highlight-icon {
font-size: 1.5rem;
}
.highlight-text {
font-size: 0.95rem;
color: var(--text-primary-light);
font-weight: 500;
line-height: 1.4;
}
.newsletter-form-minimal {
margin-bottom: 2rem;
}
.form-row {
display: grid;
grid-template-columns: 70fr 30fr auto;
gap: 0.5rem;
margin-bottom: 1rem;
}
.newsletter-input {
padding: 1rem;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--border-radius-md);
background: rgba(255, 255, 255, 0.05);
color: var(--text-primary-light);
font-size: 0.9rem;
backdrop-filter: blur(10px);
ransition: all 0.3s ease;
}
.newsletter-input:focus {
outline: none;
border-color: var(--accent-blue);
box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.2);
background: rgba(255, 255, 255, 0.08);
}
.newsletter-input::placeholder {
color: var(--text-secondary);
}
.newsletter-btn {
padding: 1rem 2rem;
background: linear-gradient(135deg, var(--accent-blue) 0%, #1e40af 100%);
color: white;
border: none;
border-radius: var(--border-radius-md);
font-weight: 700;
ext-transform: uppercase;
letter-spacing: 0.05em;
cursor: pointer;
ransition: all 0.3s ease;
font-size: 0.9rem;
white-space: nowrap;
}
.newsletter-btn:hover {
ransform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0, 122, 204, 0.3);
background: linear-gradient(135deg, #1e40af 0%, var(--accent-blue) 100%);
}
.newsletter-consent {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
cursor: pointer;
font-size: 0.8rem;
color: var(--text-secondary);
}
.newsletter-consent input[type="checkbox"] {
width: 16px;
height: 16px;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 3px;
background: rgba(255, 255, 255, 0.05);
cursor: pointer;
}
.newsletter-consent input[type="checkbox"]:checked {
background: var(--accent-blue);
border-color: var(--accent-blue);
}
.consent-text {
line-height: 1.3;
}
.newsletter-countdown-mini {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
padding: 1rem;
background: rgba(255, 255, 255, 0.02);
border-radius: var(--border-radius-md);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.countdown-text {
font-size: 0.9rem;
color: var(--text-secondary);
font-weight: 500;
}
.countdown-compact {
display: flex;
gap: 0.5rem;
}
.time-unit {
font-size: 1rem;
font-weight: 700;
color: var(--accent-blue);
padding: 0.25rem 0.5rem;
background: rgba(0, 122, 204, 0.1);
border-radius: 4px;
min-width: 40px;
ext-align: center;
}
.newsletter-core:hover {
border-color: rgba(0, 122, 204, 0.2);
box-shadow: 0 25px 70px rgba(0, 122, 204, 0.1);
}
@media (max-width: 768px) {
.newsletter-core {
margin: 0 1rem;
padding: 2rem 1.5rem;
}
.form-row {
grid-template-columns: 1fr;
gap: 1rem;
}
.newsletter-highlight {
flex-direction: column;
gap: 0.5rem;
ext-align: center;
}
.highlight-text {
font-size: 0.9rem;
}
.newsletter-countdown-mini {
flex-direction: column;
gap: 0.5rem;
}
}
@media (max-width: 480px) {
.newsletter-minimal {
padding: 3rem 0;
}
.newsletter-core {
padding: 1.5rem 1rem;
}
.newsletter-title {
font-size: 1.8rem;
}
.newsletter-tagline {
font-size: 1rem;
}
.newsletter-btn {
padding: 1rem;
font-size: 0.8rem;
}
}/* ==========================================================================
PROOF BY NUMBERS SECTION - DANIEL WOŹNIAK
========================================================================== */
.proof-numbers-section {
padding: 5rem 0;
background: linear-gradient(135deg,
rgba(10, 25, 47, 0.98) 0%,
rgba(26, 54, 93, 0.95) 50%,
rgba(10, 25, 47, 0.98) 100%
);
position: relative;
overflow: hidden;
}
.proof-numbers-section::before {
content: '';
position: absolute;
op: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="numbers-grid" width="15" height="15" patternUnits="userSpaceOnUse"><path d="M 15 0 L 0 0 0 15" fill="none" stroke="rgba(0,122,204,0.03)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23numbers-grid)"/></svg>');
opacity: 0.4;
pointer-events: none;
}
.numbers-showcase {
position: relative;
margin: 4rem auto;
max-width: 800px;
min-height: 600px;
display: flex;
align-items: center;
justify-content: center;
}
.numbers-center {
position: absolute;
op: 50%;
left: 50%;
ransform: translate(-50%, -50%);
z-index: 10;
}
.ceo-photo-container {
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
border: 4px solid var(--accent-blue);
box-shadow: 0 20px 60px rgba(0, 122, 204, 0.3);
position: relative;
}
.ceo-photo {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 20%;
}
.numbers-grid {
position: relative;
width: 100%;
height: 600px;
}
.number-item {
position: absolute;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--border-radius-xl);
padding: 1.5rem;
ext-align: center;
ransition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
min-width: 160px;
opacity: 0;
ransform: translateY(30px) scale(0.8);
}
.number-item.animate {
opacity: 1;
ransform: translateY(0) scale(1);
}
.number-item:nth-child(1) { top: 0; left: 50%; transform: translateX(-50%); }
.number-item:nth-child(2) { top: 15%; right: 0; }
.number-item:nth-child(3) { top: 40%; right: -10%; }
.number-item:nth-child(4) { bottom: 15%; right: 0; }
.number-item:nth-child(5) { bottom: 0; left: 50%; transform: translateX(-50%); }
.number-item:nth-child(6) { bottom: 15%; left: 0; }
.number-item:nth-child(7) { top: 40%; left: -10%; }
.number-item:hover {
ransform: translateY(-5px) scale(1.05);
border-color: var(--accent-blue);
box-shadow: 0 20px 40px rgba(0, 122, 204, 0.2);
}
.number-item.success {
border-left: 4px solid #22c55e;
background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(34, 197, 94, 0.05) 100%);
}
.number-item.failure {
border-left: 4px solid #ef4444;
background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
}
.number-item.triumph {
border-left: 4px solid var(--accent-gold);
background: linear-gradient(135deg, rgba(247, 147, 30, 0.15) 0%, rgba(247, 147, 30, 0.05) 100%);
}
.number-item.highlight {
border-color: var(--accent-gold);
background: rgba(247, 147, 30, 0.08);
}
.number-value {
font-size: clamp(1.4rem, 3vw, 2rem);
font-weight: 900;
color: var(--accent-blue);
display: block;
line-height: 1;
margin-bottom: 0.5rem;
}
.number-item.highlight .number-value {
color: var(--accent-gold);
}
.number-item.success .number-value {
color: #22c55e;
}
.number-item.failure .number-value {
color: #ef4444;
}
.number-item.triumph .number-value {
color: var(--accent-gold);
}
.number-desc {
font-size: 0.8rem;
color: var(--text-secondary);
ext-transform: uppercase;
letter-spacing: 0.05em;
line-height: 1.3;
font-weight: 500;
}
.wave-divider {
position: relative;
width: 100%;
height: 120px;
overflow: hidden;
}
.wave-divider svg {
width: 100%;
height: 100%;
display: block;
}
@media (max-width: 768px) {
.numbers-showcase {
min-height: 500px;
margin: 2rem auto;
}
.ceo-photo-container {
width: 150px;
height: 150px;
}
.numbers-grid {
height: 500px;
}
.number-item {
min-width: 120px;
padding: 1rem;
font-size: 0.9rem;
}
.number-value {
font-size: clamp(1rem, 4vw, 1.4rem);
}
.number-desc {
font-size: 0.7rem;
}
}
@media (max-width: 480px) {
.numbers-showcase {
min-height: 400px;
}
.ceo-photo-container {
width: 120px;
height: 120px;
}
.number-item {
min-width: 100px;
padding: 0.8rem;
}
}/* ==========================================================================
NEWSLETTER HYBRID + PROOF NUMBERS - DANIEL WOŹNIAK (STARA WERSJA)
========================================================================== */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin: 3rem 0;
}
.stat-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--border-radius-xl);
padding: 2rem 1.5rem;
ext-align: center;
ransition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0;
ransform: translateY(30px) scale(0.9);
}
.stat-card.animate {
opacity: 1;
ransform: translateY(0) scale(1);
}
.stat-card:hover {
ransform: translateY(-8px) scale(1.02);
border-color: var(--accent-blue);
box-shadow: 0 20px 40px rgba(0, 122, 204, 0.2);
}
.stat-card.highlight {
border-color: var(--accent-gold);
background: rgba(247, 147, 30, 0.08);
}
.stat-number {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 900;
color: var(--accent-blue);
display: block;
line-height: 1;
margin-bottom: 1rem;
}
.stat-card.highlight .stat-number {
color: var(--accent-gold);
}
.stat-label {
font-size: 0.9rem;
color: var(--text-secondary);
ext-transform: uppercase;
letter-spacing: 0.05em;
line-height: 1.4;
font-weight: 500;
}
.insights-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin: 3rem 0;
}
.insight-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--border-radius-xl);
padding: 2rem;
ext-align: center;
ransition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.insight-card::before {
content: '';
position: absolute;
op: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
ransparent,
rgba(255, 255, 255, 0.1),
ransparent
);
ransition: left 0.5s ease;
}
.insight-card:hover::before {
left: 100%;
}
.insight-card:hover {
ransform: translateY(-5px);
border-color: var(--accent-blue);
box-shadow: 0 15px 35px rgba(0, 122, 204, 0.15);
}
.insight-icon {
font-size: 3rem;
margin-bottom: 1rem;
display: block;
}
.insight-title {
font-size: 1.2rem;
font-weight: 700;
color: var(--accent-blue);
margin-bottom: 1rem;
ext-transform: uppercase;
letter-spacing: 0.05em;
}
.insight-description {
font-size: 0.9rem;
color: var(--text-secondary);
line-height: 1.6;
}
.newsletter-countdown {
ext-align: center;
margin: 4rem 0 2rem;
padding: 2rem;
background: rgba(255, 255, 255, 0.03);
border-radius: var(--border-radius-xl);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.countdown-title {
font-size: 1.5rem;
color: var(--text-primary-light);
margin-bottom: 2rem;
font-weight: 600;
}
.countdown-timer {
display: flex;
justify-content: center;
gap: 2rem;
margin-bottom: 2rem;
}
.countdown-item {
ext-align: center;
}
.countdown-number {
display: block;
font-size: 2.5rem;
font-weight: 900;
color: var(--accent-blue);
line-height: 1;
margin-bottom: 0.5rem;
}
.countdown-label {
font-size: 0.8rem;
color: var(--text-secondary);
ext-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 500;
}
.countdown-bonus {
font-size: 1rem;
color: var(--text-secondary);
font-style: italic;
max-width: 600px;
margin: 0 auto;
line-height: 1.5;
}
@media (max-width: 768px) {
.stats-grid {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.5rem;
}
.insights-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.countdown-timer {
gap: 1rem;
}
.countdown-number {
font-size: 2rem;
}
}
.newsletter-hybrid-layout {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 4rem;
align-items: start;
padding: 3rem 0;
}
.newsletter-left-main {
padding-right: 2rem;
}
.newsletter-title {
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 900;
color: var(--text-primary-light);
margin-bottom: 1rem;
background: linear-gradient(135deg, var(--accent-blue), var(--accent-gold));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.newsletter-intro {
font-size: clamp(1.2rem, 2.5vw, 1.5rem);
color: var(--text-primary-light); 
margin-bottom: 2.5rem;
line-height: 1.5;
}
.journey-storytelling {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
margin: 2.5rem 0;
}
.mini-proof-item {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--border-radius-lg);
padding: 1.5rem 1rem;
ext-align: center;
ransition: var(--transition-normal);
position: relative;
overflow: hidden;
}
.mini-proof-item::before {
content: '';
position: absolute;
op: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, var(--accent-blue), var(--accent-gold));
opacity: 0;
ransition: var(--transition-normal);
}
.mini-proof-item:hover::before {
opacity: 1;
}
.mini-proof-item:hover {
ransform: translateY(-3px);
border-color: rgba(0, 122, 204, 0.3);
box-shadow: 0 10px 30px rgba(0, 122, 204, 0.1);
}
.mini-proof-item.highlight {
border-color: var(--accent-gold);
background: rgba(247, 147, 30, 0.05);
}
.mini-proof-item.highlight::before {
opacity: 1;
background: var(--accent-gold);
}
.mini-number {
font-size: clamp(1.4rem, 3vw, 1.8rem);
font-weight: 800;
color: var(--accent-blue);
display: block;
line-height: 1;
margin-bottom: 0.5rem;
}
.mini-proof-item.highlight .mini-number {
color: var(--accent-gold);
}
.mini-label {
font-size: 0.8rem;
color: var(--text-secondary);
ext-transform: uppercase;
letter-spacing: 0.05em;
line-height: 1.3;
font-weight: 500;
}
.newsletter-bonus {
margin-top: 2rem;
padding: 1.5rem;
background: rgba(0, 122, 204, 0.05);
border-left: 3px solid var(--accent-blue);
border-radius: var(--border-radius-md);
}
.bonus-text {
font-size: 1rem;
color: var(--text-light);
line-height: 1.5;
margin: 0;
}
.newsletter-right-form {
padding-left: 2rem;
border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.newsletter-form-clean {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 1.5rem;
}
.newsletter-btn-huge {
padding: 1.5rem 2.5rem;
background: linear-gradient(135deg, var(--accent-blue), var(--accent-blue-light));
color: var(--white);
border: none;
border-radius: var(--border-radius-md);
font-weight: 700;
font-size: 1.2rem;
cursor: pointer;
ransition: var(--transition-normal);
ext-transform: uppercase;
letter-spacing: 0.05em;
box-shadow: 0 8px 25px rgba(0, 122, 204, 0.3);
}
.newsletter-btn-huge:hover {
ransform: translateY(-3px);
box-shadow: 0 15px 40px rgba(0, 122, 204, 0.4);
background: linear-gradient(135deg, var(--accent-blue-light), var(--accent-blue));
}
.newsletter-form {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 1.5rem;
}
.newsletter-input {
padding: 1rem 1.5rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--border-radius-md);
color: var(--text-primary);
font-size: 1rem;
ransition: var(--transition-normal);
}
.newsletter-input:focus {
outline: none;
border-color: var(--accent-blue);
box-shadow: 0 0 0 3px rgba(0, 122, 204, 0.1);
}
.newsletter-btn {
padding: 1.2rem 2rem;
background: linear-gradient(135deg, var(--accent-blue), var(--accent-blue-light));
color: var(--white);
border: none;
border-radius: var(--border-radius-md);
font-weight: 600;
font-size: 1rem;
cursor: pointer;
ransition: var(--transition-normal);
ext-transform: uppercase;
letter-spacing: 0.05em;
}
.newsletter-btn:hover {
ransform: translateY(-2px);
box-shadow: 0 10px 30px rgba(0, 122, 204, 0.3);
}
.checkbox-container {
display: flex;
align-items: flex-start;
gap: 0.75rem;
margin-bottom: 2rem;
cursor: pointer;
}
.checkbox-text {
font-size: 0.85rem;
color: var(--text-secondary);
line-height: 1.4;
}
.checkbox-text a {
color: var(--accent-blue);
ext-decoration: underline;
}
.newsletter-benefits {
background: rgba(255, 255, 255, 0.02);
border-radius: var(--border-radius-lg);
padding: 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.05);
margin: 2rem 0;
}
.benefits-title {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary-light);
margin-bottom: 1rem;
ext-transform: uppercase;
letter-spacing: 0.05em;
}
.benefits-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0.75rem;
}
.benefit-item {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.5rem;
border-radius: var(--border-radius-sm);
ransition: var(--transition-normal);
}
.benefit-item:hover {
background: rgba(255, 255, 255, 0.03);
}
.benefit-icon {
font-size: 1.2rem;
flex-shrink: 0;
}
.benefit-text {
font-size: 0.9rem;
color: var(--text-secondary);
line-height: 1.4;
font-weight: 500;
}
.supporting-proof-section {
padding: 3rem 0;
background: rgba(255, 255, 255, 0.01);
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.supporting-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
margin-bottom: 3rem;
ext-align: center;
}
.stat-item {
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: var(--border-radius-lg);
padding: 1.5rem 1rem;
ransition: var(--transition-normal);
}
.stat-item:hover {
ransform: translateY(-2px);
border-color: rgba(0, 122, 204, 0.2);
}
.stat-item.highlight {
border-color: var(--accent-gold);
background: rgba(247, 147, 30, 0.03);
}
.stat-number {
font-size: clamp(1.2rem, 2.5vw, 1.6rem);
font-weight: 700;
color: var(--accent-blue);
display: block;
margin-bottom: 0.5rem;
}
.stat-item.highlight .stat-number {
color: var(--accent-gold);
}
.stat-label {
font-size: 0.8rem;
color: var(--text-secondary);
ext-transform: uppercase;
letter-spacing: 0.05em;
line-height: 1.3;
}
.newsletter-benefits-full {
ext-align: center;
}
.benefits-title-center {
font-size: 1.2rem;
font-weight: 600;
color: var(--text-primary-light);
margin-bottom: 2rem;
ext-transform: uppercase;
letter-spacing: 0.05em;
}
.benefits-grid-horizontal {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
max-width: 1200px;
margin: 0 auto;
}
@media (max-width: 768px) {
.mini-proof-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
.benefits-grid {
gap: 0.5rem;
}
.benefit-text {
font-size: 0.8rem;
}
}
@media (max-width: 480px) {
.mini-proof-grid {
grid-template-columns: 1fr;
gap: 0.5rem;
}
}
.proof-section {
padding: 5rem 0;
background: linear-gradient(135deg,
rgba(10, 25, 47, 0.98) 0%,
rgba(26, 54, 93, 0.95) 50%,
rgba(10, 25, 47, 0.98) 100%
);
position: relative;
overflow: hidden;
}
.proof-section::before {
content: '';
position: absolute;
op: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="proof-grid" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(0,122,204,0.05)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23proof-grid)"/></svg>');
opacity: 0.3;
pointer-events: none;
}
.proof-header {
ext-align: center;
margin-bottom: 4rem;
position: relative;
z-index: 2;
}
.proof-title {
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 800;
color: var(--text-primary-light);
margin-bottom: 1rem;
background: linear-gradient(135deg, var(--accent-blue), var(--accent-gold));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.proof-subtitle {
font-size: clamp(1.1rem, 2.5vw, 1.4rem);
color: var(--text-secondary);
font-weight: 400;
margin: 0;
}
.proof-grid {
display: flex;
flex-direction: column;
gap: 3rem;
position: relative;
z-index: 2;
}
.proof-row.main-achievements {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
justify-items: center;
}
.proof-card {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--border-radius-xl);
padding: 2.5rem 1.5rem;
ext-align: center;
ransition: var(--transition-normal);
position: relative;
overflow: hidden;
min-height: 150px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.5rem;
}
.proof-card::before {
content: '';
position: absolute;
op: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent-blue), var(--accent-gold));
opacity: 0;
ransition: var(--transition-normal);
}
.proof-card:hover::before {
opacity: 1;
}
.proof-card:hover {
ransform: translateY(-5px);
border-color: rgba(0, 122, 204, 0.3);
box-shadow: 0 20px 40px rgba(0, 122, 204, 0.1);
}
.proof-card.highlight {
border-color: var(--accent-gold);
background: rgba(247, 147, 30, 0.05);
}
.proof-card.highlight::before {
opacity: 1;
background: var(--accent-gold);
}
.proof-number {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 900;
color: var(--accent-blue);
display: block;
line-height: 1;
}
.proof-card.highlight .proof-number {
color: var(--accent-gold);
ext-shadow: 0 0 20px rgba(247, 147, 30, 0.3);
}
.proof-label {
font-size: 0.9rem;
color: var(--text-secondary);
ext-transform: uppercase;
letter-spacing: 0.05em;
line-height: 1.4;
font-weight: 500;
}
.proof-row.journey-timeline {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.timeline-card {
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(15px);
border-radius: var(--border-radius-lg);
padding: 2rem 1.5rem;
position: relative;
ransition: var(--transition-normal);
border-left: 4px solid;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.timeline-card.success {
border-left-color: #22c55e;
background: rgba(34, 197, 94, 0.05);
}
.timeline-card.failure {
border-left-color: #ef4444;
background: rgba(239, 68, 68, 0.05);
}
.timeline-card.triumph {
border-left-color: var(--accent-gold);
background: rgba(247, 147, 30, 0.05);
}
.timeline-card:hover {
ransform: translateX(5px);
box-shadow: -5px 0 20px rgba(0, 122, 204, 0.1);
}
.timeline-year {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-primary-light);
line-height: 1;
}
.timeline-event {
font-size: 0.9rem;
color: var(--text-secondary);
line-height: 1.4;
font-weight: 400;
}
@media (max-width: 768px) {
.proof-section {
padding: 3rem 0;
}
.proof-header {
margin-bottom: 3rem;
}
.proof-grid {
gap: 2rem;
}
.proof-row.main-achievements {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
}
.proof-row.journey-timeline {
grid-template-columns: 1fr;
gap: 1rem;
}
.proof-card {
padding: 2rem 1rem;
min-height: 120px;
}
.timeline-card {
padding: 1.5rem 1rem;
}
}
@media (max-width: 480px) {
.proof-row.main-achievements {
grid-template-columns: repeat(2, 1fr);
}
.proof-number {
font-size: clamp(1.5rem, 6vw, 2rem);
}
.proof-label {
font-size: 0.8rem;
}
}/* ==========================================================================
AI CIRCLE COMPONENT - DANIEL WOŹNIAK
========================================================================== */
.ai-circle {
padding: 4rem 0;
background: var(--primary-dark);
margin: 2rem 0;
position: relative;
}
.ai-circle::before {
content: '';
position: absolute;
op: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0,122,204,0.5), transparent);
}
.jarv-interactive {
display: grid;
grid-template-columns: 70fr 30fr;
gap: 4rem;
margin: 3rem 0;
align-items: flex-start;
}
.jarv-avatar-section {
ext-align: center;
padding: 2rem;
}
.jarv-avatar {
width: 120px;
height: 120px;
background: linear-gradient(135deg, var(--accent-blue), var(--accent-blue-light));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 2rem;
position: relative;
cursor: pointer;
ransition: all 0.3s ease;
box-shadow: 0 8px 32px rgba(0,122,204,0.3);
}
.jarv-avatar:hover {
ransform: scale(1.05);
box-shadow: 0 0 30px rgba(0,122,204,0.5);
}
.jarv-pulse {
position: absolute;
inset: -10px;
border-radius: 50%;
border: 2px solid var(--accent-blue);
animation: pulse 2s infinite;
opacity: 0.7;
}
.jarv-face {
color: white;
font-size: 2rem;
}
.jarv-eyes {
display: flex;
gap: 0.5rem;
justify-content: center;
margin-bottom: 0.5rem;
}
.jarv-eye {
width: 8px;
height: 8px;
background: white;
border-radius: 50%;
animation: blink 3s infinite;
}
@keyframes pulse {
0% { transform: scale(1); opacity: 0.7; }
70% { transform: scale(1.3); opacity: 0; }
100% { transform: scale(1.3); opacity: 0; }
}
@keyframes blink {
0%, 95% { height: 8px; }
96%, 99% { height: 2px; }
100% { height: 8px; }
}
.jarv-mouth {
width: 20px;
height: 10px;
border: 2px solid white;
border-top: none;
border-radius: 0 0 20px 20px;
margin: 0 auto;
}
.jarv-chat-btn {
background: var(--accent-blue);
color: white;
border: none;
padding: 1rem 2rem;
border-radius: 8px;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
ransition: all 0.3s ease;
margin-top: 1rem;
}
.jarv-chat-btn:hover {
background: var(--accent-blue-light);
ransform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,122,204,0.3);
}
.jarv-chat-section {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(0,122,204,0.3);
border-radius: 16px;
padding: 2rem;
backdrop-filter: blur(10px);
display: none;
opacity: 0;
ransform: translateY(20px);
ransition: all 0.3s ease;
}
.jarv-chat-section.active {
display: block;
opacity: 1;
ransform: translateY(0);
}
.chat-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
.chat-header h3 {
color: var(--text-primary-light);
font-size: 1.25rem;
font-weight: 600;
margin: 0;
}
.chat-close {
background: none;
border: none;
color: var(--text-light);
font-size: 1.5rem;
cursor: pointer;
padding: 0.5rem;
border-radius: 50%;
ransition: all 0.3s ease;
}
.chat-close:hover {
background: rgba(255,255,255,0.1);
color: var(--white);
}
.chat-messages {
max-height: 300px;
overflow-y: auto;
margin-bottom: 1.5rem;
padding-right: 0.5rem;
}
.chat-message {
margin-bottom: 1rem;
display: flex;
gap: 0.75rem;
}
.jarv-message {
align-items: flex-start;
}
.message-avatar {
width: 32px;
height: 32px;
background: var(--accent-blue);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
font-size: 0.875rem;
flex-shrink: 0;
}
.message-content {
flex: 1;
background: rgba(255,255,255,0.08);
border-radius: 12px;
padding: 0.75rem 1rem;
}
.message-content p {
color: var(--text-light);
font-size: 0.9rem;
line-height: 1.4;
margin: 0;
}
.message-content p + p {
margin-top: 0.5rem;
}
.chat-input-section {
display: flex;
gap: 0.75rem;
margin-bottom: 1rem;
}
#chatInput {
flex: 1;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 8px;
padding: 0.75rem;
color: var(--white);
font-size: 0.9rem;
ransition: all 0.3s ease;
}
#chatInput::placeholder {
color: rgba(255,255,255,0.5);
}
#chatInput:focus {
outline: none;
border-color: var(--accent-blue);
background: rgba(255,255,255,0.15);
}
#chatSend {
background: var(--accent-blue);
color: white;
border: none;
border-radius: 8px;
padding: 0.75rem 1.25rem;
font-weight: 500;
cursor: pointer;
ransition: all 0.3s ease;
}
#chatSend:hover {
background: var(--accent-blue-light);
}
.quick-questions {
margin-top: 1rem;
}
.quick-questions p {
color: var(--text-light);
font-size: 0.85rem;
margin-bottom: 0.75rem;
}
.quick-question {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.2);
color: var(--text-light);
border-radius: 6px;
padding: 0.5rem 0.75rem;
font-size: 0.8rem;
margin: 0 0.5rem 0.5rem 0;
cursor: pointer;
ransition: all 0.3s ease;
}
.quick-question:hover {
background: rgba(255,255,255,0.1);
border-color: var(--accent-blue);
color: var(--white);
}
.ai-agents {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.agent-card {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 16px;
padding: 2rem;
ext-align: center;
ransition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.agent-card::before {
content: '';
position: absolute;
op: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, var(--accent-blue), transparent);
ransition: left 0.6s ease;
}
.agent-card:hover::before {
left: 100%;
}
.agent-card:hover {
background: rgba(255,255,255,0.08);
ransform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,122,204,0.2);
}
.agent-number {
font-family: var(--font-family-mono);
font-size: 0.875rem;
color: var(--accent-blue);
font-weight: 600;
margin-bottom: 1rem;
letter-spacing: 0.1em;
}
.agent-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--white);
margin-bottom: 0.5rem;
letter-spacing: -0.02em;
}
.agent-role {
font-size: 0.9rem;
color: var(--accent-blue);
font-weight: 500;
margin-bottom: 1.5rem;
ext-transform: uppercase;
letter-spacing: 0.05em;
}
.agent-desc {
color: var(--text-light);
line-height: 1.6;
font-size: 0.95rem;
}
@media (max-width: 768px) {
.jarv-interactive {
grid-template-columns: 1fr;
gap: 2rem;
}
.jarv-chat-section {
padding: 1.5rem;
}
.ai-agents {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.agent-card {
padding: 1.5rem;
}
.jarv-avatar {
width: 100px;
height: 100px;
}
.chat-input-section {
flex-direction: column;
}
.quick-questions {
ext-align: center;
}
.quick-question {
display: block;
margin: 0 0 0.5rem 0;
width: 100%;
}
}
.hero-journey-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-xl);
margin: var(--space-xl) 0;
position: relative;
z-index: 1;
}
.journey-item {
background: transparent;
perspective: 1000px;
height: 180px; 
border-radius: var(--border-radius-lg);
ransition: all 0.3s ease; 
cursor: pointer;
position: relative;
z-index: 2; 
}
.journey-card-inner {
position: relative;
width: 100%;
height: 100%;
ext-align: center;
ransition: transform 0.6s ease-in-out; 
ransform-style: preserve-3d;
}
.journey-item:hover .journey-card-inner {
ransform: rotateY(180deg);
}
.journey-card-front,
.journey-card-back {
position: absolute;
width: 100%;
height: 180px; 
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: var(--space-md) var(--space-sm);
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--border-radius-lg);
ext-align: center;
overflow: hidden;
box-sizing: border-box; 
}
.journey-card-front {
}
.journey-card-back {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(0, 122, 204, 0.3);
ransform: rotateY(180deg);
padding: var(--space-lg) var(--space-md);
}
.journey-back-title {
font-size: 1.2rem;
font-weight: 700;
color: var(--accent-blue);
margin-bottom: var(--space-md);
ext-transform: none;
line-height: 1.3;
}
.journey-back-text {
font-size: 0.9rem;
color: var(--text-light);
line-height: 1.5;
ext-align: center;
margin: 0;
max-width: 280px;
}
.journey-item:hover {
z-index: 10; 
}
.journey-item:hover .journey-card-front,
.journey-item:hover .journey-card-back {
box-shadow:
0 15px 30px rgba(0, 0, 0, 0.2),
0 0 20px rgba(0, 122, 204, 0.15);
}
.journey-number {
font-size: 2.8rem;
font-weight: 900;
color: var(--text-primary);
line-height: 1;
margin-bottom: var(--space-sm);
letter-spacing: -2px;
ext-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
ransition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.journey-item:hover .journey-number {
ransform: scale(1.1);
color: #ffffff;
ext-shadow:
0 4px 12px rgba(0, 0, 0, 0.5),
0 0 20px rgba(0, 122, 204, 0.4);
}
.journey-label {
font-size: 0.9rem;
font-weight: 500;
color: var(--text-light);
line-height: 1.4;
ext-transform: none;
letter-spacing: 0.5px;
ransition: all 0.6s ease;
max-width: 280px;
margin: 0 auto;
}
.journey-item:hover .journey-label {
color: #ffffff;
ransform: translateY(-3px);
}
.journey-item.success .journey-card-front,
.journey-item.success .journey-card-back {
background: linear-gradient(135deg,
rgba(0, 122, 204, 0.08) 0%,
rgba(255, 255, 255, 0.05) 100%);
border-left: 4px solid rgba(0, 122, 204, 0.6);
}
.journey-item.success:hover .journey-card-front,
.journey-item.success:hover .journey-card-back {
box-shadow:
0 15px 30px rgba(0, 0, 0, 0.2),
0 0 20px rgba(0, 122, 204, 0.15);
}
.journey-item.success .journey-back-title {
color: var(--accent-blue);
}
.journey-item.failure .journey-card-front,
.journey-item.failure .journey-card-back {
background: linear-gradient(135deg,
rgba(0, 122, 204, 0.05) 0%,
rgba(255, 255, 255, 0.05) 100%);
border-left: 4px solid rgba(0, 122, 204, 0.4);
}
.journey-item.failure:hover .journey-card-front,
.journey-item.failure:hover .journey-card-back {
box-shadow:
0 15px 30px rgba(0, 0, 0, 0.2),
0 0 20px rgba(0, 122, 204, 0.1);
}
.journey-item.failure .journey-back-title {
color: rgba(0, 122, 204, 0.8);
}
.journey-item.triumph .journey-card-front,
.journey-item.triumph .journey-card-back {
background: linear-gradient(135deg,
rgba(0, 122, 204, 0.12) 0%,
rgba(0, 122, 204, 0.06) 50%,
rgba(255, 255, 255, 0.05) 100%);
border-left: 4px solid var(--accent-blue);
}
.journey-item.triumph:hover .journey-card-front,
.journey-item.triumph:hover .journey-card-back {
box-shadow:
0 15px 30px rgba(0, 0, 0, 0.2),
0 0 25px rgba(0, 122, 204, 0.3);
}
.journey-item.triumph .journey-back-title {
color: var(--accent-blue);
}
.journey-item {
opacity: 0;
ransform: translateY(40px);
animation: revealStats 0.8s ease-out forwards;
}
.journey-item:nth-child(1) { animation-delay: 0.1s; }
.journey-item:nth-child(2) { animation-delay: 0.2s; }
.journey-item:nth-child(3) { animation-delay: 0.3s; }
.journey-item:nth-child(4) { animation-delay: 0.4s; }
.journey-item:nth-child(5) { animation-delay: 0.5s; }
.journey-item:nth-child(6) { animation-delay: 0.6s; }
.journey-item:nth-child(7) { animation-delay: 0.7s; }
@keyframes revealStats {
o {
opacity: 1;
ransform: translateY(0);
}
}
@media (max-width: 768px) {
.hero-journey-stats {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--space-lg);
}
.journey-item {
height: 200px; 
}
.journey-card-front,
.journey-card-back {
padding: var(--space-lg) var(--space-md);
height: 200px; 
}
.journey-number {
font-size: 2.8rem;
}
.journey-label {
font-size: 0.9rem;
}
.journey-back-title {
font-size: 1.2rem;
}
.journey-back-text {
font-size: 0.9rem;
}
.journey-item:hover {
}
}
@media (max-width: 480px) {
.hero-journey-stats {
grid-template-columns: 1fr;
}
.journey-item {
height: 180px; 
}
.journey-card-front,
.journey-card-back {
padding: var(--space-md) var(--space-sm);
height: 180px; 
}
.journey-number {
font-size: 2.5rem;
}
.journey-back-title {
font-size: 1.1rem;
}
.journey-back-text {
font-size: 0.85rem;
max-width: 240px;
}
}
@media (prefers-reduced-motion: reduce) {
.journey-item,
.journey-number,
.journey-label {
ransition: none;
animation: none;
}
.journey-item:hover {
ransform: none;
}
.journey-item::before,
.journey-item::after {
animation: none;
}
}/* ==========================================================================
WRITING DESK CONCEPT - CREATIVE BOOKS SECTION
========================================================================== */
.writing-desk-section {
padding: 6rem 0;
background: linear-gradient(135deg,
rgba(10, 25, 47, 0.98) 0%,
rgba(26, 54, 93, 0.95) 50%,
rgba(10, 25, 47, 0.98) 100%
);
position: relative;
overflow: hidden;
}
.writing-desk-section::before {
content: '';
position: absolute;
op: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="writing-grid" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(0,122,204,0.02)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23writing-grid)"/></svg>');
opacity: 0.6;
pointer-events: none;
}
.writing-desk-showcase {
margin: 4rem 0;
position: relative;
}
.desk-surface {
background: linear-gradient(145deg,
rgba(139, 69, 19, 0.1) 0%,
rgba(101, 67, 33, 0.05) 100%
);
border-radius: var(--border-radius-xl);
padding: 3rem 2rem;
position: relative;
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
border: 1px solid rgba(139, 69, 19, 0.2);
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 3rem;
align-items: start;
}
.book-workspace {
display: flex;
flex-direction: column;
gap: 2rem;
opacity: 0;
ransform: translateY(30px);
ransition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.book-workspace.animate {
opacity: 1;
ransform: translateY(0);
}
.book-workspace.completed .book-cover-mockup {
width: 200px;
height: 280px;
background: linear-gradient(145deg,
var(--accent-blue) 0%,
rgba(0, 122, 204, 0.8) 100%
);
border-radius: 8px;
position: relative;
box-shadow:
0 20px 40px rgba(0, 122, 204, 0.3),
inset 0 2px 0 rgba(255, 255, 255, 0.2);
ransform: perspective(800px) rotateY(-15deg);
margin: 0 auto;
}
.book-spine {
position: absolute;
left: -20px;
op: 0;
bottom: 0;
width: 40px;
background: linear-gradient(135deg,
rgba(0, 100, 180, 1) 0%,
rgba(0, 80, 150, 1) 100%
);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1rem;
border-radius: 4px 0 0 4px;
}
.book-spine-title {
writing-mode: vertical-lr;
color: white;
font-size: 0.7rem;
font-weight: 700;
ext-transform: uppercase;
letter-spacing: 0.1em;
}
.book-spine-author {
writing-mode: vertical-lr;
color: rgba(255, 255, 255, 0.8);
font-size: 0.6rem;
font-weight: 500;
}
.book-workspace.in-progress .manuscript-stack {
width: 200px;
height: 280px;
position: relative;
margin: 0 auto;
}
.pages-stack {
position: relative;
width: 100%;
height: 100%;
}
.page-top {
background: rgba(255, 255, 255, 0.95);
border-radius: 4px;
padding: 2rem 1.5rem;
position: relative;
z-index: 3;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
border-left: 4px solid #ef4444;
}
.page-title {
font-size: 0.9rem;
font-weight: 700;
color: #333;
line-height: 1.3;
}
.pages-beneath {
position: absolute;
op: 10px;
left: 5px;
right: -5px;
bottom: -10px;
background: rgba(255, 255, 255, 0.8);
border-radius: 4px;
z-index: 2;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.pages-beneath::before {
content: '';
position: absolute;
op: 10px;
left: 5px;
right: -5px;
bottom: -10px;
background: rgba(255, 255, 255, 0.6);
border-radius: 4px;
z-index: 1;
}
.book-status-badge {
position: absolute;
op: -10px;
right: -10px;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.7rem;
font-weight: 700;
ext-transform: uppercase;
letter-spacing: 0.1em;
z-index: 10;
}
.book-status-badge.completed {
background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
color: white;
box-shadow: 0 5px 15px rgba(34, 197, 94, 0.3);
}
.book-status-badge.in-progress {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
color: white;
box-shadow: 0 5px 15px rgba(245, 158, 11, 0.3);
animation: pulse 2s ease-in-out infinite;
}
.book-details {
ext-align: center;
}
.book-meta {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
.book-number {
font-size: 2rem;
font-weight: 900;
color: var(--accent-gold);
line-height: 1;
}
.book-type {
font-size: 0.8rem;
color: var(--text-secondary);
ext-transform: uppercase;
letter-spacing: 0.1em;
padding: 0.5rem 1rem;
background: rgba(255, 255, 255, 0.05);
border-radius: 20px;
}
.book-title {
font-size: 1.4rem;
font-weight: 700;
color: var(--text-primary-light);
margin-bottom: 1rem;
line-height: 1.3;
}
.book-description {
font-size: 0.9rem;
color: var(--text-secondary);
line-height: 1.6;
margin-bottom: 2rem;
}
.book-timeline {
margin-bottom: 2rem;
}
.book-release {
font-size: 0.8rem;
color: var(--accent-blue);
font-weight: 600;
ext-transform: uppercase;
letter-spacing: 0.1em;
display: block;
margin-bottom: 1rem;
}
.book-progress-bar {
width: 100%;
height: 6px;
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
overflow: hidden;
position: relative;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--accent-blue) 0%, var(--accent-gold) 100%);
border-radius: 3px;
ransition: width 1s ease;
}
.progress-fill.writing-animation {
position: relative;
overflow: hidden;
}
.progress-fill.writing-animation::after {
content: '';
position: absolute;
op: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
animation: writing-progress 3s ease-in-out infinite;
}
@keyframes writing-progress {
0% { left: -100%; }
50% { left: 100%; }
100% { left: 100%; }
}
.book-preorder-form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.book-email-input {
padding: 1rem;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--border-radius-md);
background: rgba(255, 255, 255, 0.05);
color: var(--text-primary-light);
font-size: 0.9rem;
backdrop-filter: blur(10px);
ransition: all 0.3s ease;
}
.book-email-input:focus {
outline: none;
border-color: var(--accent-blue);
box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.2);
}
.book-email-input::placeholder {
color: var(--text-secondary);
}
.book-cta-btn {
padding: 1rem 2rem;
border: none;
border-radius: var(--border-radius-md);
font-weight: 700;
ext-transform: uppercase;
letter-spacing: 0.05em;
cursor: pointer;
ransition: all 0.3s ease;
font-size: 0.85rem;
}
.book-cta-btn.primary {
background: linear-gradient(135deg, var(--accent-blue) 0%, #1e40af 100%);
color: white;
}
.book-cta-btn.primary:hover {
ransform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0, 122, 204, 0.3);
}
.book-cta-btn.secondary {
background: linear-gradient(135deg, var(--accent-gold) 0%, #d97706 100%);
color: white;
}
.book-cta-btn.secondary:hover {
ransform: translateY(-2px);
box-shadow: 0 10px 25px rgba(247, 147, 30, 0.3);
}
.desk-divider {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2rem;
padding: 2rem 0;
}
.writing-tools {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
opacity: 0.6;
}
.pen-tool {
width: 4px;
height: 80px;
background: linear-gradient(180deg, #8b4513 0%, #a0522d 100%);
border-radius: 2px;
position: relative;
}
.pen-tool::before {
content: '';
position: absolute;
op: -10px;
left: -3px;
width: 10px;
height: 20px;
background: #c0c0c0;
border-radius: 5px;
}
.coffee-stain {
width: 30px;
height: 30px;
background: radial-gradient(circle, rgba(139, 69, 19, 0.3) 0%, transparent 70%);
border-radius: 50%;
}
.paper-notes {
padding: 0.5rem;
background: rgba(255, 255, 255, 0.9);
color: #333;
font-size: 0.7rem;
border-radius: 4px;
ransform: rotate(-5deg);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.desk-atmosphere {
position: absolute;
op: -2rem;
right: 2rem;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 1rem;
}
.desk-lamp {
width: 60px;
height: 60px;
background: radial-gradient(circle, rgba(255, 255, 200, 0.1) 0%, transparent 70%);
border-radius: 50%;
position: relative;
}
.desk-lamp::before {
content: '';
position: absolute;
op: 50%;
left: 50%;
ransform: translate(-50%, -50%);
width: 20px;
height: 20px;
background: rgba(255, 255, 200, 0.3);
border-radius: 50%;
box-shadow: 0 0 20px rgba(255, 255, 200, 0.2);
}
.inspiration-quote {
font-size: 0.8rem;
color: var(--text-secondary);
font-style: italic;
max-width: 200px;
ext-align: right;
line-height: 1.4;
opacity: 0.7;
}
@media (max-width: 768px) {
.desk-surface {
grid-template-columns: 1fr;
gap: 2rem;
padding: 2rem 1rem;
}
.desk-divider {
order: 2;
}
.book-workspace.in-progress {
order: 3;
}
.book-cover-mockup,
.manuscript-stack {
width: 150px;
height: 210px;
}
.book-title {
font-size: 1.2rem;
}
.desk-atmosphere {
position: relative;
op: 0;
right: 0;
align-items: center;
margin-top: 2rem;
}
}
@media (max-width: 480px) {
.book-cover-mockup,
.manuscript-stack {
width: 120px;
height: 170px;
}
.book-title {
font-size: 1rem;
}
.book-description {
font-size: 0.8rem;
}
}
/* ==========================================================================
SEXY BOOK IMAGES & MEDIA CONTACT - SALES MACHINE
========================================================================== */
.book-cover-image {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--border-radius-lg);
ransition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.book-cover-mockup {
position: relative;
overflow: visible;
}
.book-glow-effect {
position: absolute;
op: -10px;
left: -10px;
right: -10px;
bottom: -10px;
background: linear-gradient(135deg,
rgba(0, 122, 204, 0.2) 0%,
rgba(0, 122, 204, 0.1) 50%,
rgba(0, 122, 204, 0.2) 100%
);
border-radius: var(--border-radius-xl);
filter: blur(15px);
opacity: 0;
ransition: opacity 0.4s ease;
z-index: -1;
}
.book-workspace:hover .book-glow-effect {
opacity: 1;
}
.writing-glow {
background: linear-gradient(135deg,
rgba(255, 165, 0, 0.3) 0%,
rgba(255, 140, 0, 0.1) 50%,
rgba(255, 165, 0, 0.3) 100%
);
}
.book-workspace:hover .book-cover-image {
ransform: translateY(-5px) scale(1.02);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}
.book-cta-dual {
display: grid;
grid-template-columns: 70fr 30fr;
gap: 1.5rem;
margin-top: 1.5rem;
}
.media-contact-box {
background: linear-gradient(135deg,
rgba(255, 69, 0, 0.1) 0%,
rgba(255, 140, 0, 0.05) 100%
);
border: 1px solid rgba(255, 69, 0, 0.2);
border-radius: var(--border-radius-lg);
padding: 1.5rem;
ext-align: center;
position: relative;
overflow: hidden;
}
.media-contact-box::before {
content: '';
position: absolute;
op: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #FF4500 0%, #FF8C00 100%);
}
.media-label {
font-size: 0.75rem;
font-weight: 700;
color: #FF4500;
ext-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 0.5rem;
}
.media-text {
font-size: 0.85rem;
color: var(--text-secondary);
margin-bottom: 1rem;
font-style: italic;
}
.book-cta-btn.media {
background: linear-gradient(135deg, #FF4500 0%, #FF8C00 100%);
color: white;
ext-decoration: none;
display: inline-block;
font-size: 0.8rem;
padding: 0.75rem 1.5rem;
}
.book-cta-btn.media:hover {
ransform: translateY(-2px);
box-shadow: 0 8px 20px rgba(255, 69, 0, 0.4);
}
.reader-signup-box {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--border-radius-lg);
padding: 1.5rem;
}
@media (max-width: 768px) {
.book-cta-dual {
grid-template-columns: 1fr;
gap: 1rem;
}
.media-contact-box,
.reader-signup-box {
padding: 1rem;
}
}
/* ==========================================================================
FERRARI-LEVEL PREMIUM BOOKS SECTION
========================================================================== */
.bestseller-showcase {
margin: 4rem 0;
position: relative;
}
.books-gallery {
display: grid;
grid-template-columns: 70fr 30fr;
gap: 4rem;
align-items: start;
background: linear-gradient(145deg,
rgba(20, 20, 40, 0.95) 0%,
rgba(10, 25, 47, 0.98) 50%,
rgba(20, 20, 40, 0.95) 100%
);
border-radius: var(--border-radius-xl);
padding: 4rem 3rem;
position: relative;
overflow: hidden;
box-shadow:
0 30px 100px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
}
.books-gallery::before {
content: '';
position: absolute;
op: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(0, 122, 204, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(247, 147, 30, 0.1) 0%, transparent 50%);
pointer-events: none;
}
.premium-book-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--border-radius-xl);
padding: 0;
position: relative;
overflow: hidden;
ransition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(15px);
}
.premium-book-card:hover {
ransform: translateY(-10px) scale(1.02);
border-color: rgba(0, 122, 204, 0.4);
box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
}
.premium-book-card.bestseller:hover {
border-color: rgba(0, 122, 204, 0.6);
}
.premium-book-card.investigative:hover {
border-color: rgba(255, 69, 0, 0.6);
}
.book-hero {
padding: 2rem;
ext-align: center;
position: relative;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.05) 0%,
rgba(255, 255, 255, 0.02) 100%
);
}
.book-cover-premium {
position: relative;
display: block;
width: 100%;
height: 210px;
margin: 0 auto;
overflow: hidden;
}
.book-cover-image {
width: 100%;
height: 190px;
object-fit: cover;
object-position: center;
border-radius: var(--border-radius-lg);
border: 2px solid rgba(255, 255, 255, 0.2);
ransition: all 0.3s ease;
position: relative;
z-index: 2;
}
.premium-book-card:hover .book-cover-image {
border-color: rgba(255, 255, 255, 0.4);
ransform: scale(1.02);
}
.book-status-badge {
position: absolute;
op: -10px;
right: -10px;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 700;
ext-transform: uppercase;
letter-spacing: 0.05em;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.book-status-badge.ready {
background: linear-gradient(135deg, #10B981 0%, #047857 100%);
color: white;
}
.book-status-badge.writing {
background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
color: white;
}
.bestseller-ribbon, .exclusive-ribbon {
position: absolute;
op: 15px;
left: -15px;
background: linear-gradient(135deg, #3B82F6 0%, #1E40AF 100%);
color: white;
padding: 0.5rem 1.5rem;
font-size: 0.7rem;
font-weight: 700;
ext-transform: uppercase;
letter-spacing: 0.1em;
ransform: rotate(-45deg);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.exclusive-ribbon {
background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
}
.premium-glow, .investigative-glow {
position: absolute;
op: -20px;
left: -20px;
right: -20px;
bottom: -20px;
background: radial-gradient(circle,
rgba(0, 122, 204, 0.2) 0%,
ransparent 70%
);
opacity: 0;
ransition: opacity 0.4s ease;
z-index: -1;
}
.investigative-glow {
background: radial-gradient(circle,
rgba(255, 69, 0, 0.2) 0%,
ransparent 70%
);
}
.premium-book-card:hover .premium-glow,
.premium-book-card:hover .investigative-glow {
opacity: 1;
}
.book-content-premium {
padding: 2rem;
}
.book-header {
ext-align: center;
margin-bottom: 2rem;
}
.book-category {
font-size: 0.75rem;
color: var(--accent-blue);
ext-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 600;
margin-bottom: 0.5rem;
}
.book-title-premium {
font-size: clamp(1.3rem, 2.5vw, 1.6rem);
font-weight: 900;
color: var(--text-primary-light);
margin-bottom: 0.5rem;
line-height: 1.2;
}
.book-subtitle {
font-size: 0.85rem;
color: var(--text-secondary);
font-weight: 500;
}
.book-description-premium {
margin: 1.5rem 0;
ext-align: center;
}
.book-hook {
font-size: 1.1rem;
font-weight: 700;
color: var(--accent-gold);
margin-bottom: 0.75rem;
font-style: italic;
}
.book-details {
font-size: 0.9rem;
color: var(--text-light);
line-height: 1.6;
}
.book-value-props {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin: 1.5rem 0;
}
.value-prop {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem;
background: rgba(255, 255, 255, 0.02);
border-radius: var(--border-radius-md);
border-left: 3px solid var(--accent-blue);
}
.prop-icon {
font-size: 1.2rem;
flex-shrink: 0;
}
.prop-text {
font-size: 0.85rem;
color: var(--text-light);
font-weight: 500;
}
.book-release-info {
display: grid;
grid-template-columns: auto 1fr;
gap: 1.5rem;
align-items: center;
margin: 1.5rem 0;
padding: 1rem;
background: rgba(255, 255, 255, 0.03);
border-radius: var(--border-radius-md);
}
.release-date {
ext-align: center;
}
.date-label {
display: block;
font-size: 0.7rem;
color: var(--text-secondary);
ext-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 0.25rem;
}
.date-value {
font-size: 0.9rem;
font-weight: 700;
color: var(--accent-blue);
}
.progress-indicator {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.progress-bar-premium {
height: 6px;
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
overflow: hidden;
}
.progress-fill-premium {
height: 100%;
background: linear-gradient(90deg, var(--accent-blue) 0%, var(--accent-gold) 100%);
border-radius: 3px;
ransition: width 0.3s ease;
}
.writing-progress .progress-fill-premium {
background: linear-gradient(90deg, #F59E0B 0%, #EF4444 100%);
animation: writing-pulse 2s infinite;
}
@keyframes writing-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.progress-label {
font-size: 0.75rem;
color: var(--text-secondary);
ext-align: right;
}
.book-cta-premium {
margin-top: 2rem;
}
.exclusive-signup {
display: flex;
flex-direction: column;
gap: 1rem;
}
.premium-email-input {
padding: 1rem 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--border-radius-lg);
background: rgba(255, 255, 255, 0.05);
color: var(--text-primary-light);
font-size: 0.9rem;
backdrop-filter: blur(10px);
ransition: all 0.3s ease;
}
.premium-email-input:focus {
outline: none;
border-color: var(--accent-blue);
box-shadow: 0 0 0 3px rgba(0, 122, 204, 0.2);
background: rgba(255, 255, 255, 0.08);
}
.premium-cta-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 1.25rem 2rem;
background: linear-gradient(135deg, var(--accent-blue) 0%, #1E40AF 100%);
color: white;
border: none;
border-radius: var(--border-radius-lg);
font-weight: 700;
ext-transform: uppercase;
letter-spacing: 0.05em;
cursor: pointer;
ransition: all 0.4s ease;
font-size: 0.85rem;
position: relative;
overflow: hidden;
}
.premium-cta-btn::before {
content: '';
position: absolute;
op: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
ransition: left 0.6s;
}
.premium-cta-btn:hover::before {
left: 100%;
}
.premium-cta-btn:hover {
ransform: translateY(-3px);
box-shadow: 0 15px 35px rgba(0, 122, 204, 0.4);
background: linear-gradient(135deg, #1E40AF 0%, var(--accent-blue) 100%);
}
.premium-cta-btn.secondary {
background: linear-gradient(135deg, #F59E0B 0%, #EF4444 100%);
}
.premium-cta-btn.secondary:hover {
box-shadow: 0 15px 35px rgba(245, 158, 11, 0.4);
background: linear-gradient(135deg, #EF4444 0%, #F59E0B 100%);
}
.scarcity-indicator {
ext-align: center;
margin-top: 1rem;
font-size: 0.75rem;
color: var(--accent-gold);
font-style: italic;
font-weight: 500;
}
.book-cta-premium.dual {
display: grid;
grid-template-columns: 70fr 30fr;
gap: 1.5rem;
}
.media-contact-premium {
background: linear-gradient(135deg,
rgba(255, 69, 0, 0.1) 0%,
rgba(255, 140, 0, 0.05) 100%
);
border: 1px solid rgba(255, 69, 0, 0.3);
border-radius: var(--border-radius-lg);
padding: 1.5rem;
ext-align: center;
}
.media-header {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1rem;
}
.media-title {
font-size: 0.8rem;
font-weight: 700;
color: #FF4500;
ext-transform: uppercase;
letter-spacing: 0.05em;
}
.media-description {
font-size: 0.8rem;
color: var(--text-secondary);
margin-bottom: 1rem;
font-style: italic;
}
.premium-media-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background: linear-gradient(135deg, #FF4500 0%, #FF8C00 100%);
color: white;
ext-decoration: none;
border-radius: var(--border-radius-md);
font-size: 0.75rem;
font-weight: 700;
ext-transform: uppercase;
letter-spacing: 0.05em;
ransition: all 0.3s ease;
}
.premium-media-btn:hover {
ransform: translateY(-2px);
box-shadow: 0 8px 25px rgba(255, 69, 0, 0.4);
}
.reader-signup-premium {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--border-radius-lg);
padding: 1.5rem;
}
@media (max-width: 768px) {
.books-gallery {
grid-template-columns: 1fr;
gap: 2rem;
padding: 2rem 1rem;
}
.book-cover-premium {
height: 180px;
}
.book-cover-image {
height: 160px;
}
.book-cta-premium.dual {
grid-template-columns: 1fr;
gap: 1rem;
}
.media-contact-premium,
.reader-signup-premium {
padding: 1rem;
}
}
@media (max-width: 480px) {
.book-cover-premium {
height: 160px;
}
.book-cover-image {
height: 140px;
}
.book-value-props {
gap: 0.5rem;
}
.value-prop {
padding: 0.5rem;
gap: 0.5rem;
}
.book-release-info {
grid-template-columns: 1fr;
ext-align: center;
gap: 1rem;
}
}/* ==========================================================================
HERO COMPONENTS - DANIEL WOŹNIAK (SKOPIOWANE Z BACKUP)
========================================================================== */
.hero {
min-height: 35vh;
display: flex;
align-items: center;
position: relative;
background:
linear-gradient(135deg, rgba(10, 25, 47, 0.95) 0%, rgba(26, 54, 93, 0.95) 100%),
radial-gradient(ellipse at top right, rgba(0, 122, 204, 0.1) 0%, transparent 50%),
radial-gradient(ellipse at bottom left, rgba(247, 147, 30, 0.05) 0%, transparent 50%);
padding: clamp(5rem, 8vw, 6rem) 0 0rem 0;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
op: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(0,122,204,0.03)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
opacity: 0.5;
pointer-events: none;
}
.hero-content {
display: grid;
grid-template-columns: 70fr 30fr;
gap: 2rem;
align-items: start;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
.hero-left {
display: flex;
flex-direction: column;
gap: 1rem;
}
.hero-overline {
font-size: 0.9rem;
font-weight: 500;
color: var(--accent-blue);
ext-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 0.5rem;
}
.hero-main-title {
font-size: clamp(1.6rem, 3.5vw, 2.4rem);
font-weight: 800;
line-height: 1.2;
color: var(--text-primary-light);
margin: 0 0 1rem 0;
letter-spacing: -0.02em;
position: relative;
}
.typewriter-text {
opacity: 0;
animation: fadeIn 0.5s ease-in-out forwards;
}
.typewriter-cursor {
display: inline-block;
background: var(--accent-blue);
width: 3px;
animation: blink 1s infinite;
margin-left: 2px;
}
@keyframes fadeIn {
o { opacity: 1; }
}
@keyframes blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
.typewriter-complete .typewriter-cursor {
display: none;
}
.hero-emphasis-line {
margin-top: 1rem;
position: relative;
display: inline-block;
}
.hero-emphasis {
font-size: clamp(1rem, 2.5vw, 1.4rem);
font-weight: 700;
color: var(--accent-blue);
position: relative;
display: inline-block;
opacity: 1;
line-height: 1.4;
}
.hero-emphasis::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--accent-blue), var(--accent-gold));
border-radius: 2px;
animation: underlineGlow 2s ease-in-out infinite;
}
@keyframes underlineGlow {
0%, 100% {
opacity: 0.8;
ransform: scaleX(1);
}
50% {
opacity: 1;
ransform: scaleX(1.05);
}
}
.hero-description {
font-size: clamp(1.1rem, 2.2vw, 1.3rem);
line-height: 1.6;
color: var(--text-light);
margin: 1rem 0 2rem 0;
}
.hero-cta-section {
display: flex;
gap: 1.5rem;
margin: 3rem 0;
}
.hero-cta-primary {
padding: 1.2rem 2rem;
background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-blue-light) 100%);
color: var(--white);
ext-decoration: none;
border-radius: var(--border-radius-md);
font-weight: 600;
font-size: 1rem;
ransition: var(--transition-normal);
box-shadow: var(--shadow-lg);
position: relative;
overflow: hidden;
}
.hero-cta-primary::before {
content: '';
position: absolute;
op: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
ransition: left 0.6s ease;
}
.hero-cta-primary:hover::before {
left: 100%;
}
.hero-cta-primary:hover {
ransform: translateY(-2px) scale(1.02);
box-shadow: var(--shadow-xl);
}
.hero-cta-secondary {
padding: 1.2rem 2rem;
background: transparent;
color: var(--text-primary);
ext-decoration: none;
border: 2px solid rgba(255,255,255,0.3);
border-radius: var(--border-radius-md);
font-weight: 500;
font-size: 1rem;
ransition: var(--transition-normal);
}
.hero-cta-secondary:hover {
background: rgba(255,255,255,0.1);
border-color: var(--accent-blue);
ransform: translateY(-2px);
}
.hero-social-proof {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
padding: 2rem 0 1rem 0;
border-top: 1px solid rgba(255,255,255,0.1);
ext-align: center;
}
.hero-journey-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
padding: 1rem 0 2rem 0;
border-bottom: 1px solid rgba(255,255,255,0.1);
ext-align: center;
}
.journey-item {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 1rem;
border-radius: var(--border-radius-md);
ransition: var(--transition-normal);
}
.journey-item.success {
background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(34, 197, 94, 0.05) 100%);
border-left: 3px solid #22c55e;
}
.journey-item.failure {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
border-left: 3px solid #ef4444;
}
.journey-item.triumph {
background: linear-gradient(135deg, rgba(0, 122, 204, 0.15) 0%, rgba(247, 147, 30, 0.05) 100%);
border-left: 3px solid var(--accent-gold);
}
.journey-number {
font-size: 1.2rem;
font-weight: 700;
color: var(--text-primary-light);
}
.journey-label {
font-size: 0.8rem;
color: var(--text-secondary);
ext-transform: uppercase;
letter-spacing: 0.05em;
line-height: 1.3;
}
.proof-item {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.proof-number {
font-size: 1.5rem;
font-weight: 700;
color: var(--accent-blue);
}
.proof-item.highlight .proof-number {
font-size: 2rem;
color: var(--accent-gold);
ext-shadow: 0 2px 8px rgba(247, 147, 30, 0.3);
}
.proof-item.highlight .proof-label {
color: var(--accent-gold);
font-weight: 600;
}
.proof-label {
font-size: 0.85rem;
color: var(--text-secondary);
ext-transform: uppercase;
letter-spacing: 0.05em;
}
.hero-quote {
margin: 3rem 0;
max-width: 600px;
}
.hero-quote blockquote {
font-size: clamp(1.1rem, 2.5vw, 1.4rem);
line-height: 1.5;
color: #666666;
margin: 0;
font-weight: 300;
}
.hero-right {
display: flex;
justify-content: center;
align-items: flex-start;
padding-top: 1rem;
}
.hero-image-container {
position: relative;
width: 100%;
max-width: 450px;
height: 500px;
border-radius: var(--border-radius-xl);
overflow: hidden;
box-shadow: var(--shadow-xl);
ransition: var(--transition-slow);
}
.hero-image {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center 15%;
position: absolute;
op: 0;
left: 0;
z-index: 1;
}
.hero-image-container:hover .hero-image {
ransform: scale(1.02);
}
.hero-image-container:hover .hero-brand-circle {
ransform: scale(1.1);
border-color: var(--accent-gold);
}
.hero-image-container:hover .hero-overlay-content {
ransform: translateY(-2px);
}
.hero-image-overlay {
position: absolute;
op: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
background: linear-gradient(135deg, rgba(10,25,47,0.85) 0%, rgba(0,122,204,0.75) 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 1;
ransition: var(--transition-normal);
}
.hero-image-overlay::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(0,122,204,0.1) 20px, rgba(0,122,204,0.1) 40px);
}
.hero-brand-circle {
width: 80px;
height: 80px;
border: 3px solid var(--accent-blue);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
background: rgba(0,122,204,0.2);
backdrop-filter: blur(10px);
position: relative;
z-index: 3;
ransition: var(--transition-normal);
}
.hero-dw-sygnet {
font-size: 2rem;
font-weight: 700;
color: white;
}
.hero-overlay-content {
position: relative;
z-index: 3;
ext-align: center;
color: var(--text-primary);
ransition: var(--transition-normal);
}
.overlay-title {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 0.5rem;
ext-shadow: 0 2px 4px rgba(0,0,0,0.5);
color: white;
}
.overlay-subtitle {
font-size: 0.85rem;
color: rgba(255,255,255,0.9);
font-family: var(--font-family-mono);
letter-spacing: 0.05em;
ext-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.hero-corner-accent {
position: absolute;
op: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 60px 60px 0;
border-color: transparent rgba(0,122,204,0.6) transparent transparent;
z-index: 4;
}
.hero-quote-full-width {
padding: 1rem 0;
background: linear-gradient(135deg,
rgba(247, 147, 30, 0.03) 0%,
rgba(10, 25, 47, 0.08) 50%,
rgba(0, 122, 204, 0.03) 100%
);
border-top: 1px solid rgba(255, 255, 255, 0.08);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
position: relative;
overflow: hidden;
}
.hero-quote-full-width::before {
content: '';
position: absolute;
op: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(ellipse at center, rgba(0, 122, 204, 0.05) 0%, transparent 70%);
pointer-events: none;
}
.hero-quote-main {
font-size: clamp(1.4rem, 3.5vw, 2.2rem);
line-height: 1.4;
color: var(--text-primary-light);
margin: 0;
font-weight: 400;
ext-align: center;
position: relative;
z-index: 2;
font-style: italic;
}
.rotating-text {
color: var(--accent-gold);
font-weight: 700;
position: relative;
display: inline-block;
min-width: 150px;
ext-align: left;
}
.rotating-text::after {
content: '|';
color: var(--accent-blue);
animation: blink 1s infinite;
margin-left: 2px;
font-weight: 400;
}
@keyframes typeWriter {
0% { width: 0; }
20% { width: 100%; }
80% { width: 100%; }
100% { width: 0; }
}
@keyframes blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
.hero-stats-full-width {
padding: 2rem 0;
background: linear-gradient(135deg,
rgba(0, 122, 204, 0.03) 0%,
rgba(10, 25, 47, 0.05) 50%,
rgba(247, 147, 30, 0.02) 100%
);
border-top: 1px solid rgba(255, 255, 255, 0.05);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.hero-stats-full-width .hero-social-proof {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
padding: 0;
border: none;
}
.hero-stats-full-width .hero-journey-stats {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
padding: 0;
border: none;
}
.fade-text {
opacity: 1;
animation: fadeInOut 3s ease-in-out infinite;
color: var(--accent-gold);
font-weight: 700;
}
.fade-text:nth-child(2) {
animation-delay: 1.5s;
}
@keyframes fadeInOut {
0%, 100% { opacity: 1; transform: translateY(0); }
25%, 75% { opacity: 0.3; transform: translateY(-2px); }
50% { opacity: 1; transform: translateY(0); }
}
@media (max-width: 1024px) {
.hero-content {
grid-template-columns: 1fr;
gap: 3rem;
ext-align: center;
}
.hero-image-container {
order: -1;
max-width: 350px;
margin: 0 auto;
}
}
@media (max-width: 768px) {
.hero {
min-height: 80vh;
padding: 2rem 0;
}
.hero-content {
gap: 2rem;
}
.hero-cta-section {
flex-direction: column;
align-items: stretch;
gap: 1rem;
}
.hero-cta-primary,
.hero-cta-secondary {
width: 100%;
max-width: 280px;
ext-align: center;
}
.hero-social-proof {
justify-content: center;
flex-wrap: wrap;
gap: 1.5rem;
}
.hero-image-container {
max-width: 300px;
margin: 0 auto;
}
.hero-brand-circle {
width: 60px;
height: 60px;
}
.hero-dw-sygnet {
font-size: 1.5rem;
}
.overlay-title {
font-size: 1rem;
}
.overlay-subtitle {
font-size: 0.75rem;
}
.hero-corner-accent {
border-width: 0 40px 40px 0;
}
}
@media (max-width: 480px) {
.hero {
min-height: 60vh;
padding: 3rem 0;
}
.hero-main-title {
font-size: clamp(1.8rem, 8vw, 2.5rem);
}
.hero-description {
font-size: 1rem;
}
.hero-cta-primary,
.hero-cta-secondary {
padding: 1rem 1.5rem;
font-size: 0.9rem;
}
.hero-social-proof {
gap: 1rem;
}
.proof-number {
font-size: 1.2rem;
}
.proof-label {
font-size: 0.75rem;
}
}/* ==========================================================================
SECTION DIVIDERS & TRANSITIONS - DANIEL WOŹNIAK
========================================================================== */
.section-divider {
position: relative;
padding: 2rem 0;
overflow: hidden;
}
.section-divider::before {
content: '';
position: absolute;
op: 50%;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg,
ransparent 0%,
rgba(0, 122, 204, 0.8) 25%,
rgba(247, 147, 30, 0.8) 75%,
ransparent 100%
);
animation: dividerGlow 3s ease-in-out infinite;
ransform: translateY(-50%);
}
.section-divider::after {
content: '';
position: absolute;
op: 50%;
left: -100%;
width: 100%;
height: 6px;
background: linear-gradient(90deg,
ransparent,
rgba(255, 255, 255, 0.4),
ransparent
);
animation: dividerSweep 4s ease-in-out infinite;
ransform: translateY(-50%);
}
@keyframes dividerGlow {
0%, 100% {
opacity: 0.6;
ransform: translateY(-50%) scaleX(1);
}
50% {
opacity: 1;
ransform: translateY(-50%) scaleX(1.05);
}
}
@keyframes dividerSweep {
0% {
left: -100%;
}
50% {
left: 100%;
}
100% {
left: 100%;
}
}
.hero-divider {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 6px;
z-index: 10;
overflow: hidden;
}
.hero-divider-line {
width: 100%;
height: 100%;
background: linear-gradient(90deg,
ransparent 0%,
rgba(0, 122, 204, 0.9) 25%,
rgba(247, 147, 30, 0.9) 75%,
ransparent 100%
);
animation: heroLinePulse 2s ease-in-out infinite;
position: relative;
}
.hero-divider-line::after {
content: '';
position: absolute;
op: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
ransparent,
rgba(255, 255, 255, 0.6),
ransparent
);
animation: heroSweep 3s ease-in-out infinite;
}
@keyframes heroLinePulse {
0%, 100% {
opacity: 0.8;
ransform: scaleX(1);
filter: blur(0px);
}
50% {
opacity: 1;
ransform: scaleX(1.1);
filter: blur(1px);
}
}
@keyframes heroSweep {
0% {
left: -100%;
}
50% {
left: 100%;
}
100% {
left: 100%;
}
}
.section-animate {
opacity: 0;
ransform: translateY(40px);
ransition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.section-animate.animate-in {
opacity: 1;
ransform: translateY(0);
}
.section-animate:nth-child(1) { transition-delay: 0.1s; }
.section-animate:nth-child(2) { transition-delay: 0.2s; }
.section-animate:nth-child(3) { transition-delay: 0.3s; }
.section-animate:nth-child(4) { transition-delay: 0.4s; }
.section-animate:nth-child(5) { transition-delay: 0.5s; }
.floating-element {
animation: float 6s ease-in-out infinite;
}
.floating-element:nth-child(even) {
animation-delay: -3s;
}
@keyframes float {
0%, 100% {
ransform: translateY(0px);
}
50% {
ransform: translateY(-10px);
}
}
.pulse-element {
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% {
ransform: scale(1);
opacity: 1;
}
50% {
ransform: scale(1.05);
opacity: 0.9;
}
}
.section-enhanced {
position: relative;
overflow: hidden;
}
.section-enhanced::before {
content: '';
position: absolute;
op: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(ellipse at top right, rgba(0, 122, 204, 0.03) 0%, transparent 50%),
radial-gradient(ellipse at bottom left, rgba(247, 147, 30, 0.02) 0%, transparent 50%);
pointer-events: none;
animation: backgroundShift 15s ease-in-out infinite;
}
@keyframes backgroundShift {
0%, 100% {
opacity: 0.5;
ransform: scale(1);
}
50% {
opacity: 0.8;
ransform: scale(1.1);
}
}
.section-transition {
position: relative;
padding: 3rem 0;
background: linear-gradient(180deg,
ransparent 0%,
rgba(10, 25, 47, 0.8) 50%,
ransparent 100%
);
overflow: hidden;
}
.section-transition::before {
content: '';
position: absolute;
op: 50%;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
ransparent 0%,
rgba(0, 122, 204, 0.4) 20%,
rgba(0, 122, 204, 0.8) 50%,
rgba(247, 147, 30, 0.8) 50%,
rgba(247, 147, 30, 0.4) 80%,
ransparent 100%
);
ransform: translateY(-50%);
animation: transitionPulse 4s ease-in-out infinite;
}
.section-transition::after {
content: '';
position: absolute;
op: 50%;
left: -10%;
width: 120%;
height: 2px;
background: linear-gradient(90deg,
ransparent,
rgba(255, 255, 255, 0.1),
ransparent
);
ransform: translateY(-50%);
animation: transitionSweep 6s ease-in-out infinite;
}
@keyframes transitionPulse {
0%, 100% {
opacity: 0.6;
ransform: translateY(-50%) scaleX(0.9);
}
50% {
opacity: 1;
ransform: translateY(-50%) scaleX(1.1);
}
}
@keyframes transitionSweep {
0% {
left: -120%;
}
50% {
left: 120%;
}
100% {
left: 120%;
}
}
/* ==========================================================================
NOWE KREATYWNE PRZEJŚCIA MIĘDZY SEKCJAMI
========================================================================== */
.geometric-divider,
.particle-divider,
.circuit-divider,
.dna-divider,
.wave-divider {
position: relative;
height: 60px;
margin: 0;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.geometric-divider::before,
.particle-divider::before,
.circuit-divider::before,
.dna-divider::before,
.wave-divider::before {
content: '';
position: absolute;
op: 50%;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
ransparent 0%,
rgba(0, 122, 204, 0.3) 25%,
rgba(0, 122, 204, 0.8) 50%,
rgba(247, 147, 30, 0.8) 50%,
rgba(247, 147, 30, 0.3) 75%,
ransparent 100%
);
ransform: translateY(-50%);
animation: unifiedPulse 3s ease-in-out infinite;
}
.geometric-shape,
.particle-container,
.particle,
.circuit-line,
.circuit-node,
.dna-strand,
.dna-point,
.wave-path {
display: none;
}
@keyframes unifiedPulse {
0%, 100% {
opacity: 0.5;
ransform: translateY(-50%) scaleX(1);
}
50% {
opacity: 1;
ransform: translateY(-50%) scaleX(1.05);
}
}
.wave-divider {
position: relative;
height: 60px;
overflow: hidden;
margin: 0;
}
.wave-path {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
.wave-path svg {
width: 100%;
height: 100%;
fill: none;
stroke: url(#waveGradient);
stroke-width: 3;
animation: waveFlow 6s ease-in-out infinite;
}
@keyframes waveFlow {
0%, 100% { opacity: 0.7; transform: translateX(0px); }
50% { opacity: 1; transform: translateX(10px); }
}
.particle-divider {
position: relative;
height: 100px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
}
.particle-container {
position: relative;
width: 100%;
height: 100%;
}
.particle {
position: absolute;
width: 4px;
height: 4px;
background: rgba(0, 122, 204, 0.8);
border-radius: 50%;
animation: particleFloat 8s ease-in-out infinite;
}
.particle:nth-child(1) { left: 10%; animation-delay: 0s; background: rgba(0, 122, 204, 0.8); }
.particle:nth-child(2) { left: 20%; animation-delay: 0.5s; background: rgba(247, 147, 30, 0.8); }
.particle:nth-child(3) { left: 30%; animation-delay: 1s; background: rgba(0, 122, 204, 0.6); }
.particle:nth-child(4) { left: 40%; animation-delay: 1.5s; background: rgba(247, 147, 30, 0.6); }
.particle:nth-child(5) { left: 50%; animation-delay: 2s; background: rgba(0, 122, 204, 0.9); }
.particle:nth-child(6) { left: 60%; animation-delay: 2.5s; background: rgba(247, 147, 30, 0.9); }
.particle:nth-child(7) { left: 70%; animation-delay: 3s; background: rgba(0, 122, 204, 0.7); }
.particle:nth-child(8) { left: 80%; animation-delay: 3.5s; background: rgba(247, 147, 30, 0.7); }
.particle:nth-child(9) { left: 90%; animation-delay: 4s; background: rgba(0, 122, 204, 0.5); }
@keyframes particleFloat {
0%, 100% {
ransform: translateY(40px);
opacity: 0;
}
10%, 90% {
opacity: 1;
}
50% {
ransform: translateY(-20px);
opacity: 1;
}
}
.circuit-divider {
position: relative;
height: 80px;
overflow: hidden;
display: flex;
align-items: center;
margin: 0;
}
.circuit-line {
position: absolute;
background: rgba(0, 122, 204, 0.6);
animation: circuitPulse 3s ease-in-out infinite;
}
.circuit-line.horizontal {
width: 100px;
height: 2px;
op: 50%;
ransform: translateY(-50%);
}
.circuit-line.vertical {
width: 2px;
height: 30px;
op: 50%;
ransform: translateY(-50%);
}
.circuit-node {
position: absolute;
width: 8px;
height: 8px;
background: rgba(247, 147, 30, 0.9);
border-radius: 50%;
op: 50%;
ransform: translateY(-50%);
animation: nodeGlow 2s ease-in-out infinite;
box-shadow: 0 0 10px rgba(247, 147, 30, 0.5);
}
.circuit-line:nth-child(1) { left: 0%; animation-delay: 0s; }
.circuit-line:nth-child(2) { left: 15%; animation-delay: 0.2s; }
.circuit-line:nth-child(3) { left: 30%; animation-delay: 0.4s; }
.circuit-line:nth-child(4) { left: 45%; animation-delay: 0.6s; }
.circuit-line:nth-child(5) { left: 60%; animation-delay: 0.8s; }
.circuit-line:nth-child(6) { left: 75%; animation-delay: 1s; }
.circuit-line:nth-child(7) { left: 90%; animation-delay: 1.2s; }
.circuit-node:nth-child(8) { left: 20%; }
.circuit-node:nth-child(9) { left: 40%; }
.circuit-node:nth-child(10) { left: 60%; }
.circuit-node:nth-child(11) { left: 80%; }
@keyframes circuitPulse {
0%, 100% { opacity: 0.3; background: rgba(0, 122, 204, 0.6); }
50% { opacity: 1; background: rgba(0, 122, 204, 1); }
}
@keyframes nodeGlow {
0%, 100% {
opacity: 0.7;
ransform: translateY(-50%) scale(1);
box-shadow: 0 0 10px rgba(247, 147, 30, 0.5);
}
50% {
opacity: 1;
ransform: translateY(-50%) scale(1.2);
box-shadow: 0 0 20px rgba(247, 147, 30, 0.8);
}
}
.dna-divider {
position: relative;
height: 100px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
}
.dna-strand {
position: absolute;
width: 200px;
height: 100px;
op: 50%;
left: 50%;
ransform: translate(-50%, -50%);
}
.dna-point {
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
animation: dnaRotate 4s linear infinite;
}
.dna-point.left {
background: rgba(0, 122, 204, 0.8);
left: 0;
}
.dna-point.right {
background: rgba(247, 147, 30, 0.8);
right: 0;
}
.dna-point:nth-child(1) { animation-delay: 0s; }
.dna-point:nth-child(2) { animation-delay: 0.1s; }
.dna-point:nth-child(3) { animation-delay: 0.2s; }
.dna-point:nth-child(4) { animation-delay: 0.3s; }
.dna-point:nth-child(5) { animation-delay: 0.4s; }
.dna-point:nth-child(6) { animation-delay: 0.5s; }
@keyframes dnaRotate {
0% {
ransform: translateX(0) translateY(0) rotateZ(0deg);
}
25% {
ransform: translateX(100px) translateY(-20px) rotateZ(90deg);
}
50% {
ransform: translateX(200px) translateY(0) rotateZ(180deg);
}
75% {
ransform: translateX(100px) translateY(20px) rotateZ(270deg);
}
100% {
ransform: translateX(0) translateY(0) rotateZ(360deg);
}
}
/* ==========================================================================
WIZUALNE SMACZKI I DODATKOWE ELEMENTY
========================================================================== */
.ambient-particles {
position: fixed;
op: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
overflow: hidden;
}
.ambient-particle {
position: absolute;
width: 2px;
height: 2px;
background: rgba(0, 122, 204, 0.4);
border-radius: 50%;
animation: ambientFloat 20s linear infinite;
}
.ambient-particle:nth-child(odd) {
background: rgba(247, 147, 30, 0.3);
animation-duration: 25s;
}
@keyframes ambientFloat {
0% {
ransform: translateY(100vh) translateX(0px);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
ransform: translateY(-10vh) translateX(100px);
opacity: 0;
}
}
.glass-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
ransition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.glass-card::before {
content: '';
position: absolute;
op: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
ransparent,
rgba(255, 255, 255, 0.1),
ransparent
);
ransition: left 0.5s ease;
}
.glass-card:hover::before {
left: 100%;
}
.glass-card:hover {
ransform: translateY(-4px);
box-shadow:
0 16px 48px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.glow-text {
ext-shadow:
0 0 5px rgba(0, 122, 204, 0.5),
0 0 10px rgba(0, 122, 204, 0.3),
0 0 20px rgba(0, 122, 204, 0.2);
animation: textGlow 3s ease-in-out infinite alternate;
}
@keyframes textGlow {
from {
ext-shadow:
0 0 5px rgba(0, 122, 204, 0.5),
0 0 10px rgba(0, 122, 204, 0.3),
0 0 20px rgba(0, 122, 204, 0.2);
}
o {
ext-shadow:
0 0 10px rgba(0, 122, 204, 0.8),
0 0 20px rgba(0, 122, 204, 0.5),
0 0 30px rgba(0, 122, 204, 0.3);
}
}
.hover-zone {
position: relative;
ransition: all 0.3s ease;
}
.hover-zone::after {
content: '';
position: absolute;
op: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at center,
rgba(0, 122, 204, 0.1) 0%,
ransparent 70%
);
opacity: 0;
ransition: opacity 0.3s ease;
pointer-events: none;
}
.newsletter-timer-box {
background: rgba(0, 122, 204, 0.05);
border: 2px solid rgba(0, 122, 204, 0.2);
border-radius: var(--border-radius-lg);
padding: 1.5rem;
margin-bottom: 2rem;
ext-align: center;
backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
}
.newsletter-timer-box::before {
content: '';
position: absolute;
op: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent-blue) 0%, var(--accent-gold) 100%);
animation: timerPulse 2s ease-in-out infinite;
}
.timer-title {
font-size: 1.1rem;
font-weight: 700;
color: var(--text-primary-light);
margin-bottom: 1rem;
}
.countdown-timer-compact {
display: flex;
justify-content: center;
gap: 1rem;
}
.countdown-timer-compact .countdown-item {
display: flex;
flex-direction: column;
align-items: center;
min-width: 60px;
}
.countdown-timer-compact .countdown-number {
font-size: 1.8rem;
font-weight: 900;
color: var(--accent-blue);
font-family: var(--font-family-mono);
background: rgba(0, 122, 204, 0.1);
padding: 0.5rem;
border-radius: 8px;
min-width: 50px;
display: inline-block;
}
.countdown-timer-compact .countdown-label {
font-size: 0.7rem;
font-weight: 600;
color: var(--text-secondary);
ext-transform: uppercase;
letter-spacing: 0.05em;
margin-top: 0.25rem;
}
.newsletter-scarcity-inline {
margin-top: 1rem;
padding: 1rem;
background: rgba(247, 147, 30, 0.05);
border: 1px solid rgba(247, 147, 30, 0.1);
border-radius: var(--border-radius-md);
ext-align: center;
}
.newsletter-scarcity-inline p {
font-size: 0.9rem;
color: var(--text-secondary);
font-style: italic;
margin: 0;
line-height: 1.4;
}
@keyframes timerPulse {
0%, 100% {
opacity: 0.6;
ransform: scaleX(1);
}
50% {
opacity: 1;
ransform: scaleX(1.02);
}
}
@media (max-width: 768px) {
.newsletter-timer-box {
padding: 1rem;
margin-bottom: 1.5rem;
}
.countdown-timer-compact {
gap: 0.5rem;
}
.countdown-timer-compact .countdown-number {
font-size: 1.4rem;
padding: 0.3rem;
min-width: 40px;
}
.timer-title {
font-size: 1rem;
}
}
.hover-zone:hover::after {
opacity: 1;
}
.scroll-indicator {
position: fixed;
right: 2rem;
op: 50%;
ransform: translateY(-50%);
z-index: 100;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.scroll-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
ransition: all 0.3s ease;
cursor: pointer;
}
.scroll-dot.active {
background: var(--accent-blue);
ransform: scale(1.2);
box-shadow: 0 0 10px rgba(0, 122, 204, 0.5);
}
.micro-button {
position: relative;
overflow: hidden;
ransform: translateZ(0);
}
.micro-button::before {
content: '';
position: absolute;
op: 50%;
left: 50%;
width: 0;
height: 0;
background: radial-gradient(circle,
rgba(255, 255, 255, 0.2) 0%,
ransparent 70%
);
ransition: all 0.4s ease;
ransform: translate(-50%, -50%);
border-radius: 50%;
}
.micro-button:hover::before {
width: 300px;
height: 300px;
}
@media (max-width: 768px) {
.ambient-particles {
display: none;
}
.scroll-indicator {
display: none;
}
.glass-card {
backdrop-filter: blur(10px);
}
}
/* ==========================================================================
STATISTICS SECTION - ANIMATED CARDS
========================================================================== */
.statistics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.statistic-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 2rem;
ext-align: center;
position: relative;
overflow: hidden;
ransform: translateY(50px);
opacity: 0;
ransition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
}
.statistic-card.animate-in {
ransform: translateY(0) !important;
opacity: 1 !important;
}
.statistic-card.test-visible {
ransform: translateY(0) !important;
opacity: 1 !important;
background: rgba(255, 255, 255, 0.1) !important;
border-color: #007acc !important;
}
.statistic-card::before {
content: '';
position: absolute;
op: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
ransition: left 0.5s ease;
}
.statistic-card:hover::before {
left: 100%;
}
.statistic-card:hover {
ransform: translateY(-8px) scale(1.02);
border-color: rgba(0, 122, 204, 0.3);
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.3),
0 0 30px rgba(0, 122, 204, 0.2);
}
.stat-icon {
font-size: 2.5rem;
margin-bottom: 1rem;
display: block;
opacity: 0.8;
ransition: all 0.3s ease;
}
.statistic-card:hover .stat-icon {
ransform: scale(1.2) rotateY(360deg);
opacity: 1;
}
.stat-number {
font-size: 3rem;
font-weight: 800;
color: #ffffff;
margin-bottom: 0.5rem;
ext-shadow: 0 0 20px rgba(0, 122, 204, 0.5);
ransition: all 0.3s ease;
display: block;
}
.stat-number.triumph {
color: #f7931e;
ext-shadow: 0 0 20px rgba(247, 147, 30, 0.6);
}
.stat-number.success {
color: #4ade80;
ext-shadow: 0 0 20px rgba(74, 222, 128, 0.6);
}
.stat-number.failure {
color: #ef4444;
ext-shadow: 0 0 20px rgba(239, 68, 68, 0.6);
}
.statistic-card:hover .stat-number {
ransform: scale(1.1);
filter: brightness(1.2);
}
.stat-label {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.8);
line-height: 1.4;
ransition: color 0.3s ease;
}
.statistic-card:hover .stat-label {
color: #ffffff;
}
.stat-icon.triumph {
filter: hue-rotate(30deg) brightness(1.2);
}
.stat-icon.success {
filter: hue-rotate(120deg) brightness(1.2);
}
.stat-icon.failure {
filter: hue-rotate(0deg) brightness(1.2);
}
.stat-number[data-count] {
position: relative;
}
.stat-number[data-count]::after {
content: '';
position: absolute;
op: -5px;
right: -10px;
width: 8px;
height: 8px;
background: var(--accent-blue);
border-radius: 50%;
opacity: 0;
animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
0%, 100% { opacity: 0; transform: scale(0.8); }
50% { opacity: 1; transform: scale(1.2); }
}
.statistic-card.hologram {
position: relative;
}
.statistic-card.hologram::after {
content: '';
position: absolute;
op: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg,
ransparent 30%,
rgba(0, 122, 204, 0.1) 50%,
ransparent 70%);
opacity: 0;
ransition: opacity 0.3s ease;
pointer-events: none;
background-size: 200% 200%;
animation: hologram-sweep 3s ease-in-out infinite;
}
.statistic-card:hover.hologram::after {
opacity: 1;
}
@keyframes hologram-sweep {
0% { background-position: 0% 0%; }
50% { background-position: 100% 100%; }
100% { background-position: 0% 0%; }
}
@media (max-width: 768px) {
.statistics-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.statistic-card {
padding: 1.5rem;
}
.stat-number {
font-size: 2.5rem;
}
.stat-icon {
font-size: 2rem;
}
}
/* ==========================================================================
CEO NEWSLETTER SECTION - ELEGANT L/R LAYOUT
========================================================================== */
.ceo-newsletter {
padding: 4rem 0;
background: linear-gradient(135deg,
rgba(10, 25, 47, 0.95) 0%,
rgba(15, 30, 52, 0.98) 50%,
rgba(10, 25, 47, 0.95) 100%);
position: relative;
overflow: hidden;
}
.ceo-newsletter::before {
content: '';
position: absolute;
op: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(ellipse at center, rgba(0, 122, 204, 0.05) 0%, transparent 70%);
pointer-events: none;
}
.newsletter-layout {
display: grid;
grid-template-columns: 3fr 1fr !important;
gap: 1.5rem;
align-items: stretch;
position: relative;
z-index: 2;
}
.newsletter-value {
display: flex;
flex-direction: column;
gap: 1rem;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 1.5rem 2rem;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
position: relative;
overflow: hidden;
margin-top: 0;
}
.newsletter-value::before {
content: '';
position: absolute;
op: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #f7931e, #007acc);
}
.newsletter-header {
border-bottom: 2px solid rgba(0, 122, 204, 0.3);
padding-bottom: 1.5rem;
margin-bottom: 1rem;
}
.newsletter-title {
font-size: 3.5rem;
font-weight: 900;
color: #ffffff !important;
margin-bottom: 0.5rem;
ext-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
}
.newsletter-subtitle {
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.8);
margin: 0;
}
.newsletter-timing {
font-size: 0.9rem;
color: #007acc;
margin: 0.5rem 0 0 0;
font-weight: 600;
}
.newsletter-benefits {
display: flex;
flex-direction: column;
gap: 1rem;
}
.benefit-item {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1rem;
background: rgba(255, 255, 255, 0.03);
border-radius: 8px;
border-left: 3px solid rgba(0, 122, 204, 0.5);
ransition: all 0.3s ease;
}
.benefit-item:hover {
background: rgba(255, 255, 255, 0.05);
border-left-color: rgba(0, 122, 204, 0.8);
}
.benefit-icon {
font-size: 1.5rem;
flex-shrink: 0;
margin-top: 0.1rem;
}
.benefit-text {
color: rgba(255, 255, 255, 0.9);
line-height: 1.5;
font-size: 0.95rem;
}
.newsletter-countdown-wrapper {
width: 100%;
display: flex;
justify-content: center;
margin-top: 1.5rem;
margin-bottom: 1rem;
}
.newsletter-countdown {
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
padding: 2rem;
border: 1px solid rgba(0, 122, 204, 0.2);
ext-align: center;
max-width: 800px;
width: 100%;
backdrop-filter: blur(10px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.countdown-title {
color: #ffffff;
font-size: 1.1rem;
margin-bottom: 1rem;
ext-align: center;
}
.countdown-timer {
display: flex;
justify-content: center;
gap: 1rem;
margin-bottom: 1rem;
}
.countdown-item {
ext-align: center;
background: rgba(0, 122, 204, 0.1);
border-radius: 8px;
padding: 0.8rem 0.5rem;
min-width: 60px;
}
.countdown-number {
display: block;
font-size: 1.5rem;
font-weight: 800;
color: #007acc;
ext-shadow: 0 0 10px rgba(0, 122, 204, 0.5);
}
.countdown-label {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.7);
margin-top: 0.2rem;
}
.newsletter-scarcity {
margin-top: 1rem;
}
.newsletter-scarcity p {
color: rgba(255, 255, 255, 0.8);
font-style: italic;
line-height: 1.5;
margin: 0;
}
.newsletter-signup {
display: flex;
align-items: stretch;
}
.signup-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 2rem;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
position: relative;
overflow: hidden;
margin-top: 0;
flex: 1;
display: flex;
flex-direction: column;
}
.signup-card::before {
content: '';
position: absolute;
op: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #007acc, #f7931e);
}
.newsletter-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
flex: 1;
justify-content: center;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.form-group label {
color: rgba(255, 255, 255, 0.9);
font-size: 0.9rem;
font-weight: 600;
}
.form-input {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
padding: 1rem;
color: #ffffff;
font-size: 1rem;
ransition: all 0.3s ease;
}
.form-input:focus {
outline: none;
border-color: #007acc;
background: rgba(255, 255, 255, 0.12);
box-shadow: 0 0 0 3px rgba(0, 122, 204, 0.2);
}
.form-input::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.form-checkboxes {
display: flex;
flex-direction: column;
gap: 1rem;
}
.checkbox-label {
display: flex;
align-items: flex-start;
gap: 0.8rem;
cursor: pointer;
position: relative;
}
.checkbox-label input[type="checkbox"] {
display: none;
}
.checkmark {
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
ransition: all 0.3s ease;
flex-shrink: 0;
margin-top: 0.1rem;
}
.checkbox-label input[type="checkbox"]:checked + .checkmark {
background: #007acc;
border-color: #007acc;
}
.checkbox-label input[type="checkbox"]:checked + .checkmark::after {
content: '✓';
color: white;
font-size: 12px;
font-weight: bold;
}
.checkbox-text {
color: rgba(255, 255, 255, 0.8);
font-size: 0.85rem;
line-height: 1.4;
}
.newsletter-submit {
background: linear-gradient(135deg, #007acc 0%, #0056b3 100%);
border: none;
border-radius: 12px;
padding: 1.2rem 2rem;
color: white;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
ransition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
position: relative;
overflow: hidden;
}
.newsletter-submit::before {
content: '';
position: absolute;
op: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
ransition: left 0.5s ease;
}
.newsletter-submit:hover::before {
left: 100%;
}
.newsletter-submit:hover {
ransform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 122, 204, 0.4);
}
.button-icon {
ransition: transform 0.3s ease;
}
.newsletter-submit:hover .button-icon {
ransform: translateX(3px);
}
@media (max-width: 768px) {
.newsletter-layout {
grid-template-columns: 1fr;
gap: 3rem;
}
.newsletter-signup {
position: static;
}
.newsletter-title {
font-size: 2.5rem;
color: #ffffff !important;
ext-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
}
.countdown-timer {
gap: 0.5rem;
}
.countdown-item {
min-width: 50px;
padding: 0.6rem 0.3rem;
}
.signup-card {
padding: 2rem;
}
}
/* ==========================================================================
1% IMPROVEMENTS - TYPING EFFECT & SMART VALIDATION
========================================================================== */
.newsletter-typing {
position: relative;
overflow: hidden;
}
.newsletter-typing::after {
content: '|';
position: absolute;
right: 0;
color: var(--accent-blue);
animation: typing-cursor 1s infinite;
font-weight: normal;
}
.newsletter-typing.typing-active::after {
animation: typing-cursor 1s infinite;
}
@keyframes typing-cursor {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
.typing-wrapper {
display: inline-block;
position: relative;
}
.form-input {
position: relative;
ransition: all 0.3s ease;
}
.form-input.valid {
border-color: #10b981;
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}
.form-input.invalid {
border-color: #ef4444;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
.validation-icon {
position: absolute;
right: 1rem;
op: 50%;
ransform: translateY(-50%);
font-size: 1.2rem;
ransition: all 0.3s ease;
opacity: 0;
}
.validation-icon.show {
opacity: 1;
}
.validation-icon.valid {
color: #10b981;
}
.validation-icon.invalid {
color: #ef4444;
}
.validation-message {
font-size: 0.8rem;
margin-top: 0.5rem;
ransition: all 0.3s ease;
opacity: 0;
ransform: translateY(-10px);
}
.validation-message.show {
opacity: 1;
ransform: translateY(0);
}
.validation-message.valid {
color: #10b981;
}
.validation-message.invalid {
color: #ef4444;
}
/* ==========================================================================
PILLAR ENHANCEMENTS - 5 IMPROVEMENTS PACK
========================================================================== */
.pillar-card {
opacity: 0;
ransform: translateY(60px) scale(0.95);
ransition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.pillar-card.reveal-active {
opacity: 1;
ransform: translateY(0) scale(1);
}
.pillar-card:nth-child(1) { transition-delay: 0ms; }
.pillar-card:nth-child(2) { transition-delay: 200ms; }
.pillar-card:nth-child(3) { transition-delay: 400ms; }
.pillar-card:nth-child(4) { transition-delay: 600ms; }
.pillar-card:nth-child(5) { transition-delay: 800ms; }
.pillar-card:nth-child(6) { transition-delay: 1000ms; }
.pillar-card:hover {
ransform: translateY(-15px) rotateX(5deg) rotateY(-2deg) scale(1.02);
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.4),
0 15px 30px rgba(0, 122, 204, 0.2),
0 5px 15px rgba(247, 147, 30, 0.1);
z-index: 10;
ransition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.pillars-progress {
position: fixed;
op: 50%;
right: 2rem;
ransform: translateY(-50%);
background: rgba(0, 122, 204, 0.1);
backdrop-filter: blur(20px);
border: 1px solid rgba(0, 122, 204, 0.3);
border-radius: 20px;
padding: 1rem 0.5rem;
z-index: 100;
ransition: all 0.3s ease;
opacity: 0;
pointer-events: none;
}
.pillars-progress.show {
opacity: 1;
pointer-events: auto;
}
.progress-counter {
writing-mode: vertical-lr;
font-size: 0.9rem;
font-weight: 600;
color: var(--accent-blue);
margin-bottom: 0.5rem;
}
.progress-dots {
display: flex;
flex-direction: column;
gap: 0.5rem;
align-items: center;
}
.progress-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
ransition: all 0.3s ease;
}
.progress-dot.active {
background: var(--accent-blue);
box-shadow: 0 0 10px rgba(0, 122, 204, 0.5);
ransform: scale(1.3);
}
.pillar-card-inner {
ransition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.pillar-card.auto-flipped .pillar-card-inner {
ransform: rotateY(180deg);
}
.pillar-card.manual-flipped .pillar-card-inner {
ransform: rotateY(180deg);
}
.pillar-number {
position: relative;
ransition: all 0.3s ease;
}
.pillar-number::before {
content: '';
position: absolute;
op: 50%;
left: 50%;
ransform: translate(-50%, -50%);
width: 120%;
height: 120%;
background: radial-gradient(circle, rgba(0, 122, 204, 0.2) 0%, transparent 70%);
border-radius: 50%;
opacity: 0;
animation: pulse-ready 2s ease-in-out infinite;
}
.pillar-card:hover .pillar-number::before {
animation: pulse-active 1s ease-in-out infinite;
opacity: 1;
}
@keyframes pulse-ready {
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.8; }
}
@keyframes pulse-active {
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
}
.pillar-title, .pillar-desc, .pillar-question {
ransition: all 0.3s ease;
}
.pillar-card:hover .pillar-title {
color: var(--accent-blue);
ransform: translateY(-2px);
}
.pillar-card:hover .pillar-desc {
color: var(--text-primary-light);
}
@media (max-width: 768px) {
.pillars-progress {
display: none;
}
.pillar-card:hover {
ransform: translateY(-8px) scale(1.01);
}
}/* ==========================================================================
FAQ SECTION - PROGRESSIVE DISCLOSURE SYSTEM
========================================================================== */
.faq-section {
background: var(--primary-dark);
position: relative;
overflow: hidden;
}
.faq-section::before {
content: '';
position: absolute;
op: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(ellipse at top right, rgba(0, 122, 204, 0.05) 0%, transparent 50%),
radial-gradient(ellipse at bottom left, rgba(247, 147, 30, 0.03) 0%, transparent 50%);
pointer-events: none;
}
.faq-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: var(--space-2xl);
margin: var(--space-2xl) 0;
position: relative;
z-index: 2;
}
.faq-category {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--border-radius-lg);
padding: var(--space-xl);
ransition: all 0.3s ease;
}
.faq-category:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(0, 122, 204, 0.2);
ransform: translateY(-4px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.faq-category-header {
display: flex;
align-items: center;
margin-bottom: var(--space-lg);
padding-bottom: var(--space-md);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.faq-icon {
font-size: 2rem;
margin-right: var(--space-md);
background: rgba(0, 122, 204, 0.1);
padding: var(--space-sm);
border-radius: var(--border-radius-md);
border: 1px solid rgba(0, 122, 204, 0.2);
}
.faq-category-title {
font-size: 1.4rem;
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
margin: 0;
}
.faq-item {
margin-bottom: var(--space-lg);
}
.faq-item:last-child {
margin-bottom: 0;
}
.faq-question {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-md);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--border-radius-md);
cursor: pointer;
ransition: all 0.3s ease;
user-select: none;
}
.faq-question:hover {
background: rgba(0, 122, 204, 0.1);
border-color: rgba(0, 122, 204, 0.3);
ransform: translateX(4px);
}
.faq-question-text {
font-size: 1.1rem;
font-weight: var(--font-weight-medium);
color: var(--text-primary);
line-height: 1.4;
flex: 1;
margin-right: var(--space-md);
}
.faq-toggle {
font-size: 1.5rem;
font-weight: var(--font-weight-bold);
color: var(--accent-blue);
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 122, 204, 0.1);
border-radius: 50%;
ransition: all 0.3s ease;
}
.faq-question.active .faq-toggle {
ransform: rotate(45deg);
background: rgba(0, 122, 204, 0.2);
}
.faq-answer {
max-height: 0;
overflow: hidden;
ransition: max-height 0.5s ease, padding 0.3s ease;
background: rgba(255, 255, 255, 0.02);
border-left: 3px solid rgba(0, 122, 204, 0.3);
margin-top: var(--space-sm);
border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
}
.faq-answer.active {
max-height: 1000px;
padding: var(--space-lg);
}
.faq-answer p {
color: var(--text-light);
line-height: 1.6;
margin-bottom: var(--space-md);
font-size: 1rem;
}
.faq-answer p:last-child {
margin-bottom: 0;
}
.faq-answer strong {
color: var(--text-primary);
font-weight: var(--font-weight-semibold);
}
.faq-cta {
ext-align: center;
margin-top: var(--space-3xl);
padding: var(--space-2xl);
background: rgba(0, 122, 204, 0.05);
border: 1px solid rgba(0, 122, 204, 0.2);
border-radius: var(--border-radius-lg);
position: relative;
z-index: 2;
}
.faq-cta-text {
font-size: 1.2rem;
color: var(--text-light);
margin-bottom: var(--space-lg);
}
.faq-cta-text strong {
color: var(--accent-blue);
font-weight: var(--font-weight-semibold);
}
.faq-cta-button {
display: inline-block;
background: var(--accent-blue);
color: var(--white);
padding: var(--space-md) var(--space-2xl);
border-radius: var(--border-radius-md);
font-size: 1.1rem;
font-weight: var(--font-weight-semibold);
ext-decoration: none;
ransition: all 0.3s ease;
border: none;
cursor: pointer;
}
.faq-cta-button:hover {
background: var(--accent-blue-light);
ransform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 122, 204, 0.3);
}
@media (max-width: 768px) {
.faq-grid {
grid-template-columns: 1fr;
gap: var(--space-xl);
}
.faq-category {
padding: var(--space-lg);
}
.faq-question-text {
font-size: 1rem;
}
.faq-answer p {
font-size: 0.9rem;
}
}
@media (max-width: 480px) {
.faq-category-header {
flex-direction: column;
align-items: flex-start;
gap: var(--space-sm);
}
.faq-icon {
font-size: 1.5rem;
margin-right: 0;
}
.faq-question {
padding: var(--space-sm);
}
.faq-question-text {
font-size: 0.95rem;
margin-right: var(--space-sm);
}
}/* ==========================================================================
NAVIGATION COMPONENTS - DANIEL WOŹNIAK
========================================================================== */
.top-nav {
position: fixed;
op: 0;
left: 0;
width: 100%;
background: var(--nav-bg);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
z-index: var(--z-sticky);
ransition: var(--transition-normal);
}
.nav-content {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-md) 0;
}
.nav-logo {
font-size: clamp(1.3rem, 2.5vw, 1.5rem);
font-weight: 900;
color: #ffffff;
ext-decoration: none;
ransition: var(--transition-fast);
letter-spacing: -1px;
font-family: var(--font-family-base);
}
.nav-logo:hover {
color: var(--accent-blue);
}
.logo-sygnet {
height: 48px;
width: 48px;
object-fit: cover;
object-position: center top;
ransition: var(--transition-fast);
filter: brightness(0) invert(1); 
clip-path: circle(45% at 50% 25%); 
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
padding: 2px;
}
.nav-logo:hover .logo-sygnet {
ransform: scale(1.1);
filter: brightness(0) invert(1) drop-shadow(0 0 12px var(--accent-blue));
border-color: var(--accent-blue);
background: rgba(0, 122, 204, 0.1);
}
.nav-menu {
display: flex;
align-items: center;
gap: var(--space-xl);
list-style: none;
}
.nav-menu a {
color: var(--nav-text);
font-weight: var(--font-weight-medium);
ext-decoration: none;
ransition: var(--transition-fast);
position: relative;
}
.nav-menu a:hover {
color: var(--accent-blue);
}
.nav-menu a::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 2px;
background: var(--accent-blue);
ransition: var(--transition-fast);
}
.nav-menu a:hover::after {
width: 100%;
}
.nav-highlight {
background: var(--accent-blue) !important;
color: var(--white) !important;
padding: var(--space-sm) var(--space-md) !important;
border-radius: var(--border-radius-md) !important;
font-weight: var(--font-weight-semibold) !important;
}
.nav-highlight:hover {
background: var(--accent-blue-light) !important;
ransform: translateY(-2px);
}
.nav-highlight::after {
display: none !important;
}
.nav-toggle {
display: none;
flex-direction: column;
background: none;
border: none;
cursor: pointer;
padding: var(--space-sm);
gap: 4px;
}
.nav-toggle span {
width: 25px;
height: 3px;
background: var(--nav-text);
ransition: var(--transition-fast);
border-radius: 2px;
}
.nav-toggle.active span:nth-child(1) {
ransform: rotate(45deg) translate(6px, 6px);
}
.nav-toggle.active span:nth-child(2) {
opacity: 0;
}
.nav-toggle.active span:nth-child(3) {
ransform: rotate(-45deg) translate(6px, -6px);
}
.floating-nav {
position: fixed;
right: var(--space-xl);
op: 50%;
ransform: translateY(-50%);
z-index: var(--z-elevated);
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.nav-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
cursor: pointer;
ransition: var(--transition-fast);
position: relative;
}
.nav-dot:hover,
.nav-dot.active {
background: var(--accent-blue);
ransform: scale(1.2);
}
.nav-dot::before {
content: attr(data-section);
position: absolute;
right: 24px;
op: 50%;
ransform: translateY(-50%);
background: var(--primary-dark);
color: var(--white);
padding: var(--space-xs) var(--space-sm);
border-radius: var(--border-radius-sm);
font-size: 0.75rem;
font-weight: var(--font-weight-medium);
white-space: nowrap;
opacity: 0;
visibility: hidden;
ransition: var(--transition-fast);
border: 1px solid var(--accent-blue);
}
.nav-dot:hover::before {
opacity: 1;
visibility: visible;
}
.back-to-top {
position: fixed;
bottom: var(--space-xl);
right: var(--space-xl);
width: 50px;
height: 50px;
background: var(--accent-blue);
color: var(--white);
border: none;
border-radius: 50%;
cursor: pointer;
font-size: 1.25rem;
font-weight: var(--font-weight-bold);
opacity: 0;
visibility: hidden;
ransition: var(--transition-normal);
z-index: var(--z-elevated);
box-shadow: var(--shadow-lg);
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
background: var(--accent-blue-light);
ransform: translateY(-4px);
box-shadow: var(--shadow-xl);
}
.footer {
background: var(--primary-dark);
color: var(--text-light);
padding: var(--space-4xl) 0 var(--space-xl);
margin-top: var(--space-4xl);
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--space-2xl);
margin-bottom: var(--space-2xl);
}
.footer-section h3 {
color: var(--white);
font-size: clamp(1.125rem, 2.5vw, 1.25rem);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-lg);
}
.footer-section p {
color: var(--text-light);
line-height: var(--line-height-relaxed);
margin-bottom: var(--space-md);
}
.footer-links {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.footer-links a {
color: var(--text-light);
ext-decoration: none;
ransition: var(--transition-fast);
}
.footer-links a:hover {
color: var(--accent-blue);
}
.footer-bottom {
ext-align: center;
padding-top: var(--space-xl);
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: var(--text-muted);
font-size: clamp(0.875rem, 2vw, 1rem);
}
@media (max-width: 768px) {
.nav-menu {
position: fixed;
op: 70px;
right: -100%;
width: 80%;
max-width: 300px;
height: calc(100vh - 70px);
background: var(--primary-dark);
flex-direction: column;
align-items: flex-start;
padding: var(--space-xl);
gap: var(--space-lg);
ransition: var(--transition-normal);
box-shadow: var(--shadow-xl);
}
.nav-menu.active {
right: 0;
}
.nav-toggle {
display: flex;
}
.floating-nav {
display: none;
}
.back-to-top {
bottom: var(--space-lg);
right: var(--space-lg);
width: 45px;
height: 45px;
font-size: 1rem;
}
.footer-content {
grid-template-columns: 1fr;
gap: var(--space-xl);
ext-align: center;
}
}
@media (max-width: 480px) {
.nav-content {
padding: var(--space-sm) 0;
}
.nav-menu {
width: 90%;
op: 60px;
height: calc(100vh - 60px);
padding: var(--space-lg);
}
.footer {
padding: var(--space-2xl) 0 var(--space-lg);
}
}/* ==========================================================================
HERO ORBITAL STATS - FLIP CARDS WOKÓŁ ZDJĘCIA
========================================================================== */
.hero-orbital-section {
padding: 4rem 0;
position: relative;
overflow: hidden;
background: linear-gradient(135deg,
rgba(0, 122, 204, 0.03) 0%,
rgba(10, 25, 47, 0.05) 50%,
rgba(247, 147, 30, 0.02) 100%
);
border-top: 1px solid rgba(255, 255, 255, 0.05);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.orbital-showcase {
position: relative;
width: 100%;
height: 600px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
max-width: 900px;
}
.orbital-center {
position: absolute;
op: 50%;
left: 50%;
ransform: translate(-50%, -50%);
z-index: 10;
}
.hero-photo-orbital {
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
position: relative;
border: 4px solid var(--accent-blue);
box-shadow: 0 20px 60px rgba(0, 122, 204, 0.3);
}
.orbital-photo {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 20%;
}
.photo-glow {
position: absolute;
op: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border-radius: 50%;
background: radial-gradient(circle, rgba(0, 122, 204, 0.2) 0%, transparent 70%);
animation: photoGlow 4s ease-in-out infinite;
pointer-events: none;
}
@keyframes photoGlow {
0%, 100% { opacity: 0.5; transform: scale(1); }
50% { opacity: 1; transform: scale(1.1); }
}
.orbital-stats {
position: relative;
width: 100%;
height: 100%;
}
.flip-card {
position: absolute;
width: 120px;
height: 120px;
perspective: 1000px;
cursor: pointer;
opacity: 0;
ransform: scale(0.8);
ransition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.flip-card.animate {
opacity: 1;
ransform: scale(1);
}
.flip-card[data-position="1"] {
op: 10%;
left: 50%;
ransform: translateX(-50%) scale(0.8);
}
.flip-card[data-position="1"].animate {
ransform: translateX(-50%) scale(1);
}
.flip-card[data-position="2"] { top: 20%; right: 15%; }
.flip-card[data-position="3"] { top: 45%; right: 5%; }
.flip-card[data-position="4"] { bottom: 20%; right: 15%; }
.flip-card[data-position="5"] {
bottom: 10%;
left: 50%;
ransform: translateX(-50%) scale(0.8);
}
.flip-card[data-position="5"].animate {
ransform: translateX(-50%) scale(1);
}
.flip-card[data-position="6"] { bottom: 20%; left: 15%; }
.flip-card[data-position="7"] { top: 45%; left: 5%; }
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
ext-align: center;
ransition: transform 0.8s;
ransform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
ransform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: var(--border-radius-xl);
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.flip-card-front {
ransform: rotateY(0deg);
}
.flip-card-back {
ransform: rotateY(180deg);
padding: 1rem;
}
.flip-card-front.success, .flip-card-back.success {
border-left: 4px solid #22c55e;
background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(34, 197, 94, 0.05) 100%);
}
.flip-card-front.failure, .flip-card-back.failure {
border-left: 4px solid #ef4444;
background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
}
.flip-card-front.triumph, .flip-card-back.triumph {
border-left: 4px solid var(--accent-gold);
background: linear-gradient(135deg, rgba(247, 147, 30, 0.15) 0%, rgba(247, 147, 30, 0.05) 100%);
}
.flip-number {
font-size: clamp(1.2rem, 2.5vw, 1.8rem);
font-weight: 900;
color: var(--accent-blue);
display: block;
line-height: 1;
}
.flip-card-front.success .flip-number {
color: #22c55e;
}
.flip-card-front.failure .flip-number {
color: #ef4444;
}
.flip-card-front.triumph .flip-number {
color: var(--accent-gold);
}
.flip-desc {
font-size: 0.75rem;
color: var(--text-secondary);
ext-transform: uppercase;
letter-spacing: 0.05em;
line-height: 1.2;
font-weight: 600;
ext-align: center;
}
.flip-card-back.success .flip-desc {
color: #22c55e;
}
.flip-card-back.failure .flip-desc {
color: #ef4444;
}
.flip-card-back.triumph .flip-desc {
color: var(--accent-gold);
}
.flip-card:hover {
ransform: translateY(-10px) scale(1.05);
z-index: 20;
}
.flip-card[data-position="1"]:hover {
ransform: translateX(-50%) translateY(-10px) scale(1.05);
}
.flip-card[data-position="5"]:hover {
ransform: translateX(-50%) translateY(-10px) scale(1.05);
}
.flip-card:hover .flip-card-front,
.flip-card:hover .flip-card-back {
box-shadow: 0 20px 50px rgba(0, 122, 204, 0.3);
}
@media (max-width: 768px) {
.orbital-showcase {
height: 500px;
max-width: 100%;
}
.hero-photo-orbital {
width: 150px;
height: 150px;
}
.flip-card {
width: 100px;
height: 100px;
}
.flip-number {
font-size: 1rem;
}
.flip-desc {
font-size: 0.65rem;
}
.flip-card[data-position="2"] { top: 15%; right: 10%; }
.flip-card[data-position="3"] { top: 40%; right: 0%; }
.flip-card[data-position="4"] { bottom: 15%; right: 10%; }
.flip-card[data-position="6"] { bottom: 15%; left: 10%; }
.flip-card[data-position="7"] { top: 40%; left: 0%; }
}
@media (max-width: 480px) {
.orbital-showcase {
height: 400px;
}
.hero-photo-orbital {
width: 120px;
height: 120px;
}
.flip-card {
width: 80px;
height: 80px;
}
.flip-number {
font-size: 0.9rem;
}
.flip-desc {
font-size: 0.6rem;
}
}/* ==========================================================================
CARD COMPONENTS - DANIEL WOŹNIAK
========================================================================== */
.card {
background: var(--card-bg);
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
overflow: hidden;
ransition: var(--transition-normal);
}
.card:hover {
ransform: translateY(-4px);
box-shadow: var(--shadow-xl);
}
.card-header {
padding: var(--space-lg);
border-bottom: 1px solid var(--card-border);
}
.card-body {
padding: var(--space-lg);
}
.card-footer {
padding: var(--space-lg);
border-top: 1px solid var(--card-border);
background: rgba(0, 0, 0, 0.02);
}
.pillar-card {
background: transparent;
perspective: 1000px;
min-height: 400px;
border: 1px solid var(--card-border);
border-radius: var(--border-radius-lg);
ransition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.pillar-card-inner {
position: relative;
width: 100%;
height: 100%;
ext-align: center;
ransition: transform 0.8s;
ransform-style: preserve-3d;
}
.pillar-card:hover .pillar-card-inner {
ransform: rotateY(180deg);
}
.pillar-card-front,
.pillar-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: var(--space-xl);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: var(--border-radius-lg);
}
.pillar-card-back {
ransform: rotateY(180deg);
background: var(--primary-dark);
color: var(--white);
}
.pillar-number {
font-size: 3rem;
font-weight: var(--font-weight-bold);
color: var(--accent-blue);
margin-bottom: var(--space-md);
font-family: var(--font-family-mono);
}
.pillar-title {
font-size: clamp(1.25rem, 3vw, 1.5rem);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-md);
line-height: var(--line-height-tight);
color: var(--text-primary-light);
}
.pillar-desc {
font-size: clamp(0.875rem, 2vw, 1rem);
line-height: var(--line-height-relaxed);
color: var(--text-light);
}
.pillar-card-back .pillar-desc {
color: var(--text-light);
}
.insight-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--border-radius-lg);
padding: var(--space-xl);
ext-align: center;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
ransition: var(--transition-normal);
}
.insight-card:hover {
border-color: rgba(0, 122, 204, 0.3);
ransform: translateY(-8px);
box-shadow: 0 16px 48px rgba(0, 122, 204, 0.2);
}
.insight-icon {
font-size: 3rem;
margin-bottom: var(--space-md);
display: block;
}
.insight-title {
font-size: clamp(1.125rem, 2.5vw, 1.25rem);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-md);
color: var(--text-primary-light);
}
.insight-desc {
font-size: clamp(0.875rem, 2vw, 1rem);
line-height: var(--line-height-relaxed);
color: var(--text-light);
}
.insight-item {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--border-radius-lg);
padding: var(--space-xl);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
ransition: var(--transition-normal);
border-left: 4px solid var(--accent-blue);
}
.insight-item:hover {
ransform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-left-width: 6px;
}
.insight-header {
margin-bottom: var(--space-lg);
}
.insight-tag {
display: inline-block;
background: var(--accent-blue);
color: var(--white);
padding: var(--space-xs) var(--space-sm);
border-radius: var(--border-radius-sm);
font-size: 0.75rem;
font-weight: var(--font-weight-semibold);
ext-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--space-md);
}
.insight-quote {
font-size: clamp(1rem, 2.5vw, 1.125rem);
font-style: italic;
color: var(--text-muted);
margin-bottom: var(--space-md);
}
.insight-quote::before {
content: '"';
color: var(--accent-blue);
font-size: 1.5em;
margin-right: 0.25em;
}
.insight-quote::after {
content: '"';
color: var(--accent-blue);
font-size: 1.5em;
margin-left: 0.25em;
}
.insight-response h4 {
color: var(--primary-dark);
font-size: clamp(1.125rem, 2.5vw, 1.25rem);
margin-bottom: var(--space-sm);
}
.insight-response p {
color: var(--text-muted);
line-height: var(--line-height-relaxed);
}
.insight-response strong {
color: var(--accent-blue);
font-weight: var(--font-weight-semibold);
}
.timeline-item {
position: relative;
padding-left: var(--space-2xl);
margin-bottom: var(--space-2xl);
}
.timeline-badge {
position: absolute;
left: 0;
op: 0;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
background: var(--white);
border: 3px solid var(--accent-blue);
box-shadow: var(--shadow-md);
}
.timeline-card {
background: var(--white);
border-radius: var(--border-radius-lg);
padding: var(--space-xl);
box-shadow: var(--shadow-md);
ransition: var(--transition-normal);
}
.timeline-card:hover {
ransform: translateX(8px);
box-shadow: var(--shadow-lg);
}
.timeline-title {
font-size: clamp(1.25rem, 3vw, 1.5rem);
font-weight: var(--font-weight-semibold);
color: var(--primary-dark);
margin-bottom: var(--space-md);
}
.timeline-meta {
font-size: clamp(0.875rem, 2vw, 1rem);
line-height: var(--line-height-relaxed);
color: var(--text-muted);
margin-bottom: var(--space-md);
}
.timeline-meta strong {
color: var(--primary-dark);
font-weight: var(--font-weight-semibold);
}
.timeline-thanks {
font-style: italic;
color: var(--accent-blue);
font-weight: var(--font-weight-medium);
}
@media (max-width: 768px) {
.pillar-card,
.insight-card,
.insight-item {
margin-bottom: var(--space-lg);
}
.pillar-card:hover .pillar-card-inner {
ransform: none;
}
.pillar-card-back {
position: static;
ransform: none;
margin-top: var(--space-md);
background: var(--primary-light);
}
.timeline-item {
padding-left: var(--space-lg);
}
.timeline-badge {
width: 30px;
height: 30px;
font-size: 1rem;
}
}
.card-compact {
padding: var(--space-md);
}
.card-spacious {
padding: var(--space-2xl);
}
.card-borderless {
box-shadow: none;
border: none;
}
.card-outlined {
box-shadow: none;
border: 2px solid var(--card-border);
}
.card-elevated {
box-shadow: var(--shadow-xl);
}/* ==========================================================================
QUOTE SECTION - DANIEL WOŹNIAK
========================================================================== */
.quote-section {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
padding: 4rem 0;
position: relative;
}
.quote-section::before {
content: '';
position: absolute;
op: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent-blue), transparent);
}
.quote-content {
max-width: 800px;
margin: 0 auto;
ext-align: center;
position: relative;
padding: 0 2rem;
}
.main-quote {
font-size: clamp(1.2rem, 3vw, 1.6rem);
font-style: italic;
line-height: 1.6;
color: var(--text-primary-dark);
margin: 0;
position: relative;
padding: 2rem 0;
border-left: 4px solid var(--accent-blue);
padding-left: 2rem;
margin-left: 2rem;
background: rgba(255,255,255,0.7);
border-radius: var(--border-radius-md);
backdrop-filter: blur(10px);
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}
.main-quote::before {
content: '"';
position: absolute;
left: -1rem;
op: -1rem;
font-size: 4rem;
color: var(--accent-blue);
opacity: 0.3;
font-family: serif;
line-height: 1;
}
.quote-author {
display: block;
margin-top: 1.5rem;
font-size: 1.1rem;
font-weight: 600;
color: var(--accent-blue);
font-style: normal;
}
@media (max-width: 768px) {
.quote-section {
padding: 3rem 0;
}
.main-quote {
margin-left: 1rem;
padding-left: 1.5rem;
}
.quote-content {
padding: 0 1rem;
}
}/* ==========================================================================
FOOTER COMPONENT - DANIEL WOŹNIAK
========================================================================== */
.footer {
background: var(--primary-dark);
padding: 3rem 0 2rem;
border-top: 1px solid rgba(0, 122, 204, 0.2);
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-bottom: 1rem;
}
.footer-section h3 {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 1rem;
color: var(--text-primary);
}
.footer-section p {
color: var(--text-secondary);
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 0.5rem;
}
.footer-links {
display: flex;
flex-direction: column;
gap: 0.8rem; 
}
.footer-links a {
color: var(--text-secondary);
ext-decoration: none;
font-size: 0.95rem;
ransition: all 0.3s ease;
display: inline-block;
padding: 0.3rem 0; 
}
.footer-links a:hover {
color: var(--accent-blue);
ransform: translateX(5px);
}
.footer-bottom {
ext-align: center;
padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: var(--text-secondary);
font-size: 0.85rem;
}
@media (max-width: 768px) {
.footer {
padding: 2rem 0 1.5rem;
}
.footer-content {
grid-template-columns: 1fr;
gap: 1.5rem;
ext-align: center;
}
.footer-links {
align-items: center;
}
}/* ==========================================================================
TIMELINE COMPONENT - DANIEL WOŹNIAK
========================================================================== */
.timeline {
position: relative;
max-width: 1000px;
margin: 0 auto;
}
.timeline::before {
content: '';
position: absolute;
left: 50%;
ransform: translateX(-50%);
width: 4px;
height: 100%;
background: linear-gradient(180deg,
var(--accent-blue) 0%,
rgba(0,122,204,0.5) 50%,
var(--accent-blue) 100%);
border-radius: 2px;
}
.timeline-item {
display: flex;
margin: 3rem 0;
position: relative;
align-items: flex-start;
opacity: 0;
ransform: translateY(40px);
ransition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.timeline-item.animate {
opacity: 1;
ransform: translateY(0);
}
.timeline-item:nth-child(odd) {
flex-direction: row;
}
.timeline-item:nth-child(even) {
flex-direction: row-reverse;
}
.timeline-badge {
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
border: 4px solid var(--white);
box-shadow: 0 4px 12px rgba(0,122,204,0.3);
margin: 0 2rem;
flex-shrink: 0;
z-index: 2;
position: relative;
}
.timeline-badge.orange { background: #ff9500; }
.timeline-badge.purple { background: #8b5cf6; }
.timeline-badge.yellow { background: #fbbf24; }
.timeline-badge.white { background: #ffffff; border-color: var(--accent-blue); }
.timeline-badge.brown { background: #92400e; }
.timeline-badge.blue { background: var(--accent-blue); }
.timeline-badge.green { background: #10b981; }
.timeline-badge.dark-purple { background: #6b46c1; }
.timeline-card {
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(0, 122, 204, 0.2);
border-radius: 16px;
padding: 2rem;
box-shadow: 0 8px 32px rgba(0, 122, 204, 0.1);
backdrop-filter: blur(10px);
flex: 1;
max-width: 400px;
ransition: all 0.3s ease;
position: relative;
}
.timeline-card:hover {
ransform: translateY(-5px);
box-shadow: 0 16px 48px rgba(0, 122, 204, 0.2);
border-color: var(--accent-blue);
}
.timeline-card::before {
content: '';
position: absolute;
width: 0;
height: 0;
op: 50%;
ransform: translateY(-50%);
}
.timeline-item:nth-child(odd) .timeline-card::before {
left: -10px;
border: 10px solid transparent;
border-right-color: rgba(255, 255, 255, 0.95);
}
.timeline-item:nth-child(even) .timeline-card::before {
right: -10px;
border: 10px solid transparent;
border-left-color: rgba(255, 255, 255, 0.95);
}
.timeline-title {
font-size: clamp(1.2rem, 2.5vw, 1.5rem);
font-weight: 700;
color: var(--primary-dark);
margin-bottom: 1rem;
line-height: 1.2;
}
.timeline-meta {
font-size: 0.9rem;
line-height: 1.6;
color: var(--text-muted);
margin-bottom: 1rem;
}
.timeline-meta strong {
color: var(--accent-blue);
font-weight: 600;
}
.timeline-thanks {
font-size: 0.85rem;
color: var(--accent-blue);
font-style: italic;
font-weight: 500;
margin: 0;
border-top: 1px solid rgba(0, 122, 204, 0.2);
padding-top: 1rem;
}
.timeline-item:nth-child(1) { transition-delay: 0.1s; }
.timeline-item:nth-child(2) { transition-delay: 0.2s; }
.timeline-item:nth-child(3) { transition-delay: 0.3s; }
.timeline-item:nth-child(4) { transition-delay: 0.4s; }
.timeline-item:nth-child(5) { transition-delay: 0.5s; }
.timeline-item:nth-child(6) { transition-delay: 0.6s; }
.timeline-item:nth-child(7) { transition-delay: 0.7s; }
.timeline-item:nth-child(8) { transition-delay: 0.8s; }
@media (max-width: 768px) {
.timeline::before {
left: 30px;
}
.timeline-item {
flex-direction: row !important;
margin-left: 2rem;
}
.timeline-badge {
width: 50px;
height: 50px;
font-size: 1.2rem;
margin: 0 1rem 0 -2.5rem;
}
.timeline-card {
max-width: none;
}
.timeline-card::before {
left: -10px !important;
border-right-color: rgba(255,255,255,0.95) !important;
border-left-color: transparent !important;
}
}/* ==========================================================================
SECTION LAYOUTS & HEADERS - DANIEL WOŹNIAK
========================================================================== */
.section-main-title {
font-size: 2.5rem !important;
font-weight: var(--font-weight-bold) !important;
line-height: var(--line-height-tight) !important;
letter-spacing: -0.02em !important;
color: var(--text-primary-light) !important;
margin: 0 !important;
font-family: var(--font-family-base) !important;
display: block !important;
opacity: 1 !important;
visibility: visible !important;
ext-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
position: relative !important;
z-index: var(--z-elevated) !important;
}
.section-secondary-text {
font-size: clamp(1rem, 2.2vw, 1.1rem) !important;
font-weight: var(--font-weight-medium) !important;
line-height: var(--line-height-normal) !important;
color: var(--text-primary-light) !important;
margin: 0 !important;
display: block !important;
opacity: 1 !important;
visibility: visible !important;
ext-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
position: relative !important;
z-index: var(--z-elevated) !important;
}
.section-secondary-subtext {
font-size: clamp(0.85rem, 2vw, 0.95rem) !important;
font-weight: var(--font-weight-normal) !important;
line-height: var(--line-height-relaxed) !important;
color: var(--text-light) !important;
margin: 0 !important;
opacity: 1 !important;
display: block !important;
visibility: visible !important;
ext-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
position: relative !important;
z-index: var(--z-elevated) !important;
}
.pillars-intro,
.pillars-title,
.pillars-subtitle,
.mapa-title,
.mapa-subtitle,
.ai-title,
.ai-subtitle,
.ceo-problems-title,
.ceo-problems-subtitle,
.video-title,
.video-subtitle {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.section-dark {
background: var(--primary-dark);
color: var(--text-primary-light);
}
.section-light {
background: var(--white);
color: var(--text-primary-dark);
}
.section-gradient {
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-medium) 100%);
color: var(--text-primary-light);
}
section {
position: relative;
padding: 3rem 0;
isolation: isolate;
}
section:nth-child(even):not(.hero):not(.newsletter-section) {
background: linear-gradient(135deg,
rgba(0, 122, 204, 0.03) 0%,
rgba(10, 25, 47, 0.8) 50%,
rgba(247, 147, 30, 0.02) 100%
);
border-top: 1px solid rgba(0, 122, 204, 0.1);
border-bottom: 1px solid rgba(247, 147, 30, 0.1);
}
section:nth-child(odd):not(.hero):not(.newsletter-section) {
background: linear-gradient(45deg,
rgba(247, 147, 30, 0.02) 0%,
rgba(15, 30, 52, 0.9) 50%,
rgba(0, 122, 204, 0.03) 100%
);
border-top: 1px solid rgba(247, 147, 30, 0.1);
border-bottom: 1px solid rgba(0, 122, 204, 0.1);
}
.newsletter-section {
background: linear-gradient(135deg,
rgba(0, 122, 204, 0.05) 0%,
rgba(8, 20, 35, 0.95) 100%
);
border: 1px solid rgba(0, 122, 204, 0.2);
}
.ai-circle {
background: linear-gradient(45deg,
rgba(247, 147, 30, 0.04) 0%,
rgba(12, 22, 40, 0.95) 100%
);
border: 1px solid rgba(247, 147, 30, 0.15);
}
.booking-section {
background: linear-gradient(135deg,
rgba(0, 122, 204, 0.06) 0%,
rgba(5, 15, 30, 0.98) 100%
);
border: 2px solid rgba(0, 122, 204, 0.3);
}
section::after {
display: none;
left: 50%;
ransform: translateX(-50%);
width: 120px;
height: 4px;
background: linear-gradient(90deg, transparent, rgba(0,122,204,0.8), rgba(247,147,30,0.6), transparent);
opacity: 1;
border-radius: 2px;
animation: dividerPulse 3s ease-in-out infinite;
z-index: 10;
}
section.reveal {
opacity: 0;
ransform: translateY(30px);
ransition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
section.reveal.animate-in {
opacity: 1;
ransform: translateY(0);
}
@keyframes dividerPulse {
0%, 100% {
opacity: 0.8;
ransform: translateX(-50%) scaleX(1);
}
50% {
opacity: 1;
ransform: translateX(-50%) scaleX(1.2);
}
}
.hero::after,
.footer::after,
.domkniecie::after {
display: none;
}
.section-divider {
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent-blue), transparent);
margin: var(--space-2xl) 0;
opacity: 0.3;
}
.section-divider-animated {
animation: dividerPulse 3s ease-in-out infinite;
}
.section-padding-sm {
padding: var(--space-xl) 0;
}
.section-padding-md {
padding: var(--space-xl) 0;
}
.section-padding-lg {
padding: var(--space-2xl) 0;
}
.section-overlay {
position: relative;
}
.section-overlay::before {
content: '';
position: absolute;
op: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
z-index: var(--z-negative);
}
.section-overlay > * {
position: relative;
z-index: var(--z-normal);
}
.progress-bar {
position: fixed;
op: 0;
left: 0;
width: 100%;
height: 3px;
background: var(--primary-medium);
z-index: var(--z-sticky);
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--accent-blue), var(--accent-blue-light));
width: 0%;
ransition: width 0.3s ease;
}
@media (max-width: 768px) {
.section-main-title {
font-size: clamp(2rem, 8vw, 3rem) !important;
ext-align: center;
}
.section-secondary-text {
font-size: clamp(1rem, 4vw, 1.2rem) !important;
ext-align: center;
}
.section-secondary-subtext {
font-size: clamp(0.9rem, 3.5vw, 1rem) !important;
ext-align: center;
}
.section-padding-lg {
padding: var(--space-2xl) 0;
}
}
@media (max-width: 480px) {
.section-main-title {
font-size: clamp(1.5rem, 10vw, 2.5rem) !important;
}
.section-secondary-text {
font-size: clamp(0.95rem, 5vw, 1.1rem) !important;
}
.section-secondary-subtext {
font-size: clamp(0.85rem, 4vw, 0.95rem) !important;
}
}/* ==========================================================================
GRID SYSTEM & CONTAINERS - DANIEL WOŹNIAK
========================================================================== */
.container {
width: 100%;
max-width: var(--container-width);
margin: 0 auto;
padding: 0 var(--container-padding);
}
.container-fluid {
width: 100%;
padding: 0 var(--container-padding);
}
.container-narrow {
max-width: 1000px;
}
.container-wide {
max-width: 1600px;
}
.section {
padding: var(--space-4xl) 0;
ransition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.section-sm {
padding: var(--space-2xl) 0;
}
.section-lg {
padding: var(--space-4xl) 0;
}
.grid {
display: grid;
gap: var(--space-lg);
}
.grid-cols-1 { grid-template-columns: 1fr; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
.section-header-layout {
display: grid !important;
grid-template-columns: 1.2fr 0.8fr !important;
gap: var(--space-3xl) !important;
align-items: end !important;
margin-bottom: var(--space-2xl) !important;
opacity: 1 !important;
visibility: visible !important;
position: relative !important;
z-index: var(--z-elevated) !important;
}
.section-header-main {
position: relative !important;
opacity: 1 !important;
visibility: visible !important;
z-index: var(--z-elevated) !important;
}
.section-header-secondary {
display: flex !important;
flex-direction: column !important;
gap: var(--space-lg) !important;
padding-top: 8rem !important;
opacity: 1 !important;
visibility: visible !important;
position: relative !important;
z-index: var(--z-elevated) !important;
}
.flex {
display: flex;
}
.flex-col {
flex-direction: column;
}
.flex-row {
flex-direction: row;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-nowrap {
flex-wrap: nowrap;
}
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.self-start { align-self: flex-start; }
.self-center { align-self: center; }
.self-end { align-self: flex-end; }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }
.gap-2xl { gap: var(--space-2xl); }
.gap-3xl { gap: var(--space-3xl); }
@media (max-width: 768px) {
.container {
padding: 0 var(--space-md);
}
.section {
padding: var(--space-2xl) 0;
}
.section-header-layout {
grid-template-columns: 1fr !important;
gap: var(--space-xl) !important;
ext-align: center !important;
}
.grid-cols-2,
.grid-cols-3,
.grid-cols-4,
.grid-cols-6 {
grid-template-columns: 1fr;
}
.grid-cols-2.mobile-2 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.container {
padding: 0 var(--space-sm);
}
.section {
padding: var(--space-xl) 0;
}
.gap-lg, .gap-xl, .gap-2xl, .gap-3xl {
gap: var(--space-md);
}
}/* ==========================================================================
CSS VARIABLES - DANIEL WOŹNIAK DESIGN SYSTEM
========================================================================== */
:root {
--primary-dark: #0a192f;
--primary-medium: #172a45;
--primary-light: #233554;
--accent-blue: #007acc;
--accent-blue-light: #4f96d8;
--accent-blue-dark: #005a99;
--accent-orange: #f7931e;
--accent-orange-light: #ffb366;
--text-primary: #ffffff;
--text-primary-light: #ffffff;
--text-primary-dark: #0a192f;
--text-secondary: #8892b0;
--text-muted: #495670;
--text-light: #cbd5e1;
--white: #ffffff;
--surface-card: rgba(255, 255, 255, 0.05);
--surface-card-hover: rgba(255, 255, 255, 0.1);
--surface-dark: #0f1419;
--surface-overlay: rgba(0, 0, 0, 0.4);
--card-border: rgba(255, 255, 255, 0.1);
--card-border-hover: rgba(0, 122, 204, 0.3);
--space-xs: 0.25rem; 
--space-sm: 0.5rem; 
--space-md: 1rem; 
--space-lg: 1.5rem; 
--space-xl: 2rem; 
--space-2xl: 3rem; 
--space-3xl: 4rem; 
--space-4xl: 6rem; 
--font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-family-mono: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-tight: 1.2;
--line-height-normal: 1.4;
--line-height-relaxed: 1.6;
--border-radius-sm: 4px;
--border-radius-md: 8px;
--border-radius-lg: 12px;
--border-radius-xl: 16px;
--border-radius-full: 9999px;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 8px 32px rgba(0, 0, 0, 0.3);
--shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.4);
--shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.5);
--shadow-glow-blue: 0 16px 48px rgba(0, 122, 204, 0.2);
--shadow-glow-orange: 0 16px 48px rgba(247, 147, 30, 0.2);
--transition-fast: 0.15s ease;
--transition-normal: 0.3s ease;
--transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
--z-negative: -1;
--z-normal: 1;
--z-elevated: 10;
--z-sticky: 100;
--z-modal: 1000;
--z-tooltip: 1100;
--container-width: 1200px;
--container-width-narrow: 1000px;
--container-width-wide: 1600px;
--container-padding: 2rem;
--breakpoint-sm: 480px;
--breakpoint-md: 768px;
--breakpoint-lg: 1024px;
--breakpoint-xl: 1280px;
--glass-bg: rgba(255, 255, 255, 0.05);
--glass-border: rgba(255, 255, 255, 0.1);
--glass-blur: blur(10px);
--grid-gap: var(--space-lg);
--grid-gap-sm: var(--space-md);
--grid-gap-lg: var(--space-2xl);
}
@media (prefers-color-scheme: dark) {
:root {
--shadow-md: 0 8px 32px rgba(0, 0, 0, 0.6);
--shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.7);
}
}
@media (prefers-reduced-motion: reduce) {
:root {
--transition-fast: none;
--transition-normal: none;
--transition-slow: none;
}
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
ransition-duration: 0.01ms !important;
}
}/* ==========================================================================
CRITICAL CSS - ABOVE THE FOLD STYLES
Load immediately, other styles can be deferred
========================================================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
line-height: 1.6;
color: #ffffff;
background: #0a192f;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
:root {
--primary-dark: #0a192f;
--primary-medium: #172a45;
--accent-blue: #007acc;
--accent-blue-light: #4f96d8;
--white: #ffffff;
--text-primary: #ffffff;
--text-primary-light: #ffffff;
--text-muted: #495670;
--text-light: #cbd5e1;
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;
--space-3xl: 4rem;
--space-4xl: 6rem;
--container-width: 1200px;
--container-padding: 2rem;
--border-radius-lg: 12px;
--transition-normal: 0.3s ease;
}
.container {
width: 100%;
max-width: var(--container-width);
margin: 0 auto;
padding: 0 var(--container-padding);
}
.hero-section {
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-medium) 100%);
padding: 8rem 0 4rem 0;
position: relative;
overflow: hidden;
}
.hero-content {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 2rem;
align-items: center;
max-width: 1200px;
margin: 0 auto;
}
.hero-left h1 {
font-size: clamp(2rem, 5.5vw, 3.2rem);
font-weight: 600;
color: white;
margin-bottom: 1rem;
line-height: 1.2;
letter-spacing: -0.01em;
}
@media (max-width: 768px) {
.container {
padding: 0 var(--space-md);
}
.hero-content {
grid-template-columns: 1fr;
ext-align: center;
gap: var(--space-xl);
}
.hero-left h1 {
font-size: clamp(1.8rem, 8vw, 2.5rem);
}
}
.wf-loading body {
visibility: hidden;
}
.wf-active body,
.wf-inactive body {
visibility: visible;
}/* ==========================================================================
GRID SYSTEM & CONTAINERS - DANIEL WOŹNIAK
========================================================================== */
.container {
width: 100%;
max-width: var(--container-width);
margin: 0 auto;
padding: 0 var(--container-padding);
}
.container-fluid {
width: 100%;
padding: 0 var(--container-padding);
}
.container-narrow {
max-width: 1000px;
}
.container-wide {
max-width: 1600px;
}
.section {
padding: var(--space-4xl) 0;
ransition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.section-sm {
padding: var(--space-2xl) 0;
}
.section-lg {
padding: var(--space-4xl) 0;
}
.grid {
display: grid;
gap: var(--space-lg);
}
.grid-cols-1 { grid-template-columns: 1fr; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
.section-header-layout {
display: grid !important;
grid-template-columns: 1.2fr 0.8fr !important;
grid-template-rows: auto auto !important;
gap: var(--space-3xl) !important;
align-items: start !important;
margin-bottom: var(--space-2xl) !important;
opacity: 1 !important;
visibility: visible !important;
position: relative !important;
z-index: var(--z-elevated) !important;
}
.section-header-main {
grid-column: 1 !important;
grid-row: 1 !important;
position: relative !important;
opacity: 1 !important;
visibility: visible !important;
z-index: var(--z-elevated) !important;
}
.section-header-secondary {
grid-column: 2 !important;
grid-row: 2 !important;
display: flex !important;
flex-direction: column !important;
gap: var(--space-lg) !important;
opacity: 1 !important;
visibility: visible !important;
position: relative !important;
z-index: var(--z-elevated) !important;
}
.flex {
display: flex;
}
.flex-col {
flex-direction: column;
}
.flex-row {
flex-direction: row;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-nowrap {
flex-wrap: nowrap;
}
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.self-start { align-self: flex-start; }
.self-center { align-self: center; }
.self-end { align-self: flex-end; }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }
.gap-2xl { gap: var(--space-2xl); }
.gap-3xl { gap: var(--space-3xl); }
@media (max-width: 768px) {
.container {
padding: 0 var(--space-md);
}
.section {
padding: var(--space-2xl) 0;
}
.section-header-layout {
grid-template-columns: 1fr !important;
gap: var(--space-xl) !important;
ext-align: center !important;
}
.grid-cols-2,
.grid-cols-3,
.grid-cols-4,
.grid-cols-6 {
grid-template-columns: 1fr;
}
.grid-cols-2.mobile-2 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.container {
padding: 0 var(--space-sm);
}
.section {
padding: var(--space-xl) 0;
}
.gap-lg, .gap-xl, .gap-2xl, .gap-3xl {
gap: var(--space-md);
}
}/* ==========================================================================
BUTTON COMPONENTS - DANIEL WOŹNIAK SHARED SYSTEM
========================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: var(--space-md) var(--space-xl);
border: none;
border-radius: var(--border-radius-lg);
font-family: var(--font-family-base);
font-weight: var(--font-weight-semibold);
font-size: 1rem;
line-height: 1;
ext-decoration: none;
cursor: pointer;
ransition: var(--transition-normal);
position: relative;
overflow: hidden;
white-space: nowrap;
}
.btn:disabled {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
.btn-primary {
background: var(--accent-blue);
color: var(--white);
box-shadow: var(--shadow-md);
}
.btn-primary:hover {
background: var(--accent-blue-light);
ransform: translateY(-2px);
box-shadow: var(--shadow-glow-blue);
}
.btn-primary:active {
ransform: translateY(0);
}
.btn-secondary {
background: transparent;
color: var(--accent-blue);
border: 2px solid var(--accent-blue);
}
.btn-secondary:hover {
background: var(--accent-blue);
color: var(--white);
ransform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn-ghost {
background: transparent;
color: var(--text-light);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.btn-ghost:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.3);
color: var(--white);
}
.btn-glass {
background: var(--glass-bg);
color: var(--white);
border: 1px solid var(--glass-border);
backdrop-filter: var(--glass-blur);
}
.btn-glass:hover {
background: var(--surface-card-hover);
border-color: var(--card-border-hover);
ransform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn-orange {
background: var(--accent-orange);
color: var(--white);
box-shadow: var(--shadow-md);
}
.btn-orange:hover {
background: var(--accent-orange-light);
ransform: translateY(-2px);
box-shadow: var(--shadow-glow-orange);
}
.btn-sm {
padding: var(--space-sm) var(--space-lg);
font-size: 0.875rem;
}
.btn-lg {
padding: var(--space-lg) var(--space-2xl);
font-size: 1.125rem;
}
.btn-xl {
padding: var(--space-xl) var(--space-3xl);
font-size: 1.25rem;
font-weight: var(--font-weight-bold);
}
.btn-icon {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
}
.btn-icon-only {
padding: var(--space-md);
aspect-ratio: 1;
}
.btn-group {
display: inline-flex;
border-radius: var(--border-radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.btn-group .btn {
border-radius: 0;
border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.btn-group .btn:first-child {
border-left: none;
border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
}
.btn-group .btn:last-child {
border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
}
.btn-loading {
position: relative;
color: transparent;
}
.btn-loading::after {
content: '';
position: absolute;
op: 50%;
left: 50%;
ransform: translate(-50%, -50%);
width: 20px;
height: 20px;
border: 2px solid transparent;
border-top: 2px solid currentColor;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
o {
ransform: translate(-50%, -50%) rotate(360deg);
}
}
.btn-cta {
position: relative;
background: linear-gradient(135deg, var(--accent-blue), var(--accent-blue-light));
color: var(--white);
font-weight: var(--font-weight-bold);
ext-transform: uppercase;
letter-spacing: 0.05em;
overflow: hidden;
}
.btn-cta::before {
content: '';
position: absolute;
op: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
ransition: var(--transition-slow);
}
.btn-cta:hover::before {
left: 100%;
}
.btn-cta:hover {
ransform: translateY(-3px) scale(1.02);
box-shadow: var(--shadow-xl);
}
@media (max-width: 768px) {
.btn {
padding: var(--space-sm) var(--space-lg);
font-size: 0.9rem;
}
.btn-lg {
padding: var(--space-md) var(--space-xl);
font-size: 1rem;
}
.btn-xl {
padding: var(--space-lg) var(--space-2xl);
font-size: 1.125rem;
}
}
@media (max-width: 480px) {
.btn-group {
flex-direction: column;
}
.btn-group .btn {
border-left: none;
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0;
}
.btn-group .btn:first-child {
border-top: none;
border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}
.btn-group .btn:last-child {
border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
}
}/* ==========================================================================
CARD COMPONENTS - DANIEL WOŹNIAK
========================================================================== */
.section-title {
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 800;
color: var(--text-primary-light);
ext-align: center;
margin-bottom: 3rem;
background: linear-gradient(135deg, var(--accent-blue), var(--accent-gold));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.pillars-section {
padding: 5rem 0;
background: linear-gradient(135deg,
rgba(10, 25, 47, 0.98) 0%,
rgba(26, 54, 93, 0.95) 50%,
rgba(10, 25, 47, 0.98) 100%
);
position: relative;
overflow: hidden;
}
.pillars-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin: 0 auto;
max-width: 1400px;
}
.card {
background: var(--card-bg);
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
overflow: hidden;
ransition: var(--transition-normal);
}
.card:hover {
ransform: translateY(-4px);
box-shadow: var(--shadow-xl);
}
.card-header {
padding: var(--space-lg);
border-bottom: 1px solid var(--card-border);
}
.card-body {
padding: var(--space-lg);
}
.card-footer {
padding: var(--space-lg);
border-top: 1px solid var(--card-border);
background: rgba(0, 0, 0, 0.02);
}
.pillar-card {
background: transparent;
perspective: 1000px;
min-height: 400px;
border: 1px solid var(--card-border);
border-radius: var(--border-radius-lg);
ransition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.pillar-card-inner {
position: relative;
width: 100%;
height: 100%;
ext-align: center;
ransition: transform 0.8s;
ransform-style: preserve-3d;
}
.pillar-card:hover .pillar-card-inner {
ransform: rotateY(180deg);
}
.pillar-card-front,
.pillar-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding: var(--space-lg);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: var(--border-radius-lg);
ext-align: center;
}
.pillar-card-front {
padding-top: 2.5rem;
}
.pillar-card-back {
padding-top: 1.5rem;
ransform: rotateY(180deg);
background: var(--primary-dark);
color: var(--white);
}
.pillar-number {
font-size: 3rem;
font-weight: var(--font-weight-bold);
color: var(--accent-blue);
margin-bottom: var(--space-md);
font-family: var(--font-family-mono);
}
.pillar-title {
font-size: clamp(1.1rem, 2.8vw, 1.3rem);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-md);
line-height: var(--line-height-tight);
color: var(--text-primary-light);
ext-align: center;
min-height: 3.2rem;
display: flex;
align-items: center;
justify-content: center;
}
.pillar-desc {
font-size: clamp(0.85rem, 1.8vw, 0.95rem);
line-height: var(--line-height-relaxed);
color: var(--text-light);
ext-align: center;
margin-top: auto;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.pillar-card-back .pillar-desc {
color: var(--text-light);
}
.pillar-image {
width: 100%;
height: 220px;
object-fit: cover;
object-position: center top;
border-radius: var(--border-radius-md);
margin-top: var(--space-sm);
border: 2px solid rgba(0, 122, 204, 0.3);
ransition: var(--transition-normal);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.pillar-card:hover .pillar-image {
border-color: rgba(0, 122, 204, 0.6);
ransform: scale(1.05);
box-shadow: 0 8px 25px rgba(0, 122, 204, 0.3);
}
.pillar-card-front::before {
content: '';
position: absolute;
op: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, rgba(0, 122, 204, 0.8) 0%, rgba(247, 147, 30, 0.8) 100%);
border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
animation: pillarPulse 3s ease-in-out infinite;
}
.pillar-card-back::before {
content: '';
position: absolute;
op: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, rgba(247, 147, 30, 0.8) 0%, rgba(0, 122, 204, 0.8) 100%);
border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
animation: pillarPulse 3s ease-in-out infinite;
}
.pillar-card:hover .pillar-card-front::before,
.pillar-card:hover .pillar-card-back::before {
height: 4px;
box-shadow: 0 0 15px rgba(247, 147, 30, 0.4);
}
@keyframes pillarPulse {
0%, 100% {
opacity: 0.6;
ransform: scaleX(1);
}
50% {
opacity: 1;
ransform: scaleX(1.02);
}
}
.pillar-card {
border: 1px solid rgba(247, 147, 30, 0.1);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 8px rgba(247, 147, 30, 0.05);
ransition: all var(--transition-normal);
}
.pillar-card:hover {
border-color: rgba(247, 147, 30, 0.3);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(247, 147, 30, 0.15);
}
.pillar-question {
font-size: clamp(1rem, 2.5vw, 1.2rem);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-sm);
line-height: var(--line-height-tight);
color: var(--text-primary-light);
font-style: italic;
ext-align: center;
}
.insight-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--border-radius-lg);
padding: var(--space-xl);
ext-align: center;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
ransition: var(--transition-normal);
}
.insight-card:hover {
border-color: rgba(0, 122, 204, 0.3);
ransform: translateY(-8px);
box-shadow: 0 16px 48px rgba(0, 122, 204, 0.2);
}
.insight-icon {
font-size: 3rem;
margin-bottom: var(--space-md);
display: block;
}
.insight-title {
font-size: clamp(1.125rem, 2.5vw, 1.25rem);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-md);
color: var(--text-primary-light);
}
.insight-desc {
font-size: clamp(0.875rem, 2vw, 1rem);
line-height: var(--line-height-relaxed);
color: var(--text-light);
}
.insight-item {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--border-radius-lg);
padding: var(--space-xl);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
ransition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
border-left: 6px solid var(--accent-blue);
position: relative;
opacity: 0;
ransform: translateY(30px);
animation: staggeredReveal 0.8s ease-out forwards;
}
.insight-item:nth-child(1) { animation-delay: 0.1s; }
.insight-item:nth-child(2) { animation-delay: 0.2s; }
.insight-item:nth-child(3) { animation-delay: 0.3s; }
.insight-item:nth-child(4) { animation-delay: 0.4s; }
.insight-item:nth-child(5) { animation-delay: 0.5s; }
.insight-item:nth-child(6) { animation-delay: 0.6s; }
@keyframes staggeredReveal {
o {
opacity: 1;
ransform: translateY(0);
}
}
.insight-item::before {
content: '';
position: absolute;
op: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
border-radius: var(--border-radius-lg);
opacity: 0;
ransition: opacity 0.3s ease;
pointer-events: none;
z-index: -1;
}
.insight-item:hover::before {
opacity: 1;
}
.insight-item:hover {
ransform: translateY(-4px);
box-shadow: 0 16px 48px rgba(0, 122, 204, 0.2);
border-left-color: var(--accent-gold);
}
.insight-header {
margin-bottom: var(--space-lg);
}
.insight-tag {
display: inline-block;
background: var(--accent-blue);
color: var(--white);
padding: var(--space-xs) var(--space-sm);
border-radius: var(--border-radius-sm);
font-size: 0.75rem;
font-weight: var(--font-weight-semibold);
ext-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--space-md);
}
.insight-quote {
font-size: clamp(1rem, 2.5vw, 1.125rem);
font-style: italic;
color: var(--text-muted);
margin-bottom: var(--space-md);
}
.insight-quote::before {
content: '"';
color: var(--accent-blue);
font-size: 1.5em;
margin-right: 0.25em;
}
.insight-quote::after {
content: '"';
color: var(--accent-blue);
font-size: 1.5em;
margin-left: 0.25em;
}
.insight-response h4 {
color: var(--primary-dark);
font-size: clamp(1.125rem, 2.5vw, 1.25rem);
margin-bottom: var(--space-sm);
}
.insight-response p {
color: var(--text-muted);
line-height: var(--line-height-relaxed);
}
.insight-response strong {
color: var(--accent-blue);
font-weight: var(--font-weight-semibold);
}
.vip-black-card {
background: linear-gradient(135deg, #000000 0%, #1a1a2e 100%);
border: 1px solid #333;
border-radius: var(--border-radius-xl);
min-height: 280px;
position: relative;
overflow: hidden;
cursor: pointer;
ransition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
box-shadow: 0 0 30px rgba(212, 175, 55, 0.1);
animation: premiumGlow 3s ease-in-out infinite alternate;
}
@keyframes premiumGlow {
0% {
box-shadow:
0 0 30px rgba(212, 175, 55, 0.1),
0 0 60px rgba(212, 175, 55, 0.05);
}
100% {
box-shadow:
0 0 50px rgba(212, 175, 55, 0.2),
0 0 100px rgba(212, 175, 55, 0.1);
}
}
.vip-black-card::before {
content: '';
position: absolute;
op: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, #d4af37 0%, #ffd700 100%);
opacity: 0.3;
}
.vip-black-card:hover {
ransform: translateY(-8px) scale(1.02);
border-color: #d4af37;
box-shadow:
0 25px 80px rgba(212, 175, 55, 0.2),
0 0 50px rgba(212, 175, 55, 0.1);
}
.black-card-front {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
min-height: 280px;
opacity: 1;
ransition: opacity 0.6s ease;
}
.vip-black-card:hover .black-card-front {
opacity: 0;
}
.vip-minimal {
display: flex;
gap: 1rem;
margin-bottom: 2rem;
}
.vip-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #d4af37;
opacity: 0.6;
animation: vipPulse 2s ease-in-out infinite;
}
.vip-dot:nth-child(2) {
animation-delay: 0.3s;
}
.vip-dot:nth-child(3) {
animation-delay: 0.6s;
}
.mystery-text {
font-size: 0.9rem;
color: #888;
font-weight: 500;
letter-spacing: 0.1em;
ext-align: center;
}
.black-card-reveal {
position: absolute;
op: 0;
left: 0;
right: 0;
bottom: 0;
padding: 3rem 2rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 0;
ransform: translateY(15px);
ransition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.vip-black-card:hover .black-card-reveal {
opacity: 1;
ransform: translateY(0);
}
.vip-content {
ext-align: center;
margin-bottom: 3rem;
}
.vip-main-question {
font-size: clamp(1.6rem, 3vw, 2rem);
font-weight: 700;
color: #ffffff;
margin: 0 0 1.5rem 0;
line-height: 1.2;
letter-spacing: -0.02em;
}
.vip-separator {
width: 60px;
height: 2px;
background: linear-gradient(90deg, #d4af37 0%, #ffd700 100%);
margin: 0 auto 1.5rem auto;
border-radius: 1px;
}
.vip-challenge-text {
font-size: 1rem;
color: #d4af37;
line-height: 1.5;
font-weight: 500;
margin: 0;
letter-spacing: 0.01em;
}
.vip-cta-section {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.vip-cta-button {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 1.2rem 2rem;
background: linear-gradient(135deg, #d4af37 0%, #ffd700 100%);
color: #000;
ext-decoration: none;
border-radius: 8px;
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 0.03em;
ransition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
box-shadow: 0 8px 30px rgba(212, 175, 55, 0.25);
}
.vip-cta-button:hover {
ransform: translateY(-2px);
box-shadow: 0 12px 40px rgba(212, 175, 55, 0.4);
background: linear-gradient(135deg, #ffd700 0%, #d4af37 100%);
}
.vip-cta-text {
font-size: inherit;
font-weight: inherit;
}
.vip-qualifier {
font-size: 0.8rem;
color: #999;
font-weight: 500;
margin: 0;
opacity: 0.8;
ext-align: center;
}
@keyframes vipPulse {
0%, 100% {
opacity: 0.4;
ransform: scale(1);
}
50% {
opacity: 1;
ransform: scale(1.2);
}
}
@media (max-width: 768px) {
.vip-black-card {
min-height: 250px;
}
.black-card-front {
min-height: 250px;
}
.vip-question {
font-size: 1.3rem;
}
.mystery-text {
font-size: 0.8rem;
}
}
/* ==========================================================================
LIFESTYLE SECTION - FLIP CARDS BASED ON PILLARS
========================================================================== */
.lifestyle-section {
padding: 5rem 0;
background: linear-gradient(135deg,
rgba(10, 25, 47, 0.98) 0%,
rgba(26, 54, 93, 0.95) 50%,
rgba(10, 25, 47, 0.98) 100%
);
}
.lifestyle-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin: 0 auto;
max-width: 1400px;
}
.lifestyle-card {
background: transparent;
perspective: 1000px;
min-height: 350px;
border-radius: var(--border-radius-lg);
ransition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.lifestyle-card-inner {
position: relative;
width: 100%;
height: 100%;
ext-align: center;
ransition: transform 0.8s;
ransform-style: preserve-3d;
}
.lifestyle-card:hover .lifestyle-card-inner {
ransform: rotateY(180deg);
}
.lifestyle-card-front,
.lifestyle-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: var(--space-xl);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: var(--border-radius-lg);
ext-align: center;
}
.lifestyle-card-back {
ransform: rotateY(180deg);
background: var(--primary-dark);
color: var(--white);
justify-content: space-between;
padding-top: 2rem;
padding-bottom: 2rem;
}
.lifestyle-number {
font-size: 2rem;
font-weight: 900;
color: var(--accent-blue);
margin-bottom: 1rem;
font-family: var(--font-family-mono);
}
.lifestyle-card-title {
font-size: clamp(0.9rem, 1.8vw, 1rem);
font-weight: 700;
margin-bottom: 1.5rem;
line-height: 1.35;
color: var(--text-primary-light);
ext-align: center;
max-width: 280px;
margin-left: auto;
margin-right: auto;
word-break: normal;
overflow-wrap: break-word;
hyphens: manual;
letter-spacing: 0;
ext-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
white-space: normal;
display: block;
padding: 0 0.5rem;
}
.lifestyle-icon {
font-size: 3rem;
margin-top: auto;
}
.lifestyle-back-title {
font-size: 1.2rem;
font-weight: 700;
color: var(--accent-gold);
margin-bottom: 1rem;
ext-align: center;
}
.lifestyle-desc {
font-size: 0.9rem;
line-height: 1.5;
color: var(--text-light);
ext-align: center;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.lifestyle-detail {
font-size: 0.8rem;
color: var(--accent-blue);
font-weight: 600;
ext-align: center;
padding: 0.5rem 1rem;
background: rgba(0, 122, 204, 0.1);
border-radius: var(--border-radius-md);
border: 1px solid rgba(0, 122, 204, 0.2);
}
@media (max-width: 768px) {
.lifestyle-grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
.lifestyle-card {
min-height: 320px;
}
.lifestyle-card-title {
font-size: 0.9rem;
max-width: 260px;
line-height: 1.3;
margin-bottom: 1rem;
letter-spacing: 0;
padding: 0 0.25rem;
}
.lifestyle-number {
font-size: 1.5rem;
}
}
@media (max-width: 480px) {
.lifestyle-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.lifestyle-card {
min-height: 300px;
}
.lifestyle-card-title {
font-size: 0.85rem;
max-width: 240px;
font-weight: 700;
line-height: 1.25;
letter-spacing: 0;
padding: 0 0.5rem;
}
}
/* ==========================================================================
GAMECHANGERY SECTION - ACHIEVEMENT CARDS
========================================================================== */
.gamechangery-section {
padding: 5rem 0;
background: linear-gradient(135deg,
rgba(26, 54, 93, 0.95) 0%,
rgba(10, 25, 47, 0.98) 50%,
rgba(26, 54, 93, 0.95) 100%
);
}
.gamechangery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin: 0 auto;
max-width: 1200px;
}
.gamechanger-card {
background: transparent;
border: none;
border-radius: var(--border-radius-lg);
padding: 0;
ext-align: center;
position: relative;
height: 300px;
perspective: 1000px;
}
.gamechanger-card-inner {
position: relative;
width: 100%;
height: 100%;
ext-align: center;
ransition: transform 0.6s;
ransform-style: preserve-3d;
}
.gamechanger-card:hover .gamechanger-card-inner {
ransform: rotateY(180deg);
}
.gamechanger-card-front, .gamechanger-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: var(--border-radius-lg);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
padding: var(--space-xl);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.gamechanger-card-front::before {
content: '';
position: absolute;
op: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent-blue) 0%, var(--accent-gold) 100%);
opacity: 0.6;
border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}
.gamechanger-card-back {
background: rgba(247, 147, 30, 0.1);
border: 1px solid rgba(247, 147, 30, 0.3);
ransform: rotateY(180deg);
}
.gamechanger-card-back::before {
content: '';
position: absolute;
op: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent-gold) 0%, var(--accent-blue) 100%);
opacity: 0.8;
border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}
.gamechanger-icon {
font-size: 3rem;
margin-bottom: 1rem;
}
.gamechanger-number {
position: absolute;
op: 1rem;
right: 1rem;
font-size: 1rem;
font-weight: 900;
color: var(--accent-blue);
background: rgba(0, 122, 204, 0.1);
padding: 0.5rem;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-family-mono);
}
.gamechanger-title {
font-size: clamp(1.2rem, 2.5vw, 1.4rem);
font-weight: 700;
color: var(--text-primary-light);
margin-bottom: 1rem;
line-height: 1.2;
}
.gamechanger-desc {
font-size: 0.95rem;
line-height: 1.7;
color: var(--text-light);
ext-align: left;
font-weight: 400;
letter-spacing: 0.02em;
padding: 0.5rem 0;
border-left: 3px solid rgba(0, 122, 204, 0.2);
padding-left: 1rem;
margin-top: 0.5rem;
background: rgba(0, 122, 204, 0.02);
border-radius: 0 8px 8px 0;
}
.gamechanger-back-title {
font-size: 1.3rem;
font-weight: 700;
color: var(--accent-gold);
margin-bottom: 1rem;
ext-align: center;
}
.gamechanger-back-desc {
color: var(--text-primary-light);
font-size: 1rem;
line-height: 1.5;
margin-bottom: 1.5rem;
ext-align: center;
}
.gamechanger-benefit {
display: flex;
align-items: center;
justify-content: flex-start;
ext-align: left;
margin-bottom: 0.8rem;
font-size: 0.9rem;
color: var(--text-primary-light);
font-weight: 500;
width: 100%;
}
/* ==========================================================================
CEO CIRCLE CTA SECTION - AI ASSISTANTS + LIVE CHAT
========================================================================== */
.ceo-circle-cta {
padding: 5rem 0;
background: linear-gradient(135deg,
rgba(10, 25, 47, 0.98) 0%,
rgba(0, 122, 204, 0.05) 50%,
rgba(10, 25, 47, 0.98) 100%
);
position: relative;
overflow: hidden;
}
.circle-layout {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 4rem;
align-items: stretch;
max-width: 1200px;
margin: 0 auto;
}
.circle-value {
display: flex;
flex-direction: column;
justify-content: center;
}
.circle-header {
margin-bottom: 2rem;
}
.circle-title {
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 900;
color: var(--text-primary-light);
margin-bottom: 1rem;
background: linear-gradient(135deg, var(--accent-blue), var(--accent-gold));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.circle-subtitle {
font-size: clamp(1rem, 2.2vw, 1.2rem);
color: var(--text-secondary);
margin-bottom: 1rem;
line-height: 1.4;
}
.circle-timing {
font-size: clamp(0.9rem, 2vw, 1rem);
color: var(--accent-gold);
font-weight: 600;
font-style: italic;
}
.circle-benefits {
margin-top: 2rem;
}
.benefit-item {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1.5rem;
padding: 1rem;
background: rgba(255, 255, 255, 0.02);
border-radius: var(--border-radius-md);
border-left: 3px solid rgba(0, 122, 204, 0.3);
ransition: all 0.3s ease;
}
.benefit-item:hover {
background: rgba(255, 255, 255, 0.05);
border-left-color: var(--accent-gold);
ransform: translateX(4px);
}
.benefit-icon {
font-size: 1.5rem;
flex-shrink: 0;
}
.benefit-text {
font-size: clamp(0.9rem, 1.8vw, 1rem);
color: var(--text-light);
line-height: 1.5;
font-weight: 500;
}
.ai-assistants-grid {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 2rem;
}
.assistant-card {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--border-radius-lg);
backdrop-filter: blur(10px);
ransition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
position: relative;
overflow: hidden;
}
.assistant-card::after {
content: '';
position: absolute;
op: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(0, 122, 204, 0.1), transparent);
ransition: left 0.6s ease;
}
.assistant-card:hover::after,
.assistant-card.active::after {
left: 100%;
}
.assistant-card:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(0, 122, 204, 0.3);
ransform: translateY(-2px);
box-shadow: 0 8px 32px rgba(0, 122, 204, 0.15);
}
.assistant-card.active {
background: rgba(0, 122, 204, 0.1);
border-color: rgba(0, 122, 204, 0.4);
ransform: translateY(-2px);
box-shadow: 0 8px 32px rgba(0, 122, 204, 0.2);
}
.assistant-card.active::before {
content: '';
position: absolute;
left: 0;
op: 0;
bottom: 0;
width: 4px;
background: var(--accent-blue);
border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
}
.assistant-icon {
font-size: 2.5rem;
flex-shrink: 0;
}
.assistant-info {
flex: 1;
}
.assistant-name {
font-size: 1.1rem;
font-weight: 700;
color: var(--text-primary-light);
margin-bottom: 0.5rem;
line-height: 1.3;
}
.assistant-desc {
font-size: 0.9rem;
color: var(--text-secondary);
line-height: 1.4;
margin-bottom: 0.8rem;
}
.assistant-tag {
font-size: 0.75rem;
color: var(--accent-blue);
font-weight: 600;
ext-transform: uppercase;
letter-spacing: 0.05em;
background: rgba(0, 122, 204, 0.1);
padding: 0.25rem 0.75rem;
border-radius: 20px;
display: inline-block;
}
.ai-chat-container {
display: flex;
align-items: stretch;
height: 100%;
}
.ai-chat-interface {
width: 100%;
height: 100%;
min-height: 600px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--border-radius-xl);
backdrop-filter: blur(20px);
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
position: relative;
}
.chat-header {
padding: 1.5rem;
background: rgba(0, 122, 204, 0.08);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
position: relative;
}
.chat-header::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg,
var(--accent-blue) 0%,
ransparent 20%,
var(--accent-blue) 40%,
ransparent 60%,
var(--accent-blue) 80%,
ransparent 100%);
background-size: 200% 100%;
animation: voiceWave 2s ease-in-out infinite;
}
@keyframes voiceWave {
0%, 100% { background-position: 200% 0; opacity: 0.3; }
50% { background-position: -200% 0; opacity: 1; }
}
.active-assistant {
display: flex;
align-items: center;
gap: 1rem;
}
.assistant-avatar {
width: 48px;
height: 48px;
background: rgba(0, 122, 204, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
border: 2px solid rgba(0, 122, 204, 0.3);
}
.assistant-name-active {
font-size: 1.1rem;
font-weight: 700;
color: var(--text-primary-light);
margin-bottom: 0.25rem;
}
.assistant-status {
font-size: 0.8rem;
color: var(--accent-blue);
font-weight: 500;
}
.assistant-status::before {
content: '● ';
animation: none !important;
color: #4ade80;
}
.chat-messages {
flex: 1;
padding: 1.5rem 1.5rem 120px 1.5rem;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(0, 122, 204, 0.3) transparent;
}
.message {
display: flex;
gap: 1rem;
animation: messageSlideIn 0.5s ease-out;
}
@keyframes messageSlideIn {
from {
opacity: 0;
ransform: translateY(20px);
}
o {
opacity: 1;
ransform: translateY(0);
}
}
.message.typing .message-content::after {
content: '|';
color: var(--accent-blue);
animation: typingCursor 1s infinite;
margin-left: 2px;
}
@keyframes typingCursor {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
margin-bottom: 1.5rem;
}
.ai-message .message-avatar {
width: 32px;
height: 32px;
background: rgba(0, 122, 204, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
flex-shrink: 0;
}
.message-content {
flex: 1;
background: rgba(255, 255, 255, 0.05);
padding: 1rem 1.5rem;
border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) var(--border-radius-lg);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.message-content p {
color: var(--text-light);
font-size: 0.9rem;
line-height: 1.5;
margin-bottom: 1rem;
}
.message-content p:last-child {
margin-bottom: 0;
}
.message-content ul {
color: var(--text-light);
font-size: 0.9rem;
line-height: 1.5;
margin: 0.5rem 0;
padding-left: 0;
}
.message-content li {
margin-bottom: 0.5rem;
}
.message-content strong {
color: var(--text-primary-light);
font-weight: 700;
}
.chat-input-container {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 1.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.05);
background: rgba(255, 255, 255, 0.02);
border-radius: 0 0 var(--border-radius-xl) var(--border-radius-xl);
}
.scroll-to-bottom {
position: absolute;
bottom: 140px;
right: 20px;
width: 40px;
height: 40px;
background: rgba(0, 122, 204, 0.9);
border: none;
border-radius: 50%;
color: white;
cursor: pointer;
opacity: 0;
ransform: translateY(20px);
ransition: all 0.3s ease;
font-size: 16px;
z-index: 10;
}
.scroll-to-bottom.visible {
opacity: 1;
ransform: translateY(0);
}
.scroll-to-bottom:hover {
background: rgba(0, 122, 204, 1);
ransform: scale(1.1);
}
.chat-input-wrapper {
display: flex;
gap: 0.5rem;
align-items: center;
}
.chat-input {
flex: 1;
padding: 1rem 1.5rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--border-radius-lg);
color: var(--text-light);
font-size: 0.9rem;
backdrop-filter: blur(10px);
ransition: all 0.3s ease;
}
.chat-input:focus {
outline: none;
border-color: var(--accent-blue);
box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.2);
background: rgba(255, 255, 255, 0.08);
}
.chat-input::placeholder {
color: var(--text-secondary);
}
.send-button {
width: 48px;
height: 48px;
background: var(--accent-blue);
border: none;
border-radius: var(--border-radius-lg);
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
ransition: all 0.3s ease;
}
.send-button:hover {
background: #1e40af;
ransform: translateY(-1px);
box-shadow: 0 4px 16px rgba(0, 122, 204, 0.4);
}
.chat-disclaimer {
margin-top: 0.75rem;
ext-align: center;
}
.chat-disclaimer p {
font-size: 0.75rem;
color: var(--text-secondary);
font-style: italic;
}
@media (max-width: 768px) {
.circle-layout {
grid-template-columns: 1fr;
gap: 2rem;
}
.ai-assistants-grid {
margin-top: 1.5rem;
}
.assistant-card {
padding: 1rem;
gap: 0.75rem;
}
.assistant-icon {
font-size: 2rem;
}
.ai-chat-interface {
height: 500px;
}
.chat-header {
padding: 1rem;
}
.assistant-avatar {
width: 40px;
height: 40px;
font-size: 1.2rem;
}
.chat-messages {
padding: 1rem;
}
.message-content {
padding: 0.75rem 1rem;
}
.chat-input-container {
padding: 1rem;
}
}
.ai-interface-layout {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 3rem;
align-items: stretch;
margin-top: 3rem;
position: relative;
overflow: hidden;
}
.ai-interface-layout::before {
content: '';
position: absolute;
op: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 30%, rgba(0, 122, 204, 0.02) 1px, transparent 1px),
radial-gradient(circle at 60% 70%, rgba(247, 147, 30, 0.02) 1px, transparent 1px),
radial-gradient(circle at 80% 20%, rgba(0, 122, 204, 0.01) 1px, transparent 1px);
background-size: 50px 50px, 80px 80px, 120px 120px;
animation: particleFloat 20s linear infinite;
pointer-events: none;
z-index: 1;
}
@keyframes particleFloat {
0% { transform: translateY(0) translateX(0); }
100% { transform: translateY(-100px) translateX(50px); }
}
.ai-assistants-side {
display: flex;
align-items: stretch;
height: 100%;
position: relative;
z-index: 2;
}
.ai-assistants-side .newsletter-core {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
ext-align: left;
}
@media (max-width: 768px) {
.ai-interface-layout {
grid-template-columns: 1fr;
gap: 2rem;
}
}
.concierge-card {
width: 100%;
background: rgba(255, 255, 255, 0.05);
border: 2px solid rgba(0, 122, 204, 0.2);
border-radius: var(--border-radius-xl);
padding: 0;
backdrop-filter: blur(20px);
overflow: hidden;
}
.concierge-scarcity-box {
background: rgba(247, 147, 30, 0.1);
border: 2px solid rgba(247, 147, 30, 0.2);
border-radius: var(--border-radius-lg);
padding: 1.5rem;
margin: 2rem 2rem 0 2rem;
ext-align: center;
position: relative;
}
.concierge-scarcity-box::before {
content: '';
position: absolute;
op: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent-gold) 0%, #ff6b35 100%);
animation: scarcityPulse 2s ease-in-out infinite;
}
.scarcity-title {
font-size: 1.1rem;
font-weight: 700;
color: var(--text-primary-light);
margin-bottom: 1rem;
}
.scarcity-counter {
display: flex;
justify-content: center;
gap: 1rem;
}
.counter-item {
display: flex;
flex-direction: column;
align-items: center;
min-width: 60px;
}
.counter-number {
font-size: 1.8rem;
font-weight: 900;
color: var(--accent-gold);
font-family: var(--font-family-mono);
background: rgba(247, 147, 30, 0.1);
padding: 0.5rem;
border-radius: 8px;
min-width: 50px;
display: inline-block;
}
.counter-label {
font-size: 0.7rem;
font-weight: 600;
color: var(--text-secondary);
ext-transform: uppercase;
letter-spacing: 0.05em;
margin-top: 0.25rem;
}
.concierge-form {
padding: 2rem;
}
.concierge-form .form-group {
margin-bottom: 1.5rem;
}
.concierge-form .form-input {
width: 100%;
padding: 1rem;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--border-radius-md);
background: rgba(255, 255, 255, 0.05);
color: var(--text-primary-light);
font-size: 0.9rem;
ransition: all 0.3s ease;
}
.concierge-form .form-input:focus {
outline: none;
border-color: var(--accent-gold);
box-shadow: 0 0 0 2px rgba(247, 147, 30, 0.2);
background: rgba(255, 255, 255, 0.08);
}
.concierge-form label {
display: block;
font-size: 0.85rem;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 0.5rem;
}
.concierge-submit {
width: 100%;
padding: 1.2rem;
background: linear-gradient(135deg, var(--accent-gold) 0%, #ff6b35 100%);
color: #000;
border: none;
border-radius: var(--border-radius-lg);
font-weight: 800;
font-size: 1rem;
cursor: pointer;
ransition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1rem;
}
.concierge-submit:hover {
ransform: translateY(-2px);
box-shadow: 0 12px 35px rgba(247, 147, 30, 0.4);
background: linear-gradient(135deg, #ff6b35 0%, var(--accent-gold) 100%);
}
.concierge-urgency {
ext-align: center;
padding: 1rem;
background: rgba(255, 107, 107, 0.05);
border: 1px solid rgba(255, 107, 107, 0.1);
border-radius: var(--border-radius-md);
}
.concierge-urgency p {
font-size: 0.85rem;
color: #ff6b6b;
font-weight: 600;
margin: 0;
font-style: italic;
}
@keyframes scarcityPulse {
0%, 100% {
opacity: 0.6;
ransform: scaleX(1);
}
50% {
opacity: 1;
ransform: scaleX(1.02);
}
}
@media (max-width: 768px) {
.lifestyle-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.gamechangery-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.lifestyle-card:hover .lifestyle-card-inner {
ransform: none;
}
.lifestyle-card-back {
position: static;
ransform: none;
margin-top: 1rem;
background: var(--primary-light);
}
.circle-layout {
grid-template-columns: 1fr;
gap: 2rem;
margin: 0 1rem;
}
.concierge-scarcity-box {
margin: 1.5rem 1.5rem 0 1.5rem;
}
.scarcity-counter {
gap: 0.5rem;
}
.counter-number {
font-size: 1.4rem;
padding: 0.3rem;
min-width: 40px;
}
}
.timeline-item {
position: relative;
padding-left: var(--space-2xl);
margin-bottom: var(--space-2xl);
}
.timeline-badge {
position: absolute;
left: 0;
op: 0;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
background: var(--white);
border: 3px solid var(--accent-blue);
box-shadow: var(--shadow-md);
}
.timeline-card {
background: var(--white);
border-radius: var(--border-radius-lg);
padding: var(--space-xl);
box-shadow: var(--shadow-md);
ransition: var(--transition-normal);
}
.timeline-card:hover {
ransform: translateX(8px);
box-shadow: var(--shadow-lg);
}
.timeline-title {
font-size: clamp(1.25rem, 3vw, 1.5rem);
font-weight: var(--font-weight-semibold);
color: var(--primary-dark);
margin-bottom: var(--space-md);
}
.timeline-meta {
font-size: clamp(0.875rem, 2vw, 1rem);
line-height: var(--line-height-relaxed);
color: var(--text-muted);
margin-bottom: var(--space-md);
}
.timeline-meta strong {
color: var(--primary-dark);
font-weight: var(--font-weight-semibold);
}
.timeline-thanks {
font-style: italic;
color: var(--accent-blue);
font-weight: var(--font-weight-medium);
}
@media (max-width: 768px) {
.pillar-card,
.insight-card,
.insight-item {
margin-bottom: var(--space-lg);
}
.pillar-card:hover .pillar-card-inner {
ransform: none;
}
.pillar-card-back {
position: static;
ransform: none;
margin-top: var(--space-md);
background: var(--primary-light);
}
.timeline-item {
padding-left: var(--space-lg);
}
.timeline-badge {
width: 30px;
height: 30px;
font-size: 1rem;
}
}
.card-compact {
padding: var(--space-md);
}
.card-spacious {
padding: var(--space-2xl);
}
.card-borderless {
box-shadow: none;
border: none;
}
.card-outlined {
box-shadow: none;
border: 2px solid var(--card-border);
}
.card-elevated {
box-shadow: var(--shadow-xl);
}/* ==========================================================================
UTILITY CLASSES - DANIEL WOŹNIAK SHARED SYSTEM
========================================================================== */
.m-0 { margin: 0; }
.m-xs { margin: var(--space-xs); }
.m-sm { margin: var(--space-sm); }
.m-md { margin: var(--space-md); }
.m-lg { margin: var(--space-lg); }
.m-xl { margin: var(--space-xl); }
.m-2xl { margin: var(--space-2xl); }
.m-3xl { margin: var(--space-3xl); }
.m-auto { margin: auto; }
.mt-0 { margin-top: 0; }
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mt-3xl { margin-top: var(--space-3xl); }
.mb-0 { margin-bottom: 0; }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }
.mb-3xl { margin-bottom: var(--space-3xl); }
.ml-0 { margin-left: 0; }
.ml-xs { margin-left: var(--space-xs); }
.ml-sm { margin-left: var(--space-sm); }
.ml-md { margin-left: var(--space-md); }
.ml-lg { margin-left: var(--space-lg); }
.ml-xl { margin-left: var(--space-xl); }
.ml-auto { margin-left: auto; }
.mr-0 { margin-right: 0; }
.mr-xs { margin-right: var(--space-xs); }
.mr-sm { margin-right: var(--space-sm); }
.mr-md { margin-right: var(--space-md); }
.mr-lg { margin-right: var(--space-lg); }
.mr-xl { margin-right: var(--space-xl); }
.mr-auto { margin-right: auto; }
.p-0 { padding: 0; }
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }
.p-2xl { padding: var(--space-2xl); }
.p-3xl { padding: var(--space-3xl); }
.pt-0 { padding-top: 0; }
.pt-xs { padding-top: var(--space-xs); }
.pt-sm { padding-top: var(--space-sm); }
.pt-md { padding-top: var(--space-md); }
.pt-lg { padding-top: var(--space-lg); }
.pt-xl { padding-top: var(--space-xl); }
.pt-2xl { padding-top: var(--space-2xl); }
.pt-3xl { padding-top: var(--space-3xl); }
.pb-0 { padding-bottom: 0; }
.pb-xs { padding-bottom: var(--space-xs); }
.pb-sm { padding-bottom: var(--space-sm); }
.pb-md { padding-bottom: var(--space-md); }
.pb-lg { padding-bottom: var(--space-lg); }
.pb-xl { padding-bottom: var(--space-xl); }
.pb-2xl { padding-bottom: var(--space-2xl); }
.pb-3xl { padding-bottom: var(--space-3xl); }
.pl-0 { padding-left: 0; }
.pl-xs { padding-left: var(--space-xs); }
.pl-sm { padding-left: var(--space-sm); }
.pl-md { padding-left: var(--space-md); }
.pl-lg { padding-left: var(--space-lg); }
.pl-xl { padding-left: var(--space-xl); }
.pr-0 { padding-right: 0; }
.pr-xs { padding-right: var(--space-xs); }
.pr-sm { padding-right: var(--space-sm); }
.pr-md { padding-right: var(--space-md); }
.pr-lg { padding-right: var(--space-lg); }
.pr-xl { padding-right: var(--space-xl); }
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }
.text-5xl { font-size: 3rem; }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.leading-tight { line-height: var(--line-height-tight); }
.leading-normal { line-height: var(--line-height-normal); }
.leading-relaxed { line-height: var(--line-height-relaxed); }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.text-primary { color: var(--text-primary); }
.text-primary-light { color: var(--text-primary-light); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-light { color: var(--text-light); }
.text-white { color: var(--white); }
.text-blue { color: var(--accent-blue); }
.text-orange { color: var(--accent-orange); }
.bg-primary { background-color: var(--primary-dark); }
.bg-primary-medium { background-color: var(--primary-medium); }
.bg-blue { background-color: var(--accent-blue); }
.bg-orange { background-color: var(--accent-orange); }
.bg-white { background-color: var(--white); }
.bg-transparent { background-color: transparent; }
.border { border: 1px solid var(--card-border); }
.border-t { border-top: 1px solid var(--card-border); }
.border-b { border-bottom: 1px solid var(--card-border); }
.border-l { border-left: 1px solid var(--card-border); }
.border-r { border-right: 1px solid var(--card-border); }
.border-none { border: none; }
.rounded { border-radius: var(--border-radius-md); }
.rounded-sm { border-radius: var(--border-radius-sm); }
.rounded-lg { border-radius: var(--border-radius-lg); }
.rounded-xl { border-radius: var(--border-radius-xl); }
.rounded-full { border-radius: var(--border-radius-full); }
.shadow-none { box-shadow: none; }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }
.z-negative { z-index: var(--z-negative); }
.z-normal { z-index: var(--z-normal); }
.z-elevated { z-index: var(--z-elevated); }
.z-sticky { z-index: var(--z-sticky); }
.z-modal { z-index: var(--z-modal); }
.w-full { width: 100%; }
.w-auto { width: auto; }
.w-fit { width: fit-content; }
.max-w-full { max-width: 100%; }
.max-w-screen { max-width: 100vw; }
.h-full { height: 100%; }
.h-screen { height: 100vh; }
.h-auto { height: auto; }
.min-h-screen { min-height: 100vh; }
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-scroll { overflow: scroll; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-hidden { overflow-y: hidden; }
.transition { transition: var(--transition-normal); }
.transition-fast { transition: var(--transition-fast); }
.transition-slow { transition: var(--transition-slow); }
.transition-none { transition: none; }
.transform { transform: translateZ(0); } 
.scale-95 { transform: scale(0.95); }
.scale-100 { transform: scale(1); }
.scale-105 { transform: scale(1.05); }
.scale-110 { transform: scale(1.1); }
.hover\:scale-105:hover { transform: scale(1.05); }
.hover\:scale-110:hover { transform: scale(1.1); }
.hover\:opacity-75:hover { opacity: 0.75; }
.hover\:opacity-100:hover { opacity: 1; }
.focus\:outline-none:focus { outline: none; }
.focus\:ring:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 122, 204, 0.3);
}
.glass {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
backdrop-filter: var(--glass-blur);
}
.glass-hover:hover {
background: var(--surface-card-hover);
border-color: var(--card-border-hover);
}
@media (max-width: 768px) {
.md\:hidden { display: none; }
.md\:block { display: block; }
.md\:flex { display: flex; }
.md\:grid { display: grid; }
.md\:text-center { text-align: center; }
.md\:text-left { text-align: left; }
}
@media (max-width: 480px) {
.sm\:hidden { display: none; }
.sm\:block { display: block; }
.sm\:flex { display: flex; }
.sm\:text-center { text-align: center; }
.sm\:p-sm { padding: var(--space-sm); }
.sm\:px-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
}/* ==========================================================================
BASE STYLES - DANIEL WOŹNIAK SHARED SYSTEM
========================================================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 14px;
line-height: 1.6;
color: var(--text-primary);
background: var(--primary-dark);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tight);
color: var(--text-primary-light);
letter-spacing: -0.02em;
font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
ext-rendering: optimizeLegibility;
}
h1 {
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: var(--font-weight-bold);
letter-spacing: -0.03em;
line-height: 1.1;
ext-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
h2 {
font-size: clamp(1.6rem, 4vw, 2.8rem);
font-weight: var(--font-weight-bold);
letter-spacing: -0.025em;
line-height: 1.15;
margin-bottom: 1.5rem;
}
h3 {
font-size: clamp(1.2rem, 2.5vw, 1.8rem);
font-weight: var(--font-weight-semibold);
letter-spacing: -0.02em;
line-height: 1.25;
margin-bottom: 1rem;
}
p {
margin-bottom: var(--space-md);
color: var(--text-muted);
font-size: clamp(0.9rem, 2.2vw, 1rem);
line-height: 1.7;
font-feature-settings: 'kern' 1;
hyphens: auto;
word-break: break-word;
}
.large-text {
font-size: clamp(1rem, 2.5vw, 1.2rem);
line-height: 1.6;
font-weight: var(--font-weight-medium);
}
.small-text {
font-size: clamp(0.8rem, 1.8vw, 0.9rem);
line-height: 1.5;
opacity: 0.8;
}
.text-gradient {
background: linear-gradient(135deg, var(--accent-blue), var(--accent-orange));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: var(--font-weight-bold);
}
a {
color: var(--accent-blue);
ext-decoration: none;
ransition: var(--transition-normal);
}
a:hover {
color: var(--accent-blue-light);
}
button:focus,
a:focus,
input:focus,
extarea:focus {
outline: 2px solid var(--accent-blue);
outline-offset: 2px;
}
* {
ransition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
::selection {
background: var(--accent-blue);
color: var(--white);
}
::-moz-selection {
background: var(--accent-blue);
color: var(--white);
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--primary-medium);
}
::-webkit-scrollbar-thumb {
background: var(--accent-blue);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--accent-blue-light);
}
img {
max-width: 100%;
height: auto;
display: block;
}
.loading {
opacity: 0.7;
pointer-events: none;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}/* ==========================================================================
NEWSLETTER MINIMAL - CLEAN & FOCUSED
========================================================================== */
.newsletter-minimal {
padding: 4rem 0;
background: linear-gradient(135deg,
rgba(10, 25, 47, 0.95) 0%,
rgba(0, 122, 204, 0.05) 50%,
rgba(10, 25, 47, 0.95) 100%
);
position: relative;
overflow: hidden;
}
.newsletter-minimal::before {
content: '';
position: absolute;
op: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(ellipse at center,
rgba(0, 122, 204, 0.03) 0%,
ransparent 70%
);
pointer-events: none;
}
.newsletter-centered {
display: flex;
justify-content: center;
align-items: center;
min-height: 400px;
}
.newsletter-core {
max-width: 600px;
ext-align: center;
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--border-radius-xl);
padding: 3rem 2rem;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
}
.newsletter-core::before {
content: '';
position: absolute;
op: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
var(--accent-blue) 0%,
var(--accent-gold) 100%
);
}
.newsletter-title {
font-size: clamp(2rem, 4vw, 2.5rem);
font-weight: 900;
color: #ffffff !important;
margin-bottom: 0.5rem;
ext-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
background: none !important;
-webkit-background-clip: initial !important;
-webkit-text-fill-color: #ffffff !important;
background-clip: initial !important;
}
.newsletter-tagline {
font-size: 1.1rem;
color: var(--text-secondary);
margin-bottom: 2rem;
line-height: 1.5;
}
.newsletter-highlight {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-bottom: 2.5rem;
padding: 1rem 1.5rem;
background: rgba(0, 122, 204, 0.1);
border: 1px solid rgba(0, 122, 204, 0.2);
border-radius: var(--border-radius-lg);
}
.highlight-icon {
font-size: 1.5rem;
}
.highlight-text {
font-size: 0.95rem;
color: var(--text-primary-light);
font-weight: 500;
line-height: 1.4;
}
.newsletter-form-minimal {
margin-bottom: 2rem;
}
.form-row {
display: grid;
grid-template-columns: 70fr 30fr auto;
gap: 0.5rem;
margin-bottom: 1rem;
}
.newsletter-input {
padding: 1rem;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--border-radius-md);
background: rgba(255, 255, 255, 0.05);
color: var(--text-primary-light);
font-size: 0.9rem;
backdrop-filter: blur(10px);
ransition: all 0.3s ease;
}
.newsletter-input:focus {
outline: none;
border-color: var(--accent-blue);
box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.2);
background: rgba(255, 255, 255, 0.08);
}
.newsletter-input::placeholder {
color: var(--text-secondary);
}
.newsletter-btn {
padding: 1rem 2rem;
background: linear-gradient(135deg, var(--accent-blue) 0%, #1e40af 100%);
color: white;
border: none;
border-radius: var(--border-radius-md);
font-weight: 700;
ext-transform: uppercase;
letter-spacing: 0.05em;
cursor: pointer;
ransition: all 0.3s ease;
font-size: 0.9rem;
white-space: nowrap;
}
.newsletter-btn:hover {
ransform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0, 122, 204, 0.3);
background: linear-gradient(135deg, #1e40af 0%, var(--accent-blue) 100%);
}
.newsletter-consent {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
cursor: pointer;
font-size: 0.8rem;
color: var(--text-secondary);
}
.newsletter-consent input[type="checkbox"] {
width: 16px;
height: 16px;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 3px;
background: rgba(255, 255, 255, 0.05);
cursor: pointer;
}
.newsletter-consent input[type="checkbox"]:checked {
background: var(--accent-blue);
border-color: var(--accent-blue);
}
.consent-text {
line-height: 1.3;
}
.newsletter-countdown-mini {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
padding: 1rem;
background: rgba(255, 255, 255, 0.02);
border-radius: var(--border-radius-md);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.countdown-text {
font-size: 0.9rem;
color: var(--text-secondary);
font-weight: 500;
}
.countdown-compact {
display: flex;
gap: 0.5rem;
}
.time-unit {
font-size: 1rem;
font-weight: 700;
color: var(--accent-blue);
padding: 0.25rem 0.5rem;
background: rgba(0, 122, 204, 0.1);
border-radius: 4px;
min-width: 40px;
ext-align: center;
}
.newsletter-core:hover {
border-color: rgba(0, 122, 204, 0.2);
box-shadow: 0 25px 70px rgba(0, 122, 204, 0.1);
}
@media (max-width: 768px) {
.newsletter-core {
margin: 0 1rem;
padding: 2rem 1.5rem;
}
.form-row {
grid-template-columns: 1fr;
gap: 1rem;
}
.newsletter-highlight {
flex-direction: column;
gap: 0.5rem;
ext-align: center;
}
.highlight-text {
font-size: 0.9rem;
}
.newsletter-countdown-mini {
flex-direction: column;
gap: 0.5rem;
}
}
@media (max-width: 480px) {
.newsletter-minimal {
padding: 3rem 0;
}
.newsletter-core {
padding: 1.5rem 1rem;
}
.newsletter-title {
font-size: 1.8rem;
}
.newsletter-tagline {
font-size: 1rem;
}
.newsletter-btn {
padding: 1rem;
font-size: 0.8rem;
}
}/* ==========================================================================
PROOF BY NUMBERS SECTION - DANIEL WOŹNIAK
========================================================================== */
.proof-numbers-section {
padding: 5rem 0;
background: linear-gradient(135deg,
rgba(10, 25, 47, 0.98) 0%,
rgba(26, 54, 93, 0.95) 50%,
rgba(10, 25, 47, 0.98) 100%
);
position: relative;
overflow: hidden;
}
.proof-numbers-section::before {
content: '';
position: absolute;
op: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="numbers-grid" width="15" height="15" patternUnits="userSpaceOnUse"><path d="M 15 0 L 0 0 0 15" fill="none" stroke="rgba(0,122,204,0.03)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23numbers-grid)"/></svg>');
opacity: 0.4;
pointer-events: none;
}
.numbers-showcase {
position: relative;
margin: 4rem auto;
max-width: 800px;
min-height: 600px;
display: flex;
align-items: center;
justify-content: center;
}
.numbers-center {
position: absolute;
op: 50%;
left: 50%;
ransform: translate(-50%, -50%);
z-index: 10;
}
.ceo-photo-container {
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
border: 4px solid var(--accent-blue);
box-shadow: 0 20px 60px rgba(0, 122, 204, 0.3);
position: relative;
}
.ceo-photo {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 20%;
}
.numbers-grid {
position: relative;
width: 100%;
height: 600px;
}
.number-item {
position: absolute;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--border-radius-xl);
padding: 1.5rem;
ext-align: center;
ransition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
min-width: 160px;
opacity: 0;
ransform: translateY(30px) scale(0.8);
}
.number-item.animate {
opacity: 1;
ransform: translateY(0) scale(1);
}
.number-item:nth-child(1) { top: 0; left: 50%; transform: translateX(-50%); }
.number-item:nth-child(2) { top: 15%; right: 0; }
.number-item:nth-child(3) { top: 40%; right: -10%; }
.number-item:nth-child(4) { bottom: 15%; right: 0; }
.number-item:nth-child(5) { bottom: 0; left: 50%; transform: translateX(-50%); }
.number-item:nth-child(6) { bottom: 15%; left: 0; }
.number-item:nth-child(7) { top: 40%; left: -10%; }
.number-item:hover {
ransform: translateY(-5px) scale(1.05);
border-color: var(--accent-blue);
box-shadow: 0 20px 40px rgba(0, 122, 204, 0.2);
}
.number-item.success {
border-left: 4px solid #22c55e;
background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(34, 197, 94, 0.05) 100%);
}
.number-item.failure {
border-left: 4px solid #ef4444;
background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
}
.number-item.triumph {
border-left: 4px solid var(--accent-gold);
background: linear-gradient(135deg, rgba(247, 147, 30, 0.15) 0%, rgba(247, 147, 30, 0.05) 100%);
}
.number-item.highlight {
border-color: var(--accent-gold);
background: rgba(247, 147, 30, 0.08);
}
.number-value {
font-size: clamp(1.4rem, 3vw, 2rem);
font-weight: 900;
color: var(--accent-blue);
display: block;
line-height: 1;
margin-bottom: 0.5rem;
}
.number-item.highlight .number-value {
color: var(--accent-gold);
}
.number-item.success .number-value {
color: #22c55e;
}
.number-item.failure .number-value {
color: #ef4444;
}
.number-item.triumph .number-value {
color: var(--accent-gold);
}
.number-desc {
font-size: 0.8rem;
color: var(--text-secondary);
ext-transform: uppercase;
letter-spacing: 0.05em;
line-height: 1.3;
font-weight: 500;
}
.wave-divider {
position: relative;
width: 100%;
height: 120px;
overflow: hidden;
}
.wave-divider svg {
width: 100%;
height: 100%;
display: block;
}
@media (max-width: 768px) {
.numbers-showcase {
min-height: 500px;
margin: 2rem auto;
}
.ceo-photo-container {
width: 150px;
height: 150px;
}
.numbers-grid {
height: 500px;
}
.number-item {
min-width: 120px;
padding: 1rem;
font-size: 0.9rem;
}
.number-value {
font-size: clamp(1rem, 4vw, 1.4rem);
}
.number-desc {
font-size: 0.7rem;
}
}
@media (max-width: 480px) {
.numbers-showcase {
min-height: 400px;
}
.ceo-photo-container {
width: 120px;
height: 120px;
}
.number-item {
min-width: 100px;
padding: 0.8rem;
}
}/* ==========================================================================
NEWSLETTER HYBRID + PROOF NUMBERS - DANIEL WOŹNIAK (STARA WERSJA)
========================================================================== */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin: 3rem 0;
}
.stat-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--border-radius-xl);
padding: 2rem 1.5rem;
ext-align: center;
ransition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0;
ransform: translateY(30px) scale(0.9);
}
.stat-card.animate {
opacity: 1;
ransform: translateY(0) scale(1);
}
.stat-card:hover {
ransform: translateY(-8px) scale(1.02);
border-color: var(--accent-blue);
box-shadow: 0 20px 40px rgba(0, 122, 204, 0.2);
}
.stat-card.highlight {
border-color: var(--accent-gold);
background: rgba(247, 147, 30, 0.08);
}
.stat-number {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 900;
color: var(--accent-blue);
display: block;
line-height: 1;
margin-bottom: 1rem;
}
.stat-card.highlight .stat-number {
color: var(--accent-gold);
}
.stat-label {
font-size: 0.9rem;
color: var(--text-secondary);
ext-transform: uppercase;
letter-spacing: 0.05em;
line-height: 1.4;
font-weight: 500;
}
.insights-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin: 3rem 0;
}
.insight-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--border-radius-xl);
padding: 2rem;
ext-align: center;
ransition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.insight-card::before {
content: '';
position: absolute;
op: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
ransparent,
rgba(255, 255, 255, 0.1),
ransparent
);
ransition: left 0.5s ease;
}
.insight-card:hover::before {
left: 100%;
}
.insight-card:hover {
ransform: translateY(-5px);
border-color: var(--accent-blue);
box-shadow: 0 15px 35px rgba(0, 122, 204, 0.15);
}
.insight-icon {
font-size: 3rem;
margin-bottom: 1rem;
display: block;
}
.insight-title {
font-size: 1.2rem;
font-weight: 700;
color: var(--accent-blue);
margin-bottom: 1rem;
ext-transform: uppercase;
letter-spacing: 0.05em;
}
.insight-description {
font-size: 0.9rem;
color: var(--text-secondary);
line-height: 1.6;
}
.newsletter-countdown {
ext-align: center;
margin: 4rem 0 2rem;
padding: 2rem;
background: rgba(255, 255, 255, 0.03);
border-radius: var(--border-radius-xl);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.countdown-title {
font-size: 1.5rem;
color: var(--text-primary-light);
margin-bottom: 2rem;
font-weight: 600;
}
.countdown-timer {
display: flex;
justify-content: center;
gap: 2rem;
margin-bottom: 2rem;
}
.countdown-item {
ext-align: center;
}
.countdown-number {
display: block;
font-size: 2.5rem;
font-weight: 900;
color: var(--accent-blue);
line-height: 1;
margin-bottom: 0.5rem;
}
.countdown-label {
font-size: 0.8rem;
color: var(--text-secondary);
ext-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 500;
}
.countdown-bonus {
font-size: 1rem;
color: var(--text-secondary);
font-style: italic;
max-width: 600px;
margin: 0 auto;
line-height: 1.5;
}
@media (max-width: 768px) {
.stats-grid {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.5rem;
}
.insights-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.countdown-timer {
gap: 1rem;
}
.countdown-number {
font-size: 2rem;
}
}
.newsletter-hybrid-layout {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 4rem;
align-items: start;
padding: 3rem 0;
}
.newsletter-left-main {
padding-right: 2rem;
}
.newsletter-title {
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 900;
color: var(--text-primary-light);
margin-bottom: 1rem;
background: linear-gradient(135deg, var(--accent-blue), var(--accent-gold));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.newsletter-intro {
font-size: clamp(1.2rem, 2.5vw, 1.5rem);
color: var(--text-primary-light); 
margin-bottom: 2.5rem;
line-height: 1.5;
}
.journey-storytelling {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
margin: 2.5rem 0;
}
.mini-proof-item {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--border-radius-lg);
padding: 1.5rem 1rem;
ext-align: center;
ransition: var(--transition-normal);
position: relative;
overflow: hidden;
}
.mini-proof-item::before {
content: '';
position: absolute;
op: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, var(--accent-blue), var(--accent-gold));
opacity: 0;
ransition: var(--transition-normal);
}
.mini-proof-item:hover::before {
opacity: 1;
}
.mini-proof-item:hover {
ransform: translateY(-3px);
border-color: rgba(0, 122, 204, 0.3);
box-shadow: 0 10px 30px rgba(0, 122, 204, 0.1);
}
.mini-proof-item.highlight {
border-color: var(--accent-gold);
background: rgba(247, 147, 30, 0.05);
}
.mini-proof-item.highlight::before {
opacity: 1;
background: var(--accent-gold);
}
.mini-number {
font-size: clamp(1.4rem, 3vw, 1.8rem);
font-weight: 800;
color: var(--accent-blue);
display: block;
line-height: 1;
margin-bottom: 0.5rem;
}
.mini-proof-item.highlight .mini-number {
color: var(--accent-gold);
}
.mini-label {
font-size: 0.8rem;
color: var(--text-secondary);
ext-transform: uppercase;
letter-spacing: 0.05em;
line-height: 1.3;
font-weight: 500;
}
.newsletter-bonus {
margin-top: 2rem;
padding: 1.5rem;
background: rgba(0, 122, 204, 0.05);
border-left: 3px solid var(--accent-blue);
border-radius: var(--border-radius-md);
}
.bonus-text {
font-size: 1rem;
color: var(--text-light);
line-height: 1.5;
margin: 0;
}
.newsletter-right-form {
padding-left: 2rem;
border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.newsletter-form-clean {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 1.5rem;
}
.newsletter-btn-huge {
padding: 1.5rem 2.5rem;
background: linear-gradient(135deg, var(--accent-blue), var(--accent-blue-light));
color: var(--white);
border: none;
border-radius: var(--border-radius-md);
font-weight: 700;
font-size: 1.2rem;
cursor: pointer;
ransition: var(--transition-normal);
ext-transform: uppercase;
letter-spacing: 0.05em;
box-shadow: 0 8px 25px rgba(0, 122, 204, 0.3);
}
.newsletter-btn-huge:hover {
ransform: translateY(-3px);
box-shadow: 0 15px 40px rgba(0, 122, 204, 0.4);
background: linear-gradient(135deg, var(--accent-blue-light), var(--accent-blue));
}
.newsletter-form {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 1.5rem;
}
.newsletter-input {
padding: 1rem 1.5rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--border-radius-md);
color: var(--text-primary);
font-size: 1rem;
ransition: var(--transition-normal);
}
.newsletter-input:focus {
outline: none;
border-color: var(--accent-blue);
box-shadow: 0 0 0 3px rgba(0, 122, 204, 0.1);
}
.newsletter-btn {
padding: 1.2rem 2rem;
background: linear-gradient(135deg, var(--accent-blue), var(--accent-blue-light));
color: var(--white);
border: none;
border-radius: var(--border-radius-md);
font-weight: 600;
font-size: 1rem;
cursor: pointer;
ransition: var(--transition-normal);
ext-transform: uppercase;
letter-spacing: 0.05em;
}
.newsletter-btn:hover {
ransform: translateY(-2px);
box-shadow: 0 10px 30px rgba(0, 122, 204, 0.3);
}
.checkbox-container {
display: flex;
align-items: flex-start;
gap: 0.75rem;
margin-bottom: 2rem;
cursor: pointer;
}
.checkbox-text {
font-size: 0.85rem;
color: var(--text-secondary);
line-height: 1.4;
}
.checkbox-text a {
color: var(--accent-blue);
ext-decoration: underline;
}
.newsletter-benefits {
background: rgba(255, 255, 255, 0.02);
border-radius: var(--border-radius-lg);
padding: 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.05);
margin: 2rem 0;
}
.benefits-title {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary-light);
margin-bottom: 1rem;
ext-transform: uppercase;
letter-spacing: 0.05em;
}
.benefits-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0.75rem;
}
.benefit-item {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.5rem;
border-radius: var(--border-radius-sm);
ransition: var(--transition-normal);
}
.benefit-item:hover {
background: rgba(255, 255, 255, 0.03);
}
.benefit-icon {
font-size: 1.2rem;
flex-shrink: 0;
}
.benefit-text {
font-size: 0.9rem;
color: var(--text-secondary);
line-height: 1.4;
font-weight: 500;
}
.supporting-proof-section {
padding: 3rem 0;
background: rgba(255, 255, 255, 0.01);
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.supporting-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
margin-bottom: 3rem;
ext-align: center;
}
.stat-item {
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: var(--border-radius-lg);
padding: 1.5rem 1rem;
ransition: var(--transition-normal);
}
.stat-item:hover {
ransform: translateY(-2px);
border-color: rgba(0, 122, 204, 0.2);
}
.stat-item.highlight {
border-color: var(--accent-gold);
background: rgba(247, 147, 30, 0.03);
}
.stat-number {
font-size: clamp(1.2rem, 2.5vw, 1.6rem);
font-weight: 700;
color: var(--accent-blue);
display: block;
margin-bottom: 0.5rem;
}
.stat-item.highlight .stat-number {
color: var(--accent-gold);
}
.stat-label {
font-size: 0.8rem;
color: var(--text-secondary);
ext-transform: uppercase;
letter-spacing: 0.05em;
line-height: 1.3;
}
.newsletter-benefits-full {
ext-align: center;
}
.benefits-title-center {
font-size: 1.2rem;
font-weight: 600;
color: var(--text-primary-light);
margin-bottom: 2rem;
ext-transform: uppercase;
letter-spacing: 0.05em;
}
.benefits-grid-horizontal {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
max-width: 1200px;
margin: 0 auto;
}
@media (max-width: 768px) {
.mini-proof-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
.benefits-grid {
gap: 0.5rem;
}
.benefit-text {
font-size: 0.8rem;
}
}
@media (max-width: 480px) {
.mini-proof-grid {
grid-template-columns: 1fr;
gap: 0.5rem;
}
}
.proof-section {
padding: 5rem 0;
background: linear-gradient(135deg,
rgba(10, 25, 47, 0.98) 0%,
rgba(26, 54, 93, 0.95) 50%,
rgba(10, 25, 47, 0.98) 100%
);
position: relative;
overflow: hidden;
}
.proof-section::before {
content: '';
position: absolute;
op: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="proof-grid" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(0,122,204,0.05)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23proof-grid)"/></svg>');
opacity: 0.3;
pointer-events: none;
}
.proof-header {
ext-align: center;
margin-bottom: 4rem;
position: relative;
z-index: 2;
}
.proof-title {
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 800;
color: var(--text-primary-light);
margin-bottom: 1rem;
background: linear-gradient(135deg, var(--accent-blue), var(--accent-gold));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.proof-subtitle {
font-size: clamp(1.1rem, 2.5vw, 1.4rem);
color: var(--text-secondary);
font-weight: 400;
margin: 0;
}
.proof-grid {
display: flex;
flex-direction: column;
gap: 3rem;
position: relative;
z-index: 2;
}
.proof-row.main-achievements {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
justify-items: center;
}
.proof-card {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--border-radius-xl);
padding: 2.5rem 1.5rem;
ext-align: center;
ransition: var(--transition-normal);
position: relative;
overflow: hidden;
min-height: 150px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.5rem;
}
.proof-card::before {
content: '';
position: absolute;
op: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent-blue), var(--accent-gold));
opacity: 0;
ransition: var(--transition-normal);
}
.proof-card:hover::before {
opacity: 1;
}
.proof-card:hover {
ransform: translateY(-5px);
border-color: rgba(0, 122, 204, 0.3);
box-shadow: 0 20px 40px rgba(0, 122, 204, 0.1);
}
.proof-card.highlight {
border-color: var(--accent-gold);
background: rgba(247, 147, 30, 0.05);
}
.proof-card.highlight::before {
opacity: 1;
background: var(--accent-gold);
}
.proof-number {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 900;
color: var(--accent-blue);
display: block;
line-height: 1;
}
.proof-card.highlight .proof-number {
color: var(--accent-gold);
ext-shadow: 0 0 20px rgba(247, 147, 30, 0.3);
}
.proof-label {
font-size: 0.9rem;
color: var(--text-secondary);
ext-transform: uppercase;
letter-spacing: 0.05em;
line-height: 1.4;
font-weight: 500;
}
.proof-row.journey-timeline {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.timeline-card {
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(15px);
border-radius: var(--border-radius-lg);
padding: 2rem 1.5rem;
position: relative;
ransition: var(--transition-normal);
border-left: 4px solid;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.timeline-card.success {
border-left-color: #22c55e;
background: rgba(34, 197, 94, 0.05);
}
.timeline-card.failure {
border-left-color: #ef4444;
background: rgba(239, 68, 68, 0.05);
}
.timeline-card.triumph {
border-left-color: var(--accent-gold);
background: rgba(247, 147, 30, 0.05);
}
.timeline-card:hover {
ransform: translateX(5px);
box-shadow: -5px 0 20px rgba(0, 122, 204, 0.1);
}
.timeline-year {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-primary-light);
line-height: 1;
}
.timeline-event {
font-size: 0.9rem;
color: var(--text-secondary);
line-height: 1.4;
font-weight: 400;
}
@media (max-width: 768px) {
.proof-section {
padding: 3rem 0;
}
.proof-header {
margin-bottom: 3rem;
}
.proof-grid {
gap: 2rem;
}
.proof-row.main-achievements {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
}
.proof-row.journey-timeline {
grid-template-columns: 1fr;
gap: 1rem;
}
.proof-card {
padding: 2rem 1rem;
min-height: 120px;
}
.timeline-card {
padding: 1.5rem 1rem;
}
}
@media (max-width: 480px) {
.proof-row.main-achievements {
grid-template-columns: repeat(2, 1fr);
}
.proof-number {
font-size: clamp(1.5rem, 6vw, 2rem);
}
.proof-label {
font-size: 0.8rem;
}
}/* ==========================================================================
AI CIRCLE COMPONENT - DANIEL WOŹNIAK
========================================================================== */
.ai-circle {
padding: 4rem 0;
background: var(--primary-dark);
margin: 2rem 0;
position: relative;
}
.ai-circle::before {
content: '';
position: absolute;
op: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0,122,204,0.5), transparent);
}
.jarv-interactive {
display: grid;
grid-template-columns: 70fr 30fr;
gap: 4rem;
margin: 3rem 0;
align-items: flex-start;
}
.jarv-avatar-section {
ext-align: center;
padding: 2rem;
}
.jarv-avatar {
width: 120px;
height: 120px;
background: linear-gradient(135deg, var(--accent-blue), var(--accent-blue-light));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 2rem;
position: relative;
cursor: pointer;
ransition: all 0.3s ease;
box-shadow: 0 8px 32px rgba(0,122,204,0.3);
}
.jarv-avatar:hover {
ransform: scale(1.05);
box-shadow: 0 0 30px rgba(0,122,204,0.5);
}
.jarv-pulse {
position: absolute;
inset: -10px;
border-radius: 50%;
border: 2px solid var(--accent-blue);
animation: pulse 2s infinite;
opacity: 0.7;
}
.jarv-face {
color: white;
font-size: 2rem;
}
.jarv-eyes {
display: flex;
gap: 0.5rem;
justify-content: center;
margin-bottom: 0.5rem;
}
.jarv-eye {
width: 8px;
height: 8px;
background: white;
border-radius: 50%;
animation: blink 3s infinite;
}
@keyframes pulse {
0% { transform: scale(1); opacity: 0.7; }
70% { transform: scale(1.3); opacity: 0; }
100% { transform: scale(1.3); opacity: 0; }
}
@keyframes blink {
0%, 95% { height: 8px; }
96%, 99% { height: 2px; }
100% { height: 8px; }
}
.jarv-mouth {
width: 20px;
height: 10px;
border: 2px solid white;
border-top: none;
border-radius: 0 0 20px 20px;
margin: 0 auto;
}
.jarv-chat-btn {
background: var(--accent-blue);
color: white;
border: none;
padding: 1rem 2rem;
border-radius: 8px;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
ransition: all 0.3s ease;
margin-top: 1rem;
}
.jarv-chat-btn:hover {
background: var(--accent-blue-light);
ransform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,122,204,0.3);
}
.jarv-chat-section {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(0,122,204,0.3);
border-radius: 16px;
padding: 2rem;
backdrop-filter: blur(10px);
display: none;
opacity: 0;
ransform: translateY(20px);
ransition: all 0.3s ease;
}
.jarv-chat-section.active {
display: block;
opacity: 1;
ransform: translateY(0);
}
.chat-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
.chat-header h3 {
color: var(--text-primary-light);
font-size: 1.25rem;
font-weight: 600;
margin: 0;
}
.chat-close {
background: none;
border: none;
color: var(--text-light);
font-size: 1.5rem;
cursor: pointer;
padding: 0.5rem;
border-radius: 50%;
ransition: all 0.3s ease;
}
.chat-close:hover {
background: rgba(255,255,255,0.1);
color: var(--white);
}
.chat-messages {
max-height: 300px;
overflow-y: auto;
margin-bottom: 1.5rem;
padding-right: 0.5rem;
}
.chat-message {
margin-bottom: 1rem;
display: flex;
gap: 0.75rem;
}
.jarv-message {
align-items: flex-start;
}
.message-avatar {
width: 32px;
height: 32px;
background: var(--accent-blue);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
font-size: 0.875rem;
flex-shrink: 0;
}
.message-content {
flex: 1;
background: rgba(255,255,255,0.08);
border-radius: 12px;
padding: 0.75rem 1rem;
}
.message-content p {
color: var(--text-light);
font-size: 0.9rem;
line-height: 1.4;
margin: 0;
}
.message-content p + p {
margin-top: 0.5rem;
}
.chat-input-section {
display: flex;
gap: 0.75rem;
margin-bottom: 1rem;
}
#chatInput {
flex: 1;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 8px;
padding: 0.75rem;
color: var(--white);
font-size: 0.9rem;
ransition: all 0.3s ease;
}
#chatInput::placeholder {
color: rgba(255,255,255,0.5);
}
#chatInput:focus {
outline: none;
border-color: var(--accent-blue);
background: rgba(255,255,255,0.15);
}
#chatSend {
background: var(--accent-blue);
color: white;
border: none;
border-radius: 8px;
padding: 0.75rem 1.25rem;
font-weight: 500;
cursor: pointer;
ransition: all 0.3s ease;
}
#chatSend:hover {
background: var(--accent-blue-light);
}
.quick-questions {
margin-top: 1rem;
}
.quick-questions p {
color: var(--text-light);
font-size: 0.85rem;
margin-bottom: 0.75rem;
}
.quick-question {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.2);
color: var(--text-light);
border-radius: 6px;
padding: 0.5rem 0.75rem;
font-size: 0.8rem;
margin: 0 0.5rem 0.5rem 0;
cursor: pointer;
ransition: all 0.3s ease;
}
.quick-question:hover {
background: rgba(255,255,255,0.1);
border-color: var(--accent-blue);
color: var(--white);
}
.ai-agents {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.agent-card {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 16px;
padding: 2rem;
ext-align: center;
ransition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.agent-card::before {
content: '';
position: absolute;
op: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, var(--accent-blue), transparent);
ransition: left 0.6s ease;
}
.agent-card:hover::before {
left: 100%;
}
.agent-card:hover {
background: rgba(255,255,255,0.08);
ransform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,122,204,0.2);
}
.agent-number {
font-family: var(--font-family-mono);
font-size: 0.875rem;
color: var(--accent-blue);
font-weight: 600;
margin-bottom: 1rem;
letter-spacing: 0.1em;
}
.agent-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--white);
margin-bottom: 0.5rem;
letter-spacing: -0.02em;
}
.agent-role {
font-size: 0.9rem;
color: var(--accent-blue);
font-weight: 500;
margin-bottom: 1.5rem;
ext-transform: uppercase;
letter-spacing: 0.05em;
}
.agent-desc {
color: var(--text-light);
line-height: 1.6;
font-size: 0.95rem;
}
@media (max-width: 768px) {
.jarv-interactive {
grid-template-columns: 1fr;
gap: 2rem;
}
.jarv-chat-section {
padding: 1.5rem;
}
.ai-agents {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.agent-card {
padding: 1.5rem;
}
.jarv-avatar {
width: 100px;
height: 100px;
}
.chat-input-section {
flex-direction: column;
}
.quick-questions {
ext-align: center;
}
.quick-question {
display: block;
margin: 0 0 0.5rem 0;
width: 100%;
}
}
.hero-journey-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-xl);
margin: var(--space-xl) 0;
position: relative;
z-index: 1;
}
.journey-item {
background: transparent;
perspective: 1000px;
height: 180px; 
border-radius: var(--border-radius-lg);
ransition: all 0.3s ease; 
cursor: pointer;
position: relative;
z-index: 2; 
}
.journey-card-inner {
position: relative;
width: 100%;
height: 100%;
ext-align: center;
ransition: transform 0.6s ease-in-out; 
ransform-style: preserve-3d;
}
.journey-item:hover .journey-card-inner {
ransform: rotateY(180deg);
}
.journey-card-front,
.journey-card-back {
position: absolute;
width: 100%;
height: 180px; 
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: var(--space-md) var(--space-sm);
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--border-radius-lg);
ext-align: center;
overflow: hidden;
box-sizing: border-box; 
}
.journey-card-front {
}
.journey-card-back {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(0, 122, 204, 0.3);
ransform: rotateY(180deg);
padding: var(--space-lg) var(--space-md);
}
.journey-back-title {
font-size: 1.2rem;
font-weight: 700;
color: var(--accent-blue);
margin-bottom: var(--space-md);
ext-transform: none;
line-height: 1.3;
}
.journey-back-text {
font-size: 0.9rem;
color: var(--text-light);
line-height: 1.5;
ext-align: center;
margin: 0;
max-width: 280px;
}
.journey-item:hover {
z-index: 10; 
}
.journey-item:hover .journey-card-front,
.journey-item:hover .journey-card-back {
box-shadow:
0 15px 30px rgba(0, 0, 0, 0.2),
0 0 20px rgba(0, 122, 204, 0.15);
}
.journey-number {
font-size: 2.8rem;
font-weight: 900;
color: var(--text-primary);
line-height: 1;
margin-bottom: var(--space-sm);
letter-spacing: -2px;
ext-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
ransition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.journey-item:hover .journey-number {
ransform: scale(1.1);
color: #ffffff;
ext-shadow:
0 4px 12px rgba(0, 0, 0, 0.5),
0 0 20px rgba(0, 122, 204, 0.4);
}
.journey-label {
font-size: 0.9rem;
font-weight: 500;
color: var(--text-light);
line-height: 1.4;
ext-transform: none;
letter-spacing: 0.5px;
ransition: all 0.6s ease;
max-width: 280px;
margin: 0 auto;
}
.journey-item:hover .journey-label {
color: #ffffff;
ransform: translateY(-3px);
}
.journey-item.success .journey-card-front,
.journey-item.success .journey-card-back {
background: linear-gradient(135deg,
rgba(0, 122, 204, 0.08) 0%,
rgba(255, 255, 255, 0.05) 100%);
border-left: 4px solid rgba(0, 122, 204, 0.6);
}
.journey-item.success:hover .journey-card-front,
.journey-item.success:hover .journey-card-back {
box-shadow:
0 15px 30px rgba(0, 0, 0, 0.2),
0 0 20px rgba(0, 122, 204, 0.15);
}
.journey-item.success .journey-back-title {
color: var(--accent-blue);
}
.journey-item.failure .journey-card-front,
.journey-item.failure .journey-card-back {
background: linear-gradient(135deg,
rgba(0, 122, 204, 0.05) 0%,
rgba(255, 255, 255, 0.05) 100%);
border-left: 4px solid rgba(0, 122, 204, 0.4);
}
.journey-item.failure:hover .journey-card-front,
.journey-item.failure:hover .journey-card-back {
box-shadow:
0 15px 30px rgba(0, 0, 0, 0.2),
0 0 20px rgba(0, 122, 204, 0.1);
}
.journey-item.failure .journey-back-title {
color: rgba(0, 122, 204, 0.8);
}
.journey-item.triumph .journey-card-front,
.journey-item.triumph .journey-card-back {
background: linear-gradient(135deg,
rgba(0, 122, 204, 0.12) 0%,
rgba(0, 122, 204, 0.06) 50%,
rgba(255, 255, 255, 0.05) 100%);
border-left: 4px solid var(--accent-blue);
}
.journey-item.triumph:hover .journey-card-front,
.journey-item.triumph:hover .journey-card-back {
box-shadow:
0 15px 30px rgba(0, 0, 0, 0.2),
0 0 25px rgba(0, 122, 204, 0.3);
}
.journey-item.triumph .journey-back-title {
color: var(--accent-blue);
}
.journey-item {
opacity: 0;
ransform: translateY(40px);
animation: revealStats 0.8s ease-out forwards;
}
.journey-item:nth-child(1) { animation-delay: 0.1s; }
.journey-item:nth-child(2) { animation-delay: 0.2s; }
.journey-item:nth-child(3) { animation-delay: 0.3s; }
.journey-item:nth-child(4) { animation-delay: 0.4s; }
.journey-item:nth-child(5) { animation-delay: 0.5s; }
.journey-item:nth-child(6) { animation-delay: 0.6s; }
.journey-item:nth-child(7) { animation-delay: 0.7s; }
@keyframes revealStats {
o {
opacity: 1;
ransform: translateY(0);
}
}
@media (max-width: 768px) {
.hero-journey-stats {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--space-lg);
}
.journey-item {
height: 200px; 
}
.journey-card-front,
.journey-card-back {
padding: var(--space-lg) var(--space-md);
height: 200px; 
}
.journey-number {
font-size: 2.8rem;
}
.journey-label {
font-size: 0.9rem;
}
.journey-back-title {
font-size: 1.2rem;
}
.journey-back-text {
font-size: 0.9rem;
}
.journey-item:hover {
}
}
@media (max-width: 480px) {
.hero-journey-stats {
grid-template-columns: 1fr;
}
.journey-item {
height: 180px; 
}
.journey-card-front,
.journey-card-back {
padding: var(--space-md) var(--space-sm);
height: 180px; 
}
.journey-number {
font-size: 2.5rem;
}
.journey-back-title {
font-size: 1.1rem;
}
.journey-back-text {
font-size: 0.85rem;
max-width: 240px;
}
}
@media (prefers-reduced-motion: reduce) {
.journey-item,
.journey-number,
.journey-label {
ransition: none;
animation: none;
}
.journey-item:hover {
ransform: none;
}
.journey-item::before,
.journey-item::after {
animation: none;
}
}/* ==========================================================================
WRITING DESK CONCEPT - CREATIVE BOOKS SECTION
========================================================================== */
.writing-desk-section {
padding: 6rem 0;
background: linear-gradient(135deg,
rgba(10, 25, 47, 0.98) 0%,
rgba(26, 54, 93, 0.95) 50%,
rgba(10, 25, 47, 0.98) 100%
);
position: relative;
overflow: hidden;
}
.writing-desk-section::before {
content: '';
position: absolute;
op: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="writing-grid" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(0,122,204,0.02)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23writing-grid)"/></svg>');
opacity: 0.6;
pointer-events: none;
}
.writing-desk-showcase {
margin: 4rem 0;
position: relative;
}
.desk-surface {
background: linear-gradient(145deg,
rgba(139, 69, 19, 0.1) 0%,
rgba(101, 67, 33, 0.05) 100%
);
border-radius: var(--border-radius-xl);
padding: 3rem 2rem;
position: relative;
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
border: 1px solid rgba(139, 69, 19, 0.2);
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 3rem;
align-items: start;
}
.book-workspace {
display: flex;
flex-direction: column;
gap: 2rem;
opacity: 0;
ransform: translateY(30px);
ransition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.book-workspace.animate {
opacity: 1;
ransform: translateY(0);
}
.book-workspace.completed .book-cover-mockup {
width: 200px;
height: 280px;
background: linear-gradient(145deg,
var(--accent-blue) 0%,
rgba(0, 122, 204, 0.8) 100%
);
border-radius: 8px;
position: relative;
box-shadow:
0 20px 40px rgba(0, 122, 204, 0.3),
inset 0 2px 0 rgba(255, 255, 255, 0.2);
ransform: perspective(800px) rotateY(-15deg);
margin: 0 auto;
}
.book-spine {
position: absolute;
left: -20px;
op: 0;
bottom: 0;
width: 40px;
background: linear-gradient(135deg,
rgba(0, 100, 180, 1) 0%,
rgba(0, 80, 150, 1) 100%
);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1rem;
border-radius: 4px 0 0 4px;
}
.book-spine-title {
writing-mode: vertical-lr;
color: white;
font-size: 0.7rem;
font-weight: 700;
ext-transform: uppercase;
letter-spacing: 0.1em;
}
.book-spine-author {
writing-mode: vertical-lr;
color: rgba(255, 255, 255, 0.8);
font-size: 0.6rem;
font-weight: 500;
}
.book-workspace.in-progress .manuscript-stack {
width: 200px;
height: 280px;
position: relative;
margin: 0 auto;
}
.pages-stack {
position: relative;
width: 100%;
height: 100%;
}
.page-top {
background: rgba(255, 255, 255, 0.95);
border-radius: 4px;
padding: 2rem 1.5rem;
position: relative;
z-index: 3;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
border-left: 4px solid #ef4444;
}
.page-title {
font-size: 0.9rem;
font-weight: 700;
color: #333;
line-height: 1.3;
}
.pages-beneath {
position: absolute;
op: 10px;
left: 5px;
right: -5px;
bottom: -10px;
background: rgba(255, 255, 255, 0.8);
border-radius: 4px;
z-index: 2;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.pages-beneath::before {
content: '';
position: absolute;
op: 10px;
left: 5px;
right: -5px;
bottom: -10px;
background: rgba(255, 255, 255, 0.6);
border-radius: 4px;
z-index: 1;
}
.book-status-badge {
position: absolute;
op: -10px;
right: -10px;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.7rem;
font-weight: 700;
ext-transform: uppercase;
letter-spacing: 0.1em;
z-index: 10;
}
.book-status-badge.completed {
background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
color: white;
box-shadow: 0 5px 15px rgba(34, 197, 94, 0.3);
}
.book-status-badge.in-progress {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
color: white;
box-shadow: 0 5px 15px rgba(245, 158, 11, 0.3);
animation: pulse 2s ease-in-out infinite;
}
.book-details {
ext-align: center;
}
.book-meta {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
.book-number {
font-size: 2rem;
font-weight: 900;
color: var(--accent-gold);
line-height: 1;
}
.book-type {
font-size: 0.8rem;
color: var(--text-secondary);
ext-transform: uppercase;
letter-spacing: 0.1em;
padding: 0.5rem 1rem;
background: rgba(255, 255, 255, 0.05);
border-radius: 20px;
}
.book-title {
font-size: 1.4rem;
font-weight: 700;
color: var(--text-primary-light);
margin-bottom: 1rem;
line-height: 1.3;
}
.book-description {
font-size: 0.9rem;
color: var(--text-secondary);
line-height: 1.6;
margin-bottom: 2rem;
}
.book-timeline {
margin-bottom: 2rem;
}
.book-release {
font-size: 0.8rem;
color: var(--accent-blue);
font-weight: 600;
ext-transform: uppercase;
letter-spacing: 0.1em;
display: block;
margin-bottom: 1rem;
}
.book-progress-bar {
width: 100%;
height: 6px;
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
overflow: hidden;
position: relative;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--accent-blue) 0%, var(--accent-gold) 100%);
border-radius: 3px;
ransition: width 1s ease;
}
.progress-fill.writing-animation {
position: relative;
overflow: hidden;
}
.progress-fill.writing-animation::after {
content: '';
position: absolute;
op: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
animation: writing-progress 3s ease-in-out infinite;
}
@keyframes writing-progress {
0% { left: -100%; }
50% { left: 100%; }
100% { left: 100%; }
}
.book-preorder-form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.book-email-input {
padding: 1rem;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--border-radius-md);
background: rgba(255, 255, 255, 0.05);
color: var(--text-primary-light);
font-size: 0.9rem;
backdrop-filter: blur(10px);
ransition: all 0.3s ease;
}
.book-email-input:focus {
outline: none;
border-color: var(--accent-blue);
box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.2);
}
.book-email-input::placeholder {
color: var(--text-secondary);
}
.book-cta-btn {
padding: 1rem 2rem;
border: none;
border-radius: var(--border-radius-md);
font-weight: 700;
ext-transform: uppercase;
letter-spacing: 0.05em;
cursor: pointer;
ransition: all 0.3s ease;
font-size: 0.85rem;
}
.book-cta-btn.primary {
background: linear-gradient(135deg, var(--accent-blue) 0%, #1e40af 100%);
color: white;
}
.book-cta-btn.primary:hover {
ransform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0, 122, 204, 0.3);
}
.book-cta-btn.secondary {
background: linear-gradient(135deg, var(--accent-gold) 0%, #d97706 100%);
color: white;
}
.book-cta-btn.secondary:hover {
ransform: translateY(-2px);
box-shadow: 0 10px 25px rgba(247, 147, 30, 0.3);
}
.desk-divider {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2rem;
padding: 2rem 0;
}
.writing-tools {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
opacity: 0.6;
}
.pen-tool {
width: 4px;
height: 80px;
background: linear-gradient(180deg, #8b4513 0%, #a0522d 100%);
border-radius: 2px;
position: relative;
}
.pen-tool::before {
content: '';
position: absolute;
op: -10px;
left: -3px;
width: 10px;
height: 20px;
background: #c0c0c0;
border-radius: 5px;
}
.coffee-stain {
width: 30px;
height: 30px;
background: radial-gradient(circle, rgba(139, 69, 19, 0.3) 0%, transparent 70%);
border-radius: 50%;
}
.paper-notes {
padding: 0.5rem;
background: rgba(255, 255, 255, 0.9);
color: #333;
font-size: 0.7rem;
border-radius: 4px;
ransform: rotate(-5deg);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.desk-atmosphere {
position: absolute;
op: -2rem;
right: 2rem;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 1rem;
}
.desk-lamp {
width: 60px;
height: 60px;
background: radial-gradient(circle, rgba(255, 255, 200, 0.1) 0%, transparent 70%);
border-radius: 50%;
position: relative;
}
.desk-lamp::before {
content: '';
position: absolute;
op: 50%;
left: 50%;
ransform: translate(-50%, -50%);
width: 20px;
height: 20px;
background: rgba(255, 255, 200, 0.3);
border-radius: 50%;
box-shadow: 0 0 20px rgba(255, 255, 200, 0.2);
}
.inspiration-quote {
font-size: 0.8rem;
color: var(--text-secondary);
font-style: italic;
max-width: 200px;
ext-align: right;
line-height: 1.4;
opacity: 0.7;
}
@media (max-width: 768px) {
.desk-surface {
grid-template-columns: 1fr;
gap: 2rem;
padding: 2rem 1rem;
}
.desk-divider {
order: 2;
}
.book-workspace.in-progress {
order: 3;
}
.book-cover-mockup,
.manuscript-stack {
width: 150px;
height: 210px;
}
.book-title {
font-size: 1.2rem;
}
.desk-atmosphere {
position: relative;
op: 0;
right: 0;
align-items: center;
margin-top: 2rem;
}
}
@media (max-width: 480px) {
.book-cover-mockup,
.manuscript-stack {
width: 120px;
height: 170px;
}
.book-title {
font-size: 1rem;
}
.book-description {
font-size: 0.8rem;
}
}
/* ==========================================================================
SEXY BOOK IMAGES & MEDIA CONTACT - SALES MACHINE
========================================================================== */
.book-cover-image {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--border-radius-lg);
ransition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.book-cover-mockup {
position: relative;
overflow: visible;
}
.book-glow-effect {
position: absolute;
op: -10px;
left: -10px;
right: -10px;
bottom: -10px;
background: linear-gradient(135deg,
rgba(0, 122, 204, 0.2) 0%,
rgba(0, 122, 204, 0.1) 50%,
rgba(0, 122, 204, 0.2) 100%
);
border-radius: var(--border-radius-xl);
filter: blur(15px);
opacity: 0;
ransition: opacity 0.4s ease;
z-index: -1;
}
.book-workspace:hover .book-glow-effect {
opacity: 1;
}
.writing-glow {
background: linear-gradient(135deg,
rgba(255, 165, 0, 0.3) 0%,
rgba(255, 140, 0, 0.1) 50%,
rgba(255, 165, 0, 0.3) 100%
);
}
.book-workspace:hover .book-cover-image {
ransform: translateY(-5px) scale(1.02);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}
.book-cta-dual {
display: grid;
grid-template-columns: 70fr 30fr;
gap: 1.5rem;
margin-top: 1.5rem;
}
.media-contact-box {
background: linear-gradient(135deg,
rgba(255, 69, 0, 0.1) 0%,
rgba(255, 140, 0, 0.05) 100%
);
border: 1px solid rgba(255, 69, 0, 0.2);
border-radius: var(--border-radius-lg);
padding: 1.5rem;
ext-align: center;
position: relative;
overflow: hidden;
}
.media-contact-box::before {
content: '';
position: absolute;
op: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #FF4500 0%, #FF8C00 100%);
}
.media-label {
font-size: 0.75rem;
font-weight: 700;
color: #FF4500;
ext-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 0.5rem;
}
.media-text {
font-size: 0.85rem;
color: var(--text-secondary);
margin-bottom: 1rem;
font-style: italic;
}
.book-cta-btn.media {
background: linear-gradient(135deg, #FF4500 0%, #FF8C00 100%);
color: white;
ext-decoration: none;
display: inline-block;
font-size: 0.8rem;
padding: 0.75rem 1.5rem;
}
.book-cta-btn.media:hover {
ransform: translateY(-2px);
box-shadow: 0 8px 20px rgba(255, 69, 0, 0.4);
}
.reader-signup-box {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--border-radius-lg);
padding: 1.5rem;
}
@media (max-width: 768px) {
.book-cta-dual {
grid-template-columns: 1fr;
gap: 1rem;
}
.media-contact-box,
.reader-signup-box {
padding: 1rem;
}
}
/* ==========================================================================
FERRARI-LEVEL PREMIUM BOOKS SECTION
========================================================================== */
.bestseller-showcase {
margin: 4rem 0;
position: relative;
}
.books-gallery {
display: grid;
grid-template-columns: 70fr 30fr;
gap: 4rem;
align-items: start;
background: linear-gradient(145deg,
rgba(20, 20, 40, 0.95) 0%,
rgba(10, 25, 47, 0.98) 50%,
rgba(20, 20, 40, 0.95) 100%
);
border-radius: var(--border-radius-xl);
padding: 4rem 3rem;
position: relative;
overflow: hidden;
box-shadow:
0 30px 100px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
}
.books-gallery::before {
content: '';
position: absolute;
op: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(0, 122, 204, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(247, 147, 30, 0.1) 0%, transparent 50%);
pointer-events: none;
}
.premium-book-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--border-radius-xl);
padding: 0;
position: relative;
overflow: hidden;
ransition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(15px);
}
.premium-book-card:hover {
ransform: translateY(-10px) scale(1.02);
border-color: rgba(0, 122, 204, 0.4);
box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
}
.premium-book-card.bestseller:hover {
border-color: rgba(0, 122, 204, 0.6);
}
.premium-book-card.investigative:hover {
border-color: rgba(255, 69, 0, 0.6);
}
.book-hero {
padding: 2rem;
ext-align: center;
position: relative;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.05) 0%,
rgba(255, 255, 255, 0.02) 100%
);
}
.book-cover-premium {
position: relative;
display: block;
width: 100%;
height: 210px;
margin: 0 auto;
overflow: hidden;
}
.book-cover-image {
width: 100%;
height: 190px;
object-fit: cover;
object-position: center;
border-radius: var(--border-radius-lg);
border: 2px solid rgba(255, 255, 255, 0.2);
ransition: all 0.3s ease;
position: relative;
z-index: 2;
}
.premium-book-card:hover .book-cover-image {
border-color: rgba(255, 255, 255, 0.4);
ransform: scale(1.02);
}
.book-status-badge {
position: absolute;
op: -10px;
right: -10px;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 700;
ext-transform: uppercase;
letter-spacing: 0.05em;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.book-status-badge.ready {
background: linear-gradient(135deg, #10B981 0%, #047857 100%);
color: white;
}
.book-status-badge.writing {
background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
color: white;
}
.bestseller-ribbon, .exclusive-ribbon {
position: absolute;
op: 15px;
left: -15px;
background: linear-gradient(135deg, #3B82F6 0%, #1E40AF 100%);
color: white;
padding: 0.5rem 1.5rem;
font-size: 0.7rem;
font-weight: 700;
ext-transform: uppercase;
letter-spacing: 0.1em;
ransform: rotate(-45deg);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.exclusive-ribbon {
background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
}
.premium-glow, .investigative-glow {
position: absolute;
op: -20px;
left: -20px;
right: -20px;
bottom: -20px;
background: radial-gradient(circle,
rgba(0, 122, 204, 0.2) 0%,
ransparent 70%
);
opacity: 0;
ransition: opacity 0.4s ease;
z-index: -1;
}
.investigative-glow {
background: radial-gradient(circle,
rgba(255, 69, 0, 0.2) 0%,
ransparent 70%
);
}
.premium-book-card:hover .premium-glow,
.premium-book-card:hover .investigative-glow {
opacity: 1;
}
.book-content-premium {
padding: 2rem;
}
.book-header {
ext-align: center;
margin-bottom: 2rem;
}
.book-category {
font-size: 0.75rem;
color: var(--accent-blue);
ext-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 600;
margin-bottom: 0.5rem;
}
.book-title-premium {
font-size: clamp(1.3rem, 2.5vw, 1.6rem);
font-weight: 900;
color: var(--text-primary-light);
margin-bottom: 0.5rem;
line-height: 1.2;
}
.book-subtitle {
font-size: 0.85rem;
color: var(--text-secondary);
font-weight: 500;
}
.book-description-premium {
margin: 1.5rem 0;
ext-align: center;
}
.book-hook {
font-size: 1.1rem;
font-weight: 700;
color: var(--accent-gold);
margin-bottom: 0.75rem;
font-style: italic;
}
.book-details {
font-size: 0.9rem;
color: var(--text-light);
line-height: 1.6;
}
.book-value-props {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin: 1.5rem 0;
}
.value-prop {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem;
background: rgba(255, 255, 255, 0.02);
border-radius: var(--border-radius-md);
border-left: 3px solid var(--accent-blue);
}
.prop-icon {
font-size: 1.2rem;
flex-shrink: 0;
}
.prop-text {
font-size: 0.85rem;
color: var(--text-light);
font-weight: 500;
}
.book-release-info {
display: grid;
grid-template-columns: auto 1fr;
gap: 1.5rem;
align-items: center;
margin: 1.5rem 0;
padding: 1rem;
background: rgba(255, 255, 255, 0.03);
border-radius: var(--border-radius-md);
}
.release-date {
ext-align: center;
}
.date-label {
display: block;
font-size: 0.7rem;
color: var(--text-secondary);
ext-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 0.25rem;
}
.date-value {
font-size: 0.9rem;
font-weight: 700;
color: var(--accent-blue);
}
.progress-indicator {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.progress-bar-premium {
height: 6px;
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
overflow: hidden;
}
.progress-fill-premium {
height: 100%;
background: linear-gradient(90deg, var(--accent-blue) 0%, var(--accent-gold) 100%);
border-radius: 3px;
ransition: width 0.3s ease;
}
.writing-progress .progress-fill-premium {
background: linear-gradient(90deg, #F59E0B 0%, #EF4444 100%);
animation: writing-pulse 2s infinite;
}
@keyframes writing-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.progress-label {
font-size: 0.75rem;
color: var(--text-secondary);
ext-align: right;
}
.book-cta-premium {
margin-top: 2rem;
}
.exclusive-signup {
display: flex;
flex-direction: column;
gap: 1rem;
}
.premium-email-input {
padding: 1rem 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--border-radius-lg);
background: rgba(255, 255, 255, 0.05);
color: var(--text-primary-light);
font-size: 0.9rem;
backdrop-filter: blur(10px);
ransition: all 0.3s ease;
}
.premium-email-input:focus {
outline: none;
border-color: var(--accent-blue);
box-shadow: 0 0 0 3px rgba(0, 122, 204, 0.2);
background: rgba(255, 255, 255, 0.08);
}
.premium-cta-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 1.25rem 2rem;
background: linear-gradient(135deg, var(--accent-blue) 0%, #1E40AF 100%);
color: white;
border: none;
border-radius: var(--border-radius-lg);
font-weight: 700;
ext-transform: uppercase;
letter-spacing: 0.05em;
cursor: pointer;
ransition: all 0.4s ease;
font-size: 0.85rem;
position: relative;
overflow: hidden;
}
.premium-cta-btn::before {
content: '';
position: absolute;
op: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
ransition: left 0.6s;
}
.premium-cta-btn:hover::before {
left: 100%;
}
.premium-cta-btn:hover {
ransform: translateY(-3px);
box-shadow: 0 15px 35px rgba(0, 122, 204, 0.4);
background: linear-gradient(135deg, #1E40AF 0%, var(--accent-blue) 100%);
}
.premium-cta-btn.secondary {
background: linear-gradient(135deg, #F59E0B 0%, #EF4444 100%);
}
.premium-cta-btn.secondary:hover {
box-shadow: 0 15px 35px rgba(245, 158, 11, 0.4);
background: linear-gradient(135deg, #EF4444 0%, #F59E0B 100%);
}
.scarcity-indicator {
ext-align: center;
margin-top: 1rem;
font-size: 0.75rem;
color: var(--accent-gold);
font-style: italic;
font-weight: 500;
}
.book-cta-premium.dual {
display: grid;
grid-template-columns: 70fr 30fr;
gap: 1.5rem;
}
.media-contact-premium {
background: linear-gradient(135deg,
rgba(255, 69, 0, 0.1) 0%,
rgba(255, 140, 0, 0.05) 100%
);
border: 1px solid rgba(255, 69, 0, 0.3);
border-radius: var(--border-radius-lg);
padding: 1.5rem;
ext-align: center;
}
.media-header {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1rem;
}
.media-title {
font-size: 0.8rem;
font-weight: 700;
color: #FF4500;
ext-transform: uppercase;
letter-spacing: 0.05em;
}
.media-description {
font-size: 0.8rem;
color: var(--text-secondary);
margin-bottom: 1rem;
font-style: italic;
}
.premium-media-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background: linear-gradient(135deg, #FF4500 0%, #FF8C00 100%);
color: white;
ext-decoration: none;
border-radius: var(--border-radius-md);
font-size: 0.75rem;
font-weight: 700;
ext-transform: uppercase;
letter-spacing: 0.05em;
ransition: all 0.3s ease;
}
.premium-media-btn:hover {
ransform: translateY(-2px);
box-shadow: 0 8px 25px rgba(255, 69, 0, 0.4);
}
.reader-signup-premium {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--border-radius-lg);
padding: 1.5rem;
}
@media (max-width: 768px) {
.books-gallery {
grid-template-columns: 1fr;
gap: 2rem;
padding: 2rem 1rem;
}
.book-cover-premium {
height: 180px;
}
.book-cover-image {
height: 160px;
}
.book-cta-premium.dual {
grid-template-columns: 1fr;
gap: 1rem;
}
.media-contact-premium,
.reader-signup-premium {
padding: 1rem;
}
}
@media (max-width: 480px) {
.book-cover-premium {
height: 160px;
}
.book-cover-image {
height: 140px;
}
.book-value-props {
gap: 0.5rem;
}
.value-prop {
padding: 0.5rem;
gap: 0.5rem;
}
.book-release-info {
grid-template-columns: 1fr;
ext-align: center;
gap: 1rem;
}
}/* ==========================================================================
HERO COMPONENTS - DANIEL WOŹNIAK (SKOPIOWANE Z BACKUP)
========================================================================== */
.hero {
min-height: 35vh;
display: flex;
align-items: center;
position: relative;
background:
linear-gradient(135deg, rgba(10, 25, 47, 0.95) 0%, rgba(26, 54, 93, 0.95) 100%),
radial-gradient(ellipse at top right, rgba(0, 122, 204, 0.1) 0%, transparent 50%),
radial-gradient(ellipse at bottom left, rgba(247, 147, 30, 0.05) 0%, transparent 50%);
padding: clamp(5rem, 8vw, 6rem) 0 0rem 0;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
op: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(0,122,204,0.03)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
opacity: 0.5;
pointer-events: none;
}
.hero-content {
display: grid;
grid-template-columns: 70fr 30fr;
gap: 2rem;
align-items: start;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
.hero-left {
display: flex;
flex-direction: column;
gap: 1rem;
}
.hero-overline {
font-size: 0.9rem;
font-weight: 500;
color: var(--accent-blue);
ext-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 0.5rem;
}
.hero-main-title {
font-size: clamp(1.6rem, 3.5vw, 2.4rem);
font-weight: 800;
line-height: 1.2;
color: var(--text-primary-light);
margin: 0 0 1rem 0;
letter-spacing: -0.02em;
position: relative;
}
.typewriter-text {
opacity: 0;
animation: fadeIn 0.5s ease-in-out forwards;
}
.typewriter-cursor {
display: inline-block;
background: var(--accent-blue);
width: 3px;
animation: blink 1s infinite;
margin-left: 2px;
}
@keyframes fadeIn {
o { opacity: 1; }
}
@keyframes blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
.typewriter-complete .typewriter-cursor {
display: none;
}
.hero-emphasis-line {
margin-top: 1rem;
position: relative;
display: inline-block;
}
.hero-emphasis {
font-size: clamp(1rem, 2.5vw, 1.4rem);
font-weight: 700;
color: var(--accent-blue);
position: relative;
display: inline-block;
opacity: 1;
line-height: 1.4;
}
.hero-emphasis::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--accent-blue), var(--accent-gold));
border-radius: 2px;
animation: underlineGlow 2s ease-in-out infinite;
}
@keyframes underlineGlow {
0%, 100% {
opacity: 0.8;
ransform: scaleX(1);
}
50% {
opacity: 1;
ransform: scaleX(1.05);
}
}
.hero-description {
font-size: clamp(1.1rem, 2.2vw, 1.3rem);
line-height: 1.6;
color: var(--text-light);
margin: 1rem 0 2rem 0;
}
.hero-cta-section {
display: flex;
gap: 1.5rem;
margin: 3rem 0;
}
.hero-cta-primary {
padding: 1.2rem 2rem;
background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-blue-light) 100%);
color: var(--white);
ext-decoration: none;
border-radius: var(--border-radius-md);
font-weight: 600;
font-size: 1rem;
ransition: var(--transition-normal);
box-shadow: var(--shadow-lg);
position: relative;
overflow: hidden;
}
.hero-cta-primary::before {
content: '';
position: absolute;
op: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
ransition: left 0.6s ease;
}
.hero-cta-primary:hover::before {
left: 100%;
}
.hero-cta-primary:hover {
ransform: translateY(-2px) scale(1.02);
box-shadow: var(--shadow-xl);
}
.hero-cta-secondary {
padding: 1.2rem 2rem;
background: transparent;
color: var(--text-primary);
ext-decoration: none;
border: 2px solid rgba(255,255,255,0.3);
border-radius: var(--border-radius-md);
font-weight: 500;
font-size: 1rem;
ransition: var(--transition-normal);
}
.hero-cta-secondary:hover {
background: rgba(255,255,255,0.1);
border-color: var(--accent-blue);
ransform: translateY(-2px);
}
.hero-social-proof {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
padding: 2rem 0 1rem 0;
border-top: 1px solid rgba(255,255,255,0.1);
ext-align: center;
}
.hero-journey-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
padding: 1rem 0 2rem 0;
border-bottom: 1px solid rgba(255,255,255,0.1);
ext-align: center;
}
.journey-item {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 1rem;
border-radius: var(--border-radius-md);
ransition: var(--transition-normal);
}
.journey-item.success {
background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(34, 197, 94, 0.05) 100%);
border-left: 3px solid #22c55e;
}
.journey-item.failure {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
border-left: 3px solid #ef4444;
}
.journey-item.triumph {
background: linear-gradient(135deg, rgba(0, 122, 204, 0.15) 0%, rgba(247, 147, 30, 0.05) 100%);
border-left: 3px solid var(--accent-gold);
}
.journey-number {
font-size: 1.2rem;
font-weight: 700;
color: var(--text-primary-light);
}
.journey-label {
font-size: 0.8rem;
color: var(--text-secondary);
ext-transform: uppercase;
letter-spacing: 0.05em;
line-height: 1.3;
}
.proof-item {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.proof-number {
font-size: 1.5rem;
font-weight: 700;
color: var(--accent-blue);
}
.proof-item.highlight .proof-number {
font-size: 2rem;
color: var(--accent-gold);
ext-shadow: 0 2px 8px rgba(247, 147, 30, 0.3);
}
.proof-item.highlight .proof-label {
color: var(--accent-gold);
font-weight: 600;
}
.proof-label {
font-size: 0.85rem;
color: var(--text-secondary);
ext-transform: uppercase;
letter-spacing: 0.05em;
}
.hero-quote {
margin: 3rem 0;
max-width: 600px;
}
.hero-quote blockquote {
font-size: clamp(1.1rem, 2.5vw, 1.4rem);
line-height: 1.5;
color: #666666;
margin: 0;
font-weight: 300;
}
.hero-right {
display: flex;
justify-content: center;
align-items: flex-start;
padding-top: 1rem;
}
.hero-image-container {
position: relative;
width: 100%;
max-width: 450px;
height: 500px;
border-radius: var(--border-radius-xl);
overflow: hidden;
box-shadow: var(--shadow-xl);
ransition: var(--transition-slow);
}
.hero-image {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center 15%;
position: absolute;
op: 0;
left: 0;
z-index: 1;
}
.hero-image-container:hover .hero-image {
ransform: scale(1.02);
}
.hero-image-container:hover .hero-brand-circle {
ransform: scale(1.1);
border-color: var(--accent-gold);
}
.hero-image-container:hover .hero-overlay-content {
ransform: translateY(-2px);
}
.hero-image-overlay {
position: absolute;
op: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
background: linear-gradient(135deg, rgba(10,25,47,0.85) 0%, rgba(0,122,204,0.75) 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 1;
ransition: var(--transition-normal);
}
.hero-image-overlay::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(0,122,204,0.1) 20px, rgba(0,122,204,0.1) 40px);
}
.hero-brand-circle {
width: 80px;
height: 80px;
border: 3px solid var(--accent-blue);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
background: rgba(0,122,204,0.2);
backdrop-filter: blur(10px);
position: relative;
z-index: 3;
ransition: var(--transition-normal);
}
.hero-dw-sygnet {
font-size: 2rem;
font-weight: 700;
color: white;
}
.hero-overlay-content {
position: relative;
z-index: 3;
ext-align: center;
co/* ==========================================================================
HOMEPAGE SPECIFIC STYLES - DANIEL WOŹNIAK
========================================================================== */
.newsletter-section {
padding: var(--space-4xl) 0;
background: var(--primary-dark);
color: var(--text-primary-light);
}
.newsletter-split {
display: grid;
grid-template-columns: 1fr auto 2fr;
gap: var(--space-3xl);
align-items: center;
margin-bottom: var(--space-4xl);
}
.newsletter-left {
ext-align: center;
}
.newsletter-title {
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: var(--font-weight-bold);
color: var(--accent-blue);
margin: 0;
ext-transform: uppercase;
letter-spacing: 0.1em;
}
.newsletter-divider {
width: 2px;
height: 200px;
background: linear-gradient(180deg, transparent, var(--accent-blue), transparent);
opacity: 0.6;
}
.newsletter-right {
padding-left: var(--space-xl);
}
.newsletter-intro h3 {
font-size: clamp(1.5rem, 4vw, 2rem);
font-weight: var(--font-weight-semibold);
color: var(--text-primary-light);
margin-bottom: var(--space-md);
}
.newsletter-desc {
font-size: clamp(1rem, 2.5vw, 1.125rem);
line-height: var(--line-height-relaxed);
color: var(--text-light);
margin-bottom: var(--space-xl);
}
.newsletter-form {
display: flex;
gap: var(--space-md);
margin-bottom: var(--space-lg);
}
.newsletter-input {
flex: 1;
padding: var(--space-md);
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: var(--border-radius-md);
background: rgba(255, 255, 255, 0.1);
color: var(--white);
font-size: 1rem;
ransition: var(--transition-normal);
}
.newsletter-input::placeholder {
color: rgba(255, 255, 255, 0.6);
}
.newsletter-input:focus {
border-color: var(--accent-blue);
background: rgba(255, 255, 255, 0.15);
outline: none;
}
.newsletter-btn {
padding: var(--space-md) var(--space-xl);
background: var(--accent-blue);
color: var(--white);
border: none;
border-radius: var(--border-radius-md);
font-weight: var(--font-weight-semibold);
cursor: pointer;
ransition: var(--transition-normal);
white-space: nowrap;
}
.newsletter-btn:hover {
background: var(--accent-blue-light);
ransform: translateY(-2px);
}
.checkbox-container {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: 0.875rem;
color: var(--text-light);
cursor: pointer;
}
.checkbox-container input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--accent-blue);
}
.checkbox-text a {
color: var(--accent-blue);
ext-decoration: underline;
}
.insights-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-xl);
margin-bottom: var(--space-4xl);
}
.insight-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--border-radius-lg);
padding: var(--space-xl);
ext-align: center;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
ransition: var(--transition-normal);
}
.insight-card:hover {
ransform: translateY(-4px);
box-shadow: 0 16px 48px rgba(0, 122, 204, 0.2);
border-color: rgba(0, 122, 204, 0.3);
}
.insight-icon {
font-size: 3rem;
margin-bottom: var(--space-md);
display: block;
}
.insight-title {
font-size: clamp(1.125rem, 2.5vw, 1.25rem);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-md);
color: var(--text-primary-light);
}
.insight-desc {
font-size: clamp(0.875rem, 2vw, 1rem);
line-height: var(--line-height-relaxed);
color: var(--text-light);
}
.countdown-section {
ext-align: center;
padding: var(--space-2xl);
background: rgba(255, 255, 255, 0.05);
border-radius: var(--border-radius-lg);
margin-top: var(--space-2xl);
}
.countdown-title {
font-size: clamp(1.5rem, 4vw, 2rem);
font-weight: var(--font-weight-semibold);
color: var(--text-primary-light);
margin-bottom: var(--space-xl);
}
.countdown-date {
color: var(--accent-blue);
font-weight: var(--font-weight-bold);
}
.countdown-timer {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-lg);
margin-bottom: var(--space-xl);
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.countdown-item {
background: rgba(255, 255, 255, 0.1);
border-radius: var(--border-radius-md);
padding: var(--space-lg);
ext-align: center;
}
.countdown-number {
display: block;
font-size: clamp(2rem, 5vw, 3rem);
font-weight: var(--font-weight-bold);
color: var(--accent-blue);
font-family: var(--font-family-mono);
margin-bottom: var(--space-xs);
}
.countdown-label {
font-size: 0.875rem;
color: var(--text-light);
ext-transform: uppercase;
letter-spacing: 0.1em;
}
.newsletter-bonus {
background: rgba(247, 147, 30, 0.1);
border: 1px solid var(--accent-gold);
border-radius: var(--border-radius-md);
padding: var(--space-lg);
ext-align: center;
}
.newsletter-bonus p {
color: var(--text-primary-light);
margin: 0;
}
.newsletter-bonus strong {
color: var(--accent-gold);
}
.pillars-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
margin-top: var(--space-2xl);
}
.pillars,
.mapa-bitewna,
.ai-circle,
.ceo-problems,
.video-section,
.lifestyle,
.plans-2026,
.books,
.booking-section,
.domkniecie {
background: var(--primary-dark);
color: var(--text-primary-light);
padding: var(--space-4xl) 0;
margin: 0;
}
.video-content-layout {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: var(--space-3xl);
align-items: center;
}
.video-text h2 {
font-size: clamp(2rem, 5vw, 3rem);
font-weight: var(--font-weight-bold);
color: var(--text-primary-light);
margin-bottom: var(--space-lg);
}
.video-container {
border-radius: var(--border-radius-lg);
overflow: hidden;
box-shadow: var(--shadow-xl);
}
.ceo-insights-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.insight-item {
background: var(--white);
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
overflow: hidden;
ransition: var(--transition-normal);
border: 1px solid rgba(0,122,204,0.1);
}
.insight-item:hover {
ransform: translateY(-4px);
box-shadow: var(--shadow-xl);
border-color: rgba(0,122,204,0.3);
}
.insight-header {
padding: 1.5rem 1.5rem 1rem;
background: linear-gradient(135deg, rgba(0,122,204,0.05) 0%, rgba(0,122,204,0.02) 100%);
border-bottom: 1px solid rgba(0,122,204,0.1);
}
.insight-tag {
display: inline-block;
padding: 0.4rem 1rem;
background: linear-gradient(135deg, var(--accent-blue), var(--accent-blue-light));
color: var(--white);
font-size: 0.85rem;
font-weight: 600;
ext-transform: uppercase;
letter-spacing: 0.05em;
border-radius: 20px;
margin-bottom: 1rem;
}
.insight-quote {
font-size: 1.1rem;
font-weight: 500;
color: var(--primary-dark);
font-style: italic;
line-height: 1.4;
position: relative;
padding-left: 1rem;
border-left: 3px solid var(--accent-blue);
}
.insight-quote::before {
content: '"';
color: var(--accent-blue);
font-size: 1.5em;
margin-right: 0.25em;
}
.insight-quote::after {
content: '"';
color: var(--accent-blue);
font-size: 1.5em;
margin-left: 0.25em;
}
.insight-response h4 {
color: var(--primary-dark);
font-size: clamp(1.125rem, 2.5vw, 1.25rem);
margin-bottom: var(--space-sm);
}
.insight-response p {
color: var(--text-muted);
line-height: var(--line-height-relaxed);
}
.insight-response strong {
color: var(--accent-blue);
font-weight: var(--font-weight-semibold);
}
.lifestyle {
background: var(--primary-dark);
color: var(--text-primary-light);
padding: var(--space-4xl) 0;
}
.lifestyle-title {
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: var(--font-weight-bold);
ext-align: center;
margin-bottom: var(--space-xl);
color: var(--text-primary-light);
}
.lifestyle-intro {
ext-align: center;
max-width: 800px;
margin: 0 auto var(--space-4xl);
}
.lifestyle-intro p {
font-size: clamp(1.125rem, 2.5vw, 1.25rem);
line-height: var(--line-height-relaxed);
color: var(--text-light);
margin-bottom: var(--space-lg);
}
.lifestyle-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-xl);
margin-bottom: var(--space-4xl);
}
.lifestyle-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--border-radius-lg);
padding: var(--space-xl);
ext-align: center;
ransition: var(--transition-normal);
}
.lifestyle-card:hover {
background: rgba(255, 255, 255, 0.08);
ransform: translateY(-4px);
}
.lifestyle-icon {
font-size: 3rem;
margin-bottom: var(--space-md);
display: block;
}
.lifestyle-card-title {
font-size: clamp(1.125rem, 2.5vw, 1.25rem);
font-weight: var(--font-weight-semibold);
color: var(--text-primary-light);
margin-bottom: var(--space-md);
ext-transform: uppercase;
letter-spacing: 0.05em;
}
.lifestyle-card-desc {
color: var(--text-light);
line-height: var(--line-height-relaxed);
margin-bottom: var(--space-md);
}
.lifestyle-detail {
font-size: 0.875rem;
color: var(--accent-blue);
font-weight: var(--font-weight-medium);
padding: var(--space-sm);
background: rgba(0, 122, 204, 0.1);
border-radius: var(--border-radius-sm);
}
.mikroharmonogram {
background: rgba(255, 255, 255, 0.05);
border-radius: var(--border-radius-lg);
padding: var(--space-2xl);
ext-align: center;
}
.mikroharmonogram h3 {
color: var(--text-primary-light);
margin-bottom: var(--space-lg);
}
.harmonogram-timeline {
font-family: var(--font-family-mono);
font-size: clamp(0.875rem, 2vw, 1rem);
color: var(--accent-blue);
background: rgba(0, 0, 0, 0.2);
padding: var(--space-lg);
border-radius: var(--border-radius-md);
overflow-x: auto;
white-space: nowrap;
}
.plans-2026 {
background: var(--primary-dark);
color: var(--text-primary-light);
padding: var(--space-4xl) 0;
}
.plans-layout {
display: grid;
grid-template-columns: 70fr 30fr;
gap: var(--space-4xl);
align-items: center;
}
.plans-image img {
width: 100%;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-xl);
}
.plans-title {
font-size: clamp(2rem, 5vw, 3rem);
font-weight: var(--font-weight-bold);
margin-bottom: var(--space-md);
}
.plans-subtitle {
font-size: clamp(1.125rem, 2.5vw, 1.25rem);
color: var(--text-light);
margin-bottom: var(--space-2xl);
}
.goals-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--space-lg);
}
.goal-card {
background: rgba(255, 255, 255, 0.05);
border-radius: var(--border-radius-md);
padding: var(--space-lg);
ext-align: center;
ransition: var(--transition-normal);
}
.goal-card:hover {
background: rgba(255, 255, 255, 0.08);
ransform: translateY(-2px);
}
.goal-icon {
font-size: 2rem;
margin-bottom: var(--space-sm);
}
.goal-title {
font-size: 1rem;
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-xs);
}
.goal-category {
font-size: 0.75rem;
color: var(--accent-blue);
ext-transform: uppercase;
margin-bottom: var(--space-xs);
}
.goal-desc {
font-size: 0.875rem;
color: var(--text-light);
}
.books {
background: var(--primary-dark);
color: var(--text-primary-light);
padding: var(--space-4xl) 0;
}
.books-title {
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: var(--font-weight-bold);
ext-align: center;
margin-bottom: var(--space-md);
}
.books-subtitle {
font-size: clamp(1.125rem, 2.5vw, 1.25rem);
color: var(--text-light);
ext-align: center;
margin-bottom: var(--space-lg);
}
.books-intro {
max-width: 800px;
margin: 0 auto var(--space-4xl);
ext-align: center;
}
.books-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: var(--space-2xl);
}
.book-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--border-radius-lg);
padding: var(--space-2xl);
ransition: var(--transition-normal);
}
.book-card:hover {
background: rgba(255, 255, 255, 0.08);
ransform: translateY(-4px);
}
.book-number {
font-size: 3rem;
font-weight: var(--font-weight-bold);
color: var(--accent-blue);
font-family: var(--font-family-mono);
margin-bottom: var(--space-md);
}
.book-title {
font-size: clamp(1.25rem, 3vw, 1.5rem);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-lg);
}
.book-desc {
line-height: var(--line-height-relaxed);
color: var(--text-light);
margin-bottom: var(--space-lg);
}
.book-release {
font-size: 0.875rem;
color: var(--accent-blue);
font-weight: var(--font-weight-medium);
margin-bottom: var(--space-md);
}
.book-cta {
background: var(--accent-blue);
color: var(--white);
padding: var(--space-md) var(--space-lg);
border: none;
border-radius: var(--border-radius-md);
font-weight: var(--font-weight-semibold);
cursor: pointer;
ransition: var(--transition-normal);
width: 100%;
}
.book-cta:hover {
background: var(--accent-blue-light);
ransform: translateY(-2px);
}
.booking-section {
background: var(--primary-dark);
color: var(--text-primary-light);
padding: var(--space-4xl) 0;
}
.booking-header {
ext-align: center;
margin-bottom: var(--space-4xl);
}
.booking-title {
font-size: clamp(2rem, 5vw, 3rem);
font-weight: var(--font-weight-bold);
margin-bottom: var(--space-md);
}
.booking-subtitle {
font-size: clamp(1.125rem, 2.5vw, 1.25rem);
color: var(--text-light);
}
.booking-widget {
width: 100%;
max-width: 1200px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.05);
border-radius: var(--border-radius-lg);
padding: var(--space-lg);
min-height: 600px;
}
#my-cal-inline-15min {
width: 100% !important;
height: 600px !important;
min-height: 600px !important;
overflow: hidden !important;
}
.domkniecie {
background: var(--primary-dark);
color: var(--text-primary-light);
padding: var(--space-4xl) 0;
ext-align: center;
}
.domkniecie-content {
max-width: 600px;
margin: 0 auto;
}
.domkniecie-text {
font-size: clamp(1.25rem, 3vw, 1.5rem);
line-height: var(--line-height-relaxed);
margin-bottom: var(--space-xl);
}
.domkniecie-signature {
font-size: clamp(1.5rem, 4vw, 2rem);
font-weight: var(--font-weight-semibold);
color: var(--accent-blue);
}
@media (max-width: 768px) {
.newsletter-split {
grid-template-columns: 1fr;
gap: var(--space-xl);
ext-align: center;
}
.newsletter-divider {
width: 100%;
height: 2px;
order: 2;
}
.newsletter-right {
padding-left: 0;
order: 3;
}
.newsletter-form {
flex-direction: column;
}
.countdown-timer {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-md);
}
.insights-grid {
grid-template-columns: 1fr;
gap: var(--space-lg);
}
.pillars-grid {
grid-template-columns: 1fr;
}
.video-content-layout {
grid-template-columns: 1fr;
gap: var(--space-xl);
ext-align: center;
}
.ceo-insights-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.insight-item {
margin: 0;
}
.insight-header {
padding: 1.25rem;
}
}/* ==========================================================================
BLOG STYLES - DANIEL WOŹNIAK
========================================================================== */
.nav {
background: rgba(10, 25, 47, 0.95);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding: 1rem 0;
position: fixed;
op: 0;
left: 0;
right: 0;
z-index: var(--z-sticky);
ransition: var(--transition-normal);
}
.nav-container {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 var(--container-padding);
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-logo {
color: var(--white);
font-size: 1.25rem;
font-weight: var(--font-weight-bold);
ext-decoration: none;
}
.nav-logo-text {
background: linear-gradient(135deg, var(--accent-blue), var(--accent-blue-light));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.nav-menu {
display: flex;
list-style: none;
gap: var(--space-xl);
margin: 0;
padding: 0;
}
.nav-menu a {
color: var(--text-light);
ext-decoration: none;
font-weight: var(--font-weight-medium);
ransition: var(--transition-normal);
padding: var(--space-sm) 0;
position: relative;
}
.nav-menu a:hover,
.nav-menu a.nav-active {
color: var(--white);
}
.nav-menu a.nav-active::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 2px;
background: var(--accent-blue);
border-radius: 1px;
}
.nav-mobile-toggle {
display: none;
background: none;
border: none;
color: var(--white);
font-size: 1.5rem;
cursor: pointer;
flex-direction: column;
gap: 4px;
padding: var(--space-sm);
}
.nav-mobile-toggle span {
width: 25px;
height: 2px;
background: var(--white);
ransition: var(--transition-normal);
}
.blog-hero {
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-medium) 100%);
padding: 12rem 0 6rem 0;
position: relative;
overflow: hidden;
}
.blog-hero::before {
content: '';
position: absolute;
op: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="glow" cx="50%" cy="50%" r="50%"><stop offset="0%" stop-color="%23007acc" stop-opacity="0.1"/><stop offset="100%" stop-color="%23007acc" stop-opacity="0"/></radialGradient></defs><circle cx="200" cy="300" r="150" fill="url(%23glow)"/><circle cx="800" cy="700" r="200" fill="url(%23glow)"/></svg>') no-repeat center;
background-size: cover;
opacity: 0.3;
}
.featured-article {
padding: var(--space-4xl) 0;
}
.featured-card {
max-width: 800px;
margin: 0 auto;
padding: var(--space-2xl);
ext-align: center;
}
.featured-meta {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-lg);
margin-bottom: var(--space-lg);
}
.category-tag {
background: var(--accent-blue);
color: var(--white);
padding: var(--space-xs) var(--space-sm);
border-radius: var(--border-radius-sm);
font-size: 0.75rem;
font-weight: var(--font-weight-bold);
ext-transform: uppercase;
letter-spacing: 0.05em;
}
.date {
color: var(--text-muted);
font-size: 0.9rem;
}
.featured-card h2 {
font-size: clamp(1.5rem, 4vw, 2.5rem);
font-weight: var(--font-weight-bold);
margin-bottom: var(--space-lg);
line-height: var(--line-height-tight);
}
.featured-card h2 a {
color: var(--text-primary-light);
ext-decoration: none;
ransition: var(--transition-normal);
}
.featured-card h2 a:hover {
color: var(--accent-blue);
}
.featured-card p {
font-size: clamp(1rem, 2.5vw, 1.125rem);
line-height: var(--line-height-relaxed);
color: var(--text-muted);
margin-bottom: var(--space-xl);
}
.articles-section {
padding: var(--space-4xl) 0;
}
.section-title {
font-size: clamp(2rem, 4vw, 2.5rem);
font-weight: var(--font-weight-bold);
ext-align: center;
margin-bottom: var(--space-3xl);
color: var(--text-primary-light);
}
.articles-grid {
gap: var(--space-2xl);
}
.article-card {
padding: var(--space-xl);
ransition: var(--transition-normal);
}
.article-card:hover {
ransform: translateY(-8px);
box-shadow: var(--shadow-glow-blue);
}
.article-meta {
display: flex;
align-items: center;
gap: var(--space-md);
margin-bottom: var(--space-md);
}
.article-card h3 {
font-size: clamp(1.125rem, 2.5vw, 1.25rem);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-md);
line-height: var(--line-height-tight);
}
.article-card h3 a {
color: var(--text-primary-light);
ext-decoration: none;
ransition: var(--transition-normal);
}
.article-card h3 a:hover {
color: var(--accent-blue);
}
.article-card p {
font-size: 0.95rem;
line-height: var(--line-height-relaxed);
color: var(--text-muted);
margin-bottom: var(--space-lg);
}
.newsletter-section {
padding: var(--space-4xl) 0;
background: linear-gradient(135deg, var(--primary-medium) 0%, var(--primary-dark) 100%);
}
.newsletter-card {
max-width: 600px;
margin: 0 auto;
padding: var(--space-3xl);
ext-align: center;
}
.newsletter-card h2 {
font-size: clamp(1.5rem, 4vw, 2rem);
font-weight: var(--font-weight-bold);
margin-bottom: var(--space-lg);
color: var(--text-primary-light);
}
.newsletter-card p {
font-size: clamp(1rem, 2.5vw, 1.125rem);
line-height: var(--line-height-relaxed);
color: var(--text-muted);
margin-bottom: var(--space-xl);
}
.newsletter-form {
margin-bottom: var(--space-lg);
}
.form-group {
display: flex;
gap: var(--space-md);
max-width: 400px;
margin: 0 auto;
}
.form-group input {
flex: 1;
padding: var(--space-md);
border: 1px solid var(--card-border);
border-radius: var(--border-radius-lg);
background: rgba(255, 255, 255, 0.05);
color: var(--white);
font-size: 1rem;
ransition: var(--transition-normal);
}
.form-group input:focus {
outline: none;
border-color: var(--accent-blue);
background: rgba(255, 255, 255, 0.1);
}
.form-group input::placeholder {
color: var(--text-muted);
}
.newsletter-note {
font-size: 0.875rem;
color: var(--text-muted);
margin: 0;
}
.footer {
background: var(--primary-dark);
padding: var(--space-4xl) 0 var(--space-2xl);
border-top: 1px solid rgba(0, 122, 204, 0.2);
}
.footer-content {
gap: var(--space-2xl);
margin-bottom: var(--space-2xl);
}
.footer-section h3 {
font-size: 1.125rem;
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-lg);
color: var(--text-primary-light);
}
.footer-section p {
font-size: 0.9rem;
line-height: var(--line-height-relaxed);
color: var(--text-muted);
margin-bottom: var(--space-md);
}
.footer-links {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.footer-links a {
color: var(--text-muted);
ext-decoration: none;
font-size: 0.9rem;
ransition: var(--transition-normal);
}
.footer-links a:hover {
color: var(--accent-blue);
}
.footer-bottom {
padding-top: var(--space-lg);
border-top: 1px solid rgba(255, 255, 255, 0.1);
ext-align: center;
}
.footer-bottom p {
font-size: 0.875rem;
color: var(--text-muted);
margin: 0;
}
.article-hero {
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-medium) 100%);
padding: 12rem 0 4rem 0;
ext-align: center;
}
.article-hero h1 {
font-size: clamp(2rem, 5vw, 3rem);
font-weight: var(--font-weight-bold);
margin-bottom: var(--space-lg);
color: var(--text-primary-light);
line-height: var(--line-height-tight);
}
.article-hero .article-meta {
justify-content: center;
margin-bottom: var(--space-lg);
}
.article-content {
max-width: 800px;
margin: 0 auto;
padding: var(--space-4xl) var(--space-lg);
}
.article-content h2 {
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: var(--font-weight-bold);
margin: var(--space-3xl) 0 var(--space-lg) 0;
color: var(--text-primary-light);
}
.article-content h3 {
font-size: clamp(1.25rem, 2.5vw, 1.5rem);
font-weight: var(--font-weight-semibold);
margin: var(--space-2xl) 0 var(--space-md) 0;
color: var(--text-primary-light);
}
.article-content p {
font-size: clamp(1rem, 2vw, 1.125rem);
line-height: var(--line-height-relaxed);
margin-bottom: var(--space-lg);
color: var(--text-muted);
}
.article-content ul,
.article-content ol {
margin: var(--space-lg) 0;
padding-left: var(--space-xl);
}
.article-content li {
margin-bottom: var(--space-sm);
color: var(--text-muted);
line-height: var(--line-height-relaxed);
}
.article-content blockquote {
background: rgba(0, 122, 204, 0.1);
border-left: 4px solid var(--accent-blue);
padding: var(--space-lg);
margin: var(--space-xl) 0;
border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
}
.article-content blockquote p {
font-style: italic;
font-size: 1.125rem;
color: var(--text-light);
margin: 0;
}
.back-to-blog {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
color: var(--accent-blue);
ext-decoration: none;
font-weight: var(--font-weight-medium);
margin-bottom: var(--space-xl);
ransition: var(--transition-normal);
}
.back-to-blog:hover {
color: var(--accent-blue-light);
ransform: translateX(-4px);
}
@media (max-width: 768px) {
.nav-menu {
position: absolute;
op: 100%;
left: 0;
right: 0;
background: var(--primary-dark);
flex-direction: column;
gap: 0;
padding: var(--space-lg);
border-top: 1px solid rgba(255, 255, 255, 0.1);
ransform: translateY(-100%);
opacity: 0;
visibility: hidden;
ransition: var(--transition-normal);
}
.nav-menu.active {
ransform: translateY(0);
opacity: 1;
visibility: visible;
}
.nav-menu li {
padding: var(--space-sm) 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.nav-menu li:last-child {
border-bottom: none;
}
.nav-mobile-toggle {
display: flex;
}
.nav-mobile-toggle.active span:nth-child(1) {
ransform: rotate(45deg) translate(5px, 5px);
}
.nav-mobile-toggle.active span:nth-child(2) {
opacity: 0;
}
.nav-mobile-toggle.active span:nth-child(3) {
ransform: rotate(-45deg) translate(7px, -6px);
}
.blog-hero {
padding: 10rem 0 4rem 0;
}
.articles-grid {
grid-template-columns: 1fr;
gap: var(--space-xl);
}
.form-group {
flex-direction: column;
max-width: 100%;
}
.footer-content {
grid-template-columns: 1fr;
gap: var(--space-xl);
ext-align: center;
}
.article-content {
padding: var(--space-2xl) var(--space-md);
}
}
@media (max-width: 480px) {
.nav-container {
padding: 0 var(--space-md);
}
.blog-hero {
padding: 8rem 0 3rem 0;
}
.featured-card,
.newsletter-card {
padding: var(--space-xl);
}
.article-content {
padding: var(--space-xl) var(--space-sm);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
ransform: translateY(20px);
}
o {
opacity: 1;
ransform: translateY(0);
}
}
.article-card,
.featured-card {
animation: fadeInUp 0.6s ease-out;
}
.article-card:nth-child(2) { animation-delay: 0.1s; }
.article-card:nth-child(3) { animation-delay: 0.2s; }
.article-card:nth-child(4) { animation-delay: 0.3s; }
@media print {
.nav,
.newsletter-section,
.footer {
display: none;
}
.article-content {
max-width: none;
padding: 0;
}
.article-hero {
background: none;
color: #000;
padding: 2rem 0;
}
}/* ==========================================================================
TYPOGRAPHY SYSTEM - DANIEL WOŹNIAK
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500&display=swap');
body {
font-family: var(--font-family-base);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-normal);
color: var(--text-primary-light);
}
.text-xs { font-size: clamp(0.75rem, 1.5vw, 0.875rem); }
.text-sm { font-size: clamp(0.875rem, 2vw, 1rem); }
.text-base { font-size: clamp(1rem, 2.2vw, 1.125rem); }
.text-lg { font-size: clamp(1.125rem, 2.5vw, 1.25rem); }
.text-xl { font-size: clamp(1.25rem, 3vw, 1.5rem); }
.text-2xl { font-size: clamp(1.5rem, 4vw, 2rem); }
.text-3xl { font-size: clamp(2rem, 5vw, 3rem); }
.text-4xl { font-size: clamp(2.5rem, 6vw, 4rem); }
.text-5xl { font-size: clamp(3rem, 7vw, 5rem); }
h1, h2, h3, h4, h5, h6 {
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
letter-spacing: -0.02em;
margin-bottom: 0.5em;
}
h1 {
font-size: clamp(2.5rem, 6vw, 4.5rem);
font-weight: var(--font-weight-bold);
}
h2 {
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: var(--font-weight-bold);
}
h3 {
font-size: clamp(1.5rem, 4vw, 2.5rem);
font-weight: var(--font-weight-semibold);
}
h4 {
font-size: clamp(1.25rem, 3vw, 2rem);
font-weight: var(--font-weight-semibold);
}
h5 {
font-size: clamp(1.125rem, 2.5vw, 1.5rem);
font-weight: var(--font-weight-medium);
}
h6 {
font-size: clamp(1rem, 2vw, 1.25rem);
font-weight: var(--font-weight-medium);
}
p {
margin-bottom: 1em;
line-height: var(--line-height-relaxed);
}
.lead {
font-size: clamp(1.125rem, 2.5vw, 1.25rem);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-normal);
color: var(--text-light);
}
.small {
font-size: clamp(0.875rem, 2vw, 1rem);
line-height: var(--line-height-normal);
}
code, pre, .mono {
font-family: var(--font-family-mono);
font-size: 0.9em;
}
a {
color: var(--accent-blue);
ransition: var(--transition-fast);
}
a:hover {
color: var(--accent-blue-light);
}
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-light { color: var(--text-light); }
.text-muted { color: var(--text-muted); }
.text-primary { color: var(--text-primary); }
.text-accent { color: var(--accent-blue); }
.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.text-shadow {
ext-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.text-shadow-lg {
ext-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}
::selection {
background: var(--accent-blue);
color: var(--white);
}
::-moz-selection {
background: var(--accent-blue);
color: var(--white);
}/* ==========================================================================
GLOBAL RESET & NORMALIZE - DANIEL WOŹNIAK
========================================================================== */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
overflow-x: hidden;
font-size: 14px; 
}
body {
font-family: var(--font-family-base);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-normal);
color: var(--text-primary);
background: var(--primary-dark);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
ext-rendering: optimizeLegibility;
}
ul, ol {
list-style: none;
}
a {
ext-decoration: none;
color: inherit;
}
button {
font-family: inherit;
font-size: inherit;
border: none;
background: none;
cursor: pointer;
}
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
height: auto;
}
input, button, textarea, select {
font: inherit;
color: inherit;
}
input:focus,
button:focus,
extarea:focus,
select:focus {
outline: 2px solid var(--accent-blue);
outline-offset: 2px;
}
able {
border-collapse: collapse;
border-spacing: 0;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
ransition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.focus-visible {
outline: 2px solid var(--accent-blue);
outline-offset: 2px;
}
@media print {
*,
*::before,
*::after {
background: transparent !important;
color: black !important;
box-shadow: none !important;
ext-shadow: none !important;
}
}/* ==========================================================================
CSS CUSTOM PROPERTIES - DANIEL WOŹNIAK DESIGN SYSTEM
========================================================================== */
:root {
--primary-dark: #0a192f;
--primary-medium: #172a45;
--primary-light: #1e3a58;
--accent-blue: #007acc;
--accent-blue-light: #4f96d8;
--accent-gold: #f7931e;
--white: #ffffff;
--surface-card: #ffffff;
--surface-dark: #0f1419;
--text-primary-light: #ffffff; 
--text-primary-dark: #0a192f; 
--text-secondary: #8892b0;
--text-muted: #495670;
--text-light: #cbd5e1;
--container-width: 1400px; 
--container-padding: 2rem;
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--border-radius-sm: 0.375rem;
--border-radius-md: 0.5rem;
--border-radius-lg: 0.75rem;
--border-radius-xl: 1rem;
--transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transition-normal: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
--font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-family-mono: 'JetBrains Mono', 'Monaco', 'Consolas', monospace;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-tight: 1.1;
--line-height-normal: 1.4;
--line-height-relaxed: 1.6;
--z-negative: -1;
--z-normal: 1;
--z-elevated: 10;
--z-sticky: 100;
--z-overlay: 1000;
--z-modal: 9999;
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;
--space-3xl: 4rem;
--space-4xl: 6rem;
--breakpoint-sm: 640px;
--breakpoint-md: 768px;
--breakpoint-lg: 1024px;
--breakpoint-xl: 1280px;
--breakpoint-2xl: 1536px;
}
.theme-dark {
--text-primary: var(--text-primary-light);
--surface-primary: var(--primary-dark);
}
.theme-light {
--text-primary: var(--text-primary-dark);
--surface-primary: var(--white);
}
:root {
--hero-bg: var(--primary-dark);
--hero-text: var(--text-primary-light);
--nav-bg: rgba(10, 25, 47, 0.95);
--nav-text: var(--text-primary-light);
--card-bg: var(--white);
--card-text: var(--text-primary-dark);
--card-border: rgba(226, 232, 240, 0.2);
--button-primary-bg: var(--accent-blue);
--button-primary-text: var(--white);
--button-secondary-bg: transparent;
--button-secondary-text: var(--accent-blue);
}/* ==========================================================================
ANIMATIONS & TRANSITIONS - DANIEL WOŹNIAK
========================================================================== */
.reveal {
opacity: 0;
ransform: translateY(30px);
ransition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.active {
opacity: 1;
ransform: translateY(0);
}
.reveal.slide-left {
ransform: translateX(-30px);
}
.reveal.slide-right {
ransform: translateX(30px);
}
.reveal.active.slide-left,
.reveal.active.slide-right {
ransform: translateX(0);
}
.pillar-card,
.insight-card,
.timeline-item,
.agent-card {
opacity: 0;
ransform: translateY(40px);
ransition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.pillar-card.animate,
.insight-card.animate,
.timeline-item.animate,
.agent-card.animate {
opacity: 1;
ransform: translateY(0);
}
.pillar-card:nth-child(1) { transition-delay: 0.1s; }
.pillar-card:nth-child(2) { transition-delay: 0.2s; }
.pillar-card:nth-child(3) { transition-delay: 0.3s; }
.pillar-card:nth-child(4) { transition-delay: 0.4s; }
.pillar-card:nth-child(5) { transition-delay: 0.5s; }
.pillar-card:nth-child(6) { transition-delay: 0.6s; }
@keyframes fadeIn {
from {
opacity: 0;
ransform: translateY(20px);
}
o {
opacity: 1;
ransform: translateY(0);
}
}
@keyframes pulse {
0%, 100% {
ransform: scale(1);
opacity: 1;
}
50% {
ransform: scale(1.05);
opacity: 0.8;
}
}
@keyframes blink {
0%, 50% {
opacity: 1;
}
51%, 100% {
opacity: 0;
}
}
@keyframes slideInLeft {
from {
ransform: translateX(-100%);
opacity: 0;
}
o {
ransform: translateX(0);
opacity: 1;
}
}
@keyframes slideInRight {
from {
ransform: translateX(100%);
opacity: 0;
}
o {
ransform: translateX(0);
opacity: 1;
}
}
@keyframes slideInUp {
from {
ransform: translateY(100%);
opacity: 0;
}
o {
ransform: translateY(0);
opacity: 1;
}
}
@keyframes slideInDown {
from {
ransform: translateY(-100%);
opacity: 0;
}
o {
ransform: translateY(0);
opacity: 1;
}
}
@keyframes spin {
from {
ransform: rotate(0deg);
}
o {
ransform: rotate(360deg);
}
}
@keyframes bounce {
0%, 20%, 53%, 80%, 100% {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
ransform: translate3d(0, 0, 0);
}
40%, 43% {
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
ransform: translate3d(0, -30px, 0);
}
70% {
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
ransform: translate3d(0, -15px, 0);
}
90% {
ransform: translate3d(0, -4px, 0);
}
}
@keyframes underlineGlow {
0% {
width: 0;
opacity: 0;
}
50% {
width: 100%;
opacity: 1;
}
100% {
width: 100%;
opacity: 0.8;
}
}
@keyframes dividerPulse {
0%, 100% {
opacity: 0.6;
ransform: scaleX(1);
}
50% {
opacity: 1;
ransform: scaleX(1.02);
}
}
.animate-fade-in {
animation: fadeIn 0.6s ease-out;
}
.animate-pulse {
animation: pulse 2s infinite;
}
.animate-blink {
animation: blink 1s infinite;
}
.animate-slide-in-left {
animation: slideInLeft 0.6s ease-out;
}
.animate-slide-in-right {
animation: slideInRight 0.6s ease-out;
}
.animate-slide-in-up {
animation: slideInUp 0.6s ease-out;
}
.animate-slide-in-down {
animation: slideInDown 0.6s ease-out;
}
.animate-spin {
animation: spin 1s linear infinite;
}
.animate-bounce {
animation: bounce 1s infinite;
}
.hover-scale {
ransition: transform var(--transition-normal);
}
.hover-scale:hover {
ransform: scale(1.05);
}
.hover-lift {
ransition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.hover-lift:hover {
ransform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.hover-glow {
ransition: box-shadow var(--transition-normal);
}
.hover-glow:hover {
box-shadow: 0 0 20px rgba(0, 122, 204, 0.3);
}
.loading {
position: relative;
overflow: hidden;
}
.loading::after {
content: '';
position: absolute;
op: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
ransparent,
rgba(255, 255, 255, 0.1),
ransparent
);
animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
0% {
left: -100%;
}
100% {
left: 100%;
}
}