/* MS Control — Static site styles (no framework) */
:root{
  --bg:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --border:rgba(2,6,23,.12);
  --card:#ffffff;
  --alt:#f8fafc;
  --accent:#00E5EF;         /* turkus z logo (możesz dopasować) */
  --accent-dark:#00b8c0;
  --alt2:#eef7ff;           /* bardzo jasny niebieskawy */  
  --shadow:0 1px 2px rgba(2,6,23,.06);
  --radius:18px;
  --radius-sm:14px;
  --container:1100px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(0,229,239,.10), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(15,23,42,.06), transparent 55%),
    var(--bg);
  line-height:1.5;
}

a{color:inherit}
.container{max-width:var(--container); margin:0 auto; padding:0 18px}

.header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.header__inner{
  height:64px;
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
}

/* Header shrink on scroll */
.header{
  transition: background 180ms ease, box-shadow 180ms ease;
}

.header__inner{
  transition: height 180ms ease;
}

.brand--logo img{
  transition: height 180ms ease;
}

/* When scrolled */
.header.is-scrolled{
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 30px rgba(2,6,23,.08);
}

.header.is-scrolled .header__inner{
  height: 54px;
}

.header.is-scrolled .brand--logo img{
  height: 30px;
}




.brand{font-weight:650; letter-spacing:-.02em; text-decoration:none; font-size:20px}
.brand--logo img {
  height: 36px;
  width: auto;
  display: block;
}

.nav{display:flex; gap:20px; align-items:center}
.nav a{font-size:14px; text-decoration:none; color:rgba(15,23,42,.82)}
.nav a:hover{color:rgba(15,23,42,.62)}
/* Active nav link */
.nav a.is-active{
  background: rgba(0,229,239,.12);
  border-color: rgba(0,229,239,.45);
  color: var(--text);
}

/* Header nav — separated buttons */
.nav a{
  padding:6px 10px;
  border-radius:10px;
  border:1px solid transparent;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

.nav a:hover{
  background: rgba(0,229,239,.08);
  border-color: rgba(0,229,239,.35);
  color: var(--text);
}

.header__cta{display:none}

.nav__toggle{
  display:none;
  width:44px; height:44px;
  border:1px solid var(--border);
  background:#fff;
  border-radius:14px;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:10px;
}
.nav__toggle span{
  display:block;
  width:18px; height:2px;
  background:rgba(15,23,42,.9);
  border-radius:2px;
}

.section{padding:64px 0}
.section--alt{
  background: linear-gradient(180deg, var(--alt), #ffffff);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.section--soft{
  background: linear-gradient(180deg, var(--alt2), #ffffff);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}


.section__head{display:flex; align-items:flex-end; justify-content:space-between; gap:10px}
h1{font-size: clamp(34px, 5vw, 56px); line-height:1.08; letter-spacing:-.03em; margin:0}
h2{
  font-size: clamp(24px, 3vw, 34px);
  margin:0 0 10px 0;
  letter-spacing:-.02em;
  position: relative;
  padding-bottom: 12px;
}

h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:56px;
  height:3px;
  border-radius:3px;
  background: linear-gradient(
    90deg,
    var(--accent),
    var(--accent-dark)
  );
}

h3{margin:10px 0 0 0; font-size:18px; letter-spacing:-.01em}
p{margin:10px 0 0 0; color:var(--muted)}
.lead{font-size:18px; max-width:60ch}

.hero{
  padding-top:56px;
  position: relative;
  overflow: hidden;
}



.hero__grid{
  display:grid;
  gap:26px;
  align-items:center;
  position: relative;
  z-index:1;
}


@media (min-width: 900px){ .hero__grid{grid-template-columns: 1.1fr .9fr} }
.hero__actions{margin-top:18px; display:flex; flex-wrap:wrap; gap:10px}
.hero__media {
  position: relative;
}

.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* Optional: improves text readability */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.15),
    rgba(0,0,0,0.35)
  );
  border-radius: var(--radius);
  pointer-events: none;
}

.media-card__hint{
  position:absolute; inset:auto 14px 14px 14px;
  font-size:12px; color:rgba(15,23,42,.55);
}

.pillrow{margin-top:14px; display:flex; flex-wrap:wrap; gap:8px}
.pill{
  border:1px solid var(--border);
  border-radius:999px;
  padding:7px 10px;
  font-size:13px;
  background:#fff;
  color:rgba(15,23,42,.82);
}

.grid{display:grid; gap:14px}
.grid--3{grid-template-columns:1fr}
.grid--4{grid-template-columns:1fr}
@media (min-width: 700px){
  .grid--3{grid-template-columns:repeat(2, 1fr)}
}
@media (min-width: 900px){
  .grid--3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid--4{
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}


.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  box-shadow: none;
}
.card:hover{box-shadow: var(--shadow)}

.icon{
  width:40px; height:40px;
  border-radius:14px;
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-weight:700;
  color:rgba(15,23,42,.85);
}
.icon{
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(248,250,252,.9));
}

/* Services cards — polish */
.card{
  position: relative;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.services-grid .card::before{
  content:"";
  position:absolute;
  left:18px;
  top:18px;
  width:38px;
  height:38px;
  border-radius:14px;
  background: radial-gradient(circle at 30% 30%, rgba(0,229,239,.22), transparent 60%);
  pointer-events:none;
  opacity:.9;
}

.services-grid .card:hover{
  transform: translateY(-2px);
  border-color: rgba(0,229,239,.28);
  box-shadow: 0 12px 28px rgba(2,6,23,.10);
}

.services-grid .card:hover .icon{
  border-color: rgba(0,229,239,.45);
  color: var(--accent-dark);
  background: rgba(0,229,239,.06);
}

.card h3{
  margin-top:12px;
}

.card p{
  font-size:14px;
  line-height:1.55;
}


.project{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
}
.project:hover{box-shadow: var(--shadow)}
.project__media{aspect-ratio:16/9; background:#e5e7eb; overflow:hidden}
/* === PRO-PLUS: project image swap on hover === */
.project__media--swap {
  position: relative;
  overflow: hidden;
}

.project__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 220ms ease;
}

/* Visual unification for project images */
.project__media img {
  filter: contrast(1.05) saturate(0.95);
}


.project__img--secondary {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.project:hover .project__img--secondary {
  opacity: 1;
}

.project:hover .project__img--primary {
  opacity: 0;
}

.project__body{padding:16px}
.tag{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:rgba(15,23,42,.55)}




.about__list{margin:14px 0 0 0; padding:0; display:grid; gap:8px; color:rgba(15,23,42,.78)}
.about__list li{list-style:none; font-size:14px}

/* About — feature list polish */
.about__features{
  margin-top:16px;
  display:grid;
  gap:12px;
}

.about__feature{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:14px;
  color:rgba(15,23,42,.85);
}

.about__icon{
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;

  background: radial-gradient(
    circle at 30% 30%,
    rgba(0,229,239,.18),
    transparent 60%
  );
  color: var(--accent-dark);
}

.about__feature svg{
  display:block;
}


.portrait{
  aspect-ratio:4/5;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:#fff;
  position:relative;
}
.portrait__hint{
  position:absolute; inset:auto 14px 14px 14px;
  font-size:12px; color:rgba(15,23,42,.55);
}

/* About – founder photo sizing fix */
.founder-photo {
  width: 100%;
  max-width: 220px;              /* BYŁO 300px – to był problem */
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(2,6,23,.12);
  filter: contrast(1.03) saturate(0.95);
}




.contact{display:grid; gap:18px}
@media (min-width: 900px){ .contact {
  grid-template-columns: 1fr;
} }
.contact__details{margin-top:12px; display:grid; gap:6px; font-size:14px}
.contact__details a{text-decoration:none}
.contact__details a:hover{text-decoration:underline}

.form{background:var(--alt)}
.form label{display:block}
.form span{display:block; font-size:13px; color:rgba(15,23,42,.78)}
.form input, .form textarea{
  margin-top:6px;
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:14px;
  font:inherit;
  background:#fff;
}
.form textarea{min-height:120px; resize:vertical}
.form__row{display:grid; gap:12px}
@media (min-width: 650px){ .form__row{grid-template-columns:1fr 1fr} }
.form__note{margin-top:10px; font-size:13px; color:rgba(15,23,42,.75)}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:14px;
  padding:10px 14px;
  border:1px solid var(--border);
  text-decoration:none;
  font-size:14px;
  background:#fff;
}
.btn--primary{
  background:#0b1220;
  color:#fff;
  border-color: rgba(11,18,32,.9);
}
.btn--primary:hover{opacity:.92}
.btn--ghost:hover{background:#f1f5f9}
.textlink{font-size:14px}

.footer{border-top:1px solid var(--border); background:#fff}
.footer__inner{
  padding:22px 0;
  display:flex; flex-direction:column; gap:10px;
  align-items:center; justify-content:space-between;
  color:rgba(15,23,42,.7);
  font-size:14px;
}
.footer__links{display:flex; gap:18px}
.footer__links a{text-decoration:none}
.footer__links a:hover{text-decoration:underline}

.muted{color:var(--muted)}
.small{font-size:13px}
.mt-1{margin-top:10px}
.mt-2{margin-top:14px}

/* How We Work — layout upgrade (base, all screens) */
.step{
  list-style:none;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  background:#fff;

  display:flex;
  flex-direction:column;
  gap:12px;

  position: relative;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.step__head{
  display:flex;
  align-items:center;
  gap:14px;
}

.step__icon{
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid var(--border);
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  margin-bottom:0; /* ważne: niech nie robi dodatkowej wysokości */
}

.step__icon svg{ color:#052b2d; }

.step__meta{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.step__kicker{
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(15,23,42,.55);
}

.step h3{ margin:0; font-size:18px; }
.step p{ font-size:14px; line-height:1.45; }

.step:hover{
  transform: translateY(-2px);
  border-color: rgba(0,229,239,.28);
  box-shadow: 0 12px 28px rgba(2,6,23,.10);
}

/* How We Work — tighter on mobile (single media query) */
@media (max-width: 700px){
  #process.section{ padding: 44px 0; }


  .step{
    padding: 12px;
    border-radius: 16px;
    gap:10px;
  }

  .grid{ gap: 12px; }

  .step__icon{
    width:36px;
    height:36px;
    border-radius:12px;
  }

  .step h3{ font-size:16px; }
  .step p{ font-size:13px; }
}

/* How We Work — zawsze min. 2 kolumny */
.process-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Desktop: 4 kolumny */
@media (min-width: 980px){
  .process-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* === Mobile layout: 2 kolumny zamiast 1 (Services / Projects / Process) === */
@media (max-width: 700px){
  .grid--2-mobile{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* trochę ciaśniej, żeby 2 kolumny wyglądały “premium” */
  .services-grid .card{
    padding: 14px;
  }
  .services-grid .icon{
    width: 36px;
    height: 36px;
    border-radius: 12px;
  }
  .services-grid h3{ font-size: 16px; }
  .services-grid p{ font-size: 13px; line-height: 1.45; }

  .projects-grid .project__body{
    padding: 12px;
  }
  .projects-grid h3{ font-size: 16px; }
  .projects-grid p{ font-size: 13px; line-height: 1.45; }

  /* Process (How We Work) – jak wcześniej, ale pod 2 kolumny */
  .process-grid .step{
    padding: 12px;
    border-radius: 16px;
    gap: 10px;
  }
  .process-grid .step__head{ gap: 10px; }
  .process-grid .step__icon{
    width: 34px;
    height: 34px;
    border-radius: 12px;
  }
  .process-grid .step__kicker{ font-size: 10px; }
  .process-grid .step h3{ font-size: 15px; }
  .process-grid .step p{ font-size: 12.5px; line-height: 1.4; }
}

/* ===== ABOUT: mobile photo next to features, desktop photo on the right ===== */

/* Desktop/tablet: 2 kolumny (tekst | zdjęcie) */
@media (min-width: 701px){
  .about{
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
    gap: 24px;
    align-items: start;
  }

  /* wrapper nie może psuć siatki */
  .about__mobile-grid{
    display: contents;
  }

  .about__copy{ grid-column: 1; }
  .about__media{
    grid-column: 2;
    justify-self: end;
    align-self: start;
  }

  .founder-photo{
    width: 100%;
    max-width: 240px;
    height: auto;
  }
}

/* Mobile: zdjęcie obok listy (2 kolumny wewnątrz About) */
@media (max-width: 700px){
  .about{
    display: block;
  }

  .about__mobile-grid{
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 14px;
    margin-top: 16px;
    align-items: start;
  }

  .about__media{
    display: flex;
    justify-content: center;
  }

  .founder-photo{
    max-width: 140px;
    border-radius: 14px;
  }
}