/* ==========================================================================
   DESYN Sp. z o.o. — brand stylesheet
   Palette: Ink Navy / Paper / Harvest Gold / Manifest Red
   Type: Big Shoulders Display (display) + IBM Plex Sans (body) + IBM Plex Mono (data)
   ========================================================================== */

:root{
  --ink:        #14213D;
  --ink-soft:   #3C4A5C;
  --paper:      #EFF3EE;
  --paper-alt:  #E3E9E0;
  --white:      #FFFFFF;
  --gold:       #C98A2B;
  --gold-deep:  #A66F1E;
  --red:        #A63D2C;
  --green:      #3F6B4A;
  --line:       rgba(20,33,61,0.14);
  --shadow:     0 12px 32px rgba(20,33,61,0.14);
  --radius:     2px;
  --maxw:       1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans', Arial, sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{
  font-family:'Big Shoulders Display', Impact, sans-serif;
  font-weight:700;
  letter-spacing:0.01em;
  margin:0 0 0.4em;
  color:var(--ink);
  text-transform:uppercase;
}
h1{ font-size:clamp(2.6rem,6vw,5rem); font-weight:900; line-height:0.95; }
h2{ font-size:clamp(1.8rem,4vw,2.8rem); line-height:1; }
h3{ font-size:1.35rem; line-height:1.1; }
p{ margin:0 0 1em; color:var(--ink-soft); }
.mono{ font-family:'IBM Plex Mono', monospace; }
.container{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.section{ padding:88px 0; }
.section-tight{ padding:56px 0; }
.bg-ink{ background:var(--ink); color:var(--paper); }
.bg-ink p{ color:#B8C2D6; }
.bg-ink h1,.bg-ink h2,.bg-ink h3{ color:var(--white); }
.bg-alt{ background:var(--paper-alt); }

/* Eyebrow / manifest-style tag */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:14px;
}
.eyebrow::before{
  content:''; width:22px; height:2px; background:var(--gold-deep); display:inline-block;
}
.bg-ink .eyebrow{ color:var(--gold); }
.bg-ink .eyebrow::before{ background:var(--gold); }

/* ---------- Top identification bar (manifest header) ---------- */
.topbar{
  background:var(--ink); color:#8FA0BE;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem; letter-spacing:0.04em;
}
.topbar .container{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:8px; padding-bottom:8px; flex-wrap:wrap; gap:6px;
}
.topbar a{ color:#C9D3E4; }
.topbar a:hover{ color:var(--gold); }

/* ---------- Nav ---------- */
header.site-header{
  background:var(--paper); position:sticky; top:0; z-index:40;
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 0;
}
.logo{ display:inline-flex; align-items:center; }
.logo img{ height:34px; width:auto; display:block; }
footer .logo img{ height:34px; margin-bottom:14px; }
nav.links{ display:flex; gap:2px; align-items:center; }
nav.links a{
  font-family:'IBM Plex Mono', monospace; font-size:0.78rem;
  letter-spacing:0.06em; text-transform:uppercase;
  padding:10px 16px; color:var(--ink-soft); position:relative;
}
nav.links a:hover, nav.links a.active{ color:var(--ink); }
nav.links a.active::after{
  content:''; position:absolute; left:16px; right:16px; bottom:4px; height:2px; background:var(--gold-deep);
}
.menu-toggle{ display:none; background:none; border:none; cursor:pointer; padding:6px; }
.menu-toggle span{ display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; }

/* ---------- Route strip (signature element) ---------- */
.route-strip{
  background:var(--ink-soft); color:#D8DFEA; overflow:hidden;
  font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.08em;
}
.route-strip .track{
  display:flex; gap:48px; padding:9px 0; white-space:nowrap;
  animation:scrollRoute 32s linear infinite;
}
.route-strip .node{ display:inline-flex; align-items:center; gap:8px; opacity:0.9; }
.route-strip .node b{ color:var(--gold); }
.route-strip .dot{ width:5px; height:5px; border-radius:50%; background:var(--gold); display:inline-block; }
@keyframes scrollRoute{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
@media (prefers-reduced-motion:reduce){ .route-strip .track{ animation:none; } }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'IBM Plex Mono', monospace; font-size:0.8rem; letter-spacing:0.06em; text-transform:uppercase;
  padding:14px 26px; border:1px solid var(--ink); color:var(--ink);
  background:transparent; cursor:pointer; transition:all .18s ease;
}
.btn:hover{ background:var(--ink); color:var(--paper); }
.btn-solid{ background:var(--ink); color:var(--paper); }
.btn-solid:hover{ background:var(--gold-deep); border-color:var(--gold-deep); color:var(--ink); }
.bg-ink .btn{ border-color:var(--paper); color:var(--paper); }
.bg-ink .btn:hover{ background:var(--gold); border-color:var(--gold); color:var(--ink); }

/* ---------- Hero ---------- */
.hero{
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center;
  padding:64px 0 88px;
}
.hero-copy .stamp-line{
  display:flex; align-items:center; gap:14px; margin-top:28px; flex-wrap:wrap;
}
.hero-copy .stamp-line .mono{ font-size:0.78rem; color:var(--ink-soft); letter-spacing:0.05em; }
.hero-figure{ position:relative; }
.hero-figure img{
  width:100%; height:460px; object-fit:cover; border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.hero-figure .tag{
  position:absolute; bottom:-18px; left:-18px; background:var(--gold);
  color:var(--ink); font-family:'IBM Plex Mono', monospace; font-size:0.72rem;
  letter-spacing:0.06em; padding:10px 16px; text-transform:uppercase;
  box-shadow:var(--shadow);
}
@media (max-width:900px){
  .hero{ grid-template-columns:1fr; padding-top:40px; }
  .hero-figure img{ height:300px; }
}

/* ---------- Stat / manifest row ---------- */
.manifest-row{
  display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.manifest-row .cell{
  padding:26px 24px; border-left:1px solid var(--line);
}
.manifest-row .cell:first-child{ border-left:none; }
.manifest-row .num{ font-family:'Big Shoulders Display',sans-serif; font-size:2.4rem; font-weight:800; color:var(--ink); }
.manifest-row .label{ font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft); }
@media (max-width:800px){
  .manifest-row{ grid-template-columns:repeat(2,1fr); }
  .manifest-row .cell:nth-child(3){ border-left:none; }
}

/* ---------- Category grid ---------- */
.cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); }
.cat-card{
  background:var(--paper); position:relative; overflow:hidden; min-height:340px;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.cat-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(15%); transition:transform .5s ease, filter .3s ease;
}
.cat-card:hover img{ transform:scale(1.06); filter:grayscale(0%); }
.cat-card::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(20,33,61,0.92) 10%, rgba(20,33,61,0.15) 60%, rgba(20,33,61,0.05));
}
.cat-card .cat-body{ position:relative; padding:26px; color:var(--white); }
.cat-card .cat-code{
  font-family:'IBM Plex Mono', monospace; font-size:0.7rem; letter-spacing:0.1em;
  color:var(--gold); text-transform:uppercase; display:block; margin-bottom:8px;
}
.cat-card h3{ color:var(--white); margin-bottom:8px; }
.cat-card p{ color:#D4DAE4; font-size:0.92rem; margin-bottom:0; }
@media (max-width:900px){ .cat-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .cat-grid{ grid-template-columns:1fr; } }

/* ---------- Product detail blocks ---------- */
.product-detail{
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:0; border-bottom:1px solid var(--line);
}
.product-detail:nth-of-type(even){ direction:rtl; }
.product-detail:nth-of-type(even) > *{ direction:ltr; }
.product-detail .pd-figure{ position:relative; min-height:340px; }
.product-detail .pd-figure img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.product-detail .pd-copy{ padding:56px 48px; display:flex; flex-direction:column; justify-content:center; }
.product-detail .pd-code{
  font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.12em;
  color:var(--gold-deep); text-transform:uppercase; margin-bottom:10px;
}
.spec-list{ list-style:none; margin:18px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.spec-list li{
  font-family:'IBM Plex Mono', monospace; font-size:0.74rem; letter-spacing:0.03em;
  border:1px solid var(--line); padding:6px 12px; color:var(--ink-soft);
}
@media (max-width:820px){
  .product-detail{ grid-template-columns:1fr; }
  .product-detail .pd-figure{ min-height:240px; }
  .product-detail .pd-copy{ padding:36px 24px; }
}

/* ---------- Product photo gallery (4-up) ---------- */
.pd-gallery{
  display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--line);
  margin-top:0;
}
.pd-gallery img{
  width:100%; height:150px; object-fit:cover; display:block;
  filter:grayscale(10%); transition:filter .25s ease, transform .4s ease;
}
.pd-gallery a{ overflow:hidden; display:block; }
.pd-gallery a:hover img{ filter:grayscale(0%); transform:scale(1.05); }
@media (max-width:700px){
  .pd-gallery{ grid-template-columns:repeat(2,1fr); }
  .pd-gallery img{ height:120px; }
}

/* ---------- Two column feature ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.split img{ width:100%; height:420px; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow); }
@media (max-width:900px){ .split{ grid-template-columns:1fr; gap:32px; } .split img{ height:280px; } }

/* ---------- Values / list cards ---------- */
.value-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); }
.value-card{ background:var(--paper); padding:36px 30px; }
.value-card .num{ font-family:'Big Shoulders Display', sans-serif; font-size:2rem; color:var(--gold-deep); font-weight:800; }
@media (max-width:820px){ .value-grid{ grid-template-columns:1fr; } }

/* ---------- Timeline (careers / about) ---------- */
.role-list{ display:flex; flex-direction:column; }
.role-row{
  display:grid; grid-template-columns:120px 1fr 160px; gap:24px; align-items:center;
  padding:26px 0; border-bottom:1px solid var(--line);
}
.role-row .code{ font-family:'IBM Plex Mono', monospace; color:var(--gold-deep); font-size:0.8rem; }
@media (max-width:700px){
  .role-row{ grid-template-columns:1fr; gap:8px; padding:20px 0; }
}

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; }
.contact-card{ border:1px solid var(--line); padding:30px; background:var(--white); }
.contact-card h3{ font-size:1rem; letter-spacing:0.04em; }
.contact-card .mono{ display:block; margin-bottom:6px; color:var(--ink-soft); font-size:0.9rem; }
iframe.map{ width:100%; height:100%; min-height:360px; border:0; filter:grayscale(35%) contrast(1.05); }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }

/* ---------- Form ---------- */
.form-field{ margin-bottom:18px; }
.form-field label{
  display:block; font-family:'IBM Plex Mono', monospace; font-size:0.72rem;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px;
}
.form-field input, .form-field select, .form-field textarea{
  width:100%; padding:13px 14px; border:1px solid var(--line); background:var(--white);
  color:var(--ink); font-family:'IBM Plex Sans', sans-serif; font-size:0.95rem;
  border-radius:0;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  outline:none; border-color:var(--gold-deep);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:600px){ .form-row{ grid-template-columns:1fr; } }
.form-note{ font-size:0.82rem; color:var(--ink-soft); margin-top:6px; }
.form-status{
  display:none; margin-top:18px; padding:14px 16px; font-family:'IBM Plex Mono', monospace;
  font-size:0.82rem; border:1px solid var(--green); color:var(--green);
}
.form-status.show{ display:block; }

/* ---------- Footer ---------- */
footer.site-footer{ background:var(--ink); color:#AEB9CC; padding:56px 0 26px; }
footer.site-footer .foot-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding-bottom:36px;
  border-bottom:1px solid rgba(255,255,255,0.12);
}
footer.site-footer h4{ color:var(--paper); font-size:0.85rem; letter-spacing:0.08em; margin-bottom:16px; }
footer.site-footer a{ display:block; color:#AEB9CC; font-size:0.9rem; margin-bottom:10px; }
footer.site-footer a:hover{ color:var(--gold); }
footer.site-footer .mono{ font-size:0.78rem; color:#8695AE; }
.foot-bottom{
  display:flex; justify-content:space-between; padding-top:22px; font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem; color:#7686A0; flex-wrap:wrap; gap:10px;
}

/* ---------- Utility ---------- */
.center{ text-align:center; }
.mb-0{ margin-bottom:0; }
.mt-32{ margin-top:32px; }
.tag-strip{ display:flex; gap:10px; flex-wrap:wrap; margin-top:26px; }
.tag-strip span{
  font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.05em;
  border:1px solid var(--line); padding:6px 12px; color:var(--ink-soft);
}

/* ---------- Bilingual (EN / PL) ---------- */
html[data-lang="en"] [data-i18n="pl"]{ display:none !important; }
html[data-lang="en"] [data-i18n="en"]{ display:inline !important; }
html[data-lang="pl"] [data-i18n="en"]{ display:none !important; }
html[data-lang="pl"] [data-i18n="pl"]{ display:inline !important; }
.lang-switch{
  display:flex; align-items:center; gap:2px; margin-left:14px;
  font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.06em;
}
.lang-switch button{
  background:none; border:1px solid var(--line); color:var(--ink-soft);
  padding:6px 10px; cursor:pointer; font-family:inherit; font-size:inherit; letter-spacing:inherit;
}
.lang-switch button.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
@media (max-width:860px){ .lang-switch{ margin-left:auto; margin-right:10px; } }

/* ---------- Mobile nav ---------- */
@media (max-width:860px){
  .menu-toggle{ display:block; }
  nav.links{
    position:absolute; top:100%; left:0; right:0; background:var(--paper);
    flex-direction:column; align-items:stretch; border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  nav.links.open{ max-height:400px; }
  nav.links a{ padding:16px 28px; border-top:1px solid var(--line); }
}

/* Reveal on scroll */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }