/* Ekspert AI — arkusz stylów strony głównej. EAI-14: wersja "efektowna" — animowany hero, głębia, szklane karty, ikony, reveal przy scrollu. Poprzedni czysty styl (interpretacja "stripe") zachowany w /styl-klasyczny/. Font Sohne jest licencjonowany — zastępstwo: Inter (open source). */ /* Font Inter jest ładowany przez w każdej strony (EAI-15) — nie przez @import, bo @import blokuje renderowanie i pogarsza LCP. */ :root { --primary: #533afd; --primary-deep: #4434d4; --primary-press: #2e2b8c; --primary-soft: #665efd; --primary-subdued: #b9b9f9; --brand-dark-900: #12143f; --brand-dark-800: #1c1e54; --ink: #0d253d; --ink-secondary: #273951; --ink-mute: #64748d; --on-primary: #ffffff; --canvas: #ffffff; --canvas-soft: #f6f9fc; --canvas-cream: #f5e9d4; --hairline: #e3e8ee; --hairline-input: #a8c3de; --ruby: #ea2261; --magenta: #f96bee; --lemon: #9b6829; --grad-brand: linear-gradient(115deg, #533afd 0%, #8b4bff 42%, #f96bee 100%); --grad-brand-soft: linear-gradient(115deg, #665efd 0%, #a06bff 50%, #ff8fe6 100%); --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 9999px; --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-xxl: 32px; --space-huge: 64px; --nav-h: 68px; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: 'Inter', 'SF Pro Display', system-ui, -apple-system, sans-serif; font-weight: 400; font-feature-settings: "ss01"; color: var(--ink); background: var(--canvas); line-height: 1.5; overflow-x: hidden; } .container { max-width: 1160px; margin: 0 auto; padding: 0 var(--space-xl); } /* Typografia */ h1, h2, h3 { font-weight: 600; margin: 0; letter-spacing: -0.5px; } h1 { font-size: clamp(38px, 6vw, 66px); line-height: 1.05; letter-spacing: -1.6px; font-weight: 700; } h2 { font-size: clamp(28px, 4vw, 42px); line-height: 1.12; letter-spacing: -0.8px; } h3 { font-size: 21px; line-height: 1.25; letter-spacing: -0.3px; } p { margin: 0; color: var(--ink-secondary); } .lead { font-size: 18px; line-height: 1.6; color: var(--ink-secondary); } .grad { background: var(--grad-brand); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: grad-shift 8s linear infinite; } @keyframes grad-shift { to { background-position: 220% center; } } /* Nawigacja — przyklejona, przezroczysta nad hero, mleczna po przewinięciu */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); height: var(--nav-h); padding: 0 var(--space-xl); max-width: 1160px; margin: 0 auto; transition: background 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), backdrop-filter 0.3s; } .nav::before { content: ""; position: absolute; inset: 0; z-index: -1; /* prawie nieprzezroczyste tło — na telefonach bez wsparcia backdrop-filter tekst strony nie może prześwitywać przez nawigację (EAI-14 poprawka) */ background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--hairline); box-shadow: 0 2px 12px rgba(13, 37, 61, 0.06); opacity: 0; transition: opacity 0.3s var(--ease-out); } .nav.scrolled::before { opacity: 1; } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .nav::before { background: rgba(255, 255, 255, 0.82); } } .nav-logo { font-size: 20px; font-weight: 500; color: #fff; text-decoration: none; letter-spacing: -0.3px; transition: color 0.3s var(--ease-out); } .nav-logo strong { font-weight: 700; background: var(--grad-brand-soft); -webkit-background-clip: text; background-clip: text; color: transparent; } .nav.scrolled .nav-logo { color: var(--ink); } .nav-links { display: flex; gap: var(--space-xl); list-style: none; margin: 0; padding: 0; } .nav-links a { color: rgba(255, 255, 255, 0.82); text-decoration: none; font-size: 15px; transition: color 0.2s; } .nav.scrolled .nav-links a { color: var(--ink-secondary); } .nav-links a:hover { color: #fff; } .nav.scrolled .nav-links a:hover { color: var(--primary); } .nav-cta { display: flex; align-items: center; gap: var(--space-lg); } /* EKS-116: przełącznik języka PL/EN w nawigacji — dziedziczy kolory tak jak .nav-links (biały nad hero, ciemny po przewinięciu). */ .nav-lang { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; } .nav-lang a, .nav-lang span { color: rgba(255, 255, 255, 0.7); text-decoration: none; transition: color 0.2s; } .nav-lang span[aria-current] { color: #fff; font-weight: 700; } .nav-lang a:hover { color: #fff; } .nav-lang-sep { opacity: 0.5; } .nav.scrolled .nav-lang a, .nav.scrolled .nav-lang span { color: var(--ink-secondary); } .nav.scrolled .nav-lang span[aria-current] { color: var(--ink); } .nav.scrolled .nav-lang a:hover { color: var(--primary); } @media (max-width: 767px) { .nav-links { display: none; } } /* Przyciski */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: 10px 20px; min-height: 46px; border-radius: var(--radius-pill); font-size: 16px; font-weight: 500; font-family: inherit; text-decoration: none; border: none; cursor: pointer; white-space: nowrap; transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), background 0.2s, filter 0.2s; } .btn-primary { background: var(--grad-brand); background-size: 160% 160%; color: var(--on-primary); box-shadow: 0 10px 28px -10px rgba(83, 58, 253, 0.65); } .btn-primary:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 16px 34px -12px rgba(83, 58, 253, 0.75); } .btn-primary:active { transform: translateY(0); } .btn-primary:disabled { background: var(--primary-subdued); box-shadow: none; cursor: not-allowed; transform: none; filter: none; } .btn-secondary { background: rgba(255, 255, 255, 0.08); color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); backdrop-filter: blur(4px); } .btn-secondary:hover { background: rgba(255, 255, 255, 0.16); transform: translateY(-2px); } /* ===== Hero — animowany mesh na ciemnym tle ===== */ .mesh { position: relative; overflow: hidden; background: var(--brand-dark-900); isolation: isolate; } .mesh::before, .mesh::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); will-change: transform; } .mesh::before { width: 60vw; height: 60vw; top: -18vw; left: -10vw; background: radial-gradient(circle at 30% 30%, rgba(102, 94, 253, 0.85), transparent 68%); animation: drift-a 18s ease-in-out infinite; } .mesh::after { width: 55vw; height: 55vw; top: -6vw; right: -12vw; background: radial-gradient(circle at 60% 40%, rgba(249, 107, 238, 0.55), transparent 66%); animation: drift-b 22s ease-in-out infinite; } .mesh > .glow-c { position: absolute; z-index: -1; width: 46vw; height: 46vw; bottom: -22vw; left: 28vw; border-radius: 50%; filter: blur(80px); background: radial-gradient(circle at 50% 50%, rgba(234, 34, 97, 0.4), transparent 70%); animation: drift-a 26s ease-in-out infinite reverse; } .hero-net { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; opacity: 0.7; } @keyframes drift-a { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(6%, 5%, 0) scale(1.18); } } @keyframes drift-b { 0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); } 50% { transform: translate3d(-7%, 4%, 0) scale(0.9); } } /* Pill tag */ .pill-tag { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.22); color: rgba(255, 255, 255, 0.92); font-size: 11px; font-weight: 500; letter-spacing: 0.6px; text-transform: uppercase; padding: 6px 14px; border-radius: var(--radius-pill); margin-bottom: var(--space-xl); backdrop-filter: blur(6px); } .pill-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #7bffcf; box-shadow: 0 0 10px #7bffcf; } /* Hero */ .hero { position: relative; padding: calc(var(--nav-h) + 72px) var(--space-xl) 120px; max-width: 1160px; margin: 0 auto; text-align: center; color: #fff; } .hero h1 { max-width: 900px; margin: 0 auto var(--space-lg); color: #fff; } .hero .lead { max-width: 640px; margin: 0 auto var(--space-xxl); color: rgba(255, 255, 255, 0.78); } .hero-actions { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; } .hero-subcta { margin-top: var(--space-lg); } .hero-subcta a { color: rgba(255, 255, 255, 0.75); font-size: 15px; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.3); padding-bottom: 2px; transition: color 0.2s; } .hero-subcta a:hover { color: #fff; } .hero-form { display: flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-md); } .hero-form input[type="email"] { min-width: 280px; padding: 10px 14px; min-height: 46px; border-radius: var(--radius-sm); border: 1px solid var(--hairline-input); font-family: inherit; font-size: 15px; color: var(--ink); background: var(--canvas); } .hero-form input[type="email"]:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(83, 58, 253, 0.15); } .form-note { font-size: 13px; color: var(--ink-mute); margin-top: var(--space-sm); } .form-success { display: none; font-size: 15px; color: var(--primary-deep); font-weight: 500; } .form-error { display: none; font-size: 13px; color: var(--ruby); margin-top: var(--space-sm); } /* ===== Sekcje ===== */ section { position: relative; padding: var(--space-huge) 0; } .section-soft { background: var(--canvas-soft); } .section-soft::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(83, 58, 253, 0.25), transparent); } .section-header { max-width: 660px; margin: 0 auto var(--space-huge); text-align: center; } .section-header .eyebrow { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: var(--space-md); } .section-header h2 { margin-bottom: var(--space-md); } /* Wezwanie do działania pod sekcją */ .section-cta { margin-top: var(--space-xxl); text-align: center; } .section-cta a { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); font-weight: 600; text-decoration: none; font-size: 15px; transition: gap 0.2s var(--ease-out); } .section-cta a:hover { gap: 12px; } /* ===== Karty — szkło + podświetlenie krawędzi ===== */ .grid { display: grid; gap: var(--space-xl); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .grid-2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } } .card { position: relative; background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: var(--space-xxl); box-shadow: 0 1px 3px rgba(0, 55, 112, 0.06); transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out); } .card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--grad-brand); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.3s var(--ease-out); pointer-events: none; } .card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -20px rgba(83, 58, 253, 0.35); border-color: transparent; } .card:hover::after { opacity: 1; } .card h3 { margin-bottom: var(--space-sm); } .card-tag { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--primary-subdued); color: var(--primary-deep); font-size: 10px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; } .card p { font-size: 15px; } .card p + p { margin-top: var(--space-sm); } .card .case-meta { margin-top: 0; margin-bottom: var(--space-md); font-size: 12px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--ink-mute); } .card-cream { background: var(--canvas-cream); border: none; } .card-cream:hover { box-shadow: 0 24px 48px -20px rgba(155, 104, 41, 0.35); } /* Ikona w karcie */ .card-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: var(--radius-md); margin-bottom: var(--space-lg); background: linear-gradient(135deg, rgba(83, 58, 253, 0.14), rgba(249, 107, 238, 0.14)); color: var(--primary); } .card-cream .card-icon { background: rgba(155, 104, 41, 0.14); color: var(--lemon); } .card-icon svg { width: 24px; height: 24px; display: block; } /* ===== Diagram procesu wdrożenia ===== */ .process { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); margin-top: var(--space-huge); counter-reset: step; } .process-step { position: relative; text-align: center; padding: 0 var(--space-md); } .process-step::before { counter-increment: step; content: counter(step); display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0 auto var(--space-md); border-radius: 50%; font-weight: 700; font-size: 18px; color: #fff; background: var(--grad-brand); box-shadow: 0 10px 24px -10px rgba(83, 58, 253, 0.6); } .process-step:not(:last-child)::after { content: ""; position: absolute; top: 24px; left: calc(50% + 34px); width: calc(100% - 68px); height: 2px; background: linear-gradient(90deg, var(--primary), rgba(83, 58, 253, 0.15)); } .process-step h4 { margin: 0 0 4px; font-size: 16px; font-weight: 600; color: var(--ink); } .process-step p { font-size: 14px; } @media (max-width: 767px) { .process { grid-template-columns: 1fr; gap: var(--space-xxl); } .process-step:not(:last-child)::after { display: none; } } /* ===== Produkt — ciemna sekcja ze świeceniem ===== */ .product-section { position: relative; overflow: hidden; isolation: isolate; background: var(--brand-dark-800); color: var(--on-primary); border-radius: var(--radius-xl); padding: 72px var(--space-xl); max-width: 1160px; margin: 0 auto; text-align: center; border: 1px solid rgba(255, 255, 255, 0.08); } .product-section::before { content: ""; position: absolute; z-index: -1; width: 70%; height: 200%; top: -60%; left: 15%; background: radial-gradient(ellipse at 50% 50%, rgba(102, 94, 253, 0.55), transparent 60%); filter: blur(40px); animation: drift-b 20s ease-in-out infinite; } .product-section::after { content: ""; position: absolute; z-index: -1; width: 40%; height: 120%; bottom: -40%; right: -5%; background: radial-gradient(circle at 50% 50%, rgba(249, 107, 238, 0.35), transparent 65%); filter: blur(50px); } .product-section p { color: rgba(255, 255, 255, 0.8); } .product-section .lead { max-width: 560px; margin: 0 auto var(--space-xxl); } .product-section h2 { margin-bottom: var(--space-md); } .product-section .form-note { color: rgba(255, 255, 255, 0.6); } .product-section .form-error { color: #ff8fae; } .product-section h2 { color: var(--on-primary); } .product-section .pill-tag { background: rgba(255, 255, 255, 0.12); } /* ===== Interaktywne demo Generatora agentów (EAI-21) ===== */ .demo { max-width: 620px; margin: 0 auto var(--space-xxl); text-align: left; } .demo-intro { font-size: 13px; color: rgba(255, 255, 255, 0.6); text-align: center; margin-bottom: var(--space-lg); } .demo-progress { display: flex; justify-content: center; gap: var(--space-sm); margin-bottom: var(--space-xl); } .demo-progress span { width: 26px; height: 4px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.16); transition: background 0.3s var(--ease-out); } .demo-progress span.is-active { background: var(--primary-soft); } .demo-progress span.is-done { background: var(--grad-brand); } .demo-step { margin-bottom: var(--space-xl); } .demo-step[hidden] { display: none; } .demo-q { display: block; font-weight: 600; color: #fff; font-size: 15px; margin-bottom: var(--space-md); } .demo-opts { display: flex; flex-wrap: wrap; gap: var(--space-sm); } .demo-opts button { font-family: inherit; font-size: 14px; cursor: pointer; padding: 8px 14px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(255, 255, 255, 0.2); transition: background 0.15s, border-color 0.15s, transform 0.15s; } .demo-opts button:hover { background: rgba(255, 255, 255, 0.16); } .demo-opts button[aria-pressed="true"] { background: var(--grad-brand); border-color: transparent; color: #fff; } .demo-building { text-align: center; color: rgba(255, 255, 255, 0.8); font-size: 14px; margin: var(--space-lg) 0; } .demo-building[hidden] { display: none; } .demo-caret { display: inline-block; width: 7px; height: 14px; margin-left: 4px; vertical-align: -2px; background: var(--primary-soft); animation: demo-blink 1s steps(1) infinite; } @keyframes demo-blink { 50% { opacity: 0; } } .demo-result[hidden] { display: none; } .demo-card { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: var(--radius-lg); padding: var(--space-lg) var(--space-md); margin-bottom: var(--space-lg); } .demo-result-title { color: #fff; font-size: 15px; font-weight: 600; text-align: center; margin: 0 0 var(--space-md); } .demo-note { font-size: 12px; color: rgba(255, 255, 255, 0.6); text-align: center; margin: var(--space-sm) 0 0; } .demo-flow { overflow-x: auto; -webkit-overflow-scrolling: touch; } .demo-flow svg { display: block; margin: 0 auto; font-family: inherit; } .bpmn-n { fill: rgba(255, 255, 255, 0.06); stroke: rgba(255, 255, 255, 0.25); } .bpmn-gw { fill: rgba(102, 94, 253, 0.18); stroke: var(--primary-soft); } .bpmn-c { fill: rgba(255, 255, 255, 0.06); stroke: rgba(255, 255, 255, 0.35); } .bpmn-c-end { fill: rgba(102, 94, 253, 0.28); stroke: var(--primary-soft); } .bpmn-t { fill: rgba(255, 255, 255, 0.5); font-size: 9px; letter-spacing: 0.6px; text-transform: uppercase; text-anchor: middle; } .bpmn-v { fill: #fff; font-size: 10.5px; text-anchor: middle; } .bpmn-gwt { fill: #fff; font-size: 9.5px; text-anchor: middle; } .bpmn-ln { stroke: rgba(255, 255, 255, 0.4); stroke-width: 1.5; } .bpmn-ah { fill: rgba(255, 255, 255, 0.55); } .bpmn-loop { fill: none; stroke: var(--primary-soft); stroke-width: 1.3; stroke-dasharray: 4 3; } .bpmn-lt { fill: rgba(255, 255, 255, 0.6); font-size: 8px; text-anchor: middle; } .demo-flow-hint { font-size: 11px; color: rgba(255, 255, 255, 0.45); text-align: center; margin: 4px 0 0; } .demo-actions { display: flex; gap: var(--space-md); flex-wrap: wrap; justify-content: center; } @media (max-width: 767px) { .demo-actions .btn { width: 100%; } } /* O mnie */ .about { max-width: 900px; margin: 0 auto; } .about-inner { display: flex; gap: var(--space-huge); align-items: center; } .about-photo { width: 240px; height: auto; flex-shrink: 0; border-radius: var(--radius-lg); box-shadow: 0 24px 48px -24px rgba(13, 37, 61, 0.4); } .about-text h2 { margin-bottom: var(--space-lg); } .about p { font-size: 17px; line-height: 1.7; } .about-links { margin-top: var(--space-lg); } .about-links a { color: var(--primary); font-weight: 600; text-decoration: none; } .about-links a:hover { text-decoration: underline; } @media (max-width: 767px) { .about-inner { flex-direction: column; gap: var(--space-xl); text-align: center; } .about-photo { width: 180px; } } /* Formularz kontaktowy */ .contact-form { max-width: 640px; margin: 0 auto; text-align: center; } .contact-grid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(2, 1fr); margin-bottom: var(--space-lg); } .field { display: flex; flex-direction: column; gap: var(--space-xs); text-align: left; } .field-full { margin-bottom: var(--space-lg); } .field label { font-size: 13px; color: var(--ink-secondary); font-weight: 500; } .field input, .field select, .field textarea { padding: 10px 14px; min-height: 46px; border-radius: var(--radius-sm); border: 1px solid var(--hairline-input); font-family: inherit; font-size: 15px; color: var(--ink); background: var(--canvas); transition: border-color 0.2s, box-shadow 0.2s; } .field textarea { min-height: 110px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(83, 58, 253, 0.15); } .contact-form .consent-check { max-width: none; margin: 0 0 var(--space-lg); } .contact-form .btn { width: 100%; } /* Footer */ footer { background: var(--canvas); color: var(--ink-mute); font-size: 13px; padding: var(--space-huge) var(--space-xl) var(--space-xl); border-top: 1px solid var(--hairline); } .footer-grid { max-width: 1160px; margin: 0 auto var(--space-xxl); display: grid; gap: var(--space-xl); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .footer-grid h4 { font-size: 13px; color: var(--ink); font-weight: 600; margin-bottom: var(--space-md); } .footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); } .footer-grid a { color: var(--ink-mute); text-decoration: none; transition: color 0.2s; } .footer-grid a:hover { color: var(--primary); } .footer-legal { max-width: 1160px; margin: 0 auto; padding-top: var(--space-xl); border-top: 1px solid var(--hairline); } /* ===== FAQ ===== */ .faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-md); } .faq-item { border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--canvas); overflow: hidden; transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out); } .faq-item[open] { border-color: var(--primary-subdued); box-shadow: 0 12px 28px -18px rgba(83, 58, 253, 0.35); } .faq-item summary { cursor: pointer; list-style: none; padding: var(--space-lg) var(--space-xl); font-weight: 600; font-size: 16px; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; flex-shrink: 0; font-size: 22px; font-weight: 400; line-height: 1; color: var(--primary); transition: transform 0.2s var(--ease-out); } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-item summary:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; } .faq-a { padding: 0 var(--space-xl) var(--space-lg); } .faq-a p { font-size: 15px; } /* ===== Baner zgody na cookies (EAI-20) ===== */ #cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-md); padding: var(--space-lg) var(--space-xl); background: var(--brand-dark-800); color: rgba(255, 255, 255, 0.9); font-size: 14px; box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.25); } #cookie-banner[hidden] { display: none; } #cookie-banner p { margin: 0; max-width: 720px; color: inherit; } #cookie-banner a { color: #fff; text-decoration: underline; } #cookie-banner .cookie-actions { display: flex; gap: var(--space-sm); flex-shrink: 0; } #cookie-banner button { font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; border: none; border-radius: var(--radius-pill); padding: 8px 18px; min-height: 40px; } #cookie-accept { background: var(--grad-brand); color: #fff; } #cookie-reject { background: rgba(255, 255, 255, 0.14); color: #fff; } #cookie-banner button:hover { filter: brightness(1.08); } @media (max-width: 767px) { #cookie-banner { flex-direction: column; align-items: stretch; text-align: center; } #cookie-banner .cookie-actions { justify-content: center; } } /* Zgoda przy formularzach (RODO) */ .consent-check { display: flex; gap: var(--space-sm); align-items: flex-start; max-width: 420px; margin: var(--space-sm) auto 0; text-align: left; font-size: 13px; color: var(--ink-mute); } .consent-check input { margin-top: 3px; flex-shrink: 0; } .consent-check a { color: inherit; text-decoration: underline; } .product-section .consent-check { color: rgba(255, 255, 255, 0.7); } /* ===== Reveal przy scrollu ===== */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); } .reveal.is-visible { opacity: 1; transform: none; } .reveal-delay-1 { transition-delay: 0.08s; } .reveal-delay-2 { transition-delay: 0.16s; } .reveal-delay-3 { transition-delay: 0.24s; } /* Strony prawne (polityka prywatności itp.) */ .legal-page { max-width: 760px; margin: 0 auto; padding: calc(var(--nav-h) + 40px) var(--space-xl) 96px; } .legal-page h1 { font-size: 40px; color: var(--ink); } .legal-page .updated { font-size: 13px; color: var(--ink-mute); margin: var(--space-md) 0 var(--space-xxl); } .legal-page h2 { font-size: 22px; margin-top: var(--space-xxl); margin-bottom: var(--space-md); } .legal-page p { font-size: 15px; margin-bottom: var(--space-md); } .legal-page ul { padding-left: 20px; margin: 0 0 var(--space-md); } .legal-page li { font-size: 15px; color: var(--ink-secondary); margin-bottom: var(--space-sm); } .legal-page a { color: var(--primary); } .legal-page .todo { background: var(--canvas-cream); border-radius: var(--radius-sm); padding: var(--space-md); font-size: 13px; color: var(--ink-secondary); margin-bottom: var(--space-md); } /* Responsywność mobilna */ @media (max-width: 767px) { h1 { letter-spacing: -0.8px; } .hero { padding: calc(var(--nav-h) + 40px) var(--space-lg) 80px; } section { padding: 48px 0; } .section-header { margin-bottom: 40px; } .container, .footer-grid, .footer-legal { padding-left: var(--space-lg); padding-right: var(--space-lg); } .product-section { padding: 48px var(--space-lg); border-radius: var(--radius-lg); } .hero-form input[type="email"] { min-width: 0; width: 100%; } .hero-actions { flex-direction: column; align-items: stretch; } .hero-actions .btn { width: 100%; } .legal-page { padding: calc(var(--nav-h) + 24px) var(--space-lg) 64px; } .legal-page h1 { font-size: 30px; } .contact-grid { grid-template-columns: 1fr; } } /* Szacunek dla ustawienia "ogranicz ruch" */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .mesh::before, .mesh::after, .mesh > .glow-c, .product-section::before, .grad, .demo-caret { animation: none; } .reveal { opacity: 1; transform: none; transition: none; } .btn, .card, .section-cta a { transition: none; } }