:root {
  --bg:#f3f4fb; --panel:#ffffff; --text:#15172b; --muted:#6b7187; --line:#e6e7f2;
  --brand:#4f46e5; --brand-2:#6366f1; --brand-soft:#eef0ff; --brand-text:#fff;
  --shadow-md: 0 8px 24px -8px rgba(30,25,90,.18), 0 2px 6px rgba(30,25,90,.06);
  --shadow-lg: 0 24px 60px -16px rgba(30,25,90,.28), 0 4px 16px rgba(30,25,90,.08);
  --radius: 16px; --radius-sm: 10px;
  /* How much of the panel color (vs. the mesh background behind it) a glass surface mixes in, and
     how strong the mesh gradient's color blobs are. Separate knobs per color scheme below, because
     a dark panel tint over a dark background reads as flat/opaque at the same percentage that
     looks right in light mode -- it needs to let noticeably more background bleed through. */
  --glass-pct: 62%;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0c0d18; --panel:#15172a; --text:#edeef7; --muted:#9496b5; --line:#262849;
    --brand:#6366f1; --brand-2:#818cf8; --brand-soft:#1e2048; --brand-text:#fff;
    --shadow-md: 0 8px 24px -8px rgba(0,0,0,.5); --shadow-lg: 0 24px 60px -16px rgba(0,0,0,.65);
    --glass-pct: 30%;
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin:0; color:var(--text); -webkit-font-smoothing:antialiased;
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  /* A fixed, textured abstract background image (generated SVG blobs, not a smooth gradient) behind
     the whole page. This matters specifically because of the glass panels below: backdrop-filter:
     blur only looks like "glass" when there's actual detail behind it to visibly soften -- a smooth
     gradient blurred looks identical to itself unblurred, which is why only the nav (which blurs real
     scrolling text/images) read as glassy before this. Fixed, not scroll, so it's one backdrop behind
     the whole page rather than repeating per-section. */
  background-color: var(--bg);
  background-image: url("/landing-assets/mesh-bg.svg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
.muted { color: var(--muted); }
.eyebrow { color: var(--brand-2); font-weight:700; font-size:13px; letter-spacing:.06em; text-transform:uppercase; margin:0 0 8px; }

.btn {
  all: unset; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 18px; border-radius:999px; font-weight:600; font-size:14px; transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
  box-sizing: border-box;
}
.btn.solid { background: linear-gradient(135deg, var(--brand-2), var(--brand)); color:#fff; box-shadow: var(--shadow-md); }
.btn.solid:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.btn.ghost { background: transparent; color: var(--text); border:1px solid var(--line); }
.btn.ghost:hover { background: var(--brand-soft); border-color: var(--brand-2); }
.btn.lg { padding:14px 26px; font-size:15.5px; }

/* ---------- nav ---------- */
.nav { position: sticky; top:0; z-index:50; background: color-mix(in srgb, var(--panel) var(--glass-pct), transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom:1px solid color-mix(in srgb, var(--line) 70%, transparent); }
/* Frosted-glass surface: the same see-through treatment as the nav, reused on every card-like
   panel (features, pricing, about, contact, work modes) so the mesh-gradient background behind
   the page shows through consistently site-wide, not just behind the navbar. */
.glass {
  background: color-mix(in srgb, var(--panel) var(--glass-pct), transparent);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid color-mix(in srgb, var(--brand-2) 30%, var(--line));
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 22%, transparent) inset, var(--shadow-lg);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* Specificity bump (html + class vs. .reveal.is-visible's class-only transform:none) so the lift
   wins even on elements that also carry the scroll-reveal "reveal is-visible" classes. */
html .glass:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--brand-2) 55%, var(--line));
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 28%, transparent) inset, var(--shadow-lg), 0 18px 36px -12px color-mix(in srgb, var(--brand) 35%, transparent);
}
.nav-inner { max-width:1180px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; gap:28px; }
.brand { display:flex; align-items:center; gap:9px; font-weight:800; font-size:17px; }
.brand img { width:28px; height:28px; border-radius:8px; }
.nav-links { display:flex; gap:26px; margin-right:auto; }
.nav-links a { font-weight:600; font-size:14.5px; color: var(--muted); }
.nav-links a:hover { color: var(--text); }
.nav-links-cta { display:none; }
.nav-actions { display:flex; align-items:center; gap:10px; position:relative; margin-left:auto; }
.nav-burger { display:none; }

.login-wrap { position:relative; }
.login-menu {
  position:absolute; top: calc(100% + 10px); right:0; width:260px; background:var(--panel);
  border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding:10px; z-index:60;
}
.login-menu-label { margin:4px 8px 8px; font-size:11.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.login-opt { all:unset; cursor:pointer; display:flex; flex-direction:column; gap:2px; width:100%; padding:10px 10px; border-radius: var(--radius-sm); }
.login-opt:hover { background: var(--brand-soft); }
.login-opt-title { font-weight:700; font-size:14px; }
.login-opt-desc { font-size:12.5px; color:var(--muted); }

/* ---------- hero ---------- */
.hero {
  max-width:1180px; margin:0 auto; padding:64px 24px 40px; display:grid; grid-template-columns: 1.05fr 1fr; gap:48px; align-items:center;
}
.eyebrow { }
.hero-text { padding:36px 40px; border-radius: var(--radius); }
.hero h1 { font-size:clamp(30px, 4vw, 46px); line-height:1.12; margin:0 0 18px; letter-spacing:-.01em; }
.hero-sub { font-size:17px; color:var(--muted); max-width:46ch; margin:0 0 28px; }
.hero-cta { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:24px; }
.hero-trust { display:flex; gap:18px; flex-wrap:wrap; font-size:13px; color:var(--muted); font-weight:600; }
.hero-art { position:relative; }
.hero-shot { border-radius: var(--radius); box-shadow: var(--shadow-lg); border:1px solid var(--line); width:100%; }
.hero-shot-float {
  position:absolute; width:46%; right:-6%; bottom:-10%; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); border:1px solid var(--line); animation: float 5s ease-in-out infinite;
}
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.logos-strip { text-align:center; padding:18px 24px 56px; }
.logos-strip p { color: var(--muted); font-size:13.5px; font-weight:600; letter-spacing:.02em; display:inline-block; padding:12px 26px; border-radius:999px; }

/* ---------- screenshot wall ---------- */
.shot-wall { max-width:1180px; margin:0 auto; padding:10px 24px 70px; text-align:center; }
.shot-wall-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:36px; padding:20px; border-radius: var(--radius); }
.shot-wall-grid img {
  width:100%; border-radius: var(--radius-sm); border:1px solid var(--line); box-shadow: var(--shadow-sm, none);
  transition: transform .2s ease, box-shadow .2s ease; cursor:zoom-in;
}
.shot-wall-grid img:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.shot-wall-grid img:first-child { grid-column: span 2; grid-row: span 2; }

/* ---------- work modes ---------- */
.work-modes { max-width:1100px; margin:0 auto; padding:70px 24px; }
.work-modes-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.work-mode-card { border-radius: var(--radius); padding:28px; }
.work-mode-card h3 { margin:0 0 14px; font-size:19px; }
.work-mode-card ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.work-mode-card li { font-size:13.5px; color:var(--muted); padding-left:22px; position:relative; }
.work-mode-card li::before { content:"✓"; position:absolute; left:0; color:var(--brand); font-weight:800; }

/* ---------- CTA band ---------- */
.cta-band {
  max-width:1100px; margin:10px auto 70px; padding:56px 24px; border-radius: var(--radius); text-align:center;
  background: linear-gradient(135deg, var(--brand-2), var(--brand)); color:#fff;
}
.cta-band h2 { margin:0 0 8px; font-size:clamp(22px,3vw,30px); }
.cta-band p { margin:0 0 26px; opacity:.9; }
.cta-band-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.cta-band .btn.solid { background:#fff; color: var(--brand); }
.cta-band .btn.ghost { border-color: rgba(255,255,255,.5); color:#fff; }
.cta-band .btn.ghost:hover { background: rgba(255,255,255,.12); }

/* ---------- features ---------- */
.section-head { max-width:640px; margin:0 auto 48px; text-align:center; }
.section-head h2 { font-size: clamp(26px, 3vw, 34px); margin:0; letter-spacing:-.01em; }
.features { max-width:1180px; margin:0 auto; padding:40px 24px 20px; }
.feature-row {
  display:grid; grid-template-columns: 1fr 1fr; gap:56px; align-items:center;
  padding:40px; border-radius: var(--radius); margin-bottom:28px;
}
.feature-row:last-child { margin-bottom:0; }
.feature-row.reverse { direction: rtl; }
.feature-row.reverse > * { direction: ltr; }
.feature-tag { display:inline-block; background:var(--brand-soft); color:var(--brand); font-weight:700; font-size:12px; padding:5px 12px; border-radius:999px; margin-bottom:14px; }
.feature-text h3 { font-size: clamp(21px, 2.4vw, 27px); margin:0 0 12px; letter-spacing:-.01em; }
.feature-text p { color:var(--muted); font-size:15.5px; margin:0 0 16px; }
.feature-text ul { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px; }
.feature-text li { font-size:14.5px; padding-left:24px; position:relative; }
.feature-text li::before { content:"✓"; position:absolute; left:0; color:var(--brand); font-weight:800; }
.feature-img img { border-radius: var(--radius); box-shadow: var(--shadow-md); border:1px solid var(--line); }

/* ---------- pricing ---------- */
.pricing { max-width:1100px; margin:0 auto; padding:70px 24px 20px; text-align:center; }
.pricing-sub { color:var(--muted); margin:8px 0 0; }
.billing-toggle {
  display:inline-flex; gap:4px; background:var(--panel); border:1px solid var(--line); border-radius:999px;
  padding:4px; margin:28px 0 44px; box-shadow: var(--shadow-sm, none);
}
.toggle-opt {
  all:unset; cursor:pointer; padding:9px 18px; border-radius:999px; font-weight:600; font-size:14px; color:var(--muted);
  display:flex; align-items:center; gap:8px;
}
.toggle-opt.is-active { background: linear-gradient(135deg, var(--brand-2), var(--brand)); color:#fff; }
.save-badge { background:rgba(255,255,255,.22); font-size:11px; font-weight:700; padding:2px 7px; border-radius:999px; }
.toggle-opt:not(.is-active) .save-badge { background: var(--brand-soft); color: var(--brand); }

.pricing-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; text-align:left; }
.price-card { border-radius: var(--radius); box-shadow: var(--shadow-md); padding:36px; }
.price-card.alt { border-color: color-mix(in srgb, var(--brand) 40%, transparent); }
.price-card h3 { margin:0 0 8px; font-size:22px; }
.price-desc { color:var(--muted); font-size:14px; margin:0 0 22px; min-height:38px; }
.price-amount { display:flex; align-items:baseline; gap:4px; margin-bottom:6px; }
.price-amount .currency { font-size:22px; font-weight:700; }
.price-amount .amount { font-size:46px; font-weight:800; letter-spacing:-.02em; }
.price-amount .period { color:var(--muted); font-weight:600; font-size:14px; }
.price-amount .amount-text { font-size:38px; font-weight:800; }
.price-note { color:var(--muted); font-size:13px; margin:0 0 24px; min-height:16px; }
.price-cta { width:100%; margin-bottom:26px; }
.price-features { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.price-features li { font-size:14px; padding-left:24px; position:relative; }
.price-features li::before { content:"✓"; position:absolute; left:0; color:var(--brand); font-weight:800; }
.pricing-footnote { color:var(--muted); font-size:12.5px; margin:28px 0 0; }

/* ---------- about ---------- */
.about { max-width:860px; margin:0 auto; padding:70px 24px; text-align:center; }
.about-copy { color:var(--muted); font-size:16.5px; max-width:62ch; margin:0 auto 40px; padding:24px 30px; border-radius: var(--radius); }
.about-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; text-align:left; }
.about-stats div { border-radius:var(--radius); padding:20px; }
.about-stats b { display:block; font-size:16px; margin-bottom:6px; }
.about-stats span { font-size:13.5px; color:var(--muted); }

/* ---------- contact ---------- */
.contact { max-width:1180px; margin:0 auto; padding:30px 24px 90px; }
.contact-card { border-radius: var(--radius); box-shadow: var(--shadow-md); padding:48px; max-width:700px; margin:0 auto; }
.contact-sub { color:var(--muted); margin:0; }
.contact-form { display:flex; flex-direction:column; gap:16px; margin-top:8px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.contact-form label { display:flex; flex-direction:column; gap:6px; font-size:13.5px; font-weight:600; color:var(--muted); }
.contact-form input, .contact-form textarea {
  font: inherit; padding:11px 13px; border-radius: var(--radius-sm); border:1px solid var(--line); background:var(--bg); color:var(--text); resize:vertical;
}
.contact-form input:focus, .contact-form textarea:focus { outline:2px solid var(--brand-2); outline-offset:1px; }
.form-note { margin:0; font-size:13.5px; color:var(--brand); min-height:18px; }

/* ---------- footer ---------- */
.footer { border-top:1px solid var(--line); padding:28px 24px; }
.footer-inner { max-width:1180px; margin:0 auto; display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.footer-inner nav { display:flex; gap:20px; margin-right:auto; flex-wrap:wrap; }
.footer-inner nav a { font-size:13.5px; color:var(--muted); font-weight:600; }
.footer-inner nav a:hover { color:var(--text); }
.footer-inner .brand { font-size:14.5px; }
.footer-inner .brand img { width:22px; height:22px; }

/* ---------- image lightbox ---------- */
.zoomable { cursor: zoom-in; }
.lightbox {
  position: fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  padding:40px; background: rgba(10,10,25,.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: lightbox-in .15s ease;
}
@keyframes lightbox-in { from { opacity:0; } to { opacity:1; } }
.lightbox img { max-width:100%; max-height:100%; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); cursor:default; }
.lightbox-close {
  all:unset; position:absolute; top:22px; right:26px; width:40px; height:40px; border-radius:50%;
  background: rgba(255,255,255,.12); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:16px; cursor:pointer;
}
.lightbox-close:hover { background: rgba(255,255,255,.22); }

/* ---------- scroll reveal ---------- */
.reveal { opacity:0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.delay-1 { transition-delay: .12s; }
.reveal.is-visible { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
  .hero-shot-float { animation:none; }
}

/* ---------- responsive ---------- */
@media (max-width: 920px) {
  .hero { grid-template-columns:1fr; padding-top:36px; }
  .hero-art { order:-1; }
  .hero-shot-float { display:none; }
  .feature-row, .feature-row.reverse { grid-template-columns:1fr; direction:ltr; padding:24px; }
  .feature-row .feature-img { order:-1; }
  .hero-text { padding:24px; }
  .shot-wall-grid { padding:12px; }
  .about-stats { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .contact-card { padding:28px; }
  .pricing-grid { grid-template-columns:1fr; }
  .work-modes-grid { grid-template-columns:1fr; }
  .shot-wall-grid { grid-template-columns:1fr 1fr; }
  .shot-wall-grid img:first-child { grid-column:span 2; grid-row:auto; }
}
@media (max-width: 760px) {
  .nav-links { display:none; }
  .nav-actions #signupBtn { display:none; } /* keep the mobile bar compact; Get Started CTAs exist throughout the page */
  .nav-burger {
    all:unset; display:flex; flex-direction:column; gap:4px; cursor:pointer; margin-left:4px; padding:6px; flex-shrink:0; box-sizing:border-box;
  }
  .nav-burger span { width:20px; height:2px; background:var(--text); border-radius:2px; }
  .nav.open .nav-links {
    display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:var(--panel);
    border-bottom:1px solid var(--line); padding:16px 24px; gap:14px; box-shadow: var(--shadow-md);
  }
  .nav.open .nav-links-cta { display:inline-flex; color:var(--brand); }
}