/* ==========================================================================
   Synapse Product Portal — Styles
   Brand: Fownd Inc. — Deep Forest Green, Warm Beige, Muted Teal
   ========================================================================== */

/* ---------- CSS Custom Properties ---------- */
:root {
  --deep-green: #1F3D3B;
  --deep-green-rgb: 31, 61, 59;
  --warm-beige: #CFCBBA;
  --warm-beige-rgb: 207, 203, 186;
  --muted-teal: #5C91A4;
  --muted-teal-rgb: 92, 145, 164;
  --muted-teal-a11y: #4A7A8C;

  --olive-green: #495B25;
  --light-gray: #ECEFF1;
  --light-gray-rgb: 236, 239, 241;

  --white: #FFFFFF;
  --text-dark: #1a2e2c;
  --text-body: #3d4f4d;
  --text-muted: #5f706e;
  --text-on-dark: #FFFFFF;
  --text-on-dark-muted: rgba(207, 203, 186, 0.8);

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  --font-heading: 'Baloo Bhaina 2', cursive;
  --font-body: 'Lato', sans-serif;
  --font-ui: 'Inter', sans-serif;

  --max-width: 1140px;
  --nav-height: 64px;
  --border-radius: 12px;
  --border-radius-sm: 8px;
  --border-radius-lg: 16px;
  --border-radius-pill: 9999px;

  --shadow-sm: 0 1px 3px rgba(31, 61, 59, 0.08);
  --shadow-md: 0 4px 12px rgba(31, 61, 59, 0.1);
  --shadow-lg: 0 8px 30px rgba(31, 61, 59, 0.12);
  --shadow-xl: 0 16px 48px rgba(31, 61, 59, 0.16);

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--muted-teal-a11y); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--deep-green); }

/* ---------- Layout ---------- */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-xl); }

/* ---------- Skip Link ---------- */
.skip-link {
  position: absolute; top: -100%; left: var(--space-md);
  background: var(--deep-green); color: var(--white);
  padding: var(--space-sm) var(--space-md); border-radius: var(--border-radius-sm);
  z-index: 9999; font-family: var(--font-ui); font-size: 0.875rem;
}
.skip-link:focus { top: var(--space-md); }

/* ---------- Navbar ---------- */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--nav-height);
  background: rgba(255,255,255,0.92); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(31,61,59,0.08); z-index: 1000;
}
.navbar__inner { display: flex; align-items: center; height: 100%; gap: var(--space-lg); }
.navbar__brand { display: flex; align-items: center; gap: var(--space-sm); text-decoration: none; }
.navbar__logo { border-radius: 6px; }
.navbar__wordmark {
  font-family: var(--font-heading); font-weight: 600; font-size: 1.25rem;
  color: var(--deep-green); letter-spacing: -0.01em;
}
.navbar__nav {
  display: flex; list-style: none; gap: var(--space-lg); margin-left: auto;
  font-family: var(--font-ui); font-size: 0.875rem; font-weight: 500;
}
.navbar__link {
  color: var(--text-muted); text-decoration: none; padding: var(--space-xs) 0;
  transition: color var(--transition-fast);
}
.navbar__link:hover { color: var(--deep-green); }

.btn--nav {
  font-family: var(--font-ui); font-size: 0.8125rem; font-weight: 600;
  padding: 0.5rem 1.25rem; border-radius: var(--border-radius-pill);
  background: var(--deep-green); color: var(--white); text-decoration: none;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.btn--nav:hover { background: #2a524f; color: var(--white); transform: translateY(-1px); }

.navbar__toggle { display: none; background: none; border: none; cursor: pointer; padding: var(--space-sm); }
.navbar__toggle-icon {
  display: block; width: 20px; height: 2px; background: var(--deep-green);
  position: relative; transition: background var(--transition-fast);
}
.navbar__toggle-icon::before, .navbar__toggle-icon::after {
  content: ''; position: absolute; width: 100%; height: 2px; background: var(--deep-green);
  left: 0; transition: transform var(--transition-fast);
}
.navbar__toggle-icon::before { top: -6px; }
.navbar__toggle-icon::after { top: 6px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  font-family: var(--font-ui); font-weight: 600; font-size: 0.9375rem;
  padding: 0.75rem 1.75rem; border-radius: var(--border-radius-pill);
  text-decoration: none; cursor: pointer; border: none;
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.btn__icon { width: 18px; height: 18px; flex-shrink: 0; }
.btn--primary {
  background: var(--deep-green); color: var(--white);
  box-shadow: 0 2px 8px rgba(31,61,59,0.2);
}
.btn--primary:hover { background: #2a524f; color: var(--white); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--secondary {
  background: transparent; color: var(--deep-green);
  border: 2px solid rgba(31,61,59,0.2);
}
.btn--secondary:hover { border-color: var(--deep-green); color: var(--deep-green); }

/* ---------- Sections ---------- */
.section { padding: var(--space-4xl) 0; }
.section--dark { background: var(--deep-green); color: var(--text-on-dark); }
.section--dark .section__title { color: var(--white); }
.section--dark .section__subtitle { color: var(--text-on-dark-muted); }
.section--light { background: var(--light-gray); }

.section__header { text-align: center; max-width: 640px; margin: 0 auto var(--space-3xl); }
.section__title {
  font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: var(--text-dark); line-height: 1.2; margin-bottom: var(--space-md);
}
.section__subtitle {
  font-size: 1.125rem; color: var(--text-muted); line-height: 1.6;
}

/* ---------- Hero ---------- */
.hero {
  padding: calc(var(--nav-height) + var(--space-4xl)) 0 var(--space-3xl);
  background: linear-gradient(180deg, rgba(236,239,241,0.5) 0%, var(--white) 100%);
  text-align: center;
}
.hero__content { max-width: 800px; margin: 0 auto; }
.hero__logo { margin: 0 auto var(--space-xl); }
.hero__badge {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  font-family: var(--font-ui); font-size: 0.8125rem; font-weight: 500;
  color: var(--muted-teal-a11y); background: rgba(92,145,164,0.1);
  padding: 0.375rem 1rem; border-radius: var(--border-radius-pill);
  margin-bottom: var(--space-xl);
}
.hero__badge-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #4CAF50;
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.hero__title {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.15;
  color: var(--text-dark); margin-bottom: var(--space-lg);
}
.hero__title-accent { color: var(--muted-teal-a11y); }
.hero__subtitle {
  font-size: clamp(1rem, 2.5vw, 1.25rem); color: var(--text-muted);
  max-width: 600px; margin: 0 auto var(--space-2xl); line-height: 1.7;
}
.hero__actions { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-3xl); }
.hero__screenshot {
  max-width: 720px; margin: 0 auto; border-radius: var(--border-radius-lg);
  overflow: hidden; box-shadow: var(--shadow-xl); border: 1px solid rgba(31,61,59,0.1);
}
.hero__screenshot img { width: 100%; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2xl); }
.step { text-align: center; }
.step__number {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(92,145,164,0.1); color: var(--muted-teal-a11y);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--space-lg);
}
.step__number svg { width: 24px; height: 24px; }
.step__title {
  font-family: var(--font-heading); font-weight: 600; font-size: 1.125rem;
  color: var(--text-dark); margin-bottom: var(--space-sm);
}
.step__desc { font-size: 0.9375rem; color: var(--text-muted); line-height: 1.6; }

/* ---------- Feature Gallery ---------- */
.feature-gallery {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl);
  margin-top: var(--space-3xl);
}
.feature-gallery__item {
  border-radius: var(--border-radius); overflow: hidden;
  box-shadow: var(--shadow-md); border: 1px solid rgba(31,61,59,0.08);
  background: var(--white);
}
.feature-gallery__item img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.feature-gallery__item figcaption {
  padding: var(--space-md); font-family: var(--font-ui); font-size: 0.8125rem;
  color: var(--text-muted); text-align: center;
}

/* ---------- Video Containers ---------- */
.video-container {
  position: relative; overflow: hidden; cursor: pointer;
  background: #0a0f0e;
}
.video-container::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0) 70%, rgba(0,0,0,0.15) 100%);
  pointer-events: none; opacity: 0; transition: opacity var(--transition-base);
}
.video-container:hover::before { opacity: 1; }
.feature-video {
  width: 100%; aspect-ratio: 16/10; object-fit: cover;
  display: block; transition: transform var(--transition-slow);
}
.video-container:hover .feature-video { transform: scale(1.02); }

/* Video playing badge */
.video-badge {
  position: absolute; bottom: var(--space-sm); left: var(--space-sm); z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: var(--border-radius-pill);
  background: rgba(31, 61, 59, 0.85); color: var(--white);
  font-family: var(--font-ui); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.02em; text-transform: uppercase;
  opacity: 0; transform: translateY(-4px);
  transition: opacity var(--transition-base), transform var(--transition-base);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.video-badge svg { flex-shrink: 0; }
.video-container.is-playing .video-badge {
  opacity: 1; transform: translateY(0);
}
.video-container.is-playing .video-badge svg {
  animation: pulse-play 1.5s ease-in-out infinite;
}
@keyframes pulse-play {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Paused state — show play overlay */
.video-container:not(.is-playing)::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  background: rgba(31, 61, 59, 0.25);
  transition: background var(--transition-base);
}
.video-container:not(.is-playing):hover::after {
  background: rgba(31, 61, 59, 0.15);
}
/* Play button triangle overlay when paused */
.video-container:not(.is-playing) .feature-video {
  filter: brightness(0.92);
}

/* ---------- Architecture Diagram ---------- */
.architecture { margin-bottom: var(--space-3xl); }
.arch-diagram {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-lg); flex-wrap: wrap; margin-bottom: var(--space-2xl);
}
.arch-node {
  text-align: center; padding: var(--space-xl); border-radius: var(--border-radius);
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  min-width: 160px;
}
.arch-node__icon { margin-bottom: var(--space-sm); }
.arch-node__icon svg { width: 32px; height: 32px; stroke: var(--warm-beige); }
.arch-node__label {
  display: block; font-family: var(--font-heading); font-weight: 600;
  font-size: 1rem; color: var(--white); margin-bottom: var(--space-xs);
}
.arch-node__sub { font-size: 0.75rem; color: var(--text-on-dark-muted); }
.arch-arrow { flex-shrink: 0; }
.arch-arrow svg { width: 48px; height: 24px; stroke: var(--warm-beige); opacity: 0.6; }

.arch-cloud-block {
  display: flex; align-items: center; justify-content: center; gap: var(--space-md);
  padding: var(--space-lg); border-radius: var(--border-radius);
  background: rgba(255,80,80,0.08); border: 1px dashed rgba(255,100,100,0.3);
  max-width: 360px; margin: 0 auto;
}
.arch-cloud { display: flex; align-items: center; gap: var(--space-sm); opacity: 0.4; }
.arch-cloud svg { width: 24px; height: 24px; stroke: var(--warm-beige); }
.arch-cloud span { font-size: 0.875rem; color: var(--warm-beige); }
.arch-cloud__x svg { width: 20px; height: 20px; stroke: #ff6b6b; }
.arch-cloud__label { font-size: 0.8125rem; color: #ff9b9b; font-weight: 600; }

/* ---------- Pillars ---------- */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-xl); }
.pillar {
  padding: var(--space-xl); border-radius: var(--border-radius);
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
}
.pillar__icon { margin-bottom: var(--space-md); }
.pillar__icon svg { width: 28px; height: 28px; stroke: var(--warm-beige); }
.pillar__title {
  font-family: var(--font-heading); font-weight: 600; font-size: 1rem;
  color: var(--white); margin-bottom: var(--space-sm);
}
.pillar__desc { font-size: 0.875rem; color: var(--text-on-dark-muted); line-height: 1.6; }

/* ---------- Persona Cards (PTs) ---------- */
.persona-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); }
.persona-card {
  padding: var(--space-2xl); border-radius: var(--border-radius);
  background: var(--white); border: 1px solid rgba(31,61,59,0.08);
  box-shadow: var(--shadow-sm); transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.persona-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.persona-card__icon { margin-bottom: var(--space-md); }
.persona-card__icon svg { width: 32px; height: 32px; stroke: var(--muted-teal-a11y); }
.persona-card__title {
  font-family: var(--font-heading); font-weight: 600; font-size: 1.125rem;
  color: var(--text-dark); margin-bottom: var(--space-sm);
}
.persona-card__desc { font-size: 0.9375rem; color: var(--text-muted); line-height: 1.6; }

/* ---------- CTA Banner ---------- */
.cta-banner {
  display: flex; align-items: center; justify-content: center; gap: var(--space-xl);
  padding: var(--space-2xl); margin-top: var(--space-3xl);
  background: var(--light-gray); border-radius: var(--border-radius-lg);
}
.cta-banner__text {
  font-family: var(--font-heading); font-weight: 600; font-size: 1.25rem; color: var(--text-dark);
}

/* ---------- IT Cards ---------- */
.it-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); }
.it-card {
  padding: var(--space-2xl); border-radius: var(--border-radius);
  background: var(--white); border: 1px solid rgba(31,61,59,0.08); box-shadow: var(--shadow-sm);
}
.it-card__title {
  font-family: var(--font-heading); font-weight: 600; font-size: 1rem;
  color: var(--text-dark); margin-bottom: var(--space-sm);
}
.it-card__desc { font-size: 0.875rem; color: var(--text-muted); line-height: 1.6; }

/* ---------- Privacy Section ---------- */
.privacy-content {
  display: grid; grid-template-columns: 240px 1fr; gap: var(--space-3xl);
  max-width: 960px; margin: 0 auto;
}
.privacy-toc {
  position: sticky; top: calc(var(--nav-height) + var(--space-xl)); align-self: start;
}
.privacy-toc h3 {
  font-family: var(--font-heading); font-weight: 600; font-size: 0.9375rem;
  color: var(--text-dark); margin-bottom: var(--space-md);
}
.privacy-toc ol {
  list-style: none; counter-reset: toc; padding: 0;
}
.privacy-toc li {
  counter-increment: toc; margin-bottom: var(--space-sm);
}
.privacy-toc a {
  font-family: var(--font-ui); font-size: 0.8125rem; color: var(--text-muted);
  text-decoration: none; transition: color var(--transition-fast);
}
.privacy-toc a:hover { color: var(--deep-green); }

.privacy-body article { margin-bottom: var(--space-2xl); }
.privacy-body h3 {
  font-family: var(--font-heading); font-weight: 600; font-size: 1.125rem;
  color: var(--text-dark); margin-bottom: var(--space-md);
}
.privacy-body p { margin-bottom: var(--space-md); line-height: 1.7; font-size: 0.9375rem; }

.privacy-table-wrap { overflow-x: auto; margin: var(--space-md) 0; -webkit-overflow-scrolling: touch; max-width: calc(100vw - 2 * var(--space-lg)); }
.privacy-table {
  width: 100%; border-collapse: collapse; font-size: 0.875rem;
  font-family: var(--font-ui);
}
.privacy-table th {
  text-align: left; padding: var(--space-sm) var(--space-md);
  background: var(--light-gray); color: var(--text-dark); font-weight: 600;
  border-bottom: 2px solid rgba(31,61,59,0.1);
}
.privacy-table td {
  padding: var(--space-sm) var(--space-md); border-bottom: 1px solid rgba(31,61,59,0.06);
  color: var(--text-body);
}
.privacy-table code {
  background: rgba(31,61,59,0.06); padding: 0.125rem 0.375rem;
  border-radius: 4px; font-size: 0.8125rem;
}

.privacy-list { padding-left: var(--space-xl); margin: var(--space-md) 0; }
.privacy-list li {
  margin-bottom: var(--space-sm); font-size: 0.9375rem; line-height: 1.6;
}
.privacy-list--no { list-style-type: none; padding-left: 0; }
.privacy-list--no li::before {
  content: '\2717'; color: #c62828; margin-right: var(--space-sm); font-weight: 700;
}

/* ---------- Footer ---------- */
.footer {
  padding: var(--space-2xl) 0; border-top: 1px solid rgba(31,61,59,0.08);
  background: var(--white);
}
.footer__inner { text-align: center; }
.footer__brand {
  display: flex; align-items: center; justify-content: center; gap: var(--space-sm);
  font-family: var(--font-heading); font-weight: 500; color: var(--text-dark);
  margin-bottom: var(--space-md);
}
.footer__brand img { border-radius: 4px; }
.footer__links {
  display: flex; gap: var(--space-xl); justify-content: center; flex-wrap: wrap;
  margin-bottom: var(--space-md);
}
.footer__links a {
  font-family: var(--font-ui); font-size: 0.8125rem; color: var(--text-muted);
}
.footer__links a:hover { color: var(--deep-green); }
.footer__copy { font-size: 0.75rem; color: var(--text-muted); }

/* ---------- Fade-in Animation ---------- */
.fade-in {
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .it-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .navbar__nav { display: none; }
  .btn--nav { display: none; }
  .navbar__toggle { display: block; margin-left: auto; }
  .navbar__nav.open {
    display: flex; flex-direction: column;
    position: absolute; top: var(--nav-height); left: 0; right: 0;
    background: var(--white); padding: var(--space-lg);
    border-bottom: 1px solid rgba(31,61,59,0.1);
    box-shadow: var(--shadow-md);
  }

  .steps { grid-template-columns: 1fr; gap: var(--space-xl); }
  .feature-gallery { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr; }
  .persona-grid { grid-template-columns: 1fr; }
  .it-grid { grid-template-columns: 1fr; }
  .privacy-content { grid-template-columns: 1fr; }
  .privacy-toc { position: static; }
  .cta-banner { flex-direction: column; text-align: center; }

  .arch-diagram { flex-direction: column; }
  .arch-arrow { transform: rotate(90deg); }

  /* Table scroll hint on mobile */
  .privacy-table-wrap { margin-left: -var(--space-sm); margin-right: -var(--space-sm); padding: 0 var(--space-sm); }
  .privacy-table { min-width: 480px; }

  /* Hero screenshot constrain */
  .hero__screenshot { margin-left: calc(-1 * var(--space-md)); margin-right: calc(-1 * var(--space-md)); border-radius: var(--border-radius-sm); }

  /* Footer stack on mobile */
  .footer__links { flex-direction: column; gap: var(--space-sm); }
}