/* UTF-8 */
@charset "utf-8";

:root {
  --text: #0f172a;
  --muted: #64748b;
  --bg: #ffffff;
  --bg-soft: #f8fafc;
  --primary: #6366f1;
  --secondary: #8b5cf6;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: var(--text); background: var(--bg); line-height: 1.7; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.section { padding: 56px 0; }
.section-title { font-size: 1.75rem; margin: 0 0 16px; color: var(--text); }

/* Header */
.header { border-bottom: 1px solid #e5e7eb; background: var(--bg); }
.header .company-name { font-size: 1.25rem; margin: 0; padding: 12px 0 4px; font-weight: 700; }
.header .company-meta { margin: 0 0 12px; color: var(--muted); }
.header a { color: var(--primary); text-decoration: none; }
.header a:hover { text-decoration: underline; }

/* Hero (pojedynczy kadr zamiast slidera) */
.hero { position: relative; height: 45vh; min-height: 280px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, rgba(99,102,241,.6), rgba(139,92,246,.6)), url('images/computer-desk-stickers.jpg') center/cover no-repeat; }
.hero .hero-overlay { text-align: center; backdrop-filter: blur(2px); padding: 16px; }
.hero h2 { margin: 0 0 6px; font-size: 1.6rem; }
.hero p { margin: 0; opacity: 0.95; }

/* About */
.about p { color: var(--text); max-width: 80ch; }

/* Info */
.notice { background: var(--bg-soft); border-left: 4px solid var(--primary); padding: 12px 16px; margin: 0; color: var(--text); }

/* Download link */
.download-link { display: inline-block; padding: 10px 14px; border-radius: 8px; background: #eef2ff; color: #3730a3; text-decoration: none; border: 1px solid #c7d2fe; }
.download-link:hover { background: #e0e7ff; }

/* Footer */
.footer { border-top: 1px solid #e5e7eb; padding: 20px 0; text-align: center; color: var(--muted); }
.footer a { color: var(--primary); text-decoration: none; }
.footer a:hover { text-decoration: underline; }

/* Responsive */
@media (max-width: 640px) {
  .section { padding: 40px 0; }
  .hero { height: 38vh; }
  .section-title { font-size: 1.5rem; }
}