/* Gabinet Synergia — Agnieszka Gąska */
:root{
    --bg:#ECEFE9; --surface:#F7F8F3; --surface-2:#E3E8DF;
    --ink:#1E2723; --muted:#4F5A52; --hair:#D3DACD;
    --accent:#2E5E54; --accent-ink:#234b43; --soft:#78A890; --warm:#A87848;
    --sig:#000000;
    --podpis:url("assets/podpis.svg");
    --logo:url("assets/logo.webp");
    --shadow:0 1px 2px rgba(30,39,35,.05), 0 12px 40px -18px rgba(30,39,35,.28);
    --r:18px; --maxw:1160px;
    --serif:"Palatino Linotype","Book Antiqua","Iowan Old Style","Sorts Mill Goudy",Georgia,serif;
    --sans:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  }
  :root[data-theme="dark"]{
    --bg:#121815; --surface:#1A211C; --surface-2:#222A24;
    --ink:#E9ECE5; --muted:#9AA69C; --hair:#2C352E;
    --accent:#74B7A6; --accent-ink:#8Cc9b9; --soft:#4A7D6E; --warm:#C99A6A;
    --sig:#FFFFFF;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 18px 46px -20px rgba(0,0,0,.65);
  }
  :root[data-theme="light"]{
    --bg:#ECEFE9; --surface:#F7F8F3; --surface-2:#E3E8DF;
    --ink:#1E2723; --muted:#4F5A52; --hair:#D3DACD;
    --accent:#2E5E54; --accent-ink:#234b43; --soft:#78A890; --warm:#A87848;
    --sig:#000000;
    --shadow:0 1px 2px rgba(30,39,35,.05), 0 12px 40px -18px rgba(30,39,35,.28);
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  html{background:var(--bg)}
  body{margin:0;background:transparent;color:var(--ink);font-family:var(--sans);
    font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.1;text-wrap:balance;letter-spacing:-.01em}
  p{text-wrap:pretty}
  a{color:inherit}
  .eyebrow{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
    font-weight:600;color:var(--accent);display:inline-flex;gap:.6em;align-items:center}
  .eyebrow::before{content:"";width:26px;height:1px;background:var(--soft)}

  /* NAV */
  header.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);
    background:color-mix(in srgb,var(--bg) 82%,transparent);border-bottom:1px solid transparent;transition:border-color .3s}
  header.nav.scrolled{border-color:var(--hair)}
  .nav-in{display:flex;align-items:center;justify-content:space-between;height:70px;gap:20px}
  .brand{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-weight:600;font-size:1.18rem;text-decoration:none}
  .mark{width:43px;height:32px;flex:none;background:var(--logo) center/contain no-repeat}
  .nav-links{display:flex;gap:30px;align-items:center}
  .nav-links a{text-decoration:none;color:var(--muted);font-size:.94rem;font-weight:500;transition:color .2s;position:relative}
  .nav-links a:hover{color:var(--ink)}
  .btn{display:inline-flex;align-items:center;gap:.5em;background:var(--accent);color:var(--bg);
    text-decoration:none;font-weight:600;font-size:.92rem;padding:11px 20px;border-radius:100px;
    border:none;cursor:pointer;transition:transform .2s,filter .2s;white-space:nowrap}
  .btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
  .btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--hair)}
  .btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
  .navtoggle{display:none;background:none;border:1px solid var(--hair);border-radius:10px;
    width:42px;height:42px;cursor:pointer;color:var(--ink);align-items:center;justify-content:center}
  .theme{background:none;border:1px solid var(--hair);border-radius:100px;width:40px;height:40px;
    cursor:pointer;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;transition:.2s}
  .theme:hover{color:var(--accent);border-color:var(--accent)}

  /* HERO */
  .hero{position:relative;padding:clamp(40px,6vw,72px) 0;overflow:hidden;
    min-height:calc(100vh - 70px);min-height:calc(100svh - 70px);display:flex;align-items:flex-start}
  .hero>.wrap{width:100%}
  /* logo jako nieruchome tlo calej strony */
  .tlo-logo{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.24;
    background:var(--logo) right -4vw center/min(52vw,660px) no-repeat}
  :root[data-theme="dark"] .tlo-logo{opacity:.13}
  .hero-eyebrow{display:flex;margin-bottom:clamp(14px,2vw,20px)}
  .hero-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(36px,5vw,64px);align-items:start;position:relative}
  .hero h1{font-size:clamp(2.4rem,5vw,3.6rem);margin:.3em 0 .25em}
  .hero .tag{font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,2vw,1.45rem);
    color:var(--accent);margin:0 0 1.4em;font-weight:500;padding-bottom:1.1em;border-bottom:1px solid var(--hair)}

  /* identity card */
  .ident{position:sticky;top:100px;display:flex;flex-direction:column;gap:8px;
    margin-top:1.1rem}
  .avatar{margin:0;display:flex;flex-direction:column;gap:8px}
  .avatar img{width:100%;max-width:300px;height:auto;aspect-ratio:1;object-fit:contain;display:block;
    -webkit-mask-image:radial-gradient(circle at 50% 42%,#000 60%,transparent 82%);
    mask-image:radial-gradient(circle at 50% 42%,#000 60%,transparent 82%)}
  :root[data-theme="dark"] .avatar img{-webkit-mask-image:none;mask-image:none;border-radius:10px}
  .avatar figcaption{display:flex;flex-direction:column;gap:6px;padding-top:2px;max-width:260px}
  .avatar figcaption strong{font-family:var(--serif);font-size:1.35rem;font-weight:600;letter-spacing:-.01em}
  .avatar figcaption span{font-size:.9rem;color:var(--muted);line-height:1.6}
  .ident-contact{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
  .phone{display:flex;flex-direction:column;gap:2px;text-decoration:none;font-family:var(--serif);
    font-size:1.35rem;font-weight:600;color:var(--ink);transition:color .2s}
  .phone span{font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
    color:var(--muted);font-weight:600}
  .phone:hover{color:var(--accent)}
  .hero .lead{font-size:1.14rem;color:var(--muted);max-width:60ch;margin:0}
  .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
  .signature{margin-top:28px;width:100%;max-width:215px;aspect-ratio:409.813/129.941;
    background-color:var(--sig);
    -webkit-mask:var(--podpis) center/contain no-repeat;mask:var(--podpis) center/contain no-repeat}

  /* SECTIONS */
  main{scroll-margin-top:70px}          /* zeby #top nie chowal sie pod belka */
  /* kazda sekcja = pelny ekran, tresc wyrownana do gory */
  section{padding:22px 0;scroll-margin-top:70px;
    min-height:calc(100vh - 70px);min-height:calc(100svh - 70px);
    display:flex;align-items:flex-start}
  section>.wrap{width:100%}
  .sec-head{max-width:64ch;margin-bottom:clamp(32px,5vw,56px)}
  .sec-head h1,.sec-head h2{font-size:clamp(1.9rem,3.6vw,2.7rem);margin:.4em 0 .3em}
  .sec-head p{color:var(--muted);margin:0;font-size:1.06rem}
  .alt{background:color-mix(in srgb,var(--surface) 34%,transparent)}

  /* ABOUT */
  .about-copy p{margin:0 0 .85em;color:var(--muted);max-width:68ch;font-size:.97rem;line-height:1.6}
  .about-copy p:last-child{margin-bottom:0}
  #o-mnie{padding-top:8px;padding-bottom:8px}
  #o-mnie .sec-head{margin-bottom:clamp(14px,1.8vw,20px)}
  #o-mnie .sec-head h1,.sec-head h2{font-size:clamp(1.7rem,3vw,2.2rem)}
  #o-mnie .avatar img{max-width:190px}
  #o-mnie .avatar figcaption{padding-top:2px}
  #o-mnie .avatar{gap:8px}
  #o-mnie .avatar figcaption strong{font-size:1.15rem}
  #o-mnie .about-copy p{font-size:.93rem;line-height:1.48;margin-bottom:.55em;max-width:none}
  .omnie-grid{display:grid;grid-template-columns:.40fr 1.60fr;gap:clamp(20px,2.6vw,34px);align-items:start}
  .omnie-tresc{display:flex;flex-direction:column;gap:20px}
  /* tekst na wlasnym podlozu — zeby nie zlewal sie ze znakiem wodnym */
  .omnie-tresc{background:var(--surface);border:1px solid var(--hair);
    border-radius:var(--r);padding:18px 24px}

  /* OFFER cards */
  .cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:1060px;margin-inline:auto}
  #oferta .sec-head{max-width:1060px;margin-inline:auto;margin-bottom:20px}
  .card{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);padding:24px 28px;
    display:flex;flex-direction:column;gap:11px;transition:transform .25s,box-shadow .25s,border-color .25s}
  .card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--soft)}
  .card h3{font-size:1.3rem;margin:0}
  .oferta-cta{max-width:1060px;margin:18px auto 0}
  .card p{margin:0;color:var(--muted);font-size:.97rem;line-height:1.6;flex:1}
  /* SUPERVISION */
  #superwizja .sec-head{max-width:1060px;margin-inline:auto;margin-bottom:clamp(16px,2vw,24px)}
  .sup-panel{max-width:1060px;margin-inline:auto;background:var(--surface);border:1px solid var(--hair);
    border-radius:var(--r);padding:clamp(26px,3.5vw,38px);display:flex;flex-direction:column;
    gap:18px;align-items:flex-start}
  .sup-panel>p{margin:0;color:var(--muted);max-width:72ch}

  /* AREAS */
  .areas{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,5vw,64px)}
  .chip{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
    padding:11px 0;border-bottom:1px solid var(--hair);font-size:.97rem;line-height:1.45;transition:color .2s}
  .chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--soft);margin-top:.55em;
    transition:background .2s}
  .chip:hover{color:var(--accent)}
  .chip:hover::before{background:var(--accent)}
  .invite{font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,1.7rem);font-style:italic;
    color:var(--accent);margin:clamp(24px,3vw,36px) 0 0;text-align:center}
  .signature-center{margin:14px auto 0;max-width:180px}

  /* PROCESS */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:s}
  .step{position:relative;padding-top:22px}
  .step .n{font-family:var(--serif);font-size:2.4rem;color:var(--soft);font-weight:600;line-height:1}
  .step h3{font-size:1.12rem;margin:.4em 0 .3em}
  .step p{margin:0;color:var(--muted);font-size:.94rem}
  .step::before{content:"";position:absolute;top:0;left:0;width:34px;height:3px;background:var(--accent);border-radius:2px}

  /* CONTACT */
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,52px);align-items:start}
  #kontakt .sec-head{margin-bottom:clamp(14px,1.8vw,20px)}
  #kontakt .cinfo .row{padding:11px 0}
  #kontakt .note{padding:11px 15px;margin-top:12px}
  #kontakt form{padding:20px;gap:11px}
  #kontakt textarea{min-height:82px}
  .cinfo{display:flex;flex-direction:column;gap:8px}
  .cinfo .row{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;padding:18px 0;border-bottom:1px solid var(--hair)}
  .cinfo .row:last-child{border-bottom:none}
  .cinfo .ic{width:40px;height:40px;border-radius:11px;background:color-mix(in srgb,var(--accent) 14%,var(--surface));
    color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none}
  .cinfo .k{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  .cinfo .v{font-size:1.06rem;font-weight:500}
  .cinfo a.v{text-decoration:none}
  .cinfo a.v:hover{color:var(--accent)}
  .note{background:color-mix(in srgb,var(--warm) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--warm) 30%,var(--hair));
    border-radius:14px;padding:14px 18px;font-size:.9rem;color:var(--muted);margin-top:18px}
  form{display:flex;flex-direction:column;gap:14px;background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);padding:28px}
  label{font-size:.82rem;font-weight:600;color:var(--muted);display:flex;flex-direction:column;gap:7px}
  input,textarea{font-family:inherit;font-size:1rem;color:var(--ink);background:var(--bg);
    border:1px solid var(--hair);border-radius:11px;padding:12px 14px;transition:.2s}
  input:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
  textarea{resize:vertical;min-height:110px}

  /* FOOTER */
  footer{background:color-mix(in srgb,var(--surface) 82%,transparent);border-top:1px solid var(--hair);padding:56px 0 34px;margin-top:0}
  .foot-grid{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start}
  .foot-links{display:flex;gap:26px;flex-wrap:wrap}
  .foot-links a{color:var(--muted);text-decoration:none;font-size:.92rem}
  .foot-links a:hover{color:var(--accent)}
  .copy{color:var(--muted);font-size:.85rem;margin-top:34px;padding-top:24px;border-top:1px solid var(--hair);
    display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

  .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
  .reveal.in{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
  :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

  @media(max-width:900px){
    .hero-grid,.contact-grid,.omnie-grid{grid-template-columns:1fr;gap:32px}
    .omnie-tresc{padding:18px 20px}
    .ident{position:static}
    .avatar img{max-width:150px}
    .cards{grid-template-columns:1fr}
    .sup-panel{padding:26px 24px}
    .steps{grid-template-columns:1fr 1fr}
    .areas{grid-template-columns:1fr}
    .nav-links{display:none}
    .navtoggle{display:inline-flex}
    header.nav.open .nav-links{display:flex;position:absolute;top:70px;left:0;right:0;flex-direction:column;
      background:var(--bg);border-bottom:1px solid var(--hair);padding:18px 24px;gap:18px}
  }
  @media(max-width:520px){
    .steps{grid-template-columns:1fr}
    .ident-contact{align-items:stretch}
  }

/* ── elementy wersji wielostronicowej ───────────────────────── */
.pomijacz{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);
  color:var(--bg);padding:10px 18px;border-radius:0 0 10px 0;font-weight:600;text-decoration:none}
.pomijacz:focus{left:0}

.nav-links a[aria-current="page"]{color:var(--accent);font-weight:600}

.socjale{display:flex;gap:10px;align-items:center}
.ikona{width:38px;height:38px;border-radius:50%;border:1px solid var(--hair);
  display:inline-flex;align-items:center;justify-content:center;color:var(--muted);
  text-decoration:none;transition:color .2s,border-color .2s,transform .2s}
.ikona:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-2px)}

address{font-style:normal}
.copy address{display:inline}
.copy address a{color:inherit;text-decoration:none}
.copy address a:hover{color:var(--accent)}

.kontakt-socjale{display:flex;gap:10px;align-items:center;margin-top:10px}
.kontakt-socjale .ikona{width:42px;height:42px;background:var(--surface)}

/* ── formularz kontaktowy ───────────────────────────────────── */
.pulapka{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.zgoda{flex-direction:row;align-items:flex-start;gap:10px;font-size:.86rem;
  font-weight:400;color:var(--muted);line-height:1.45;cursor:pointer}
.zgoda input{width:17px;height:17px;flex:none;margin-top:1px;accent-color:var(--accent);padding:0}

.blad{color:#B3261E;font-size:.82rem;margin:-6px 0 0}
:root[data-theme="dark"] .blad{color:#F2B8B5}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#B3261E}

.komunikat{border-radius:12px;padding:14px 16px;font-size:.92rem;line-height:1.55;margin:0}
.komunikat--ok{background:color-mix(in srgb,var(--accent) 12%,var(--surface));
  border:1px solid color-mix(in srgb,var(--accent) 32%,var(--hair));color:var(--ink)}
.komunikat--ok a{color:var(--accent);font-weight:600}
.komunikat--blad{background:color-mix(in srgb,#B3261E 9%,var(--surface));
  border:1px solid color-mix(in srgb,#B3261E 28%,var(--hair))}

.klauzula{font-size:.82rem;color:var(--muted);border-top:1px solid var(--hair);padding-top:12px}
.klauzula summary{cursor:pointer;font-weight:600;color:var(--accent);list-style:none}
.klauzula summary::-webkit-details-marker{display:none}
.klauzula summary::before{content:"› ";display:inline-block;transition:transform .2s}
.klauzula[open] summary::before{content:"⌄ "}
.klauzula p{margin:9px 0 0;line-height:1.5}
.klauzula a{color:var(--accent)}