/* Munero Systems — editorial / warm paper. Brand: Engineered Slate (amber + slate)
   Palette is expressed in OKLCH for accurate color management.
   Each token's resolved sRGB matches the historical hex; see comments. */
:root{
  /* Brand palette — OKLCH, identity-equivalent to current hex */
  --paper:     oklch(0.985 0.003 106);   /* page background        -> #FAFAF8 */
  --paper-2:   oklch(0.955 0.005  95);   /* pills / chips          -> #F1F0EC */
  --ink:       oklch(0.229 0.009 256);   /* body / headings        -> #1A1D21 */
  --ink-soft:  oklch(0.484 0.012 262);   /* secondary text         -> #5B5F66 */
  --slate:     oklch(0.241 0.010 248);   /* dark surfaces          -> #1C2024 */
  --slate-2:   oklch(0.322 0.015 252);   /* dark fields            -> #2E343B */
  --amber:     oklch(0.777 0.144  68);   /* single saturated accent-> #F2A341 */

  /* Editorial neutral, used on both paper and slate for low-contrast asides */
  --ink-mute:       oklch(0.703 0.011 248);   /* -> #9aa0a6 */

  /* On-slate text roles (paper-family at lower lightness) */
  --on-slate-soft:  oklch(0.797 0.008 254);   /* secondary on slate -> #B9BDC2 */
  --on-slate-line:  oklch(0.369 0.014 252);   /* divider on slate   -> #3A4047 */

  /* Derived: lines, fills, shadows, focus ring (no magic literals) */
  --line:           color-mix(in oklch, var(--ink) 12%, transparent);
  --line-on-slate:  color-mix(in oklch, var(--paper) 16%, transparent);
  --nav-fill:       color-mix(in oklch, var(--paper) 82%, transparent);
  --shadow-hero:    color-mix(in oklch, var(--ink) 45%, transparent);
  --shadow-block:   color-mix(in oklch, var(--ink) 40%, transparent);
  --shadow-amber:   color-mix(in oklch, var(--amber) 80%, transparent);
  --focus-ring:     color-mix(in oklch, var(--amber) 55%, transparent);

  /* Type & layout */
  --hf:'Manrope',system-ui,sans-serif;
  --bf:'IBM Plex Sans',system-ui,sans-serif;
  --r:30px;                 /* duży promień grafik */
  --wrap:1160px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--bf);background:var(--paper);color:var(--ink);line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--hf);font-weight:800;line-height:1.04;letter-spacing:-.035em;text-wrap:balance}
section{padding:0 24px}

/* Global focus ring — visible on every interactive surface (was: amber inputs only) */
:where(a, button, summary, [tabindex]):focus{outline:none}
:where(a, button, summary, [tabindex]):focus-visible{
  outline:2px solid var(--focus-ring);
  outline-offset:3px;
}

/* wordmark + button */
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.wm{display:flex;flex-direction:column;line-height:1.02;font-family:var(--hf)}
.wm b{font-weight:800;font-size:18px}
.wm i{font-style:normal;font-size:9px;letter-spacing:.26em;text-transform:uppercase;opacity:.55;margin-top:3px}
.btn{display:inline-flex;align-items:center;gap:6px;background:var(--amber);color:var(--slate);
  font-family:var(--hf);font-weight:800;font-size:14px;padding:12px 22px;border-radius:999px;
  text-decoration:none;border:0;cursor:pointer;transition:transform .14s,box-shadow .14s;white-space:nowrap}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px var(--shadow-amber)}
.btn-lg{font-size:16px;padding:16px 30px}

/* fixed side rail label (pionowa etykieta sekcji).
   writing-mode keeps horizontal width stable regardless of label length,
   so the label doesn't drift sideways as sections change. */
.rail{position:fixed;left:14px;top:50%;transform:translateY(-50%);z-index:40;
  pointer-events:none;mix-blend-mode:multiply}
.rail span{display:block;writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--hf);font-weight:700;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;transition:opacity .3s}
/* Over dark sections: drop multiply (would erase dark ink on slate) and switch to a paper-family value */
.rail.on-dark{mix-blend-mode:normal}
.rail.on-dark span{color:var(--ink-mute)}
@media(max-width:1080px){.rail{display:none}}

/* nav — pływający pill */
.nav-shell{position:sticky;top:0;z-index:50;padding:18px 24px}
.nav{max-width:var(--wrap);margin:0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:24px;background:var(--nav-fill);backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:999px;padding:12px 14px 12px 22px}
.nav .brand{color:var(--ink)}
.nav-links{display:flex;gap:30px}
.nav-links a{font-family:var(--hf);font-weight:700;font-size:14px;text-decoration:none;
  color:var(--ink-soft);transition:color .14s}
.nav-links a:hover{color:var(--ink)}

/* Hamburger menu toggle — hidden on desktop, shown on mobile via @media */
.nav-toggle{display:none}
/* CTA label swap: full text on desktop, short on mobile */
.btn-label-short{display:none}

/* HERO */
.hero{max-width:var(--wrap);margin:0 auto;padding-top:40px;padding-bottom:72px;text-align:center}
.kicker{display:inline-block;font-family:var(--hf);font-weight:700;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:26px}
.hero h1{font-size:clamp(34px,5.2vw,60px);max-width:20ch;margin:0 auto 24px}
.lead{font-size:clamp(17px,2.1vw,21px);color:var(--ink-soft);max-width:42ch;margin:0 auto 34px}
.hero-media{margin:40px auto 0;border-radius:var(--r);overflow:hidden;
  box-shadow:0 40px 80px -40px var(--shadow-hero);background:var(--paper-2)}
.hero-media img{width:100%;aspect-ratio:16/9;object-fit:cover}
.strip{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:36px}
.strip span{font-family:var(--hf);font-weight:600;font-size:13px;color:var(--ink-soft);
  background:var(--paper-2);padding:10px 18px;border-radius:999px}

/* STATEMENT band */
.statement{max-width:1000px;margin:0 auto;padding:110px 24px}
.statement p{font-family:var(--hf);font-weight:800;font-size:clamp(28px,4.6vw,52px);
  line-height:1.08;letter-spacing:-.035em}
.statement span{color:var(--ink-soft)}

/* OFERTA — bloki naprzemienne (nie generyczne karty) */
.block{max-width:var(--wrap);margin:0 auto;padding:70px 24px;display:grid;
  grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,90px);align-items:center}
.block.reverse .block-text{order:2}
.tag{display:inline-block;font-family:var(--hf);font-weight:800;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--amber);margin-bottom:18px}
.block-text h2{font-size:clamp(30px,4vw,46px);margin-bottom:18px}
.block-text>p{font-size:17px;color:var(--ink-soft);margin-bottom:24px;max-width:46ch}
.lines{list-style:none;display:grid;gap:11px}
.lines li{position:relative;padding-left:24px;font-family:var(--hf);font-weight:600;font-size:15px}
.lines li::before{content:"";position:absolute;left:0;top:7px;width:12px;height:7px;
  border-left:2.5px solid var(--amber);border-bottom:2.5px solid var(--amber);transform:rotate(-45deg)}
.block-media{border-radius:var(--r);overflow:hidden;background:var(--paper-2);
  box-shadow:0 30px 60px -34px var(--shadow-block)}
.block-media img{width:100%;aspect-ratio:4/5;object-fit:cover}

/* JAK PRACUJEMY — ciemna pełnoszerokościowa sekcja */
.work{background:var(--slate);color:var(--paper);margin-top:40px;padding:96px 24px;border-radius:var(--r)}
.work>*{max-width:var(--wrap);margin-left:auto;margin-right:auto}
.work-h{font-size:clamp(32px,5vw,60px);margin-bottom:56px}
.proc{list-style:none;display:grid;gap:0}
.proc li{display:grid;grid-template-columns:90px 1fr;gap:28px;padding:34px 0;
  border-top:1px solid var(--line-on-slate);align-items:start}
.proc li:last-child{border-bottom:1px solid var(--line-on-slate)}
.pn{font-family:var(--hf);font-weight:800;font-size:18px;color:var(--amber);letter-spacing:.06em}
.proc h3{font-size:24px;margin-bottom:8px}
.proc p{color:var(--on-slate-soft);font-size:16px;max-width:56ch}

/* DLA KOGO */
.who{max-width:1000px;margin:0 auto;padding:110px 24px;text-align:center}
.who h2{font-size:clamp(28px,4.4vw,50px);max-width:18ch;margin:0 auto 40px}
.who-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-bottom:34px}
.who-pills span{font-family:var(--hf);font-weight:700;font-size:16px;background:var(--paper-2);
  padding:14px 26px;border-radius:999px}
.who-soon{font-size:14px;color:var(--ink-soft)}
.who-soon em{font-style:normal;font-weight:600}

/* O NAS — założyciel */
.founder{max-width:var(--wrap);margin:0 auto;padding:30px 24px 80px;display:grid;
  grid-template-columns:.82fr 1fr;gap:clamp(32px,6vw,80px);align-items:center}
.founder-photo{border-radius:var(--r);overflow:hidden;background:var(--paper-2);
  box-shadow:0 30px 60px -34px var(--shadow-block)}
.founder-photo img{width:100%;aspect-ratio:4/5;object-fit:cover}
.founder-text h2{font-size:clamp(28px,4vw,46px);margin:14px 0 18px}
.founder-text p{color:var(--ink-soft);font-size:17px;margin-bottom:14px;max-width:52ch}
.founder-note em{color:var(--ink-mute);font-size:14px}

/* FILAR 03 — różnicownik + diagram */
.tag-diff{color:var(--slate);background:var(--amber);padding:7px 15px;border-radius:999px}
.block.diff .block-media.diagram{background:transparent;box-shadow:none;
  display:flex;align-items:center;justify-content:center;padding:10px}
.diagram svg{width:100%;max-width:440px;height:auto}

/* DLACZEGO MY */
.why{max-width:var(--wrap);margin:0 auto;padding:100px 24px}
.sec-h{font-size:clamp(26px,3.6vw,40px);margin-bottom:48px}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:38px}
.why-grid h3{font-size:20px;margin-bottom:10px}
.why-grid p{color:var(--ink-soft);font-size:15px;max-width:34ch}

/* FAQ */
.faq{max-width:860px;margin:0 auto;padding:30px 24px 100px}
.faq-list{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;font-family:var(--hf);font-weight:700;
  font-size:18px;padding:22px 44px 22px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:16px;font-size:26px;
  font-weight:700;color:var(--amber)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 44px 26px 0;color:var(--ink-soft);font-size:16px;max-width:64ch}

/* KONTAKT */
.contact{max-width:880px;margin:0 auto;padding:40px 24px 110px}
.contact-card{background:var(--slate);color:var(--paper);border-radius:var(--r);
  padding:clamp(32px,5vw,64px)}
.contact-card h2{font-size:clamp(30px,4.4vw,52px);margin-bottom:12px}
.contact-sub{color:var(--on-slate-soft);font-size:17px;margin-bottom:38px;max-width:46ch}
.form{display:grid;gap:18px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form label{display:flex;flex-direction:column;font-family:var(--hf);font-weight:700;font-size:12px;
  letter-spacing:.04em;color:var(--on-slate-soft);gap:8px}
.form input,.form select,.form textarea{font-family:var(--bf);font-size:15px;color:var(--paper);
  background:var(--slate-2);border:1px solid var(--on-slate-line);border-radius:12px;padding:13px 15px;outline:none}
.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{
  border-color:var(--amber);outline:2px solid var(--focus-ring);outline-offset:1px}
.form textarea{resize:vertical}
.form .btn{justify-self:start;margin-top:6px}
.form-note{font-family:var(--bf);font-size:13px;color:var(--ink-mute);font-weight:400}

/* FOOTER */
.foot{max-width:var(--wrap);margin:0 auto;padding:40px 24px 60px;display:flex;
  justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  border-top:1px solid var(--line)}
.foot .brand{color:var(--ink)}
.foot p{font-size:14px;color:var(--ink-soft);text-align:right}
.foot a{color:var(--amber);text-decoration:none}

@media(max-width:780px){
  /* Mobile: inline nav collapses behind a hamburger button. Tap toggles .nav.is-open. */
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;
    background:transparent;border:0;cursor:pointer;color:var(--ink);
    padding:11px 8px;margin:-11px 0;border-radius:8px;transition:color .14s}
  .nav-toggle:hover,.nav.is-open .nav-toggle{color:var(--amber)}
  .btn-label-full{display:none}
  .btn-label-short{display:inline}
  .nav{position:relative;padding:10px 12px 10px 18px;gap:8px}
  .nav .btn{padding:11px 18px}
  /* The link list becomes a dropdown panel positioned below the pill */
  .nav-links{position:absolute;top:calc(100% + 8px);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:22px;
    padding:10px 6px;
    box-shadow:0 18px 40px -22px var(--shadow-block);
    opacity:0;transform:translateY(-6px);pointer-events:none;
    transition:opacity .18s ease-out, transform .18s ease-out;
    z-index:51}
  .nav.is-open .nav-links{opacity:1;transform:translateY(0);pointer-events:auto}
  .nav-links a{display:block;font-size:16px;padding:13px 16px;color:var(--ink);
    border-radius:14px;transition:background .14s,color .14s}
  .nav-links a:hover{background:var(--paper-2);color:var(--ink)}
  .nav-links a[aria-current="page"]{color:var(--amber)}
  .block,.block.reverse .block-text{grid-template-columns:1fr;order:0}
  .block-media{order:-1}
  .statement,.who,.why{padding:72px 24px}
  .founder{grid-template-columns:1fr;padding:24px 24px 64px}
  .founder-photo{order:-1}
  .faq{padding:24px 24px 72px}
  .why-grid{grid-template-columns:1fr;gap:28px}
  .work{padding:64px 22px}
  .block.diff .block-media{order:-1}
  .proc li{grid-template-columns:60px 1fr;gap:16px}
  .row{grid-template-columns:1fr}
  .foot{flex-direction:column;align-items:flex-start}
  .foot p{text-align:left}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}