/* Novusedge — landing. Tokeny i klasy komponentów z design systemu „Modernist". */

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #ec3013;
  --color-accent-400: #ff9783;
  --color-accent-600: #dd2b0f;
  --color-accent-700: #ae1800;
  --color-divider: rgba(32, 30, 29, .4);
  --color-footer-bg: #201e1d;
  --color-footer-text: #f3f2f2;

  --font: "Archivo", system-ui, sans-serif;
  --px: 48px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
}

h1, h2, h3, h4 { font-family: var(--font); font-weight: 800; margin: 0; }

a { color: var(--color-text); text-decoration: none; }
a:hover { color: var(--color-accent); }

p { margin: 0; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: rgba(236, 48, 19, .3); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--color-text); color: var(--color-bg);
  padding: 10px 16px; font-weight: 800; font-size: 13px;
}
.skip-link:focus { left: 0; color: var(--color-bg); }

/* — rama strony — */
.frame {
  max-width: 1440px;
  margin: 0 auto;
  border-left: 2px solid var(--color-divider);
  border-right: 2px solid var(--color-divider);
  min-height: 100vh;
  background: var(--color-bg);
}

section { scroll-margin-top: 16px; }

/* — przyciski (DS) — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font); font-weight: 800;
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: 8px 14px; border-radius: 0;
}
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); color: var(--color-bg); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: rgba(32, 30, 29, .07); color: var(--color-text); }
.btn-secondary:active { background: rgba(32, 30, 29, .14); }
.btn-lg { font-size: 15px; padding: 12px 20px; }

/* — tagi (DS) — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: .02em; padding: 3px 10px; border-radius: 0;
}
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — kickery — */
.kicker {
  font-size: 11px; font-weight: 800; letter-spacing: .22em;
  text-transform: uppercase; margin: 0;
}
.kicker-accent { color: var(--color-accent-700); }
.kicker-muted { color: rgba(32, 30, 29, .6); }

/* — nagłówek — */
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px var(--px);
  border-bottom: 2px solid var(--color-divider);
  position: relative;
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand:hover { color: var(--color-text); }
.brand-name { font-size: 19px; font-weight: 800; letter-spacing: -.04em; }

.logo-mark { width: 34px; height: 34px; background: var(--color-accent); flex: none; display: block; }
.logo-notch {
  display: flex; width: 100%; height: 100%; background: var(--color-text);
  clip-path: polygon(0 0, 66% 0, 100% 34%, 100% 100%, 0 100%);
  align-items: flex-end; padding: 0 0 4px 5px;
}
.logo-n { font-size: 21px; font-weight: 800; color: var(--color-bg); line-height: .72; letter-spacing: -.06em; }

.site-nav { display: flex; align-items: center; gap: 28px; }
.nav-link { font-size: 13px; font-weight: 800; letter-spacing: .02em; }

.lang-switch { display: flex; border: 2px solid var(--color-divider); }
.lang-btn {
  font-family: var(--font); font-weight: 800; font-size: 12px; line-height: 1;
  letter-spacing: .06em; padding: 8px 10px; border: 0; cursor: pointer;
  background: transparent; color: var(--color-text);
}
.lang-btn:hover { opacity: .85; }
.lang-btn.is-active { background: var(--color-text); color: var(--color-bg); }

.nav-toggle { display: none; }

/* — hero — */
.hero {
  display: grid; grid-template-columns: 1.35fr 1fr;
  border-bottom: 2px solid var(--color-divider);
}
.hero-main {
  padding: 80px var(--px) 64px;
  border-right: 2px solid var(--color-divider);
  display: flex; flex-direction: column; align-items: flex-start; gap: 28px;
}
.hero h1 {
  font-size: 72px; line-height: .98; letter-spacing: -.045em;
  max-width: 14ch; text-wrap: balance;
}
.hero-lead { font-size: 18px; line-height: 1.55; max-width: 46ch; color: rgba(32, 30, 29, .8); }
.hero-ctas { display: flex; gap: 12px; margin-top: 4px; flex-wrap: wrap; }

.hero-side { display: flex; flex-direction: column; }
.hero-side-label {
  padding: 22px 40px; border-bottom: 2px solid var(--color-divider);
  font-size: 11px; font-weight: 800; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(32, 30, 29, .6);
}
.cap-list { list-style: none; margin: 0; padding: 0; }
.cap {
  padding: 26px 40px; border-bottom: 2px solid var(--color-divider);
  display: flex; gap: 18px; align-items: baseline;
}
.cap-n { font-size: 12px; font-weight: 800; color: var(--color-accent); font-variant-numeric: tabular-nums; }
.cap-label { font-size: 17px; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; }

/* — o nas — */
.about {
  display: grid; grid-template-columns: 1fr 1.35fr;
  border-bottom: 2px solid var(--color-divider);
}
.about-head { padding: 56px var(--px); border-right: 2px solid var(--color-divider); }
.about-head h2 {
  font-size: 38px; line-height: 1.05; letter-spacing: -.04em;
  margin-top: 20px; max-width: 16ch;
}
.about-body {
  padding: 56px var(--px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
}
.about-body p { font-size: 16px; line-height: 1.65; text-wrap: pretty; }

/* — usługi — */
.services { border-bottom: 2px solid var(--color-divider); }
.services-head {
  padding: 44px var(--px) 32px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
  border-bottom: 2px solid var(--color-divider);
}
.services-head h2 { font-size: 38px; line-height: 1.05; letter-spacing: -.04em; margin-top: 16px; }
.services-lead { font-size: 15px; line-height: 1.6; max-width: 40ch; color: rgba(32, 30, 29, .7); }

.services-grid { display: grid; grid-template-columns: 1fr 1fr; }
.service {
  padding: 40px var(--px);
  display: flex; flex-direction: column; gap: 14px;
}
.service:nth-child(odd) { border-right: 2px solid var(--color-divider); }
.service:nth-child(-n+2) { border-bottom: 2px solid var(--color-divider); }
.service-head { display: flex; align-items: baseline; gap: 14px; }
.service-n { font-size: 12px; font-weight: 800; color: var(--color-accent); font-variant-numeric: tabular-nums; }
.service h3 { font-size: 26px; letter-spacing: -.035em; }
.service-body { font-size: 15px; line-height: 1.6; max-width: 44ch; color: rgba(32, 30, 29, .8); }
.service-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

/* — proces — */
.process { border-bottom: 2px solid var(--color-divider); }
.process-head { padding: 44px var(--px) 32px; border-bottom: 2px solid var(--color-divider); }
.process-head h2 { font-size: 38px; line-height: 1.05; letter-spacing: -.04em; margin-top: 16px; }
.process-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.step {
  padding: 36px var(--px);
  display: flex; flex-direction: column; gap: 12px;
}
.step:not(:last-child) { border-right: 2px solid var(--color-divider); }
.step-n { font-size: 34px; font-weight: 800; color: var(--color-accent); letter-spacing: -.05em; line-height: 1; }
.step-title { font-size: 19px; letter-spacing: -.03em; }
.step-body { font-size: 14px; line-height: 1.6; color: rgba(32, 30, 29, .75); max-width: 36ch; }

/* — poster — */
.poster {
  background: var(--color-accent);
  padding: 80px var(--px);
  border-bottom: 2px solid var(--color-divider);
}
.poster p {
  font-size: 64px; font-weight: 800; letter-spacing: -.05em; line-height: .98;
  color: var(--color-bg); max-width: 20ch;
}

/* — kontakt — */
.contact {
  display: grid; grid-template-columns: 1fr 1fr;
  border-bottom: 2px solid var(--color-divider);
}
.contact-main {
  padding: 56px var(--px);
  border-right: 2px solid var(--color-divider);
  display: flex; flex-direction: column; align-items: flex-start; gap: 24px;
}
.contact-main h2 { font-size: 44px; line-height: 1.02; letter-spacing: -.04em; max-width: 14ch; }
.contact-lead { font-size: 16px; line-height: 1.6; max-width: 40ch; color: rgba(32, 30, 29, .8); }

.contact-side { display: flex; flex-direction: column; }
.contact-row { padding: 28px var(--px); }
.contact-row:not(:last-child) { border-bottom: 2px solid var(--color-divider); }
.contact-k {
  font-size: 11px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(32, 30, 29, .55);
}
.contact-v {
  font-size: 24px; font-weight: 800; letter-spacing: -.03em;
  display: inline-block; margin-top: 6px; overflow-wrap: anywhere;
}
.contact-v-num { font-variant-numeric: tabular-nums; }
.contact-addr { font-size: 16px; line-height: 1.6; margin-top: 6px; }

/* — stopka — */
.site-footer {
  background: var(--color-footer-bg); color: var(--color-footer-text);
  padding: 44px var(--px) 36px;
}
.footer-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 40px; flex-wrap: wrap;
}
.brand-footer { gap: 12px; color: var(--color-footer-text); }
.brand-footer .brand-name { font-size: 16px; }
.logo-mark-footer { width: 28px; height: 28px; }
.logo-mark-footer .logo-notch { background: var(--color-footer-text); padding: 0 0 3px 4px; }
.logo-mark-footer .logo-n { font-size: 17px; color: var(--color-footer-bg); }

.footer-nav { display: flex; gap: 28px; flex-wrap: wrap; }
.footer-nav a { color: var(--color-footer-text); font-size: 13px; font-weight: 800; }
.footer-nav a:hover { color: var(--color-accent-400); }

.footer-rule { height: 2px; background: rgba(243, 242, 242, .35); margin: 32px 0 24px; }

.registry {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
  margin: 0;
}
.registry-item { display: flex; flex-direction: column; gap: 4px; }
.registry dt {
  font-size: 10px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(243, 242, 242, .5);
}
.registry dd { font-size: 13px; line-height: 1.5; color: rgba(243, 242, 242, .9); margin: 0; overflow-wrap: anywhere; }
.registry dd a { color: rgba(243, 242, 242, .9); }
.registry dd a:hover { color: var(--color-accent-400); }

.footer-copy { font-size: 11px; color: rgba(243, 242, 242, .45); margin-top: 32px; }

/* ══════════════ responsywność ══════════════ */

@media (max-width: 1180px) {
  .hero h1 { font-size: 58px; }
  .poster p { font-size: 52px; }
}

@media (max-width: 960px) {
  :root { --px: 32px; }

  .site-nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
    flex-direction: column; align-items: flex-start; gap: 20px;
    padding: 24px var(--px) 28px;
    background: var(--color-bg);
    border-bottom: 2px solid var(--color-divider);
  }
  .site-header.nav-open .site-nav { display: flex; }
  .nav-link { font-size: 16px; }

  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 40px; height: 40px; padding: 8px;
    background: transparent; border: 2px solid var(--color-divider); cursor: pointer;
  }
  .nav-toggle span { display: block; height: 2px; width: 100%; background: var(--color-text); }
  .site-header.nav-open .nav-toggle { background: var(--color-text); }
  .site-header.nav-open .nav-toggle span { background: var(--color-bg); }

  .hero { grid-template-columns: 1fr; }
  .hero-main { border-right: 0; border-bottom: 2px solid var(--color-divider); padding: 56px var(--px) 48px; }
  .hero h1 { font-size: 46px; }
  .hero-side-label, .cap { padding-left: var(--px); padding-right: var(--px); }
  .cap:last-child { border-bottom: 0; }

  .about { grid-template-columns: 1fr; }
  .about-head { border-right: 0; border-bottom: 2px solid var(--color-divider); padding: 44px var(--px); }
  .about-body { grid-template-columns: 1fr; gap: 24px; padding: 44px var(--px); }

  .services-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .services-grid { grid-template-columns: 1fr; }
  .service { border-right: 0 !important; }
  .service:not(:last-child) { border-bottom: 2px solid var(--color-divider); }

  .process-grid { grid-template-columns: 1fr; }
  .step { border-right: 0 !important; }
  .step:not(:last-child) { border-bottom: 2px solid var(--color-divider); }

  .poster { padding: 56px var(--px); }
  .poster p { font-size: 40px; }

  .contact { grid-template-columns: 1fr; }
  .contact-main { border-right: 0; border-bottom: 2px solid var(--color-divider); }
  .contact-main h2 { font-size: 36px; }

  .registry { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  :root { --px: 20px; }

  .brand-name { font-size: 16px; }
  .hero h1 { font-size: 36px; }
  .hero-lead { font-size: 16px; }
  .about-head h2, .services-head h2, .process-head h2 { font-size: 29px; }
  .poster p { font-size: 30px; }
  .contact-main h2 { font-size: 30px; }
  .contact-v { font-size: 19px; }
  .registry { grid-template-columns: 1fr; gap: 20px; }
  .hero-side-label, .cap { padding-left: var(--px); padding-right: var(--px); }
  .cap { padding-top: 18px; padding-bottom: 18px; }
}