:root {
  --bg: #fbf9ff;
  --paper: rgba(255,255,255,.86);
  --paper-solid: #ffffff;
  --ink: #171022;
  --muted: #665b75;
  --soft: #efe8ff;
  --soft-2: #f7f2ff;
  --line: rgba(92,43,255,.14);
  --purple: #6b37ff;
  --purple-2: #a35cff;
  --purple-3: #cbb9ff;
  --deep: #211342;
  --shadow: 0 28px 80px rgba(54, 22, 115, .16);
  --shadow-soft: 0 18px 45px rgba(54, 22, 115, .11);
  --radius-xl: 34px;
  --radius-lg: 26px;
  --radius-md: 18px;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 14% 4%, rgba(156, 94, 255, .20), transparent 28rem),
    radial-gradient(circle at 92% 12%, rgba(107, 55, 255, .18), transparent 30rem),
    linear-gradient(180deg, #fff 0%, var(--bg) 44%, #fff 100%);
  color: var(--ink);
  overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }

.page-shell { min-height: 100vh; }
.container { width: min(var(--max), calc(100% - 36px)); margin-inline: auto; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(18px);
  background: rgba(251,249,255,.72);
  border-bottom: 1px solid rgba(92,43,255,.10);
}
.nav {
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 900;
  letter-spacing: -.03em;
  font-size: 22px;
}
.brand img { width: 42px; height: 42px; border-radius: 14px; box-shadow: 0 16px 32px rgba(107,55,255,.22); }
.nav-links { display: flex; align-items: center; gap: 18px; font-size: 14px; color: var(--muted); }
.nav-links a { padding: 10px 0; }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.68);
  border-radius: 999px;
  padding: 5px;
  box-shadow: 0 10px 25px rgba(54, 22, 115, .08);
}
.lang-switch a {
  font-size: 13px;
  font-weight: 800;
  padding: 8px 11px;
  border-radius: 999px;
  color: var(--muted);
}
.lang-switch a.active { color: #fff; background: linear-gradient(135deg, var(--purple), var(--purple-2)); }
.mobile-menu-button { display: none; }

.btn {
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  border-radius: 999px;
  padding: 0 22px;
  font-weight: 850;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { color: #fff; background: linear-gradient(135deg, var(--purple), var(--purple-2)); box-shadow: 0 18px 38px rgba(107,55,255,.28); }
.btn-secondary { color: var(--purple); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.btn-ghost { color: var(--deep); background: rgba(255,255,255,.68); border: 1px solid var(--line); }

.hero {
  position: relative;
  padding: 72px 0 48px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 48px;
  align-items: center;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(107,55,255,.09);
  color: var(--purple);
  border: 1px solid rgba(107,55,255,.12);
  font-weight: 850;
  font-size: 13px;
}
h1 {
  margin: 22px 0 18px;
  font-size: clamp(46px, 7vw, 86px);
  line-height: .93;
  letter-spacing: -.075em;
  color: var(--ink);
}
.gradient-text { color: transparent; background: linear-gradient(120deg, var(--purple), #8a44ff 52%, #c781ff); -webkit-background-clip: text; background-clip: text; }
.hero-copy { color: var(--muted); font-size: clamp(18px, 2vw, 22px); line-height: 1.55; max-width: 700px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 32px; }
.stat-pill {
  background: rgba(255,255,255,.78);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 18px;
  box-shadow: var(--shadow-soft);
}
.stat-pill strong { display: block; font-size: 24px; letter-spacing: -.04em; color: var(--deep); }
.stat-pill span { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.35; }

.hero-visual { perspective: 1200px; }
.tilt-scene {
  position: relative;
  min-height: 620px;
  border-radius: 56px;
  padding: 28px;
  background:
    radial-gradient(circle at 70% 0%, rgba(155,92,255,.28), transparent 34%),
    linear-gradient(150deg, rgba(255,255,255,.92), rgba(246,240,255,.72));
  border: 1px solid rgba(107,55,255,.18);
  box-shadow: var(--shadow);
  transform-style: preserve-3d;
  transition: transform .18s ease-out;
  overflow: hidden;
}
.tilt-scene::before {
  content:"";
  position:absolute;
  inset:18px;
  border-radius: 46px;
  border: 1px solid rgba(107,55,255,.12);
  pointer-events:none;
}
.orb {
  position:absolute;
  border-radius:999px;
  filter: blur(2px);
  opacity: .9;
}
.orb.one { width: 150px; height: 150px; right: 26px; top: 34px; background: radial-gradient(circle, rgba(163,92,255,.45), transparent 70%); }
.orb.two { width: 110px; height: 110px; left: 36px; bottom: 72px; background: radial-gradient(circle, rgba(107,55,255,.25), transparent 70%); }
.product-stack { position: relative; height: 100%; min-height: 560px; transform-style: preserve-3d; }
.float-card {
  position:absolute;
  border-radius: 32px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(107,55,255,.14);
  box-shadow: 0 28px 60px rgba(54,22,115,.18);
  backdrop-filter: blur(14px);
  transform-style: preserve-3d;
  overflow: hidden;
}
.float-card .card-head { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid rgba(107,55,255,.10); font-weight:900; }
.float-card .chip { margin-left:auto; padding:6px 10px; border-radius:999px; background:var(--soft); color:var(--purple); font-size:12px; }
.card-pos { left: 22px; top: 42px; width: 340px; transform: translateZ(84px) rotate(-4deg); }
.card-crm { right: 12px; top: 166px; width: 300px; transform: translateZ(140px) rotate(5deg); }
.card-flow { left: 70px; bottom: 56px; width: 400px; transform: translateZ(104px) rotate(3deg); }
.card-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 16px; border-bottom:1px solid rgba(107,55,255,.08); color:var(--muted); }
.card-row strong { color:var(--ink); }
.card-row:last-child { border-bottom:0; }
.mini-bars { display:grid; gap:9px; padding:16px; }
.mini-bars span { height:12px; border-radius:999px; background:linear-gradient(90deg,var(--purple),rgba(107,55,255,.12)); }
.mini-bars span:nth-child(2){ width:72%; }
.mini-bars span:nth-child(3){ width:86%; }
.flow-map { padding:18px; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.flow-map span { min-height:58px; border-radius:20px; border:1px solid rgba(107,55,255,.13); display:flex; align-items:center; justify-content:center; text-align:center; font-weight:850; color:var(--deep); background:rgba(247,242,255,.86); }
.device-shadow {
  position:absolute;
  left: 130px;
  top: 110px;
  width: 270px;
  height: 500px;
  border-radius: 44px;
  background: linear-gradient(160deg, #fff, #f2eaff);
  box-shadow: 0 44px 90px rgba(54,22,115,.20);
  transform: translateZ(34px) rotate(-1deg);
  border: 1px solid rgba(107,55,255,.16);
  overflow:hidden;
}
.device-screen { position:absolute; inset: 16px; border-radius: 32px; background: linear-gradient(165deg, #fff, #f7f2ff); border:1px solid rgba(107,55,255,.12); padding:18px; }
.device-screen h3 { margin: 0 0 14px; font-size: 22px; letter-spacing:-.04em; }
.device-screen .product-tile { border-radius:24px; background:#fff; border:1px solid var(--line); padding:12px; margin-bottom:10px; box-shadow:0 12px 24px rgba(54,22,115,.08); }
.device-screen .product-dot { width:54px; height:54px; border-radius:19px; background: radial-gradient(circle at 35% 30%, #fff, var(--purple-3)); margin-bottom:10px; }

.section { padding: 72px 0; }
.section-head { max-width: 760px; margin-bottom: 32px; }
.section-kicker { color: var(--purple); font-weight:900; text-transform:uppercase; letter-spacing:.12em; font-size:12px; }
h2 { margin: 10px 0 12px; font-size: clamp(34px, 4.6vw, 58px); letter-spacing:-.06em; line-height:1; }
.section-head p { color: var(--muted); font-size: 18px; line-height:1.6; margin:0; }

.panel {
  background: var(--paper);
  border:1px solid var(--line);
  box-shadow: var(--shadow-soft);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(14px);
}
.problem-grid { display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
.problem-card { padding:30px; border-radius:32px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-soft); }
.problem-card h3 { margin:0 0 10px; font-size:24px; letter-spacing:-.04em; }
.problem-card p { margin:0; color:var(--muted); line-height:1.6; }

.module-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; }
.module-card {
  position:relative;
  padding:28px;
  min-height: 260px;
  background: linear-gradient(160deg, #fff, #f8f3ff);
  border:1px solid var(--line);
  border-radius:34px;
  box-shadow: var(--shadow-soft);
  overflow:hidden;
  transform: translateZ(0);
}
.module-card::after {
  content:"";
  position:absolute;
  width:150px; height:150px;
  right:-42px; top:-52px;
  border-radius:999px;
  background: radial-gradient(circle, rgba(107,55,255,.15), transparent 70%);
}
.module-icon { width:52px; height:52px; border-radius:20px; display:grid; place-items:center; background:linear-gradient(135deg,var(--purple),var(--purple-2)); color:white; font-size:24px; box-shadow:0 18px 28px rgba(107,55,255,.25); }
.module-card h3 { margin:22px 0 10px; font-size:23px; letter-spacing:-.035em; }
.module-card p { margin:0 0 18px; color:var(--muted); line-height:1.55; }
.module-card ul { margin:0; padding:0; list-style:none; display:grid; gap:8px; color:var(--deep); font-weight:720; font-size:14px; }
.module-card li::before { content:"•"; color:var(--purple); margin-right:8px; }

.workflow { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:14px; }
.workflow-step { padding:24px; border-radius:30px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-soft); }
.workflow-step span { display:grid; place-items:center; width:42px; height:42px; border-radius:16px; background:var(--soft); color:var(--purple); font-weight:900; margin-bottom:18px; }
.workflow-step h3 { margin:0 0 8px; letter-spacing:-.03em; }
.workflow-step p { margin:0; color:var(--muted); line-height:1.55; }

.branding-block { display:grid; grid-template-columns: .9fr 1.1fr; gap:18px; align-items:stretch; }
.brand-card { padding:34px; }
.palette { display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.palette span { width:54px; height:54px; border-radius:20px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.75), 0 16px 28px rgba(54,22,115,.12); }
.palette span:nth-child(1){ background:#6b37ff; }
.palette span:nth-child(2){ background:#ffffff; border:1px solid var(--line); }
.palette span:nth-child(3){ background:#14101f; }
.palette span:nth-child(4){ background:#b690ff; }
.palette span:nth-child(5){ background:#f4efff; }
.brand-mock { padding:28px; position:relative; min-height:360px; overflow:hidden; }
.brand-mock::before { content:""; position:absolute; inset:28px; border-radius:38px; background:linear-gradient(135deg,#fff,#f4edff); border:1px solid var(--line); box-shadow:var(--shadow-soft); }
.brand-mock-inner { position:relative; padding:34px; }
.brand-mock-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; }
.brand-bubble { width:58px; height:58px; border-radius:22px; background:linear-gradient(135deg,var(--purple),var(--purple-2)); box-shadow:0 18px 35px rgba(107,55,255,.24); }
.brand-pill { height:36px; width:150px; border-radius:999px; background:var(--soft); }
.brand-lines { display:grid; gap:14px; }
.brand-lines span { height:20px; border-radius:999px; background:linear-gradient(90deg,var(--purple-3),rgba(107,55,255,.08)); }
.brand-lines span:nth-child(1){ width:80%; height:34px; }
.brand-lines span:nth-child(2){ width:64%; }
.brand-lines span:nth-child(3){ width:92%; }
.brand-lines span:nth-child(4){ width:72%; }

.pricing-grid { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:16px; }
.pricing-card { padding:28px; border-radius:34px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-soft); position:relative; overflow:hidden; }
.pricing-card.featured { background:linear-gradient(160deg,#fff,#f1e9ff); border-color:rgba(107,55,255,.34); transform:translateY(-8px); }
.pricing-tag { color:var(--purple); font-weight:900; font-size:13px; text-transform:uppercase; letter-spacing:.08em; }
.price { margin:14px 0 4px; font-size:46px; letter-spacing:-.06em; font-weight:950; }
.price small { font-size:16px; color:var(--muted); letter-spacing:0; }
.pricing-card h3 { margin:0; font-size:24px; }
.pricing-card p { color:var(--muted); line-height:1.5; min-height:48px; }
.pricing-card ul { list-style:none; padding:0; margin:20px 0 24px; display:grid; gap:10px; color:var(--deep); }
.pricing-card li::before { content:"✓"; color:var(--purple); font-weight:900; margin-right:8px; }
.pricing-note { margin-top:18px; color:var(--muted); line-height:1.6; }
.buyout-strip { margin-top:18px; padding:22px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.buyout-strip strong { display:block; font-size:22px; letter-spacing:-.04em; }
.buyout-strip span { color:var(--muted); }

.integrations-grid { display:grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap:12px; }
.integration-pill { min-height:84px; border-radius:28px; display:grid; place-items:center; text-align:center; padding:14px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-soft); color:var(--deep); font-weight:850; }

.lead-section { padding-bottom: 92px; }
.lead-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:22px; align-items:start; }
.lead-copy { padding:34px; position:sticky; top:98px; }
.lead-copy h2 { margin-top:0; }
.lead-copy p { color:var(--muted); line-height:1.65; font-size:17px; }
.form-card { padding:28px; background:#fff; border-radius:34px; border:1px solid var(--line); box-shadow:var(--shadow); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field { display:grid; gap:7px; }
.field.full { grid-column:1/-1; }
.field label { font-size:13px; color:var(--deep); font-weight:850; }
.field input, .field select, .field textarea {
  width:100%;
  min-height:54px;
  border:1px solid rgba(107,55,255,.18);
  background:#faf7ff;
  color:var(--ink);
  border-radius:18px;
  padding:0 16px;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field textarea { padding-top:14px; resize:vertical; min-height:112px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--purple); box-shadow:0 0 0 4px rgba(107,55,255,.10); background:#fff; }
.form-footer { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:18px; flex-wrap:wrap; }
.consent { display:flex; align-items:flex-start; gap:10px; color:var(--muted); font-size:13px; line-height:1.45; max-width:530px; }
.consent input { margin-top:2px; accent-color: var(--purple); }
.form-status { margin-top:16px; border-radius:20px; padding:14px 16px; display:none; background:var(--soft-2); border:1px solid var(--line); color:var(--deep); font-weight:760; }
.form-status.show { display:block; }

.gallery-section { padding-top: 82px; background:linear-gradient(180deg, rgba(246,240,255,.52), #fff); border-top:1px solid var(--line); }
.gallery-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.gallery-tabs { display:flex; gap:8px; flex-wrap:wrap; }
.gallery-tabs button { border:1px solid var(--line); background:#fff; color:var(--deep); border-radius:999px; padding:10px 14px; font-weight:850; cursor:pointer; }
.gallery-tabs button.active { background:linear-gradient(135deg,var(--purple),var(--purple-2)); color:#fff; border-color:transparent; }
.gallery-grid { display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:14px; }
.gallery-item { border:0; padding:0; text-align:left; border-radius:30px; overflow:hidden; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-soft); cursor:pointer; transition:transform .2s ease, box-shadow .2s ease; }
.gallery-item:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.gallery-thumb { height:220px; background:var(--soft-2); overflow:hidden; display:grid; place-items:center; }
.gallery-thumb img { width:100%; height:100%; object-fit:cover; }
.gallery-item.mobile .gallery-thumb img { object-fit:contain; background:#f8f5ff; }
.gallery-caption { padding:18px 22px 22px; display:block; }
.gallery-caption strong { display:block; font-size:14px; color:var(--ink); }
.gallery-caption span { display:block; margin-top:4px; font-size:12px; color:var(--muted); }
.gallery-more { display:flex; justify-content:center; margin-top:24px; }

.faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
details { background:#fff; border:1px solid var(--line); border-radius:26px; padding:20px 22px; box-shadow:var(--shadow-soft); }
summary { cursor:pointer; font-weight:900; letter-spacing:-.02em; }
details p { color:var(--muted); line-height:1.6; margin-bottom:0; }

.site-footer { background:var(--deep); color:#fff; padding:46px 0; }
.footer-grid { display:grid; grid-template-columns:1.3fr .7fr .7fr; gap:26px; }
.site-footer p, .site-footer a { color:rgba(255,255,255,.72); }
.site-footer h3 { margin-top:0; }
.footer-links { display:grid; gap:10px; }

.lightbox { position:fixed; inset:0; z-index:100; background:rgba(12,8,22,.78); backdrop-filter:blur(16px); display:none; align-items:center; justify-content:center; padding:24px; }
.lightbox.show { display:flex; }
.lightbox-inner { position:relative; width:min(1180px,96vw); max-height:92vh; background:#fff; border-radius:30px; box-shadow:0 40px 100px rgba(0,0,0,.32); overflow:hidden; }
.lightbox img { width:100%; max-height:82vh; object-fit:contain; background:#f8f5ff; }
.lightbox-caption { padding:14px 18px; color:var(--muted); border-top:1px solid var(--line); }
.lightbox-close { position:absolute; right:14px; top:14px; width:44px; height:44px; border-radius:999px; border:0; background:rgba(255,255,255,.92); box-shadow:0 12px 26px rgba(0,0,0,.12); font-size:24px; cursor:pointer; }

.buyout-hero { padding:72px 0 38px; text-align:center; }
.buyout-hero h1 { max-width:960px; margin-inline:auto; }
.ownership-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.ownership-card { padding:30px; border-radius:34px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-soft); }
.ownership-card .price { font-size:52px; }
.ownership-list { margin:20px 0 0; padding:0; list-style:none; display:grid; gap:10px; color:var(--deep); }
.ownership-list li::before { content:"✓"; color:var(--purple); font-weight:900; margin-right:8px; }

@media (max-width: 980px) {
  .nav-links { display:none; }
  .hero-grid, .branding-block, .lead-grid { grid-template-columns:1fr; }
  .hero-visual { order:-1; }
  .tilt-scene { min-height: 500px; border-radius:40px; }
  .product-stack { min-height:450px; }
  .device-shadow { left:50%; transform:translateX(-50%) translateZ(34px); top:70px; }
  .card-pos, .card-crm, .card-flow { position:relative; left:auto; right:auto; top:auto; bottom:auto; width:auto; transform:none; margin-top:12px; display:none; }
  .module-grid, .pricing-grid { grid-template-columns:1fr 1fr; }
  .workflow { grid-template-columns:1fr 1fr; }
  .integrations-grid { grid-template-columns:repeat(3,1fr); }
  .gallery-grid { grid-template-columns:repeat(2,1fr); }
  .lead-copy { position:static; }
}
@media (max-width: 680px) {
  .container { width:min(100% - 24px, var(--max)); }
  .nav { height:66px; }
  .brand span { font-size:18px; }
  .nav-actions .btn { display:none; }
  .hero { padding-top:42px; }
  .hero-stats, .problem-grid, .module-grid, .pricing-grid, .workflow, .faq-grid, .footer-grid, .ownership-grid { grid-template-columns:1fr; }
  .form-grid { grid-template-columns:1fr; }
  .hero-actions .btn { width:100%; }
  .tilt-scene { min-height: 450px; padding:14px; }
  .device-shadow { width:240px; height:430px; }
  .section { padding:54px 0; }
  .integrations-grid { grid-template-columns:1fr 1fr; }
  .buyout-strip { flex-direction:column; align-items:flex-start; }
  .gallery-grid { grid-template-columns:1fr; }
  .gallery-thumb { height:260px; }
  .gallery-item.desktop .gallery-thumb { height:190px; }
}

.selected-plan-card { outline: 2px solid rgba(107,55,255,.46); box-shadow: 0 28px 75px rgba(107,55,255,.22); }
.btn.is-selected { background: linear-gradient(135deg, var(--purple), var(--purple-2)); color: #fff; }
.long-faq { grid-template-columns: 1fr 1fr; }
.faq-section .faq-grid details { scroll-margin-top: 92px; }
.faq-section .faq-grid p { line-height: 1.62; }
@media (max-width: 760px) { .long-faq { grid-template-columns: 1fr; } }