/* ============ Noraline theme — Editorial Clarity ============ */

/* ---- Fonty (variable, self-hosted) ---- */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../fonts/fraunces-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+2000-206F, U+2013, U+2019, U+201C-201E; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../fonts/fraunces-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-024F, U+0104-0119, U+0141-0144, U+015A-015B, U+0179-017C; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url('../fonts/fraunces-latin-wght-italic.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+2000-206F, U+2013, U+2019, U+201C-201E; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url('../fonts/fraunces-latin-ext-wght-italic.woff2') format('woff2-variations');
  unicode-range: U+0100-024F, U+0104-0119, U+0141-0144, U+015A-015B, U+0179-017C; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+2000-206F, U+2013, U+2019, U+201C-201E; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-024F, U+0104-0119, U+0141-0144, U+015A-015B, U+0179-017C; }

/* ---- Tokeny ---- */
:root {
  --color-primary: #2c0e6f; --color-primary-dark: #1f0a50;
  --color-secondary: #b4a7d6; --color-secondary-light: #e9e2f7;
  --color-bg: #faf8ff; --color-footer-bg: #1f0a50;
  --nl-ink: #1c1233; --nl-amber: #f5a623; --nl-muted: #5b5375;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Fraunces', Georgia, serif;
}
html body { font-family: var(--font-sans); color: var(--nl-ink); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 560; letter-spacing: -0.02em; }

/* Alpine x-cloak */
[x-cloak] { display: none !important; }

/* ---- Utility: ziarno, reveal ---- */
.nl-grain { position: relative; }
.nl-grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Scroll-driven reveal — CSS only, fallback: element po prostu widoczny */
@supports (animation-timeline: view()) {
  .nl-reveal { animation: nl-reveal-in linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  @keyframes nl-reveal-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .nl-reveal { animation: none !important; }
  .nl-ticker-track { animation: none !important; }
}

/* ---- Przyciski ---- */
.nl-btn { display: inline-block; background: var(--color-primary); color: #fff; padding: 16px 32px;
  border-radius: 100px; font-weight: 600; font-size: 16px; text-decoration: none; transition: background .2s; }
.nl-btn:hover { background: var(--color-primary-dark); color: #fff; }
.nl-btn-ghost { display: inline-flex; align-items: center; gap: 8px; color: var(--color-primary); font-weight: 600;
  font-size: 16px; text-decoration: none; border-bottom: 2px solid var(--nl-amber); padding-bottom: 2px; }

/* ---- Kicker / nagłówki sekcji ---- */
.nl-kicker { font-size: 13px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--color-primary); display: flex; align-items: center; gap: 12px; }
.nl-kicker::before { content: ""; width: 36px; height: 2px; background: var(--nl-amber); }
.nl-sec-head { display: grid; grid-template-columns: 2fr 8fr; gap: 48px; align-items: end; margin-bottom: 56px; }
.nl-sec-no { font-family: var(--font-display); font-size: 19px; color: var(--color-primary); font-weight: 600; }
.nl-sec-no::after { content: ""; display: block; width: 56px; height: 2px; background: var(--nl-amber); margin-top: 10px; }
.nl-h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.08; max-width: 740px; }
.nl-lead { font-size: 17px; color: var(--nl-muted); max-width: 620px; margin-top: 16px; }

/* ---- Hero ---- */
.nl-hero { padding: 88px 0 64px; }
.nl-hero-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: center; }
.nl-h1 { font-family: var(--font-display); font-size: clamp(40px, 5.5vw, 76px); line-height: 1.02; letter-spacing: -0.02em; font-weight: 560; }
.nl-h1 em { font-style: italic; font-weight: 420; color: var(--color-primary); }
.nl-hero p { font-size: 19px; color: #4b4462; max-width: 480px; margin: 28px 0 36px; }
.nl-panel { background: #fff; border: 2px solid var(--nl-ink); border-radius: 18px; overflow: hidden;
  box-shadow: 10px 10px 0 var(--color-secondary); transform: rotate(1.5deg); }
.nl-panel img { width: 100%; display: block; }
.nl-panel--amber { box-shadow: -10px 10px 0 var(--nl-amber); transform: rotate(-1.5deg); }
.nl-sticker { position: absolute; top: -18px; left: -22px; background: var(--nl-amber); color: var(--nl-ink);
  font-weight: 700; font-size: 13px; padding: 10px 16px; border-radius: 100px; transform: rotate(-6deg);
  box-shadow: 0 4px 14px rgba(0,0,0,.12); z-index: 2; }

/* ---- Ticker ---- */
.nl-ticker { border-block: 1px solid #e6dff2; padding: 15px 0; overflow: hidden; white-space: nowrap;
  font-size: 13.5px; letter-spacing: .18em; text-transform: uppercase; color: #7a6f96; font-weight: 600; }
.nl-ticker-track { display: inline-block; animation: nl-tick 40s linear infinite; }
.nl-ticker span { margin: 0 28px; } .nl-ticker b { color: var(--nl-amber); }
@keyframes nl-tick { to { transform: translateX(-50%); } }

/* ---- Strip komiksowy ---- */
.nl-strip { display: grid; grid-template-columns: repeat(4, 1fr); border: 2px solid var(--nl-ink);
  border-radius: 20px; overflow: hidden; background: #fff; }
.nl-strip .cell { border-right: 2px solid var(--nl-ink); }
.nl-strip .cell:last-child { border-right: none; }
.nl-strip img { width: 100%; display: block; border-bottom: 2px solid var(--nl-ink); }
.nl-strip .cap { padding: 22px 22px 26px; }
.nl-strip .cap h3 { font-size: 19px; line-height: 1.25; margin-bottom: 8px; }
.nl-strip .cap p { font-size: 14px; color: var(--nl-muted); }
.nl-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-primary); background: var(--color-secondary-light); border-radius: 100px; padding: 4px 10px; margin-bottom: 12px; }

/* ---- Pas cytatu ---- */
.nl-band { background: var(--color-primary); color: #fff; padding: 100px 0; position: relative; overflow: hidden; }
.nl-band blockquote { font-family: var(--font-display); font-size: clamp(28px, 4vw, 54px); line-height: 1.15;
  font-style: italic; font-weight: 420; max-width: 900px; }
.nl-band blockquote b { color: var(--nl-amber); font-style: normal; font-weight: 600; }
.nl-band .attr { margin-top: 32px; font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: var(--color-secondary); }
.nl-band::before { content: ""; position: absolute; right: -140px; top: -140px; width: 480px; height: 480px;
  border-radius: 50%; background: radial-gradient(circle, rgba(180,167,214,.35), transparent 70%); }

/* ---- Editorial rows (usługi) ---- */
.nl-rows { border-top: 2px solid var(--nl-ink); }
.nl-row { display: grid; grid-template-columns: 80px 4fr 5fr 60px; gap: 36px; align-items: center;
  padding: 38px 0; border-bottom: 2px solid var(--nl-ink); text-decoration: none; color: var(--nl-ink); }
.nl-row .no { font-family: var(--font-display); font-size: 17px; color: #6d6394; }
.nl-row h3 { font-size: clamp(22px, 2.5vw, 32px); letter-spacing: -.5px; transition: color .2s; }
.nl-row p { font-size: 15.5px; color: var(--nl-muted); }
.nl-row .arr { font-size: 26px; color: var(--color-primary); text-align: right; transition: transform .2s; }
.nl-row:hover h3 { color: var(--color-primary); }
.nl-row:hover .arr { transform: translateX(6px); }

/* ---- Proof / stats ---- */
.nl-proof { display: grid; grid-template-columns: 5fr 6fr; gap: 72px; align-items: center; }
.nl-proof blockquote { font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.3;
  font-style: italic; font-weight: 420; margin: 24px 0; }
.nl-stats { display: flex; gap: 48px; margin-top: 32px; flex-wrap: wrap; }
.nl-stats .s b { font-family: var(--font-display); font-size: clamp(30px, 3.5vw, 44px); font-weight: 600;
  color: var(--color-primary); display: block; line-height: 1; }
.nl-stats .s span { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #7a6f96; }

/* ---- Process steps (pionowy timeline zigzag) ---- */
.nl-process { position: relative; max-width: 880px; margin: 0 auto; }
.nl-process::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
  background: var(--nl-amber); transform: translateX(-50%); }
.nl-step { position: relative; width: calc(50% - 44px); padding: 0 0 48px; }
.nl-step:nth-child(odd) { margin-left: 0; text-align: right; }
.nl-step:nth-child(even) { margin-left: calc(50% + 44px); }
.nl-step .node { position: absolute; top: 0; width: 56px; height: 56px; border-radius: 50%;
  background: #fff; border: 2px solid var(--nl-ink); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--color-primary); z-index: 2; }
.nl-step:nth-child(odd) .node { right: -72px; }
.nl-step:nth-child(even) .node { left: -72px; }
.nl-step h3 { font-size: 22px; margin-bottom: 8px; }
.nl-step p { font-size: 15px; color: var(--nl-muted); }
@media (max-width: 768px) {
  .nl-process::before { left: 27px; }
  .nl-step, .nl-step:nth-child(even) { width: auto; margin-left: 72px; text-align: left; }
  .nl-step:nth-child(odd) { text-align: left; }
  .nl-step:nth-child(odd) .node, .nl-step:nth-child(even) .node { left: -72px; right: auto; }
}

/* ---- Fact strip (kompaktowy pasek faktów pod hero) ---- */
.nl-facts { border-block: 2px solid var(--nl-ink); padding: 22px 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px 32px; }
.nl-facts .f b { font-family: var(--font-display); font-weight: 600; font-size: 22px;
  color: var(--color-primary); display: block; line-height: 1.15; }
.nl-facts .f span { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: #7a6f96; }

/* ---- Before / After (scenariusz) ---- */
.nl-ba { display: grid; grid-template-columns: 1fr 72px 1fr; gap: 20px; align-items: stretch; }
.nl-ba .panel { border-radius: 20px; padding: 34px 30px; }
.nl-ba .panel .tag-line { font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 14px; }
.nl-ba .panel b { font-family: var(--font-display); font-weight: 600; font-size: clamp(34px, 4vw, 52px); display: block; line-height: 1; }
.nl-ba .panel span { font-size: 14px; display: block; margin-top: 10px; }
.nl-ba .before { background: #f4f2f8; border: 1px solid #d9d3e8; color: #5b5375; }
.nl-ba .before .tag-line { color: #7a6f96; } .nl-ba .before b { color: #6d6394; }
.nl-ba .after { background: #fff; border: 2px solid var(--nl-ink); box-shadow: 8px 8px 0 var(--nl-amber); color: var(--nl-ink); }
.nl-ba .after .tag-line { color: var(--nl-amber); } .nl-ba .after b { color: var(--color-primary); }
.nl-ba .arrow { display: flex; align-items: center; justify-content: center; font-size: 34px; color: var(--color-primary); }
@media (max-width: 768px) {
  .nl-ba { grid-template-columns: 1fr; }
  .nl-ba .arrow { transform: rotate(90deg); padding: 4px 0; }
}

/* ---- Dymki opinii (testimonials) ---- */
.nl-bubble { position: relative; background: #fff; border: 2px solid var(--nl-ink); border-radius: 20px;
  padding: 28px; }
.nl-bubble::after { content: ""; position: absolute; bottom: -14px; left: 40px; width: 24px; height: 24px;
  background: #fff; border-right: 2px solid var(--nl-ink); border-bottom: 2px solid var(--nl-ink);
  transform: rotate(45deg) skew(10deg, 10deg); }
.nl-bubble .stars { color: var(--nl-amber); letter-spacing: 3px; margin-bottom: 12px; }
.nl-bubble p { font-size: 15.5px; line-height: 1.55; }
.nl-bubble-wrap:nth-child(odd) .nl-bubble { transform: rotate(-0.8deg); }
.nl-bubble-wrap:nth-child(even) .nl-bubble { transform: rotate(0.8deg); }
.nl-bubble-who { display: flex; align-items: center; gap: 12px; margin: 26px 0 0 36px; }
.nl-bubble-who img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--nl-ink); }
.nl-bubble-who b { display: block; font-size: 14.5px; }
.nl-bubble-who span { font-size: 12.5px; color: var(--nl-muted); }

/* ---- Format rail (edukacja) ---- */
.nl-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.nl-rail-tile { display: flex; align-items: center; gap: 16px; background: #fff; border: 2px solid var(--nl-ink);
  border-radius: 18px; padding: 20px 22px; text-decoration: none; color: var(--nl-ink); position: relative;
  transition: transform .2s; }
a.nl-rail-tile:hover { transform: translateY(-3px); }
.nl-rail-tile.soon { border-style: dashed; border-color: #b9aed6; background: transparent; color: #7a6f96; }
.nl-rail-tile .ic { width: 46px; height: 46px; border-radius: 14px; background: var(--color-secondary-light);
  color: var(--color-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nl-rail-tile.soon .ic { background: #eee9f6; color: #9a90b8; }
.nl-rail-tile h4 { font-family: var(--font-display); font-weight: 560; font-size: 18px; }
.nl-rail-tile p { font-size: 12.5px; color: var(--nl-muted); }
.nl-rail-tile .arr { margin-left: auto; color: var(--color-primary); font-size: 20px; }
@media (max-width: 900px) { .nl-rail { grid-template-columns: 1fr; } }

/* ---- Prose (przeniesione z claude-base — używane przez blog/kursy) ---- */
.prose { line-height: 1.75; }
.prose p { margin-bottom: 1.25em; }
.prose h1, .prose h2, .prose h3, .prose h4 { font-weight: 600; margin-top: 1.5em; margin-bottom: .5em; }
.prose h1 { font-size: 2.25em; } .prose h2 { font-size: 1.5em; } .prose h3 { font-size: 1.25em; }
.prose ul, .prose ol { padding-left: 1.5em; margin-bottom: 1.25em; }
.prose li { margin-bottom: .5em; }
.prose a { color: var(--color-primary); text-decoration: underline; }
.prose a:hover { color: var(--color-primary-dark); }
.prose img { border-radius: .75rem; margin: 1.5em 0; max-width: 100%; height: auto !important; }
.prose blockquote { border-left: 4px solid var(--color-secondary); padding-left: 1em; font-style: italic; color: #4b5563; }
.prose pre { background: #1a1a2e; color: #e5e7eb; padding: 1rem; border-radius: .75rem; overflow-x: auto; margin: 1.5em 0; }
.prose code { font-size: .875em; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; }
.prose th, .prose td { border: 1px solid var(--color-secondary-light); padding: .5em .75em; text-align: left; }
.prose th { background: var(--color-bg); font-weight: 600; }

/* Nav/footer resety (przeniesione z claude-base) */
nav ul, nav ol, header ul, header ol, footer ul, footer ol { list-style: none !important; margin: 0; padding: 0; }
nav li, header li, footer li { list-style: none !important; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* ---- Responsywność ---- */
@media (max-width: 1024px) {
  .nl-hero-grid, .nl-proof { grid-template-columns: 1fr; gap: 40px; }
  .nl-sec-head { grid-template-columns: 1fr; gap: 16px; }
  .nl-row { grid-template-columns: 48px 1fr 40px; }
  .nl-row p { grid-column: 2; }
}
@media (max-width: 768px) {
  .nl-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .nl-strip .cell { min-width: 78vw; scroll-snap-align: start; border-right: 2px solid var(--nl-ink); }
  .nl-hero { padding: 56px 0 40px; }
}