/* Webfonts. No brand font binaries were provided — Sora / IBM Plex are Google Fonts stand-ins chosen to match the wordmark's thin, wide, geometric letterforms. Replace this import with local @font-face rules if licensed brand fonts arrive. */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* Zapytania — colour primitives + semantic aliases. Base hues come from the wordmark: #002E4D (ink navy) and #5994FF (signal blue). */
:root{
  /* ink navy — the brand's dark */
  --navy-950:#00131F;--navy-900:#001E33;--navy-800:#002E4D;--navy-700:#0A4670;--navy-600:#175C8C;--navy-500:#2A75A8;
  /* signal blue — the brand's accent */
  --blue-700:#2557C4;--blue-600:#3B78E8;--blue-500:#5994FF;--blue-400:#8AB4FF;--blue-300:#B4CFFF;--blue-100:#DEE9FF;--blue-50:#F0F5FF;
  /* paper + cool greys */
  --white:#FFFFFF;--paper-50:#FBFAF8;--paper-100:#F5F3EF;--paper-200:#EBE8E2;
  --grey-700:#3F5260;--grey-600:#5A6C7A;--grey-500:#7C8B97;--grey-400:#A6B1BA;--grey-300:#C9D0D6;--grey-200:#E1E5E9;--grey-100:#EFF1F3;
  /* semantic hues */
  --green-600:#1F7A5C;--green-100:#DFF1EA;--amber-600:#A96A00;--amber-100:#FBEED6;--red-600:#C0392B;--red-100:#FBE3E0;

  /* text */
  --text-primary:var(--navy-800);--text-secondary:var(--grey-700);--text-muted:var(--grey-500);
  --text-accent:var(--blue-600);--text-inverse:var(--white);--text-inverse-muted:var(--blue-300);--text-disabled:var(--grey-400);
  /* surfaces */
  --surface-page:var(--paper-50);--surface-card:var(--white);--surface-sunken:var(--paper-100);--surface-raised:var(--white);
  --surface-inverse:var(--navy-800);--surface-inverse-deep:var(--navy-950);--surface-accent-soft:var(--blue-50);--surface-hover:var(--grey-100);
  /* borders */
  --border-hairline:var(--grey-200);--border-subtle:var(--grey-300);--border-strong:var(--navy-800);--border-accent:var(--blue-500);--border-inverse:rgba(255,255,255,.18);
  /* interactive */
  --action-primary:var(--navy-800);--action-primary-hover:var(--navy-900);--action-primary-active:var(--navy-950);
  --action-accent:var(--blue-500);--action-accent-hover:var(--blue-600);--action-accent-active:var(--blue-700);
  --focus-ring:var(--blue-500);
  /* status */
  --status-success:var(--green-600);--status-success-soft:var(--green-100);--status-warning:var(--amber-600);--status-warning-soft:var(--amber-100);
  --status-danger:var(--red-600);--status-danger-soft:var(--red-100);--status-info:var(--blue-600);--status-info-soft:var(--blue-50);
  /* substrate: 1px dot grid used on dark and paper sections */
  --dot-grid-ink:rgba(0,46,77,.09);--dot-grid-inverse:rgba(137,180,255,.11);
}

/* Zapytania — type scale. Sora for display/headings, IBM Plex Sans for body/UI, IBM Plex Mono for labels + code. */
:root{
  --font-display:'Sora','Helvetica Neue',Arial,sans-serif;
  --font-sans:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --weight-light:300;--weight-regular:400;--weight-medium:500;--weight-semibold:600;

  /* sizes — 1.25 major-third-ish ramp, clamped display sizes for marketing surfaces */
  --text-3xs:11px;--text-2xs:12px;--text-xs:13px;--text-sm:15px;--text-base:17px;--text-md:19px;
  --text-lg:22px;--text-xl:27px;--text-2xl:34px;--text-3xl:44px;--text-4xl:56px;--text-5xl:72px;--text-6xl:92px;

  --leading-tight:1.04;--leading-snug:1.18;--leading-normal:1.5;--leading-relaxed:1.62;

  --tracking-display:-0.03em;--tracking-heading:-0.015em;--tracking-normal:0;--tracking-label:0.18em;--tracking-mono:0.02em;

  /* composed roles */
  --type-display:var(--weight-light) var(--text-5xl)/var(--leading-tight) var(--font-display);
  --type-h1:var(--weight-light) var(--text-4xl)/var(--leading-tight) var(--font-display);
  --type-h2:var(--weight-light) var(--text-2xl)/var(--leading-snug) var(--font-display);
  --type-h3:var(--weight-medium) var(--text-lg)/var(--leading-snug) var(--font-display);
  --type-body-lg:var(--weight-regular) var(--text-md)/var(--leading-relaxed) var(--font-sans);
  --type-body:var(--weight-regular) var(--text-base)/var(--leading-normal) var(--font-sans);
  --type-body-sm:var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-sans);
  --type-ui:var(--weight-medium) var(--text-sm)/1.2 var(--font-sans);
  --type-label:var(--weight-medium) var(--text-2xs)/1.2 var(--font-mono);
  --type-code:var(--weight-regular) var(--text-xs)/var(--leading-normal) var(--font-mono);
}

/* Zapytania — spacing, radii, borders, layout. 4px base; section rhythm in 8px multiples. */
:root{
  --space-0:0;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;
  --space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;--space-32:128px;--space-40:160px;

  --radius-none:0;--radius-xs:2px;--radius-sm:4px;--radius-md:6px;--radius-lg:10px;--radius-xl:16px;--radius-pill:999px;

  --border-width:1px;--border-width-thick:2px;

  --container-max:1240px;--container-narrow:760px;--gutter:24px;--gutter-lg:48px;
  --section-y:var(--space-24);--section-y-sm:var(--space-16);
  --control-h-sm:32px;--control-h:40px;--control-h-lg:48px;
}

/* Zapytania — shadows + motion. Shadows are near-invisible; hierarchy comes from hairlines, not depth. */
:root{
  --shadow-none:none;
  --shadow-hairline:0 0 0 1px var(--border-hairline);
  --shadow-sm:0 1px 2px rgba(0,30,51,.05);
  --shadow-md:0 2px 6px rgba(0,30,51,.06),0 1px 2px rgba(0,30,51,.04);
  --shadow-lg:0 12px 32px -8px rgba(0,30,51,.14);
  --shadow-overlay:0 24px 64px -16px rgba(0,19,31,.32);
  --shadow-inset-hairline:inset 0 0 0 1px var(--border-hairline);
  --ring-focus:0 0 0 2px var(--surface-page),0 0 0 4px var(--focus-ring);

  --ease-out:cubic-bezier(.22,.61,.36,1); /* @kind other */
  --ease-in-out:cubic-bezier(.4,0,.2,1); /* @kind other */
  --duration-instant:80ms;/* @kind other */--duration-fast:140ms;/* @kind other */--duration-normal:220ms;/* @kind other */--duration-slow:420ms;/* @kind other */
  --transition-control:background-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out);
}

/* Zapytania — base element styles. Kept deliberately thin: tokens do the work. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font:var(--type-body);text-wrap:pretty;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;color:var(--text-primary);font-family:var(--font-display);letter-spacing:var(--tracking-heading);font-weight:var(--weight-light)}
h1{font:var(--type-h1);letter-spacing:var(--tracking-display)}
h2{font:var(--type-h2)}
h3{font:var(--type-h3)}
p{margin:0 0 var(--space-4)}
a{color:var(--text-accent);text-decoration:none;border-bottom:1px solid var(--blue-300);transition:var(--transition-control)}
a:hover{color:var(--action-accent-active);border-bottom-color:var(--action-accent)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:none;box-shadow:var(--ring-focus)}
code,kbd,samp,pre{font-family:var(--font-mono);font-size:var(--text-xs)}
hr{border:0;border-top:var(--border-width) solid var(--border-hairline);margin:var(--space-8) 0}
::selection{background:var(--blue-100);color:var(--navy-900)}
/* the brand substrate: a 1px dot grid, used behind hero and section blocks */
.zp-dots{background-image:radial-gradient(var(--dot-grid-ink) 1px,transparent 1px);background-size:24px 24px;background-position:-1px -1px}
.zp-dots-inverse{background-image:radial-gradient(var(--dot-grid-inverse) 1px,transparent 1px);background-size:24px 24px;background-position:-1px -1px}
.zp-label{font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}
.zp-rule{height:1px;background:var(--border-hairline)}