/* leadmint.in: the app's "obsidian glass" look, hand-written so the site has no build dependencies. */
:root {
  color-scheme: dark;
  --void: #090a0f; --surface: #161525; --surface-2: #1d1c30;
  --ink: #e2e8f0; --ink-2: #c5ccda; --muted: #8e95ab;
  --line: rgb(255 255 255 / .08); --line-2: rgb(255 255 255 / .14);
  --coral: #ff5a5f; --coral-2: #ff7a7e; --coral-3: #ff9ea1;
  --violet: #8b5cf6; --violet-2: #a78bfa; --violet-3: #c4b5fd;
  --amber: #fbbf24; --green: #34d399; --sky: #38bdf8;
  --display: 'Sora', ui-sans-serif, system-ui, sans-serif;
  --sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --wrap: 1160px;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--void); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; color: var(--ink); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
/* aurora: two slow, blurred colour fields behind everything, plus a fine grain */
body::before, body::after { content: ''; position: fixed; z-index: -1; pointer-events: none; }
body::before { inset: -20vmax; filter: blur(60px); opacity: .9;
  background:
    radial-gradient(38vmax 26vmax at 78% 8%, rgb(139 92 246 / .3), transparent 70%),
    radial-gradient(30vmax 24vmax at 8% 22%, rgb(255 90 95 / .18), transparent 70%),
    radial-gradient(34vmax 22vmax at 50% 95%, rgb(56 189 248 / .08), transparent 70%);
  animation: aurora 26s ease-in-out infinite alternate; }
body::after { inset: 0; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes aurora { 0% { transform: translate3d(0, 0, 0) rotate(0); } 50% { transform: translate3d(-4vmax, 3vmax, 0) rotate(8deg); } 100% { transform: translate3d(3vmax, -2vmax, 0) rotate(-6deg); } }
/* scroll progress */
.prog { position: fixed; left: 0; top: 0; z-index: 60; height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--coral), var(--violet-2), var(--amber)); box-shadow: 0 0 12px rgb(255 90 95 / .7); pointer-events: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; margin: 0; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--violet-2); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 8px 14px; border-radius: 10px; background: var(--coral); color: #fff; font-weight: 700; }
.skip:focus { top: 12px; }
.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }

/* header */
.top { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  background: rgb(9 10 15 / .72); border-bottom: 1px solid var(--line); }
.top { transition: background .3s, box-shadow .3s; }
.top.scrolled { background: rgb(9 10 15 / .86); box-shadow: 0 10px 40px -20px rgb(0 0 0 / .9); }
.top .wrap { display: flex; align-items: center; gap: 18px; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 600; font-size: 1.2rem; }
.brand b { color: var(--coral-2); font-weight: 600; }
.brand:hover .logo { transform: rotate(-8deg) scale(1.08); }
.logo { transition: transform .4s var(--ease); width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; font: 700 15px var(--display);
  background: linear-gradient(135deg, var(--coral), var(--violet)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 0 18px -4px rgb(255 90 95 / .6); }
.nav { display: flex; gap: 4px; margin-left: 18px; }
.nav a { padding: 8px 12px; border-radius: 10px; color: var(--ink-2); font-weight: 500; font-size: .95rem; transition: color .2s, background .2s; }
.nav a:hover, .nav a[aria-current="page"] { color: #fff; background: rgb(255 255 255 / .05); }
.nav .m-only { display: none; }
footer .brand { color: var(--ink); }
.top .actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.menu-btn { display: none; margin-left: auto; background: none; border: 1px solid var(--line-2); color: var(--ink); border-radius: 10px; width: 42px; height: 40px; cursor: pointer; }
.menu-btn span, .menu-btn span::before, .menu-btn span::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; margin: auto; position: relative; content: ''; }
.menu-btn span::before { position: absolute; top: -6px; } .menu-btn span::after { position: absolute; top: 6px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 12px;
  font: 600 .95rem var(--sans); border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: transform .2s var(--ease), translate .25s var(--ease), background .2s, border-color .2s, box-shadow .2s; translate: var(--bx, 0) var(--by, 0); }
.btn:active { transform: translateY(1px); }
.btn-primary { color: #fff; background: linear-gradient(180deg, #ff6b70, var(--coral)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), 0 10px 30px -12px rgb(255 90 95 / .8); }
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .35) 50%, transparent 70%); transform: translateX(-120%); }
.btn-primary:hover::after { transform: translateX(120%); transition: transform .8s var(--ease); }
.btn-primary:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), 0 14px 36px -10px rgb(255 90 95 / .95); transform: translateY(-1px); }
.btn-ghost { color: var(--ink); background: rgb(255 255 255 / .04); border-color: var(--line-2); }
.btn-ghost:hover { background: rgb(255 255 255 / .08); }
.btn-quiet { color: var(--ink-2); background: none; padding: 0 12px; }
.btn-quiet:hover { color: #fff; }
.btn-lg { height: 52px; padding: 0 24px; font-size: 1rem; border-radius: 14px; }
.btn[disabled] { opacity: .55; cursor: wait; }

/* type helpers */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 700 .72rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--violet-3); }
.eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 10px var(--coral); }
.lede { color: var(--ink-2); font-size: 1.125rem; max-width: 60ch; }
.muted { color: var(--muted); }
.grad { background: linear-gradient(100deg, #fff 0%, var(--coral-3) 25%, var(--violet-3) 50%, var(--coral-3) 75%, #fff 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 7s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.glass { background: rgb(22 21 37 / .55); border: 1px solid var(--line); border-radius: 22px; box-shadow: inset 0 1px 0 rgb(255 255 255 / .05);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* sections */
section { padding: 88px 0; }
.sec-head { max-width: 720px; margin-bottom: 44px; }
.sec-head h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-top: 14px; }
.sec-head p { margin-top: 14px; }
.center { text-align: center; margin-inline: auto; }
.center .lede { margin-inline: auto; }

/* hero */
.hero { padding: 72px 0 56px; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.hero .wrap > div:first-child > * { animation: rise .9s var(--ease) both; }
.hero .wrap > div:first-child > :nth-child(2) { animation-delay: .08s; } .hero .wrap > div:first-child > :nth-child(3) { animation-delay: .16s; }
.hero .wrap > div:first-child > :nth-child(4) { animation-delay: .24s; } .hero .wrap > div:first-child > :nth-child(5) { animation-delay: .32s; }
.hero .scene { animation: rise-3d 1.4s var(--ease) both .1s; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); filter: blur(6px); } }
@keyframes rise-3d { from { opacity: 0; transform: translateY(40px) scale(.94); } }
.hero h1 { font-size: clamp(2.4rem, 5.6vw, 4rem); margin-top: 18px; }
.hero .lede { margin-top: 20px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.fine { margin-top: 16px; font-size: .875rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 18px; }
.fine span::before { content: '✓'; color: var(--green); margin-right: 6px; font-weight: 700; }

/* the 3D scene: two towers, real faces, turned by the pointer and by scroll */
.scene { position: relative; height: 540px; perspective: 1500px; perspective-origin: 50% 40%; }
.scene { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.scene.drag { cursor: grabbing; }
.rig { position: absolute; left: 50%; top: 77%; width: 0; height: 0; transform-style: preserve-3d;
  transform: rotateX(var(--rx, -14deg)) rotateY(var(--ry, -32deg)); will-change: transform; }
.bld { position: absolute; transform-style: preserve-3d; }
.bld .fc { position: absolute; padding: 12px; display: grid; gap: 5px; border: 1px solid rgb(167 139 250 / .2); backface-visibility: hidden;
  background: repeating-linear-gradient(180deg, transparent 0 calc(var(--fh) - 2px), rgb(196 181 253 / .22) calc(var(--fh) - 2px) var(--fh)), linear-gradient(180deg, #26244a, #121226);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .1); }
.bld .fc.dk { background: repeating-linear-gradient(180deg, transparent 0 calc(var(--fh) - 2px), rgb(196 181 253 / .12) calc(var(--fh) - 2px) var(--fh)), linear-gradient(180deg, #1b1a33, #0c0c18); }
.bld .fc.sd { background: repeating-linear-gradient(180deg, transparent 0 calc(var(--fh) - 2px), rgb(196 181 253 / .16) calc(var(--fh) - 2px) var(--fh)), linear-gradient(180deg, #211f3e, #10101f); }
.bld .fc { background-position: 0 10.5px, 0 0; }
.hint { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); opacity: .7; pointer-events: none; transition: opacity .6s; }
.hint::before { content: '⟷'; margin-right: 8px; color: var(--violet-3); }
.scene.used .hint, .no-js .hint { opacity: 0; }
.bld .roof { position: absolute; background: linear-gradient(135deg, #34305e, #1a1830); border: 1px solid rgb(196 181 253 / .3);
  box-shadow: inset 0 0 30px rgb(139 92 246 / .35); }
.bld .roof::after { content: ''; position: absolute; inset: 30%; border-radius: 4px; background: rgb(255 90 95 / .5); box-shadow: 0 0 24px 6px rgb(255 90 95 / .45); animation: beacon 2.4s ease-in-out infinite; }
.ground { position: absolute; width: 900px; height: 900px; left: -450px; top: -450px; transform: rotateX(90deg); pointer-events: none;
  background:
    radial-gradient(closest-side, rgb(255 90 95 / .28), rgb(139 92 246 / .12) 45%, transparent 72%),
    repeating-linear-gradient(0deg, rgb(167 139 250 / .16) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgb(167 139 250 / .16) 0 1px, transparent 1px 44px);
  -webkit-mask: radial-gradient(closest-side, #000 30%, transparent 75%); mask: radial-gradient(closest-side, #000 30%, transparent 75%); }
.ring { position: absolute; width: 360px; height: 360px; left: -180px; top: -180px; border-radius: 50%; border: 1px solid rgb(255 122 126 / .6);
  transform: rotateX(90deg); animation: ring 3.6s cubic-bezier(.2,.7,.3,1) infinite; pointer-events: none; }
.ring.r2 { animation-delay: -1.8s; }
.win { border-radius: 2px; background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06); transition: background .5s, box-shadow .5s; }
.win.sold { background: rgb(52 211 153 / .24); box-shadow: inset 0 0 0 1px rgb(52 211 153 / .5); }
.win.hold { background: rgb(251 191 36 / .3); box-shadow: inset 0 0 0 1px rgb(251 191 36 / .6), 0 0 10px -2px rgb(251 191 36 / .7); }
.win.enq { background: rgb(167 139 250 / .55); box-shadow: inset 0 0 0 1px rgb(221 214 254 / .8), 0 0 16px 0 rgb(167 139 250 / .95); }
.win.hot { background: rgb(255 122 126 / .75); box-shadow: inset 0 0 0 1px rgb(255 190 192 / .9), 0 0 20px 2px rgb(255 90 95 / .95); animation: blink 1.6s ease-in-out infinite; }
.win.ping { animation: ping 1.4s ease-out; }
.card { position: absolute; z-index: 2; padding: 12px 14px; border-radius: 14px; font-size: .8rem; min-width: 200px;
  background: rgb(29 28 48 / .82); border: 1px solid var(--line-2); box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 30px 70px -26px rgb(0 0 0 / .9), 0 0 0 1px rgb(139 92 246 / .08);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transform: translate3d(var(--px, 0), var(--py, 0), 0); will-change: transform; }
.card > div { animation: bob 6s ease-in-out infinite; }
.card .k { font: 700 .62rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.card .v { margin-top: 6px; font-weight: 600; color: #fff; }
.card .s { margin-top: 2px; color: var(--ink-2); }
.card .swap { transition: opacity .35s, transform .35s var(--ease); }
.card .swap.out { opacity: 0; transform: translateY(6px); }
.card .live { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; color: var(--coral-3); }
.card .live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); animation: blink 1.2s infinite; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.c1 { left: -10px; top: 30px; } .c2 { right: -10px; top: 170px; } .c3 { left: 10px; bottom: 50px; }
.c2 > div { animation-delay: -2s; } .c3 > div { animation-delay: -4s; }
@keyframes bob { 50% { transform: translateY(-9px); } }
@keyframes blink { 50% { opacity: .5; } }
@keyframes beacon { 50% { opacity: .35; box-shadow: 0 0 10px 2px rgb(255 90 95 / .3); } }
@keyframes ring { from { opacity: .9; transform: rotateX(90deg) scale(.35); } to { opacity: 0; transform: rotateX(90deg) scale(1.6); } }
@keyframes ping { 0% { background: #fff; box-shadow: 0 0 30px 8px rgb(221 214 254 / 1); } 100% { } }

/* logos / strip */
.strip { padding: 22px 0; border-block: 1px solid var(--line); background: rgb(255 255 255 / .015); }
.strip .wrap { display: flex; align-items: center; gap: 24px; color: var(--muted); font-weight: 600; font-size: .9rem; }
.strip .lbl { flex: none; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
.marq { flex: 1; min-width: 0; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.track { display: flex; width: max-content; animation: marq 32s linear infinite; }
.marq:hover .track { animation-play-state: paused; }
.grp { display: flex; align-items: center; gap: 28px; padding-right: 28px; }
.grp b { color: var(--ink-2); font: 600 1.02rem var(--display); white-space: nowrap; transition: color .2s; }
.grp b:hover { color: #fff; }
.grp i { color: var(--coral-2); font-style: normal; font-size: .7rem; opacity: .7; }
@keyframes marq { to { transform: translateX(-50%); } }
.stats-sec { padding: 56px 0 8px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stat { padding: 8px 4px 8px 20px; border-left: 1px solid var(--line-2); }
.stat .n { display: block; font: 600 clamp(2.2rem, 4.4vw, 3.2rem)/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff, var(--violet-3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat .l { display: block; margin-top: 10px; color: var(--muted); font-size: .9rem; max-width: 26ch; }

/* grids */
.grid { display: grid; gap: 18px; }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.feat { padding: 26px; }
.feat h3 { font-size: 1.15rem; margin-top: 16px; }
.feat p { margin-top: 8px; color: var(--muted); font-size: .95rem; }
.ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgb(139 92 246 / .14); border: 1px solid rgb(139 92 246 / .3); color: var(--violet-3); }
.ico.coral { background: rgb(255 90 95 / .12); border-color: rgb(255 90 95 / .32); color: var(--coral-3); }
.ico.amber { background: rgb(251 191 36 / .1); border-color: rgb(251 191 36 / .3); color: var(--amber); }
.ico.green { background: rgb(52 211 153 / .1); border-color: rgb(52 211 153 / .3); color: var(--green); }
.ico svg { width: 20px; height: 20px; }

/* steps */
.steps { counter-reset: s; }
.step { padding: 26px; position: relative; }
.step::before { counter-increment: s; content: counter(s, decimal-leading-zero); font: 600 .8rem var(--display); color: var(--coral-2); letter-spacing: .1em; }
.step h3 { font-size: 1.1rem; margin-top: 10px; }
.step p { margin-top: 8px; color: var(--muted); font-size: .95rem; }

/* feature rows (features page) */
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding: 40px 0; border-top: 1px solid var(--line); }
.row:first-of-type { border-top: 0; }
.row h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: 12px; }
.row .lede { margin-top: 12px; font-size: 1.02rem; }
.ticks { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; color: var(--ink-2); }
.ticks li::before { content: ''; flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 6px; background: rgb(52 211 153 / .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334d399' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat; }
.panel { padding: 22px; }
.mock { display: grid; gap: 10px; }
.mrow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: rgb(255 255 255 / .03); border: 1px solid var(--line); font-size: .88rem; }
.mrow .t { font-weight: 600; color: #fff; } .mrow .s { color: var(--muted); font-size: .8rem; }
.mrow .r { margin-left: auto; }
.chip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: .74rem; font-weight: 700; background: rgb(255 255 255 / .06); color: var(--ink-2); }
.chip.hot { background: rgb(255 90 95 / .16); color: var(--coral-3); }
.chip.warm { background: rgb(251 191 36 / .14); color: var(--amber); }
.chip.ok { background: rgb(52 211 153 / .14); color: var(--green); }
.chip.v { background: rgb(139 92 246 / .16); color: var(--violet-3); }
.av { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; font: 700 .78rem var(--display); color: #fff; background: linear-gradient(135deg, #3b3760, #24223f); border: 1px solid var(--line-2); }

/* pricing */
.trial { display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px; align-items: center; padding: 34px; margin-bottom: 26px;
  background: linear-gradient(120deg, rgb(255 90 95 / .14), rgb(139 92 246 / .14)); border: 1px solid rgb(255 90 95 / .3); border-radius: 24px; }
.trial h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.trial p { margin-top: 10px; color: var(--ink-2); }
.trial .cta-row { margin-top: 0; justify-content: flex-end; }
.plans { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.plan { padding: 22px 18px; display: flex; flex-direction: column; position: relative; }
.plan.pop { border-color: rgb(255 90 95 / .5); background: rgb(255 90 95 / .07); }
.plan .tag { position: absolute; top: -11px; left: 18px; height: 22px; padding: 0 10px; border-radius: 999px; background: var(--coral); color: #fff; font: 700 .68rem/22px var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.plan .seats { font: 700 .74rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.plan .price { font: 600 2rem/1 var(--display); margin-top: 14px; color: #fff; letter-spacing: -.02em; }
.plan .per { font-size: .8rem; color: var(--muted); margin-top: 6px; }
.plan .tot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: .85rem; color: var(--ink-2); }
.plan .tot b { color: #fff; }
.plan .btn { margin-top: 18px; height: 40px; font-size: .88rem; }
.custom { margin-top: 18px; padding: 22px 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.custom h3 { font-size: 1.1rem; } .custom p { color: var(--muted); font-size: .95rem; }
.custom .btn { margin-left: auto; }
.incl { margin-top: 46px; }
.incl .ticks { grid-template-columns: repeat(3, 1fr); gap: 12px 24px; }
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { padding: 0; }
.faq summary { cursor: pointer; list-style: none; padding: 18px 22px; font-weight: 600; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--coral-2); font-size: 1.3rem; line-height: 1; transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 22px 20px; color: var(--muted); }

/* contact */
.contact { display: grid; grid-template-columns: .9fr 1.1fr; gap: 28px; align-items: start; }
.ways { display: grid; gap: 12px; margin-top: 28px; }
.way { display: flex; align-items: center; gap: 14px; padding: 16px 18px; transition: border-color .2s, background .2s; }
.way:hover { border-color: var(--line-2); background: rgb(29 28 48 / .7); }
.way .t { font-weight: 600; } .way .s { color: var(--muted); font-size: .88rem; }
form.demo { padding: 28px; display: grid; gap: 16px; }
form.demo h2 { font-size: 1.4rem; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .82rem; font-weight: 600; color: var(--ink-2); }
.field label i { color: var(--coral-2); font-style: normal; }
.field input, .field select, .field textarea { width: 100%; font: 400 .95rem var(--sans); color: var(--ink); background: rgb(9 10 15 / .6); border: 1px solid var(--line-2);
  border-radius: 11px; padding: 11px 13px; transition: border-color .2s, box-shadow .2s; }
.field textarea { min-height: 96px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e95ab' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 36px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--violet-2); box-shadow: 0 0 0 3px rgb(139 92 246 / .2); }
.field input:user-invalid { border-color: var(--coral); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent { font-size: .8rem; color: var(--muted); }
.consent a, .prose a, .link { color: var(--violet-3); text-decoration: underline; text-decoration-color: rgb(139 92 246 / .45); text-underline-offset: 3px; }
.msg { padding: 12px 14px; border-radius: 12px; font-size: .9rem; display: none; }
.msg.show { display: block; }
.msg.ok { background: rgb(52 211 153 / .1); border: 1px solid rgb(52 211 153 / .35); color: #a7f3d0; }
.msg.err { background: rgb(255 90 95 / .1); border: 1px solid rgb(255 90 95 / .35); color: #fecdd3; }
.cf-turnstile { min-height: 65px; }

/* legal */
.legal { max-width: 820px; margin: 0 auto; padding: 36px; }
.legal h1 { font-size: clamp(1.8rem, 4.4vw, 2.5rem); margin-top: 10px; }
.prose { color: var(--muted); }
.prose .intro { color: var(--ink-2); margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.prose h2 { font-size: 1.15rem; color: var(--ink); margin: 32px 0 10px; scroll-margin-top: 90px; }
.prose p + p, .prose p + ul, .prose ul + p { margin-top: 12px; }
.prose ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.prose li { display: flex; gap: 10px; }
.prose li::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: .6em; border-radius: 50%; background: rgb(255 90 95 / .7); }
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.toc a { font-size: .8rem; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); }
.toc a:hover { border-color: var(--line-2); color: #fff; }

/* cta band + footer */
.band { padding: 54px; text-align: center; border-radius: 28px; background: radial-gradient(600px 260px at 50% 0, rgb(255 90 95 / .2), transparent 70%), rgb(22 21 37 / .6); border: 1px solid var(--line-2); }
.band h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.band p { margin: 14px auto 0; }
.band .cta-row { justify-content: center; }
footer { margin-top: 40px; padding: 56px 0 34px; border-top: 1px solid var(--line); color: var(--muted); font-size: .92rem; }
footer .cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 32px; }
footer h4 { margin: 0 0 12px; color: var(--ink); font: 600 .8rem var(--sans); letter-spacing: .12em; text-transform: uppercase; }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
footer a:hover { color: #fff; }
footer .base { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: .84rem; }
.wa { position: fixed; right: 18px; bottom: 18px; z-index: 45; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff;
  box-shadow: 0 14px 34px -10px rgb(37 211 102 / .7); transition: transform .2s var(--ease); }
.wa:hover { transform: scale(1.06); }
.wa svg { width: 28px; height: 28px; }

/* reveal on scroll */
.rv { opacity: 0; translate: 0 26px; transition: opacity .8s var(--ease), translate .8s var(--ease); }
.rv.in { opacity: 1; translate: none; }
.no-js .rv { opacity: 1; translate: none; }

/* 3D tilt and a glare that follows the cursor (set up by site.js on hover devices) */
.tilt { position: relative; transform: perspective(900px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg));
  transition: opacity .8s var(--ease), translate .8s var(--ease), transform .6s var(--ease), border-color .3s, background .3s, box-shadow .3s; }
.tilt.on { transition: opacity .8s var(--ease), translate .8s var(--ease), transform .12s linear, border-color .3s, background .3s, box-shadow .3s; }
.tilt::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgb(255 255 255 / .09), transparent 42%); }
.tilt.on::after { opacity: 1; }
.tilt.on { border-color: rgb(167 139 250 / .32); box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 30px 60px -30px rgb(139 92 246 / .45); }
.feat .ico { transition: transform .5s var(--ease); }
.feat.on .ico { transform: translateY(-3px) scale(1.08) rotate(-4deg); }

/* features page: panels swing in, rows slide in one by one */
.row { perspective: 1400px; }
.row .panel { rotate: y -18deg; transition: rotate 1.2s var(--ease) .1s, opacity .8s, transform .6s var(--ease), border-color .3s, box-shadow .3s; }
.row.in .panel { rotate: none; }
.row .mrow { opacity: 0; translate: 28px 0; transition: opacity .6s var(--ease), translate .6s var(--ease), background .2s, border-color .2s; }
.row.in .mrow { opacity: 1; translate: none; }
.row.in .mrow:nth-child(2) { transition-delay: .12s; } .row.in .mrow:nth-child(3) { transition-delay: .24s; } .row.in .mrow:nth-child(4) { transition-delay: .36s; }
.mrow:hover { background: rgb(255 255 255 / .06); border-color: var(--line-2); }
.no-js .row .panel { rotate: none; } .no-js .row .mrow { opacity: 1; translate: none; }

/* pricing: the popular plan gets a turning gradient border */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.plan.pop::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--ang), var(--coral), var(--violet), var(--amber), var(--coral));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 5s linear infinite; }
@keyframes spin { to { --ang: 360deg; } }
.band { background-size: 200% 200%; animation: band 12s ease-in-out infinite alternate; }
@keyframes band { to { background-position: 100% 100%; } }

/* page hero (inner pages) */
.phero { padding: 72px 0 24px; }
.phero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-top: 16px; max-width: 18ch; }
.phero .lede { margin-top: 18px; }
.phero.center h1 { margin-inline: auto; }

.nf { min-height: 60vh; display: grid; place-items: center; text-align: center; }
.nf h1 { font-size: clamp(4rem, 14vw, 8rem); }

@media (max-width: 1080px) {
  .plans { grid-template-columns: repeat(3, 1fr); }
  footer .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .hero .wrap, .row, .contact, .trial { grid-template-columns: 1fr; }
  .trial .cta-row { justify-content: flex-start; }
  .g3 { grid-template-columns: 1fr 1fr; }
  .incl .ticks { grid-template-columns: 1fr 1fr; }
  .scene { height: 480px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 28px 18px; }
  .row .panel { order: 2; }
  .nav, .top .actions .btn-quiet { display: none; }
  .menu-btn { display: block; }
  .top .actions { margin-left: 0; }
  .top.open .nav { display: grid; position: absolute; top: 64px; left: 0; right: 0; margin: 0; padding: 12px 20px 20px; background: rgb(9 10 15 / .97); border-bottom: 1px solid var(--line); }
  .top.open .nav a { padding: 12px; }
  .top.open .nav .m-only { display: block; }
  .top.open .nav .cta { margin-top: 6px; text-align: center; color: #fff; background: var(--coral); }
}
@media (max-width: 620px) {
  section { padding: 64px 0; }
  .g3, .g2, .fields, .plans, .incl .ticks { grid-template-columns: 1fr; }
  .top .actions .btn-primary { display: none; }
  .scene { height: 430px; margin: 0 -20px; }
  .rig { transform: scale(.78) rotateX(var(--rx, -14deg)) rotateY(var(--ry, -32deg)); }
  .card { min-width: 168px; font-size: .74rem; padding: 10px 12px; }
  .c1 { left: 14px; top: 0; } .c2 { right: 10px; top: 150px; } .c3 { left: 18px; bottom: 34px; }
  .strip .lbl { display: none; }
  .stat .n { font-size: 2.1rem; }
  .band, .legal, form.demo, .trial { padding: 24px; }
  footer .cols { grid-template-columns: 1fr; }
  .custom .btn { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .rv { opacity: 1; translate: none; }
  .row .panel { rotate: none; } .row .mrow { opacity: 1; translate: none; }
  .track { width: auto; } .grp[aria-hidden] { display: none; } .grp { flex-wrap: wrap; justify-content: center; }
}