/* Pitch-deck redesign layer. Loaded after styles.css; no behaviour changes. */
:root {
  --bg: #010208;
  --panel: #07122e;
  --panel-2: #061026;
  --edge: rgba(50, 100, 200, 0.28);
  --cyan: #2a74ff;
  --logo-blue: #2a74ff;
  --glow: 0 0 22px rgba(31, 107, 255, 0.22);
}

body {
  background:
    radial-gradient(ellipse 80% 55% at 70% 28%, rgba(31, 107, 255, 0.14), transparent 70%),
    radial-gradient(ellipse 60% 40% at 10% 90%, rgba(42, 116, 255, 0.06), transparent 70%),
    #010208;
  text-transform: none;
}


#netBg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.page-shell { position: relative; z-index: 1; }

/* Top bar */
.topbar {
  position: relative;
  z-index: 30;
  border: 1px solid var(--edge);
  border-radius: 16px;
  background: #000;
  box-shadow: var(--glow);
}
.ghost-button, .primary-button, .secondary-button, .account-create-button, .report-save-button {
  border-radius: 999px;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.9rem;
  font-weight: 600;
}
.account-create-button, .primary-button {
  background: linear-gradient(180deg, #2a5fcf, #123a96);
  border-color: rgba(90, 130, 220, 0.6);
  box-shadow: 0 0 14px rgba(31, 107, 255, 0.3);
}
.ghost-button, .report-save-button {
  background: rgba(6, 15, 38, 0.7);
  border-color: var(--edge);
}
.primary-button { min-height: 48px; padding: 0 28px; }
.primary-button:hover, .account-create-button:hover { filter: brightness(1.12); }
.account-actions .ghost-button, .account-actions .account-create-button {
  min-height: 34px;
  padding: 0 16px;
  font-size: 0.85rem;
}
.main-nav { border-radius: 12px; background: rgba(4, 10, 26, 0.97); border-color: var(--edge); }
.main-nav a { text-transform: none; letter-spacing: 0.02em; font-size: 0.95rem; }


/* Hero */
.hero-section { align-items: stretch; }
.orb-panel {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  grid-template-areas:
    "copy ball"
    "cta  ball"
    "status ball"
    "trio trio";
  align-items: center;
  justify-items: start;
  column-gap: 40px;
  row-gap: 18px;
  padding: 36px 32px 28px;
  position: relative;
}
.hero-copy { grid-area: copy; }
.hero-copy h1 {
  font-size: clamp(2.4rem, 5.4vw, 4.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 800;
  text-transform: uppercase;
}
.accent-word { color: var(--cyan); text-shadow: 0 0 24px rgba(42, 116, 255, 0.6); }
.hero-copy .eyebrow { color: var(--cyan); text-transform: uppercase; }
.hero-sub { max-width: 46ch; margin: 14px 0 0; font-size: 1.1rem; line-height: 1.6; color: var(--soft-text); }
.cta-row { grid-area: cta; justify-content: flex-start; }
.status-box { grid-area: status; width: min(100%, 460px); border-radius: 14px; background: rgba(4, 10, 26, 0.85); }
.status-label, .status-value { text-transform: none; }
.magic-ball { grid-area: ball; justify-self: center; width: min(100%, 420px); filter: drop-shadow(0 0 40px rgba(42, 116, 255, 0.65)); }
.feature-trio { grid-area: trio; justify-self: stretch; list-style: none; margin: 10px 0 0; padding: 18px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; border-top: 1px solid var(--edge); }
.feature-trio li { display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; align-items: center; }
.feature-trio svg { grid-row: span 2; width: 44px; height: 44px; padding: 10px; border-radius: 12px; border: 1px solid var(--edge); background: rgba(31, 107, 255, 0.14); fill: none; stroke: var(--cyan); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.feature-trio strong { font-size: 0.95rem; }
.feature-trio span { font-size: 0.82rem; color: var(--soft-text); opacity: 0.8; }


@media (max-width: 860px) {
  .orb-panel {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "ball" "cta" "status" "trio";
    justify-items: center;
    text-align: center;
    padding: 26px 18px;
  }
  .hero-sub { margin-inline: auto; }
  .cta-row { justify-content: center; }
  .feature-trio { grid-template-columns: 1fr; text-align: left; }
}

/* Results dashboard */
.results-panel, .status-box, .kpi-card, .detail-card, .plain-sidebar, .workflow-card, .insight-card, .mission-callout {
  border: 1px solid var(--edge);
  border-radius: 16px;
  background: rgba(4, 10, 26, 0.78);
  backdrop-filter: blur(6px);
}
.results-panel { box-shadow: var(--glow); }
.kpi-card.accent { background: linear-gradient(160deg, rgba(31, 107, 255, 0.55), rgba(4, 10, 26, 0.9)); }
.kpi-card strong { color: var(--cyan); }
.result-header h2, .section-header h1, .section-header h2, .detail-title, .workflow-card h3, .insight-card h3 { text-transform: none; letter-spacing: -0.01em; color: #fff; }
.capture-chip { border-radius: 999px; border-color: var(--edge); background: rgba(31, 107, 255, 0.18); text-transform: none; font-family: Consolas, "Courier New", monospace; }
.workflow-card span { border-radius: 12px; background: rgba(31, 107, 255, 0.2); border-color: var(--edge); color: var(--cyan); font-family: Consolas, "Courier New", monospace; }
.detail-card code, .capture-chip, .status-value { font-family: Consolas, "Courier New", monospace; }

/* Footer */
.site-footer { border-top: 1px solid var(--edge); background: transparent; box-shadow: none; position: relative; overflow: hidden; }
.site-footer::before {
  content: "LAYER 8";
  display: block;
  padding: 26px 0 0;
  text-align: center;
  font-size: clamp(2.4rem, 9vw, 6rem);
  font-weight: 900;
  letter-spacing: 0.3em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(42, 116, 255, 0.35);
  user-select: none;
}

/* Easter-egg toast */
.egg-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 20px);
  opacity: 0;
  padding: 10px 18px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: rgba(4, 10, 26, 0.95);
  color: var(--cyan);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.9rem;
  z-index: 60;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}
.egg-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Chatbot: ASK8 AI card look */
.chatbot-panel { background: rgba(4, 10, 26, 0.97); border-radius: 18px; border-color: var(--edge); box-shadow: var(--glow), 0 12px 40px rgba(0, 0, 0, 0.6); }
.chatbot-head { background: linear-gradient(90deg, rgba(31, 107, 255, 0.35), transparent); }
.chatbot-fab { touch-action: none; cursor: grab; border-color: var(--cyan); box-shadow: 0 0 18px rgba(42, 116, 255, 0.6); }



/* Mascot avatars */
.chatbot-bubble { position: absolute; width: 190px; padding: 10px 28px 10px 12px; border: 1px solid var(--edge); border-radius: 14px; background: rgba(6, 15, 38, 0.97); color: var(--text); font-size: 0.85rem; line-height: 1.35; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); }
.chatbot-bubble[hidden] { display: none; }
.chatbot-bubble-close { position: absolute; top: 4px; right: 6px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--soft-text); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.chatbot-bubble-close:hover, .chatbot-bubble-close:focus-visible { background: rgba(255, 255, 255, 0.15); color: #fff; outline: none; }
.chatbot[data-edge="right"] .chatbot-bubble { right: calc(100% + 12px); top: 50%; transform: translateY(-50%); }
.chatbot[data-edge="left"] .chatbot-bubble { left: calc(100% + 12px); top: 50%; transform: translateY(-50%); }
.chatbot[data-edge="top"] .chatbot-bubble { top: calc(100% + 12px); left: 0; }
.chatbot[data-edge="bottom"] .chatbot-bubble { bottom: calc(100% + 12px); left: 0; }
.chatbot-dragging .chatbot-bubble { display: none; }
.chatbot { width: 80px; height: 80px; }
.chatbot-fab { width: 80px; height: 80px; }
.chatbot[data-edge="right"] .chatbot-handle { left: calc(100% + 3px); top: 28px; }
.chatbot[data-edge="left"] .chatbot-handle { right: calc(100% + 3px); top: 28px; }
.chatbot[data-edge="top"] .chatbot-handle { bottom: calc(100% + 3px); left: 28px; }
.chatbot[data-edge="bottom"] .chatbot-handle { top: calc(100% + 3px); left: 28px; }
.chatbot-fab { border-radius: 50%; background: #050c20; box-shadow: 0 0 12px rgba(42, 116, 255, 0.35); }
.chatbot-fab img { object-fit: cover; }
.chatbot-head img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }

/* Dialogs (log in / create account / profile) */
.site-dialog {
  border: 1px solid var(--edge);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(6, 15, 38, 0.98), rgba(4, 10, 26, 0.98));
  box-shadow: var(--glow), 0 24px 60px rgba(0, 0, 0, 0.6);
  text-transform: none;
}
.site-dialog::backdrop { background: rgba(1, 3, 10, 0.75); backdrop-filter: blur(6px); }
.site-dialog h2 { color: #fff; font-weight: 700; letter-spacing: -0.01em; }
.dialog-close { display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%; background: rgba(31, 107, 255, 0.12); cursor: pointer; line-height: 1; }
.dialog-close:hover, .dialog-close:focus-visible { background: rgba(31, 107, 255, 0.35); color: #fff; outline: none; }
.form-label { font-size: 0.82rem; letter-spacing: 0.02em; text-transform: none; color: var(--soft-text); }
.text-input { border-radius: 10px; background: rgba(2, 6, 18, 0.8); font-size: 0.95rem; letter-spacing: 0; text-transform: none; }
.text-input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(42, 116, 255, 0.18); }
.text-button { font-size: 0.85rem; letter-spacing: 0.01em; text-transform: none; color: var(--cyan); }
.text-button:hover { color: #fff; }
#authDialog .text-input { min-height: 40px; }
.auth-form .account-create-button { min-height: 44px; }
.progress-fill { background: repeating-linear-gradient(90deg, #2a74ff 0 12px, transparent 12px 18px); filter: drop-shadow(0 0 4px rgba(31, 107, 255, 0.6)); }
.progress-track { background: repeating-linear-gradient(90deg, rgba(40, 90, 200, 0.14) 0 12px, transparent 12px 18px); }

/* Collapsible sidebar */
:root { --sb-w: 232px; --sb-w-min: 68px; }
.main-nav, .main-nav[hidden] {
  display: flex;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 40;
  width: var(--sb-w);
  min-width: 0;
  padding: 92px 10px 20px;
  gap: 4px;
  border: 0;
  border-right: 1px solid var(--edge);
  border-radius: 0;
  background: #000;
  box-shadow: 4px 0 30px rgba(42, 116, 255, 0.2);
  overflow-x: hidden;
  overflow-y: auto;
  transition: width 0.2s ease, transform 0.2s ease;
}
.main-nav a, .main-nav a + a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  border: 0;
  border-radius: 12px;
  white-space: nowrap;
  color: var(--soft-text);
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-transform: none;
}
.main-nav a i { flex: none; width: 24px; text-align: center; font-style: normal; font-size: 1.1rem; color: var(--cyan); }
.main-nav a:hover { color: #fff; background: rgba(42, 116, 255, 0.18); }
.main-nav a[aria-current="page"] { color: #fff; background: rgba(42, 116, 255, 0.32); box-shadow: inset 3px 0 0 var(--cyan); }
.main-nav a.nav-signout { margin-top: auto; color: #ff9f1a; }
.main-nav a.nav-signout:hover { color: #1a0f00; background: #ff9f1a; }
.page-shell { max-width: none; padding-left: calc(var(--sb-w) + 24px); transition: padding-left 0.2s ease; }
.page-shell > *, .page-shell .experience-shell { max-width: 1280px; margin-left: auto; margin-right: auto; }
.sb-collapsed .main-nav { width: var(--sb-w-min); }
.sb-collapsed .main-nav a span { display: none; }
.sb-collapsed .main-nav a { justify-content: center; padding-inline: 0; }
.sb-collapsed .page-shell { padding-left: calc(var(--sb-w-min) + 24px); }
.menu-toggle { position: relative; z-index: 45; }
@media (max-width: 899px) {
  .page-shell, .sb-collapsed .page-shell { padding-left: 14px; }
  .sb-collapsed .main-nav { width: var(--sb-w); transform: translateX(-100%); box-shadow: none; }
  .sb-collapsed .main-nav a span { display: inline; }
  .sb-collapsed .main-nav a { justify-content: flex-start; padding-inline: 14px; }
}