/* =========================================================
   Sorraia - Agent Page Stylesheet (Redesign)
   ========================================================= */

.pg-agent {
  --color-bg: #FAFAF8;
  --color-text: #1A1917;
  --color-accent: #2563EB;
  --color-accent-light: #EEF3FF;
  --color-accent-border: #C7D7FD;
  --color-dark-bg: #0F1117;
  --color-dark-surface: #0A0D14;
  --color-dark-border: #1E2230;
  --color-green: #10B981;
  --color-green-dark: #059669;
  --color-border: #EAE7E0;
  --color-muted: #666666;
  --color-mono-muted: #AAAAAA;

  --font-serif: "IBM Plex Serif", Georgia, serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;
  --font-sans: "IBM Plex Sans", -apple-system, sans-serif;

  --white: var(--color-bg); --off-white: var(--color-bg);
  --navy: var(--color-bg); --navy-mid: var(--color-bg); --surface: var(--color-bg);
  --text: var(--color-text); --text-mid: var(--color-muted);
  --text-muted: var(--color-muted); --text-faint: var(--color-mono-muted);
  --accent: var(--color-accent); --border: var(--color-border); --border-mid: var(--color-border);
}

.pg-agent {
  background: var(--color-bg) !important;
  color: var(--color-text) !important;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
.pg-agent *, .pg-agent *::before, .pg-agent *::after { box-sizing: border-box; }

.ag-container { max-width: 1160px; margin: 0 auto; padding: 0 48px; }

/* --- Nav overrides --- */
.pg-agent #navbar, .pg-agent #navbar.nav--dark,
.pg-agent #navbar.nav--light, .pg-agent #navbar.nav--scrolled {
  background: var(--color-bg) !important;
  border-bottom: 1px solid var(--color-border) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.pg-agent .nav-logo { color: var(--color-text) !important; }
.pg-agent .nav-logo svg path { fill: var(--color-text) !important; }
.pg-agent .nav-links a {
  font-family: var(--font-sans) !important; font-size: 13px !important;
  font-weight: 400 !important; letter-spacing: 0 !important;
  color: #666 !important; text-transform: none !important; text-decoration: none !important;
}
.pg-agent .nav-links a:hover { color: var(--color-text) !important; opacity: 1 !important; }
.pg-agent .nav-links a::after { display: none !important; }
.pg-agent .nav-toggle span { background: var(--color-text) !important; }
/* Active Agent link */
.pg-agent .nav-links li:last-child a {
  color: var(--color-accent) !important;
  border-bottom: 1px solid var(--color-accent) !important;
  padding-bottom: 2px !important;
  background: none !important;
  font-family: var(--font-sans) !important; font-size: 13px !important;
  letter-spacing: 0 !important; border-radius: 0 !important;
  padding: 0 !important; padding-bottom: 2px !important;
}

/* --- STEP 6: HERO (two-column split) --- */
.ag-hero {
  padding: calc(var(--nav-h, 64px)) 0 0;
}
.ag-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  min-height: 540px;
}

.ag-hero__left {
  background: linear-gradient(135deg, #F0F4FF 0%, #FAFAF8 100%);
  border-right: 1px solid var(--color-border);
  padding: 72px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ag-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent) !important;
  margin-bottom: 16px;
}
.ag-hero__headline {
  font-family: var(--font-serif) !important;
  font-size: 44px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-text) !important;
  margin: 0 0 16px;
  opacity: 1 !important;
}
.ag-hero__headline em {
  font-style: italic;
  color: var(--color-accent);
  opacity: 1;
}
.ag-hero__headline em::after { display: none; }
.ag-hero__sub {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.75;
  color: #666 !important;
  margin-bottom: 28px;
  max-width: 460px;
}

/* Query input mock */
.ag-query-mock {
  background: #fff !important;
  border: 1px solid #DDD !important;
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.ag-query-mock__text-area {
  flex: 1;
  display: block;
  min-width: 0;
  line-height: 1.6;
  overflow-wrap: break-word;
  word-break: break-word;
}
.ag-query-mock__input {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-mono-muted) !important;
  letter-spacing: 0.02em;
  display: inline;
}
.ag-query-mock__send {
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  padding: 7px 16px;
  border: none;
  cursor: pointer;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: background 0.2s ease;
  flex-shrink: 0;
  margin-top: 1px;
}
.ag-query-mock__send:hover { background: #1d4ed8; }

/* Suggestion chips */
.ag-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-chip {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.03em;
  color: var(--color-accent) !important;
  background: var(--color-accent-light);
  border: 1px solid var(--color-accent-border) !important;
  padding: 5px 10px;
  cursor: default;
  transition: background 0.2s ease;
}
.ag-chip:hover { background: #dde8ff; }

/* Hero right column */
.ag-hero__right {
  background: #F4F2ED;
  padding: 48px;
  display: flex;
  align-items: center;
}

/* Reasoning trace card */
.ag-trace {
  background: #fff;
  border: 1px solid var(--color-border);
  padding: 24px;
  width: 100%;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
.ag-trace__header {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent) !important;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}

.ag-trace__steps { display: flex; flex-direction: column; gap: 0; }
.ag-trace__step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  position: relative;
  padding-bottom: 18px;
}
.ag-trace__step:last-child { padding-bottom: 0; }
.ag-trace__dot-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 12px;
}
.ag-trace__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ag-trace__dot--done { background: var(--color-green) !important; }
.ag-trace__dot--active { background: var(--color-accent) !important; box-shadow: 0 0 0 3px rgba(37,99,235,0.2); }
.ag-trace__dot--pending { background: #DDD !important; }
.ag-trace__line {
  width: 1px;
  flex: 1;
  min-height: 10px;
  background: var(--color-border);
  margin-top: 4px;
}
.ag-trace__step-text { padding-top: 0; }
.ag-trace__step-label {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text) !important;
  margin-bottom: 2px;
}
.ag-trace__step-detail {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--color-mono-muted) !important;
}

/* Trace answer */
.ag-trace__answer {
  margin-top: 20px;
  padding: 16px;
  background: var(--color-accent-light) !important;
  border: 1px solid var(--color-accent-border) !important;
  border-radius: 0;
}
.ag-trace__answer-text {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.7;
  color: #444 !important;
  margin-bottom: 12px;
}
.ag-trace__badges { display: flex; gap: 8px; flex-wrap: wrap; }
.ag-trace__badge {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  color: #60A5FA;
  border: 1px solid rgba(96,165,250,0.3);
  background: rgba(96,165,250,0.08);
}
.ag-trace__badge--green {
  color: var(--color-green) !important;
  border-color: rgba(16,185,129,0.3) !important;
  background: rgba(16,185,129,0.08) !important;
}

/* --- STEP 7: DEMO SECTIONS --- */
.ag-demo {
  padding: 40px 0;
  border-top: 1px solid var(--color-border);
}

.ag-demo__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.ag-demo__grid--reverse .ag-demo__video-col { order: 2; }
.ag-demo__grid--reverse .ag-demo__text-col { order: 1; }

.ag-demo__num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: #D97706;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.ag-demo__title {
  font-family: var(--font-serif) !important;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin-bottom: 14px;
}
.ag-demo__title em {
  font-style: italic;
  color: var(--color-accent);
  opacity: 1;
}
.ag-demo__desc {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.7;
  color: #666;
  margin-bottom: 18px;
}
.ag-demo__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-demo__tag {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  color: var(--color-accent);
  background: var(--color-accent-light);
  border: 1px solid var(--color-accent-border);
}

/* Video container */
.ag-demo__video-wrap {
  position: relative;
  background: var(--color-dark-bg);
  border: 1px solid var(--color-dark-border);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 16 / 9;
}
.ag-demo__video-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  color: #60A5FA;
  border: 1px solid rgba(96,165,250,0.3);
  background: rgba(37,99,235,0.2);
  padding: 3px 8px;
  z-index: 2;
  pointer-events: none;
}
.ag-demo__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- STEP 8: PRIVACY STRIP --- */
.ag-privacy {
  padding: 48px 0;
  border-top: 1px solid var(--color-border);
}
.ag-privacy__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.ag-privacy__col {
  padding: 0 32px;
  border-top: 3px solid var(--color-green);
  padding-top: 20px;
}
.ag-privacy__col:first-child { padding-left: 0; }
.ag-privacy__col:last-child { padding-right: 0; }
.ag-privacy__col-title {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 400;
  color: var(--color-text);
  margin-bottom: 8px;
}
.ag-privacy__col-desc {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.7;
  color: #666;
}

/* --- STEP 9: CTA --- */
.ag-cta {
  padding: 64px 0;
  border-top: none;
  background: var(--color-accent) !important;
  text-align: center;
}
.ag-cta__heading {
  font-family: var(--font-serif) !important;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #fff;
  margin-bottom: 12px;
}
.ag-cta__heading em {
  font-style: italic;
  color: rgba(255,255,255,0.6);
  opacity: 1;
}
.ag-cta__sub {
  font-family: var(--font-sans);
  font-size: 15px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 32px;
}
.ag-cta__buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.ag-cta__btn-primary {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  font-weight: 500;
  padding: 14px 32px;
  background: #fff;
  color: var(--color-accent);
  border: none;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}
.ag-cta__btn-primary:hover { opacity: 0.9; }
.ag-cta__btn-ghost {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  font-weight: 500;
  padding: 14px 32px;
  background: transparent;
  color: rgba(255,255,255,0.8);
  border: 1px solid rgba(255,255,255,0.3);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.ag-cta__btn-ghost:hover { border-color: rgba(255,255,255,0.6); color: #fff; }

/* --- STEP 10: Footer overrides --- */
.pg-agent .footer {
  background: var(--color-bg) !important;
  border-top: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
  padding: 48px 0 !important;
}
.pg-agent .footer__grid {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr 1fr !important;
  gap: 32px !important;
}
.pg-agent .footer__col-title {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-text);
}
.pg-agent .footer__col-links a { font-family: var(--font-sans); font-size: 13px; color: #666; }
.pg-agent .footer__col-links a:hover { color: var(--color-text); }
.pg-agent .footer__tagline { font-family: var(--font-sans); font-size: 13px; color: #999; line-height: 1.7; }
.pg-agent .footer__logo-text { color: var(--color-text); }
.pg-agent .footer__logo-text svg path { fill: var(--color-text); }
.pg-agent .footer__bottom {
  border-top: 1px solid var(--color-border);
  margin-top: 32px; padding-top: 20px;
}
.pg-agent .footer__copy, .pg-agent .footer__trust, .pg-agent .footer__legal {
  font-family: var(--font-mono); font-size: 9px; color: var(--color-mono-muted);
}

/* --- Lightbox (preserved + restyled) --- */
.proof-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(10,12,15,.94); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.proof-lightbox.is-active { opacity: 1; pointer-events: auto; }
.proof-lightbox__inner { position: relative; width: 90%; max-width: 1000px; transform: scale(.95); transition: transform .3s ease; }
.proof-lightbox.is-active .proof-lightbox__inner { transform: scale(1); }
.proof-lightbox__video { width: 100%; display: block; }
.proof-lightbox__close { position: absolute; top: -44px; right: 0; background: rgba(255,255,255,0.1); border: none; width: 36px; height: 36px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s ease; }
.proof-lightbox__close:hover { background: rgba(255,255,255,0.2); }
.proof-lightbox__close svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2; }
.proof-lightbox__caption { text-align: center; padding-top: 16px; }
.proof-lightbox__caption-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-mono-muted); margin-bottom: 4px; }
.proof-lightbox__caption-title { font-family: var(--font-sans); font-size: 14px; color: rgba(255,255,255,0.7); }

/* --- Responsive --- */
@media (max-width: 900px) {
  .ag-hero__grid { grid-template-columns: 1fr; gap: 0; min-height: auto; }
  .ag-hero__left { border-right: none; border-bottom: 1px solid var(--color-border); }
  .ag-hero__right { padding: 32px 28px; }
  .ag-demo__grid, .ag-demo__grid--reverse { grid-template-columns: 1fr; gap: 28px; }
  .ag-demo__grid--reverse .ag-demo__video-col { order: 1; }
  .ag-demo__grid--reverse .ag-demo__text-col { order: 2; }
  .ag-privacy__grid { grid-template-columns: 1fr; gap: 24px; }
  .ag-privacy__col { padding: 0; padding-top: 16px; }
  .ag-container { padding: 0 28px; }
  .pg-agent .footer__grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 768px) {
  .pg-agent .nav-links { background: var(--color-bg) !important; }
  .pg-agent .nav-links a { color: var(--color-text) !important; }
}
@media (max-width: 640px) {
  .ag-hero__headline { font-size: clamp(28px, 7vw, 38px); }
  .ag-hero__left { padding: 48px 20px; }
  .ag-hero__right { padding: 24px 20px; }
  .ag-chips { gap: 4px; }
  .ag-chip { font-size: 8px; padding: 4px 8px; }
  .ag-container { padding: 0 20px; }
  .ag-trace { padding: 16px; }
  .ag-demo { padding: 32px 0; }
  .ag-privacy { padding: 32px 0; }
  .ag-cta { padding: 48px 0; }
  .ag-cta__btn-primary, .ag-cta__btn-ghost { width: 100%; text-align: center; }
  .pg-agent .footer__grid { grid-template-columns: 1fr !important; }
}

/* --- Hero animation --- */
@keyframes agCursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
@keyframes agPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37,99,235,0.3); }
  50%      { box-shadow: 0 0 0 4px rgba(37,99,235,0.06); }
}
.ag-query-mock__cursor {
  display: inline-block;
  width: 1.5px;
  height: 14px;
  background: var(--color-accent);
  margin-left: 1px;
  vertical-align: text-bottom;
  animation: agCursorBlink 0.8s ease-in-out infinite;
}
.ag-query-mock__cursor.is-hidden { display: none; }
.ag-trace__step { opacity: 0; transform: translateY(6px); transition: opacity 0.4s ease, transform 0.4s ease; }
.ag-trace__step.is-revealed { opacity: 1; transform: translateY(0); }
.ag-trace__answer { opacity: 0; transform: translateY(6px); transition: opacity 0.5s ease, transform 0.5s ease; }
.ag-trace__answer.is-revealed { opacity: 1; transform: translateY(0); }
.ag-trace__dot--active { animation: agPulse 2s ease-in-out infinite !important; }
.pg-agent .ag-hero__left { opacity: 1 !important; transform: none !important; animation: none !important; }

/* --- Scroll reveal --- */
.ag-demo.reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.ag-demo.reveal.is-visible { opacity: 1; transform: translateY(0); }
.ag-privacy.reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.ag-privacy.reveal.is-visible { opacity: 1; transform: translateY(0); }
.ag-cta.reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.ag-cta.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .ag-hero, .ag-trace, .ag-demo, .ag-hero__left, .ag-trace__step, .ag-trace__answer, .ag-privacy, .ag-cta { transition: none !important; animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* --- Hover animations --- */
@media (hover: hover) {
  .ag-chip { transition: background 200ms ease; }
  .ag-demo__video-wrap { transition: border-color 300ms ease; }
  .ag-demo__video-wrap:hover { border-color: rgba(37,99,235,0.3); }
  .ag-cta__btn-primary { transition: opacity 200ms ease; }
  .ag-cta__btn-ghost { transition: border-color 200ms ease, color 200ms ease; }
}


/* =========================================================
   AGENT PAGE ANIMATIONS
   ========================================================= */

/* Hero entrance */
.pg-agent .ag-hero__eyebrow {
  animation: fadeInDown 0.6s ease both;
  animation-delay: 0.15s;
}
.pg-agent .ag-hero__h1 {
  animation: fadeInDown 0.7s ease both;
  animation-delay: 0.3s;
}

/* Suggestion chips stagger */
@keyframes chipPop {
  from { opacity: 0; transform: scale(0.85) translateY(6px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.pg-agent .ag-hero__chip:nth-child(1) { animation: chipPop 0.4s ease both; animation-delay: 0.5s; }
.pg-agent .ag-hero__chip:nth-child(2) { animation: chipPop 0.4s ease both; animation-delay: 0.6s; }
.pg-agent .ag-hero__chip:nth-child(3) { animation: chipPop 0.4s ease both; animation-delay: 0.7s; }
.pg-agent .ag-hero__chip:nth-child(4) { animation: chipPop 0.4s ease both; animation-delay: 0.8s; }

/* Chip hover */
.pg-agent .ag-hero__chip {
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.pg-agent .ag-hero__chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(37,99,235,0.12);
  background: #DDE8FF;
}

/* Trace step dots pulse */
@keyframes traceDotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37,99,235,0.3); }
  50% { box-shadow: 0 0 0 4px rgba(37,99,235,0.08); }
}
.pg-agent .ag-trace__dot--active {
  animation: traceDotPulse 2s ease-in-out infinite;
}

/* Demo section title hover accent */
.pg-agent .ag-demo__title {
  transition: color 0.2s ease;
}
.pg-agent .ag-demo__title:hover em {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Demo tag pills hover */
.pg-agent .ag-demo__tag {
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.pg-agent .ag-demo__tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(37,99,235,0.1);
}

/* Privacy card hover */
.pg-agent .ag-privacy__card {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease;
}
.pg-agent .ag-privacy__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
}

/* Query input send button */
.pg-agent .ag-hero__send {
  transition: background 0.2s ease, transform 0.2s ease;
}
.pg-agent .ag-hero__send:hover {
  background: #1d4ed8;
  transform: scale(1.08);
}

/* Badge hover micro */
.pg-agent .ag-trace__badge {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pg-agent .ag-trace__badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

@media (prefers-reduced-motion: reduce) {
  .pg-agent .ag-hero__eyebrow, .pg-agent .ag-hero__h1,
  .pg-agent .ag-hero__chip, .pg-agent .ag-trace__dot--active {
    animation: none !important;
  }
}