/* Base adjustments and premium wilderness aesthetics styles */

:root {
  --font-sans: 'Manrope', system-ui, sans-serif;
  --font-display: 'Syne', sans-serif;
}

body {
  font-family: var(--font-sans);
}

/* Glassmorphism utility for floating items */
.glass-panel {
  background: rgba(10, 11, 13, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Subtle organic noise texture background generator overlay */
.noise-bg {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Customized Active Navigation indicator */
.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: #3E6796; /* copper-600 */
  transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* Image zoom and visual enhancements */
.cursor-zoom-in {
  cursor: zoom-in;
}

/* Custom scrollbar matching dark/forest/copper palette */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #17191A;
}

::-webkit-scrollbar-thumb {
  background: #3A4143;
  border-radius: 4px;
  border: 2px solid #17191A;
}

::-webkit-scrollbar-thumb:hover {
  background: #3E6796;
}

/* ==================================================================
   ANDAR WOLF — CINEMATIC UPGRADE (hero, reveal, particles, stats)
   ================================================================== */
:root{ --copper:#3E6796; --copper-lite:#5A82AC; }

/* Scroll progress bar */
#scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:60;
  background:linear-gradient(90deg,var(--copper),var(--copper-lite));
  box-shadow:0 0 12px rgba(62,103,150,.7);transition:width .08s linear;}

/* HERO — Ken Burns slow drift (on the <img>) */
.hero-kenburns{animation:kenburns 30s ease-in-out infinite alternate;transform-origin:50% 50%;will-change:transform;}
@keyframes kenburns{0%{transform:scale(1);}100%{transform:scale(1.035);}}

/* Vignette overlay */
.vignette{background:radial-gradient(ellipse at 50% 42%,transparent 38%,rgba(2,9,7,.6) 100%);}

/* HERO entrance (runs on load) */
.hero-in{opacity:0;transform:translateY(30px);animation:heroUp 1s cubic-bezier(.2,.7,.2,1) forwards;}
@keyframes heroUp{to{opacity:1;transform:none;}}
.d1{animation-delay:.10s}.d2{animation-delay:.28s}.d3{animation-delay:.48s}.d4{animation-delay:.68s}.d5{animation-delay:.88s}

/* Animated gradient text */
.text-gradient-anim{background:linear-gradient(100deg,#5A82AC,#b9cee0,#3E6796,#5A82AC);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shiftg 6s linear infinite;}
@keyframes shiftg{to{background-position:250% 0;}}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(42px);
  transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform;}
.reveal.reveal-in{opacity:1;transform:none;}

/* Button shine sweep */
.btn-shine{position:relative;overflow:hidden;}
.btn-shine::after{content:"";position:absolute;top:0;left:-130%;width:65%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);}
.btn-shine:hover::after{animation:shine .95s ease;}
@keyframes shine{to{left:140%;}}

/* Glow pulse for primary CTA */

@keyframes glow{0%,100%{box-shadow:0 0 0 rgba(62,103,150,0);}50%{box-shadow:0 0 20px rgba(62,103,150,.26);}}

/* Scroll-down indicator */
.scroll-ind{animation:sdown 1.8s ease-in-out infinite;}
@keyframes sdown{0%,100%{transform:translateY(0);opacity:.55;}50%{transform:translateY(8px);opacity:1;}}

/* Card hover lift */
.lift{transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .3s;}
.lift::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  box-shadow:0 26px 54px -22px rgba(0,0,0,.8);opacity:0;transition:opacity .45s ease;}
.lift:hover{transform:translateY(-8px) translateZ(0);}
.lift:hover::after{opacity:1;}

/* Glowing divider line */
.divider-glow{background:linear-gradient(90deg,transparent,var(--copper),transparent);height:1px;}

/* Tabular numbers for counters */
.stat-num{font-variant-numeric:tabular-nums;}

@media (prefers-reduced-motion: reduce){
  .hero-kenburns,.text-gradient-anim,.glow-pulse,.scroll-ind{animation:none!important;}
  .reveal,.hero-in{opacity:1!important;transform:none!important;animation:none!important;transition:none!important;}
}

/* Light theme polish */
.theme-light .rounded-2xl,.theme-light .rounded-3xl,.theme-light .rounded-xl{box-shadow:0 14px 40px -26px rgba(21,31,43,.35);}
.theme-light .rounded-full{box-shadow:none;}
.theme-light-page{background:linear-gradient(180deg,#1E2224 0%,#191D1F 100%);background-attachment:fixed;}

/* ==================================================================
   POLISH PASS — refinement of the light / steel theme
   ================================================================== */

/* Refined display typography */
.font-display{letter-spacing:-.015em;}
h1.font-display,h2.font-display{letter-spacing:-.028em;}

/* More breathing room + gentle rhythm of light tones */
section.theme-light{padding-top:7rem;padding-bottom:7rem;border-top:1px solid rgba(157,184,209,.08);}
#o-nas{background:#1E2224;}
#o-rasie{background:#232829;}
#nasze-psy{background:#1E2224;}
#szczenieta{background:#232829;}
#galeria{background:#1E2224;}
#opinie{background:#232829;}
#kontakt{background:#1E2224;}

/* Section accent underline -> soft steel gradient with glow */
.theme-light .h-1.bg-copper-600{
  background:linear-gradient(90deg,transparent,#3E6796 22%,#6E97BE 50%,#3E6796 78%,transparent)!important;
  height:2px!important;border-radius:0!important;box-shadow:0 0 14px rgba(62,103,150,.4);
}

/* Eyebrow labels — a touch airier */
.theme-light .uppercase.tracking-widest{letter-spacing:.2em;}

/* Cards: fine steel hairline + smoother, deeper hover lift */
.theme-light .lift{border-color:rgba(62,103,150,.14)!important;}
.theme-light .lift:hover{
  border-color:rgba(62,103,150,.42)!important;
  box-shadow:0 28px 58px -28px rgba(21,31,43,.5)!important;
}

/* Steel primary buttons — subtle depth */
a.bg-copper-600,button.bg-copper-600{box-shadow:0 10px 26px -14px rgba(62,103,150,.6);}
a.bg-copper-600:hover,button.bg-copper-600:hover{box-shadow:0 16px 34px -14px rgba(62,103,150,.8);transform:translateY(-2px);}

/* Images inside light cards get a crisp, elegant edge */
.theme-light .rounded-3xl>img,.theme-light .rounded-2xl img{transition:transform .7s cubic-bezier(.2,.7,.2,1);}

/* Smoother global anchor transitions */
a{transition:color .25s ease,background-color .25s ease,border-color .25s ease,box-shadow .3s ease,transform .3s ease;}

/* Dark cinematic bands — refined top edge */
#stats,footer{position:relative;}
#stats::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(110,151,190,.6),transparent);}

/* ==================================================================
   CREATIVE PASS — preloader, cursor, marquee, ridge, tilt, gallery
   ================================================================== */

/* ---- Cursor spotlight (desktop only) ---- */
#cursor-glow{position:fixed;top:0;left:0;width:520px;height:520px;margin:-260px 0 0 -260px;pointer-events:none;z-index:1;
  border-radius:50%;opacity:0;transition:opacity .5s ease;
  background:radial-gradient(circle,rgba(62,103,150,.13) 0%,rgba(62,103,150,.05) 40%,transparent 68%);}
@media (hover:hover) and (pointer:fine){ #cursor-glow.on{opacity:1;} }

/* ---- Marquee band ---- */

.marquee-band:hover .marquee-track{animation-play-state:paused;}
.marquee-track span{font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.22em;
  text-transform:uppercase;color:#9fb2c4;}
.marquee-track i{color:#3E6796;font-style:normal;font-size:9px;}
@keyframes marq{to{transform:translateX(-50%);}}

/* ---- Ridge divider ---- */
.ridge-divider{line-height:0;background:#1E2224;margin-bottom:-1px;}
.ridge-divider svg{display:block;width:100%;height:88px;}

/* ---- Gallery: feature tile + caption ---- */
#gallery-grid .feature-tile{grid-column:span 2;grid-row:span 2;aspect-ratio:auto;}
#gallery-grid .gallery-item{position:relative;}
#gallery-grid .gallery-item::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(20,22,23,.55),transparent 55%);opacity:0;transition:opacity .45s ease;}
#gallery-grid .gallery-item:hover::after{opacity:1;}

/* ---- Refined blockquote mark on testimonials ---- */
#opinie .rounded-2xl>.absolute{box-shadow:0 6px 18px -8px rgba(62,103,150,.8);}

/* ---- Header polish on scroll ---- */
#main-header{transition:background-color .35s ease,box-shadow .35s ease,border-color .35s ease;}
#main-header.scrolled{box-shadow:0 10px 34px -22px rgba(21,31,43,.55);}

/* ---- Selection + focus ---- */
::selection{background:#3E6796;color:#fff;}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid #3E6796;outline-offset:3px;border-radius:6px;}

@media (prefers-reduced-motion: reduce){
  .pl-logo,.marquee-track{animation:none!important;}
  #cursor-glow{display:none;}
}

/* ==================================================================
   PASS 3 — timeline, FAQ, back-to-top, lightbox, heading reveal
   ================================================================== */

/* FAQ accordion */
.faq-item{transition:border-color .35s ease,box-shadow .35s ease,background-color .35s ease;}
.faq-item:hover{border-color:rgba(62,103,150,.35)!important;}
.faq-item.open{border-color:rgba(62,103,150,.5)!important;box-shadow:0 20px 44px -26px rgba(21,31,43,.45);}
.faq-q{cursor:pointer;background:none;border:0;font:inherit;}
.faq-icon{transition:transform .4s cubic-bezier(.2,.7,.2,1);}
.faq-item.open .faq-icon{transform:rotate(135deg);}
.faq-a{max-height:0;overflow:hidden;opacity:0;
  transition:max-height .45s cubic-bezier(.2,.7,.2,1),opacity .3s ease;}
.faq-item.open .faq-a{opacity:1;transition:max-height .5s cubic-bezier(.2,.7,.2,1),opacity .4s ease .1s;}

/* tighter question row */
.faq-q{cursor:pointer;background:none;border:0;font:inherit;padding:1.15rem 1.5rem;}
.faq-item{border-radius:14px;}

/* Back to top */
#to-top{position:fixed;right:22px;bottom:22px;z-index:55;width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;border:1px solid rgba(157,184,209,.32);
  background:#262B2D;color:#9DB8D1;box-shadow:0 14px 34px -16px rgba(21,31,43,.55);cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);
  transition:opacity .4s ease,transform .4s cubic-bezier(.2,.7,.2,1),visibility .4s,background-color .3s,color .3s;}
#to-top.show{opacity:1;visibility:visible;transform:none;}
#to-top:hover{background:#4E7BA8;color:#fff;border-color:#4E7BA8;}

/* Lightbox refinements */
#lightbox{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
#lightbox-img{animation:lbIn .45s cubic-bezier(.2,.7,.2,1);}
@keyframes lbIn{from{opacity:0;transform:scale(.96);}to{opacity:1;transform:none;}}

/* Heading word reveal */
.hw{display:inline-block;overflow:hidden;vertical-align:top;}
.hw>i{display:inline-block;font-style:inherit;transform:translateY(105%);
  transition:transform .8s cubic-bezier(.2,.75,.2,1);}
.hw-go .hw>i{transform:none;}

/* Timeline connector dots */
#proces .lift{transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s,border-color .35s;}

@media (prefers-reduced-motion: reduce){
  .hw>i{transform:none!important;}
  #lightbox-img{animation:none;}
}

/* ==================================================================
   PASS 4 — colour harmony, contrast & eye comfort
   ================================================================== */

/* --- Context-aware accent -------------------------------------------
   Light sections need a DEEPER steel for legible text;
   dark bands need a LIGHTER steel. Fills stay as they are.       */
.theme-light .text-copper-600{color:#9DB8D1;}
.theme-light .text-copper-700{color:#9DB8D1;}
header .text-copper-600,
#start .text-copper-600, #start .text-copper-700,
#stats .text-copper-600, #pack-banner .text-copper-600,
footer .text-copper-600{color:#94AFC8;}
#stats .text-copper-700{color:#9DB8D1;}

/* Muted text: lift to a comfortable, readable grey */
.theme-light .text-ink-500{color:#949B9C;}
.theme-light .text-ink-600{color:#AEB4B5;}

/* Health-check green: calmer and better contrasted */
.theme-light .text-\[\#2f7a5f\]{color:#63C79D;}

/* --- Eye comfort on dark bands ---------------------------------------
   Pure #fff on near-black reads as glare; soften just a touch.    */
header .text-white,
#start .text-white, #pack-banner .text-white,
#stats .text-white, footer .text-white{color:#F0F2F3;}
#start h1{color:#F4F6F7;}

/* Softer dark surfaces (less hard black) */
#start .bg-gradient-to-t.from-dark-950{--tw-gradient-from:#17191A var(--tw-gradient-from-position);}

/* --- Smooth transitions between dark and light bands --------------- */
#stats::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;pointer-events:none;
  background:linear-gradient(to bottom,transparent,rgba(30,34,36,.85));}
.ridge-divider{background:#1E2224;}
footer{background:linear-gradient(to bottom,#1B1E1F,#17191A);}

/* --- Typography comfort -------------------------------------------- */
.theme-light p{line-height:1.75;}
.theme-light .text-sm{line-height:1.7;}
.theme-light .leading-relaxed{line-height:1.78;}
.theme-light .uppercase.tracking-widest{letter-spacing:.19em;}

/* --- Softer borders & shadows (less visual noise) ------------------ */
.theme-light [class*="border-paper-200"]{border-color:rgba(157,184,209,.16)!important;}
.theme-light .lift{border-color:rgba(157,184,209,.14)!important;}
.theme-light .lift:hover{border-color:rgba(157,184,209,.40)!important;}
.theme-light .rounded-2xl,.theme-light .rounded-3xl{box-shadow:0 18px 44px -26px rgba(0,0,0,.65);}

/* Accent underline a touch calmer */
.theme-light .h-1.bg-copper-600{
  background:linear-gradient(90deg,transparent,#5A82AC 24%,#9DB8D1 50%,#5A82AC 76%,transparent)!important;
  box-shadow:0 0 14px rgba(110,151,190,.35);}

/* Form fields: clearer affordance */
.theme-light input,.theme-light textarea{background:#191D1F!important;border-color:rgba(157,184,209,.20)!important;color:#E2E6E7!important;}
.theme-light input:focus,.theme-light textarea:focus{border-color:#6E97BE!important;
  box-shadow:0 0 0 3px rgba(110,151,190,.18);}
.theme-light ::placeholder{color:#7C8384;}

/* Steel buttons: slightly deeper for better white-text contrast */
.bg-copper-600{background-color:#3E6796!important;}
a.bg-copper-600:hover,button.bg-copper-600:hover{background-color:#4E7BA8!important;}

/* Graphite theme: soften gallery/caption overlays that assumed light bg */
.theme-light .bg-paper-50{background-color:#262B2D;}
.theme-light .bg-paper-100{background-color:#1E2224;}
.theme-light .bg-paper-200{background-color:#333A3C;}
.theme-light .from-paper-50{--tw-gradient-from:#262B2D var(--tw-gradient-from-position);}
.theme-light .to-paper-100{--tw-gradient-to:#1E2224 var(--tw-gradient-to-position);}
.theme-light .bg-copper-600\/10{background-color:rgba(110,151,190,.12);}
.theme-light .border-copper-600\/25{border-color:rgba(110,151,190,.28);}
.theme-light .text-copper-600\/15{color:rgba(157,184,209,.16);}

/* ---- Banner framing: show the whole pack ---- */
.hero-bg{background:#17191A;display:flex;align-items:center;justify-content:center;}
.hero-bg img{max-width:100%;max-height:100%;margin:auto;}
/* keep hero readable without hiding the dogs */
#start .bg-gradient-to-r.from-dark-950\/95{
  background-image:linear-gradient(to right,rgba(23,25,26,.92),rgba(23,25,26,.55) 42%,rgba(23,25,26,.12) 70%,transparent);}
#start .bg-gradient-to-t.from-dark-950{
  background-image:linear-gradient(to top,#17191A,rgba(23,25,26,.45) 38%,rgba(23,25,26,.18));}
/* full-width pack strip: lighter scrim so nothing is covered */
#pack-banner .bg-gradient-to-t{background-image:linear-gradient(to top,rgba(23,25,26,.85),rgba(23,25,26,.15) 42%,transparent 65%);}
#pack-banner .bg-gradient-to-r{background-image:linear-gradient(to right,rgba(23,25,26,.35),transparent 30%,transparent 70%,rgba(23,25,26,.35));}
/* (stara reguła hero dla 640px zastąpiona pełnym układem mobilnym niżej) */

/* ---- Facebook posts widget (SociableKit) ---- */
.fb-feed-wrap{min-height:520px;}
.fb-feed-wrap iframe{width:100%!important;border:0;border-radius:16px;display:block;}
.fb-feed-wrap .sk-ww-facebook-page-posts{width:100%;}

/* ==================================================================
   PERFORMANCE — smoother scrolling & painting
   ================================================================== */
/* Promote only what actually animates, and release it when idle */
.hero-bg,.hero-kenburns{will-change:transform;backface-visibility:hidden;}
.reveal.reveal-in{will-change:auto;}
#hero-embers{will-change:auto;contain:strict;}

/* Skip painting heavy off-screen sections until they are needed */
#opinie,#faq,#proces{content-visibility:auto;contain-intrinsic-size:1px 900px;}
#galeria{content-visibility:auto;contain-intrinsic-size:1px 1100px;}

/* Images: reserve space, avoid layout shift, decode off the main thread */
/* content-visibility na <img> usuniete: powodowalo mikroprzyciecia przy scrollu */
picture{display:contents;}

/* Cheaper compositing for the fixed decorations */
#cursor-glow{will-change:transform;contain:strict;}
#scroll-progress{will-change:width;}

/* Avoid expensive repaints on hover for large cards */
.lift{backface-visibility:hidden;}

/* ==================================================================
   FORMULARZ — stany walidacji i ochrona antyspamowa
   ================================================================== */
.hp-field{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;
  opacity:0!important;pointer-events:none!important;tab-index:-1;}

.field .msg{font-size:12px;line-height:1.5;margin-top:6px;min-height:16px;transition:color .25s ease;}
.msg-bad{color:#E88B8B;}
.msg-ok{color:#63C79D;}
.msg-hint{color:#8B9293;}

.field.is-ok .fld{border-color:rgba(99,199,157,.55)!important;}
.field.is-bad .fld{border-color:rgba(232,139,139,.55)!important;}
.field.is-ok .fld:focus{box-shadow:0 0 0 3px rgba(99,199,157,.14);}
.field.is-bad .fld:focus{box-shadow:0 0 0 3px rgba(232,139,139,.14);}

.field{position:relative;}
.field.is-ok::after{content:"✓";position:absolute;right:14px;top:38px;color:#63C79D;font-weight:700;
  font-size:14px;pointer-events:none;animation:okPop .3s cubic-bezier(.2,.8,.3,1.2);}
.field[data-field="phone"].is-ok::after,.field[data-field="message"].is-ok::after{display:none;}
@keyframes okPop{from{transform:scale(.5);opacity:0;}to{transform:scale(1);opacity:1;}}

#submit-btn:disabled{filter:grayscale(.35);}
#phone-cc{min-width:104px;cursor:pointer;}
#char-count{font-variant-numeric:tabular-nums;transition:color .3s ease;}

/* ==================================================================
   GRAFIKI LEŚNE — własne SVG (świerki, gałązki, wzór igliwia)
   ================================================================== */

/* Pas lasu nad stopką */
.treeline-wrap{line-height:0;background:#1E2224;margin-bottom:-1px;position:relative;}
.treeline-wrap .treeline{display:block;width:100%;height:110px;}
@media (max-width:640px){ .treeline-wrap .treeline{height:72px;} }

/* Gałązki iglaste — dyskretny ozdobnik w rogach sekcji */
.sprig{position:absolute;top:52px;width:120px;color:#3E6796;opacity:.14;pointer-events:none;
  transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1);}
.sprig svg{width:100%;height:auto;display:block;}
.sprig-l{left:-26px;transform:rotate(-18deg);}
.sprig-r{right:-26px;transform:rotate(18deg) scaleX(-1);}
@media (max-width:1180px){ .sprig{display:none;} }

/* Wzór igliwia w tle „O rasie" */
.pine-pattern{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%233E6796' stroke-width='1.1' stroke-linecap='round' opacity='.55'%3E%3Cpath d='M16 12v22M16 15l-5 4M16 15l5 4M16 21l-6 5M16 21l6 5M16 27l-7 6M16 27l7 6'/%3E%3Cpath d='M46 34v20M46 37l-4 3M46 37l4 3M46 43l-5 4M46 43l5 4M46 49l-6 5M46 49l6 5'/%3E%3C/g%3E%3C/svg%3E");
  background-size:64px 64px;opacity:.10;}

/* Ożywienie gałązek przy wejściu sekcji w kadr */
#proces.in-view .sprig-l{opacity:.2;transform:rotate(-12deg) translateY(-6px);}
#proces.in-view .sprig-r{opacity:.2;transform:rotate(12deg) scaleX(-1) translateY(-6px);}

@media (prefers-reduced-motion: reduce){ .sprig{transition:none;} }

/* ==================================================================
   WIĘCEJ NATURY — las paralaksowy, góry, tropy łap
   ================================================================== */

/* Las na dole hero (dwie warstwy, różne tempo przy scrollu) */
.hero-forest{position:absolute;left:-2%;right:-2%;bottom:0;pointer-events:none;line-height:0;z-index:2;}
.hero-forest svg{display:block;width:104%;height:auto;}
.hero-forest-far{opacity:.9;}
.hero-forest-near{opacity:1;}
@media (max-width:640px){ .hero-forest svg{width:130%;} }

/* Pasmo gór w pasku statystyk */
.mtn-layer{position:absolute;left:0;right:0;bottom:0;line-height:0;pointer-events:none;}
.mtn-layer svg{display:block;width:100%;height:130px;}
@media (max-width:640px){ .mtn-layer svg{height:80px;} }

/* Tropy łap jako separator sekcji */
.paw-divider{display:flex;justify-content:center;align-items:center;
  background:#1E2224;padding:26px 0 6px;color:#6E97BE;}
.paw-divider .paw-trail-svg{width:min(440px,72vw);height:auto;opacity:.34;}
.paw-divider .paw-trail-svg g{opacity:0;animation:pawIn .5s ease forwards;}
.paw-divider .paw-trail-svg g:nth-child(1){animation-delay:.05s}
.paw-divider .paw-trail-svg g:nth-child(2){animation-delay:.16s}
.paw-divider .paw-trail-svg g:nth-child(3){animation-delay:.27s}
.paw-divider .paw-trail-svg g:nth-child(4){animation-delay:.38s}
.paw-divider .paw-trail-svg g:nth-child(5){animation-delay:.49s}
.paw-divider .paw-trail-svg g:nth-child(6){animation-delay:.60s}
.paw-divider .paw-trail-svg g:nth-child(7){animation-delay:.71s}
@keyframes pawIn{to{opacity:1;}}

@media (prefers-reduced-motion: reduce){
  .paw-divider .paw-trail-svg g{animation:none;opacity:1;}
}

/* ==================================================================
   PŁYNNE PRZEJŚCIA — zdjęcia wtapiają się w sekcje
   ================================================================== */

/* --- Baner „stado": góra i dół przenikają w kolor sekcji --- */
#pack-banner{background:#1E2224;}
#pack-banner .bg-gradient-to-t{
  background-image:linear-gradient(to bottom,
    #1E2224 0%,
    rgba(30,34,36,.92) 6%,
    rgba(30,34,36,.55) 14%,
    rgba(30,34,36,.12) 26%,
    transparent 40%,
    transparent 48%,
    rgba(30,34,36,.30) 68%,
    rgba(30,34,36,.80) 88%,
    #1E2224 100%)!important;}
#pack-banner .bg-gradient-to-r{
  background-image:linear-gradient(to right,
    rgba(30,34,36,.65),rgba(30,34,36,.10) 16%,transparent 34%,
    transparent 66%,rgba(30,34,36,.10) 84%,rgba(30,34,36,.65))!important;}

/* grań gór siedzi bezpośrednio na banerze – bez szwu */
.ridge-divider{background:#1E2224;margin-bottom:-2px;}
.ridge-divider+#pack-banner,#pack-banner{margin-top:-1px;}

/* --- Hero: dół wtapia się w pasek statystyk --- */
#start::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;z-index:3;
  pointer-events:none;background:linear-gradient(to bottom,transparent,rgba(20,22,23,.55) 55%,#141617 100%);}
#stats{margin-top:-1px;}

/* --- Las nad stopką: miękkie wejście w ciemność --- */
.treeline-wrap{background:#1E2224;position:relative;}
.treeline-wrap::before{content:"";position:absolute;left:0;right:0;top:-70px;height:70px;pointer-events:none;
  background:linear-gradient(to bottom,transparent,#1E2224);}
.treeline-wrap::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38px;pointer-events:none;
  background:linear-gradient(to bottom,transparent,#1B1E1F);}

/* --- Zdjęcia psów: delikatne wtopienie krawędzi w tło sekcji --- */

/* --- Miękkie szwy między kolejnymi sekcjami --- */
section.theme-light{position:relative;}
section.theme-light::before{content:"";position:absolute;left:0;right:0;top:0;height:70px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(30,34,36,.55),transparent);opacity:.5;}
#o-rasie::before,#szczenieta::before,#opinie::before{
  background:linear-gradient(to bottom,rgba(35,40,41,.6),transparent);}

/* separator z tropami też ma płynne krawędzie */
.paw-divider{background:linear-gradient(to bottom,#1E2224,#1E2224);position:relative;}
.paw-divider::before{content:"";position:absolute;left:0;right:0;top:-40px;height:40px;pointer-events:none;
  background:linear-gradient(to bottom,transparent,#1E2224);}

/* ==================================================================
   TYPOGRAFIA — Manrope (tresc) + Syne (naglowki)
   ================================================================== */
body,.font-sans{font-family:'Manrope',system-ui,-apple-system,sans-serif;
  font-feature-settings:"ss01","cv11";letter-spacing:-.006em;}
p,li,.text-base,.text-sm,.text-lg{letter-spacing:-.004em;}
strong,b{font-weight:700;}
.font-display{letter-spacing:-.022em;}
h1.font-display,h2.font-display{letter-spacing:-.032em;}
/* Manrope jest optycznie wezszy — lekko podbijamy grubosc etykiet */
.uppercase.tracking-widest{font-weight:700;}

/* ==================================================================
   MOBILE — osobne decyzje układu, nie zwężony desktop
   ================================================================== */
@media (max-width: 767px){

  /* --- HERO: zdjęcie jako blok u góry, tekst pod nim na pełnym tle ---
     Na telefonie kadrowanie zdjęcia pod tekst zjadałoby psy,
     dlatego rozdzielamy je na dwie strefy zamiast nakładać.        */
  #start{display:flex;flex-direction:column;min-height:auto!important;padding-top:5rem;padding-bottom:0;}
  #start > .absolute.inset-0{position:relative!important;inset:auto!important;order:1;width:100%;}
  #start .hero-bg{position:relative!important;top:auto!important;bottom:auto!important;
    transform:none!important;display:block;}
  #start .hero-bg img{position:relative;height:auto!important;width:100%!important;
    object-fit:contain!important;animation:none!important;}
  #start > .max-w-7xl{order:2;padding-top:1.75rem!important;padding-bottom:3rem!important;}
  #start .hero-forest{bottom:-1px;}
  #start .hero-forest svg{height:52px;}
  #start::after{height:60px;}
  #start .scroll-ind,#start a[href="#o-nas"]{display:none;}
  #start h1{font-size:2.35rem;line-height:1.12;}
  #start p.text-lg{font-size:1.02rem;}
  #start .pt-9{padding-top:1.5rem;}

  /* --- Rytm pionowy: mniej powietrza, bo ekran jest wąski --- */
  section.theme-light{padding-top:3.25rem!important;padding-bottom:3.25rem!important;}
  section.theme-light::before{height:36px;}
  .mb-16{margin-bottom:2.25rem!important;}
  .mb-14{margin-bottom:2rem!important;}
  .mt-16{margin-top:2.25rem!important;}

  /* --- Nagłówki: mniejsza skala, ciaśniejszy interlinia --- */
  h2.font-display{font-size:1.75rem!important;line-height:1.18;}
  h3.font-display{font-size:1.2rem!important;}
  .text-3xl,.text-4xl{font-size:1.75rem!important;}
  .text-2xl{font-size:1.35rem!important;}

  /* --- Zdjęcia psów: kadr 4:3 zamiast pełnej wysokości ekranu --- */
  #nasze-psy article > div:first-child img{aspect-ratio:4/3;object-fit:cover;}
  #nasze-psy article{gap:1.25rem!important;}

  /* --- Statystyki: 2x2, większe liczby --- */
  #stats{padding-top:2.25rem;padding-bottom:2.25rem;}
  #stats .grid{gap:1.5rem 1rem!important;}
  #stats .font-display{font-size:2.25rem!important;}
  #stats .uppercase{font-size:.62rem!important;letter-spacing:.14em;}
  .mtn-layer svg{height:64px;}

  /* --- Przyciski: pełna szerokość i palec, nie kursor (min 48px) --- */
  a[class*="py-4"],button[class*="py-4"]{min-height:48px;width:100%;}
  .btn-shine{width:100%;}

  /* --- Menu mobilne: arkusz na pełną wysokość, duże cele dotyku --- */
  #mobile-menu-panel{max-height:calc(100vh - 5rem);overflow-y:auto;padding-bottom:2rem;}
  .mobile-nav-link{padding:.85rem 0!important;font-size:1.05rem!important;
    border-bottom:1px solid rgba(157,184,209,.10);}
  #mobile-menu-btn{min-width:48px;min-height:48px;}

  /* --- Karty i sekcje: mniej wewnętrznego marginesu --- */
  .p-8,.sm\:p-10,.p-7{padding:1.35rem!important;}
  .rounded-3xl{border-radius:18px!important;}
  .gap-8{gap:1.1rem!important;}

  /* --- FAQ: większe pole kliknięcia --- */
  .faq-q{padding:1.05rem 1.15rem!important;min-height:56px;}

  /* --- Ozdobniki: mniejsze, żeby nie zabierały ekranu --- */
  .paw-divider{padding:14px 0 2px;}
  .paw-divider .paw-trail-svg{width:82vw;}
  .ridge-divider svg{height:52px;}
  .treeline-wrap .treeline{height:60px;}

  /* --- Baner stada: kadr pionowy, żeby psy były widoczne --- */
  #pack-banner img{aspect-ratio:4/3;object-fit:cover;object-position:center;}
  #pack-banner p.font-display{font-size:1.3rem!important;}
  #pack-banner .p-6{padding:1rem!important;}

  /* --- Formularz: pola wygodne dla kciuka --- */
  .fld{min-height:50px;font-size:16px!important;} /* 16px = brak auto-zoomu w iOS */
  textarea.fld{min-height:120px;}
  #phone-cc{min-width:92px;}
}

/* Tablet — pośredni rytm zamiast desktopowego */
@media (min-width:768px) and (max-width:1023px){
  section.theme-light{padding-top:4.5rem!important;padding-bottom:4.5rem!important;}
  h2.font-display{font-size:2.1rem!important;}
  #start h1{font-size:3.1rem;}
}

/* ==================================================================
   EFEKTY W DUCHU 21st.dev — odtworzone natywnie (bez Reacta)
   ================================================================== */

/* --- Spotlight: światło podąża za kursorem po krawędzi karty --- */
@media (hover:hover) and (pointer:fine){
  .lift{position:relative;}
  .lift::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    opacity:0;transition:opacity .45s ease;z-index:0;
    background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),
               rgba(110,151,190,.16),transparent 62%);}
  .lift:hover::before{opacity:1;}
  .lift > *{position:relative;z-index:1;}
}

/* --- Aurora: powolna, ambientowa poświata w tle sekcji --- */
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.aurora span{position:absolute;display:block;opacity:.5;will-change:transform;}
.aurora span:nth-child(1){width:52vw;height:52vw;left:-14vw;top:-18vw;
  background:radial-gradient(circle closest-side,rgba(62,103,150,.30),rgba(62,103,150,.10) 55%,transparent 72%);
  animation:auroraA 26s ease-in-out infinite alternate;}
.aurora span:nth-child(2){width:44vw;height:44vw;right:-12vw;bottom:-16vw;
  background:radial-gradient(circle closest-side,rgba(46,80,117,.28),rgba(46,80,117,.09) 55%,transparent 72%);
  animation:auroraB 32s ease-in-out infinite alternate;}
@keyframes auroraA{to{transform:translate3d(9vw,6vw,0) scale(1.12);}}
@keyframes auroraB{to{transform:translate3d(-7vw,-5vw,0) scale(1.08);}}
@media (max-width:767px){ .aurora span{opacity:.34;} }

/* --- Shimmer na obramowaniu wyróżnionego panelu --- */
.edge-shimmer{position:relative;}
.edge-shimmer::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  padding:1px;background:linear-gradient(120deg,transparent 30%,rgba(157,184,209,.55) 50%,transparent 70%);
  background-size:280% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:edgeMove 7s linear infinite;opacity:.7;}
@keyframes edgeMove{to{background-position:280% 0;}}

@media (prefers-reduced-motion: reduce){
  .aurora span,.edge-shimmer::after{animation:none;}
}

/* ==================================================================
   PŁYNNOŚĆ — mniej pracy dla GPU
   ================================================================== */
/* Rozmycie tła tylko na szczycie strony; po przewinięciu tło jest kryjące */
#main-header{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background-color .3s ease,box-shadow .3s ease;}
#main-header.scrolled{backdrop-filter:none;-webkit-backdrop-filter:none;}

/* Pasek postępu przez transform (kompozytor) zamiast width (reflow) */
#scroll-progress{width:100%;transform:scaleX(0);transform-origin:left center;will-change:transform;}

/* Izolacja sekcji — zmiana w jednej nie unieważnia layoutu całej strony */
section{contain:layout style;}
#stats,#pack-banner,.paw-divider,.treeline-wrap,.ridge-divider{contain:layout paint style;}

/* Warstwy kompozytora tylko tam, gdzie faktycznie się ruszają */
.hero-forest,.mtn-layer,.aurora{transform:translateZ(0);}
.reveal{will-change:opacity,transform;}
.reveal.reveal-in{will-change:auto;}

/* Płynne przewijanie kotwic bez skoków */
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth;} }

/* Obrazy: dekodowanie poza głównym wątkiem */
img{content-visibility:visible;}

/* ==================================================================
   DOPRACOWANIE — detale, które widać dopiero gdy ich brakuje
   ================================================================== */

/* Kotwice: nagłówek nie zasłania tytułu sekcji po kliknięciu w menu */
section[id]{scroll-margin-top:96px;}
@media (max-width:767px){ section[id]{scroll-margin-top:78px;} }

/* Szkielet ładowania widżetu Facebooka — zamiast pustej dziury */
.fb-skeleton{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;}
.fb-skeleton div{height:230px;border-radius:16px;
  background:linear-gradient(100deg,#22272A 30%,#2C3336 50%,#22272A 70%);
  background-size:220% 100%;animation:skel 1.6s linear infinite;}
@keyframes skel{to{background-position:-220% 0;}}
.fb-feed-wrap.loaded .fb-skeleton{display:none;}

/* Ilustracja porównawcza sylwetek */
.topline-card{background:#262B2D;border:1px solid rgba(157,184,209,.14);border-radius:18px;padding:1.5rem;}
.topline-card svg{width:100%;height:auto;display:block;}
.topline-good{stroke:#6E97BE;}
.topline-bad{stroke:#B98A6B;}

/* Druk — ktoś wydrukuje stronę z danymi kontaktowymi */
@media print{
  #page-veil,#cursor-glow,#scroll-progress,#to-top,#main-header,.paw-divider,
  .treeline-wrap,.ridge-divider,.aurora,.hero-forest,.mtn-layer,#hero-embers{display:none!important;}
  body{background:#fff!important;color:#111!important;}
  section{padding:1rem 0!important;break-inside:avoid;}
  .reveal{opacity:1!important;transform:none!important;}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:10px;color:#555;}
}

/* Opinie — układ mozaikowy (kolumny CSS, karty nie są rozcinane) */
.opinions-masonry{columns:1;column-gap:1.5rem;}
@media (min-width:768px){ .opinions-masonry{columns:2;} }
@media (min-width:1280px){ .opinions-masonry{columns:3;column-gap:1.75rem;} }
.opinion-card{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  margin-bottom:1.5rem;display:inline-block;width:100%;}

/* ==================================================================
   NAGŁÓWEK — 11 pozycji musi zmieścić się w jednej linii
   ================================================================== */
#desktop-nav{flex-wrap:nowrap;}
#desktop-nav .nav-link{white-space:nowrap;}

/* Ciasny zakres 1024–1279 px: mniejsza typografia, ukryty podtytuł logo */
@media (min-width:1024px) and (max-width:1279px){
  #desktop-nav{gap:.8rem!important;}
  #desktop-nav .nav-link{font-size:12.5px;letter-spacing:-.012em;}
  #main-header .brand-sub{display:none;}
  #main-header .w-12{width:2.5rem;height:2.5rem;}
}
@media (min-width:1280px) and (max-width:1439px){
  #desktop-nav{gap:1.1rem!important;}
  #desktop-nav .nav-link{font-size:13.5px;}
}

/* Podkreślenie aktywnej pozycji — wyraźniejsze i płynniejsze */
.nav-link::after{height:2px;bottom:-6px;border-radius:2px;
  transition:width .32s cubic-bezier(.3,.7,.2,1),background-color .3s ease;}
.nav-link.active{color:#9DB8D1;}
.nav-link.active::after{background:linear-gradient(90deg,#5A82AC,#9DB8D1);}

/* Aktywna pozycja także w menu mobilnym */
.mobile-nav-link.active{color:#9DB8D1;position:relative;padding-left:.85rem!important;}
.mobile-nav-link.active::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:18px;border-radius:2px;background:linear-gradient(180deg,#5A82AC,#9DB8D1);}

/* Znak wodny — portret owczarka w stopce */
.footer-has-face{position:relative;overflow:hidden;}
.footer-face{position:absolute;right:-40px;top:50%;transform:translateY(-50%);
  width:300px;height:auto;opacity:.05;pointer-events:none;user-select:none;
  filter:grayscale(1) brightness(1.6);}
@media (max-width:1023px){ .footer-face{width:210px;right:-70px;opacity:.04;} }
@media (max-width:640px){ .footer-face{display:none;} }

/* ==================================================================
   EKRAN ŁADOWANIA — pierścień postępu wokół znaku hodowli
   ================================================================== */
:root{ --pl-time:3.9s; }

#page-veil{position:fixed;inset:0;z-index:100;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(ellipse at 50% 44%,#252C30 0%,#1B1F21 55%,#131618 100%);
  transition:opacity 1s cubic-bezier(.65,0,.35,1),visibility 1s;}
#page-veil.gone{opacity:0;visibility:hidden;pointer-events:none;}
body.is-loading{overflow:hidden;}

/* drobinki unoszące się w tle */
.pl-motes{position:absolute;inset:0;pointer-events:none;}
.pl-mote{position:absolute;bottom:-6px;left:var(--x);width:var(--s);height:var(--s);
  border-radius:50%;background:#9DB8D1;opacity:0;
  animation:plMote var(--d) linear var(--dl) infinite;}
@keyframes plMote{
  0%{transform:translateY(0);opacity:0;}
  12%{opacity:var(--o);}
  85%{opacity:var(--o);}
  100%{transform:translateY(-88vh);opacity:0;}}

.pl-box{position:relative;display:flex;flex-direction:column;align-items:center;}

/* pierścień + logo */
.pl-ring-wrap{position:relative;width:clamp(210px,58vw,246px);aspect-ratio:1;
  display:grid;place-items:center;}

.pl-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible;}
.pl-ring circle{fill:none;stroke-linecap:round;}
.pl-ring-track{stroke:rgba(157,184,209,.10);stroke-width:1.5;}
.pl-ring-bar{stroke:url(#plGrad);stroke-width:3;
  stroke-dasharray:678.58;stroke-dashoffset:678.58;
  filter:drop-shadow(0 0 6px rgba(110,151,190,.55));
  animation:plRing var(--pl-time) cubic-bezier(.36,.05,.2,1) .55s forwards;}
@keyframes plRing{to{stroke-dashoffset:0;}}

/* punkt świetlny biegnący po pierścieniu */
.pl-orbit{position:absolute;inset:0;opacity:0;
  animation:plOrbit var(--pl-time) cubic-bezier(.36,.05,.2,1) .55s forwards,
            plFade .5s ease .55s forwards;}
.pl-orbit i{position:absolute;top:5%;left:50%;width:8px;height:8px;
  margin:-4px 0 0 -4px;
  border-radius:50%;background:#D6E6F4;
  box-shadow:0 0 10px 2px rgba(183,204,224,.85),0 0 22px 6px rgba(62,103,150,.5);}
@keyframes plOrbit{to{transform:rotate(360deg);}}

.pl-logo{position:relative;width:58%;height:auto;object-fit:contain;opacity:0;
  transform:scale(.94);
  animation:plLogoIn 1.3s cubic-bezier(.22,.72,.24,1) .15s forwards,
            plHalo 5s ease-in-out 1.6s infinite;
  transition:transform 1s cubic-bezier(.65,0,.35,1);}
@keyframes plLogoIn{to{opacity:1;transform:scale(1);}}
@keyframes plHalo{0%,100%{filter:drop-shadow(0 4px 18px rgba(62,103,150,.18));}
  50%{filter:drop-shadow(0 4px 32px rgba(110,151,190,.42));}}
#page-veil.gone .pl-logo{transform:scale(1.07);}

/* licznik */
.pl-pct{margin-top:30px;font-family:var(--font-display);font-weight:800;
  font-size:15px;letter-spacing:.22em;color:#9DB8D1;font-variant-numeric:tabular-nums;
  opacity:0;animation:plFade .8s ease .9s forwards;}
.pl-pct-sign{color:#6C767A;margin-left:2px;}
@keyframes plFade{to{opacity:1;}}

@media (prefers-reduced-motion: reduce){
  .pl-mote,.pl-orbit,.pl-logo{animation:none!important;opacity:1!important;transform:none!important;}
  .pl-ring-bar{animation:plRing .4s ease forwards;}
  #page-veil{transition:opacity .3s;}
}

/* zabezpieczenie: gdy JavaScript nie zadziała, zasłona i tak zniknie */
@keyframes plFailsafe{to{opacity:0;visibility:hidden;pointer-events:none;}}
#page-veil{animation:plFailsafe .8s ease 8s forwards;}
#page-veil.gone{animation:none;}

/* Odnośnik pomijający nawigację — widoczny dopiero po tabulacji */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;}
.skip-link:focus{left:1rem;top:1rem;padding:.85rem 1.5rem;border-radius:10px;
  background:#3E6796;color:#fff;font-weight:700;font-size:.9rem;text-decoration:none;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.8);outline:2px solid #B7CCE0;outline-offset:2px;}

/* Kontrast znaku procenta na ekranie ładowania (było 3,57 — poniżej AA) */
.pl-pct-sign{color:#8B9497;}

/* ==================================================================
   HERO — dwie strefy: tekst po lewej, całe stado po prawej
   Zdjęcie zajmuje prawą część kadru, więc żaden pies nie chowa się
   pod nagłówkiem. Proporcje dostrojone do szerokości ekranu.
   ================================================================== */
@media (min-width:1024px){
  /* kolumna tekstu: stała, wyrównana do lewej krawędzi ekranu */
  #start > .max-w-7xl{max-width:none!important;width:100%;
    padding-left:clamp(2.5rem,5vw,6rem);padding-right:1rem;}
  #start > .max-w-7xl > div{max-width:min(540px,40vw);margin-left:0;margin-right:0;}

  /* strefa zdjęcia */
  #start .hero-bg{
    left:auto!important;right:0!important;top:0!important;bottom:0!important;
    width:54%;display:flex;align-items:center;
    -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.5) 10%,#000 26%);
            mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.5) 10%,#000 26%);
  }
  #start .hero-bg img{width:100%;height:auto;max-height:100%;
    object-fit:contain!important;object-position:right center;}

  /* przyciemnienie tylko pod tekstem */
  #start .bg-gradient-to-r.from-dark-950\/95{
    background-image:linear-gradient(to right,
      rgba(23,25,26,.96) 0%,rgba(23,25,26,.88) 26%,rgba(23,25,26,.4) 40%,transparent 54%)!important;}
  #start .bg-gradient-to-t.from-dark-950{
    background-image:linear-gradient(to top,#17191A 0%,rgba(23,25,26,.32) 26%,transparent 56%)!important;}
  #start .vignette{background:radial-gradient(ellipse at 70% 48%,transparent 48%,rgba(2,9,7,.5) 100%);}

  /* mniejszy nagłówek tam, gdzie kolumna jest wąska */
  #start h1{font-size:3.1rem;line-height:1.06;}
  #start p.text-lg{font-size:1.02rem;}
}

@media (min-width:1280px){
  #start .hero-bg{width:58%;}
  #start h1{font-size:3.7rem;}
  #start p.text-lg{font-size:1.1rem;}
}
@media (min-width:1536px){
  #start .hero-bg{width:60%;}
  #start > .max-w-7xl > div{max-width:600px;}
  #start h1{font-size:4.4rem;}
  #start p.text-lg{font-size:1.2rem;}
}

/* Nagłówek hero jako znak marki — rozstrzelone wersaliki */
.hero-brand{
  font-size:clamp(2.6rem,9vw,5.4rem);
  line-height:1.02;
  letter-spacing:.06em;
  text-transform:uppercase;
}
@media (min-width:1024px){
  #start h1.hero-brand{font-size:3.5rem;letter-spacing:.07em;}
}
@media (min-width:1280px){ #start h1.hero-brand{font-size:4.2rem;} }
@media (min-width:1536px){ #start h1.hero-brand{font-size:5rem;} }
@media (max-width:480px){ .hero-brand{letter-spacing:.045em;} }

/* ==================================================================
   O NAS — dwa portrety właścicieli
   ================================================================== */
.onas-photos{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start;}
.onas-photo{position:relative;margin:0;border-radius:16px;overflow:hidden;
  border:1px solid rgba(157,184,209,.16);
  box-shadow:0 22px 50px -26px rgba(0,0,0,.75);
  transition:transform .5s cubic-bezier(.2,.7,.2,1),border-color .4s ease;}
.onas-photo img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.2,1);}
.onas-photo:hover{transform:translateY(-6px);border-color:rgba(157,184,209,.42);}
.onas-photo:hover img{transform:scale(1.04);}
.onas-photo--low{margin-top:2.5rem;}

.onas-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:2.5rem .9rem .85rem;
  background:linear-gradient(to top,rgba(20,23,25,.92),rgba(20,23,25,.35) 55%,transparent);
  pointer-events:none;}
.onas-photo figcaption span{display:inline-block;font-family:var(--font-display);font-weight:800;
  font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:#E8ECEE;}

.onas-caption{margin-top:1.5rem;font-size:.875rem;line-height:1.7;color:#949B9C;}

@media (max-width:640px){
  .onas-photos{gap:.7rem;}
  .onas-photo--low{margin-top:1.5rem;}
  .onas-photo figcaption{padding:2rem .7rem .7rem;}
  .onas-photo figcaption span{font-size:.7rem;letter-spacing:.12em;}
}

/* ============================================================
   SEO PASS — tabela cech rasy, karty za/przeciw, kroki, okruszki
   ============================================================ */

/* Okruszki nawigacyjne */
.crumbs{font-size:.8rem;color:#8B9293;margin-bottom:.35rem}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
           align-items:center;gap:.4rem;justify-content:center}
.crumbs a{color:#8B9293;text-decoration:none;transition:color .2s ease}
.crumbs a:hover{color:#3E6796;text-decoration:underline}
.crumbs li[aria-current]{color:#5C6466;font-weight:600}
.crumbs .sep{opacity:.5}

/* Tabela cech rasy */
.breed-table{width:100%;border-collapse:collapse;font-size:.95rem}
.breed-table caption{caption-side:top;text-align:left;font-size:.78rem;
  letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  color:#3E6796;padding-bottom:.9rem}
.breed-table th,.breed-table td{padding:.85rem 0;text-align:left;vertical-align:top;
  border-bottom:1px solid rgba(60,70,74,.14)}
.breed-table th{font-weight:600;color:#5C6466;width:44%;padding-right:1.25rem}
.breed-table td{color:#2B3133;font-weight:600}
.breed-table tr:last-child th,.breed-table tr:last-child td{border-bottom:0}
@media (max-width:520px){
  .breed-table th,.breed-table td{display:block;width:100%;border-bottom:0;padding:.2rem 0}
  .breed-table th{color:#8B9293;font-size:.8rem;padding-top:.85rem}
  .breed-table td{padding-bottom:.85rem;border-bottom:1px solid rgba(60,70,74,.14)}
}

/* Karty „dla kogo / nie dla kogo” */
.fit-card{background:#F7F8F8;border:1px solid rgba(60,70,74,.13);
  border-radius:1.25rem;padding:2rem;height:100%}
.fit-card--yes{border-top:3px solid #3E6796}
.fit-card--no{border-top:3px solid #B98A6B}
.fit-card h3{display:flex;align-items:center;gap:.6rem;margin-bottom:1.1rem}
.fit-card ul{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.fit-card li{position:relative;padding-left:1.6rem;font-size:.95rem;
  line-height:1.65;color:#3C4446}
.fit-card li::before{position:absolute;left:0;top:.1rem;font-weight:700}
.fit-card--yes li::before{content:"✓";color:#3E6796}
.fit-card--no li::before{content:"—";color:#B98A6B}

/* Oś czasu pierwszego roku */
.age-steps{display:grid;gap:1.1rem;counter-reset:agestep}
@media (min-width:768px){.age-steps{grid-template-columns:repeat(2,1fr)}}
.age-step{position:relative;background:#F7F8F8;border:1px solid rgba(60,70,74,.13);
  border-radius:1.1rem;padding:1.6rem 1.6rem 1.6rem 4.4rem}
.age-step::before{counter-increment:agestep;content:counter(agestep);
  position:absolute;left:1.5rem;top:1.5rem;width:2.1rem;height:2.1rem;
  display:grid;place-items:center;border-radius:50%;
  background:rgba(62,103,150,.12);color:#3E6796;
  font-family:'Syne',sans-serif;font-weight:800;font-size:.95rem}
.age-step .age-when{display:block;font-size:.75rem;letter-spacing:.1em;
  text-transform:uppercase;color:#3E6796;font-weight:700;margin-bottom:.35rem}
.age-step h3{font-family:'Syne',sans-serif;font-weight:700;color:#1F2426;
  font-size:1.05rem;margin-bottom:.5rem}
.age-step p{font-size:.92rem;line-height:1.7;color:#3C4446;margin:0}

/* Galeria statyczna */
.photo-grid{display:grid;gap:1.1rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:768px){.photo-grid{grid-template-columns:repeat(4,1fr);gap:1.35rem}}
.photo-grid figure{margin:0}
.photo-tile{position:relative;display:block;width:100%;border-radius:1.1rem;
  overflow:hidden;background:#20262A;cursor:zoom-in;
  border:1px solid rgba(60,70,74,.13);
  padding:0;margin:0;font:inherit;color:inherit;text-align:left;
  -webkit-appearance:none;appearance:none}
.photo-tile:focus-visible{outline:3px solid #3E6796;outline-offset:3px}
.photo-tile img{display:block;width:100%;height:100%;aspect-ratio:3/4;
  object-fit:cover;transition:transform .7s cubic-bezier(.22,.72,.24,1)}
.photo-tile:hover img,.photo-tile:focus-visible img{transform:scale(1.06)}
.photo-tile::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(20,23,25,.55),transparent 46%)}
.photo-tile figcaption,.photo-cap{position:absolute;left:0;right:0;bottom:0;
  z-index:2;padding:.9rem 1rem;color:#fff;font-size:.85rem;font-weight:600;
  text-shadow:0 2px 10px rgba(0,0,0,.7)}
.photo-cap span{display:block;font-weight:400;font-size:.75rem;
  color:rgba(255,255,255,.78);margin-top:.15rem}
@media (prefers-reduced-motion:reduce){.photo-tile img{transition:none}}

/* Uzupelnienie klas Tailwind uzytych po zbudowaniu arkusza */
.mb-12{margin-bottom:3rem}
.mt-12{margin-top:3rem}
@media (min-width:1024px){.lg\:gap-16{gap:4rem}}
.not-italic{font-style:normal}