/* ── Rolling Text (Pionowy Ticker) ────────────────────── */
.hero-split-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  flex-grow: 1;
  gap: 2rem;
}

.hero-left {
  max-width: 60%;
}

.rolling-text-wrapper {
  position: relative;
  width: 640px;
  height: 500px; /* Wysokość obszaru, w którym kręci się tekst */
  overflow: hidden;
  display: flex;
  align-items: center;
  /* Maskowanie gradientem, żeby tekst łagodnie znikał na krawędziach góra/dół */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
}

.rolling-track {
  display: flex;
  flex-direction: column;
  animation: scrollVertical 30s linear infinite;
}

/* Zatrzymanie animacji po najechaniu myszką (opcjonalne, bardzo wygodne) */
.rolling-text-wrapper:hover .rolling-track {
  animation-play-state: paused;
}

.rolling-item {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.9rem;
  color: var(--text-muted);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 1.2rem;
  flex-shrink: 0;
}

/* Wyróżnienie kluczowych słów lub "oraz wiele więcej..." */
.rolling-item.highlight {
  color: #5cfffa; /* Emerald-400 */
  font-weight: 500;
}

.rolling-item::before {
  content: "→";
  color: rgba(0, 240, 255, 0.5);
}

@keyframes scrollVertical {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%); /* Przesunięcie dokładnie o połowę zduplikowanej listy */
  }
}

/* Ukrywanie na małych ekranach telefonicznych, żeby nie psuć layoutu */
@media (max-width: 768px) {
  .rolling-text-wrapper {
    display: none;
  }
  .hero-left {
    max-width: 100%;
  }
}




/* ── Base ─────────────────────────────────────────────── */
:root {
  --bg-primary: #050510;
  --bg-secondary: #0a0a18;
  --accent: #00f0ff;
  --accent-dim: rgba(0, 240, 255, 0.15);
  --text-muted: #8a8ab0;
  --border: rgba(255, 255, 255, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg-primary);
}

/* ── Sticky scroll panels ─────────────────────────────── */
.scroll-container {
  height: 600vh;
  position: relative;
}

.panel {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.panel-hero    { z-index: 1; background: var(--bg-primary); }
.panel-stats   { z-index: 2; background: #07071a; }
.panel-chatbot { z-index: 3; background: var(--bg-secondary); }
.panel-pipeline{ z-index: 4; background: #080818; }
.panel-extractor{ z-index: 5; background: #060614; }
.panel-contact  { z-index: 6; background: #04040a; }

.panel-inner {
  position: relative;
  z-index: 1;
}

/* Subtle gradient overlays per section */
.panel-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 20% 80%, rgba(0, 240, 255, 0.06) 0%, transparent 70%);
  pointer-events: none;
}

.panel-chatbot::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 80% 20%, rgba(99, 102, 241, 0.05) 0%, transparent 70%);
  pointer-events: none;
}

.panel-pipeline::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(0, 240, 255, 0.04) 0%, transparent 70%);
  pointer-events: none;
}

.panel-extractor::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 40% at 10% 50%, rgba(245, 158, 11, 0.04) 0%, transparent 70%);
  pointer-events: none;
}

.panel-contact::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 90% 30%, rgba(0, 240, 255, 0.05) 0%, transparent 70%);
  pointer-events: none;
}

.panel-stats::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 20% 80%, rgba(0, 240, 255, 0.05) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(189, 0, 255, 0.05) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Hero ─────────────────────────────────────────────── */
.btn-contact {
  backdrop-filter: blur(8px);
}

.panel-hero h1 {
  text-shadow: 0 0 30px rgba(0, 240, 255, 0.15), 0 0 60px rgba(189, 0, 255, 0.1);
}

.panel-hero .text-cyan-400\/90 {
  text-shadow: 0 0 16px rgba(0, 240, 255, 0.35);
}

/* ── Impact / Stats panel ─────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat-card {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.75rem;
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 240, 255, 0.25);
  box-shadow: 0 0 24px rgba(0, 240, 255, 0.08);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #00f0ff, #bd00ff, #ffd700);
  opacity: 0.6;
}

.stat-card.cyan { --stat-glow: rgba(0, 240, 255, 0.12); }
.stat-card.magenta { --stat-glow: rgba(189, 0, 255, 0.12); }
.stat-card.gold { --stat-glow: rgba(255, 215, 0, 0.12); }
.stat-card.lime { --stat-glow: rgba(204, 255, 0, 0.12); }

.stat-card:hover {
  box-shadow: 0 0 28px var(--stat-glow, rgba(0, 240, 255, 0.08));
}

.stat-number {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0.75rem;
  background: linear-gradient(135deg, #00f0ff, #a8fff0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-card.magenta .stat-number {
  background: linear-gradient(135deg, #bd00ff, #ff77ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-card.gold .stat-number {
  background: linear-gradient(135deg, #ffd700, #ffea80);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-card.lime .stat-number {
  background: linear-gradient(135deg, #ccff00, #e5ff80);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-label {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.scroll-hint {
  animation: fade-pulse 2s ease-in-out infinite;
}

@keyframes fade-pulse {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}

/* ── Chatbot ──────────────────────────────────────────── */
.chatbot-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .chatbot-container {
    grid-template-columns: 1fr 280px;
    align-items: start;
  }
}

.chatbot-window {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  backdrop-filter: blur(12px);
}

.chatbot-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}

.chatbot-messages {
  padding: 1.25rem;
  min-height: 280px;
  max-height: 360px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  scroll-behavior: smooth;
}

.chat-bubble {
  max-width: 85%;
  padding: 0.75rem 1rem;
  border-radius: 14px;
  font-size: 0.9rem;
  line-height: 1.5;
  animation: bubble-in 0.3s ease forwards;
}

@keyframes bubble-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.chat-bubble-bot {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  color: #c8c8e0;
}

.chat-bubble-user {
  align-self: flex-end;
  background: rgba(0, 240, 255, 0.15);
  border: 1px solid rgba(0, 240, 255, 0.25);
  color: #e0ffff;
}

.chat-typing {
  padding: 0 1.25rem 1rem;
}

.chat-typing.hidden {
  display: none;
}

.typing-dots {
  display: inline-flex;
  gap: 4px;
  padding: 0.6rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: 14px;
}

.typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: typing-bounce 1.2s ease-in-out infinite;
}

.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%            { transform: translateY(-5px); opacity: 1; }
}

.chatbot-prompts {
  display: flex;
  flex-direction: column;
}

.prompt-btn {
  text-align: left;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: #a0a0c8;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.prompt-btn:hover {
  background: rgba(0, 240, 255, 0.08);
  border-color: rgba(0, 240, 255, 0.3);
  color: #e0ffff;
}

.prompt-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.chatbot-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}

.chatbot-input {
  flex: 1;
  min-width: 0;
  padding: 0.65rem 0.9rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: #f0f8ff;
  font-size: 0.9rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.chatbot-input::placeholder {
  color: #8a8ab0;
}

.chatbot-input:focus {
  border-color: rgba(0, 240, 255, 0.4);
  background: rgba(255, 255, 255, 0.06);
}

.chatbot-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.chatbot-send {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 10px;
  background: rgba(0, 240, 255, 0.15);
  color: #a8fff0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.chatbot-send:hover:not(:disabled) {
  background: rgba(0, 240, 255, 0.25);
  border-color: rgba(0, 240, 255, 0.5);
  color: #e0ffff;
}

.chatbot-send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Pipeline ─────────────────────────────────────────── */
.pipeline-container {
  position: relative;
  min-height: 400px;
  padding: 1rem 0 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centers vertically */
  align-items: center;     /* Centers horizontally */
  width: 100%;
  max-width: 1200px;       /* Keeps it bounded */
  margin: 0 auto;          /* Centers container block on large screens */
}

.pipeline-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.pipeline-nodes {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center; /* Centers nodes horizontally on desktop */
  gap: clamp(2rem, 15vw, 12rem);
  flex-wrap: nowrap;
  padding: 0.5rem 0;
  width: 100%;
}

.pipeline-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  transform: scale(0.7) translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  flex-shrink: 0;
}

.pipeline-node.visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.node-icon {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.pipeline-node.visible .node-icon {
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.15);
  border-color: rgba(0, 240, 255, 0.3);
}

.node-icon-openai {
  background: rgba(255, 255, 255, 0.08);
}

.node-icon-ai {
  background: rgba(0, 240, 255, 0.1);
}

.node-icon-sent {
  background: rgba(0, 240, 255, 0.15);
  border-color: rgba(0, 240, 255, 0.4);
}

.node-icon-category.complaint { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.25); }
.node-icon-category.inquiry   { background: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.25); }
.node-icon-category.order     { background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.25); }

.icon-img {
  width: 36px;
  height: 36px;
  color: #c8c8e0;
}

.node-icon-openai .icon-img { color: #fff; }

.node-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
  white-space: nowrap;
}

.pipeline-split {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.pipeline-split.visible {
  opacity: 1;
  transform: scale(1);
}

.pipeline-node-sm .node-icon {
  width: 65px;
  height: 65px;
  border-radius: 10px;
}

.pipeline-node-sm .icon-img {
  width: 28px;
  height: 28px;
}

.pipeline-line {
  fill: none;
  stroke: #00f0ff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 0.8s ease;
  opacity: 0.85;
}

.pipeline-line.drawn {
  stroke-dashoffset: 0;
}

.replay-btn {
  display: inline-flex;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem 0;
}

/* ── Extractor ────────────────────────────────────────── */
.extractor-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
}

@media (min-width: 768px) {
  .extractor-container {
    grid-template-columns: 1fr auto 1fr;
    gap: 2rem;
  }
}

.extractor-arrow {
  display: none;
}

@media (min-width: 768px) {
  .extractor-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.doc-paper {
  background: #fafaf9;
  color: #0f0f1c;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  line-height: 1.7;
  transform: rotate(-1deg);
  transition: transform 0.3s ease;
}

.doc-paper:hover {
  transform: rotate(0deg);
}

.doc-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #d8d8e8;
}

.doc-badge {
  background: #ff2a6d;
  color: white;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  letter-spacing: 0.05em;
}

.doc-title {
  font-weight: 600;
  font-size: 0.85rem;
}

.doc-line {
  margin: 0;
}

.doc-spacer {
  height: 0.5rem;
}

.doc-fine {
  font-size: 0.7rem;
  color: #7a7a9a;
  font-style: italic;
}

.extractable {
  position: relative;
  border-radius: 2px;
  transition: background 0.3s ease, color 0.3s ease;
}

.extractable.highlighted {
  background: #fef08a;
  color: #0f0f1c;
  animation: highlight-pulse 0.4s ease;
}

@keyframes highlight-pulse {
  0%   { background: transparent; }
  50%  { background: #fde047; }
  100% { background: #fef08a; }
}

.extractable.flying {
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.extractor-table-wrap {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.extractor-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.extractor-table thead {
  background: rgba(255, 255, 255, 0.04);
}

.extractor-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 500;
  color: var(--text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
}

.extractor-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  color: #c8c8e0;
}

.extractor-table tr:last-child td {
  border-bottom: none;
}

.extractor-table tr {
  opacity: 0.3;
  transition: opacity 0.4s ease, background 0.3s ease;
}

.extractor-table tr.filled {
  opacity: 1;
}

.extractor-table tr.filled .table-value {
  animation: value-in 0.4s ease;
}

@keyframes value-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

.extractor-table tr.filled td {
  background: rgba(0, 240, 255, 0.05);
}

.table-value {
  font-family: 'JetBrains Mono', monospace;
  color: #e0ffff;
}

/* ── Mobile adjustments ───────────────────────────────── */
@media (max-width: 767px) {
  .pipeline-nodes {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }

  .pipeline-split {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1rem;
  }

  .pipeline-svg {
    display: none;
  }

  .panel-inner h1 {
    font-size: 3rem;
  }
}

/* ── Cookie banner ────────────────────────────────────── */
.cookie-banner {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  z-index: 9999;
  max-width: 480px;
  margin: 0 auto;
  background: rgba(14, 14, 28, 0.95);
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 240, 255, 0.08);
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transform: translateY(calc(100% + 2rem));
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.cookie-banner.visible {
  transform: translateY(0);
  opacity: 1;
}

.cookie-banner p {
  font-size: 0.85rem;
  color: #c8c8e0;
  line-height: 1.5;
  margin: 0;
}

.cookie-banner a {
  color: #00f0ff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-banner a:hover {
  color: #a8fff0;
}

.cookie-banner-actions {
  display: flex;
  gap: 0.5rem;
}

.cookie-banner-btn {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.cookie-banner-btn.primary {
  background: #00f0ff;
  color: #00101a;
}

.cookie-banner-btn.primary:hover {
  background: #5cfffa;
}

.cookie-banner-btn.secondary {
  background: rgba(255, 255, 255, 0.05);
  color: #c8c8e0;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.cookie-banner-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* ── Scrollbar ────────────────────────────────────────── */
.chatbot-messages::-webkit-scrollbar {
  width: 4px;
}

.chatbot-messages::-webkit-scrollbar-track {
  background: transparent;
}

.chatbot-messages::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}





/* ── pipeline-extra.css ──────────────────────────────────
   Additions on top of your existing stylesheet.
   Covers: SVG connector lines, flying envelope dot,
   category node colours, clickable hint, email modal.
──────────────────────────────────────────────────────── */

/* ── Node colour overrides ──────────────────────────────── */
.node-icon-email {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.25);
  color: #d86aff;
}

.node-icon-category.invoice  { background: rgba(245,158,11,0.1);  border-color: rgba(245,158,11,0.25);  color: #ffd700; }
.node-icon-category.question { background: rgba(59,130,246,0.1);  border-color: rgba(59,130,246,0.25);  color: #00f0ff; }
.node-icon-category.spam     { background: rgba(239,68,68,0.1);   border-color: rgba(239,68,68,0.25);   color: #ff2a6d; }

/* (duplicate .pipeline-line definition removed — single, thicker rule
   now lives in the original Pipeline block above) */

/* ── Flying envelope ────────────────────────────────────── */
.flying-envelope {
  position: fixed;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  filter: drop-shadow(0 0 8px currentColor);
  will-change: left, top;
}

/* ── Clickable hint on the winning category ─────────────── */
.pipeline-node.clickable-hint .node-icon {
  cursor: pointer;
  animation: hint-pulse 1.4s ease-in-out 2;
}

@keyframes hint-pulse {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

.pipeline-node-sm:hover .node-icon {
  transform: scale(1.06);
  transition: transform 0.2s ease;
}

/* ── Email modal ────────────────────────────────────────── */
.email-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.email-modal.open {
  pointer-events: all;
  opacity: 1;
}

.email-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
}

.email-modal-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  max-height: 80vh;
  overflow-y: auto;
  background: #0e0e1c;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 18px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
  transform: translateY(24px) scale(0.96);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), opacity 0.25s ease;
  opacity: 0;
}

.email-modal.open .email-modal-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* close button */
.email-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  color: #8a8ab0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  z-index: 2;
}

.email-modal-close:hover {
  background: rgba(255,255,255,0.1);
  color: #f0f8ff;
}

/* modal header */
.email-modal-header {
  padding: 1.5rem 1.5rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.email-modal-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 5px;
  border: 1px solid;
  margin-bottom: 0.75rem;
}

.email-modal-title {
  font-size: 1rem;
  font-weight: 600;
  color: #eef4ff;
  line-height: 1.4;
  margin: 0 0 0.6rem;
  padding-right: 2rem; /* avoid overlap with close btn */
}

.email-modal-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.8rem;
  color: #8a8ab0;
}

/* modal body – monospace email text */
.email-modal-body {
  padding: 1.25rem 1.5rem 1.75rem;
  font-family: 'JetBrains Mono', 'Fira Mono', monospace;
  font-size: 0.82rem;
  line-height: 1.75;
  color: #a0a0c8;
  white-space: pre-wrap;
  word-break: break-word;
}

/* scrollbar inside modal */
.email-modal-card::-webkit-scrollbar       { width: 4px; }
.email-modal-card::-webkit-scrollbar-track { background: transparent; }
.email-modal-card::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 767px) {
  .email-modal-card {
    max-height: 88vh;
    border-radius: 14px;
  }
  .email-modal-title { font-size: 0.92rem; }
  .email-modal-body  { font-size: 0.78rem; }
}

/* ── Contact form ─────────────────────────────────────── */
.contact-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 900px) {
  .contact-container {
    grid-template-columns: 1fr 1.1fr;
  }
}

.contact-intro h2 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
  color: #f0f8ff;
}

.contact-intro p {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 36ch;
  margin-bottom: 1.75rem;
}

.contact-detail {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: #a0a0c8;
  margin-bottom: 0.6rem;
}

.contact-detail svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
  flex-shrink: 0;
}

.contact-form-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 2rem;
  backdrop-filter: blur(12px);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.contact-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
}

@media (min-width: 520px) {
  .contact-row {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.contact-field label {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 500;
}

.contact-field input,
.contact-field textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: #f0f8ff;
  font-size: 0.9rem;
  font-family: inherit;
  outline: none;
  resize: vertical;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: #6a6a8a;
}

.contact-field input:focus,
.contact-field textarea:focus {
  border-color: rgba(0, 240, 255, 0.45);
  background: rgba(255, 255, 255, 0.06);
}

.contact-field input:disabled,
.contact-field textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.contact-field.has-error input,
.contact-field.has-error textarea {
  border-color: rgba(239, 68, 68, 0.5);
}

.contact-error-msg {
  font-size: 0.74rem;
  color: #ff6b9d;
  min-height: 1em;
}

.contact-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
  padding: 0.8rem 1.5rem;
  background: var(--accent);
  border: none;
  border-radius: 10px;
  color: #00101a;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
}

.contact-submit:hover:not(:disabled) {
  background: #5cfffa;
  transform: translateY(-1px);
}

.contact-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.contact-submit .spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(6, 21, 15, 0.3);
  border-top-color: #00101a;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: none;
}

.contact-submit.loading .spinner { display: inline-block; }
.contact-submit.loading .submit-label { opacity: 0.7; }

@keyframes spin {
  to { transform: rotate(360deg); }
}

.contact-status {
  font-size: 0.85rem;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  display: none;
  align-items: center;
  gap: 0.5rem;
}

.contact-status.visible { display: flex; }

.contact-status.success {
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: #a8fff0;
}

.contact-status.error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ffb3c8;
}

.contact-status svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}


@media (prefers-reduced-motion: reduce) {
  .email-modal-card,
  .email-modal,
  .pipeline-node,
  .pipeline-line,
  .flying-envelope { transition: none !important; animation: none !important; }
  .spinner { animation-duration: 1.4s !important; } /* keep a usable loading cue */
}

/* ── Article / long-content panels ───────────────────────
   Allow internal scrolling on short viewports so long reads
   do not get clipped while keeping the sticky-panel mechanic.
──────────────────────────────────────────────────────── */
.panel.panel-article {
  overflow-y: auto;
}

.panel.panel-article .panel-inner {
  min-height: 100vh;
  padding-top: 6rem;
  padding-bottom: 4rem;
}

.article-body h3 {
  color: #f0f8ff;
}

.article-body p,
.article-body li {
  color: #a0a0c8;
}

.article-body a {
  color: #5cfffa;
}

.article-body a:hover {
  color: #a8fff0;
}

.article-body ul {
  list-style-type: disc;
  padding-left: 1.25rem;
}

/* ── Neon design system additions ─────────────────────────
   Shared neon utilities applied across all panels/pages.
──────────────────────────────────────────────────────── */

/* ── Reusable neon card ─────────────────────────────────── */
.neon-card {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.neon-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #00f0ff, #bd00ff, #ffd700);
  opacity: 0.7;
}

.neon-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 240, 255, 0.3);
  box-shadow: 0 0 28px rgba(0, 240, 255, 0.1);
}

/* ── Neon text utilities ────────────────────────────────── */
.neon-text-cyan {
  background: linear-gradient(135deg, #00f0ff, #a8fff0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.25));
}

.neon-text-magenta {
  background: linear-gradient(135deg, #bd00ff, #ff77ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 8px rgba(189, 0, 255, 0.25));
}

.neon-text-gold {
  background: linear-gradient(135deg, #ffd700, #ffea80);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.2));
}

.neon-text-lime {
  background: linear-gradient(135deg, #ccff00, #e5ff80);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 8px rgba(204, 255, 0, 0.2));
}

/* ── Neon glows ─────────────────────────────────────────── */
.neon-glow-cyan   { box-shadow: 0 0 24px rgba(0, 240, 255, 0.12); }
.neon-glow-magenta{ box-shadow: 0 0 24px rgba(189, 0, 255, 0.12); }
.neon-glow-gold   { box-shadow: 0 0 24px rgba(255, 215, 0, 0.12); }
.neon-glow-lime   { box-shadow: 0 0 24px rgba(204, 255, 0, 0.12); }

/* ── Neon buttons / links ───────────────────────────────── */
.neon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  border: 1px solid rgba(0, 240, 255, 0.35);
  background: rgba(0, 240, 255, 0.08);
  color: #e0ffff;
  font-weight: 500;
  transition: all 0.2s ease;
  overflow: hidden;
}

.neon-btn:hover {
  background: rgba(0, 240, 255, 0.15);
  border-color: rgba(0, 240, 255, 0.6);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.2);
  transform: translateY(-1px);
}

/* ── Section global neon overlay upgrade ────────────────── */
.panel::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 90% 10%, rgba(0, 240, 255, 0.045) 0%, transparent 60%),
    radial-gradient(ellipse 50% 35% at 10% 90%, rgba(189, 0, 255, 0.045) 0%, transparent 60%);
  z-index: 0;
  opacity: 0.6;
}

/* ── Mobile navigation ──────────────────────────────────── */
.mobile-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  color: #e0e0f0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mobile-menu-btn:hover,
.mobile-menu-btn[aria-expanded="true"] {
  border-color: rgba(0, 240, 255, 0.4);
  background: rgba(0, 240, 255, 0.08);
  color: #fff;
}

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  background: rgba(5, 5, 16, 0.97);
  backdrop-filter: blur(16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.mobile-nav.open {
  opacity: 1;
  pointer-events: all;
}

.mobile-nav a {
  font-size: 1.5rem;
  font-weight: 600;
  color: #e0e0f0;
  text-decoration: none;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.mobile-nav a:hover,
.mobile-nav a.active {
  color: #00f0ff;
  text-shadow: 0 0 16px rgba(0, 240, 255, 0.45);
}

.mobile-nav-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.05);
  color: #e0e0f0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mobile-nav-close:hover {
  border-color: rgba(0, 240, 255, 0.4);
  background: rgba(0, 240, 255, 0.1);
}

/* ── Responsive touch-ups ───────────────────────────────── */
@media (max-width: 767px) {
  .panel-inner {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .panel-inner h1 {
    font-size: clamp(2.5rem, 11vw, 3.5rem);
  }

  .panel-inner h2 {
    font-size: clamp(1.75rem, 7vw, 2.25rem);
  }

  .stat-card {
    padding: 1.25rem;
  }

  .chatbot-messages {
    min-height: 220px;
    max-height: 320px;
  }

  .chatbot-prompts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .pipeline-nodes {
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
  }

  .pipeline-split {
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
  }

  .pipeline-node-sm .node-icon {
    width: 58px;
    height: 58px;
  }

  .pipeline-node-sm .icon-img {
    width: 24px;
    height: 24px;
  }

  .extractor-container {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .extractor-arrow {
    display: flex;
    transform: rotate(90deg);
  }

  .doc-paper {
    font-size: 0.75rem;
    padding: 1.25rem;
  }

  .contact-container {
    gap: 2rem;
  }

  .contact-form-card {
    padding: 1.25rem;
  }

  .neon-card {
    border-radius: 14px;
  }

  .legal-content h2 {
    font-size: 1.25rem;
  }
}

@media (min-width: 768px) {
  .mobile-menu-btn,
  .mobile-nav {
    display: none;
  }
}

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .neon-card,
  .neon-btn {
    transition: none !important;
  }

  .neon-card:hover,
  .neon-btn:hover {
    transform: none !important;
  }
}


/* Preserve per-stat colored glow when neon-card is also applied */
.stat-card.neon-card:hover {
  box-shadow: 0 0 28px var(--stat-glow, rgba(0, 240, 255, 0.1));
}


/* ═══════════════════════════════════════════════════════════════
   MOBILE OVERHAUL
   Single consolidated @media block replacing scattered mobile
   rules. Covers: panel scroll-safety, stats 2-col, chatbot
   size, pipeline SVG restored, extractor tilt removed, contact
   form compacted. All rules come last so they win the cascade.
═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── 1. Panels: reveal clipped content ────────────────────
     Keep height at 100vh (matches the JS SECTION_HEIGHT calc)
     but allow internal scrolling when content is taller.
     min-height: 100% on .panel-inner lets it centre content
     AND grow past viewport when needed.                       */
  .panel {
    height: 100vh;
    height: 100svh;           /* shrinks to avoid browser-chrome overlap */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* panel-inner: grow taller than viewport when content overflows,
     but keep Tailwind h-full so justify-center/justify-between works */
  .panel .panel-inner {
    min-height: 100%;
  }

  /* Reduce py-12 (3rem) on the hero — saves ~80px on small phones */
  #hero .panel-inner {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  /* Hero h1 sizing on mobile is already handled by the earlier
     .panel-inner h1 { font-size: clamp(2.5rem, 11vw, 3.5rem) } rule. */


  /* ── 2. Stats: 2-column grid on phones ────────────────────
     Default style.css uses single-column below 640 px.
     Force 2-col so all 4 cards fit in two tighter rows.      */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.65rem;
  }

  .stat-card {
    padding: 1rem;
  }

  .stat-number {
    font-size: clamp(1.75rem, 8vw, 2.5rem);
    margin-bottom: 0.4rem;
  }

  .stat-label {
    font-size: 0.75rem;
    line-height: 1.4;
  }


  /* ── 3. Chatbot: shorter message area so prompts show ─────  */
  .chatbot-container {
    gap: 0.75rem;
  }

  .chatbot-messages {
    min-height: 150px;
    max-height: 190px;
  }


  /* ── 4. Pipeline: restore the SVG on mobile ───────────────
     The earlier rule hides .pipeline-svg; override it here.
     buildConnectors() uses getBoundingClientRect() so paths
     auto-adjust to the vertical stacking layout.             */
  .pipeline-svg {
    display: block;           /* was: display:none — now restored */
  }

  .pipeline-container {
    min-height: 360px;        /* enough for 3 stacked rows of nodes */
    padding: 0.75rem 0 0.5rem;
  }

  /* Vertical stack: email → AI → [invoice | question | spam] */
  .pipeline-nodes {
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
  }

  .pipeline-split {
    flex-direction: row;
    justify-content: center;
    gap: 0.65rem;
    flex-wrap: nowrap;
  }

  /* Slightly smaller icons so 3 fit side-by-side comfortably */
  .node-icon {
    width: 54px;
    height: 54px;
    border-radius: 12px;
  }

  .icon-img {
    width: 24px;
    height: 24px;
  }

  .pipeline-node-sm .node-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
  }

  .pipeline-node-sm .icon-img {
    width: 20px;
    height: 20px;
  }

  .node-label {
    font-size: 0.68rem;
    white-space: nowrap;
  }

  /* Pipeline section header: tighter margin so container fits */
  #demo-pipeline .panel-inner > .max-w-5xl > div:first-child {
    margin-bottom: 1.25rem;
  }


  /* ── 5. Extractor: remove the tilt, compact spacing ──────  */
  .doc-paper {
    transform: none;
    padding: 1rem;
    font-size: 0.7rem;
    line-height: 1.55;
  }

  .doc-paper:hover {
    transform: none;
  }

  .extractor-container {
    gap: 0.75rem;
  }


  /* ── 6. Contact: compact padding, tighter form layout ─────
     Total content must fit comfortably in ~570 px after
     panel padding.  #contact specificity (1,1,0) beats
     Tailwind's .py-12 (0,1,0) so no !important needed.      */
  #contact .panel-inner {
    padding-top: 1.75rem;
    padding-bottom: 1.25rem;
  }

  .contact-container {
    gap: 1.25rem;
  }

  .contact-intro h2 {
    font-size: 1.6rem;
    margin-bottom: 0.35rem;
    letter-spacing: -0.015em;
  }

  .contact-intro p {
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
  }

  /* Reduce contact-detail row spacing */
  .contact-detail {
    margin-bottom: 0.35rem;
    font-size: 0.82rem;
  }

  .contact-form-card {
    padding: 1rem;
    border-radius: 14px;
  }

  .contact-form {
    gap: 0.7rem;
  }

  /* Stack name + email vertically on very small phones */
  .contact-row {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }

  /* Shrink the textarea — 4 rows is too tall on mobile */
  #contact-message {
    min-height: 72px;
    max-height: 110px;
    resize: none;
  }

  .contact-submit {
    padding: 0.7rem 1.25rem;
    font-size: 0.88rem;
  }

  /* Footer inside contact panel */
  .extractor-footer {
    margin-top: 1rem;
    font-size: 0.72rem;
  }


  /* ── 7. Article pages: tighten hero padding ───────────────  */
  .panel-hero .panel-inner {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .panel-hero h1 {
    font-size: clamp(2.25rem, 10vw, 4rem);
  }


  /* ── 8. General panel padding override ────────────────────
     px-6 is already on most panel-inners via Tailwind.
     Just make sure nothing is wider than the viewport.       */
  .panel-inner {
    max-width: 100%;
  }

  /* Prevent long pipeline node labels from overflowing */
  .pipeline-node-sm .node-label {
    max-width: 56px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

}


/* Phones under 400 px (e.g. iPhone SE): a bit more squeeze */
@media (max-width: 399px) {
  .stats-grid {
    gap: 0.5rem;
  }

  .stat-card {
    padding: 0.85rem;
  }

  .stat-number {
    font-size: 1.65rem;
  }

  .pipeline-split {
    gap: 0.45rem;
  }

  .pipeline-node-sm .node-icon {
    width: 42px;
    height: 42px;
  }

  .node-label {
    font-size: 0.62rem;
  }

  .contact-form-card {
    padding: 0.85rem;
  }
}


/* ═══════════════════════════════════════════════════════════════
   MOBILE COMPATIBILITY FINAL PASS
   - Disable sticky-scroll trap on phones: panels flow naturally.
   - Prevent iOS zoom on focused inputs (font-size >= 16px).
   - Keep pipeline categories from overflowing small screens.
   - Wrap long words / URLs in articles and legal pages.
   - Faster touch response on buttons.
═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* Flowing layout: kill the sticky-scroll container and panels so
     each section takes the space it actually needs. This prevents
     the "scroll trap" on panels whose content is taller than the
     viewport and makes the site behave like a normal page. */
  .scroll-container {
    height: auto !important;
  }

  .panel {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: 100svh !important;
    overflow: visible !important;
  }

  .panel .panel-inner {
    min-height: 100svh !important;
  }

  /* Inputs must stay at 16px on iOS to avoid auto-zoom. */
  .chatbot-input,
  .contact-field input,
  .contact-field textarea {
    font-size: 16px;
  }

  /* Prompt buttons need comfortable touch targets. */
  .prompt-btn {
    min-height: 44px;
    font-size: 0.9rem;
  }

  /* Cookie banner buttons can wrap on very narrow screens. */
  .cookie-banner-actions {
    flex-wrap: wrap;
  }

  .cookie-banner-btn {
    flex: 1 1 auto;
    min-width: 120px;
    min-height: 44px;
  }

  /* Pipeline: allow category row to wrap if it still does not fit,
     and keep touch targets large enough. */
  .pipeline-split {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .pipeline-node-sm .node-icon {
    min-width: 48px;
    min-height: 48px;
  }

  /* Faster double-tap-to-zoom suppression on interactive elements. */
  button,
  a,
  .prompt-btn,
  .chatbot-send,
  .mobile-menu-btn,
  .mobile-nav-close,
  .pipeline-node-sm,
  .replay-btn,
  .contact-submit {
    touch-action: manipulation;
  }

  /* Break very long URLs / emails in article and legal text. */
  .legal-content,
  .article-body,
  .prose {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  .legal-content a,
  .article-body a,
  .prose a {
    word-break: break-all;
  }

  /* Ensure article panels (non-sticky pages) keep comfortable padding. */
  .panel.panel-article .panel-inner {
    padding-top: 5rem;
    padding-bottom: 3rem;
  }

  /* Horizontal safety: nothing should protrude past the viewport. */
  body {
    overflow-x: hidden;
  }
}


/* Extra-tight adjustments for very small screens (<= 360px). */
@media (max-width: 360px) {
  .pipeline-split {
    gap: 0.5rem;
  }

  .pipeline-node-sm .node-icon {
    width: 40px;
    height: 40px;
  }

  .pipeline-node-sm .icon-img {
    width: 18px;
    height: 18px;
  }

  .node-label {
    font-size: 0.58rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE TOUCH-TARGET & ACCESSIBILITY REFINEMENTS
   Ensures every interactive element meets at least a 44×44 px
   hit area on phones, and that long tables never overflow.
═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .mobile-menu-btn {
    min-width: 44px;
    min-height: 44px;
    width: 2.75rem;
    height: 2.75rem;
  }

  .mobile-nav a {
    display: block;
    padding: 0.5rem 1rem;
    min-height: 44px;
  }

  .chatbot-send {
    min-width: 44px;
    min-height: 44px;
  }

  .replay-btn {
    min-height: 44px;
    padding: 0.5rem 0.75rem;
  }

  .extractor-table-wrap {
    overflow-x: auto;
  }

  .extractor-footer a {
    display: inline-block;
    padding: 0.35rem 0.25rem;
    min-height: 44px;
  }
}

/* Mobile baseline: safe-area aware spacing and safeguards for narrow screens. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 767px) {
  .panel {
    min-height: 100dvh !important;
  }

  .panel .panel-inner {
    min-height: 100dvh !important;
    height: auto;
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }

  .panel-hero .panel-inner > div:last-child {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .mobile-nav {
    padding:
      max(1.5rem, env(safe-area-inset-top))
      max(1.5rem, env(safe-area-inset-right))
      max(1.5rem, env(safe-area-inset-bottom))
      max(1.5rem, env(safe-area-inset-left));
  }

  .mobile-nav-close {
    top: max(1rem, env(safe-area-inset-top));
    right: max(1rem, env(safe-area-inset-right));
    min-width: 44px;
    min-height: 44px;
  }

  .email-modal {
    padding:
      max(1rem, env(safe-area-inset-top))
      max(1rem, env(safe-area-inset-right))
      max(1rem, env(safe-area-inset-bottom))
      max(1rem, env(safe-area-inset-left));
  }

  .email-modal-card {
    max-height: calc(100dvh - 2rem);
  }

  .email-modal-close {
    width: 44px;
    height: 44px;
  }

  .email-modal-meta {
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
  }

  .cookie-banner {
    left: max(0.75rem, env(safe-area-inset-left));
    right: max(0.75rem, env(safe-area-inset-right));
    bottom: max(0.75rem, env(safe-area-inset-bottom));
  }
}

@media (max-width: 420px) {
  .panel-hero .scroll-hint {
    display: none;
  }

  .email-modal-header,
  .email-modal-body {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}