:root {
  --bg-start: #d7e1ef;
  --bg-end: #efdff1;
  --surface: rgba(255, 255, 255, 0.62);
  --surface-strong: rgba(255, 255, 255, 0.82);
  --surface-dark: rgba(18, 20, 32, 0.78);
  --text-primary: #1e2433;
  --text-secondary: #62697a;
  --text-on-dark: #f7f8ff;
  --border: rgba(255, 255, 255, 0.7);
  --shadow-soft: 0 18px 50px rgba(48, 36, 89, 0.12);
  --shadow-card: 0 12px 30px rgba(34, 28, 71, 0.12);
  --gradient-brand: linear-gradient(90deg, #1d84ff 0%, #7038ff 52%, #df1fc3 100%);
  --gradient-dark: linear-gradient(180deg, rgba(18,20,32,0.15) 0%, rgba(18,20,32,0.88) 100%);
  --green: #16c08f;
  --pink: #ff4ca1;
  --blue: #318dff;
  --purple: #9a3dff;
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --max-width: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text-primary);
  background: linear-gradient(90deg, var(--bg-start) 0%, var(--bg-end) 100%);
}
img { display: block; max-width: 100%; }
a { color: inherit; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 10px;
  z-index: 100;
  padding: 12px 16px;
  border-radius: 999px;
  background: #111827;
  color: white;
  text-decoration: none;
}
.skip-link:focus { left: 14px; }

.page-shell {
  width: min(calc(100% - 32px), var(--max-width));
  margin: 0 auto;
  padding: 22px 0 56px;
}

.site-header {
  position: sticky;
  top: 14px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
}

.brand img { width: 240px; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.site-nav a,
.button,
.text-link,
.footer-nav a { text-decoration: none; }

.site-nav a {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.96rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 700;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}
.button:hover { transform: translateY(-1px); }

.button-primary {
  color: white;
  background: var(--gradient-brand);
  box-shadow: 0 16px 32px rgba(111, 57, 255, 0.28);
}

.button-secondary,
.button-ghost {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.78);
}

.hero {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  align-items: center;
  gap: 36px;
  padding: 72px 0 46px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.8);
  color: #4b5162;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.hero h1,
.section-heading h2,
.showcase-copy h2,
.final-cta-card h2,
.legal-page h1 {
  margin: 18px 0 16px;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.hero h1 {
  font-size: clamp(3rem, 5.8vw, 5.5rem);
  max-width: 10.5ch;
}

.hero p,
.section-heading p,
.showcase-copy p,
.feature-card p,
.final-cta-card p,
.legal-intro,
.legal-section p,
.compliance-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 1.08rem;
  line-height: 1.72;
}

.hero-actions,
.final-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.hero-proof {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 32px;
}

.proof-card,
.logo-strip-card,
.feature-card,
.metric-card,
.final-cta-card,
.showcase-panel,
.privacy-card,
.compliance-card,
.site-footer,
.legal-page,
.value-list li {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.proof-card { padding: 18px; border-radius: 22px; }
.proof-card strong,
.metric-card strong,
.compliance-card strong { display: block; font-size: 1rem; margin-bottom: 6px; }
.proof-card span,
.metric-card p,
.site-footer p { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.55; }

.hero-visual {
  position: relative;
  min-height: 760px;
}

.phone-stack {
  position: absolute;
  border-radius: 44px;
  overflow: hidden;
  border: 8px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 36px 60px rgba(43, 34, 88, 0.22);
}
.phone-stack img { width: 100%; height: 100%; object-fit: cover; }
.phone-stack-left { width: 286px; height: 618px; left: 0; bottom: 42px; transform: rotate(-8deg); }
.phone-stack-center { width: 310px; height: 671px; left: 170px; top: 12px; z-index: 2; }
.phone-stack-right { width: 270px; height: 584px; right: 0; bottom: 84px; transform: rotate(9deg); }

.glow { position: absolute; border-radius: 50%; filter: blur(30px); }
.glow-one { width: 210px; height: 210px; background: rgba(39, 141, 255, 0.26); right: 24px; top: 110px; }
.glow-two { width: 260px; height: 260px; background: rgba(187, 45, 224, 0.18); left: 110px; bottom: 110px; }

.logo-strip { padding: 8px 0 28px; }
.logo-strip-card {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  padding: 22px 26px;
  border-radius: 26px;
  font-weight: 700;
  color: #3f4658;
}

.section { padding: 54px 0; }
.section-heading { max-width: 780px; margin-bottom: 28px; }
.section-heading h2,
.showcase-copy h2,
.final-cta-card h2,
.legal-page h1 { font-size: clamp(2.2rem, 4vw, 4rem); }
.narrow { text-align: center; margin-left: auto; margin-right: auto; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}
.feature-card { grid-column: span 4; padding: 28px; border-radius: var(--radius-xl); }
.feature-card-large {
  grid-column: span 8;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 22px;
}
.feature-card-wide {
  grid-column: span 8;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 18px;
  align-items: center;
}
.feature-card h3,
.privacy-card h3,
.legal-section h2 { margin: 16px 0 12px; font-size: 1.55rem; line-height: 1.15; }
.feature-card img,
.showcase-panel img { border-radius: 28px; box-shadow: var(--shadow-soft); }

.pill {
  display: inline-flex;
  padding: 9px 14px;
  border-radius: 999px;
  color: white;
  font-size: 0.82rem;
  font-weight: 800;
}
.pill-green { background: var(--green); }
.pill-pink { background: var(--pink); }
.pill-blue { background: var(--blue); }
.pill-purple { background: var(--purple); }

.showcase {
  display: grid;
  grid-template-columns: 0.94fr 1.06fr;
  gap: 26px;
  align-items: center;
}
.showcase-panel { padding: 28px; border-radius: 36px; }
.value-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
}
.value-list li {
  padding: 18px 20px;
  border-radius: 20px;
  font-weight: 700;
}

.metric-cards,
.privacy-grid,
.compliance-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.metric-card,
.privacy-card,
.compliance-card { padding: 26px; border-radius: 28px; }

.compliance-grid { grid-template-columns: repeat(3, 1fr); }

.text-link {
  display: inline-flex;
  margin-top: 14px;
  font-weight: 700;
  color: #5d34ff;
}

.final-cta-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 34px;
  border-radius: 34px;
}

.site-footer {
  margin-top: 16px;
  padding: 24px 28px;
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-weight: 700;
}

.legal-shell { max-width: 980px; }
.legal-header { position: static; }
.legal-page {
  margin-top: 28px;
  padding: 34px;
  border-radius: 34px;
}
.legal-intro { margin-bottom: 26px; }
.legal-section + .legal-section { margin-top: 24px; }
.legal-section h2 { font-size: 1.4rem; }

@media (max-width: 1120px) {
  .page-shell { width: min(calc(100% - 24px), var(--max-width)); }
  .site-nav, .header-cta { display: none; }
  .hero, .showcase, .feature-card-large, .feature-card-wide, .final-cta-card, .site-footer { grid-template-columns: 1fr; }
  .hero { gap: 12px; }
  .hero-visual { min-height: 720px; }
  .logo-strip-card, .metric-cards, .hero-proof, .privacy-grid, .compliance-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-card, .feature-card-large, .feature-card-wide { grid-column: span 12; }
  .site-footer { display: grid; }
}

@media (max-width: 760px) {
  .page-shell { width: min(calc(100% - 18px), var(--max-width)); padding-top: 14px; }
  .site-header { padding: 14px 16px; border-radius: 24px; }
  .brand img { width: 180px; }
  .hero { padding-top: 28px; }
  .hero h1 { max-width: 100%; font-size: clamp(2.6rem, 13vw, 4.2rem); }
  .hero p, .section-heading p, .showcase-copy p, .feature-card p, .final-cta-card p, .legal-intro, .legal-section p, .compliance-card p { font-size: 1rem; line-height: 1.65; }
  .hero-proof, .logo-strip-card, .metric-cards, .value-list, .privacy-grid, .compliance-grid { grid-template-columns: 1fr; }
  .hero-visual { min-height: 520px; margin-top: 12px; }
  .phone-stack-left { width: 172px; height: 374px; left: 0; bottom: 20px; }
  .phone-stack-center { width: 188px; height: 406px; left: 82px; top: 0; }
  .phone-stack-right { width: 160px; height: 348px; right: 0; bottom: 48px; }
  .section { padding: 38px 0; }
  .section-heading h2, .showcase-copy h2, .final-cta-card h2, .legal-page h1 { font-size: clamp(2rem, 10vw, 3rem); }
  .feature-card, .metric-card, .showcase-panel, .final-cta-card, .proof-card, .logo-strip-card, .privacy-card, .compliance-card, .site-footer, .legal-page { border-radius: 24px; }
  .feature-card, .metric-card, .final-cta-card, .showcase-panel, .privacy-card, .compliance-card, .legal-page, .site-footer { padding: 22px; }
  .button { width: 100%; }
}