:root {
  --l-bg:#0f1628;
  --l-surface:#ffffff;
  --l-surface-2:#f1f5f9;
  --l-border:#e2e8f0;
  --l-border-2:#e0e7ff;
  --l-primary:#3b82f6;
  --l-primary-dk:#2563eb;
  --l-indigo:#6366f1;
  --l-cyan:#38bdf8;
  --l-success:#4ade80;
  --l-text:#0f172a;
  --l-muted:#64748b;
  --l-dim:#94a3b8;
  --l-shadow:0 8px 32px rgba(15,23,42,0.10)
}

*,*::before,*::after {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  overflow-x:hidden
}

body {
  margin:0;
  font-family:"Inter","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--l-bg);
  color:var(--l-text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1;
  overflow-x:hidden
}

a {
  color:inherit;
  text-decoration:none
}

ul {
  list-style:none;
  padding:0;
  margin:0
}

.landing-nav {
  height:85px;
  position:sticky;
  top:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0 64px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  background:#0f182b;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:none
}

.landing-brand,.landing-logo,.footer-logo {
  display:flex;
  align-items:center;
  gap:0.85rem;
  white-space:nowrap
}

.landing-logo-mark {
  flex-shrink:0;
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:linear-gradient(135deg,var(--l-primary),#60a5fa);
  color:#fff;
  font-size:1rem;
  font-weight:800;
  box-shadow:0 4px 12px rgba(59,130,246,0.35)
}

.landing-logo strong {
  display:block;
  font-size:1.25rem;
  font-weight:800;
  letter-spacing:0.04em;
  color:#f1f5f9
}

.landing-logo small {
  display:block;
  color:#64748b;
  font-size:0.78rem;
  line-height:1.3
}

.landing-nav-actions {
  display:flex;
  align-items:center;
  gap:0.6rem
}

.logged-in-only {
  display:none!important
}

.logged-out-only {
  display:inline-flex
}

html[data-logged-in] .logged-in-only {
  display:inline-flex!important
}

html[data-logged-in] .logged-out-only {
  display:none!important
}

.l-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.4rem;
  padding:9px 20px;
  border-radius:8px;
  border:1px solid transparent;
  font-size:13.5px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  transition:transform 0.18s ease,box-shadow 0.18s ease,background 0.18s ease,border-color 0.18s ease;
  line-height:1;
  text-decoration:none;
  background:transparent;
  color:var(--l-text);
  font-family:inherit
}

.l-btn:hover {
  transform:translateY(-1px)
}

.l-btn-ghost {
  border-color:rgba(255,255,255,0.12);
  color:#94a3b8
}

.l-btn-ghost:hover {
  border-color:rgba(255,255,255,0.22);
  background:rgba(255,255,255,0.06);
  color:#f1f5f9
}

.l-btn-primary {
  background:var(--l-primary);
  border-color:var(--l-primary);
  color:#fff;
  box-shadow:0 4px 14px rgba(59,130,246,0.3)
}

.l-btn-primary:hover {
  background:var(--l-primary-dk);
  border-color:var(--l-primary-dk);
  box-shadow:0 6px 20px rgba(59,130,246,0.4)
}

.l-btn-lg {
  padding:13px 28px;
  font-size:15px;
  border-radius:10px
}

.l-btn-secondary {
  border-color:rgba(255,255,255,0.22);
  color:#cbd5e1;
  background:rgba(255,255,255,0.04)
}

.l-btn-secondary:hover {
  border-color:rgba(255,255,255,0.38);
  background:rgba(255,255,255,0.09);
  color:#f1f5f9
}

.testimonials-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px
}

.testimonial-card {
  background:#ffffff;
  border:1px solid #e2e8f0;
  border-radius:14px;
  padding:28px 30px;
  display:flex;
  flex-direction:column;
  gap:20px;
  transition:border-color 0.2s ease,box-shadow 0.2s ease
}

.testimonial-card:hover {
  border-color:#93c5fd;
  box-shadow:0 4px 18px rgba(59,130,246,0.10)
}

.testimonial-quote {
  margin:0;
  font-size:0.9rem;
  line-height:1.7;
  color:#334155;
  font-style:italic;
  flex:1
}

.testimonial-author {
  display:flex;
  flex-direction:column;
  gap:3px
}

.testimonial-name {
  font-size:14px;
  font-weight:700;
  color:#0f172a
}

.testimonial-role {
  font-size:13px;
  color:#64748b
}

@media (max-width:900px) {
  .testimonials-grid {
    grid-template-columns:1fr
  }

}

.l-page {
  max-width:1440px;
  margin:0 auto;
  padding:0 48px
}

.l-section {
  padding:88px 0
}

.l-section--first {
  background:#f8fafc;
  border-top:1px solid #e2e8f0;
  margin:0 calc(-50vw + 50%);
  padding-left:calc(50vw - 50%);
  padding-right:calc(50vw - 50%)
}

.l-section--stripe {
  background:#f0f4ff;
  margin:0 calc(-50vw + 50%);
  padding-left:calc(50vw - 50%);
  padding-right:calc(50vw - 50%)
}

.l-section--deep {
  background:#eef2ff;
  margin:0 calc(-50vw + 50%);
  padding-left:calc(50vw - 50%);
  padding-right:calc(50vw - 50%)
}

.l-center {
  text-align:center
}

.hero-section {
  width:100%;
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
  background:radial-gradient(ellipse at 65% 45%,#0d2d52 0%,#071525 45%,#040c18 100%)
}

.hero-inner {
  display:grid;
  grid-template-columns:1fr 1.18fr;
  gap:clamp(2rem,4vw,4rem);
  align-items:center;
  padding-top:3rem;
  padding-bottom:4rem;
  min-height:100vh;
  position:relative;
  z-index:1
}

.hero-copy {
  display:flex;
  flex-direction:column;
  gap:0
}

.hero-waves-bg {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  overflow:hidden
}

.waves-svg {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  will-change:transform
}

.hero-content,.hero-mockup,.hero-badge,.hero-title,.hero-subtitle,.hero-cta-group,.hero-social-proof {
  position:relative;
  z-index:1
}

.waves-animated {
  display:initial
}

.wave-static {
  display:none
}

html.no-smil .waves-animated {
  display:none!important
}

html.no-smil .wave-static {
  display:initial!important
}

@media (prefers-reduced-motion:reduce) {
  .waves-animated {
    display:none!important
  }
  .wave-static {
    display:initial!important
  }

}

.hero-fade-bottom {
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:160px;
  background:linear-gradient(to bottom,transparent 0%,transparent 30%,#f8fafc 100%);
  pointer-events:none;
  z-index:2
}

.why-prism-section {
  background:#f8f9fa;
  padding:64px 0 72px
}

.why-prism-inner {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center
}

.why-prism-eyebrow {
  font-size:16px;
  font-weight:700;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:#6366f1;
  margin:0 0 16px
}

.why-prism-heading {
  font-size:clamp(1.6rem,3.5vw,2.4rem);
  font-weight:800;
  color:#0f172a;
  margin:0 0 12px;
  line-height:1.2
}

.why-prism-sub {
  font-size:1rem;
  color:#475569;
  margin:0 0 48px;
  max-width:520px
}

.prism-cards {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:20px;
  width:100%
}

.prism-card {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:14px;
  padding:28px 20px 24px;
  gap:8px;
  transition:box-shadow 0.2s ease,border-color 0.2s ease,transform 0.2s ease;
  cursor:default
}

.prism-card:hover {
  box-shadow:0 8px 24px rgba(99,102,241,0.14);
  border-color:#6366f1;
  transform:translateY(-4px)
}

.prism-card-letter {
  font-size:50px;
  font-weight:700;
  color:#6366f1;
  line-height:1;
  margin-bottom:4px
}

.prism-card-word {
  font-size:17px;
  font-weight:700;
  color:#1e293b;
  line-height:1.3
}

.prism-card-desc {
  font-size:15px;
  color:#64748b;
  line-height:1.5
}

@media (max-width:900px) {
  .prism-cards {
    grid-template-columns:repeat(3,1fr)
  }
  .prism-card:nth-child(4),.prism-card:nth-child(5) {

  }

}

@media (max-width:767px) {
  .prism-cards {
    grid-template-columns:repeat(2,1fr);
    gap:12px
  }
  .prism-card:last-child {
    grid-column:1 / -1;
    max-width:240px;
    margin:0 auto
  }

}

@media (max-width:400px) {
  .prism-cards {
    grid-template-columns:1fr
  }
  .prism-card:last-child {
    grid-column:auto;
    max-width:none;
    margin:0
  }

}

.logo-strip {
  width:100%;
  overflow:hidden;
  padding:24px 0;
  background:#f5f5f5;
  border-top:1px solid #e5e5e5;
  border-bottom:1px solid #e5e5e5
}

.logo-strip-label {
  text-align:center;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.15em;
  color:#999;
  text-transform:uppercase;
  margin-bottom:20px
}

.logo-marquee-outer {
  position:relative;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%)
}

.logo-marquee-track {
  display:flex;
  align-items:center;
  gap:64px;
  width:max-content;
  animation:marquee 35s linear infinite;
  padding:6px 0
}

.logo-marquee-track:hover {
  animation-play-state:paused
}

@keyframes marquee {
  0% {
    transform:translateX(0)
  }
  100% {
    transform:translateX(-50%)
  }

}

.logo-item {
  display:flex;
  align-items:center;
  flex-shrink:0;
  opacity:0.38;
  filter:grayscale(100%);
  transition:opacity 0.2s,filter 0.2s;
  line-height:1
}

.logo-item:hover {
  opacity:0.9;
  filter:grayscale(0%)
}

.logo-google svg {
  height:22px;
  width:auto;
  display:block
}

.logo-meta {
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:24px;
  font-weight:700;
  color:#0081FB;
  letter-spacing:-0.3px
}

.logo-amazon {
  flex-direction:column;
  align-items:flex-start;
  gap:0px
}

.logo-amazon .az-word {
  font-family:'Arial Black',Arial,sans-serif;
  font-size:22px;
  font-weight:900;
  color:#221F1F;
  letter-spacing:-0.5px;
  line-height:1.1
}

.logo-amazon .az-smile {
  position:relative;
  height:8px;
  width:100%
}

.logo-amazon .az-smile svg {
  height:8px;
  width:100%;
  display:block
}

.logo-apple {
  font-family:-apple-system,'Apple Color Emoji',sans-serif;
  font-size:28px;
  color:#333;
  line-height:1;
  display:block;
  padding-bottom:2px
}

.logo-netflix {
  font-family:'Arial Black',Arial,sans-serif;
  font-size:20px;
  font-weight:900;
  color:#E50914;
  letter-spacing:0.5px
}

.logo-microsoft {
  gap:8px
}

.ms-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
  width:20px;
  height:20px;
  flex-shrink:0
}

.ms-grid span {
  display:block
}

.ms-wordmark {
  font-family:'Segoe UI',Arial,sans-serif;
  font-size:19px;
  font-weight:300;
  color:#555
}

.logo-hsbc {
  gap:8px
}

.hsbc-flag {
  width:32px;
  height:32px;
  background:#DB0011;
  position:relative;
  overflow:hidden;
  flex-shrink:0
}

.hsbc-flag::before {
  content:'';
  position:absolute;
  left:0;
  top:0;
  border-style:solid;
  border-width:16px 0 16px 16px;
  border-color:transparent transparent transparent rgba(255,255,255,0.4)
}

.hsbc-flag::after {
  content:'';
  position:absolute;
  right:0;
  top:0;
  border-style:solid;
  border-width:16px 16px 16px 0;
  border-color:transparent rgba(255,255,255,0.4) transparent transparent
}

.hsbc-text {
  font-family:Arial,sans-serif;
  font-size:20px;
  font-weight:900;
  color:#DB0011;
  letter-spacing:1px
}

.logo-paytm {
  gap:0;
  font-family:Arial,sans-serif;
  font-size:21px;
  font-weight:800
}

.pay-box {
  background:#00BAF2;
  color:#fff;
  padding:2px 6px;
  border-radius:4px;
  line-height:1.4
}

.tm-text {
  color:#1a1a1a;
  padding-left:3px;
  line-height:1.4
}

.logo-delta {
  gap:8px
}

.delta-tri {
  width:0;
  height:0;
  border-left:11px solid transparent;
  border-right:11px solid transparent;
  border-bottom:20px solid #003A70;
  flex-shrink:0
}

.delta-text {
  font-family:Arial,sans-serif;
  font-size:18px;
  font-weight:900;
  color:#003A70;
  letter-spacing:2px
}

.logo-sabre {
  font-family:Arial,sans-serif;
  font-size:22px;
  font-weight:900;
  color:#003087;
  letter-spacing:2px
}

.logo-razorpay {
  gap:6px
}

.rp-blade {
  width:16px;
  height:24px;
  background:#2D72FE;
  clip-path:polygon(50% 0%,100% 100%,50% 68%,0% 100%);
  flex-shrink:0
}

.rp-text {
  font-family:Arial,sans-serif;
  font-size:20px;
  font-weight:700;
  color:#072654
}

.hero-badge {
  display:inline-block;
  font-size:14px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:#93c5fd;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(99,179,237,0.3);
  border-radius:20px;
  padding:10px 14px;
  margin-bottom:22px
}

.hero-title {
  font-size:3.5rem;
  font-weight:800;
  color:#f1f5f9;
  letter-spacing:-0.03em;
  line-height:1.06;
  margin:0 0 10px
}

.hero-title-accent-line {
  display:block;
  white-space:nowrap
}

.hero-title em {
  font-style:normal;
  color:#322fe6;
  background:linear-gradient(135deg,#2053d3 0%,#6e67eb 45%,#998bcf 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text
}

.hero-subtitle {
  font-size:clamp(15px,2vw,17px);
  font-weight:400;
  color:#94a3b8;
  line-height:1.65;
  max-width:500px;
  margin:0 0 34px
}

.hero-actions {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:28px;
  flex-wrap:wrap
}

.hero-social-proof {
  font-size:15px;
  color:#7a8ba3;
  letter-spacing:0.01em
}

@media (max-width:900px) {
  .hero-title-accent-line {
    white-space:normal
  }

}

.hero-visual {
  position:relative
}

.canvas-mockup {
  background:rgba(15,23,42,0.8);
  border:1px solid rgba(99,179,237,0.2);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,0.3);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:transform 0.08s ease-out,box-shadow 0.08s ease-out;
  will-change:transform;
  transform-style:preserve-3d
}

.parallax-layer {
  transition:transform 0.06s ease-out;
  will-change:transform
}

.mock-dots {
  display:flex;
  gap:6px;
  padding:10px 14px;
  background:rgba(255,255,255,0.04);
  border-bottom:1px solid rgba(255,255,255,0.07)
}

.mock-dot {
  width:10px;
  height:10px;
  border-radius:50%
}

.mock-dot.red {
  background:#ff5f57
}

.mock-dot.yellow {
  background:#febc2e
}

.mock-dot.green {
  background:#28c840
}

.mock-window-body {
  display:grid;
  grid-template-columns:118px 1fr
}

.mock-sidebar {
  padding:12px 8px;
  background:rgba(255,255,255,0.03);
  border-right:1px solid rgba(255,255,255,0.07)
}

.mock-sidebar-title {
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:#475569;
  margin-bottom:10px;
  padding:0 2px
}

.component-row {
  background:#1e293b;
  border:1px solid #334155;
  border-radius:6px;
  padding:4px 8px;
  font-size:10px;
  color:#e2e8f0;
  margin-bottom:4px;
  white-space:nowrap
}

.mock-canvas {
  padding:0;
  overflow:hidden;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start
}

.mock-canvas-area {
  position:relative;
  width:100%;
  height:320px;
  background:#0d1530;
  background-image:linear-gradient(to right,rgba(30,58,95,0.5) 1px,transparent 1px),linear-gradient(to bottom,rgba(30,58,95,0.5) 1px,transparent 1px);
  background-size:24px 24px;
  overflow:hidden
}

.mock-svg-lines {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  overflow:visible
}

.mock-node {
  position:absolute;
  width:110px;
  height:32px;
  background:#1e293b;
  border:1px solid #334155;
  border-radius:7px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:600;
  color:#e2e8f0;
  box-shadow:0 2px 8px rgba(0,0,0,0.4);
  z-index:1;
  white-space:nowrap
}

.mock-node.user {
  left:30px;
  top:29px
}

.mock-node.lb {
  left:210px;
  top:29px
}

.mock-node.server {
  left:30px;
  top:139px
}

.mock-node.cache {
  left:210px;
  top:139px
}

.mock-node.queue {
  left:30px;
  top:254px
}

.mock-node.db {
  left:210px;
  top:254px
}

.animated-line {
  stroke:#38bdf8;
  stroke-width:1.5;
  fill:none;
  stroke-dasharray:6 4;
  opacity:0.7;
  animation:flowLine 1.8s linear infinite
}

.animated-line.d1 {
  animation-delay:0.36s
}

.animated-line.d2 {
  animation-delay:0.72s
}

.animated-line.d3 {
  animation-delay:1.08s
}

.animated-line.d4 {
  animation-delay:1.44s
}

@keyframes flowLine {
  from {
    stroke-dashoffset:40
  }
  to {
    stroke-dashoffset:0
  }

}

.mock-score-card {
  position:absolute;
  top:0px;
  right:5px;
  z-index:10;
  width:150px;
  padding:12px 14px 15px;
  background:#0f172a;
  border:1px solid rgba(56,189,248,0.25);
  border-top:2px solid #38bdf8;
  border-radius:10px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 8px 32px rgba(0,0,0,0.6);
  animation:fadeInCard 0.6s ease 0.8s both
}

.ai-eval-label {
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:#38bdf8;
  margin-bottom:8px;
  display:flex;
  align-items:center;
  gap:4px;
  opacity:0.85
}

.ai-eval-score {
  font-size:44px;
  font-weight:800;
  color:#4ade80;
  line-height:1;
  display:flex;
  align-items:baseline;
  gap:3px;
  margin-bottom:12px;
  letter-spacing:-0.02em
}

.ai-eval-score-denom {
  font-size:13px;
  color:#64748b;
  font-weight:400
}

.ai-eval-bullets {
  display:grid;
  gap:6px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,0.08)
}

.ai-eval-bullets li {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:10.5px;
  color:#94a3b8;
  line-height:1.35;
  white-space:nowrap
}

.ai-eval-bullets li span {
  flex-shrink:0;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#38bdf8;
  box-shadow:0 0 0 3px rgba(56,189,248,0.2)
}

@keyframes fadeInCard {
  from {
    opacity:0;
    transform:translateY(10px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }

}

.reveal {
  opacity:0;
  transform:translateY(18px);
  animation:revealUp 0.65s ease forwards
}

.reveal-1 {
  animation-delay:0.1s
}

.reveal-2 {
  animation-delay:0.2s
}

.reveal-3 {
  animation-delay:0.3s
}

.reveal-4 {
  animation-delay:0.4s
}

.reveal-5 {
  animation-delay:0.5s
}

.reveal-6 {
  animation-delay:0.65s
}

@keyframes revealUp {
  to {
    opacity:1;
    transform:translateY(0)
  }

}

.section-title {
  font-size:clamp(30px,3.5vw,46px);
  font-weight:800;
  color:#0f172a;
  letter-spacing:-0.02em;
  line-height:1.15;
  margin:0 0 14px
}

.section-subtitle {
  font-size:17px;
  color:#1e2227;
  line-height:1.6;
  margin:0 0 52px
}

.modes-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px
}

.mode-card {
  position:relative;
  background:var(--l-surface);
  border:1px solid var(--l-border-2);
  border-radius:14px;
  padding:22px 20px 20px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  transition:transform 0.2s ease,border-color 0.2s ease,box-shadow 0.2s ease;
  overflow:hidden;
  color:var(--l-text)
}

.mode-card:hover {
  transform:translateY(-4px);
  border-color:var(--l-primary);
  box-shadow:0 8px 24px rgba(59,130,246,0.12)
}

.mode-card.featured {
  border-color:var(--l-primary);
  background:#eff6ff
}

.mode-card.featured::after {
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:2px;
  background:linear-gradient(90deg,#3b82f6,#60a5fa)
}

.mode-card-header {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px
}

.mode-card-icon {
  flex-shrink:0;
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:#eff6ff;
  border:1px solid #bfdbfe;
  color:#3b82f6
}

.mode-card-title {
  font-size:17px;
  font-weight:700;
  color:#0f172a;
  letter-spacing:-0.01em;
  line-height:1.2
}

.mode-card-badge {
  display:inline-block;
  font-size:9.5px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:#3b82f6;
  background:#eff6ff;
  border:1px solid #bfdbfe;
  border-radius:20px;
  padding:3px 9px;
  margin-bottom:12px;
  align-self:flex-start
}

.mode-card-desc {
  font-size:15px;
  line-height:1.65;
  color:#475569;
  margin-bottom:16px;
  flex:1
}

.mode-card-features {
  display:grid;
  gap:5px;
  margin-bottom:20px
}

.mode-card-features li {
  font-size:13px;
  color:#475569;
  padding-left:16px;
  position:relative;
  line-height:1.45
}

.mode-card-features li::before {
  content:"✓";
  position:absolute;
  left:0;
  color:#6366f1;
  font-weight:600;
  font-size:11px
}

.mode-card-cta {
  font-size:12.5px;
  font-weight:500;
  color:#3b82f6;
  letter-spacing:0.01em;
  margin-top:auto;
  display:block
}

.mode-card-cta:hover {
  color:var(--l-primary-dk)
}

.steps-flow {
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  align-items:stretch;
  gap:0.75rem
}

.step-card {
  background:#ffffff;
  border:1px solid #e0e7ff;
  border-radius:12px;
  padding:24px 20px;
  transition:border-color 0.22s ease,box-shadow 0.22s ease,transform 0.22s ease;
  will-change:transform
}

.step-card:hover {
  border-color:#6366f1;
  box-shadow:0 8px 24px rgba(99,102,241,0.14),0 2px 8px rgba(99,102,241,0.08);
  transform:translateY(-6px)
}

.step-number {
  font-size:13px;
  font-weight:700;
  letter-spacing:0.1em;
  color:#6366f1;
  text-transform:uppercase;
  margin-bottom:10px;
  display:block
}

.step-title {
  font-size:17px;
  font-weight:700;
  color:#0f172a;
  margin-bottom:8px
}

.step-desc {
  font-size:15px;
  color:#475569;
  line-height:1.6
}

.step-connector {
  width:60px;
  height:2px;
  background:linear-gradient(90deg,#bfdbfe,#3b82f6);
  align-self:center
}

.feature-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px
}

.feature-tile {
  background:#ffffff;
  border:1px solid #e0e7ff;
  border-radius:12px;
  padding:22px;
  cursor:default;
  transition:border-color 0.22s ease,box-shadow 0.22s ease,transform 0.22s ease;
  will-change:transform
}

.feature-tile:hover {
  border-color:#6366f1;
  box-shadow:0 8px 24px rgba(99,102,241,0.14),0 2px 8px rgba(99,102,241,0.08);
  transform:translateY(-6px)
}

.feature-tile:hover .feature-icon-wrap {
  background:#e0e7ff;
  border-color:#818cf8;
  color:#4f46e5
}

.feature-header {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px
}

.feature-icon-wrap {
  flex-shrink:0;
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:#eef2ff;
  border:1px solid #c7d2fe;
  color:#6366f1;
  transition:background 0.22s ease,border-color 0.22s ease,color 0.22s ease
}

.feature-title {
  font-size:17px;
  font-weight:700;
  color:#0f172a;
  margin:0;
  line-height:1.3
}

.feature-desc {
  font-size:15px;
  color:#475569;
  line-height:1.6;
  margin:0
}

.final-cta-inner {
  position:relative;
  padding:64px 40px;
  text-align:center;
  border:1px solid #e0e7ff;
  border-radius:24px;
  background:linear-gradient(135deg,#eef2ff,#f0f4ff);
  overflow:hidden
}

.final-cta-title {
  font-size:clamp(26px,3.5vw,42px);
  font-weight:700;
  color:#0f172a;
  letter-spacing:-0.02em;
  line-height:1.15;
  margin:0 0 14px
}

.final-cta-subtitle {
  font-size:15px;
  color:var(--l-muted);
  line-height:1.65;
  max-width:460px;
  margin:0 auto 32px
}

.centered-actions {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap
}

.l-section--first .l-btn-ghost,.l-section--stripe .l-btn-ghost,.l-section--deep .l-btn-ghost,.final-cta-inner .l-btn-ghost {
  border-color:#e2e8f0;
  color:#475569
}

.l-section--first .l-btn-ghost:hover,.l-section--stripe .l-btn-ghost:hover,.l-section--deep .l-btn-ghost:hover,.final-cta-inner .l-btn-ghost:hover {
  border-color:#cbd5e1;
  background:#f1f5f9;
  color:#0f172a
}

.landing-footer {
  border-top:1px solid rgba(255,255,255,0.07);
  max-width:1440px;
  margin:0 auto;
  padding:24px 48px 36px
}

.footer-top {
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:1.5rem;
  align-items:center;
  margin-bottom:20px
}

.footer-links,.footer-actions {
  display:flex;
  align-items:center;
  gap:1.25rem
}

.footer-links a,.footer-actions a {
  font-size:15px;
  color:#abb8cb;
  transition:color 0.15s
}

.footer-links a:hover,.footer-actions a:hover {
  color:#c6d0dd
}

.footer-bottom {
  font-size:14px;
  color:#94a4bb
}

.lp-modal-overlay {
  position:fixed;
  inset:0;
  background:rgba(15,23,42,0.4);
  backdrop-filter:blur(4px);
  z-index:999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.22s ease
}

.lp-modal-overlay.open {
  opacity:1;
  pointer-events:all
}

.lp-modal {
  background:#ffffff;
  border:1px solid #e2e8f0;
  border-radius:20px;
  width:100%;
  max-width:380px;
  padding:28px 28px 24px;
  position:relative;
  transform:translateY(16px);
  transition:transform 0.22s ease;
  box-shadow:0 24px 80px rgba(0,0,0,0.18)
}

.lp-modal-overlay.open .lp-modal {
  transform:translateY(0)
}

.lp-modal-close {
  position:absolute;
  top:5px;
  right:5px;
  background:none;
  border:none;
  color:#55575b;
  font-size:18px;
  cursor:pointer;
  line-height:1;
  padding:4px 6px;
  border-radius:4px;
  transition:color 0.15s,background 0.15s
}

.lp-modal-close:hover {
  color:#475569;
  background:#f1f5f9
}

.lp-modal-tabs {
  display:flex;
  gap:0;
  margin-bottom:24px;
  background:#f1f5f9;
  border-radius:10px;
  padding:4px
}

.lp-tab {
  flex:1;
  padding:9px;
  border:none;
  border-radius:8px;
  background:none;
  color:#64748b;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:background 0.15s,color 0.15s,box-shadow 0.15s;
  font-family:inherit
}

.lp-tab.active {
  background:linear-gradient(135deg,#3b82f6,#6366f1);
  color:#ffffff;
  box-shadow:0 2px 10px rgba(99,102,241,0.35)
}

.lp-modal-message {
  font-size:13px;
  color:#64748b;
  margin-bottom:16px;
  line-height:1.5;
  min-height:18px
}

.lp-form {
  display:flex;
  flex-direction:column;
  gap:14px
}

.lp-form.hidden {
  display:none
}

.lp-form label {
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:13.5px;
  color:#374151;
  font-weight:600
}

.lp-form input {
  padding:11px 13px;
  border-radius:9px;
  border:1.5px solid #e2e8f0;
  background:#ffffff;
  color:#0f172a;
  font-size:14.5px;
  outline:none;
  transition:border-color 0.15s,box-shadow 0.15s;
  font-family:inherit
}

.lp-form input:focus {
  border-color:#3b82f6;
  box-shadow:0 0 0 3px rgba(59,130,246,0.12)
}

.lp-form input:-webkit-autofill {
  -webkit-box-shadow:0 0 0 30px white inset!important;
  -webkit-text-fill-color:#0f172a!important
}

.lp-form-error {
  font-size:12.5px;
  color:#ef4444;
  min-height:18px
}

.lp-submit-btn {
  width:100%;
  padding:13px;
  border-radius:9px;
  border:none;
  background:#3b82f6;
  color:#fff;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition:background 0.15s,box-shadow 0.15s;
  margin-top:6px;
  font-family:inherit;
  letter-spacing:0.01em
}

.lp-submit-btn:hover {
  background:#2563eb;
  box-shadow:0 4px 14px rgba(37,99,235,0.3)
}

.lp-submit-btn:disabled {
  opacity:0.55;
  cursor:not-allowed
}

.lp-sso-divider {
  display:flex;
  align-items:center;
  gap:10px;
  margin:18px 0 12px;
  color:#94a3b8;
  font-size:13px;
  color:#374151
}

.lp-sso-divider::before,.lp-sso-divider::after {
  content:"";
  flex:1;
  height:1px;
  background:#e2e8f0
}

.lp-sso-buttons {
  display:flex;
  gap:10px
}

.lp-sso-btn {
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px;
  border:1.5px solid transparent;
  border-radius:9px;
  background:#24292e;
  color:#ffffff;
  font-size:13.5px;
  font-weight:600;
  transition:filter 0.15s,box-shadow 0.15s;
  cursor:pointer;
  text-decoration:none
}

.lp-sso-btn:first-child {
  background:#24292e;
  color:#ffffff;
  border-color:#24292e
}

.lp-sso-btn:last-child {
  background:#ffffff;
  color:#1f2937;
  border-color:#d1d5db
}

.lp-sso-btn:hover {
  filter:brightness(1.1);
  box-shadow:0 3px 10px rgba(0,0,0,0.15)
}

@media (max-width:900px) {
  .hero-inner {
    grid-template-columns:1fr;
    min-height:auto;
    padding-top:2.5rem;
    padding-bottom:3rem;
    gap:5rem
  }
  .hero-section {
    min-height:auto
  }
  .hero-subtitle {
    max-width:100%
  }
  .mock-window-body {
    grid-template-columns:1fr
  }
  .mock-sidebar,.mock-score-card {
    display:none
  }
  .mock-canvas-area {
    width:100%
  }
  .modes-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .steps-flow {
    grid-template-columns:1fr;
    gap:0.75rem
  }
  .step-connector {
    width:2px;
    height:32px;
    margin:0 auto
  }
  .feature-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .footer-top {
    grid-template-columns:1fr;
    gap:1rem
  }
  .landing-nav {
    padding:0 24px
  }
  .l-page {
    padding:0 24px
  }
  .l-section {
    padding:64px 0
  }

}

@media (max-width:600px) {
  .modes-grid,.feature-grid {
    grid-template-columns:1fr
  }
  .hero-actions {
    flex-direction:column;
    align-items:stretch
  }
  .l-btn-lg {
    width:100%;
    justify-content:center
  }
  .landing-nav {
    padding:0 16px
  }
  .l-page {
    padding:0 16px
  }
  .l-section {
    padding:48px 0
  }
  .final-cta-inner {
    padding:40px 20px
  }
  .landing-footer {
    padding:20px 16px 28px
  }
  .centered-actions {
    flex-direction:column;
    align-items:stretch
  }

}