/* Tokeny kolorów przeniesione 1:1 z oryginalnej strony iotath.com */
:root{
  --bg:#0F0F10;
  --bg-alt:#1A1A1C;
  --surface:#1A1A1C;
  --surface-2:#2A2A2D;
  --gold:#C6A96B;
  --gold-light:#D9BD85;
  --gold-deep:#9A8255;
  --text:#F5F2EC;
  --text-muted:#B5B5B5;
  --border:rgba(255,255,255,.10);
  --border-soft:rgba(255,255,255,.06);
  --radius:2px;
}

::selection{ background:var(--gold); color:#0F0F10; }

html{ scroll-behavior:smooth; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter', 'Helvetica Neue', system-ui, sans-serif;
  font-weight:400;
  overflow-x:hidden;
}

h1,h2,h3,h4,.display-serif{
  font-family:'Inter', 'Helvetica Neue', system-ui, sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.03em;
  line-height:1.05;
}
h2{ letter-spacing:.06em; }
.hero h1{ letter-spacing:.02em; text-transform:uppercase; }

.text-gold{ color:var(--gold) !important; }
.bg-surface{ background:var(--surface); }
.bg-surface-2{ background:var(--surface-2); }

.eyebrow{
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:600;
}

.section-index{
  font-family:'Inter',sans-serif;
  font-size:.72rem;
  letter-spacing:.2em;
  color:var(--text-muted);
  text-transform:uppercase;
}

.divider-gold{
  width:46px; height:2px; background:var(--gold); border:0;
}

.btn-gold{
  background:transparent;
  border:1px solid var(--gold);
  color:var(--gold-light);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.75rem;
  font-weight:600;
  padding:.85rem 1.9rem;
  border-radius:var(--radius);
  transition:.25s ease;
}
.btn-gold:hover{ background:var(--gold); color:#0B1220; }

.btn-gold-fill{
  background:var(--gold);
  border:1px solid var(--gold);
  color:#0B1220;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.75rem;
  font-weight:700;
  padding:.85rem 1.9rem;
  border-radius:var(--radius);
  transition:.25s ease;
}
.btn-gold-fill:hover{ background:transparent; color:var(--gold-light); }

.link-arrow{
  color:var(--gold-light);
  text-decoration:none;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
}
.link-arrow svg{ transition:.25s ease; }
.link-arrow:hover svg{ transform:translateX(6px); }
.link-arrow:hover{ color:var(--gold-light); }

/* ===== NAVBAR ===== */
.navbar-iota{
  background:rgba(11,18,32,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  padding-top:1rem; padding-bottom:1rem;
  transition:.3s ease;
}
.navbar-iota .nav-link{
  color:var(--text);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:500;
  margin:0 .85rem;
  opacity:.85;
}
.navbar-iota .nav-link:hover,
.navbar-iota .nav-link.active{ color:var(--gold-light); opacity:1; }

/* ===== NAVBAR TOGGLER ===== */
.navbar-iota .navbar-toggler{
  border:1.5px solid var(--gold);
  border-radius:var(--radius);
  padding:.55rem .7rem;
  opacity:1;
  transition:.2s ease;
}
.navbar-iota .navbar-toggler:hover{
  background:rgba(198,169,107,.15);
}
.navbar-iota .navbar-toggler:focus{
  box-shadow:0 0 0 3px rgba(198,169,107,.4);
  outline:none;
}
/* Złota ikona hamburgera zamiast domyślnej Bootstrap */
.navbar-iota .navbar-toggler-icon{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23C6A96B' stroke-width='2.5' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  width:1.4em;
  height:1.4em;
}

.logo-mark{
  width:38px; height:38px;
  border:1px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold);
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:1.05rem;
  letter-spacing:.05em;
  flex-shrink:0;
}
.brand-word{
  font-family:'Inter',sans-serif;
  font-size:1.25rem;
  letter-spacing:.14em;
  color:var(--text);
  line-height:1;
}
.brand-sub{
  font-size:.55rem;
  letter-spacing:.24em;
  color:var(--text-muted);
  text-transform:uppercase;
  display:block;
}

/* ===== HERO ===== */
.hero{
  min-height:100vh;
  position:relative;
  display:flex;
  align-items:flex-end;
  background:
    linear-gradient(180deg, rgba(11,18,32,.55) 0%, rgba(11,18,32,.35) 40%, rgba(11,18,32,.95) 100%),
    url('../images/hero-port.jpg') center/cover no-repeat;
  background-color:var(--bg);
}
.hero-content{ padding-bottom:5.5rem; padding-top:9rem; }
.hero h1{
  font-size:clamp(2.4rem, 5.2vw, 4.4rem);
  line-height:1.08;
  color:var(--text);
}
.hero h1 em{ color:var(--gold-light); font-style:normal; }
.hero p.lead{
  color:var(--text-muted);
  font-size:1.05rem;
  max-width:520px;
  font-weight:300;
}
.hero-tags{
  display:flex; gap:.6rem; flex-wrap:wrap;
}
.hero-tag{
  border:1px solid var(--border);
  color:var(--text-muted);
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:.45rem 1rem;
}
.hero-meta{
  font-family:'Inter',sans-serif;
  font-style:normal;
  font-weight:300;
  letter-spacing:.04em;
  color:var(--gold-light);
  font-size:1.05rem;
}
.scroll-cue{
  position:absolute;
  right:2.5rem; bottom:2rem;
  writing-mode:vertical-rl;
  color:var(--text-muted);
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  display:flex; align-items:center; gap:.6rem;
}
.scroll-cue::after{
  content:''; width:1px; height:38px; background:var(--text-muted); display:block;
}

/* ===== SIGNATURE GATEWAY GRID (inspired by reference layout) ===== */
.gateway-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  min-height:520px;
}
@media (max-width:991px){
  .gateway-grid{ grid-template-columns:repeat(2,1fr); min-height:auto; }
}
@media (max-width:575px){
  .gateway-grid{ grid-template-columns:1fr; }
}
.gateway-tile{
  position:relative;
  background-size:cover;
  background-position:center;
  min-height:420px;
  display:flex;
  align-items:flex-end;
  padding:1.9rem 1.6rem;
  text-decoration:none;
  border-right:1px solid rgba(255,255,255,.06);
  overflow:hidden;
  isolation:isolate;
}
.gateway-tile:last-child{ border-right:0; }
.gateway-tile::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,18,32,.15) 0%, rgba(11,18,32,.55) 55%, rgba(11,18,32,.95) 100%);
  z-index:0;
  transition:.35s ease;
}
.gateway-tile:hover::before{
  background:linear-gradient(180deg, rgba(11,18,32,.25) 0%, rgba(11,18,32,.65) 55%, rgba(11,18,32,.97) 100%);
}
.gateway-tile > *{ position:relative; z-index:1; }
.gateway-num{
  color:var(--gold);
  font-size:.7rem;
  letter-spacing:.18em;
  font-weight:600;
}
.gateway-tile h3{
  color:var(--text);
  font-size:1.35rem;
  margin:.5rem 0 .55rem;
}
.gateway-tile p{
  color:var(--text-muted);
  font-size:.85rem;
  font-weight:300;
  margin-bottom:.9rem;
}
.gateway-tile .link-arrow{ opacity:0; transform:translateY(6px); transition:.3s ease; }
.gateway-tile:hover .link-arrow{ opacity:1; transform:translateY(0); }
.gateway-tile:hover{ filter:brightness(1.04); }

/* Tła kafelków gateway */
.gateway-tile--commodities{ background-image:url('../images/tile-commodities.jpg'); }
.gateway-tile--logistics{   background-image:url('../images/tile-logistics.jpg'); }
.gateway-tile--financing{   background-image:url('../images/tile-financing.jpg'); }
.gateway-tile--process{     background-image:url('../images/tile-process.jpg'); }
.gateway-tile--about{       background-image:url('../images/tile-about.jpg'); }


/* ===== SECTIONS GENERIC ===== */
section{ padding:7rem 0; }
.section-tight{ padding:5rem 0; }

/* Klasy pomocnicze przenoszone z inline style= */
.section-h2{
  font-size:2.4rem;
}
.section-lead{
  color:var(--text-muted);
  font-weight:300;
}
.section-lead--wide{ max-width:620px; }
.section-lead--contact{ max-width:600px; }
.tagline-text{
  font-size:1.15rem;
  text-transform:none;
  letter-spacing:0;
}
.section-h3-lg{ font-size:1.7rem; }
.section-h3-md{ font-size:1.3rem; }
.section-h3-sm{ font-size:1.1rem; }
.section-h3-sm.process-h3{ font-size:1.1rem; margin:.5rem 0; }
.process-p{
  color:var(--text-muted);
  font-size:.85rem;
  font-weight:300;
}
.stat-num-md{ font-size:1.9rem; }
.quote-em{ font-style:normal; }
.form-note{
  color:var(--text-muted);
  font-size:.8rem;
  font-weight:300;
}
.footer-desc{
  color:var(--text-muted);
  font-size:.88rem;
  font-weight:300;
  max-width:320px;
}
.footer-span{
  color:var(--text-muted);
  font-size:.88rem;
}
.navbar-toggler-border{ border-color:var(--border) !important; }

.stat-box{ border-left:1px solid var(--border); padding-left:1.4rem; }
.stat-num{
  font-family:'Inter',sans-serif;
  font-size:2.6rem;
  color:var(--gold-light);
  line-height:1;
}
.stat-num em{ color:var(--gold); font-style:normal; }
.stat-label{
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-top:.4rem;
}

/* commodity / card grids */
.card-iota{
  border:1px solid var(--border);
  background:var(--surface);
  padding:1.9rem 1.6rem;
  height:100%;
  transition:.25s ease;
}
.card-iota:hover{
  border-color:var(--gold);
  background:var(--surface-2);
  transform:translateY(-4px);
}
.card-index{
  font-size:.7rem;
  letter-spacing:.14em;
  color:var(--gold);
  font-weight:600;
}
.card-iota h3{ font-size:1.2rem; margin:.6rem 0 .3rem; color:var(--text); }
.card-iota p{ color:var(--text-muted); font-size:.85rem; margin:0; font-weight:300; }

/* process timeline */
.process-step{
  border-top:1px solid var(--border);
  padding-top:1.6rem;
}
.process-num{
  font-family:'Inter',sans-serif;
  font-size:2rem;
  color:var(--gold);
}

/* quote blocks */
.quote-block{
  border-left:2px solid var(--gold);
  padding-left:1.6rem;
}

/* contact */
.form-control-iota{
  background:transparent;
  border:0;
  border-bottom:1px solid var(--border);
  border-radius:0;
  color:var(--text);
  padding:.7rem .1rem;
  font-size:.92rem;
}
.form-control-iota:focus{
  background:transparent;
  color:var(--text);
  border-bottom:1px solid var(--gold);
  box-shadow:none;
}
.form-control-iota::placeholder{ color:var(--text-muted); }
label.label-iota{
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:.3rem;
  display:block;
}

.contact-row{
  display:flex; align-items:center; gap:.9rem;
  border-bottom:1px solid var(--border);
  padding:1rem 0;
  color:var(--text);
  text-decoration:none;
}
.contact-row svg{ color:var(--gold); flex-shrink:0; }
.contact-row:hover{ color:var(--gold-light); }

/* footer */
footer{
  background:var(--surface-2);
  border-top:1px solid var(--border);
  padding:4.5rem 0 1.5rem;
}
footer a{ color:var(--text-muted); text-decoration:none; font-size:.88rem; }
footer a:hover{ color:var(--gold-light); }
footer h6{
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:1rem;
}
.footer-bottom{
  border-top:1px solid var(--border);
  margin-top:3rem;
  padding-top:1.5rem;
  font-size:.78rem;
  color:var(--text-muted);
}

.img-cover{ width:100%; height:100%; object-fit:cover; display:block; }
.ratio-about{ aspect-ratio: 4/5; overflow:hidden; }

/* ===== SCROLL REVEAL ===== */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  will-change:opacity, transform;
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ===== LANG SWITCH ===== */
.lang-switch{
  display:flex; align-items:center; gap:.35rem;
  border:1px solid var(--border);
  padding:.3rem .4rem;
  border-radius:var(--radius);
}
.lang-btn{
  background:transparent; border:0;
  color:var(--text-muted);
  font-size:.72rem;
  letter-spacing:.1em;
  font-weight:600;
  padding:.25rem .55rem;
  cursor:pointer;
  transition:.2s ease;
}
.lang-btn.active{ color:#0F0F10; background:var(--gold); }
.lang-btn:not(.active):hover{ color:var(--gold-light); }

/* honeypot – pole ukryte przed użytkownikiem, widoczne dla botów */
.hp-field{
  position:absolute !important;
  left:-9999px !important;
  top:-9999px !important;
  width:1px; height:1px;
  opacity:0;
  overflow:hidden;
  pointer-events:none;
}

.form-alert{
  font-size:.82rem;
  padding:.7rem 1rem;
  border:1px solid var(--border);
  display:none;
}
.form-alert.show{ display:block; }
.form-alert.error{ border-color:#B5544B; color:#E8A69E; }
.form-alert.success{ border-color:var(--gold); color:var(--gold-light); }

@media (max-width:767px){
  section{ padding:4.5rem 0; }
  .hero-content{ padding-top:7rem; padding-bottom:3rem; }
  .section-h2{ font-size:2.1rem; }
  .hero h1{ font-size:clamp(2.3rem, 5.2vw, 4.4rem); }
  .stat-num{ font-size:inherit; font-weight:700; }
  body > section{ overflow:hidden; }
  .navbar-iota{ overflow:hidden; max-width:100vw; padding-top:8px;padding-bottom:8px;}
  .navbar-iota .container{ max-width:100%; padding-left:1rem; padding-right:1rem; }
}

/* ===== ABOVE-THE-FOLD NA XL: hero + 5 kafelków razem w 100vh ===== */

@media (min-width:1200px){
  .fold-wrap{
    display:flex;
    flex-direction:column;
    min-height:100vh;
  }
  .fold-wrap .hero{
    min-height:0;
    flex:0 1 58%;
    display:flex;
    align-items:center;
  }
  .fold-wrap .hero-content{
    padding-top:6rem;
    padding-bottom:0;
  }
  .fold-wrap .hero h1{
    font-size:clamp(2rem, 2.7vw, 3.1rem);
    margin-bottom:1rem !important;
  }
  .fold-wrap .hero p.lead{
    font-size:.92rem;
    max-width:480px;
    margin-bottom:1.2rem !important;
  }
  .fold-wrap .eyebrow{ margin-bottom:.6rem !important; }
  .fold-wrap .hero-tags{ margin-bottom:0 !important; }
  .fold-wrap .hero-bottom-row{ margin-top:1.6rem !important; padding-top:1rem !important; }
  .fold-wrap .scroll-cue{ display:none !important; }

  .fold-wrap > section[aria-label="Obszary działalności"]{
    flex:1 1 42%;
    display:flex;
  }
  .fold-wrap .gateway-grid{
    flex:1 1 auto;
    min-height:0;
  }
  .fold-wrap .gateway-tile{
    min-height:0;
    padding:1.3rem 1.2rem;
  }
  .fold-wrap .gateway-num{ font-size:.65rem; }
  .fold-wrap .gateway-tile h3{ font-size:1.1rem; margin:.35rem 0 .4rem; }
  .fold-wrap .gateway-tile p{ font-size:.78rem; margin-bottom:.6rem; }
}

/* Duże ekrany ≥1600px: hero 70% / obszary działalności 30% */
@media (min-width:1600px){
  .fold-wrap{
    height:100vh;
  }
  .fold-wrap .hero{
    flex: 0 0 70%;
    height: 70vh;
    min-height: 0;
  }
  .fold-wrap section[aria-label="Obszary działalności"]{
    flex: 0 0 30%;
    height: 30vh;
  }
}

/* Bardzo niskie okna (np. laptop 13" w przeglądarce z paskami) —
   wracamy do naturalnej wysokości, żeby treść nie była ściśnięta. */
@media (min-width:1200px) and (max-height:700px){
  .fold-wrap{ min-height:auto; height:auto; }
  .fold-wrap .hero{ min-height:520px; height:auto; flex: 0 1 58%; }
  .fold-wrap .gateway-tile{ min-height:320px; }
}