/* =====================================================================
   Otter Solutions — base.css
   Tokeny, reset, układ, typografia, przyciski, narzędzia, animacje
   ===================================================================== */

:root {
	/* Kolory marki */
	--navy: #0b1220;
	--navy-2: #111a2e;
	--navy-3: #1a2540;
	--brand: #4f46e5;      /* indygo (kolor PWA marki) */
	--brand-2: #14b8a6;    /* teal — motyw wydry/wody */
	--brand-3: #6366f1;
	--accent: #f59e0b;     /* bursztyn */

	--ink: #0f172a;        /* slate-900 */
	--ink-2: #334155;      /* slate-700 */
	--muted: #64748b;      /* slate-500 */
	--line: #e2e8f0;       /* slate-200 */
	--bg: #ffffff;
	--bg-soft: #f6f8fc;
	--bg-softer: #eef2f9;

	/* Gradienty */
	--grad: linear-gradient(135deg, #4f46e5 0%, #14b8a6 100%);
	--grad-soft: linear-gradient(135deg, rgba(79,70,229,.12), rgba(20,184,166,.12));
	--grad-navy: linear-gradient(160deg, #0b1220 0%, #111a2e 60%, #0d1426 100%);

	/* Typografia */
	--font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-display: "Sora", var(--font);

	/* Cień */
	--shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08);
	--shadow: 0 6px 18px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.05);
	--shadow-lg: 0 24px 50px -12px rgba(15,23,42,.22);
	--shadow-brand: 0 14px 30px -8px rgba(79,70,229,.45);

	/* Inne */
	--radius: 16px;
	--radius-sm: 10px;
	--radius-lg: 24px;
	--container: 1180px;
	--header-h: 74px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html:focus-within { scroll-behavior: smooth; }

body {
	font-family: var(--font);
	color: var(--ink);
	background: var(--bg);
	line-height: 1.65;
	font-size: 17px;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea { font: inherit; }
:focus-visible { outline: 3px solid rgba(79,70,229,.45); outline-offset: 2px; border-radius: 6px; }

/* ---------- Układ ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }

.section { padding: 96px 0; }
.section-soft { background: var(--bg-soft); }

.section-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.section-head h2 { margin-top: 8px; }

.eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: var(--brand);
	background: var(--grad-soft);
	padding: 7px 14px; border-radius: 999px;
}
.eyebrow.light { color: #fff; background: rgba(255,255,255,.12); }

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.12; color: var(--ink); letter-spacing: -.02em; }
h1 { font-size: clamp(2.3rem, 5.4vw, 3.7rem); font-weight: 800; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 700; }
h3 { font-size: 1.22rem; font-weight: 700; }
h4 { font-size: 1.02rem; font-weight: 600; }

p { color: var(--ink-2); }
.lead { font-size: 1.12rem; color: var(--ink-2); }

.grad-text {
	background: var(--grad);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- Przyciski ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-weight: 600; font-size: 1rem;
	padding: 14px 26px; border-radius: 999px;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
	white-space: nowrap;
}
.btn-primary { background: var(--grad); color: #fff; box-shadow: var(--shadow-brand); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -8px rgba(79,70,229,.55); }
.btn-ghost { background: rgba(255,255,255,.08); color: #fff; border: 1.5px solid rgba(255,255,255,.28); backdrop-filter: blur(6px); }
.btn-ghost:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }
.btn-block { width: 100%; }

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

/* ---------- Back to top ---------- */
.to-top {
	position: fixed; right: 22px; bottom: 22px; z-index: 60;
	width: 48px; height: 48px; border-radius: 50%;
	background: var(--grad); color: #fff; font-size: 20px; font-weight: 700;
	box-shadow: var(--shadow-lg);
	opacity: 0; visibility: hidden; transform: translateY(16px);
	transition: opacity .3s, transform .3s, visibility .3s;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { transform: translateY(-3px); }

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