/* Local Fonts (DSGVO-safe) */
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/titillium-web-latin-300.woff2') format('woff2')}
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/titillium-web-latin-400.woff2') format('woff2')}
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/titillium-web-latin-600.woff2') format('woff2')}
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/titillium-web-latin-700.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/cormorant-garamond-latin-300.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/cormorant-garamond-latin-400.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/cormorant-garamond-latin-600.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300;font-display:swap;src:url('fonts/cormorant-garamond-latin-300italic.woff2') format('woff2')}
:root { --noir: #0C0C10; --noir-soft: #16161C; --noir-text: #F5F5F7; --noir-muted: rgba(245,245,247,0.55); --hell: #FFFFFF; --hell-alt: #FAFAFA; --hell-text: #1D1D1F; --hell-muted: rgba(29,29,31,0.5); --accent: #E8A830; --accent-fresh: #D4A574; --font-heading: 'Cormorant Garamond', serif; --font-body: 'Titillium Web', sans-serif; --radius-sm: 4px; --radius: 10px; --radius-lg: 18px; --shadow: 0 2px 12px rgba(0,0,0,0.04); --shadow-lg: 0 8px 40px rgba(0,0,0,0.07); --blur: blur(28px) saturate(160%); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); } *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--hell); color: var(--hell-text); line-height: 1.6; -webkit-font-smoothing: antialiased; font-weight: 400; font-size: 1.0625rem; } img { max-width:100%; display:block; } a { text-decoration:none; color:inherit; } .reveal { opacity: 0; transform: translateY(40px); filter: blur(6px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out), filter 1s var(--ease-out); } .reveal.visible { opacity: 1; transform: translateY(0); filter: blur(0); } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } .reveal-delay-4 { transition-delay: 0.4s; } h1 { font-family: var(--font-heading); font-size: clamp(3.5rem, 7vw, 6.5rem); font-weight: 300; line-height: 1.04; letter-spacing: -0.015em; } h2 { font-family: var(--font-heading); font-size: clamp(2.25rem, 4.5vw, 3.5rem); font-weight: 300; line-height: 1.12; letter-spacing: -0.01em; } h3 { font-family: var(--font-body); font-size: 1.25rem; font-weight: 600; line-height: 1.3; color: var(--hell-text); } p { font-size: 1.0625rem; color: var(--hell-muted); line-height: 1.7; font-weight: 400; } .label { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.25em; opacity: 0.45; } .micro { font-size: 0.8125rem; color: var(--hell-muted); font-weight: 400; } section { padding: 10rem 2.5rem; } .container { max-width: 1060px; margin: 0 auto; } .text-center { text-align: center; } .text-center .label { display: block; margin-bottom: 0.75rem; } .text-center h2 { margin-bottom: 0.75rem; } .text-center > p { max-width: 520px; margin: 0 auto 3rem; font-size: 1.125rem; font-weight: 300; } nav { position: fixed; top:0; left:0; right:0; padding: 1rem 2.5rem; background: rgba(12,12,16,0.7); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border-bottom: 1px solid rgba(255,255,255,0.05); z-index:100; display:flex; justify-content:space-between; align-items:center; } .logo { font-family: var(--font-heading); font-weight: 400; font-size: 1.35rem; color: var(--noir-text); letter-spacing: -0.01em; } .nav-links { display:flex; gap:2.5rem; align-items:center; } .nav-links a { font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; color: var(--noir-muted); transition: color 0.2s; letter-spacing: 0.02em; } .nav-links a:hover { color: var(--noir-text); } .nav-cta { padding: 0.5rem 1.25rem; background: rgba(255,255,255,0.1); color: var(--noir-text) !important; font-weight: 600; transition: background 0.2s; } .nav-cta:hover { background: rgba(255,255,255,0.18); } .btn-group { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:2.5rem; } .btn { padding: 0.9rem 2rem; font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.02em; transition: all 0.3s var(--ease-out); border: none; display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; } .btn-primary { background: var(--hell-text); color: var(--hell); } .btn-primary:hover { background: #333; transform: scale(1.03); } .btn-outline { background: transparent; color: var(--hell-text); border: 1.5px solid rgba(29,29,31,0.2); } .btn-outline:hover { border-color: var(--hell-text); transform: scale(1.03); } .btn-ghost { background: transparent; color: var(--hell-text); padding: 0.4rem 0; font-weight: 600; opacity: 0.7; } .btn-ghost:hover { opacity: 1; } .btn-ghost::after { content: ' →'; transition: transform 0.25s var(--ease-out); display: inline-block; } .btn-ghost:hover::after { transform: translateX(5px); } .hero { min-height: 100vh; background: var(--noir); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; padding-top: 6rem; } .hero::before { content:''; position:absolute; top:-20%; left:-10%; width:50%; height:80%; background: radial-gradient(ellipse, rgba(212,165,116,0.04) 0%, transparent 70%); pointer-events:none; } .hero h1 { color: var(--noir-text); } .hero p { color: var(--noir-muted); font-size: 1.25rem; font-weight: 300; margin: 1.25rem auto 2rem; } .hero-trust { display:flex; gap:1.25rem; justify-content:center; margin-bottom:0; font-size: 0.75rem; color: var(--noir-muted); letter-spacing:0.06em; font-weight:600; text-transform: uppercase; } .hero .btn-outline { color: var(--noir-text); border-color: rgba(245,245,247,0.2); } .hero .btn-outline:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.4); } .problem { background: var(--hell); } .grid-3 { display:grid; grid-template-columns: repeat(3,1fr); gap:1.25rem; margin-top:4rem; } .pain-card { padding: 2.5rem; background: var(--hell); border: 1px solid rgba(0,0,0,0.05); border-radius: var(--radius); transition: all 0.4s var(--ease-out); } .pain-card:hover { border-color: transparent; box-shadow: var(--shadow-lg); transform: translateY(-6px); } .pain-num { font-family: var(--font-heading); font-size: 2rem; color: var(--hell-muted); opacity: 0.3; margin-bottom:1rem; display:block; } .pain-card h3 { margin-bottom:0.5rem; } .pain-card p { font-size:0.9375rem; } .empathy { font-family: var(--font-heading); font-size: 1.35rem; font-style: italic; color: var(--hell-text); margin: 3.5rem 0 2rem; font-weight: 300; } .proof { background: var(--hell-alt); padding: 5rem 2.5rem; } .proof-logos { display:flex; gap:3.5rem; justify-content:center; align-items:center; flex-wrap:wrap; } .proof-logos span { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 300; color: var(--hell-muted); opacity:0.45; transition: opacity 0.3s; } .proof-logos span:hover { opacity:0.8; } .services { background: var(--hell); } .grid-2 { display:grid; grid-template-columns: repeat(2,1fr); gap:1.25rem; margin-top:4rem; } .service-card { padding: 3rem; background: var(--hell); border: 1px solid rgba(0,0,0,0.05); border-radius: var(--radius); transition: all 0.4s var(--ease-out); } .service-card:hover { border-color: transparent; box-shadow: var(--shadow-lg); transform: translateY(-6px); } .service-icon { font-size: 2rem; margin-bottom:1.25rem; display:block; opacity:0.8; } .process { background: var(--hell-alt); } .process-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:4rem; margin-top:5rem; position:relative; } .process-grid::before { content:''; position:absolute; top:38px; left:14%; right:14%; height:1px; background:rgba(0,0,0,0.06); } .step { position:relative; z-index:1; text-align:center; } .step-num { width:76px; height:76px; border-radius:50%; background:var(--hell-alt); border:1.5px solid rgba(0,0,0,0.1); color:var(--hell-text); display:flex; align-items:center; justify-content:center; font-family:var(--font-heading); font-size:1.5rem; font-weight:300; margin:0 auto 2rem; transition:all 0.35s var(--ease-out); } .step:hover .step-num { background:var(--hell-text); color:var(--hell); border-color:var(--hell-text); } .cases { background: var(--hell); } .case-card { text-align:left; background:var(--hell); border:1px solid rgba(0,0,0,0.05); border-radius:var(--radius); padding:2.5rem; transition:all 0.4s var(--ease-out); } .case-card:hover { border-color:transparent; box-shadow:var(--shadow-lg); transform:translateY(-6px); } .case-cat { font-family: var(--font-body); font-size:0.6875rem; text-transform:uppercase; letter-spacing:0.15em; opacity:0.4; margin-bottom:1rem; font-weight:600; } .case-card blockquote { font-family:var(--font-heading); font-size:1.25rem; color:var(--hell-text); line-height:1.4; margin:1.5rem 0; padding:0; border:none; font-style:italic; font-weight:300; } .statement { background:var(--noir); } .statement h2 { color: var(--noir-text); font-size: clamp(2.5rem,5vw,4rem); font-weight:300; font-style:italic; margin-bottom:2rem; } .statement p { color: var(--noir-muted); font-size:1.125rem; font-weight:300; } .statement .btn-outline { color: var(--noir-text); border-color:rgba(245,245,247,0.15); } .statement .btn-outline:hover { background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.3); } .cta-section { background:var(--hell-alt); } footer { background:var(--noir); color:var(--noir-muted); padding:5rem 2.5rem 3rem; } .footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:4rem; max-width:1060px; margin:0 auto; } footer h4 { font-family:var(--font-body); font-size:0.75rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; opacity:0.4; margin-bottom:1.25rem; color:var(--noir-text); } footer a { font-size:0.875rem; color:var(--noir-muted); transition:color 0.2s; } footer a:hover { color:var(--noir-text); } .footer-bottom { border-top:1px solid rgba(255,255,255,0.05); margin-top:4rem; padding-top:2rem; display:flex; justify-content:space-between; font-size:0.8125rem; max-width:1060px; margin-left:auto; margin-right:auto; } @media (max-width:768px) { section { padding:5rem 1.5rem; } .grid-3, .grid-2, .process-grid, .footer-grid { grid-template-columns:1fr; gap:1.25rem; } .process-grid::before { display:none; } .nav-links { display:none; } .hero-trust { flex-direction:column; gap:0.15rem; align-items:center; } .btn-group { flex-direction:column; align-items:center; } .btn { width:100%; justify-content:center; } } @media (prefers-reduced-motion:reduce) { .reveal { opacity:1; transform:none; filter:none; transition:none; } }
/* ═══ WORDPRESS OVERRIDES ═══ */
/* Navigation: white text on dark glass */
.wp-block-navigation-item a,.wp-block-navigation-item__content{color:#F5F5F7!important;font-family:'Titillium Web',sans-serif!important;font-weight:600!important;font-size:.875rem!important;opacity:.7}
.wp-block-navigation-item a:hover,.current-menu-item a{opacity:1!important;color:#fff!important}
/* Buttons: black bg, white text */
.wp-block-button__link,.wp-element-button{background:#1D1D1F!important;color:#FFFFFF!important;border:none!important;border-radius:0!important;font-family:'Titillium Web',sans-serif!important;font-weight:600!important;padding:.9rem 2rem!important;transition:all .3s!important}
.wp-block-button__link:hover{background:#333!important;transform:scale(1.03)!important}
.wp-block-button.is-style-outline .wp-block-button__link{background:transparent!important;color:#1D1D1F!important;border:1.5px solid rgba(29,29,31,.2)!important}
.wp-block-button.is-style-outline .wp-block-button__link:hover{background:#1D1D1F!important;color:#fff!important}
/* Dark section outline buttons */
.fls-hero .is-style-outline .wp-block-button__link,.fls-statement .is-style-outline .wp-block-button__link{background:transparent!important;color:#F5F5F7!important;border-color:rgba(245,245,247,.2)!important}
.fls-hero .is-style-outline .wp-block-button__link:hover,.fls-statement .is-style-outline .wp-block-button__link:hover{background:rgba(255,255,255,.1)!important;color:#fff!important;border-color:rgba(255,255,255,.4)!important}
/* Cards: shadows + radius */
.wp-block-column,.wp-block-group{border-radius:10px!important}
.fls-pain-card,.fls-service-card,.fls-case-card{border:1px solid rgba(0,0,0,.05)!important;border-radius:10px!important;transition:all .4s!important;box-shadow:0 1px 3px rgba(0,0,0,.03)!important}
.fls-pain-card:hover,.fls-service-card:hover,.fls-case-card:hover{border-color:transparent!important;box-shadow:0 8px 40px rgba(0,0,0,.07)!important;transform:translateY(-6px)!important}
/* Dark text on dark sections */
.fls-hero h1,.fls-hero p,.fls-statement h2,.fls-statement p,.fls-hero .fls-label,.fls-statement .fls-label{color:#F5F5F7!important}
/* Fix footer text */
footer p,footer span,footer a{color:rgba(245,245,247,.55)!important}
footer h4{color:#F5F5F7!important}