/* =========================================================
   WP Code — landing page
   Paleta wyprowadzona z logo (błękit → kobalt) na chłodnym
   papierze; ciemny panel kodu jako element sygnaturowy.
   ========================================================= */

:root{
  --paper:      #F1F4F9;
  --paper-2:    #FFFFFF;
  --ink:        #0A0D14;
  --ink-soft:   #55606F;
  --blue:       #2148F5;
  --blue-light: #4EA8FF;
  --line:       rgba(10,13,20,.10);
  --panel:      #0B0F19;

  --f-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --f-body:    "Manrope", ui-sans-serif, system-ui, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --wrap: 1180px;
  --pad: clamp(20px, 5vw, 64px);
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:inherit; }

::selection{ background:var(--blue); color:#fff; }

:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px;
  border-radius:4px;
}

.skip{
  position:absolute; left:-999px; top:0;
  background:var(--ink); color:#fff; padding:12px 18px; z-index:99;
}
.skip:focus{ left:12px; top:12px; }

/* ---------- szyna boczna ---------- */
.rail{
  position:fixed; left:0; top:0; bottom:0; width:52px;
  border-right:1px solid var(--line);
  display:none; align-items:center; justify-content:center;
  pointer-events:none; z-index:5;
}
.rail span{
  writing-mode:vertical-rl;
  font-family:var(--f-mono);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft); opacity:.55;
}

/* ---------- nagłówek ---------- */
.site-head{
  position:relative; z-index:6;
  max-width:var(--wrap); margin:0 auto;
  padding:26px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand img{ width:clamp(132px, 17vw, 176px); }

/* ---------- przyciski ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--f-body); font-weight:700; font-size:15px;
  text-decoration:none; border-radius:999px;
  padding:12px 22px; transition:transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
  white-space:nowrap;
}
.btn-ghost{ border:1px solid var(--line); background:transparent; }
.btn-ghost:hover{ border-color:var(--ink); }

.btn-solid{
  background:linear-gradient(120deg, var(--blue-light), var(--blue) 62%);
  color:#fff; padding:16px 30px; font-size:16px;
  box-shadow:0 12px 28px -14px rgba(33,72,245,.85);
}
.btn-solid:hover{ transform:translateY(-2px); box-shadow:0 20px 34px -16px rgba(33,72,245,.9); }

.btn-link{
  padding:16px 4px; color:var(--ink-soft);
  border-bottom:1px solid var(--line); border-radius:0;
}
.btn-link:hover{ color:var(--ink); border-color:var(--ink); }

/* ---------- elementy wspólne ---------- */
.eyebrow{
  font-family:var(--f-mono); font-size:12.5px; letter-spacing:.12em;
  text-transform:lowercase; color:var(--ink-soft);
  margin:0 0 22px; display:flex; align-items:center; gap:10px;
}
.eyebrow.light{ color:rgba(255,255,255,.55); }
.dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--blue); box-shadow:0 0 0 4px rgba(33,72,245,.15);
}

.lede{
  font-size:clamp(17px, 1.6vw, 19.5px);
  color:var(--ink-soft); max-width:46ch; margin:0;
}
.lede.light{ color:rgba(255,255,255,.66); max-width:52ch; }

/* ---------- hero ---------- */
.hero{
  position:relative;
  max-width:var(--wrap); margin:0 auto;
  padding:clamp(28px,5vw,56px) var(--pad) clamp(64px,9vw,120px);
  display:grid; grid-template-columns:1fr; gap:clamp(40px,6vw,64px);
  align-items:center;
}
.hero-grid{
  position:absolute; inset:-40px 0 auto; height:70%;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 80% at 20% 0%, #000, transparent 70%);
          mask-image:radial-gradient(120% 80% at 20% 0%, #000, transparent 70%);
  opacity:.7; pointer-events:none;
}
.hero-inner{ position:relative; }

h1{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(38px, 6.2vw, 68px);
  line-height:1.03; letter-spacing:-.03em;
  margin:0 0 26px;
}
h1 em{
  font-style:normal;
  background:linear-gradient(100deg, var(--blue-light), var(--blue) 55%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.hero-actions{
  margin-top:34px; display:flex; flex-wrap:wrap; align-items:center; gap:18px 28px;
}

/* ---------- karta z kodem (element sygnaturowy) ---------- */
.code-card{
  position:relative; margin:0;
  background:var(--panel);
  border-radius:14px;
  box-shadow:0 40px 70px -40px rgba(10,13,20,.6), 0 0 0 1px rgba(10,13,20,.06);
  overflow:hidden;
}
.code-card figcaption{
  display:flex; align-items:center; gap:7px;
  padding:14px 18px; border-bottom:1px solid rgba(255,255,255,.07);
}
.tl{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.16); }
.fname{
  margin-left:10px; font-family:var(--f-mono); font-size:12px;
  color:rgba(255,255,255,.45); letter-spacing:.04em;
}
.code-card pre{
  margin:0; padding:24px 22px 28px;
  overflow-x:auto;
  font-family:var(--f-mono); font-size:13.5px; line-height:1.85;
  color:#C9D4E6;
}
.code-card .c{ color:#5E6B85; font-style:italic; }
.code-card .f{ color:var(--blue-light); }
.code-card .s{ color:#7DDCA4; }
.code-card .k{ color:#B79BFF; }
.code-card .t{ color:#FFD479; }
.code-card .b{ color:#FF9E7A; }
.caret{
  display:inline-block; width:8px; height:1.05em; margin-left:4px;
  background:var(--blue-light); vertical-align:-3px;
  animation:blink 1.15s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

/* ---------- oferta ---------- */
.offer{
  max-width:var(--wrap); margin:0 auto;
  padding:0 var(--pad) clamp(72px,10vw,128px);
}
.sec-head{ margin-bottom:clamp(32px,4vw,48px); }
.sec-head h2{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(26px,3.4vw,40px); letter-spacing:-.02em; line-height:1.15;
  margin:0;
}

.cards{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1px;
  background:var(--line);
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
}
.card{
  background:var(--paper-2);
  padding:clamp(26px,3vw,38px);
  transition:background .25s ease;
}
.card:hover{ background:#FBFCFE; }
.sig{
  font-family:var(--f-mono); font-size:12.5px; color:var(--blue);
  display:block; margin-bottom:18px; letter-spacing:.02em;
}
.card h3{
  font-family:var(--f-display); font-weight:700; font-size:21px;
  letter-spacing:-.01em; margin:0 0 10px;
}
.card p{ margin:0; color:var(--ink-soft); font-size:16px; }

/* ---------- kontakt ---------- */
.contact{
  background:var(--panel);
  color:#fff;
  padding:clamp(64px,9vw,110px) var(--pad);
  text-align:center;
  position:relative; overflow:hidden;
}
.contact::before{
  content:""; position:absolute; inset:auto 0 -60% 0; height:100%;
  background:radial-gradient(60% 100% at 50% 100%, rgba(33,72,245,.55), transparent 70%);
  pointer-events:none;
}
.contact > *{ position:relative; }
.contact .eyebrow{ justify-content:center; }
.contact h2{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(28px,4.2vw,48px); line-height:1.1; letter-spacing:-.025em;
  margin:0 0 20px;
}
.contact .lede{ margin:0 auto; }
.mailto{
  display:inline-block; margin-top:38px;
  font-family:var(--f-mono); font-size:clamp(17px,2.4vw,24px);
  color:#fff; text-decoration:none;
  padding-bottom:8px;
  border-bottom:2px solid rgba(78,168,255,.5);
  transition:border-color .2s ease, color .2s ease;
}
.mailto:hover{ color:var(--blue-light); border-color:var(--blue-light); }

/* ---------- stopka ---------- */
.site-foot{
  max-width:var(--wrap); margin:0 auto;
  padding:28px var(--pad) 40px;
  display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between;
  font-size:14px; color:var(--ink-soft);
}
.mono{ font-family:var(--f-mono); }

/* ---------- wejście ---------- */
.reveal{ opacity:0; transform:translateY(18px); }
.reveal.in{ opacity:1; transform:none; transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }

/* ---------- breakpointy ---------- */
@media (min-width:720px){
  .cards{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1000px){
  body{ padding-left:52px; }
  .rail{ display:flex; }
  .hero{ grid-template-columns:1.05fr .95fr; }
  .cards{ grid-template-columns:repeat(4,1fr); }
  .sec-head{ display:flex; align-items:baseline; gap:40px; }
  .sec-head .eyebrow{ margin:0; flex:0 0 auto; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
}