/*
Theme Name: ELSTO Engineering
Theme URI: https://elsto.com.pl/
Author: ELSTO / OpenAI
Description: Lekki, autorski motyw dla biura projektowego i inżynierskiego ELSTO.
Version: 0.6.12
Text Domain: elsto
*/

:root{
  --elsto-navy:#0A0A5A;
  --elsto-navy-deep:#050536;
  --elsto-blue:#1236D1;
  --elsto-blue-hover:#0E2CB2;
  --elsto-ink:#171722;
  --elsto-muted:#6B6B7A;
  --elsto-line:#D9D9F3;
  --elsto-soft:#F5F5FF;
  --elsto-white:#fff;
  --elsto-max:1180px;
  --elsto-radius:12px;
  --elsto-shadow:0 16px 44px rgba(0,0,110,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--elsto-ink);background:#fff;line-height:1.6}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button,input,textarea{font:inherit}
.container{width:min(calc(100% - 40px),var(--elsto-max));margin-inline:auto}
.section{padding:78px 0}
.section--soft{background:var(--elsto-soft)}
.section-title{font-size:clamp(2rem,4vw,3.2rem);line-height:1.1;margin:0 0 16px;letter-spacing:-.035em}
.section-lead{max-width:760px;color:var(--elsto-muted);font-size:1.08rem;margin:0 0 38px}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:.095em;
  font-size:1.05rem;
  line-height:1.25;
  font-weight:800;
  color:var(--elsto-blue);
  margin-bottom:13px
}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:13px 20px;border:1px solid transparent;border-radius:7px;font-weight:700;transition:.2s ease}
.btn--primary{background:var(--elsto-blue);color:#fff;box-shadow:0 7px 18px rgba(18,54,209,.16)}
.btn--primary:hover{background:var(--elsto-blue-hover);transform:translateY(-1px)}
.btn--outline{border-color:rgba(255,255,255,.7);color:#fff;background:rgba(0,0,0,.08)}
.btn--outline:hover{background:rgba(255,255,255,.12)}
.text-link{font-weight:750;color:var(--elsto-navy);font-size:.92rem}
.text-link:hover{text-decoration:underline}

.site-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.98);border-bottom:1px solid rgba(18,54,209,.10);box-shadow:0 1px 0 rgba(18,54,209,.035);backdrop-filter:blur(12px)}
.header-inner{height:138px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.site-brand{display:flex;align-items:center;min-width:330px;flex:0 0 auto}
.brand-link{display:flex;align-items:center;line-height:0}

.primary-nav{display:flex;align-items:center;gap:28px;margin-left:auto}
.primary-nav ul{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0}.primary-nav li{margin:0}.primary-nav a{font-size:1rem;font-weight:700}
.primary-nav a:hover{color:var(--elsto-blue)}
.menu-toggle{display:none;border:0;background:none;padding:10px;font-size:1.4rem}
.header-cta{white-space:nowrap;font-size:.95rem;padding:14px 22px}

.hero{min-height:650px;display:flex;align-items:center;background-size:cover;background-position:center;position:relative;color:#fff}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,5,54,.93) 0%,rgba(10,10,90,.78) 42%,rgba(18,54,209,.14) 78%)}
.hero-inner{position:relative;z-index:1;padding:88px 0;max-width:720px}
.hero .eyebrow{color:#d9dcff;font-size:.86rem;letter-spacing:.11em}
.hero h1{font-size:clamp(2.7rem,6vw,5.15rem);line-height:.98;letter-spacing:-.05em;margin:0 0 24px;max-width:900px}
.hero p{font-size:clamp(1.05rem,2vw,1.25rem);max-width:670px;color:rgba(255,255,255,.90);margin:0 0 30px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}

.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{background:#fff;border:1px solid var(--elsto-line);border-radius:var(--elsto-radius);padding:28px;min-height:240px;box-shadow:0 1px 0 rgba(0,0,0,.02);transition:.2s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--elsto-shadow)}
.card-number{width:46px;height:46px;border:1px solid rgba(18,54,209,.24);border-radius:50%;display:grid;place-items:center;color:var(--elsto-blue);font-weight:800;margin-bottom:26px;background:rgba(18,54,209,.035)}
.card h3{margin:0 0 10px;font-size:1.25rem;line-height:1.25}
.card p{margin:0 0 20px;color:var(--elsto-muted);font-size:.96rem}

.process-wrap{text-align:center}
.process{display:grid;grid-template-columns:repeat(7,1fr);gap:0;margin-top:44px;position:relative}
.process::before{content:"";height:1px;background:#bcc7d1;position:absolute;left:7%;right:7%;top:24px}
.process-step{position:relative;z-index:1;padding:0 8px}
.process-dot{width:49px;height:49px;border-radius:50%;background:#fff;border:2px solid var(--elsto-blue);display:grid;place-items:center;margin:0 auto 13px;font-size:.76rem;font-weight:800;color:var(--elsto-blue);box-shadow:0 0 0 6px #fff}
.process-label{font-size:.77rem;font-weight:800;text-transform:uppercase;letter-spacing:.035em}

.sector-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.sector-card{position:relative;min-height:230px;border-radius:10px;overflow:hidden;background:#10283b;color:#fff}
.sector-card img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.sector-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(4,18,30,.82))}
.sector-card-caption{position:absolute;z-index:2;left:14px;right:14px;bottom:13px;display:flex;align-items:center;gap:10px}
.sector-card-icon{width:42px;height:42px;flex:0 0 42px;border-radius:9px;background:rgba(255,255,255,.94);color:var(--elsto-blue);display:grid;place-items:center;box-shadow:0 5px 18px rgba(2,10,25,.16)}
.sector-card-icon svg{width:29px;height:29px;display:block}
.sector-card h3{margin:0;font-size:.94rem;text-transform:uppercase;line-height:1.2;text-shadow:0 1px 3px rgba(0,0,0,.35)}

.why-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:24px;text-align:center}
.why-item{padding:8px}
.why-icon{width:44px;height:44px;border:1px solid rgba(18,54,209,.24);border-radius:50%;display:grid;place-items:center;margin:0 auto 13px;color:var(--elsto-blue);font-weight:800;background:rgba(18,54,209,.035)}
.why-item strong{display:block;font-size:.91rem;line-height:1.35}

.projects-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.project-card{border:1px solid var(--elsto-line);border-radius:10px;overflow:hidden;background:#fff}
.project-card img{width:100%;height:185px;object-fit:cover}
.project-body{padding:18px}
.project-body h3{font-size:1.08rem;margin:0 0 7px;line-height:1.25}
.project-meta{font-size:.84rem;color:var(--elsto-muted)}
.project-excerpt{font-size:.92rem;color:var(--elsto-muted);margin:10px 0 0}
.section-head-row{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:28px}
.section-head-row .section-title{margin:0}

.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.about-copy{font-size:1.08rem;color:var(--elsto-muted)}
.about-panel{background:linear-gradient(145deg,#11116B,var(--elsto-navy-deep));color:#fff;border-radius:16px;padding:34px;border-top:3px solid var(--elsto-blue)}
.about-panel strong{font-size:3.2rem;display:block;line-height:1;margin-bottom:8px}
.about-panel span{color:#cee0ef}

.cta{background:linear-gradient(110deg,var(--elsto-navy-deep),var(--elsto-navy) 58%,#1717A0);color:#fff;padding:54px 0;border-top:4px solid var(--elsto-blue)}
.cta-inner{display:grid;grid-template-columns:1.2fr 1fr auto;gap:36px;align-items:center}
.cta h2{font-size:2rem;margin:0 0 8px}
.cta p{margin:0;color:#cfe0ee}
.contact-mini{display:grid;gap:5px;font-size:.94rem}
.contact-mini a:hover{text-decoration:underline}

.site-footer{background:var(--elsto-navy-deep);color:rgba(255,255,255,.72);font-size:.82rem}
.footer-main{display:flex;justify-content:space-between;align-items:center;gap:40px;padding:34px 0 24px}
.footer-brand{display:flex;flex-direction:column;gap:8px}
.footer-brand-logo{display:block;width:190px;height:auto}
.footer-brand span{text-transform:uppercase;letter-spacing:.10em;font-size:.63rem;color:rgba(255,255,255,.58)}
.footer-inner{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;padding:19px 0 24px;border-top:1px solid rgba(255,255,255,.10)}

.content-shell{padding:70px 0}
.content-shell article{max-width:820px}
.entry-title{font-size:clamp(2.2rem,4vw,3.8rem);line-height:1.05;letter-spacing:-.04em}
.entry-content{font-size:1.05rem}
.entry-content h2,.entry-content h3{line-height:1.2}
.archive-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.archive-card{border:1px solid var(--elsto-line);border-radius:12px;overflow:hidden}
.archive-card img{height:220px;width:100%;object-fit:cover}
.archive-card-body{padding:22px}
.archive-card h2{font-size:1.25rem;margin:0 0 10px}
.meta-box{display:flex;gap:20px;flex-wrap:wrap;color:var(--elsto-muted);font-size:.9rem;margin:18px 0 26px}

@media(max-width:980px){
  .primary-nav{display:none;position:absolute;left:0;right:0;top:138px;background:#fff;border-top:1px solid var(--elsto-line);padding:22px 20px;flex-direction:column;align-items:flex-start}
  .primary-nav.is-open{display:flex}
  .primary-nav ul{flex-direction:column;align-items:flex-start;gap:18px}
  .menu-toggle{display:block;margin-left:auto}
  .header-cta{display:none}
  .cards{grid-template-columns:repeat(2,1fr)}
  .sector-grid{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:repeat(3,1fr)}
  .projects-grid{grid-template-columns:repeat(2,1fr)}
  .process{grid-template-columns:repeat(4,1fr);row-gap:30px}.process::before{display:none}
  .about-grid{grid-template-columns:1fr;gap:35px}
  .cta-inner{grid-template-columns:1fr 1fr}.cta-inner .btn{grid-column:1/-1;justify-self:start}
  .archive-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .container{width:min(calc(100% - 28px),var(--elsto-max))}
  .section{padding:58px 0}
  .hero{min-height:590px}.hero-inner{padding:72px 0}.hero h1{font-size:3rem}
  .cards,.projects-grid,.archive-grid{grid-template-columns:1fr}
  .sector-grid{grid-template-columns:1fr 1fr}.sector-card{min-height:165px}
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .process{grid-template-columns:repeat(2,1fr)}
  .section-head-row{align-items:start;flex-direction:column}
  .cta-inner{grid-template-columns:1fr}
}

/* ELSTO brand integration v0.3 */
.primary-nav a{position:relative}
.primary-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-8px;height:2px;background:var(--elsto-blue);transition:right .2s ease}
.primary-nav a:hover::after{right:0}
.card{border-top:2px solid transparent}
.card:hover{border-top-color:var(--elsto-blue)}
.text-link{color:var(--elsto-blue)}
.sector-card::after{background:linear-gradient(180deg,transparent 32%,rgba(6,31,53,.88))}
.project-card{transition:.2s ease}
.project-card:hover{transform:translateY(-2px);box-shadow:var(--elsto-shadow)}
::selection{background:rgba(18,54,209,.16)}
:focus-visible{outline:3px solid rgba(18,54,209,.26);outline-offset:3px}

@media(max-width:980px){
  .elsto-brand-logo{width:205px;max-height:56px}
}
@media(max-width:640px){
  .footer-main{align-items:flex-start;flex-direction:column}
  }


/* ELSTO v0.4 — unified blue identity */
.header-inner{min-height:138px}
.site-brand{margin-right:28px}
.brand-link:hover{opacity:.90}
.primary-nav a::after{background:var(--elsto-blue)}
.text-link{color:var(--elsto-blue)}
::selection{background:rgba(18,54,209,.14)}


@media (max-width:1180px){
  .site-brand{min-width:270px;margin-right:14px}
  }
@media (max-width:980px){
  .site-brand{min-width:auto;margin-right:auto}
  }
@media (max-width:520px){
  }

/* ELSTO v0.4.4 — dane firmy */
@media(max-width:640px){}

/* ELSTO v0.4.5 — dynamiczne branże */
.demo-photo-credits{margin:14px 0 0;font-size:.68rem;line-height:1.45;color:var(--elsto-muted);opacity:.82}
@media(max-width:480px){.sector-grid{grid-template-columns:1fr}.sector-card{min-height:205px}}


/* ELSTO v0.4.6 — exact header wordmark + repaired footer logo */
.footer-brand-logo{display:block;width:190px;height:auto}
.footer-brand > span{text-transform:uppercase;letter-spacing:.10em;font-size:.63rem;color:rgba(255,255,255,.58)}
@media(max-width:1180px){
  }
@media(max-width:980px){
  }
@media(max-width:520px){
  }


/* ELSTO v0.4.7 — exact proportional header logo and stronger section labels */
.site-brand{display:flex;align-items:center;min-width:330px;flex:0 0 auto;margin-right:26px}
.brand-link{display:flex;align-items:center;line-height:0}

.header-inner{height:138px;min-height:138px}

.section .eyebrow{
  font-size:1.05rem;
  line-height:1.25;
  font-weight:800;
  letter-spacing:.095em;
}
.hero .eyebrow{
  font-size:.86rem;
  letter-spacing:.11em;
}

@media(max-width:1180px){
  .site-brand{min-width:290px;margin-right:16px}
  
  .header-inner{height:124px;min-height:124px}
}
@media(max-width:980px){
  .site-brand{min-width:auto;margin-right:auto}
  
  .header-inner{height:108px;min-height:108px}
  .primary-nav{top:108px}
}
@media(max-width:520px){
  
  .header-inner{height:94px;min-height:94px}
  .primary-nav{top:94px}
  .section .eyebrow{font-size:.94rem}
}






/* ELSTO v0.5.1 — wordmark traced directly from the original logo */
.site-brand{
  display:flex;
  align-items:center;
  min-width:300px;
  flex:0 0 auto;
  margin-right:28px;
}
.brand-link{
  display:flex;
  align-items:center;
  gap:10px;
  line-height:0;
}
.elsto-header-symbol{
  display:block;
  width:96px;
  height:96px;
  flex:0 0 96px;
}
.elsto-header-wordmark{
  display:block;
  width:154px;
  height:auto;
  flex:0 0 154px;
}
.header-inner{
  height:132px;
  min-height:132px;
}

@media(max-width:1180px){
  .site-brand{min-width:270px;margin-right:18px}
  .elsto-header-symbol{width:86px;height:86px;flex-basis:86px}
  .elsto-header-wordmark{width:138px;flex-basis:138px}
  .header-inner{height:120px;min-height:120px}
}
@media(max-width:980px){
  .site-brand{min-width:auto;margin-right:auto}
  .elsto-header-symbol{width:68px;height:68px;flex-basis:68px}
  .elsto-header-wordmark{width:109px;flex-basis:109px}
  .header-inner{height:104px;min-height:104px}
  .primary-nav{top:104px}
}
@media(max-width:520px){
  .brand-link{gap:8px}
  .elsto-header-symbol{width:56px;height:56px;flex-basis:56px}
  .elsto-header-wordmark{width:90px;flex-basis:90px}
  .header-inner{height:92px;min-height:92px}
  .primary-nav{top:92px}
}

/* ELSTO v0.5.2 — CMS-controlled header branding */
.elsto-header-symbol{object-fit:contain}
.elsto-header-wordmark{object-fit:contain;object-position:left center}
.footer-brand-logo{object-fit:contain;object-position:left center}


/* ELSTO v0.5.5 — clean footer: contact appears only once */
.footer-main{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  padding:34px 0 24px;
}
.footer-meta{
  display:flex;
  flex-wrap:wrap;
  gap:22px;
  justify-content:flex-end;
  align-items:center;
  color:rgba(255,255,255,.62);
  font-size:.76rem;
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  gap:30px;
  flex-wrap:wrap;
  padding:19px 0 24px;
  border-top:1px solid rgba(255,255,255,.10);
}
@media(max-width:760px){
  .footer-main{
    align-items:flex-start;
    flex-direction:column;
  }
  .footer-meta{
    justify-content:flex-start;
    gap:10px 18px;
  }
}


/* ELSTO v0.6.1 — uporządkowana stopka */
.site-footer{background:var(--elsto-navy-deep)}
.footer-main{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:48px;
  padding:32px 0 24px;
}
.footer-brand{display:flex;flex-direction:column;gap:8px;min-width:220px}
.footer-brand-logo{display:block;width:185px;height:auto;object-fit:contain;object-position:left center}
.footer-brand>span{text-transform:uppercase;letter-spacing:.10em;font-size:.63rem;color:rgba(255,255,255,.56)}
.footer-meta{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:flex-end;align-items:center;color:rgba(255,255,255,.72);font-size:.78rem}
.footer-meta span{white-space:nowrap}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;padding:18px 0 24px;border-top:1px solid rgba(255,255,255,.10);color:rgba(255,255,255,.52);font-size:.73rem}
@media(max-width:760px){
 .footer-main{align-items:flex-start;flex-direction:column;gap:22px}
 .footer-meta{justify-content:flex-start}
 .footer-inner{align-items:flex-start;flex-direction:column;gap:8px}
}

/* ELSTO v0.6.2 — ikonowe kafle branż */
.sector-card{box-shadow:0 8px 24px rgba(7,22,45,.08);transition:transform .18s ease,box-shadow .18s ease}
.sector-card:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(7,22,45,.13)}
@media(max-width:640px){
  .sector-card-icon{width:38px;height:38px;flex-basis:38px}
  .sector-card-icon svg{width:26px;height:26px}
}


/* ==========================================================
   ELSTO v0.6.3 — responsive / mobile / cross-browser pass
   Cel: zachować desktop, uporządkować telefony i tablety.
   ========================================================== */

/* Projekt ma własną jasną identyfikację. Nie pozwalamy
   przeglądarce automatycznie odwracać kolorów i SVG. */
:root{color-scheme:only light}
html{
  background:#fff;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  max-width:100%;
  overflow-x:hidden;
}
body{
  background:#fff;
  max-width:100%;
  overflow-x:hidden;
}
.site-header,.site-header *,.hero,.section,.cta,.site-footer{color-scheme:only light}
.elsto-header-symbol,.elsto-header-wordmark,.footer-brand-logo{
  filter:none!important;
  mix-blend-mode:normal;
}

/* Elastyczne media i długie treści */
img,svg{max-width:100%}
.project-body h3,.sector-card h3,.why-item strong,.contact-mini,.footer-meta{
  overflow-wrap:anywhere;
}

/* TABLET / mały laptop */
@media(max-width:980px){
  .header-inner{height:92px;min-height:92px}
  .primary-nav{top:92px}
  .elsto-header-symbol{width:58px;height:58px;flex-basis:58px}
  .elsto-header-wordmark{width:118px;flex-basis:118px}
  .brand-link{gap:8px}
  .menu-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    padding:0;
    font-size:1.55rem;
    color:var(--elsto-ink);
    cursor:pointer;
  }
  .section{padding:64px 0}
  .hero{min-height:560px}
  .hero-inner{padding:72px 0}
  .hero h1{font-size:clamp(2.7rem,7vw,4.2rem)}
  .cards{gap:16px}
  .card{min-height:0}
  .process{margin-top:34px;row-gap:28px}
  .projects-grid{gap:16px}
}

/* TELEFONY — główny breakpoint */
@media(max-width:640px){
  .container{
    width:min(calc(100% - 32px),var(--elsto-max));
  }

  /* Nagłówek: mniej pionowej przestrzeni i bardziej zwarta marka */
  .site-header{background:#fff}
  .header-inner{height:76px;min-height:76px;gap:12px}
  .site-brand{min-width:0;margin-right:auto}
  .brand-link{gap:6px;max-width:205px}
  .elsto-header-symbol{width:46px;height:46px;flex:0 0 46px}
  .elsto-header-wordmark{width:104px;max-height:34px;flex:0 1 104px}
  .menu-toggle{width:44px;height:44px;font-size:1.5rem;margin-left:auto}
  .primary-nav{
    top:76px;
    padding:20px 16px 24px;
    box-shadow:0 14px 24px rgba(5,5,54,.10);
  }
  .primary-nav a{font-size:1rem}

  /* Hero — czytelne, ale nie dominuje całego pierwszego ekranu */
  .hero{
    min-height:0;
    background-position:62% center;
  }
  .hero::before{
    background:linear-gradient(90deg,rgba(5,5,54,.94) 0%,rgba(10,10,90,.79) 58%,rgba(18,54,209,.20) 100%);
  }
  .hero-inner{padding:64px 0 62px;max-width:100%}
  .hero .eyebrow{font-size:.72rem;line-height:1.35;letter-spacing:.10em;margin-bottom:12px}
  .hero h1{
    font-size:clamp(2.15rem,10.4vw,2.65rem);
    line-height:1.00;
    letter-spacing:-.045em;
    margin-bottom:20px;
  }
  .hero p{
    font-size:1.02rem;
    line-height:1.55;
    margin-bottom:26px;
  }
  .hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .hero-actions .btn{padding:12px 10px;font-size:.93rem;min-height:46px}

  /* Wspólna typografia i odstępy sekcji */
  .section{padding:48px 0}
  .section-title{
    font-size:clamp(1.85rem,8.6vw,2.25rem);
    line-height:1.08;
    letter-spacing:-.035em;
    margin-bottom:13px;
  }
  .section-lead{font-size:.98rem;line-height:1.55;margin-bottom:28px}
  .section .eyebrow{font-size:.78rem;margin-bottom:9px}

  /* Usługi */
  .cards{grid-template-columns:1fr;gap:14px}
  .card{padding:22px;min-height:0;border-radius:10px}
  .card-number{width:42px;height:42px;margin-bottom:18px}
  .card h3{font-size:1.12rem}
  .card p{font-size:.93rem;margin-bottom:15px}

  /* Proces inwestycyjny — zwarty diagram 2 x N */
  .process-wrap .section-lead{margin-inline:auto}
  .process{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px 18px;
    margin-top:28px;
  }
  .process::before{display:none}
  .process-step{padding:0 4px}
  .process-dot{
    width:44px;
    height:44px;
    margin:0 auto 10px;
    border-width:2px;
    font-size:.72rem;
    background:#fff;
    color:var(--elsto-blue);
    box-shadow:0 0 0 3px rgba(18,54,209,.07);
  }
  .process-label{
    font-size:.70rem;
    line-height:1.25;
    letter-spacing:.025em;
  }

  /* Branże — jeden duży, czytelny kafel */
  .sector-grid{grid-template-columns:1fr;gap:14px}
  .sector-card{min-height:0;aspect-ratio:16/9;border-radius:10px}
  .sector-card-caption{left:12px;right:12px;bottom:11px;gap:9px}
  .sector-card-icon{width:36px;height:36px;flex-basis:36px;border-radius:8px}
  .sector-card-icon svg{width:24px;height:24px}
  .sector-card h3{font-size:.82rem;line-height:1.15}

  /* Dlaczego ELSTO — dwa zwarte słupki */
  .why-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:28px 14px;
    margin-top:24px;
  }
  .why-item{padding:0 4px}
  .why-icon{width:42px;height:42px;margin-bottom:10px;font-size:.85rem}
  .why-item strong{font-size:.82rem;line-height:1.30}

  /* Realizacje */
  .section-head-row{gap:12px;margin-bottom:22px}
  .section-head-row .text-link{font-size:.90rem}
  .projects-grid{grid-template-columns:1fr;gap:16px}
  .project-card img{height:auto;aspect-ratio:16/9;object-fit:cover}
  .project-body{padding:17px}
  .project-body h3{font-size:1.05rem;line-height:1.25}
  .project-excerpt{font-size:.88rem}

  /* O firmie */
  .about-grid{gap:24px}
  .about-copy{font-size:.98rem}
  .about-panel{padding:24px;border-radius:12px}
  .about-panel strong{font-size:2.6rem}

  /* CTA / kontakt */
  .cta{padding:42px 0;border-top-width:3px}
  .cta-inner{grid-template-columns:1fr;gap:24px}
  .cta h2{font-size:1.85rem;line-height:1.08}
  .cta p{font-size:.98rem;line-height:1.5}
  .contact-mini{gap:8px;font-size:.94rem;line-height:1.45}
  .cta-inner .btn{justify-self:start;min-height:46px}

  /* Stopka */
  .footer-main{padding:28px 0 20px;gap:20px}
  .footer-brand{min-width:0;width:100%}
  .footer-brand-logo{width:165px;max-width:70vw}
  .footer-brand>span{font-size:.58rem;line-height:1.45}
  .footer-meta{gap:8px 18px;font-size:.72rem}
  .footer-inner{padding:16px 0 22px;font-size:.69rem;line-height:1.5}

  /* Podstrony */
  .content-shell{padding:48px 0}
  .entry-title{font-size:clamp(2rem,9.5vw,2.65rem)}
  .entry-content{font-size:1rem}
  .archive-card img{height:auto;aspect-ratio:16/9;object-fit:cover}
}

/* Bardzo wąskie telefony */
@media(max-width:390px){
  .container{width:min(calc(100% - 26px),var(--elsto-max))}
  .header-inner{height:72px;min-height:72px}
  .primary-nav{top:72px}
  .elsto-header-symbol{width:43px;height:43px;flex-basis:43px}
  .elsto-header-wordmark{width:96px;flex-basis:96px;max-height:31px}
  .hero-inner{padding:56px 0 54px}
  .hero h1{font-size:2.12rem}
  .hero p{font-size:.98rem}
  .hero-actions .btn{font-size:.88rem;padding-inline:8px}
  .section{padding:44px 0}
  .section-title{font-size:1.82rem}
  .process{gap:22px 12px}
  .why-grid{gap:26px 10px}
  .why-item strong{font-size:.78rem}
  .sector-card h3{font-size:.78rem}
}

/* Telefony w poziomie — nie rozciągamy Hero bez końca */
@media(max-width:900px) and (orientation:landscape) and (max-height:520px){
  .header-inner{height:68px;min-height:68px}
  .primary-nav{top:68px}
  .elsto-header-symbol{width:40px;height:40px;flex-basis:40px}
  .elsto-header-wordmark{width:92px;flex-basis:92px}
  .hero-inner{padding:42px 0}
  .hero h1{font-size:2.35rem;max-width:650px}
  .hero p{font-size:.96rem;max-width:620px}
  .section{padding:42px 0}
}

/* Szanuj ustawienie ograniczenia animacji */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}

/* ==========================================================
   ELSTO v0.6.4 — deliberate DARK identity
   Ciemna wersja zaprojektowana ręcznie; nie jest to automatyczne
   odwrócenie kolorów przez przeglądarkę.
   ========================================================== */
:root{
  color-scheme:dark;
  --elsto-navy:#0B1472;
  --elsto-navy-deep:#060925;
  --elsto-blue:#3157F6;
  --elsto-blue-hover:#4569FF;
  --elsto-ink:#F4F6FC;
  --elsto-muted:#AEB5C5;
  --elsto-line:#303647;
  --elsto-soft:#181B24;
  --elsto-white:#FFFFFF;
  --elsto-surface:#111318;
  --elsto-card:#181A20;
  --elsto-card-2:#1B1E27;
  --elsto-shadow:0 18px 48px rgba(0,0,0,.28);
}
html{background:var(--elsto-surface);color-scheme:dark}
body{background:var(--elsto-surface);color:var(--elsto-ink)}
.site-header,.site-header *,.hero,.section,.cta,.site-footer{color-scheme:dark}

/* Nagłówek */
.site-header{
  background:rgba(16,18,23,.97);
  border-bottom:1px solid rgba(78,102,205,.18);
  box-shadow:0 1px 0 rgba(255,255,255,.025);
}
.primary-nav a{color:#EDF1FA}
.primary-nav a:hover{color:#8FA9FF}
.menu-toggle{color:#F2F5FC}
.header-cta{box-shadow:0 8px 22px rgba(49,87,246,.22)}
.elsto-header-symbol,.elsto-header-wordmark,.footer-brand-logo{
  filter:none!important;
  mix-blend-mode:normal;
}
/* Na ciemnym tle firmowy niebieski pozostaje żywy, bez szarej płytki. */
.elsto-header-wordmark{filter:brightness(1.32) saturate(.92)!important}

/* Główne powierzchnie */
.section{background:var(--elsto-surface)}
.section--soft{background:var(--elsto-soft)}
.section-title,.entry-title,.card h3,.project-body h3,.archive-card h2,.why-item strong{color:var(--elsto-ink)}
.section-lead,.card p,.project-meta,.project-excerpt,.about-copy,.meta-box,.demo-photo-credits{color:var(--elsto-muted)}
.eyebrow{color:#7EA1FF}
.text-link{color:#9EC0FF}

/* Hero */
.hero::before{
  background:linear-gradient(90deg,rgba(3,6,28,.96) 0%,rgba(6,11,55,.86) 45%,rgba(10,22,80,.31) 78%,rgba(8,13,35,.12) 100%);
}
.hero .eyebrow{color:#B8C8FF}
.hero p{color:rgba(244,247,255,.88)}
.btn--outline{border-color:rgba(255,255,255,.42);background:rgba(7,10,20,.34)}
.btn--outline:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.68)}

/* Usługi */
.card{
  background:linear-gradient(180deg,var(--elsto-card-2),var(--elsto-card));
  border-color:var(--elsto-line);
  box-shadow:0 1px 0 rgba(255,255,255,.025);
}
.card:hover{border-top-color:#476DFF;box-shadow:var(--elsto-shadow)}
.card-number{
  color:#A9C3FF;
  border-color:rgba(75,108,255,.38);
  background:rgba(49,87,246,.08);
}

/* Proces inwestycyjny — desktopowa linia techniczna */
.process::before{background:linear-gradient(90deg,rgba(49,87,246,.20),rgba(98,128,255,.72),rgba(49,87,246,.20))}
.process-dot{
  background:#151821;
  border-color:#4168FF;
  color:#B4CAFF;
  box-shadow:0 0 0 5px var(--elsto-surface),0 0 24px rgba(49,87,246,.13);
}
.process-label{color:#F0F3FA}
.section--soft .process-dot{box-shadow:0 0 0 5px var(--elsto-soft),0 0 24px rgba(49,87,246,.13)}

/* Branże */
.sector-card{
  background:#10141D;
  box-shadow:0 10px 28px rgba(0,0,0,.24);
  border:1px solid rgba(118,139,206,.16);
}
.sector-card:hover{box-shadow:0 16px 38px rgba(0,0,0,.36)}
.sector-card::after{background:linear-gradient(180deg,rgba(5,7,12,.02) 28%,rgba(4,8,18,.91) 100%)}
.sector-card-icon{
  background:rgba(15,18,27,.90);
  color:#6F93FF;
  border:1px solid rgba(111,147,255,.24);
  box-shadow:0 6px 20px rgba(0,0,0,.30);
}

/* Dlaczego ELSTO */
.why-icon{
  border-color:rgba(75,108,255,.32);
  color:#A9C3FF;
  background:rgba(49,87,246,.07);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.018);
}

/* Realizacje */
.project-card,.archive-card{
  background:#181A20;
  border-color:#303647;
  box-shadow:0 8px 26px rgba(0,0,0,.12);
}
.project-card:hover{box-shadow:var(--elsto-shadow);border-color:#3A435B}
.project-body{border-top:1px solid rgba(255,255,255,.025)}

/* O ELSTO */
.about-panel{
  background:linear-gradient(145deg,#10153F,#070A29 72%);
  border:1px solid rgba(93,118,255,.22);
  border-top:3px solid #4168FF;
  box-shadow:0 16px 42px rgba(0,0,0,.20);
}
.about-panel span{color:#BCC8E7}

/* CTA i stopka */
.cta{
  background:linear-gradient(110deg,#060925,#0A1266 56%,#172BB9);
  border-top-color:#3157F6;
}
.cta p{color:#D2D9E8}
.site-footer{background:#05071A}
.footer-main,.footer-inner{color:rgba(238,243,255,.68)}
.footer-inner{border-top-color:rgba(255,255,255,.09)}

/* Podstrony / treść */
.content-shell{background:var(--elsto-surface)}
.entry-content{color:#DDE2ED}
.entry-content a{color:#9EC0FF}
.archive-card-body{background:#181A20}

::selection{background:rgba(70,105,255,.38);color:#fff}
:focus-visible{outline-color:rgba(111,147,255,.75)}

/* Tablet: rozwijane menu jest częścią ciemnej identyfikacji */
@media(max-width:980px){
  .primary-nav{
    background:#12151C;
    border-top-color:#2B3141;
    box-shadow:0 16px 30px rgba(0,0,0,.34);
  }
}

/* Telefon: proces jako pionowa oś zamiast luźnych kółek 2xN. */
@media(max-width:640px){
  .site-header{background:rgba(16,18,23,.985)}

  .process{
    display:grid;
    grid-template-columns:1fr;
    gap:0;
    max-width:430px;
    margin:28px auto 0;
    text-align:left;
    position:relative;
  }
  .process::before{
    display:block;
    content:"";
    position:absolute;
    left:21px;
    top:22px;
    bottom:22px;
    width:2px;
    height:auto;
    right:auto;
    background:linear-gradient(180deg,#3157F6 0%,rgba(49,87,246,.60) 82%,rgba(49,87,246,.12) 100%);
  }
  .process-step{
    display:grid;
    grid-template-columns:44px minmax(0,1fr);
    align-items:center;
    gap:16px;
    padding:0 0 18px;
    min-height:62px;
    position:relative;
  }
  .process-step:last-child{padding-bottom:0}
  .process-dot{
    width:44px;
    height:44px;
    margin:0;
    position:relative;
    z-index:2;
    background:#151821;
    border-color:#4168FF;
    box-shadow:0 0 0 4px var(--elsto-surface),0 0 18px rgba(49,87,246,.15);
  }
  .process-label{
    font-size:.82rem;
    line-height:1.2;
    letter-spacing:.045em;
    color:#F0F3FA;
  }

  .section--soft .process-dot{box-shadow:0 0 0 4px var(--elsto-soft),0 0 18px rgba(49,87,246,.15)}

  .sector-card{border-color:rgba(120,139,205,.18)}
  .project-card{box-shadow:0 8px 24px rgba(0,0,0,.18)}
}

/* Mały telefon: logo nie konkuruje z menu. */
@media(max-width:390px){
  .brand-link{max-width:178px}
  .elsto-header-symbol{width:42px;height:42px;flex-basis:42px}
  .elsto-header-wordmark{width:92px;flex-basis:92px}
}


/* ==========================================================
   ELSTO v0.6.5 — DARK desktop balance
   Ciągłe tło, szerszy desktop, spokojniejsze zdjęcia i
   niebieskie ramki/glow zamiast jasnych "wysp".
   Mobile z v0.6.4 pozostaje bez przebudowy.
   ========================================================== */

/* Jedno tło dla całej strony — sekcje nie tworzą już twardych pasów. */
html{
  background:#0B0E14;
}
body{
  background:
    radial-gradient(ellipse 1050px 620px at 50% -140px,rgba(49,87,246,.13),transparent 68%),
    radial-gradient(ellipse 900px 700px at 8% 48%,rgba(26,47,122,.08),transparent 72%),
    radial-gradient(ellipse 820px 620px at 92% 72%,rgba(42,62,145,.07),transparent 72%),
    linear-gradient(180deg,#0F1219 0%,#0D1016 42%,#0A0D13 100%);
  background-attachment:fixed;
}
.section{
  background:transparent;
}
.section--soft{
  background:linear-gradient(90deg,
    rgba(24,27,36,0) 0%,
    rgba(24,27,36,.34) 12%,
    rgba(24,27,36,.46) 50%,
    rgba(24,27,36,.34) 88%,
    rgba(24,27,36,0) 100%);
  border-top:1px solid rgba(111,147,255,.045);
  border-bottom:1px solid rgba(111,147,255,.035);
}

/* Karty — pełna ramka zamiast tylko górnej krawędzi. */
.card,
.project-card,
.archive-card,
.sector-card,
.why-item{
  transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease,background-color .22s ease;
}
.card{
  border:1px solid rgba(121,136,180,.24);
}
.card:hover{
  transform:translateY(-4px);
  border-color:#4168FF;
  box-shadow:0 0 0 1px rgba(65,104,255,.18),0 18px 44px rgba(0,0,0,.30),0 0 28px rgba(49,87,246,.10);
}

/* Zdjęcia są częścią dark designu, a nie świecącym prostokątem. */
.sector-card img,
.project-card img,
.archive-card img{
  filter:brightness(.76) saturate(.88) contrast(1.04);
  transition:filter .28s ease,transform .35s ease;
}
.sector-card:hover img,
.project-card:hover img,
.archive-card:hover img{
  filter:brightness(.92) saturate(.98) contrast(1.03);
}
.sector-card:hover img{
  transform:scale(1.018);
}
.sector-card{
  border:1px solid rgba(121,136,180,.25);
  box-shadow:0 12px 30px rgba(0,0,0,.22);
}
.sector-card:hover{
  transform:translateY(-3px);
  border-color:#4168FF;
  box-shadow:0 0 0 1px rgba(65,104,255,.16),0 18px 42px rgba(0,0,0,.34),0 0 30px rgba(49,87,246,.11);
}
.project-card,.archive-card{
  border-color:rgba(121,136,180,.24);
}
.project-card:hover,.archive-card:hover{
  transform:translateY(-3px);
  border-color:#4168FF;
  box-shadow:0 0 0 1px rgba(65,104,255,.15),0 18px 42px rgba(0,0,0,.32),0 0 28px rgba(49,87,246,.09);
}

/* Dlaczego ELSTO — na desktopie elementy dostają ramki, dzięki czemu
   sekcja nie rozpływa się w pustym tle. */
.why-item{
  border:1px solid rgba(121,136,180,.18);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(27,30,39,.70),rgba(20,23,30,.62));
}
.why-item:hover{
  transform:translateY(-3px);
  border-color:#4168FF;
  box-shadow:0 0 0 1px rgba(65,104,255,.13),0 15px 36px rgba(0,0,0,.24),0 0 26px rgba(49,87,246,.08);
}

/* Proces — większy i osadzony we własnej technicznej ramie. */
.process-wrap .process{
  border:1px solid rgba(121,136,180,.20);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(24,27,36,.70),rgba(15,18,25,.56));
  padding:34px 28px 30px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018),0 14px 36px rgba(0,0,0,.13);
}
.process-step{
  transition:transform .2s ease;
}
.process-step:hover{
  transform:translateY(-2px);
}
.process-step:hover .process-dot{
  border-color:#7894FF;
  box-shadow:0 0 0 5px #131720,0 0 24px rgba(65,104,255,.28);
}
.process-step:hover .process-label{
  color:#AFC2FF;
}

/* O firmie — ten sam język ramki. */
.about-panel{
  transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease;
}
.about-panel:hover{
  transform:translateY(-2px);
  border-color:rgba(103,131,255,.55);
  border-top-color:#5578FF;
  box-shadow:0 0 0 1px rgba(65,104,255,.12),0 20px 46px rgba(0,0,0,.25),0 0 28px rgba(49,87,246,.08);
}

/* Duży desktop / 1440p / 4K — więcej wykorzystanej szerokości. */
@media(min-width:1181px){
  :root{--elsto-max:1400px}
  .cards{gap:24px}
  .card{padding:30px;min-height:258px}
  .sector-grid{gap:22px}
  .sector-card{min-height:255px}
  .projects-grid{gap:24px}
  .project-card img{height:215px}
  .why-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
  .why-item{padding:26px 22px;min-height:145px;display:flex;flex-direction:column;align-items:center;justify-content:center}
  .why-icon{width:48px;height:48px;margin-bottom:15px}
  .why-item strong{font-size:.98rem;max-width:230px}
  .process-wrap .process{margin-top:40px}
  .process-dot{width:54px;height:54px}
  .process::before{top:61px;left:6.5%;right:6.5%}
  .process-label{font-size:.80rem}
}

@media(min-width:1600px){
  :root{--elsto-max:1480px}
  .section{padding:88px 0}
  .header-inner{height:124px}
  .site-brand{min-width:360px}
  .cards{gap:26px}
  .sector-card{min-height:270px}
  .project-card img{height:225px}
}

/* Mobile: zachowujemy sprawdzony układ v0.6.4 i unikamy fixed background
   na przeglądarkach mobilnych, gdzie może powodować skoki przy scrollu. */
@media(max-width:980px){
  body{background-attachment:scroll}
}
@media(max-width:640px){
  .section--soft{
    background:rgba(24,27,36,.34);
    border-top-color:rgba(111,147,255,.04);
    border-bottom-color:rgba(111,147,255,.03);
  }
  .why-item{
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }
  .why-item:hover{transform:none;border-color:transparent;box-shadow:none}
  .process-wrap .process{
    border:0;
    border-radius:0;
    background:transparent;
    padding:0;
    box-shadow:none;
  }
  .process-step:hover{transform:none}
  .process-step:hover .process-dot{
    border-color:#4168FF;
    box-shadow:0 0 0 4px var(--elsto-surface),0 0 18px rgba(49,87,246,.15);
  }
  .process-step:hover .process-label{color:#F0F3FA}
  .sector-card img,.project-card img,.archive-card img{
    filter:brightness(.84) saturate(.92) contrast(1.03);
  }
}


/* ==========================================================
   ELSTO v0.6.6 — logo + stronger technical frames
   ========================================================== */

/* Logo: transparent artwork should remain untouched on dark background. */
.brand-link,
.elsto-header-symbol,
.elsto-header-wordmark{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.elsto-header-symbol,
.elsto-header-wordmark{
  filter:none!important;
}

/* A little more compact and coherent desktop branding. */
@media(min-width:981px){
  .brand-link{gap:12px}
  .elsto-header-symbol{width:82px;height:82px;flex:0 0 82px}
  .elsto-header-wordmark{width:148px;max-height:48px;flex:0 0 148px}
  .site-brand{min-width:330px}
}

/* Slightly stronger frames — visible, but still technical rather than decorative. */
.card,
.sector-card,
.project-card,
.archive-card,
.why-item,
.process-wrap .process{
  border-width:1.5px;
}

.card:hover,
.sector-card:hover,
.project-card:hover,
.archive-card:hover,
.why-item:hover{
  border-width:1.5px;
  box-shadow:
    0 0 0 1px rgba(65,104,255,.24),
    0 18px 44px rgba(0,0,0,.30),
    0 0 34px rgba(49,87,246,.13);
}

/* The process line and nodes gain the same visual weight as card frames. */
.process::before{height:1.5px}
.process-dot{border-width:2.5px}
.card-number,.why-icon{border-width:1.5px}

/* About panel joins the same framing language. */
.about-panel{
  border-left:1.5px solid rgba(121,136,180,.22);
  border-right:1.5px solid rgba(121,136,180,.22);
  border-bottom:1.5px solid rgba(121,136,180,.22);
}

/* On phones keep the lighter mobile layout from v0.6.4/0.6.5. */
@media(max-width:640px){
  .why-item,
  .process-wrap .process{border-width:0}
  .process::before{width:2px;height:auto}
  .process-dot{border-width:2px}
  .card,.sector-card,.project-card,.archive-card{border-width:1.25px}
}


/* ==========================================================
   ELSTO v0.6.7 — SOFT DARK + calmer contrast
   Jaśniejszy grafitowo-granatowy dark mode, mniej rażąca biel,
   nadal zachowany techniczny charakter i niebieskie ramki.
   ========================================================== */
:root{
  --elsto-ink:#D6DDE7;
  --elsto-muted:#A4AFBF;
  --elsto-line:#43506A;
  --elsto-soft:#1B222E;
  --elsto-surface:#151B25;
  --elsto-card:#1C2330;
  --elsto-card-2:#222A38;
  --elsto-shadow:0 18px 46px rgba(3,8,18,.25);
}

html{background:#121821}
body{
  color:var(--elsto-ink);
  background:
    radial-gradient(ellipse 1100px 650px at 50% -180px,rgba(49,87,246,.12),transparent 69%),
    radial-gradient(ellipse 900px 720px at 7% 46%,rgba(52,78,160,.09),transparent 73%),
    radial-gradient(ellipse 900px 680px at 94% 76%,rgba(50,76,160,.07),transparent 74%),
    linear-gradient(180deg,#18202B 0%,#161D27 44%,#131922 100%);
}

.site-header{
  background:rgba(17,23,32,.96);
  border-bottom-color:rgba(111,147,255,.22);
}
.primary-nav a{color:#CFD7E2}
.primary-nav a:hover{color:#9DB4FF}
.menu-toggle{color:#D3DBE6}

.section--soft{
  background:linear-gradient(90deg,
    rgba(31,39,53,.06) 0%,
    rgba(31,39,53,.43) 12%,
    rgba(31,39,53,.54) 50%,
    rgba(31,39,53,.43) 88%,
    rgba(31,39,53,.06) 100%);
  border-top-color:rgba(126,151,225,.075);
  border-bottom-color:rgba(126,151,225,.06);
}

.section-title,
.entry-title,
.card h3,
.project-body h3,
.archive-card h2,
.why-item strong{
  color:#DCE2EA;
  font-weight:700;
}
.section-lead,
.card p,
.project-meta,
.project-excerpt,
.about-copy,
.meta-box,
.demo-photo-credits{
  color:#A6B0BF;
}
.eyebrow{color:#88A4FF}
.text-link{color:#9DB7FF}

/* Hero zostaje wyraźny, ale bez czystej bieli. */
.hero h1{color:#EEF1F6}
.hero .eyebrow{color:#AEBFFF}
.hero p{color:rgba(224,231,241,.88)}

.card{
  background:linear-gradient(180deg,#222A38,#1B222E);
  border-color:rgba(139,157,204,.34);
}
.card-number{
  color:#B4C7FF;
  background:rgba(65,104,255,.10);
  border-color:rgba(101,132,255,.45);
}

.process-wrap .process{
  background:linear-gradient(180deg,rgba(31,39,52,.88),rgba(24,31,42,.82));
  border-color:rgba(139,157,204,.32);
}
.process-dot{
  background:#1B2330;
  color:#B7CAFF;
  box-shadow:0 0 0 5px #18202A,0 0 19px rgba(49,87,246,.13);
}
.process-label{color:#D1D9E4}

.sector-card{
  background:#171E28;
  border-color:rgba(139,157,204,.34);
}
.sector-card img,
.project-card img,
.archive-card img{
  filter:brightness(.81) saturate(.90) contrast(1.025);
}
.sector-card:hover img,
.project-card:hover img,
.archive-card:hover img{
  filter:brightness(.95) saturate(.99) contrast(1.02);
}
.sector-card-icon{
  background:rgba(24,31,43,.92);
  border-color:rgba(111,147,255,.34);
}

.why-item{
  border-color:rgba(139,157,204,.29);
  background:linear-gradient(180deg,rgba(35,43,57,.82),rgba(27,34,46,.76));
}
.why-icon{
  color:#B5C8FF;
  background:rgba(65,104,255,.095);
  border-color:rgba(101,132,255,.42);
}

.project-card,.archive-card{
  background:#1C2330;
  border-color:rgba(139,157,204,.32);
}
.project-body{border-top-color:rgba(151,168,210,.08)}
.archive-card-body{background:#1C2330}

.about-panel{
  background:linear-gradient(145deg,#18213C,#11172B 72%);
  border-left-color:rgba(139,157,204,.30);
  border-right-color:rgba(139,157,204,.30);
  border-bottom-color:rgba(139,157,204,.30);
}
.about-panel span{color:#AFBBD0}

.cta{
  background:linear-gradient(110deg,#0B1230,#101A69 58%,#1A36BF);
}
.cta p{color:#CED6E3}
.site-footer{background:#0D1320}
.footer-main,.footer-inner{color:rgba(218,226,238,.68)}

.entry-content{color:#C9D1DE}
.entry-content a{color:#9DB7FF}

/* Hover pozostaje niebieski, ale bez ostrego neonowego efektu. */
.card:hover,
.sector-card:hover,
.project-card:hover,
.archive-card:hover,
.why-item:hover{
  border-color:#5578FF;
  box-shadow:
    0 0 0 1px rgba(85,120,255,.20),
    0 18px 42px rgba(3,8,18,.25),
    0 0 28px rgba(49,87,246,.10);
}

@media(max-width:980px){
  .primary-nav{background:#18202B;border-top-color:#344057}
}

@media(max-width:640px){
  .site-header{background:rgba(17,23,32,.985)}
  .section--soft{background:rgba(31,39,53,.46)}
  .process-dot{box-shadow:0 0 0 4px #18202A,0 0 16px rgba(49,87,246,.14)}
  .sector-card img,.project-card img,.archive-card img{
    filter:brightness(.88) saturate(.94) contrast(1.02);
  }
}


/* ==========================================================
   ELSTO v0.6.8 — DEEP DARK + SOFT TYPOGRAPHY
   Zachowuje głębię ciemnego tła z v0.6.5, ale ogranicza
   kontrast typografii. Logo, ramki i responsywność z v0.6.7.
   ========================================================== */
:root{
  --elsto-ink:#CDD4DE;
  --elsto-muted:#929CAA;
  --elsto-line:#374156;
  --elsto-soft:#181B24;
  --elsto-surface:#111318;
  --elsto-card:#181A20;
  --elsto-card-2:#1B1E27;
  --elsto-shadow:0 18px 48px rgba(0,0,0,.28);
}

html{background:#0B0E14}
body{
  color:var(--elsto-ink);
  background:
    radial-gradient(ellipse 1050px 620px at 50% -140px,rgba(49,87,246,.13),transparent 68%),
    radial-gradient(ellipse 900px 700px at 8% 48%,rgba(26,47,122,.08),transparent 72%),
    radial-gradient(ellipse 820px 620px at 92% 72%,rgba(42,62,145,.07),transparent 72%),
    linear-gradient(180deg,#0F1219 0%,#0D1016 42%,#0A0D13 100%);
  background-attachment:fixed;
}

.site-header{
  background:rgba(16,18,23,.97);
  border-bottom-color:rgba(78,102,205,.18);
}
.primary-nav a{color:#C7CED8}
.primary-nav a:hover{color:#8FA9F2}
.menu-toggle{color:#D1D7E0}

.section{background:transparent}
.section--soft{
  background:linear-gradient(90deg,
    rgba(24,27,36,0) 0%,
    rgba(24,27,36,.34) 12%,
    rgba(24,27,36,.46) 50%,
    rgba(24,27,36,.34) 88%,
    rgba(24,27,36,0) 100%);
  border-top-color:rgba(111,147,255,.045);
  border-bottom-color:rgba(111,147,255,.035);
}

/* Typografia: żadnej czystej bieli na dużych powierzchniach. */
.section-title,
.entry-title,
.card h3,
.project-body h3,
.archive-card h2,
.why-item strong{
  color:#CDD4DE;
  text-shadow:none;
}
.section-lead,
.card p,
.project-meta,
.project-excerpt,
.about-copy,
.meta-box,
.demo-photo-credits{
  color:#929CAA;
}
.eyebrow{color:#8099E5}
.text-link{color:#94ADEB}

.hero h1{color:#E1E5EB;text-shadow:none}
.hero .eyebrow{color:#9AADE8}
.hero p{color:rgba(207,215,225,.84)}

.card{
  background:linear-gradient(180deg,#1B1E27,#171A21);
  border-color:rgba(121,136,180,.28);
}
.card-number{
  color:#A5B9ED;
  background:rgba(49,87,246,.075);
  border-color:rgba(83,112,226,.38);
}

.process-wrap .process{
  background:linear-gradient(180deg,rgba(24,27,36,.74),rgba(15,18,25,.58));
  border-color:rgba(121,136,180,.25);
}
.process-dot{
  background:#151821;
  color:#A9BDEB;
  box-shadow:0 0 0 5px #11151D,0 0 20px rgba(49,87,246,.12);
}
.process-label{color:#C6CED9}

.sector-card{
  background:#10141D;
  border-color:rgba(121,136,180,.27);
}
.sector-card-icon{
  background:rgba(15,18,27,.91);
  border-color:rgba(111,147,255,.27);
}

.why-item{
  border-color:rgba(121,136,180,.23);
  background:linear-gradient(180deg,rgba(27,30,39,.72),rgba(20,23,30,.65));
}
.why-icon{
  color:#A6B9EC;
  background:rgba(49,87,246,.07);
  border-color:rgba(83,112,226,.34);
}

.project-card,.archive-card{
  background:#181A20;
  border-color:rgba(121,136,180,.26);
}
.archive-card-body{background:#181A20}

.about-panel{
  background:linear-gradient(145deg,#10153F,#070A29 72%);
  border-left-color:rgba(121,136,180,.26);
  border-right-color:rgba(121,136,180,.26);
  border-bottom-color:rgba(121,136,180,.26);
}
.about-panel span{color:#AAB5CA}

.cta{background:linear-gradient(110deg,#060925,#0A1266 56%,#172BB9)}
.cta p{color:#C2CAD8}
.site-footer{background:#05071A}
.footer-main,.footer-inner{color:rgba(201,209,222,.64)}

.entry-content{color:#C1C9D4}
.entry-content a{color:#94ADEB}

/* Niebieski hover zostaje, ale nie rozświetla tekstu. */
.card:hover,
.sector-card:hover,
.project-card:hover,
.archive-card:hover,
.why-item:hover{
  border-color:#4E70EE;
  box-shadow:
    0 0 0 1px rgba(65,104,255,.17),
    0 18px 44px rgba(0,0,0,.30),
    0 0 28px rgba(49,87,246,.085);
}
.process-step:hover .process-label{color:#AFC0EC}

@media(max-width:980px){
  body{background-attachment:scroll}
  .primary-nav{background:#12151C;border-top-color:#2B3141}
}
@media(max-width:640px){
  .site-header{background:rgba(16,18,23,.985)}
  .section--soft{background:rgba(24,27,36,.34)}
  .process-dot{box-shadow:0 0 0 4px #11151D,0 0 16px rgba(49,87,246,.12)}
  .sector-card img,.project-card img,.archive-card img{
    filter:brightness(.84) saturate(.92) contrast(1.03);
  }
}


/* ==========================================================
   ELSTO v0.6.9 — unified brand blue
   Jeden główny niebieski ELSTO + spokojny wariant hover/soft.
   ========================================================== */
:root{
  --elsto-blue:#1236D1;
  --elsto-blue-hover:#294DDE;
  --elsto-blue-soft:#8FA4F2;
}

/* Główne elementy identyfikacji */
.btn--primary{background:var(--elsto-blue)}
.btn--primary:hover{background:var(--elsto-blue-hover)}
.primary-nav a::after,
.cta{border-top-color:var(--elsto-blue)}
.primary-nav a:hover{color:var(--elsto-blue-soft)}
.eyebrow,
.text-link{color:var(--elsto-blue-soft)}

/* Ramki / karty / proces */
.card:hover,
.sector-card:hover,
.project-card:hover,
.archive-card:hover,
.why-item:hover{
  border-color:var(--elsto-blue);
}
.card-number,
.why-icon{
  color:var(--elsto-blue-soft);
  border-color:rgba(18,54,209,.42);
  background:rgba(18,54,209,.09);
}
.process::before{
  background:linear-gradient(90deg,rgba(18,54,209,.20),rgba(18,54,209,.82),rgba(18,54,209,.20));
}
.process-dot{
  border-color:var(--elsto-blue);
  color:var(--elsto-blue-soft);
  box-shadow:0 0 0 5px var(--elsto-surface),0 0 24px rgba(18,54,209,.15);
}
.section--soft .process-dot{
  box-shadow:0 0 0 5px var(--elsto-soft),0 0 24px rgba(18,54,209,.15);
}
.process-step:hover .process-dot{
  border-color:var(--elsto-blue-hover);
  box-shadow:0 0 0 5px #131720,0 0 24px rgba(18,54,209,.30);
}
.process-step:hover .process-label{color:var(--elsto-blue-soft)}

/* Ikony branż i pozostałe akcenty */
.sector-card-icon{
  color:var(--elsto-blue-soft);
  border-color:rgba(18,54,209,.34);
}
.about-panel{
  border-top-color:var(--elsto-blue);
}
.about-panel:hover{
  border-color:rgba(18,54,209,.58);
  border-top-color:var(--elsto-blue-hover);
}
::selection{background:rgba(18,54,209,.38);color:#fff}
:focus-visible{outline-color:rgba(18,54,209,.78)}

/* Glow oparty na tym samym kolorze */
.card:hover{
  box-shadow:0 0 0 1px rgba(18,54,209,.20),0 18px 44px rgba(0,0,0,.30),0 0 28px rgba(18,54,209,.12);
}
.sector-card:hover{
  box-shadow:0 0 0 1px rgba(18,54,209,.18),0 18px 42px rgba(0,0,0,.34),0 0 30px rgba(18,54,209,.13);
}
.project-card:hover,.archive-card:hover{
  box-shadow:0 0 0 1px rgba(18,54,209,.17),0 18px 42px rgba(0,0,0,.32),0 0 28px rgba(18,54,209,.11);
}
.why-item:hover{
  box-shadow:0 0 0 1px rgba(18,54,209,.15),0 15px 36px rgba(0,0,0,.24),0 0 26px rgba(18,54,209,.10);
}

@media(max-width:640px){
  .process::before{
    background:linear-gradient(180deg,#1236D1 0%,rgba(18,54,209,.62) 82%,rgba(18,54,209,.12) 100%);
  }
  .process-dot{
    border-color:var(--elsto-blue);
    box-shadow:0 0 0 4px var(--elsto-surface),0 0 18px rgba(18,54,209,.17);
  }
  .section--soft .process-dot{
    box-shadow:0 0 0 4px var(--elsto-soft),0 0 18px rgba(18,54,209,.17);
  }
}


/* ==========================================================
   ELSTO v0.6.10 — header optical alignment
   Znak jest osiowany do samego napisu ELSTO, a nie do
   całego bloku ELSTO + ENGINEERING.
   ========================================================== */

.elsto-header-symbol{
  transform:translateY(-7px);
}

@media(max-width:1180px){
  .elsto-header-symbol{transform:translateY(-6px)}
}

@media(max-width:980px){
  .elsto-header-symbol{transform:translateY(-5px)}
}

@media(max-width:640px){
  .elsto-header-symbol{transform:translateY(-4px)}
}

@media(max-width:380px){
  .elsto-header-symbol{transform:translateY(-3px)}
}


/* ==========================================================
   ELSTO v0.6.11 — larger header wordmark
   ELSTO ma optycznie zbliżoną wysokość do symbolu,
   ENGINEERING pozostaje czytelne pod spodem.
   ========================================================== */

@media(min-width:1181px){
  .site-brand{
    min-width:410px;
    margin-right:34px;
  }
  .brand-link{
    gap:14px;
    align-items:center;
    max-width:none;
  }
  .elsto-header-symbol{
    width:88px;
    height:88px;
    flex:0 0 88px;
    transform:translateY(-7px);
  }
  .elsto-header-wordmark{
    width:auto;
    height:96px;
    max-height:none;
    flex:0 0 auto;
    object-fit:contain;
    object-position:left center;
  }
}

@media(min-width:981px) and (max-width:1180px){
  .site-brand{
    min-width:360px;
    margin-right:22px;
  }
  .brand-link{
    gap:12px;
    max-width:none;
  }
  .elsto-header-symbol{
    width:78px;
    height:78px;
    flex:0 0 78px;
    transform:translateY(-6px);
  }
  .elsto-header-wordmark{
    width:auto;
    height:84px;
    max-height:none;
    flex:0 0 auto;
  }
}

/* Tablet: engineering ma pozostać widoczne, ale marka nie zabiera menu. */
@media(min-width:641px) and (max-width:980px){
  .brand-link{max-width:none}
  .elsto-header-wordmark{
    width:auto;
    height:58px;
    max-height:none;
    flex:0 0 auto;
  }
}

/* Telefon: lekko większy wordmark niż wcześniej, bez przepełnienia nagłówka. */
@media(max-width:640px){
  .brand-link{max-width:240px}
  .elsto-header-wordmark{
    width:auto;
    height:40px;
    max-height:none;
    flex:0 1 auto;
  }
}

@media(max-width:380px){
  .brand-link{max-width:214px}
  .elsto-header-wordmark{height:36px}
}


/* ==========================================================
   ELSTO v0.6.12 — calmer buttons
   Firmowy niebieski pozostaje w logo/ikonach/ramkach,
   przyciski są celowo ciemniejsze i mniej świetliste.
   ========================================================== */

:root{
  --elsto-button-blue:#102A8F;
  --elsto-button-blue-hover:#1639A8;
  --elsto-button-blue-active:#0C2175;
  --elsto-button-text:#E8EDF8;
}

/* Główne niebieskie przyciski */
.btn--primary{
  background:var(--elsto-button-blue);
  color:var(--elsto-button-text);
  border-color:rgba(104,126,204,.26);
  box-shadow:
    0 3px 10px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.035);
}

.btn--primary:hover{
  background:var(--elsto-button-blue-hover);
  color:#EEF2FA;
  border-color:rgba(119,142,220,.34);
  box-shadow:
    0 5px 13px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.045);
  transform:translateY(-1px);
}

.btn--primary:active{
  background:var(--elsto-button-blue-active);
  transform:translateY(0);
  box-shadow:0 2px 7px rgba(0,0,0,.26);
}

/* Przycisk w nagłówku nie powinien świecić mocniej niż pozostałe */
.header-cta{
  box-shadow:
    0 3px 10px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.035);
}

/* Przyciski obrysowe również spokojniejsze */
.btn--outline{
  border-color:rgba(180,190,216,.28);
  color:#D5DCE8;
  background:rgba(10,13,22,.32);
}

.btn--outline:hover{
  background:rgba(54,63,86,.30);
  border-color:rgba(177,190,222,.42);
  color:#EDF1F8;
}

/* Telefon: brak dodatkowego glow */
@media(max-width:640px){
  .btn--primary,
  .header-cta{
    box-shadow:0 2px 8px rgba(0,0,0,.24);
  }
}