/* ═══════════════════════════════════════════════════════════════════════════
   lakiery.net — style.css
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Zmienne ──────────────────────────────────────────────────────────────── */
:root{
  --bg: #ffffff;
  --bg-2: #f5f6f7;
  --bg-3: #ececee;
  --line: #e3e4e7;
  --line-2: #d2d4d8;
  --ink: #1a1b1e;
  --ink-2: #45474c;
  --ink-3: #76797f;
  --ink-4: #a3a6ac;
  --accent: #1a1b1e;
  --radius: 14px;
  --maxw: 1240px;
  --nav-bg: rgba(255,255,255,0.85);
  --form-bg: #f5f6f7;
  --input-bg: #ffffff;
  --font-family: 'Jost';
}
html[data-theme="dark"]{
  --bg: #0e0f11;
  --bg-2: #161719;
  --bg-3: #1d1f22;
  --line: #26282c;
  --line-2: #34373c;
  --ink: #f4f5f7;
  --ink-2: #c3c6cc;
  --ink-3: #8a8e96;
  --ink-4: #5b5e64;
  --accent: #f4f5f7;
  --nav-bg: rgba(14,15,17,0.82);
  --form-bg: #161719;
  --input-bg: #0e0f11;
}
html[data-theme="dark"] img.logo-asset{
  filter: invert(1) hue-rotate(180deg);
}

/* ── Reset ────────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family: var(--font-family,'Jost'), system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 16px;
  line-height: 1.55;
}
a{color: inherit; text-decoration: none}
button{font-family: inherit}

/* ── Layout primitives ────────────────────────────────────────────────────── */
.wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
}

/* ── Nav ──────────────────────────────────────────────────────────────────── */
.nav{
  position: sticky; top: 0; z-index: 50;
  background: var(--nav-bg);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
  isolation: isolate;
}
.nav::before{
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background:
    radial-gradient(50% 80% at 20% 50%, rgba(0,0,0,0.035), transparent 70%),
    radial-gradient(40% 90% at 85% 50%, rgba(0,0,0,0.03), transparent 70%);
  pointer-events: none;
}
html[data-theme="dark"] .nav::before{
  background:
    radial-gradient(50% 80% at 20% 50%, rgba(255,255,255,0.04), transparent 70%),
    radial-gradient(40% 90% at 85% 50%, rgba(255,255,255,0.03), transparent 70%);
}
.nav .nav-bg{
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
}
html[data-theme="dark"] .nav .nav-bg{opacity: 0.3}
.nav .nav-bg svg{position: absolute; inset: 0; width: 100%; height: 100%}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  height: 96px;
}
.nav-brand{
  display:flex; align-items:center; gap:10px;
  height: 76px;
}
.nav-brand img{
  height: 76px;
  width: auto;
  display:block;
  object-fit: contain;
}
.nav-actions{display:flex; gap:22px; align-items:center}
.theme-toggle{
  display:inline-flex; align-items:center; gap: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
  background: var(--bg);
}
.theme-toggle button{
  background: transparent; border: none; cursor: pointer;
  width: 30px; height: 30px;
  border-radius: 999px;
  color: var(--ink-3);
  display:flex; align-items:center; justify-content:center;
  padding: 0;
  transition: color .2s;
}
.theme-toggle button:hover{color: var(--ink)}
.theme-toggle svg{width: 16px; height: 16px}
.nav-link{
  font-size: 17px; color: var(--ink-2);
  padding: 8px 0; border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
  font-weight: 500;
}
.nav-link:hover{color: var(--ink); border-color: var(--ink)}
.nav-link.rainbow{font-weight: 600; letter-spacing: -0.005em}
.nav-link.rainbow span{display: inline-block; transition: transform .2s}
.nav-link.rainbow:hover span{transform: translateY(-2px)}
.nav-link.rainbow .s1{color:#c0202e}
.nav-link.rainbow .s2{color:#c25a07}
.nav-link.rainbow .s3{color:#a3791a}
.nav-link.rainbow .s4{color:#3e7a1d}
.nav-link.rainbow .s5{color:#1f7a4a}
.nav-link.rainbow .s6{color:#0a7a72}
.nav-link.rainbow .s7{color:#1666b8}
.nav-link.rainbow .s8{color:#3142a8}
.nav-link.rainbow .s9{color:#6a2a8a}
.nav-link.rainbow .s10{color:#a01f6a}
.nav-link.rainbow .s11{color:#c0202e}
.nav-link.rainbow .arrow-ext{color: var(--ink-3); margin-left: 4px; font-weight: 500}

/* ── Hamburger button ─────────────────────────────────────────────────────── */
.hamburger{
  display: none;               /* visible only on mobile via media query */
  position: relative;
  width: 38px; height: 38px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  flex-shrink: 0;
  color: var(--ink);
  align-items: center;
  justify-content: center;
  transition: border-color .2s;
}
.hamburger:hover{border-color: var(--ink-3)}
.hamburger span{
  position: absolute;
  left: 50%;
  width: 18px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .22s cubic-bezier(.4,0,.2,1), opacity .22s;
}
.hamburger span:nth-child(1){ top: 11px;  transform: translateX(-50%) }
.hamburger span:nth-child(2){ top: 50%;   transform: translateX(-50%) translateY(-50%) }
.hamburger span:nth-child(3){ bottom: 11px; transform: translateX(-50%) }
/* open → X */
.hamburger[aria-expanded="true"] span:nth-child(1){
  top: 50%; transform: translateX(-50%) translateY(-50%) rotate(45deg)
}
.hamburger[aria-expanded="true"] span:nth-child(2){
  opacity: 0; transform: translateX(-50%) translateY(-50%) scaleX(0)
}
.hamburger[aria-expanded="true"] span:nth-child(3){
  bottom: auto; top: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(-45deg)
}

/* ── Mobile dropdown menu ─────────────────────────────────────────────────── */
.mobile-menu{
  max-height: 0;
  overflow: hidden;
  transition: max-height .28s cubic-bezier(.4,0,.2,1);
}
.mobile-menu.open{ max-height: 200px }
.mob-link{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 15px 0;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line);
  transition: color .15s;
}
.mob-link:first-child{ border-top: 1px solid var(--line) }
.mob-link:hover{ color: var(--ink) }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero{
  padding: 32px 0 40px;
  border-bottom: 1px solid var(--line);
  min-height: calc(100vh - 96px);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(80% 60% at 85% 15%, rgba(0,0,0,0.04), transparent 60%),
    radial-gradient(70% 60% at 10% 90%, rgba(0,0,0,0.035), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f7f7f8 100%);
}
html[data-theme="dark"] .hero{
  background:
    radial-gradient(80% 60% at 85% 15%, rgba(255,255,255,0.05), transparent 60%),
    radial-gradient(70% 60% at 10% 90%, rgba(255,255,255,0.04), transparent 60%),
    linear-gradient(180deg, #0e0f11 0%, #131416 100%);
}
.hero-bg{
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.hero-bg svg{
  position: absolute;
  width: 100%; height: 100%;
  display: block;
}
.hero-bg .drops{opacity: 0.55}
html[data-theme="dark"] .hero-bg .drops{opacity: 0.35}
.hero-bg .swatches{
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%) rotate(-12deg);
  display: flex; gap: 6px;
  opacity: 0.18;
}
html[data-theme="dark"] .hero-bg .swatches{opacity: 0.12}
.hero-bg .swatches .chip{
  width: 58px; height: 220px;
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06) inset;
}
.hero-bg .swatches-left{
  right: auto;
  left: -70px;
  transform: translateY(-50%) rotate(14deg);
  opacity: 0.14;
}
html[data-theme="dark"] .hero-bg .swatches-left{opacity: 0.10}
.hero > .wrap{width: 100%; position: relative; z-index: 1}

/* ── Hero grid — subgrid wyrównuje linie separatora w obu kolumnach ──────── */
.hero-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;   /* 3 jawne wiersze wspólne dla obu kolumn */
  column-gap: 56px;
  align-items: stretch;
}
.hero-col{
  display: grid;
  grid-template-rows: subgrid;         /* dziedziczy wiersze z hero-grid */
  grid-row: span 3;                    /* każda kolumna obejmuje wszystkie 3 wiersze */
}
.hero-col.right{
  padding-left: 56px;
  border-left: 1px solid var(--line);
}
.hero-col .top{display:flex; flex-direction:column; justify-content: flex-start}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 500;
  margin-bottom: 14px;
}
.eyebrow .pulse{
  width:8px; height:8px; border-radius: 50%;
  background: #2a2a2d;
  position: relative;
}
.eyebrow .pulse::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border: 1px solid var(--ink-4);
  animation: pulse 2.2s ease-out infinite;
}
@keyframes pulse{
  0%{transform:scale(0.6); opacity:1}
  100%{transform:scale(1.8); opacity:0}
}
h1.headline{
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 14px;
  color: var(--ink);
  text-wrap: balance;
  text-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 2px 14px rgba(255,255,255,0.6);
}
html[data-theme="dark"] h1.headline{
  text-shadow: 0 1px 0 rgba(0,0,0,0.7), 0 2px 14px rgba(0,0,0,0.5);
}
h1.headline em{
  font-style: normal;
  color: var(--ink-3);
  font-weight: 500;
}
.lede{
  font-size: 15px;
  color: var(--ink-2);
  max-width: 46ch;
  margin: 0 0 12px;
}
.hero .lede{
  text-shadow: 0 1px 0 rgba(255,255,255,0.95), 0 1px 10px rgba(255,255,255,0.85);
  font-weight: 500;
}
html[data-theme="dark"] .hero .lede{
  text-shadow: 0 1px 0 rgba(0,0,0,0.7), 0 1px 10px rgba(0,0,0,0.6);
}
.hero .eyebrow{ text-shadow: 0 1px 0 rgba(255,255,255,0.9) }
html[data-theme="dark"] .hero .eyebrow{ text-shadow: 0 1px 0 rgba(0,0,0,0.6) }

.logo-row{
  display:flex; flex-direction: column; align-items: center; gap: 14px;
  padding-top: 24px;
  margin-top: 24px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.logo-row .logo-img{
  width: 100%; max-width: 540px;
  height: 170px;
  display:flex; align-items:center; justify-content: center;
}
.hero-col.right .logo-row .logo-img{
  height: 140px;
  max-width: 460px;
}
.logo-row .logo-img img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
  display: block;
}
.logo-meta{
  padding-top: 6px;
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.4;
  font-weight: 500;
}
.logo-meta strong{color: var(--ink); font-weight: 700; display:block; font-size: 18px; margin-bottom: 4px; letter-spacing: -0.005em}
.logo-meta .visit{
  display:inline-flex; align-items:center; gap: 8px;
  margin-top: 14px;
  padding: 11px 18px;
  background: var(--ink); color: var(--bg);
  border-radius: 999px;
  font-size: 14px; font-weight: 600;
  letter-spacing: -0.005em;
  border: 1px solid var(--ink);
  transition: transform .15s, background .2s, color .2s;
}
.logo-meta .visit:hover{
  background: var(--bg); color: var(--ink);
  transform: translateY(-1px);
}
.logo-meta .visit svg{width: 14px; height: 14px; transition: transform .2s}
.logo-meta .visit:hover svg{transform: translate(2px,-2px)}
html[data-theme="dark"] .logo-meta .visit:hover{background: var(--bg); color: var(--ink)}

/* ── Contact ──────────────────────────────────────────────────────────────── */
.contact{
  padding: 96px 0 110px;
  background: var(--bg);
}
.contact-grid{
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 72px;
  align-items: start;
}
.contact h2{
  font-size: clamp(32px, 3.6vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 14px 0 18px;
  text-wrap: balance;
}
.contact .lede{font-size: 17px; max-width: 38ch}
.contact .meta{
  margin-top: 36px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
  display: grid; gap: 14px;
  font-size: 14px; color: var(--ink-2);
}
.contact .meta .row{display:flex; gap: 14px; align-items: baseline}
.contact .meta .row .k{
  color: var(--ink-3);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  width: 90px; flex-shrink: 0;
}

/* ── Form ─────────────────────────────────────────────────────────────────── */
form.card{
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px;
}
.form-row{display:flex; flex-direction:column; gap: 8px; margin-bottom: 20px}
.form-row label{
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
}
.form-row input,
.form-row textarea{
  font-family: inherit; font-size: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
  width: 100%;
  resize: vertical;
}
.form-row textarea{min-height: 140px; line-height: 1.5}
.form-row input:focus,
.form-row textarea:focus{
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(26,27,30,0.08);
}
.form-grid-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-actions{
  display:flex; align-items:center; justify-content: space-between;
  gap: 16px; margin-top: 8px;
}
.btn{
  display:inline-flex; align-items:center; gap: 10px;
  background: var(--ink); color: #fff;
  border: none; cursor: pointer;
  padding: 14px 22px;
  border-radius: 999px;
  font-size: 15px; font-weight: 500;
  letter-spacing: -0.005em;
  transition: transform .15s, background .2s;
}
.btn:hover{background: #000; transform: translateY(-1px)}
.btn:active{transform: translateY(0)}
.btn .arrow{width: 16px; height: 16px; transition: transform .2s}
.btn:hover .arrow{transform: translateX(3px)}
.form-note{font-size: 12px; color: var(--ink-3)}

/* ── Footer ───────────────────────────────────────────────────────────────── */
footer{
  border-top: 1px solid var(--line);
  padding: 28px 0 36px;
  color: var(--ink-3);
  font-size: 13px;
}
.footer-inner{
  display:flex; align-items:center; justify-content: space-between;
  gap: 16px;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px){
  .hero{min-height: 0; padding: 32px 0 40px}
  /* Resetuj subgrid — na mobile każda kolumna to własny blok */
  .hero-grid{
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    column-gap: 0;
    gap: 12px;
  }
  .hero-col{
    grid-row: auto;
    grid-template-rows: auto 1fr auto;
  }
  .hero-col.right{
    padding-left: 0; border-left: none;
    border-top: 1px solid var(--line);
    padding-top: 24px; margin-top: 12px;
  }
  .contact-grid{grid-template-columns: 1fr; gap: 36px}
  .form-grid-2{grid-template-columns: 1fr}
  form.card{padding: 28px}
  .contact{padding: 64px 0 72px}
}
@media (max-width: 640px){
  /* Ukryj linki nav, pokaż hamburger */
  .nav-actions .nav-link{ display: none }
  .hamburger{ display: flex }
}
@media (max-width: 540px){
  .wrap{padding: 0 20px}
  .logo-row .logo-img{height: 130px; max-width: 100%}
  .footer-inner{flex-direction: column; align-items: flex-start; gap: 8px}
}

/* ── Dark mode — formularze ───────────────────────────────────────────────── */
html[data-theme="dark"] form.card{background: var(--form-bg); border-color: var(--line)}
html[data-theme="dark"] .form-row input,
html[data-theme="dark"] .form-row textarea{background: var(--input-bg); border-color: var(--line); color: var(--ink)}
html[data-theme="dark"] .form-row input::placeholder,
html[data-theme="dark"] .form-row textarea::placeholder{color: var(--ink-4)}
html[data-theme="dark"] .btn{background: var(--ink); color: var(--bg)}
html[data-theme="dark"] .btn:hover{background: #ffffff}
html[data-theme="dark"] .form-row input:focus,
html[data-theme="dark"] .form-row textarea:focus{box-shadow: 0 0 0 3px rgba(244,245,247,0.12)}

/* ── Animacje wejściowe hero ──────────────────────────────────────────────── */
.hero[data-anim] .anim{ opacity: 0; will-change: transform, opacity, filter }
.hero[data-anim].play .anim{
  animation-duration: .9s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.2,.7,.2,1);
}
.hero.play .anim{ animation-delay: var(--d, 0ms) }
.hero .left .eyebrow.anim   { --d:  60ms }
.hero .left .headline.anim  { --d: 140ms }
.hero .left .lede.anim      { --d: 240ms }
.hero .left .logo-row.anim  { --d: 360ms }
.hero .right .eyebrow.anim  { --d: 160ms }
.hero .right .headline.anim { --d: 240ms }
.hero .right .lede.anim     { --d: 340ms }
.hero .right .logo-row.anim { --d: 460ms }
.hero .hero-bg.anim         { --d:   0ms; animation-duration: 1.4s !important }

@keyframes anim-fade-up { from{ opacity:0; transform: translateY(18px) } to{ opacity:1; transform:none } }
@keyframes anim-slide-l { from{ opacity:0; transform: translateX(-32px) } to{ opacity:1; transform:none } }
@keyframes anim-slide-r { from{ opacity:0; transform: translateX( 32px) } to{ opacity:1; transform:none } }
.hero[data-anim="slideSides"].play .left .anim  { animation-name: anim-slide-l }
.hero[data-anim="slideSides"].play .right .anim { animation-name: anim-slide-r }
.hero[data-anim="slideSides"].play .hero-bg.anim{ animation-name: anim-fade-up }

@media (prefers-reduced-motion: reduce){
  .hero[data-anim] .anim{ opacity: 1 !important; animation: none !important }
}
@keyframes spin{ to{ transform: rotate(360deg) } }

/* ── Walidacja formularza ─────────────────────────────────────────────────── */
.required-mark{ color: #c0202e; margin-left: 2px; font-weight: 600 }
.field-error{
  display: none;
  font-size: 12px;
  color: #c0202e;
  margin-top: 5px;
  line-height: 1.4;
  padding-left: 2px;
}
.form-row.has-error .field-error{ display: block }
.form-row.has-error > input,
.form-row.has-error > textarea{
  border-color: #c0202e !important;
  box-shadow: 0 0 0 3px rgba(192,32,46,0.10) !important;
}
.form-row.is-valid > input,
.form-row.is-valid > textarea{ border-color: #2f7d4f }
.form-meta{ display: flex; flex-direction: column; gap: 5px }
.recaptcha-note{ font-size: 11px; color: var(--ink-4); line-height: 1.45 }
.recaptcha-note a{
  color: var(--ink-3);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.recaptcha-note a:hover{ color: var(--ink) }
.grecaptcha-badge{ visibility: hidden !important }