/* ============================================================
   BlitzDoc premium pass v3 — "Schweizer Präzision"
   ============================================================
   Layer file: loads AFTER style.css + landing.css and only
   re-skins — no layout structure changes. Rollback = remove the
   <link>. Design direction: Swiss typographic modernism ×
   clinical trust. Fraunces (self-hosted, variable optical size)
   as display voice over the existing Inter body; warm paper
   ground; the live deep-teal hero is OWNED and refined (it is
   the brand: teal bolt logo) instead of re-blued; Swiss red
   appears only as a micro signature (section markers). All
   motion is transform/opacity only and respects
   prefers-reduced-motion.
   ============================================================ */

:root {
  --pz-ink: #10201e;
  --pz-ink-soft: #3d5350;
  --pz-paper: #faf8f4;
  --pz-paper-deep: #f3efe8;
  --pz-teal: #0f766e;
  --pz-teal-deep: #0b5f59;
  --pz-mint: #8ff5e6;
  --pz-pine: #06211f;      /* hero stage */
  --pz-red: #da291c;       /* Swiss micro-signature only */
  --pz-hairline: rgba(16, 32, 30, 0.10);
  --pz-hairline-strong: rgba(16, 32, 30, 0.16);
  --pz-shadow-card: 0 1px 2px rgba(16, 32, 30, 0.05), 0 8px 24px rgba(16, 32, 30, 0.07);
  --pz-shadow-float: 0 2px 4px rgba(6, 33, 31, 0.18), 0 24px 64px rgba(6, 33, 31, 0.42);
  --pz-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --pz-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- ground ---------- */
html:has(> body.landing-page) { background: var(--pz-paper); }
body.landing-page {
  background: var(--pz-paper) !important;
  color: var(--pz-ink);
}
body.landing-page ::selection {
  background: rgba(15, 118, 110, 0.22);
  color: var(--pz-ink);
}
body.landing-page a:focus-visible,
body.landing-page button:focus-visible {
  outline: 2px solid var(--pz-teal);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- display typography ---------- */
body.landing-page h1,
body.landing-page h2,
body.landing-page .ln-section-heading {
  font-family: var(--pz-font-display);
  font-variation-settings: 'opsz' 72, 'SOFT' 0, 'WONK' 0;
  font-weight: 560;
  letter-spacing: -0.022em;
  line-height: 1.08;
  text-wrap: balance;
}
body.landing-page .ln-section-heading {
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem);
  color: var(--pz-ink);
}
body.landing-page .ln-hero-text h1 {
  font-size: clamp(2.6rem, 1.6rem + 4.2vw, 4.35rem);
  letter-spacing: -0.028em;
}
body.landing-page .ln-section-body,
body.landing-page .ln-hero-subtitle {
  line-height: 1.65;
}

/* Swiss micro-signature on section tags: hairline + red square. */
body.landing-page .ln-section-tag {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pz-teal-deep);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: none;
  border: 0;
  padding: 0 0 0.15rem 0;
  border-bottom: 1px solid var(--pz-hairline-strong);
}
body.landing-page .ln-section-tag::before {
  content: '';
  width: 7px;
  height: 7px;
  background: var(--pz-red);
  flex: 0 0 auto;
}

/* ---------- navigation: frosted precision ----------
   landing.css runs a two-state nav (transparent over the dark hero,
   filled once .nav-scrolled kicks in). The premium layer refines the
   SCROLLED state only and leaves the over-hero state to landing.css —
   a light frosted bar over the pine stage would be wrong, and the
   over-hero link colors (white) must survive. */
/* style.css carries an !important forest on nav pieces (zima-era);
   this file is the topmost layer, so the three nav rules below fight
   back with !important on purpose — scoped, documented, minimal. */
body.landing-page .nav.nav-scrolled {
  background: rgba(250, 248, 244, 0.86) !important;
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--pz-hairline) !important;
  box-shadow: none;
}
body.landing-page .nav.nav-scrolled .nav-links a {
  color: var(--pz-ink-soft);
  font-weight: 500;
}
body.landing-page .nav.nav-scrolled .nav-links a:hover { color: var(--pz-ink); }
body.landing-page .nav-cta {
  background: linear-gradient(160deg, #12968c, var(--pz-teal-deep)) !important;
  color: #f2fffc !important;
  border-radius: 9px !important;
  padding: 0.6rem 1.15rem !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(6, 33, 31, 0.25) !important;
  transition: filter 0.18s var(--pz-ease), transform 0.18s var(--pz-ease);
}
body.landing-page .nav-cta:hover {
  background: linear-gradient(160deg, #0e837a, #0a4f4a) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 18px rgba(6, 33, 31, 0.28) !important;
  transform: translateY(-1px);
}
body.landing-page .nav-login {
  border-radius: 9px !important;
  padding: 0.55rem 1.05rem !important;
  transition: border-color 0.18s var(--pz-ease), color 0.18s var(--pz-ease), background 0.18s var(--pz-ease) !important;
}
body.landing-page .nav.nav-scrolled .nav-login {
  color: var(--pz-ink-soft) !important;
  border: 1px solid var(--pz-hairline-strong) !important;
}
body.landing-page .nav.nav-scrolled .nav-login:hover {
  color: var(--pz-teal-deep) !important;
  border-color: var(--pz-teal) !important;
  background: rgba(15, 118, 110, 0.06) !important;
}
body.landing-page .logo-text { letter-spacing: -0.02em; }

/* ---------- hero: deep-pine stage, engraved grid, grain ---------- */
body.landing-page .ln-hero {
  background:
    radial-gradient(1100px 520px at 18% -10%, rgba(19, 160, 149, 0.34), transparent 62%),
    radial-gradient(900px 600px at 108% 8%, rgba(143, 245, 230, 0.10), transparent 55%),
    linear-gradient(178deg, #041b19 0%, var(--pz-pine) 46%, #07302c 100%);
  position: relative;
  overflow: hidden;
}
/* engraved Swiss grid — barely-there structure lines */
body.landing-page .ln-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(143, 245, 230, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 245, 230, 0.05) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(140% 100% at 50% 0%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(140% 100% at 50% 0%, #000 30%, transparent 78%);
  pointer-events: none;
}
/* film grain */
body.landing-page .ln-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  pointer-events: none;
}
body.landing-page .ln-hero-inner { position: relative; z-index: 1; }
body.landing-page .ln-hero-text h1 { color: #f2fbf8; }
body.landing-page .ln-hero-text h1 .ln-accent {
  color: var(--pz-mint);
  font-style: italic;
  font-variation-settings: 'opsz' 72, 'SOFT' 40, 'WONK' 0;
}
body.landing-page .ln-hero-subtitle { color: rgba(233, 247, 243, 0.78); }
body.landing-page .ln-hero-cta {
  background: linear-gradient(160deg, #12968c, var(--pz-teal-deep));
  border-radius: 11px;
  border: 1px solid rgba(143, 245, 230, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 14px 38px rgba(4, 27, 25, 0.5);
  font-weight: 600;
  letter-spacing: 0.005em;
  transition: transform 0.2s var(--pz-ease), box-shadow 0.2s var(--pz-ease);
}
body.landing-page .ln-hero-cta:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 20px 48px rgba(4, 27, 25, 0.6);
}
body.landing-page .ln-hero-note { color: rgba(233, 247, 243, 0.55); }

/* staggered hero reveal */
@keyframes pz-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
body.landing-page .ln-hero-text > * {
  animation: pz-rise 0.7s var(--pz-ease) both;
}
body.landing-page .ln-hero-text > *:nth-child(1) { animation-delay: 0.05s; }
body.landing-page .ln-hero-text > *:nth-child(2) { animation-delay: 0.15s; }
body.landing-page .ln-hero-text > *:nth-child(3) { animation-delay: 0.25s; }
body.landing-page .ln-hero-text > *:nth-child(4) { animation-delay: 0.33s; }

/* the SOAP specimen: a document, slightly laid on the desk.
   The tilt lives INSIDE the keyframes — a plain pz-rise would end on
   translateY(0) and erase the base rotate for good (fill: both). */
@keyframes pz-rise-tilt {
  from { opacity: 0; transform: rotate(-0.65deg) translateY(18px); }
  to { opacity: 1; transform: rotate(-0.65deg) translateY(0); }
}
body.landing-page .ln-hero-mock,
body.landing-page .ln-hero-demo {
  border-radius: 14px;
  border: 1px solid rgba(143, 245, 230, 0.2);
  box-shadow: var(--pz-shadow-float);
  transform: rotate(-0.65deg);
  transition: transform 0.45s var(--pz-ease), box-shadow 0.45s var(--pz-ease);
  animation: pz-rise-tilt 0.8s var(--pz-ease) 0.28s both;
}
body.landing-page .ln-hero-mock:hover,
body.landing-page .ln-hero-demo:hover {
  transform: rotate(0deg) translateY(-3px);
}
body.landing-page .ln-mock-label {
  letter-spacing: 0.14em;
  color: var(--pz-teal-deep);
}

/* ---------- trust bar: engraved caps strip ---------- */
body.landing-page .ln-trust-bar {
  border-top: 1px solid var(--pz-hairline);
  border-bottom: 1px solid var(--pz-hairline);
  background: var(--pz-paper-deep);
}
body.landing-page .ln-trust-item {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--pz-ink-soft);
}

/* ---------- cards: hairline + lift ---------- */
body.landing-page .ln-feature-card,
body.landing-page .ln-ba-card {
  background: #fffefb;
  border: 1px solid var(--pz-hairline);
  border-radius: 14px;
  box-shadow: var(--pz-shadow-card);
  transition: transform 0.28s var(--pz-ease), box-shadow 0.28s var(--pz-ease), border-color 0.28s var(--pz-ease);
}
body.landing-page .ln-feature-card:hover,
body.landing-page .ln-ba-card:hover {
  transform: translateY(-4px);
  border-color: rgba(15, 118, 110, 0.35);
  box-shadow: 0 2px 4px rgba(16, 32, 30, 0.05), 0 20px 44px rgba(16, 32, 30, 0.11);
}
body.landing-page .ln-feature-tag {
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.15em;
  color: var(--pz-teal-deep);
}
body.landing-page .ln-feature-title {
  font-family: var(--pz-font-display);
  font-variation-settings: 'opsz' 32, 'SOFT' 0;
  font-weight: 580;
  letter-spacing: -0.012em;
}

/* ---------- process steps: editorial numerals ---------- */
body.landing-page .ln-step-num {
  font-family: var(--pz-font-display);
  font-variation-settings: 'opsz' 144, 'SOFT' 0;
  font-weight: 400;
  font-size: 2.6rem;
  line-height: 1;
  color: rgba(15, 118, 110, 0.34);
}
body.landing-page .ln-step-title {
  font-family: var(--pz-font-display);
  font-variation-settings: 'opsz' 28, 'SOFT' 0;
  font-weight: 580;
}

/* ---------- flow nodes / timeline ---------- */
body.landing-page .ln-flow-node {
  border: 1px solid var(--pz-hairline);
  background: #fffefb;
  box-shadow: var(--pz-shadow-card);
  border-radius: 12px;
}
body.landing-page .ln-flow-label { font-weight: 600; color: var(--pz-ink); }
body.landing-page .ln-flow-sublabel { color: var(--pz-ink-soft); }

/* ---------- links: underline grows ---------- */
body.landing-page main a:not(.ln-hero-cta):not(.nav-cta):not(.nav-login):not(.ln-feature-card):not([class*='btn']) {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 96%;
  background-repeat: no-repeat;
  transition: background-size 0.25s var(--pz-ease);
}
body.landing-page main a:not(.ln-hero-cta):not(.nav-cta):not(.nav-login):hover {
  background-size: 100% 1px;
}

/* ---------- FAQ: hairline accordion ---------- */
body.landing-page .faq-item {
  background: #fffefb;
  border: 1px solid var(--pz-hairline);
  border-radius: 12px;
  box-shadow: var(--pz-shadow-card);
  transition: border-color 0.22s var(--pz-ease), box-shadow 0.22s var(--pz-ease);
}
body.landing-page .faq-item:hover {
  border-color: rgba(15, 118, 110, 0.3);
}
body.landing-page .faq-item h3,
body.landing-page .faq-item summary {
  font-family: var(--pz-font-display);
  font-variation-settings: 'opsz' 24, 'SOFT' 0;
  font-weight: 570;
  letter-spacing: -0.008em;
}

/* ---------- Preise (beta page): specimen card ---------- */
body.landing-page .beta-wrap {
  background: #fffefb;
  border: 1px solid var(--pz-hairline);
  border-radius: 16px;
  box-shadow: var(--pz-shadow-card);
}
body.landing-page .beta-eyebrow {
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pz-teal-deep);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
body.landing-page .beta-eyebrow::before {
  content: '';
  width: 7px;
  height: 7px;
  background: var(--pz-red);
  flex: 0 0 auto;
}
body.landing-page .beta-cta {
  background: linear-gradient(160deg, #12968c, var(--pz-teal-deep)) !important;
  border-radius: 11px !important;
  border: 1px solid rgba(143, 245, 230, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 12px 30px rgba(6, 33, 31, 0.28) !important;
  transition: transform 0.2s var(--pz-ease), box-shadow 0.2s var(--pz-ease);
}
body.landing-page .beta-cta:hover { transform: translateY(-2px); }

/* ---------- generic CTA band + buttons ---------- */
body.landing-page .cta .btn,
body.landing-page .btn-white {
  border-radius: 11px;
  font-weight: 600;
}

/* ---------- footer: engraved caps ---------- */
body.landing-page footer,
body.landing-page .footer {
  border-top: 1px solid var(--pz-hairline);
  background: var(--pz-paper-deep);
}
body.landing-page .footer-brand .logo-text,
body.landing-page .footer h4 {
  font-family: var(--pz-font-display);
  font-variation-settings: 'opsz' 20, 'SOFT' 0;
  font-weight: 570;
  letter-spacing: -0.01em;
}
body.landing-page .footer-bottom {
  border-top: 1px solid var(--pz-hairline);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--pz-ink-soft);
}

/* ---------- mobile: no desk-tilt (rotate corners poke past 375px) ------- */
@media (max-width: 720px) {
  body.landing-page .ln-hero-mock,
  body.landing-page .ln-hero-demo {
    transform: none;
    animation-name: pz-rise;
  }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  body.landing-page .ln-hero-text > *,
  body.landing-page .ln-hero-mock,
  body.landing-page .ln-hero-demo {
    animation: none;
  }
  body.landing-page .ln-hero-mock,
  body.landing-page .ln-hero-demo {
    transform: none;
  }
  body.landing-page * {
    transition-duration: 0.01ms !important;
  }
}

/* ---------- kontrast onarimi (2026-07-18) — koyu-tema inline kalintilari ----------
   Premium kagit-zemin gecisi iki yerde eski renkleri acikta birakmisti:
   1) Beta/Preise: kagit zeminde beyaz inline metin görünmezdi.
   2) CTA bandi (funktionen/faq/extension): koyu pine zeminde navy baslik okunmuyordu.
   !important sart: sayfa-ici <style> bloklari bu dosyadan sonra geliyor. */
body.landing-page .beta-wrap h1 { color: var(--pz-ink) !important; }
body.landing-page .beta-wrap h1 em { color: var(--pz-teal-deep) !important; }
body.landing-page .beta-wrap p.lead { color: var(--pz-ink-soft) !important; }
body.landing-page .beta-foot { color: var(--pz-ink-soft) !important; }
body.landing-page .beta-back { color: var(--pz-teal-deep) !important; }
body.landing-page .beta-back:hover { color: var(--pz-teal) !important; }
body.landing-page .beta-legal a,
body.landing-page .beta-legal span { color: var(--pz-ink-soft) !important; }
body.landing-page .beta-legal a:hover { color: var(--pz-ink) !important; }
body.landing-page .cta h2 { color: var(--pz-paper) !important; }
/* 3) Ana sayfa Datenschutz-bölümü: display-tipografi blogu tüm section-heading'leri
   mürekkep-koyusuna boyuyor ve landing.css'in bölüme özel beyazini (specificity)
   eziyordu — koyu pine zeminde baslik görünmezdi. */
body.landing-page .ln-privacy .ln-section-heading { color: var(--pz-paper); }
body.landing-page .cta p { color: rgba(250, 248, 244, 0.78) !important; }