/* Fluence AI — homepage clone. Breakpoints match Framer: desktop ≥1200, tablet 810–1199.98, phone ≤809.98 */
:root {
  --bg: var(--c27);
  --ink: var(--c28);
  --orange: var(--c4);
  --sand: var(--c10);
  --line: var(--c29);
  --card-line: var(--c30);
  --w-line: var(--c31);
  --grad: linear-gradient(var(--c13) 0%, var(--c4) 100%);
  --feat: "blwf", "cv03", "cv04", "cv09", "cv11";
  --spring: cubic-bezier(.2, .9, .3, 1.05); /* replaced at runtime by a solved spring (main.js) */
  --spring-dur: .55s;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f3); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, h4, p { margin: 0; font-weight: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
img, video, canvas { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.page { display: flex; flex-direction: column; align-items: center; padding: 8px; background: var(--bg); overflow-x: clip; }
.page > section, .page > header { width: 100%; position: relative; }

/* ---------- type ---------- */
.mono { font-family: var(--f2); font-size: 12px; line-height: 16px; font-feature-settings: var(--feat); color: var(--ink); text-align: center; white-space: nowrap; }
.f12 { font-size: 12px; line-height: 14.4px; }
.f12k { font-size: 12px; line-height: 16px; color: var(--c3); }
.f12b { font-size: 12px; line-height: 14.4px; font-weight: 600; }
.f13 { font-size: 13px; line-height: 20px; }
.f13m { font-size: 13px; line-height: 15.6px; font-weight: 500; }
.f14 { font-size: 14px; line-height: 22px; }
.f14b { font-size: 14px; line-height: 24px; font-weight: 600; }
.f14m { font-size: 14px; line-height: 16.8px; font-weight: 500; }
.f16 { font-size: 16px; line-height: 26px; font-feature-settings: var(--feat); }
.f16m { font-size: 16px; line-height: 26px; font-weight: 500; font-feature-settings: var(--feat); }
.f18m { font-size: 18px; line-height: 28px; font-weight: 500; font-feature-settings: var(--feat); }
.h1, .h2, .h3, .h4, .gs { font-family: var(--f1); font-weight: 500; font-feature-settings: var(--feat); }
.h1 { font-size: 56px; line-height: 66px; color: var(--c1); text-align: center; }
.h2 { font-size: 44px; line-height: 52.8px; }
.h3 { font-size: 38px; line-height: 45.6px; }
.h4 { font-size: 24px; line-height: 28.8px; }
.white { color: var(--c1); }
.o5 { opacity: .5; } .o6 { opacity: .6; } .o7 { opacity: .7; } .o8 { opacity: .8; }
.bordered { position: relative; }
.bordered::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--w-line); border-radius: inherit; pointer-events: none; }

/* ---------- badge ---------- */
.badge { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; height: 28px; border-radius: 99px; background: var(--c1); box-shadow: var(--c2) 0 1px 2px 0; font-family: var(--f2); font-size: 12px; line-height: 16px; white-space: nowrap; }
.badge::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--line); border-radius: inherit; pointer-events: none; }
.badge-dark { background: var(--c11); box-shadow: var(--c32) 0 1px 2px 0; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--c1); }
.badge-dark::after { border-color: var(--c33); }
.star { width: 12px; height: 12px; flex: none; background: var(--c14); -webkit-mask: url(assets/icons/star.svg) center / contain no-repeat; mask: url(assets/icons/star.svg) center / contain no-repeat; animation: star-turn 1s cubic-bezier(.44, 0, .56, 1) infinite; }
.badge-dark .star { background: var(--c1); }
.badge-dark .star-orange { background: var(--c14); }
@keyframes star-turn { from { transform: rotate(0); } to { transform: rotate(90deg); } }

/* ---------- buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; width: 129px; padding: 0 12px; border-radius: 8px; font-size: 14px; line-height: 22px; white-space: nowrap; }
.btn-orange { background: var(--orange); color: var(--c1); box-shadow: var(--c15) 0 2px 0 0 inset; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.btn-black { background: var(--ink); color: var(--c1); box-shadow: var(--c15) 0 2px 0 0 inset; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.btn-white { background: var(--c1); color: var(--ink); box-shadow: var(--c7) 0 1px 2px 0; }
.btn-white::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--c34); border-radius: inherit; pointer-events: none; }
.btn-small { padding: 0 8px; }
.roll { position: relative; display: flex; flex-direction: column; align-items: center; height: 20px; overflow: hidden; width: 100%; }
.roll > span { display: block; line-height: 22px; margin-top: -1px; transition: transform var(--spring-dur) var(--spring), opacity var(--spring-dur) var(--spring); }
.roll > span + span { position: absolute; top: 20px; left: 0; right: 0; text-align: center; margin-top: 0; opacity: 0; }
.btn:hover .roll > span, .btn:focus-visible .roll > span { transform: translateY(-21px); }
.btn:hover .roll > span:first-child, .btn:focus-visible .roll > span:first-child { opacity: 0; }
.btn:hover .roll > span + span, .btn:focus-visible .roll > span + span { opacity: 1; }

/* ---------- nav ---------- */
.nav { position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 100%; padding: 24px; display: flex; justify-content: center; z-index: 10; pointer-events: none; }
.nav-bar { pointer-events: auto; position: relative; display: flex; align-items: center; justify-content: space-between; width: 1240px; max-width: 100%; height: 56px; padding: 10px; border-radius: 12px; overflow: clip; background: var(--c16); box-shadow: var(--c5) -1px -1px 0 0 inset, var(--c6) 1px 1px 0 0 inset, var(--c17) 0 10px 16px 0; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: width var(--spring-dur) var(--spring), background-color var(--spring-dur) var(--spring), box-shadow var(--spring-dur) var(--spring), backdrop-filter var(--spring-dur) var(--spring); }
.nav-top { display: flex; align-items: center; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--c1); }
.logo-mark { width: 32px; height: 32px; flex: none; transition: width var(--spring-dur) var(--spring), height var(--spring-dur) var(--spring); }
.logo-text { font-family: var(--f1); font-weight: 500; font-size: 22px; line-height: 26.4px; font-feature-settings: var(--feat); white-space: nowrap; width: 106px; transition: opacity .3s, width var(--spring-dur) var(--spring); }
.burger { display: none; }
.nav-links { position: absolute; left: 50%; top: 15px; transform: translateX(-50%); display: flex; gap: 20px; align-items: center; }
.nav-link { display: flex; align-items: center; height: 26px; font-size: 14px; line-height: 22px; color: var(--c1); transition: opacity .3s; }
.nav-link:hover, .nav-link:focus-visible { opacity: .7; }
.nav-cta { display: flex; }
.nav-btn { width: 102px; }
.nav-bar[data-state="small"] { width: 610px; background: var(--c18); box-shadow: var(--c5) -1px -1px 0 0 inset, var(--c6) 1px 1px 0 0 inset, var(--c19) 0 10px 16px 0; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.nav-bar[data-state="small"] .logo-mark { width: 34px; height: 34px; }
.nav-bar[data-state="small"] .logo-text { opacity: 0; width: 0; }
.nav-bar[data-state="small"] .nav-links { top: 15px; }
.nav-bar[data-state="small"] .nav-btn { width: 100px; height: 34px; background: var(--c1); color: var(--ink); box-shadow: var(--c7) 0 1px 2px 0; }

/* ---------- hero ---------- */
.hero { display: flex; justify-content: center; align-items: center; padding: 172px 30px 350px; overflow: clip; border-radius: 8px; }
.hero-media { position: absolute; inset: 0; background: var(--c3); border-radius: 8px; overflow: clip; }
.hero-stars { position: absolute; left: 0; right: 0; top: 36px; height: 590px; display: flex; justify-content: center; pointer-events: none; }
.stars-clip { width: 800px; max-width: 100%; height: 590px; border-radius: 200px; overflow: hidden; }
.stars-clip canvas { width: 100%; height: 100%; }
.hero-video { position: absolute; left: 0; right: 0; top: -364px; height: 1500px; }
.hero-video video { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.hero-container { position: relative; z-index: 4; width: 100%; max-width: 1280px; display: flex; flex-direction: column; align-items: center; }
.hero-top { width: 842px; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 32px; }
.hero-head { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hero-title { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.hero-sub { max-width: 700px; text-align: center; color: var(--c1); }
.hero-bottom { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 30px; }
.ai-panel { position: relative; width: 653px; max-width: 100%; padding: 6px; border-radius: 18px; background: var(--c3); box-shadow: var(--c5) 1px 1px 0 0 inset, var(--c35) -1px -1px 0 0 inset; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.ai-form { margin: 0; display: flex; flex-direction: column; gap: clamp(10px, 2vw, 12px); height: 154px; min-height: 150px; padding: 16px; background: var(--c36); border: 1px solid var(--c6); border-radius: 12px; overflow: hidden; }
.ai-inner { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: clamp(12px, 2.4vw, 16px); border-radius: 11px; overflow: hidden; }
.ai-prompt { flex: 1 1 0%; min-height: 0; overflow-y: auto; padding: 2px 1px; font-size: 14px; line-height: 1.1em; color: var(--c20); white-space: pre-wrap; cursor: text; outline: none; }
.caret { display: inline-block; width: 0; height: 1.1em; margin-left: 3px; border-left: 1px solid var(--c20); opacity: .45; vertical-align: top; }
.ai-row { display: flex; justify-content: space-between; align-items: center; gap: 8px 10px; }
.ai-select { position: relative; display: inline-flex; align-items: center; padding: clamp(6px, 1.6vw, 7px) clamp(10px, 2.2vw, 12px); border-radius: 8px; background: var(--c37); border: 1px solid var(--c38); opacity: .85; cursor: pointer; font-size: 12px; line-height: 1.2em; color: var(--c39); }
.ai-select-txt { display: inline-flex; align-items: center; gap: 8px; }
.ai-select-txt img { opacity: .6; }
.ai-select select { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 12px; }
.send-glow { position: relative; display: flex; align-items: center; justify-content: center; width: 52px; height: 38px; padding: 3px; background: var(--c40); border-radius: 7px; overflow: hidden; }
.send-glow::before { content: ""; position: absolute; inset: -60%; background: conic-gradient(from 0deg, var(--c21), var(--c4), var(--c41), var(--c4), var(--c21)); animation: spin 2.5s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.send-btn { position: relative; z-index: 1; width: 46px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--c42); border-radius: 4px; }
.send-btn img { transition: transform .2s ease-out; }
.send-btn:hover img { transform: scale(1.1); }
.ai-suggest { width: 292px; height: 138px; overflow: clip; -webkit-mask-image: linear-gradient(rgba(0, 0, 0, .15) .607824%, #000 50%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(rgba(0, 0, 0, .15) .607824%, #000 50%, rgba(0, 0, 0, 0) 100%); }
.ai-suggest-list { display: flex; flex-direction: column; gap: 12px; will-change: transform; }
.sugg { position: relative; display: flex; align-items: center; gap: 12px; height: 38px; padding: 8px 12px; border-radius: 20px; background: var(--c43); box-shadow: var(--c5) -1px -1px 0 0 inset, var(--c6) 1px 1px 0 0 inset; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); color: var(--c1); font-size: 14px; line-height: 22px; flex: none; }
.sugg-ico { width: 20px; height: 20px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 4px; background-image: linear-gradient(var(--c44) 0%, var(--c4) 100%); }
.sugg-ico i { width: 11px; height: 11px; background: var(--c1); -webkit-mask: url(assets/icons/suggest-icon.svg) center / contain no-repeat; mask: url(assets/icons/suggest-icon.svg) center / contain no-repeat; }

/* load animations (Framer APPEAR): start states; JS adds .in */
.js .appear { opacity: .001; }
.js [data-appear="badge"] { transform: translateY(24px); }
.js [data-appear="sub"], .js [data-appear="panel"], .js [data-appear="suggest"] { transform: translateY(25px); }
.appear.in { opacity: 1; transform: none; }
[data-appear="stars"].in { transition: opacity .4s cubic-bezier(.44, 0, .56, 1) .1s; }
[data-appear="video"].in { transition: opacity 4s cubic-bezier(.16, 1, .3, 1) 0s; }
[data-appear="badge"].in { transition: opacity .5s cubic-bezier(.16, 1, .3, 1) .2s, transform .5s cubic-bezier(.16, 1, .3, 1) .2s; }
[data-appear="sub"].in { transition: opacity 2.6s cubic-bezier(.16, 1, .3, 1) 1s, transform 2.6s cubic-bezier(.16, 1, .3, 1) 1s; }
[data-appear="panel"].in { transition: opacity 2.6s cubic-bezier(.16, 1, .3, 1) 1.3s, transform 2.6s cubic-bezier(.16, 1, .3, 1) 1.3s; }
[data-appear="suggest"].in { transition: opacity 2.6s cubic-bezier(.16, 1, .3, 1) 1.6s, transform 2.6s cubic-bezier(.16, 1, .3, 1) 1.6s; }
.appear.done { transition: none; }
.h1 .w { display: inline-block; }
.js .h1 .w { opacity: .001; filter: blur(10px); transform: translateY(25px); }
.h1.in .w { opacity: 1; filter: blur(0); transform: none; transition: opacity 2s cubic-bezier(.16, 1, .3, 1), filter 2s cubic-bezier(.16, 1, .3, 1), transform 2s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(.62s + var(--i) * .055s); }
.h1.done .w { transition: none; }

/* ---------- trust bar ---------- */
.trust { display: flex; justify-content: center; padding: 60px 30px; overflow: clip; }
.trust-container { width: 994px; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; overflow: clip; }
.trust-container .mono { width: 100%; }
.trust-row { position: relative; width: 100%; height: 40px; display: flex; overflow: clip; }
.trust-fade { position: absolute; top: 0; bottom: 0; width: 179px; z-index: 1; pointer-events: none; background-image: linear-gradient(90deg, var(--c45) 14.9038%, var(--c46) 100%); }
.trust-fade-l { left: 0; }
.trust-fade-r { right: 0; transform: scale(-1, -1); }
.marquee { width: 100%; height: 100%; overflow: clip; display: flex; align-items: center; }
.marquee-track { display: flex; align-items: center; gap: 50px; will-change: transform; flex: none; }
.marquee-track > li { flex: none; display: flex; align-items: center; justify-content: center; }
.trust .marquee-track > li img { object-fit: contain; }

/* ---------- problem ---------- */
.problem { display: flex; flex-direction: column; align-items: center; padding: 0 30px; max-width: 1800px; overflow: clip; }
.problem-inner { position: relative; width: 100%; display: flex; justify-content: center; padding: 140px 0; overflow: clip; }
.dots-canvas { position: absolute; left: 0; right: 0; top: 0; pointer-events: none; }
.dots-light { height: 800px; opacity: .04; } /* source sets overlay, but it renders as plain 4% (sampled 244→234) */
.dots-canvas canvas { width: 100%; height: 100%; }
.problem-container { position: relative; width: 818px; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 60px; overflow: clip; }
.problem-head { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; overflow: clip; }
.reveal-words { position: sticky; top: 0; width: 100%; letter-spacing: -.4px; font-family: var(--f1); font-weight: 500; font-feature-settings: var(--feat); }
.reveal-words .rw { display: inline-block; margin-right: .25em; filter: blur(0); opacity: .2; transition: filter .2s ease-out, opacity .2s ease-out; }
.problem-words { text-align: center; font-size: 44px; line-height: 48.4px; color: var(--ink); }
.problem-list { width: 686px; max-width: 100%; display: flex; flex-direction: column; overflow: clip; }
.prow { position: relative; display: flex; align-items: center; justify-content: center; gap: 16px; height: 100px; padding: 28px 0; overflow: clip; }
.prow::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1px solid var(--line); }
.prow-head { flex: 1 0 0; max-width: 300px; display: flex; align-items: center; gap: 20px; }
.prow-ico { width: 32px; height: 32px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 4px; background-image: linear-gradient(var(--c13) 0%, var(--c4) 100%); overflow: clip; }
.prow-ico i { width: 15px; height: 15px; background: var(--c1); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.prow-desc { width: 370px; flex: none; }

/* ---------- AI features ---------- */
.container-1280 { width: 100%; max-width: 1280px; }
.features { display: flex; flex-direction: column; align-items: center; padding: 60px 30px 100px; overflow: clip; }
.features-container { display: flex; flex-direction: column; gap: 60px; }
.features-head { width: 600px; max-width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; overflow: clip; }
.features-title { display: flex; flex-direction: column; gap: 24px; }
.features-title .f16 { opacity: .6; }
.fgrid { display: flex; flex-direction: column; gap: 20px; }
.frow { display: flex; gap: 20px; }
.fcard { position: relative; display: flex; flex-direction: column; padding: 8px; background: var(--c1); border-radius: 12px; box-shadow: var(--c8) 0 2px 4px 0; overflow: clip; }
.fcard::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--card-line); border-radius: inherit; pointer-events: none; }
.fcard-s { width: 512px; flex: none; }
.fcard-l { flex: 1 0 0; min-width: 0; }
.fpanel { position: relative; height: 334px; display: flex; align-items: center; justify-content: center; border-radius: 8px; overflow: clip; }
.fpanel-end { align-items: flex-end; }
.fpanel-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; border-radius: 8px; }
.ftext { display: flex; flex-direction: column; gap: 8px; padding: 16px; min-height: 113px; justify-content: center; }
.ftext .f14 { max-width: 484px; opacity: .6; }
/* smart automation */
.wf { position: relative; width: 308px; display: flex; flex-direction: column; align-items: center; }
.wf-step { position: relative; width: 100%; height: 48px; display: flex; align-items: center; gap: 8px; padding: 14px; background: var(--c1); border-radius: 8px; box-shadow: var(--c2) 0 4px 16px 0; }
.wf-step > img, .wf-step > span { position: relative; }
.wf-arrow { width: 22px; height: 22px; }
@property --agb-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.agb { position: absolute; inset: 0; border-radius: 8px; padding: 1px; background: conic-gradient(from calc(var(--agb-start, 0deg) + var(--agb-a)), var(--c9) 0deg, var(--c9) 52deg, var(--c22) 132deg, var(--c22) 172deg, var(--c23) 252deg, var(--c23) 292deg, var(--c9) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: agb-spin var(--agb-dur) linear infinite; }
@keyframes agb-spin { to { --agb-a: 360deg; } }
.agb-sweep { position: absolute; top: -2px; left: -32px; width: 32px; height: 4px; border-radius: 999px; opacity: .4; filter: blur(4px); background: var(--c9); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%); animation: agb-sweep var(--sweep-dur) linear infinite; }
@keyframes agb-sweep { from { left: -32px; } to { left: 100%; } }
/* adaptive learning */
.route { position: relative; width: 452px; height: 213px; flex: none; display: flex; flex-direction: column; align-items: center; }
.route-prompt { width: 316px; height: 50px; display: flex; align-items: center; gap: 8px; padding: 12px; background: var(--c1); border-radius: 8px; box-shadow: var(--c2) 0 4px 16px 0; }
.spin { animation: spin 3s linear infinite; }
.route-anim { position: relative; width: 316px; height: 78px; overflow: clip; }
.route-anim svg { position: absolute; top: 0; height: 78px; }
.route-cards { display: flex; gap: 6px; }
.route-card { width: 109px; height: 85px; display: flex; flex-direction: column; justify-content: space-between; padding: 14px; background: var(--c1); border-radius: 8px; box-shadow: var(--c2) 0 4px 16px 0; }
.route-card i { width: 6px; height: 6px; border-radius: 9px; background: var(--orange); }
/* email */
.email { position: relative; width: 381px; height: 283px; flex: none; display: flex; flex-direction: column; background: var(--c1); border-radius: 8px 8px 0 0; box-shadow: var(--c2) 0 4px 16px 0; }
.email::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--w-line); border-bottom: 0; border-radius: inherit; pointer-events: none; }
.email-head { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.email-row { display: flex; align-items: center; gap: 8px; }
.email-row .f12 { line-height: 22px; }
.email-lbl { width: 50px; flex: none; }
.email-div { width: 100%; height: 3px; }
.email-body { display: flex; flex-direction: column; gap: 16px; padding: 16px; }
.email-lines { display: flex; flex-direction: column; gap: 12px; }
.shim { position: relative; height: 7px; max-width: 100%; border-radius: 999px; background: var(--c24); overflow: hidden; }
.shim i { position: absolute; top: 0; bottom: 0; left: -70%; width: 70%; border-radius: 999px; opacity: .9; background-image: linear-gradient(100deg, transparent 0%, var(--c25) 28%, var(--c47) 50%, var(--c25) 72%, transparent 100%); animation: shim 5s linear infinite; }
@keyframes shim { from { transform: translateX(0); } to { transform: translateX(var(--shim-dist, 470px)); } }
.shim-s { width: 88px; height: 6px; }
.reply { position: absolute; left: -128px; top: 139px; width: 331px; display: flex; gap: 8px; padding: 16px; background: var(--c1); border-radius: 8px; box-shadow: var(--c2) 0 12px 24px 0; }
.reply > img { flex: none; }
.reply-content { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.reply-btn { display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 4.95px 7.43px; background: var(--ink); border-radius: 4.95px; color: var(--c1); font-size: 13px; line-height: 11.75px; }
/* dashboard */
.dash { position: absolute; left: 50%; top: 207px; transform: translate(-50%, -50%); width: 337px; height: 319px; display: flex; flex-direction: column; gap: 16px; background: var(--c1); border-radius: 8px; box-shadow: var(--c2) 0 4px 16px 0; overflow: clip; }
.dash::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--w-line); border-radius: inherit; pointer-events: none; }
.dash-head { position: relative; display: flex; justify-content: space-between; align-items: center; height: 48px; padding: 16px; }
.dash-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1px solid var(--w-line); }
.f13 { color: inherit; }
.dash-head .f13 { font-size: 13px; line-height: 15.6px; color: var(--c3); }
.live { display: flex; align-items: center; gap: 6px; }
.live i { width: 8px; height: 8px; border-radius: 50%; background-image: var(--grad); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.dash-content { display: flex; flex-direction: column; padding: 0 16px 24px; }
.dash-metrics { display: flex; gap: 8px; margin-bottom: 16px; }
.metric { flex: 1 0 0; height: 62px; display: flex; flex-direction: column; gap: 6px; padding: 9px 9px 1px; background: var(--c12); border-radius: 4px; }
.mnum { font-size: 18px; line-height: 21.6px; font-weight: 500; letter-spacing: -.44px; color: var(--ink); }
.dash-list { display: flex; flex-direction: column; gap: 8px; }
.dash-lbl { font-size: 10px; line-height: 16.5px; color: var(--c3); opacity: .5; height: 14px; }
.agent-row { height: 39px; display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--c12); border-radius: 4px; flex: none; }
.agent-row > i { width: 6px; height: 6px; border-radius: 50%; background-image: var(--grad); flex: none; }
/* in-view illustration reveals */
.js .iv { opacity: 0; transform: translate(var(--x, 0), var(--y, 0)) scale(var(--s, 1)); }
.inview .iv { opacity: var(--o, 1); transform: none; transition: opacity var(--t) var(--ease-out) var(--d), transform var(--t) var(--ease-out) var(--d); }

/* ---------- product overview ---------- */
.product { display: flex; justify-content: center; padding: 100px 16px; }
.product-container { display: flex; flex-direction: column; align-items: center; gap: 60px; }
.sec-head { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.product-head { width: 799px; max-width: 100%; }
.title-block { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.head-desc { max-width: 700px; }
.pstack { width: 100%; display: flex; flex-direction: column; gap: 60px; }
.pcard-wrap { position: sticky; }
.pcard-wrap:nth-child(1) { top: 100px; }
.pcard-wrap:nth-child(2) { top: 108px; }
.pcard-wrap:nth-child(3) { top: 116px; }
.pcard { position: relative; display: flex; align-items: center; justify-content: center; gap: 60px; height: 526px; padding: 8px; background: var(--bg); border-radius: 8px; box-shadow: var(--c8) 0 1px 2px -1px, var(--c8) 0 2px 4px 0; transform-origin: 50% 50%; will-change: transform; }
.pcard::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--c48); border-radius: inherit; pointer-events: none; }
.ptext { flex: 1 0 0; max-width: 525px; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; padding: 32px; }
.pcard.flip .ptext { padding: 32px 32px 32px 0; }
.pcard.flip { flex-direction: row-reverse; }
.ptop { display: flex; flex-direction: column; gap: 24px; }
.ptitle { font-size: 32px; line-height: 38.4px; }
.plist { display: flex; flex-direction: column; gap: 16px; }
.pli { display: flex; align-items: center; gap: 16px; }
.pchk { position: relative; width: 32px; height: 32px; flex: none; background: var(--sand); border-radius: 4px; overflow: hidden; }
.pchk img { position: absolute; left: 6px; top: 6px; width: 20px; height: 20px; }
.pimg { width: 679px; height: 510px; flex: none; border-radius: 8px; overflow: hidden; }
.pimg img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- use cases ---------- */
.usecases { display: flex; justify-content: center; padding: 100px 16px 120px; }
.uc-container { display: flex; justify-content: center; overflow: clip; }
.uc { width: 100%; display: flex; align-items: center; justify-content: center; gap: 130px; }
.uc-media { position: relative; width: 647px; height: 564px; flex: none; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 32px; border-radius: 12px; overflow: clip; }
.uc-imgs { position: absolute; inset: 0; }
.uc-imgs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; }
.uc-imgs img.on { opacity: 1; }
.uc-pill { position: absolute; left: 32px; right: 32px; bottom: 32px; height: 48px; display: flex; justify-content: space-between; align-items: center; padding: 8px 8px 8px 16px; background: var(--c49); border-radius: 99px; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.uc-pill-txt { flex: 1; display: flex; align-items: center; gap: 8px; color: var(--c1); font-size: 14px; line-height: 16.8px; letter-spacing: -.3px; white-space: nowrap; overflow: hidden; }
.uc-pill-txt img { flex: none; }
.uc-pill-send { flex: none; }
.uc-side { width: 503px; flex: none; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; padding: 32px 0; overflow: clip; }
.uc-top { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; overflow: clip; }
.uc-tabs { width: 100%; display: flex; flex-direction: column; gap: 2px; overflow: clip; }
.uc-tab { display: block; width: 100%; text-align: left; font-family: var(--f1); font-weight: 500; font-size: 32px; line-height: 38.4px; font-feature-settings: var(--feat); color: var(--ink); opacity: .4; transition: opacity .3s ease; }
.uc-tab.on { opacity: 1; }
.uc-bottom { width: 426px; max-width: 100%; display: flex; flex-direction: column; gap: 16px; }
.uc-bottom .f16 { opacity: .7; }

/* ---------- why ---------- */
.why { display: flex; flex-direction: column; align-items: center; padding: 0 30px 120px; background: var(--ink); border-radius: 8px; overflow: clip; margin-top: -1px; }
.dots-dark { height: 100%; opacity: .06; }
.why-container { position: relative; width: 100%; max-width: 1280px; display: flex; flex-direction: column; gap: 80px; padding-top: 120px; }
.why-title { width: 700px; max-width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; overflow: clip; }
.why-words { color: var(--c1); font-size: 44px; line-height: 48.4px; text-align: left; }
.why-box { position: relative; display: flex; flex-direction: column; border-radius: 8px; overflow: clip; }
.why-box::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--c11); border-radius: inherit; pointer-events: none; }
.stats { display: flex; overflow: clip; }
.stat { position: relative; flex: 1 0 0; display: flex; flex-direction: column; gap: 20px; padding: 40px; min-height: 212px; }
.stat::after { content: ""; position: absolute; inset: 0; border: 0 solid var(--c11); pointer-events: none; }
.stat:nth-child(1)::after { border-right-width: 1px; border-bottom-width: 1px; }
.stat:nth-child(2)::after { border-right-width: 1px; border-bottom-width: 1px; }
.stat:nth-child(3)::after { border-bottom-width: 1px; }
.stat-num { font-size: 32px; line-height: 38.4px; color: var(--orange); }
.stat-txt { display: flex; flex-direction: column; gap: 4px; }
.stat-txt .f16m { color: var(--c1); }
.stat-txt .f14 { color: var(--c1); opacity: .6; max-width: 280px; }
.security { display: flex; align-items: center; gap: 10px; padding: 40px; height: 163px; box-shadow: var(--c7) 0 1px 2px 0; overflow: clip; }
.sec-text { width: 451px; flex: none; display: flex; flex-direction: column; gap: 10px; }
.sec-text .f14 { opacity: .6; }
.sec-badges { flex: 1; display: flex; justify-content: flex-end; align-items: center; gap: 16px; }
.sbadge { position: relative; width: 80px; height: 80px; border-radius: 66px; overflow: clip; display: flex; align-items: center; justify-content: center; background: var(--c50); }
.sbadge::before { content: ""; position: absolute; left: 50%; top: 50%; width: 66px; height: 66px; margin: -33px 0 0 -33px; background: url(assets/icons/badge-circle.svg) center / 100% 100% no-repeat; }
.sbadge span { position: relative; font-size: 16px; line-height: 26px; font-weight: 500; color: var(--c1); font-feature-settings: var(--feat); }

/* ---------- customer stories ---------- */
.stories { display: flex; justify-content: center; padding: 120px 16px 100px; }
.stories-container { width: 100%; max-width: 1280px; display: flex; flex-direction: column; gap: 60px; }
.stories-title { width: 850px; max-width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; overflow: clip; }
.slider { position: relative; width: 100%; height: 408px; }
.slider-view { position: absolute; inset: 0; overflow: hidden; }
.slider-track { display: flex; gap: 8px; height: 100%; align-items: center; will-change: transform; }
.story { --cw: 421.33px; position: relative; width: var(--cw); height: 408px; flex: none; display: flex; flex-direction: column; justify-content: space-between; padding: 24px; background: var(--sand); border-radius: 12px; overflow: clip; }
.story-bg { position: absolute; left: -10px; right: -10px; top: -10px; bottom: -10px; opacity: 0; transition: opacity .35s ease; }
.story-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-bg::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--c16); }
.story-bg::after { content: ""; position: absolute; left: -55px; right: -55px; top: 198px; height: 230px; z-index: 1; background-image: linear-gradient(var(--c17) 0%, var(--c3) 100%); filter: blur(17px); }
.story-logo { position: relative; width: 119px; height: 34px; background: var(--ink); opacity: .7; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; transition: background-color .35s ease; }
.story-body { position: relative; height: 74px; transition: height .45s var(--ease-out); }
.story-stat { position: absolute; left: 0; right: 0; top: 0; transition: transform .45s var(--ease-out), opacity .45s var(--ease-out); }
.story-num { font-family: var(--f1); font-weight: 500; font-size: 38px; line-height: 48px; letter-spacing: -.76px; font-feature-settings: "tnum", "zero"; color: var(--ink); }
.story-quote { position: absolute; left: 0; right: 0; top: 154px; display: flex; flex-direction: column; gap: 16px; color: var(--c1); opacity: 0; transition: transform .45s var(--ease-out), opacity .45s var(--ease-out); }
.story-quote .who { display: flex; flex-direction: column; }
.story:hover .story-bg { opacity: 1; }
.story:hover .story-logo { background-color: var(--c1); }
.story:hover .story-body { height: 120px; }
.story:hover .story-stat { transform: translateY(200px); opacity: 0; }
.story:hover .story-quote { transform: translateY(-200px); opacity: 1; }
.slider-arrows { position: absolute; right: 0; top: -90px; display: flex; gap: 8px; }
.arrow { width: 32px; height: 32px; border-radius: 40px; background: var(--ink); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.arrow img { width: 100%; height: 100%; }

/* ---------- steps ---------- */
.steps { display: flex; justify-content: center; padding: 100px 16px; }
.steps-container { width: 100%; max-width: 1280px; display: flex; flex-direction: column; align-items: center; gap: 60px; }
.steps-title { width: 600px; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; overflow: clip; }
.steps-text { width: 100%; display: flex; flex-direction: column; gap: 24px; align-items: center; text-align: center; }
.steps-text .f16 { opacity: .7; }
.scards { width: 100%; display: flex; gap: 16px; }
.scard { position: relative; flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 8px; background: var(--bg); border-radius: 12px; box-shadow: var(--c8) 0 2px 4px 0; overflow: clip; }
.scard::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--card-line); border-radius: inherit; pointer-events: none; }
.sill { position: relative; height: 346px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px; border-radius: 8px; overflow: clip; }
.sill-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.stext { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.stitle { display: flex; align-items: center; gap: 8px; }
.snum { width: 32px; height: 26px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 6px; background-image: var(--grad); color: var(--c1); font-size: 16px; line-height: 26px; font-weight: 500; font-feature-settings: var(--feat); }
.sdesc { max-width: 318px; }
.w-agent { position: relative; width: 241px; display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--c1); border-radius: 8px; box-shadow: var(--c2) 0 4px 16px 0; }
.w-agent::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--c51); border-radius: inherit; pointer-events: none; }
.w-agent-field { display: flex; flex-direction: column; gap: 8px; }
.w-input { position: relative; height: 34px; display: flex; align-items: center; padding: 14px 8px; border-radius: 4px; }
.w-input::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--c24); border-radius: inherit; }
.w-ok { height: 31px; display: flex; align-items: center; justify-content: center; padding: 8px; background: var(--ink); border-radius: 4px; }
.w-pass { position: relative; width: 279px; display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--c1); border-radius: 8px; box-shadow: var(--c2) 0 4px 16px 0; overflow: clip; }
.w-pass::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--w-line); border-radius: inherit; pointer-events: none; }
.w-pass-body { display: flex; flex-direction: column; gap: 8px; }
.w-pass-body .f12 { font-family: var(--f4); line-height: normal; color: var(--c3); }
.w-bar { height: 4px; border-radius: 999px; background: var(--sand); overflow: hidden; }
.f12b, .f13m, .process .f13, .nw { white-space: pre; }
.w-bar i { display: block; width: 0%; transition: width 1s var(--ease-out); height: 100%; border-radius: 999px; background: var(--orange); }
.w-chat { position: relative; width: 312px; display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--c1); border-radius: 8px; box-shadow: var(--c2) 0 4px 16px 0; }
.w-chat::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--w-line); border-radius: inherit; pointer-events: none; }
.w-chat-row { display: flex; gap: 8px; align-items: flex-start; }
.w-chat-row > img { flex: none; }
.avatar { border-radius: 50%; object-fit: cover; }
.bubble { display: flex; flex-direction: column; justify-content: center; padding: 8px; min-height: 50px; background: var(--c12); border-radius: 8px; }
.w-chat-btn { display: flex; justify-content: flex-end; }
.process { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 10px 14px; background-image: var(--grad); border-radius: 8px; }

/* ---------- integrations ---------- */
.integrations { display: flex; justify-content: center; padding: 100px 16px; }
.int-container { width: 100%; max-width: 1280px; display: flex; flex-direction: column; align-items: center; gap: 60px; }
.int-title { width: 680px; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; overflow: clip; }
.int-box { position: relative; width: 100%; display: flex; flex-direction: column; gap: 24px; padding: 60px 0; background: var(--sand); border-radius: 8px; overflow: clip; }
.js .int-box { opacity: 0; }
.int-box.in { opacity: 1; transition: opacity 1.6s ease; }
.int-row { height: 72px; display: flex; justify-content: center; }
.int-row .marquee { width: 100%; }
.int-tile { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; background: var(--c1); border-radius: 8px; box-shadow: var(--c52) 0 1px 2px 0; overflow: clip; }
.int-tile img { width: 36px; object-fit: cover; }
.int-fade { position: absolute; top: 0; bottom: 0; width: 140px; z-index: 1; pointer-events: none; overflow: clip; }
.int-fade-l { left: 0; background-image: linear-gradient(90deg, var(--c10) 35%, var(--c26) 100%); }
.int-fade-r { right: 0; background-image: linear-gradient(270deg, var(--c10) 35%, var(--c26) 100%); }

/* ---------- FAQ ---------- */
.faq { display: flex; justify-content: center; padding: 100px 16px 120px; overflow: hidden; }
.faq-container { width: 100%; max-width: 1280px; display: flex; gap: 60px; border-radius: 16px; overflow: hidden; }
.faq-title { width: 394px; flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.faq-list { position: relative; flex: 1 0 0; min-width: 0; align-self: flex-start; display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; }
.faq-list::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--card-line); border-radius: inherit; pointer-events: none; }
.faq-item { position: relative; background: var(--bg); transition: background-color .25s ease; }
.faq-item:not(:last-child)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1px solid var(--card-line); }
.faq-item:not(.open):hover { background: var(--sand); }
.faq-q { width: 100%; display: flex; align-items: center; gap: 24px; padding: 24px; text-align: left; cursor: pointer; }
.faq-q .f18m { flex: 1; }
.faq-ico { position: relative; width: 16px; height: 16px; flex: none; }
.faq-ico i { position: absolute; left: -2px; top: 7px; width: 20px; height: 2px; border-radius: 10px; background: var(--ink); transition: transform .4s var(--ease-out); }
.faq-ico i + i { transform: rotate(90deg); }
.faq-item.open .faq-ico i + i { transform: rotate(0deg); }
.faq-a { overflow: hidden; height: 0; transition: height .45s var(--ease-out); }
.faq-a-in { display: flex; flex-direction: column; padding: 0 24px 24px; }
.faq-a p { white-space: pre-line; }

/* ---------- CTA + footer ---------- */
.cta { display: flex; justify-content: center; background: var(--ink); border-radius: 8px; }
.cta { flex-direction: column; align-items: center; padding: 150px 30px 50px; border-radius: 12px; }
.cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.cta-container { position: relative; width: 100%; max-width: 1280px; display: flex; flex-direction: column; align-items: center; gap: 160px; }
.cta-title { width: 600px; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 32px; }
.cta-head { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.cta-btns { display: flex; gap: 8px; justify-content: center; }
.footer { width: 100%; display: flex; justify-content: space-between; padding: 60px; background: var(--c53); border-radius: 16px; }
.foot-left { width: 320px; display: flex; flex-direction: column; justify-content: space-between; }
.foot-info { display: flex; flex-direction: column; gap: 16px; }
.foot-info .f14:first-of-type { opacity: .7; }
.foot-info .o6 { opacity: .5; }
.socials { display: flex; gap: 24px; align-items: center; }
.socials a { display: flex; width: 20px; height: 20px; }
.mask-ico { width: 20px; height: 20px; background: var(--c1); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; transition: transform .35s var(--spring); }
.ico-x { transition: transform .35s var(--spring); }
.socials a:hover .mask-ico, .socials a:hover .ico-x, .socials a:focus-visible .mask-ico { transform: scale(1.1); }
.foot-logo { gap: 12.6px; }
.foot-logo img { width: 36px; height: 36px; }
.foot-logo span { font-family: var(--f1); font-size: 21px; line-height: 28px; font-weight: 500; color: var(--c1); }
.foot-cols { width: 520px; display: flex; justify-content: space-between; }
.foot-col { display: flex; flex-direction: column; gap: 12px; }
.foot-col .f16m { color: var(--c1); }
.foot-links { display: flex; flex-direction: column; gap: 12px; }
.foot-links a { display: flex; height: 26px; align-items: center; color: var(--c1); opacity: .5; font-size: 16px; line-height: 26px; font-feature-settings: var(--feat); transition: opacity .3s; white-space: nowrap; }
.foot-links a:hover, .foot-links a:focus-visible { opacity: 1; }

/* ======================= TABLET ======================= */
@media (min-width: 810px) and (max-width: 1199.98px) {
  .nav { padding: 16px; }
  .nav-bar, .nav-bar[data-state] { width: 100%; background: var(--c18); box-shadow: var(--c5) -1px -1px 0 0 inset, var(--c6) 1px 1px 0 0 inset, var(--c19) 0 10px 16px 0; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
  .nav-bar .logo-mark { width: 34px; height: 34px; }
  .nav-bar .logo-text { display: none; }
  .nav-links { top: 14px; }
  .nav-bar .nav-btn { width: 100px; height: 34px; background: var(--c1); color: var(--ink); box-shadow: var(--c7) 0 1px 2px 0; }

  .hero { padding: 160px 30px; }
  .hero-stars { top: -190px; }
  .stars-clip { width: 100%; }
  .hero-video { top: -590px; }
  .h1 { font-size: 48px; line-height: 56px; }
  .hero-sub { max-width: 590px; }
  .ai-form { height: 150px; }

  .trust { padding: 60px 0; }
  .trust-row { height: 48px; }
  .trust .marquee-track { gap: 40px; }

  .problem { padding: 50px 0; }
  .problem-words { font-size: 48px; line-height: 52.8px; }

  .features { padding: 50px 0; }
  .fcard-s, .fcard-l { width: auto; flex: 1 0 0; }
  .wf { width: 296px; }
  .route-wrap { width: 316px; height: 149px; display: flex; align-items: flex-start; justify-content: center; }
  .route { transform: scale(.7); transform-origin: 50% 0; }
  .email { width: 373px; height: 250px; }
  .dash { width: 421px; }

  .product { padding: 50px 16px 100px; }
  .product-container { max-width: 810px; gap: 40px; }
  .pcard-wrap { position: relative; top: auto !important; }
  .pcard { height: 356px; gap: 20px; transform: none !important; }
  .ptext, .pcard.flip .ptext { max-width: none; padding: 14px 14px 0; gap: 40px; justify-content: center; align-self: center; }
  .ptitle { font-size: 26px; line-height: 31.2px; }
  .pimg { width: 373px; height: 340px; }

  .usecases { padding: 80px 16px 120px; }
  .uc { width: 810px; flex-direction: column; gap: 48px; align-items: flex-start; }
  .uc-media { width: 810px; height: 706px; }
  .uc-pill { left: 20px; right: 20px; bottom: 20px; height: 40px; padding: 4px 4px 4px 10px; }
  .uc-pill-txt { font-size: 10px; line-height: 12px; }
  .uc-side { width: 503px; padding: 0; gap: 80px; justify-content: center; }
  .uc-tab { font-size: 26px; line-height: 31.2px; }

  .why { padding: 0 30px 160px; }
  .why-words { font-size: 40px; line-height: 44px; }
  .stats { display: grid; grid-template-columns: 474px 474px; }
  .stat { min-height: 205px; }
  .stat:nth-child(3) { grid-column: 1 / span 2; }
  .stat:nth-child(2)::after { border-right-width: 0; }
  .stat-num { font-size: 26px; line-height: 31.2px; }
  .sec-text { width: 429px; }

  .stories { padding: 60px 30px; }
  .stories-container { max-width: 810px; gap: 40px; }
  .stories-title { width: 430px; }
  .story { --cw: 401px; }

  .steps { padding: 50px 30px; }
  .steps-container { max-width: 810px; gap: 40px; }
  .steps-title { width: 460px; }
  /* source bug reproduced: cards collapse to 16px columns in a 397px grid */
  .scards { display: grid; grid-template-columns: 397px 397px; grid-auto-rows: minmax(0, 1fr); gap: 16px; align-items: start; }
  .scard { width: 16px; flex: none; }
  .scard * { overflow-wrap: anywhere; word-break: break-word; }
  .w-pass-body .f12, .w-pass-body .f12 * { overflow-wrap: normal; word-break: normal; }
  .sill { height: auto; width: 20px; padding: 10px; }
  .w-agent, .w-pass, .w-chat { width: auto; min-width: 0; max-width: 100%; }
  .w-agent > *, .w-pass > *, .w-chat > *, .w-chat-row > *, .bubble, .process { min-width: 0; }

  .integrations { padding: 80px 30px 50px; }
  .int-container { max-width: 810px; gap: 40px; }
  .int-title { width: 430px; }
  .int-box { padding: 80px 0; }

  .faq { padding: 50px 30px 100px; }
  .faq-container { max-width: 810px; flex-direction: column; gap: 40px; }
  .faq-title { width: 100%; }
  .faq-list { width: 100%; flex: none; }

  .cta { padding: 150px 30px 40px; }
  .footer { flex-direction: column; gap: 48px; padding: 30px; }
  .foot-left { width: 100%; flex-direction: column-reverse; justify-content: flex-start; gap: 40px; }
  .foot-info { width: 320px; }
  .foot-cols { width: 100%; }
}

/* ======================= PHONE ======================= */
@media (max-width: 809.98px) {
  .nav { padding: 12px; }
  .nav-bar, .nav-bar[data-state] { width: 100%; height: 64px; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 32px; padding: 10px 10px 10px 18px; background: var(--ink); box-shadow: var(--c5) -1px -1px 0 0 inset, var(--c6) 1px 1px 0 0 inset; backdrop-filter: none; -webkit-backdrop-filter: none; transition: height var(--spring-dur) var(--spring), padding var(--spring-dur) var(--spring); }
  .nav-bar .logo-mark { width: 32px; height: 32px; }
  .nav-bar .logo-text { opacity: 1; width: 106px; }
  .nav-top { height: 44px; justify-content: space-between; flex: none; }
  .burger { display: block; position: relative; width: 44px; height: 44px; overflow: hidden; }
  .burger i { position: absolute; left: 12px; width: 20px; height: 2px; border-radius: 10px; background: var(--c54); transition: transform var(--spring-dur) var(--spring), top var(--spring-dur) var(--spring), background-color .3s; }
  .burger .b1 { top: 15.5px; }
  .burger .b2 { top: 26.5px; }
  .nav-links { position: static; transform: none; flex-direction: column; align-items: flex-start; gap: 12px; }
  .nav-link { font-size: 14px; }
  .nav-cta, .nav-cta .nav-btn { width: 100%; }
  .nav-bar.open { height: 316px; padding: 12px 12px 20px 20px; }
  .nav-bar.open .burger i { background: var(--c1); top: 21px; }
  .nav-bar.open .burger .b1 { transform: rotate(45deg); }
  .nav-bar.open .burger .b2 { transform: rotate(-45deg); }

  .hero { padding: 150px 16px; }
  .hero-stars { top: -126px; }
  .stars-clip { width: 100%; }
  .hero-video { top: -526px; }
  .h1 { font-size: 40px; line-height: 48px; }
  .ai-form { height: 150px; }

  .trust { padding: 60px 0 30px; }
  .trust-row { height: 26px; }
  .trust .marquee-track { gap: 32px; }
  .trust-fade { width: 67px; }

  .problem { padding: 30px 0; }
  .problem-inner { padding: 140px 12px; }
  .dots-light { height: 844px; }
  .problem-container { gap: 50px; }
  .problem-words { font-size: 30px; line-height: 33px; }
  .problem-list { width: 100%; }
  .prow { height: auto; flex-direction: column; align-items: stretch; padding: 28px 0; }
  .prow-head { max-width: none; flex: none; }
  .prow-desc { width: 100%; }

  .features { padding: 50px 0; }
  .features-container { padding: 0 12px; }
  .h2 { font-size: 36px; line-height: 43.2px; }
  .frow { flex-direction: column; }
  .fcard-s, .fcard-l { width: 100%; flex: none; }
  .ftext { padding: 16px; min-height: 0; }
  .ftext .h4 { font-size: 20px; line-height: 24px; }
  .wf { width: 207px; }
  .wf-arrow { width: 14px; height: 14px; }
  .route-wrap { width: 316px; height: 149px; display: flex; align-items: flex-start; justify-content: center; }
  .route { transform: scale(.7); transform-origin: 50% 0; }
  .email { width: 267px; height: 238px; }
  .reply { left: -128px; }
  .dash { width: 294px; }

  .product { padding: 30px 12px; }
  .product-container { gap: 40px; }
  .product-head { gap: 20px; }
  .pstack { gap: 32px; }
  .pcard-wrap { position: relative; top: auto !important; }
  .pcard, .pcard.flip { height: auto; flex-direction: column; gap: 40px; transform: none !important; }
  .ptext, .pcard.flip .ptext { max-width: none; padding: 6px; gap: 36px; }
  .ptitle { font-size: 24px; line-height: 28.8px; }
  .ptop { gap: 24px; }
  .plist .f18m { font-size: 16px; line-height: 26px; }
  .pimg { width: 100%; height: 285px; }

  .usecases { padding: 64px 12px; }
  .uc { flex-direction: column; gap: 48px; }
  .uc-media { width: 100%; height: 305px; }
  .uc-pill { left: 20px; right: 20px; bottom: 20px; height: 40px; padding: 4px 4px 4px 10px; }
  .uc-pill-txt { font-size: 10px; line-height: 12px; }
  .uc-side { width: 100%; padding: 0; gap: 80px; justify-content: center; }
  .uc-tab { font-size: 24px; line-height: 28.8px; }

  .why { padding: 0 16px 60px; }
  .why-container { padding-top: 60px; }
  .why-words { font-size: 32px; line-height: 35.2px; }
  .stats { flex-direction: column; }
  .stat { min-height: 203px; }
  .stat:nth-child(n)::after { border-right-width: 0; border-bottom-width: 1px; }
  .stat-num { font-size: 24px; line-height: 28.8px; }
  .security { flex-direction: column; align-items: stretch; height: auto; gap: 24px; padding: 16px; }
  .sec-text { width: 100%; }
  .sec-text .h4 { font-size: 20px; line-height: 24px; }
  .sec-badges { justify-content: flex-start; }

  .stories { padding: 64px 12px 140px; }
  .stories-container { gap: 40px; }
  .slider { height: 350px; }
  .story { --cw: 350px; height: 350px; }
  .story-quote { top: 128px; }
  .slider-arrows { top: 388px; left: 0; right: 0; justify-content: center; gap: 10px; }
  .arrow { width: 42px; height: 42px; }

  .steps { padding: 64px 12px 30px; }
  .steps-container { gap: 40px; }
  .scards { flex-direction: column; }
  .scard { flex: none; }
  .sill { height: 289px; }
  .stext .h4 { font-size: 20px; line-height: 24px; }

  .integrations { padding: 30px 12px; }
  .int-container { gap: 40px; }
  .int-box { padding: 42px 0; }
  .int-row { height: 52px; }
  .int-row .marquee-track { gap: 30px; }
  .int-tile { width: 52px; height: 52px; }
  .int-tile img { width: 26px; }
  .int-fade { width: 60px; }

  .faq { padding: 30px 12px; }
  .faq-container { flex-direction: column; gap: 40px; }
  .faq-title { width: 100%; }
  .h3 { font-size: 34px; line-height: 40.8px; }
  .faq-list { width: 100%; flex: none; }
  .faq-q .f18m { font-size: 16px; line-height: 26px; }

  .cta { padding: 60px 20px 20px; }
  .cta-container { gap: 40px; }
  .footer { flex-direction: column; gap: 40px; padding: 20px; }
  .foot-left { width: 100%; flex-direction: column-reverse; justify-content: flex-start; gap: 40px; }
  .foot-cols { width: 100%; flex-wrap: wrap; justify-content: flex-start; gap: 30px 60px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; transition-delay: 0s !important; }
}