@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Manrope:wght@400;500;600;700;800&display=swap');

.home-page {
  --home-bg-start: color-mix(in srgb, var(--bg, #05070f) 84%, #031430 16%);
  --home-bg-mid: color-mix(in srgb, var(--bg, #05070f) 70%, var(--agent-accent, #0066cc) 30%);
  --home-bg-end: color-mix(in srgb, var(--panel, #111111) 80%, #000814 20%);
  --home-surface: color-mix(in srgb, var(--card-bg, rgba(17,17,17,0.85)) 84%, rgba(3,19,48,0.72) 16%);
  --home-surface-strong: color-mix(in srgb, var(--panel, #111111) 86%, rgba(4,22,58,0.86) 14%);
  --home-line: color-mix(in srgb, var(--agent-accent-2, #3399ff) 36%, rgba(148,163,184,0.34) 64%);
  --home-text: var(--text, #f8fafc);
  --home-muted: color-mix(in srgb, var(--text, #f8fafc) 74%, transparent);
  --home-accent: var(--agent-accent, #0066cc);
  --home-accent-2: var(--agent-accent-2, #3399ff);
  --home-good: #5eead4;
  --home-shadow: 0 24px 60px rgba(0,0,0,0.5);
  color: var(--home-text);
  font-family: 'Manrope', sans-serif;
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  overflow-x: clip;
  background:
    radial-gradient(circle at 10% 45%, rgba(24, 92, 255, 0.26), transparent 42%),
    radial-gradient(circle at 92% 82%, rgba(46, 189, 255, 0.2), transparent 36%),
    #000;
}

.home-page .container {
  width: min(1120px, calc(100% - 2rem));
  margin: 0 auto;
}

.home-hero,
.home-trust,
.home-section,
.home-cta {
  background: transparent;
  position: relative;
}

.home-hero {
  min-height: min(92vh, 58rem);
  padding: 8.2rem 0 5.8rem;
  overflow: hidden;
}

.home-hero-arc {
  position: absolute;
  left: 50%;
  bottom: -18rem;
  transform: translateX(-50%);
  width: min(90rem, 125vw);
  height: 30rem;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--home-accent-2) 38%, transparent) 0%, color-mix(in srgb, var(--home-accent) 16%, transparent) 38%, transparent 70%);
  filter: blur(2px);
  pointer-events: none;
}

.home-bg-icon {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  opacity: 0.34;
  filter: drop-shadow(0 18px 34px rgba(0,0,0,0.45));
  animation: home-icon-float 11s ease-in-out infinite;
}

.home-bg-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.home-bg-icon-a {
  width: 7.2rem;
  height: 7.2rem;
  top: 8.2rem;
  right: 46%;
}

.home-bg-icon-b {
  width: 5rem;
  height: 5rem;
  top: 14rem;
  right: 9%;
  animation-duration: 13s;
  animation-direction: reverse;
}

@keyframes home-icon-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(0.45rem, -0.9rem, 0) rotate(7deg); }
}

.home-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2rem;
  align-items: center;
}

.home-chip {
  width: fit-content;
  border: 1px solid color-mix(in srgb, var(--home-accent-2) 68%, rgba(226,232,240,0.58));
  color: #eaf4ff;
  background:
    linear-gradient(135deg, rgba(18, 42, 88, 0.86), rgba(12, 72, 116, 0.78));
  box-shadow:
    0 10px 26px rgba(5, 32, 78, 0.38),
    inset 0 0 0 1px rgba(255,255,255,0.1);
  border-radius: 999px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.74rem;
  padding: 0.4rem 0.86rem;
  margin: 0 0 0.95rem;
}

.home-hero h1 {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2rem, 4.1vw, 3.95rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  max-width: 40rem;
}

.home-hero p {
  margin: 1.15rem 0 0;
  color: var(--home-muted);
  max-width: 39rem;
  line-height: 1.56;
  font-size: clamp(1rem, 1.6vw, 1.23rem);
}

.home-hero-actions {
  margin-top: 1.9rem;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.home-btn {
  text-decoration: none;
  border-radius: 999px;
  min-height: 2.9rem;
  padding: 0.72rem 1.3rem;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 180ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.home-btn-primary {
  color: #e0f2fe;
  border: 1px solid color-mix(in srgb, var(--home-accent-2) 74%, rgba(226,232,240,0.26));
  background: linear-gradient(130deg, color-mix(in srgb, var(--home-accent) 78%, #7dd3fc 22%), color-mix(in srgb, var(--home-accent-2) 82%, #dbeafe 18%));
  box-shadow: 0 14px 30px color-mix(in srgb, var(--home-accent) 32%, transparent);
}

.home-btn-primary:hover,
.home-btn-primary:focus {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px color-mix(in srgb, var(--home-accent-2) 40%, transparent);
}

.home-btn-secondary {
  color: #e2e8f0;
  border: 1px solid rgba(148,163,184,0.46);
  background: color-mix(in srgb, var(--home-surface-strong) 74%, rgba(15,23,42,0.6) 26%);
}

.home-btn-secondary:hover,
.home-btn-secondary:focus {
  transform: translateY(-2px);
  border-color: rgba(226,232,240,0.82);
}

.home-platform-card,
.home-feature-card,
.home-flow-step,
.home-pricing-card,
.home-faq-list details,
.home-cta-shell,
.home-highlight,
.home-trust-grid span {
  border: 1px solid var(--home-line);
  background: var(--home-surface);
  border-radius: 1rem;
}

.home-platform-card {
  position: relative;
  border-radius: 1.2rem;
  background: linear-gradient(165deg, color-mix(in srgb, var(--home-surface-strong) 88%, rgba(255,255,255,0.03) 12%), color-mix(in srgb, var(--home-surface) 86%, rgba(6,16,34,0.6) 14%));
  backdrop-filter: blur(10px) saturate(130%);
  box-shadow: var(--home-shadow);
  padding: 1.2rem;
  transform-style: preserve-3d;
  transition: transform 250ms ease, box-shadow 250ms ease;
}

.home-gloss {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(125deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.02) 34%, rgba(255,255,255,0.08) 100%);
  mix-blend-mode: screen;
}

.home-platform-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.home-platform-head h3 {
  margin: 0;
  font-size: 1.04rem;
  display: inline-flex;
  align-items: center;
  gap: 0.52rem;
}

.home-platform-logo {
  width: 1.42rem;
  height: 1.42rem;
  border-radius: 999px;
  object-fit: contain;
}

.home-platform-head span {
  color: var(--home-good);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.home-platform-list { list-style: none; margin: 0.95rem 0 0; padding: 0; display: grid; gap: 0.52rem; }
.home-platform-list li { border: 1px solid rgba(148,163,184,0.26); border-radius: 0.72rem; padding: 0.6rem 0.74rem; background: rgba(15,30,62,0.56); display: flex; align-items: center; justify-content: space-between; font-size: 0.9rem; }
.home-platform-list li span { display: inline-flex; align-items: center; gap: 0.43rem; }
.home-platform-list li i { color: color-mix(in srgb, var(--home-accent-2) 66%, #dbeafe 34%); }
.home-platform-list small { color: rgba(191,219,254,0.9); font-size: 0.74rem; }

.home-metrics { margin-top: 1.3rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.72rem; }
.home-metric { border: 1px solid rgba(148,163,184,0.28); border-radius: 0.85rem; padding: 0.78rem 0.74rem; background: color-mix(in srgb, var(--home-surface) 82%, rgba(12,20,35,0.58) 18%); }
.home-metric strong { display: block; font-size: clamp(1.2rem, 2.2vw, 1.9rem); font-family: 'Space Grotesk', sans-serif; line-height: 1; }
.home-metric span { color: var(--home-muted); font-size: 0.78rem; }

.home-trust { padding: 0.2rem 0 1rem; }
.home-trust-title { text-align: center; color: color-mix(in srgb, var(--home-text) 72%, transparent); margin: 0 0 1rem; font-size: 0.92rem; }
.home-trust-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.6rem; }
.home-trust-grid span { min-height: 3rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.42rem; font-size: 0.8rem; color: color-mix(in srgb, var(--home-text) 88%, transparent); }
.home-trust-grid i { color: color-mix(in srgb, var(--home-accent-2) 70%, #dbeafe 30%); }

.home-section { padding: 3.3rem 0; }
.home-section h2 { margin: 0; font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.5rem, 2.5vw, 2.35rem); line-height: 1.14; letter-spacing: -0.01em; }
.home-section-lead { margin: 0.8rem 0 0; color: var(--home-muted); max-width: 44rem; line-height: 1.6; }

.home-mosaic-grid { margin-top: 1.35rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.85rem; }
.home-feature-card { padding: 1rem; backdrop-filter: blur(8px); overflow: hidden; }
.home-feature-card-wide { grid-column: span 2; }
.home-feature-card-tall { grid-column: span 1; grid-row: span 2; }
.home-icon-badge { width: 2.15rem; height: 2.15rem; border-radius: 0.7rem; border: 1px solid color-mix(in srgb, var(--home-accent-2) 60%, rgba(255,255,255,0.3)); background: linear-gradient(145deg, color-mix(in srgb, var(--home-accent) 25%, rgba(2,10,26,0.85)), color-mix(in srgb, var(--home-accent-2) 34%, rgba(3,17,36,0.82))); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 0.58rem; color: #e0f2fe; }
.home-feature-card h3 { margin: 0; font-size: 1.02rem; }
.home-feature-card p { margin: 0.6rem 0 0; color: var(--home-muted); font-size: 0.9rem; line-height: 1.52; }

.home-mini-chart { margin-top: 1rem; min-height: 4.6rem; border: 1px solid rgba(148,163,184,0.26); border-radius: 0.68rem; padding: 0.5rem; background: rgba(5,16,34,0.74); display: flex; align-items: flex-end; gap: 0.4rem; }
.home-mini-chart span { flex: 1; border-radius: 0.35rem 0.35rem 0.18rem 0.18rem; height: var(--bar-h); background: linear-gradient(180deg, color-mix(in srgb, var(--home-accent-2) 80%, #dbeafe 20%), color-mix(in srgb, var(--home-accent) 90%, #7dd3fc 10%)); }

.home-tall-list { list-style: none; margin: 0.9rem 0 0; padding: 0; display: grid; gap: 0.45rem; }
.home-tall-list li { color: color-mix(in srgb, var(--home-text) 88%, transparent); font-size: 0.85rem; display: flex; align-items: center; gap: 0.4rem; }
.home-tall-list i { color: var(--home-good); }

.home-flow-grid { margin-top: 1.35rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; }
.home-flow-step { padding: 0.95rem; background: var(--home-surface-strong); }
.home-flow-step strong { width: 1.95rem; height: 1.95rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--home-accent-2) 52%, rgba(226,232,240,0.54)); display: inline-flex; align-items: center; justify-content: center; font-size: 0.82rem; color: #dbeafe; margin-bottom: 0.55rem; }
.home-step-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.85rem; height: 1.85rem; border-radius: 999px; border: 1px solid rgba(148,163,184,0.34); background: rgba(8,21,43,0.72); color: #bae6fd; margin-left: 0.42rem; }
.home-flow-step h3 { margin: 0.5rem 0 0; font-size: 0.98rem; }
.home-flow-step p { margin: 0.5rem 0 0; color: var(--home-muted); font-size: 0.88rem; line-height: 1.5; }

.home-highlight { margin-top: 1.2rem; padding: 1rem; background: linear-gradient(130deg, color-mix(in srgb, var(--home-surface-strong) 84%, rgba(7,26,56,0.82) 16%), color-mix(in srgb, var(--home-surface) 82%, rgba(7,43,66,0.7) 18%)); }
.home-highlight h3 { margin: 0; font-size: 1.04rem; }
.home-highlight ul { margin: 0.74rem 0 0; padding-left: 1rem; color: #dbeafe; }
.home-highlight li { margin: 0.28rem 0; line-height: 1.5; }

.home-pricing-preview { padding-top: 2.2rem; }
.home-pricing-grid { margin-top: 1.2rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.home-pricing-card { padding: 1rem; }
.home-pricing-card h3 { margin: 0; font-size: 1rem; }
.home-pricing-card p { margin: 0.64rem 0 0.95rem; color: var(--home-muted); font-size: 0.9rem; line-height: 1.5; }
.home-pricing-card-featured { border-color: color-mix(in srgb, var(--home-accent-2) 52%, rgba(148,163,184,0.28)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--home-accent-2) 20%, transparent), 0 14px 28px rgba(0,0,0,0.35); }

.home-faq { padding-top: 2.1rem; }
.home-faq-list { margin-top: 1rem; display: grid; gap: 0.7rem; }
.home-faq-list details { padding: 0.78rem 0.9rem; background: rgba(11,21,40,0.62); }
.home-faq-list summary { cursor: pointer; font-weight: 600; color: #e2e8f0; }
.home-faq-list p { margin: 0.6rem 0 0; color: var(--home-muted); line-height: 1.5; font-size: 0.9rem; }

.home-cta { padding: 3.2rem 0 4.2rem; }
.home-cta-shell { border-radius: 1.08rem; background: radial-gradient(90rem 20rem at 90% -50%, color-mix(in srgb, var(--home-accent-2) 24%, transparent), transparent 62%), color-mix(in srgb, var(--home-surface-strong) 86%, rgba(7,17,36,0.9) 14%); padding: 1.3rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.9rem; }
.home-cta h2 { margin: 0; font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.3rem, 2.2vw, 2rem); }
.home-cta p { margin: 0.58rem 0 0; color: var(--home-muted); max-width: 33rem; }

.home-reveal { opacity: 0; transform: translateY(16px); transition: opacity 480ms ease, transform 480ms ease; }
.home-reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .home-reveal,
  .home-bg-icon {
    transition: none;
    animation: none;
  }
}

@media (max-width: 1050px) {
  .home-hero-grid { grid-template-columns: 1fr; }
  .home-platform-card { max-width: 40rem; }
  .home-trust-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-mosaic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-feature-card-wide,
  .home-feature-card-tall { grid-column: span 1; grid-row: span 1; }
  .home-flow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .home-hero { padding-top: 6.8rem; min-height: auto; }
  .home-hero-arc { width: 140vw; }
  .home-trust-grid,
  .home-mosaic-grid,
  .home-flow-grid,
  .home-pricing-grid,
  .home-metrics { grid-template-columns: 1fr; }
  .home-btn { width: 100%; }
  .home-bg-icon { opacity: 0.2; }
  .home-cta-shell { padding: 1.05rem; }
}