:root { --ink:#183a3d; --teal:#2c7a7b; --teal-dark:#205d5e; --mint:#ddf2ea; --surface:#fdfcf9; --sky:#eaf4f5; --muted:#627576; --line:#c6dad7; --danger:#a94f41; --white:#fff; --shadow:0 12px 32px rgba(24,58,61,.09); font-family:Manrope, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--ink); background:var(--surface); }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; line-height:1.5; } button { font:inherit; } button, a { -webkit-tap-highlight-color:transparent; }
.skip-link { position:absolute; left:1rem; top:-4rem; z-index:10; padding:.6rem 1rem; background:var(--ink); color:#fff; border-radius:.5rem; } .skip-link:focus { top:1rem; }
.site-header { max-width:1120px; min-height:78px; padding:1rem 1.25rem; margin:auto; display:flex; justify-content:space-between; align-items:center; gap:1rem; } .brand { display:inline-flex; align-items:center; gap:.45rem; color:var(--ink); font-size:1.25rem; font-weight:800; text-decoration:none; letter-spacing:-.03em; } .brand-mark { width:38px; height:38px; flex:0 0 38px; display:inline-block; background:url('images/brand/nostress-regeneracja.png') center/contain no-repeat; font-size:0; line-height:1; } nav { display:flex; gap:.25rem; } .nav-button { padding:.65rem .75rem; border:0; background:transparent; border-radius:.6rem; color:var(--ink); cursor:pointer; font-weight:650; } .nav-button:hover { background:var(--sky); }
main { max-width:1120px; min-height:calc(100vh - 190px); padding:1.5rem 1.25rem 4rem; margin:auto; } .site-footer { border-top:1px solid var(--line); padding:1.5rem 1.25rem 2rem; text-align:center; font-size:.875rem; } .site-footer p { margin:.25rem; }.muted { color:var(--muted); }
.hero { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr); align-items:center; gap:3rem; padding:4rem 0 2rem; } .eyebrow { margin:0 0:.5rem; color:var(--teal); font-size:.85rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; } h1 { margin:.1rem 0 1rem; max-width:720px; font-size:clamp(2.25rem,5vw,4.25rem); line-height:1.08; letter-spacing:-.05em; } h2 { margin:0 0:.7rem; font-size:clamp(1.4rem,2vw,2rem); letter-spacing:-.03em; } h3 { margin:.1rem 0 .45rem; font-size:1.05rem; } .lead { max-width:610px; font-size:1.15rem; color:#365456; } .hero-orb { width:min(320px,70vw); aspect-ratio:1; margin:auto; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff 0 9%,transparent 10%), radial-gradient(circle at 50% 50%,#d9f0eb 0 36%,#a9ddd4 37% 57%,#77bdb7 58% 74%,transparent 75%); box-shadow:0 20px 55px rgba(44,122,123,.18); position:relative; } .hero-orb::after { content:"Weź spokojny oddech"; position:absolute; inset:40% -20%; text-align:center; font-weight:800; color:var(--ink); }
.floating-start { width:min(205px,58vw); aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.25rem; margin:1.4rem auto 0; border:0; border-radius:50%; color:var(--ink); background:radial-gradient(circle at 35% 28%,#fff 0 7%,transparent 8%),radial-gradient(circle at center,#e8faf4 0 39%,#c3e8de 40% 63%,#7ebfb9 64% 78%,#4c9f9a 79% 100%); box-shadow:0 18px 38px rgba(44,122,123,.24), inset 0 0 0 6px rgba(255,255,255,.48); cursor:pointer; animation:float 3.2s ease-in-out infinite; transition:box-shadow .2s ease, filter .2s ease; } .floating-start:hover { filter:brightness(1.04); box-shadow:0 25px 48px rgba(44,122,123,.32), inset 0 0 0 6px rgba(255,255,255,.56); } .floating-start:focus-visible { outline:4px solid var(--ink); outline-offset:5px; } .start-icon { width:0; height:0; margin-left:.3rem; border-top:14px solid transparent; border-bottom:14px solid transparent; border-left:22px solid var(--teal-dark); } .start-label { font-size:1.15rem; font-weight:900; letter-spacing:.04em; text-transform:uppercase; } .start-hint { font-size:.76rem; font-weight:700; color:#365456; } @keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-16px); } }
.button-row { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.75rem; } .button { min-height:48px; display:inline-flex; align-items:center; justify-content:center; padding:.7rem 1.1rem; border:1px solid transparent; border-radius:.85rem; cursor:pointer; text-decoration:none; font-weight:800; transition:background .18s ease, transform .18s ease, box-shadow .18s ease; } .button:hover { transform:translateY(-1px); } .button.primary { color:#fff; background:var(--teal); box-shadow:0 8px 17px rgba(44,122,123,.22); } .button.primary:hover { background:var(--teal-dark); } .button.secondary { color:var(--ink); border-color:var(--teal); background:#fff; } .button.text { padding-left:0; color:var(--teal-dark); background:none; } .button.small { min-height:40px; padding:.5rem .75rem; font-size:.9rem; }
.notice { margin-top:1.5rem; padding:.8rem 1rem; border-left:4px solid var(--teal); border-radius:.25rem .75rem .75rem .25rem; background:var(--sky); color:#335052; font-size:.94rem; } .notice.danger { border-color:var(--danger); background:#f8eae7; }
.page-head { max-width:720px; margin:1rem auto 2rem; } .page-head p { color:var(--muted); } .back { margin-bottom:1.25rem; padding:0; color:var(--teal-dark); border:0; background:transparent; font-weight:700; cursor:pointer; }
.question-card, .recommendation, .session-shell, .about-card { max-width:720px; margin:auto; padding:clamp(1.25rem,4vw,2.5rem); border:1px solid var(--line); border-radius:1.4rem; background:#fff; box-shadow:var(--shadow); } .question-progress { display:flex; justify-content:space-between; gap:1rem; margin-bottom:2rem; color:var(--muted); font-size:.9rem; font-weight:700; } .progress-bar { width:130px; height:7px; border-radius:20px; overflow:hidden; background:var(--sky); }.progress-bar span { display:block; height:100%; background:var(--teal); transition:width .2s ease; } .question-title { font-size:clamp(1.55rem,4vw,2.25rem); line-height:1.2; letter-spacing:-.035em; }
.answers { display:grid; gap:.75rem; margin:1.5rem 0; }.answer { width:100%; min-height:56px; padding:1rem; display:flex; align-items:center; text-align:left; border:1px solid var(--line); border-radius:.9rem; color:var(--ink); background:#fff; cursor:pointer; font-weight:700; }.answer:hover,.answer:focus-visible { border-color:var(--teal); background:var(--mint); }.answer::before { content:""; flex:0 0 18px; width:18px; height:18px; margin-right:.8rem; border:2px solid var(--teal); border-radius:50%; }.answer.selected { border-color:var(--teal); background:var(--mint); }.answer.selected::before { box-shadow:inset 0 0 0 4px var(--mint); background:var(--teal); }.question-actions { display:flex; justify-content:space-between; gap:.7rem; align-items:center; }.question-actions .button[disabled] { opacity:.45; cursor:not-allowed; transform:none; }
.recommendation { background:linear-gradient(145deg,#f9fffd,#e5f5ee); }.recommendation .badge { display:inline-block; padding:.35rem .6rem; margin-bottom:1rem; border-radius:20px; background:var(--teal); color:#fff; font-size:.8rem; font-weight:800; }.meta { display:flex; flex-wrap:wrap; gap:.5rem; color:#466264; font-size:.9rem; font-weight:700; }.meta span { padding:.25rem .5rem; border-radius:99px; background:#fff; border:1px solid #cde4dd; }.why { padding:1rem; margin:1.3rem 0; background:#fff; border-radius:.85rem; }.alternatives { max-width:720px; margin:1.75rem auto; }.practice-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }.practice-card { display:flex; flex-direction:column; padding:1.2rem; border:1px solid var(--line); border-radius:1rem; background:#fff; }.practice-card p { margin:.2rem 0 1rem; color:var(--muted); font-size:.93rem; }.practice-card .button { margin-top:auto; }
.library-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }.library-card { padding:1.35rem; border:1px solid var(--line); border-radius:1rem; background:#fff; box-shadow:0 4px 14px rgba(24,58,61,.04); }.library-card p { color:var(--muted); }.library-card .button { width:100%; }.tag { display:inline-block; padding:.25rem .55rem; border-radius:20px; background:var(--sky); color:#365456; font-size:.8rem; font-weight:800; }
.session-shell { max-width:820px; text-align:center; }.session-top { display:flex; justify-content:space-between; align-items:center; gap:1rem; text-align:left; }.session-top h1 { font-size:1.45rem; margin:0; }.session-circle { width:min(330px,72vw); aspect-ratio:1; display:grid; place-content:center; margin:2.2rem auto 1rem; padding:1.5rem; border:1px solid #9fcfc8; border-radius:50%; background:var(--mint); color:var(--ink); transition:transform 4s ease-in-out, background 1s ease; }.session-circle.inhale { transform:scale(1.11); background:#b9e3dd; }.session-circle.exhale { transform:scale(.9); background:#eaf4f5; }.session-phase { max-width:250px; font-size:clamp(1.25rem,4vw,2.2rem); font-weight:850; line-height:1.15; letter-spacing:-.04em; }.session-count { margin-top:.4rem; color:var(--muted); font-size:1.05rem; }.timer { font-variant-numeric:tabular-nums; font-size:1.25rem; font-weight:800; }.session-controls { display:flex; justify-content:center; gap:.75rem; flex-wrap:wrap; margin:1.6rem 0 .6rem; }.session-help { max-width:570px; margin:1rem auto 0; color:var(--muted); }.end-card { max-width:640px; margin:1.4rem auto 0; padding:1.3rem; border-radius:1rem; background:var(--sky); }.mood-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; }
.about-card { max-width:760px; }.about-card li { margin:.55rem 0; } :focus-visible { outline:3px solid #75c8c0; outline-offset:3px; }
@media (max-width:720px) { .site-header { min-height:68px; padding-inline:1rem; }.nav-button { padding:.5rem; font-size:.9rem; }.hero { grid-template-columns:1fr; padding-top:2rem; gap:1.5rem; }.hero-orb { order:-1; width:170px; }.hero-orb::after { font-size:.75rem; }.floating-start { width:165px; margin-top:.7rem; }.practice-grid,.library-grid { grid-template-columns:1fr; }.question-card,.recommendation,.session-shell,.about-card { padding:1.25rem; }.session-top { align-items:flex-start; }.button-row .button { width:100%; }.question-actions { align-items:stretch; flex-direction:column-reverse; }.question-actions .button { width:100%; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; } .session-circle { transform:none!important; } }
.audio-label { margin-top:auto; margin-bottom:.7rem; color:var(--teal-dark); font-size:.82rem; font-weight:800; }.audio-player { max-width:430px; display:grid; gap:.45rem; margin:1.25rem auto 0; padding:1rem; border:1px solid var(--line); border-radius:.85rem; background:var(--sky); text-align:left; font-size:.9rem; font-weight:800; }.audio-player audio { width:100%; height:38px; }
.audio-session { max-width:640px; padding-top:2.5rem; padding-bottom:2.5rem; }.audio-note { margin:1rem 0 0; color:var(--muted); font-size:.88rem; }
.tension-circle { transition:none; will-change:transform; }
.grounding-session { max-width:760px; }.grounding-visual { height:360px; margin:1.5rem auto 1.2rem; overflow:hidden; border:1px solid #b9dfd6; border-radius:1.2rem; background:#eef8f5; }.grounding-visual img { display:block; width:100%; height:100%; object-fit:contain; object-position:center; }.grounding-prompt { max-width:590px; margin:0 auto 1rem; font-size:clamp(1.1rem,3vw,1.35rem); font-weight:850; line-height:1.35; }
.sea-session { max-width:900px; }.sea-breath-visual { position:relative; isolation:isolate; overflow:hidden; min-height:360px; margin:1.5rem auto 0; border:1px solid #a6d4d4; border-radius:1.3rem; background:linear-gradient(180deg,rgba(235,250,250,.18),rgba(20,83,95,.14)),url('images/breathing/sea-breathing.png') center/cover no-repeat; box-shadow:inset 0 0 0 1px rgba(255,255,255,.32); }.sea-breath-visual::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(17,67,79,.2),transparent 25% 75%,rgba(17,67,79,.2)); pointer-events:none; }.sea-breath-copy { position:absolute; top:1.4rem; left:50%; z-index:1; transform:translateX(-50%); display:grid; gap:.1rem; min-width:135px; padding:.7rem 1rem; border:1px solid rgba(255,255,255,.65); border-radius:1rem; background:rgba(255,255,255,.78); color:var(--ink); box-shadow:0 8px 25px rgba(16,65,74,.12); }.sea-breath-copy strong { font-size:1.35rem; }.sea-breath-copy span { color:#365456; font-variant-numeric:tabular-nums; font-weight:800; }.breath-track { position:absolute; bottom:10%; left:50%; width:3px; height:185px; border-radius:99px; background:rgba(255,255,255,.8); box-shadow:0 0 0 1px rgba(20,83,95,.12); }.breath-ball { position:absolute; bottom:0; left:50%; width:34px; height:34px; border-radius:50%; background:radial-gradient(circle at 34% 29%,#fff 0 8%,#ffefbd 9% 28%,#f2c865 56%,#c58f36 100%); box-shadow:0 5px 16px rgba(41,89,86,.42),0 0 0 6px rgba(255,255,255,.36); transform:translate(-50%,50%); }.sea-session .session-help { max-width:640px; }.sea-session .timer { white-space:nowrap; }
.video-session { max-width:820px; padding-top:2.5rem; padding-bottom:2.5rem; }.video-player { position:relative; overflow:hidden; width:100%; aspect-ratio:16 / 9; margin:1.25rem auto 0; border-radius:1rem; background:var(--ink); box-shadow:var(--shadow); }.video-player video { position:absolute; inset:0; width:100%; height:100%; background:#000; }.transcript { max-width:720px; margin:1.5rem auto 0; padding:1rem 1.1rem; border:1px solid var(--line); border-radius:.85rem; background:var(--sky); text-align:left; }.transcript summary { cursor:pointer; color:var(--teal-dark); font-weight:800; }.transcript div { margin-top:1rem; color:#365456; }.transcript p { margin:.65rem 0; }.video-source { margin:1rem 0 0; color:var(--muted); font-size:.88rem; }.video-source a { color:var(--teal-dark); font-weight:700; }
.needs-home { max-width:900px; margin:1.75rem auto 3rem; text-align:center; }.needs-home h1 { margin-inline:auto; font-size:clamp(2.35rem,5vw,4rem); }.needs-home .lead { margin:0 auto 2rem; }.needs-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; text-align:left; }.need-card { min-height:184px; display:flex; flex-direction:column; align-items:flex-start; padding:1.25rem; border:1px solid var(--line); border-radius:1rem; color:var(--ink); background:#fff; box-shadow:0 4px 14px rgba(24,58,61,.04); cursor:pointer; transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; }.need-card:hover { transform:translateY(-2px); border-color:var(--teal); box-shadow:var(--shadow); }.need-illustration { width:100%; height:102px; display:block; margin:-.15rem 0 .8rem; border-radius:.7rem; background:var(--mint); }.need-illustration img { width:100%; height:100%; display:block; object-fit:contain; object-position:center; }.need-card-title { font-size:1.12rem; font-weight:850; letter-spacing:-.02em; }.need-card-description { margin-top:.45rem; color:var(--muted); font-size:.93rem; }.need-card-action { margin-top:auto; color:var(--teal-dark); font-size:.88rem; font-weight:800; }.picker-link { margin:1.4rem auto .75rem; }.needs-home .notice { max-width:720px; margin-inline:auto; text-align:left; }.need-results-head { margin-bottom:1.25rem; }.need-results { max-width:900px; margin:0 auto; }.need-results + .picker-link { display:block; }
.practice-illustration { width:100%; height:150px; display:block; margin:.8rem 0 .95rem; border:1px solid #cde4dd; border-radius:.8rem; background:var(--mint); }.practice-illustration img { display:block; width:100%; height:100%; object-fit:contain; object-position:center; }
@media (max-width:720px) { .needs-grid { grid-template-columns:1fr; }.needs-home { margin-top:.75rem; }.need-card { min-height:135px; } }
@media (max-width:720px) { .sea-breath-visual { min-height:300px; }.breath-track { height:145px; bottom:12%; } }
@media (max-width:720px) { .grounding-visual { height:300px; } }