/* ============================================
   Design System
   White / Light Gray / Translucent Blue Glass
   ============================================ */

/* --- CSS Variables --- */
:root {
  /* Colors */
  --white: #ffffff;
  --gray-50: #f8f9fa;
  --gray-100: #f0f2f5;
  --gray-200: #e4e7ec;
  --gray-300: #d0d5dd;
  --gray-400: #98a2b3;
  --gray-600: #475467;
  --gray-700: #344054;
  --gray-900: #101828;

  --blue-50: #eff8ff;
  --blue-100: #d1e9ff;
  --blue-200: #b2ddff;
  --blue-400: #53b1fd;
  --blue-500: #2e90fa;
  --blue-600: #1570ef;
  --blue-700: #175cd3;
  --blue-900: #194185;

  /* Glass effect */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.06);
  --glass-blur: blur(12px);

  /* Blue glass accent */
  --blue-glass-bg: rgba(46, 144, 250, 0.06);
  --blue-glass-border: rgba(46, 144, 250, 0.15);

  /* Typography */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Georgia", "Times New Roman", serif;

  /* Spacing */
  --nav-height: 64px;
  --page-max-width: 960px;
  --section-padding: 80px;
}

/* --- Reset & Base --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--gray-700);
  background-color: var(--white);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Subtle background pattern */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(46, 144, 250, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(46, 144, 250, 0.03) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
}

/* --- Typography --- */
h1, h2 {
  color: var(--gray-900);
  line-height: 1.3;
  font-weight: 600;
  font-family: var(--font-display);
}

h3, h4 {
  color: var(--gray-900);
  line-height: 1.3;
  font-weight: 600;
  font-family: var(--font-body);
}

h1 {
  font-size: 2.5rem;
  letter-spacing: -0.02em;
}

h2 {
  font-size: 1.75rem;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}

h3 {
  font-size: 1.25rem;
  margin-bottom: 12px;
}

p {
  margin-bottom: 16px;
}

a {
  color: var(--blue-600);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--blue-700);
}

strong {
  color: var(--gray-900);
  font-weight: 600;
}

/* --- Focus styles (accessibility) --- */
a:focus-visible,
button:focus-visible,
.cta-button:focus-visible,
.nav-links a:focus-visible,
.nav-toggle:focus-visible,
.tab-button:focus-visible {
  outline: 2px solid var(--blue-600);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Skip to main content link (a11y) --- */
/*
 * Visible only when focused via keyboard (Tab from a fresh page load).
 * Uses transform: translateY(-100%) to hide itself by its own height,
 * so it's robust against changes in padding, font size, or text wrapping.
 * On focus it slides in from the top-left corner and the user can press
 * Enter to jump to <main>, skipping the nav.
 */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-100%);
  background: var(--blue-600);
  color: var(--white);
  padding: 10px 18px;
  z-index: 10000;
  text-decoration: none;
  font-weight: 600;
  border-radius: 0 0 8px 0;
  transition: transform 0.15s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  color: var(--white);
  outline: 2px solid var(--white);
  outline-offset: -4px;
}

/* --- Navigation --- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-inner {
  width: 100%;
  max-width: var(--page-max-width);
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gray-900);
  text-decoration: none;
  letter-spacing: -0.02em;
  font-family: var(--font-display);
}

.nav-logo:hover {
  color: var(--blue-600);
}

.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
}

.nav-links a {
  font-size: 0.9rem;
  color: var(--gray-600);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
  position: relative;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--blue-600);
}

.nav-links a.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--blue-600);
  border-radius: 1px;
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--gray-700);
  margin: 5px 0;
  transition: 0.3s;
}

/* --- Page Layout --- */
.page {
  flex: 1;
  padding-top: var(--nav-height);
}

.section {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: var(--section-padding) 24px;
}

/* --- Glass Cards --- */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 32px;
  box-shadow: var(--glass-shadow);
}

.blue-glass-card {
  background: var(--blue-glass-bg);
  border: 1px solid var(--blue-glass-border);
  border-radius: 16px;
  padding: 32px;
}

.content-glass {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 16px;
  padding: 32px;
}

/* --- Card Icons (SVG attributes centralized here) --- */
.card-icon {
  width: 36px;
  height: 36px;
  color: var(--blue-600);
  margin-bottom: 14px;
}

.card-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Page Backgrounds (consolidated; photo on home only) --- */
.page[data-bg] {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: relative;
}

.page[data-bg]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, var(--overlay-opacity, 0.5));
  backdrop-filter: blur(var(--overlay-blur, 2px));
  -webkit-backdrop-filter: blur(var(--overlay-blur, 2px));
  z-index: 0;
  pointer-events: none;
}

.page[data-bg] > * {
  position: relative;
  z-index: 1;
}

.page[data-bg="home"] {
  background-image: url('../images/hero-sunset.jpg');
}

/* --- Page hero (photo banner at top of sub-pages) --- */
.page-hero {
  position: relative;
  padding: 60px 24px 64px;
}

.page-hero[data-bg] {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.page-hero[data-bg]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 0;
  pointer-events: none;
}

.page-hero[data-bg] > * {
  position: relative;
  z-index: 1;
}

.page-hero[data-bg="why"] {
  background-image: url('../images/why-nature.jpg');
}

.page-hero-inner {
  max-width: 680px;
  margin: 0 auto;
  padding: 40px 32px;
  text-align: center;
}

.page-hero h1 {
  margin-bottom: 16px;
}

.page-hero-intro {
  font-size: 1.1rem;
  color: var(--gray-700);
  line-height: 1.7;
  margin: 0;
}

/* --- Hero (home page) --- */
.hero {
  padding: 80px 24px 40px;
  max-width: var(--page-max-width);
  margin: 0 auto;
}

.hero-glass {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  padding: 48px 40px;
}

.hero-kicker {
  font-size: 1.75rem;
  font-weight: 500;
  color: var(--blue-600);
  margin-bottom: 18px;
  font-family: var(--font-body);
  letter-spacing: 0.01em;
}

.hero-headline {
  font-size: 2.5rem;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 20px;
}

.hero-tagline {
  font-size: 1.1rem;
  color: var(--gray-700);
  max-width: 560px;
  margin: 0 auto 32px;
  line-height: 1.7;
}

/* --- Feature Card --- */
.feature-card {
  padding: 28px;
  text-align: left;
}

.feature-card h3 {
  color: var(--blue-700);
  font-size: 1.1rem;
  margin-bottom: 10px;
}

.feature-card .feature-lede {
  color: var(--gray-900);
  font-weight: 600;
  margin-bottom: 10px;
}

.feature-card p {
  font-size: 0.95rem;
  color: var(--gray-700);
  margin: 0 0 8px;
  line-height: 1.6;
}

.feature-card p:last-child {
  margin-bottom: 0;
}

/* --- Grids (intrinsic sizing, no breakpoint snap) --- */
.diff-grid,
.values-grid,
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin: 40px 0;
}

/* --- CTA Button --- */
.cta-button {
  display: inline-block;
  padding: 14px 32px;
  background: var(--blue-600);
  color: var(--white);
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.1s ease;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
}

.cta-button:hover {
  background: var(--blue-700);
  color: var(--white);
  transform: translateY(-1px);
}

/* --- Data Tables --- */
.data-table-wrapper {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 400px;
  margin: 24px 0;
  border-radius: 12px;
  border: 1px solid var(--gray-200);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.data-table thead {
  background: var(--gray-50);
  position: sticky;
  top: 0;
  z-index: 1;
}

.data-table th {
  text-align: left;
  padding: 12px 16px;
  font-weight: 600;
  color: var(--gray-700);
  border-bottom: 2px solid var(--gray-200);
  white-space: nowrap;
}

.data-table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-600);
}

.data-table tbody tr:hover {
  background: var(--blue-glass-bg);
}

.data-table .amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.data-table .percent {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* --- Tabs --- */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--gray-200);
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.tab-button {
  padding: 12px 24px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--gray-400);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font-body);
}

.tab-button:hover {
  color: var(--gray-700);
}

.tab-button[aria-selected="true"],
.tab-button.active {
  color: var(--blue-600);
  border-bottom-color: var(--blue-600);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* --- Summary Stats --- */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin: 24px 0 32px;
}

.stat-card {
  text-align: center;
  padding: 20px;
}

.stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--blue-600);
  display: block;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-display);
}

.stat-label {
  font-size: 0.85rem;
  color: var(--gray-400);
  font-weight: 500;
}

/* --- Service Cards --- */
.service-card {
  padding: 28px;
  margin-bottom: 20px;
}

.service-card h3 {
  color: var(--gray-900);
}

/* --- Pricing Callout --- */
.callout {
  border-left: 3px solid var(--blue-500);
  padding: 20px 24px;
  margin: 24px 0;
  background: var(--blue-glass-bg);
  border-radius: 0 12px 12px 0;
}

.callout p {
  margin: 0;
  color: var(--gray-700);
}

/* --- Footer --- */
.footer {
  border-top: 1px solid var(--gray-200);
  padding: 32px 24px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--gray-400);
}

.footer a {
  color: var(--gray-400);
}

.footer a:hover {
  color: var(--blue-600);
}

.footer-origin {
  font-size: 0.9rem;
  color: var(--gray-600);
  margin-bottom: 12px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.footer-origin strong {
  color: var(--gray-700);
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

/* --- Contact Info --- */
.contact-item h3 {
  color: var(--gray-900);
  margin-bottom: 8px;
}

.contact-item p {
  color: var(--gray-600);
  margin: 0;
}

.contact-item a {
  font-weight: 500;
}

/* --- Charts iframe (financials.html) --- */
.charts-frame-wrapper {
  min-height: 540px;
  margin: 32px 0;
  position: relative;
}

.charts-frame {
  display: block;
  width: 100%;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  background: var(--gray-50);
  /* Height is set dynamically from inside the iframe, which posts its
     laid-out content height via `window.postMessage`. See the script
     block in financials.html and `_postToParent` in charts/lib/main.dart.
     There's no hand-computed value to keep in sync here. */
}

/* While the Flutter app is loading, the iframe is appended to the wrapper
   but hidden, positioned absolutely so it doesn't push the spinner
   around, and invisible so Flutter's own loading states never flash
   through. The wrapper's min-height keeps the spinner in view. When the
   iframe posts its `ready` message, this class is removed and the height
   is set explicitly on the element. */
.charts-frame-hidden {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 540px;
}

.charts-load-failed {
  padding: 24px 28px;
  margin: 32px 0;
  background: var(--gray-50);
  border-left: 3px solid var(--gray-300);
  color: var(--gray-600);
  font-size: 0.9rem;
  border-radius: 0 8px 8px 0;
}

.charts-load-failed p {
  margin: 0;
}

/* --- Shared iframe spinner (pre-boot loading state) --- */
.iframe-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 540px;
  gap: 14px;
  color: var(--gray-400);
}

.iframe-spinner p {
  margin: 0;
  font-size: 0.9rem;
}

.spinner-dot {
  width: 32px;
  height: 32px;
  border: 3px solid var(--gray-200);
  border-top-color: var(--blue-600);
  border-radius: 50%;
  animation: spinner-rotate 0.8s linear infinite;
}

@keyframes spinner-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* --- Demo cards (opensource.html) ---
   Each card has a title, a description beneath it, and a "phone screen"
   region below those. The phone screen auto-loads its demo iframe via
   IntersectionObserver as the card scrolls into view. While loading, a
   spinner shows inside the phone; on success, the iframe is revealed;
   on failure, the phone shows an error + retry hint and becomes
   clickable to retry. Three states: loading, loaded, failed,
   swapped by JS via `data-state` on the card. */

.demo-grid {
  list-style: none;
  padding: 0;
  margin: 24px 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  /* Don't stretch cards to match their neighbor's height when one has a
     loaded iframe and the other doesn't. */
  align-items: start;
}

@media (max-width: 720px) {
  .demo-grid {
    grid-template-columns: 1fr;
  }
}

.demo-card {
  /* Extends .glass-card (background, border, padding, radius).
     Stack the title, description, and the phone screen. */
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.demo-card-title {
  margin: 0;
  align-self: flex-start;
  font-size: 1.05rem;
  font-family: ui-monospace, Menlo, Monaco, Consolas, monospace;
}

.demo-card-title a {
  color: var(--gray-900);
  text-decoration: none;
}

.demo-card-title a:hover {
  color: var(--blue-600);
}

.demo-card-version {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  background: var(--blue-50);
  color: var(--blue-600);
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
}

/* Package description sits between the title row and the phone screen. */
.demo-card-description {
  margin: 0;
  align-self: flex-start;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--gray-600);
}

/* The phone-screen region: glass-aesthetic, 360x720 phone aspect. While
   loading/loaded, not interactive. When the demo fails to load, the
   region becomes clickable to retry. */
.demo-phone {
  width: 360px;
  max-width: 100%;
  height: 720px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  overflow: hidden; /* clip iframe corners to the phone radius */
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease,
              box-shadow 0.15s ease, transform 0.15s ease;
}

/* Only the failed state is clickable (for retry). Hover and active
   feedback only apply when the card is in that state. */
.demo-card[data-state="failed"] .demo-phone {
  cursor: pointer;
}

.demo-card[data-state="failed"] .demo-phone:hover {
  background: var(--blue-glass-bg);
  border-color: var(--blue-glass-border);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.demo-card[data-state="failed"] .demo-phone:active {
  transform: translateY(1px);
}

/* The centered content inside the phone screen (spinner / error / links). */
.demo-phone-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 32px;
  text-align: center;
}

.demo-phone-action {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--blue-600);
  letter-spacing: 0.02em;
}

.demo-phone-action-disabled {
  color: var(--gray-400);
  font-weight: 400;
}

.demo-phone-action-disabled a {
  color: var(--blue-600);
}

/* "Click to retry" affordance shown in the failed state, below the
   error message. */
.demo-phone-retry-hint {
  margin: 0;
  font-size: 0.85rem;
  color: var(--blue-600);
  letter-spacing: 0.02em;
}

/* Loading overlay: sits on top of the iframe (which is already in the
   DOM and fetching) so the user sees a spinner instead of Flutter's
   bootstrap flash. Removed when the embedded app posts its ready
   message. */
.demo-phone-overlay {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  z-index: 1;
}

/* Iframe fills the phone screen exactly; the parent's border-radius
   + overflow:hidden clips its corners to match. */
.demo-phone iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- Page intro --- */
.page-intro {
  margin-bottom: 48px;
}

.page-intro h1 {
  margin-bottom: 16px;
}

.page-intro p {
  font-size: 1.1rem;
  color: var(--gray-700);
}

/* --- Utility classes --- */
.u-pt-0        { padding-top: 0; }
.u-mt-24       { margin-top: 24px; }
.u-mt-32       { margin-top: 32px; }
.u-mt-48       { margin-top: 48px; }
.u-mb-0        { margin-bottom: 0; }
.u-mb-8        { margin-bottom: 8px; }
.u-mb-12       { margin-bottom: 12px; }
.u-mb-20       { margin-bottom: 20px; }
.u-mb-40       { margin-bottom: 40px; }
.u-lead        { font-size: 1.05rem; }

/* --- Composed helpers (promoted from repeated inline patterns) --- */
.section-heading {
  text-align: center;
  margin-bottom: 8px;
}

.section-subhead {
  text-align: center;
  color: var(--gray-600);
  margin-bottom: 32px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.note-small {
  font-size: 0.85rem;
  color: var(--gray-400);
  margin-top: 16px;
}

.loading-state {
  color: var(--gray-400);
  padding: 24px;
  text-align: center;
}

.empty-state {
  text-align: center;
  padding: 48px 32px;
}

.empty-state h3 {
  color: var(--gray-400);
  margin-bottom: 8px;
}

.empty-state p {
  color: var(--gray-400);
  margin: 0;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .page[data-bg="home"] {
    background-position: center center;
    background-attachment: scroll;
  }

  .hero-headline {
    font-size: 2rem;
  }

  .hero-glass {
    padding: 32px 20px;
  }

  .section {
    padding: 48px 20px;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background: rgba(240, 240, 255, 0.97);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--glass-border);
    flex-direction: column;
    padding: 16px 24px;
    gap: 16px;
  }

  .nav-links.open {
    display: flex;
  }

  .nav-toggle {
    display: block;
  }

  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.4rem;
  }
}