/* Sections */

/* ===== HERO ===== */
.hero {
  position: relative;
  min-height: calc(100vh - var(--navbar-h));
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-block: var(--space-16);
}

/* Animated gradient background — two independent layers drifting */
.hero::before {
  content: '';
  position: absolute;
  inset: -8%;
  background:
    radial-gradient(ellipse 55% 70% at 15% 55%, rgba(42,45,116,.5) 0%, transparent 65%),
    radial-gradient(ellipse 45% 50% at 85% 25%, rgba(224,104,58,.16) 0%, transparent 60%);
  animation: hero-orb-drift 22s ease-in-out infinite;
  pointer-events: none;
  will-change: transform;
}
.hero::after {
  content: '';
  position: absolute;
  inset: -8%;
  background:
    radial-gradient(ellipse 38% 42% at 70% 80%, rgba(129,140,248,.14) 0%, transparent 55%),
    radial-gradient(ellipse 32% 38% at 25% 18%, rgba(224,104,58,.09) 0%, transparent 60%);
  animation: hero-orb-drift-2 28s ease-in-out infinite;
  pointer-events: none;
  will-change: transform;
}
.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}

.hero__content { max-width: 600px; }

.hero__headline {
  font-size: clamp(2.1rem, 4.2vw, 3.25rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.12;
  color: var(--text);
  margin-bottom: var(--space-5);
  letter-spacing: -0.5px;
}
.hero__headline .hero__hl-accent { color: var(--brand-secondary); }

.hero__subhead {
  font-size: var(--text-body-lg);
  color: var(--text-muted);
  max-width: 50ch;
  line-height: 1.7;
  margin-bottom: var(--space-8);
}

.hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }

.hero__scroll-hint {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-body-sm);
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}
.hero__scroll-hint:hover { color: var(--text); }
.hero__scroll-hint svg { animation: bounce-y 1.8s ease-in-out infinite; }

/* Hero visual / mockup */
.hero__visual { display: flex; justify-content: center; align-items: center; }


/* GIF alternative: drop this class on an img tag */
.hero__app-gif {
  width: 100%;
  max-width: 380px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg), 0 24px 64px rgba(0,0,0,.25);
  display: block;
}

/* The product shot. A real screenshot rather than a CSS mockup: the thing
   people are deciding whether to trust is what the app actually looks like,
   and a hand-built approximation of it is a drawing of a promise. */
.hero__shot {
  width: 100%;
  height: auto;
  max-width: 640px;
  border-radius: var(--radius-xl);
  /* The image's own corners are near-black, so the rounding reads as part of
     the artwork on the dark theme and as a framed screenshot on the light one. */
  
  display: block;
}

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
  /* Kept on small screens, where the old CSS mockup was hidden. A screenshot
     of the product is the most persuasive thing on the page, and at 14 KB it
     no longer costs what an image used to. Capped so it cannot push the
     call to action below the fold. */
  .hero__visual { margin-top: var(--space-8); }
  .hero__shot { max-height: 38vh; width: auto; margin-inline: auto; }
}

/* ===== TRUST STRIP ===== */
.trust-strip {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  text-align: center;
  font-size: var(--text-body-sm);
  color: var(--text-faint);
  letter-spacing: 0.03em;
}

/* ===== NUMBERED FEATURE LIST ===== */
.feat-list { display: flex; flex-direction: column; margin-top: var(--space-12); }

.feat-item {
  display: grid;
  grid-template-columns: 4rem 1fr auto;
  gap: var(--space-6);
  align-items: center;
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--hairline);
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-radius var(--duration-fast) var(--ease-standard);
  cursor: default;
  border-radius: 0;
}
.feat-item:first-child { border-top: 1px solid var(--hairline); }
.feat-item:hover { background: var(--surface); border-radius: var(--radius-md); }
.feat-item:hover .feat-num { color: var(--brand-primary-bright); }

.feat-num {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--surface-elevated);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
  transition: color var(--duration-fast) var(--ease-standard);
}

.feat-body {}
.feat-title { font-size: var(--text-h4); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-2); }
.feat-desc  { font-size: var(--text-body); color: var(--text-muted); max-width: 58ch; line-height: 1.65; }

.feat-icon {
  color: var(--text-faint);
  flex-shrink: 0;
  font-size: 1.5rem;
  opacity: 0.6;
}

@media (max-width: 640px) {
  .feat-item {
    grid-template-columns: 2.5rem 1fr;
    gap: var(--space-4);
  }
  .feat-icon { display: none; }
  .feat-num { font-size: 1.25rem; }
}

/* ===== MODES SECTION ===== */
.modes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-top: var(--space-8);
}
@media (max-width: 768px) { .modes-grid { grid-template-columns: 1fr; } }

/* ===== WORKFLOW (replaces how-it-works) ===== */
.workflow-wrap { margin-top: var(--space-12); }

.workflow-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
}

/* Gradient connecting line */
.workflow-track::before {
  content: '';
  position: absolute;
  top: 1.125rem;
  left: calc(12.5% + 1.125rem);
  right: calc(12.5% + 1.125rem);
  height: 1px;
  background: linear-gradient(90deg, var(--brand-primary-bright) 0%, var(--brand-secondary) 100%);
  opacity: 0.25;
}

.workflow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 var(--space-3);
  position: relative;
  z-index: 1;
}

.workflow-step__num {
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-bright) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-body-sm);
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--space-4);
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px rgba(129,140,248,.2);
  flex-shrink: 0;
}

.workflow-step__title { font-size: var(--text-h4); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-2); }
.workflow-step__desc  { font-size: var(--text-body-sm); color: var(--text-muted); line-height: 1.55; max-width: 16ch; margin-inline: auto; }

/* Mobile: horizontal scroll (unique at small size) */
@media (max-width: 768px) {
  .workflow-track {
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-4);
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }
  .workflow-step { scroll-snap-align: start; }
  .workflow-track::before { display: none; }
}

/* ===== STAT ROW ===== */
.stat-row {
  display: flex;
  align-items: center;
  gap: 0;
}
.stat-item {
  flex: 1;
  text-align: center;
  padding: var(--space-8) var(--space-4);
}
.stat-accent {
  display: block;
  font-size: clamp(2.5rem, 5.5vw, 4rem);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -2px;
  line-height: 1;
  margin-bottom: var(--space-3);
}
.stat-desc {
  font-size: var(--text-body-sm);
  color: var(--text-muted);
  max-width: 20ch;
  margin-inline: auto;
  line-height: 1.5;
}
.stat-divider {
  width: 1px;
  height: 5rem;
  background: var(--hairline);
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .stat-row { flex-direction: column; gap: 0; }
  .stat-divider { width: 3rem; height: 1px; }
  .stat-item { padding-block: var(--space-6); }
}

/* ===== FEATURES GRID (services page) ===== */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
@media (max-width: 900px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .features-grid { grid-template-columns: 1fr; } }

/* ===== CTA BAND ===== */
.cta-band { text-align: center; padding-block: var(--space-24); }
.cta-band__heading { font-size: var(--text-display-sm); font-weight: var(--font-weight-bold); margin-bottom: var(--space-3); }
.cta-band__sub { color: var(--text-muted); margin-bottom: var(--space-8); margin-inline: auto; max-width: 52ch; }

/* ===== HOW-IT-WORKS BG ===== */
.how-it-works-bg { background: var(--surface); }

/* ===== PAGE HEADER (inner pages) ===== */
.page-header {
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  padding-block: var(--space-12);
}
.page-header__eyebrow {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-secondary);
  margin-bottom: var(--space-2);
}
.page-header__title { font-size: var(--text-display-sm); font-weight: var(--font-weight-bold); margin-bottom: var(--space-3); }
.page-header__sub   { color: var(--text-muted); max-width: 58ch; }

/* ===== SERVICES PAGE ===== */
.service-section { padding-block: var(--space-16); }
.service-section + .service-section { border-top: 1px solid var(--hairline); }
.service-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: start; }
.service-layout.reverse { direction: rtl; }
.service-layout.reverse > * { direction: ltr; }
@media (max-width: 768px) { .service-layout, .service-layout.reverse { grid-template-columns: 1fr; direction: ltr; } }

.service-use-cases { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-6); }
.use-case { display: flex; gap: var(--space-3); align-items: flex-start; }
.use-case__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-secondary); margin-top: 0.45em; flex-shrink: 0; }
.use-case__text { font-size: var(--text-body); color: var(--text-muted); line-height: 1.6; }

.capability-list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.capability-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  font-size: var(--text-body-sm);
  color: var(--text-muted);
  font-weight: var(--font-weight-medium);
}

/* ===== CONTACT ===== */
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: start; }
@media (max-width: 768px) { .contact-layout { grid-template-columns: 1fr; } }
.contact-channels { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-6); }
.channel-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); }
.channel-label { font-size: var(--text-caption); font-weight: var(--font-weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--space-1); }
.channel-value { font-size: var(--text-body); color: var(--brand-primary-bright); }
.channel-note  { font-size: var(--text-caption); color: var(--text-faint); margin-top: var(--space-1); }
.address-card  { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); margin-top: var(--space-4); }

/* ===== ABOUT ===== */
.principles-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-top: var(--space-6); }
@media (max-width: 560px) { .principles-grid { grid-template-columns: 1fr; } }
.principle-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-5); }
.principle-icon { width: 2rem; height: 2rem; color: var(--brand-primary-bright); margin-bottom: var(--space-3); }
.principle-title { font-weight: var(--font-weight-semibold); margin-bottom: var(--space-1); }
.principle-desc  { font-size: var(--text-body-sm); color: var(--text-muted); }
.tamela-block { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--brand-primary-bright); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: var(--space-6); margin-block: var(--space-8); }

/* ===== TOC NAV (legal pages) ===== */
.toc { display: flex; flex-direction: column; gap: var(--space-2); }
.toc a { font-size: var(--text-body-sm); color: var(--text-muted); text-decoration: none; padding: var(--space-1) 0; transition: color var(--duration-fast); }
.toc a:hover { color: var(--brand-secondary); }

/* ===== DEMO ===== */
/* A 16:9 box that holds its shape before anything is in it, so dropping the
   embed in later does not move the rest of the page. `aspect-ratio` rather
   than the padding-top trick: it survives a video that reports a different
   intrinsic size. */
.demo-frame {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-lg), 0 24px 64px rgba(0,0,0,.25);
}

.demo-frame iframe,
.demo-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Shown until there is a recording. A placeholder that says what is missing
   and offers the alternative is worth more than an empty black rectangle,
   which reads as a broken embed. */
.demo-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-8);
  text-align: center;
  color: var(--text-faint);
}
.demo-placeholder__title {
  font-size: var(--text-h4);
  font-weight: var(--font-weight-semibold);
  color: var(--text-muted);
}
.demo-placeholder__note {
  font-size: var(--text-body-sm);
  color: var(--text-faint);
  max-width: 42ch;
}
.demo-placeholder__note a { color: var(--brand-secondary); }