:root {
  --ink: #111426;
  --ink-2: #262a42;
  --muted: #6f7487;
  --line: #e7e8ef;
  --soft: #f6f6fa;
  --white: #ffffff;
  --violet: #6c56ef;
  --violet-dark: #5640d8;
  --violet-soft: #eeebff;
  --orange: #ff8b5d;
  --green: #28bd84;
  --blue: #5a8dee;
  --shadow: 0 24px 80px rgba(28, 30, 57, .10);
}

[hidden], .svg-sprite { display: none!important; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.eyebrow svg, .hero-trust svg { width: 16px; height: 16px; }
.feature-card a svg { width: 15px; height: 15px; }
.site-header .button svg { width: 17px; height: 17px; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
main { overflow: hidden; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 50; display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 18px; width: min(1240px, calc(100% - 36px)); min-height: 70px; margin: 16px auto 0; padding: 10px 12px 10px 19px; border: 1px solid rgba(229, 230, 238, .85); border-radius: 18px; background: rgba(255, 255, 255, .88); box-shadow: 0 12px 40px rgba(26, 28, 47, .07); backdrop-filter: blur(20px); }
.brand { display: inline-flex; align-items: center; gap: 11px; width: max-content; color: var(--ink); text-decoration: none; font-size: 17px; font-weight: 850; letter-spacing: -.4px; }
.brand em { margin-left: 3px; color: var(--violet); font-style: normal; }
.brand-mark, .mini-logo { position: relative; display: grid; grid-template-columns: repeat(3, 7px); align-items: end; gap: 3px; width: 35px; height: 35px; padding: 7px; border-radius: 10px; background: var(--ink); }
.brand-mark i, .mini-logo i { display: block; border-radius: 3px 3px 1px 1px; background: #fff; }
.brand-mark i:nth-child(1), .mini-logo i:nth-child(1) { height: 10px; opacity: .65; }
.brand-mark i:nth-child(2), .mini-logo i:nth-child(2) { height: 18px; }
.brand-mark i:nth-child(3), .mini-logo i:nth-child(3) { height: 14px; opacity: .82; }
.site-header nav { display: flex; gap: 30px; }
.site-header nav a { color: #575c70; text-decoration: none; font-size: 13px; font-weight: 700; transition: color .2s ease; }
.site-header nav a:hover { color: var(--violet); }
.language-switcher { display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: #f6f6fa; }
.language-switcher button { min-width: 30px; min-height: 30px; padding: 0 6px; border: 0; border-radius: 7px; background: transparent; color: #7b7e8d; font-size: 9px; font-weight: 900; cursor: pointer; transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.language-switcher button:hover { color: var(--violet); }
.language-switcher button.is-active { background: #fff; color: var(--violet); box-shadow: 0 3px 10px rgba(35, 32, 72, .10); }
.header-cta { justify-self: end; }
.menu-button { display: none; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 13px 21px; border: 1px solid transparent; border-radius: 13px; text-decoration: none; font-size: 13px; font-weight: 800; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--violet); color: #fff; box-shadow: 0 15px 35px rgba(108, 86, 239, .25); }
.button-primary:hover { background: var(--violet-dark); box-shadow: 0 18px 42px rgba(108, 86, 239, .32); }
.button-dark { background: var(--ink); color: #fff; }
.button-ghost { border-color: var(--line); background: #fff; color: var(--ink); }
.button-ghost:hover { border-color: #cfd1dc; background: #fafaff; }
.button-small { min-height: 44px; padding: 10px 16px; border-radius: 11px; font-size: 12px; }
.button-white { background: #fff; color: var(--violet-dark); box-shadow: 0 15px 45px rgba(19, 14, 54, .25); }

.hero { position: relative; display: grid; grid-template-columns: .86fr 1.14fr; align-items: center; gap: clamp(30px, 5vw, 80px); min-height: 830px; padding: 155px max(34px, calc((100vw - 1240px) / 2)) 90px; background: linear-gradient(180deg, #fbfaff 0%, #fff 85%); }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(3px); pointer-events: none; }
.hero-glow-one { width: 530px; height: 530px; right: 2%; top: 9%; background: radial-gradient(circle, rgba(108, 86, 239, .13), transparent 68%); }
.hero-glow-two { width: 390px; height: 390px; left: -8%; top: 18%; background: radial-gradient(circle, rgba(255, 139, 93, .10), transparent 68%); }
.hero-copy { position: relative; z-index: 2; max-width: 560px; }
.eyebrow { display: inline-flex; align-items: center; gap: 7px; color: var(--violet); font-size: 10px; font-weight: 900; letter-spacing: 1.45px; text-transform: uppercase; }
.hero .eyebrow { margin-bottom: 21px; padding: 7px 10px; border: 1px solid #ded9ff; border-radius: 999px; background: #f5f3ff; }
.hero h1 { margin: 0; font-size: clamp(48px, 5.5vw, 79px); line-height: .99; letter-spacing: -4.6px; font-weight: 800; }
.hero h1 span { color: var(--violet); }
.hero-copy > p { max-width: 540px; margin: 25px 0 28px; color: var(--muted); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.7; }
.hero-actions { display: flex; gap: 11px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 24px; color: #6c7081; font-size: 10px; font-weight: 700; }
.hero-trust span { display: inline-flex; align-items: center; gap: 5px; }
.hero-trust svg { color: var(--green); }

.product-stage { position: relative; z-index: 2; width: min(730px, 100%); perspective: 1400px; }
.app-window { display: grid; grid-template-columns: 94px 1fr; min-height: 520px; overflow: hidden; border: 1px solid rgba(217, 217, 230, .85); border-radius: 25px; background: #fff; box-shadow: 0 55px 120px rgba(32, 29, 70, .18), 0 10px 30px rgba(29, 25, 69, .07); transform: rotateY(-4deg) rotateX(1deg); transform-origin: center; }
.app-sidebar { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 10px; background: #15182a; color: rgba(255, 255, 255, .5); }
.mini-logo { grid-template-columns: repeat(3, 6px); width: 35px; height: 35px; margin-bottom: 22px; padding: 8px; background: var(--violet); }
.side-link { display: grid; place-items: center; gap: 4px; width: 73px; min-height: 54px; padding: 7px 4px; border-radius: 11px; font-size: 8px; }
.side-link b { font-weight: 650; }
.side-link.active { background: var(--violet); color: #fff; }
.sidebar-avatar { display: grid; place-items: center; width: 34px; height: 34px; margin-top: auto; border: 2px solid rgba(255, 255, 255, .2); border-radius: 10px; background: #fff; color: var(--ink); font-size: 9px; font-weight: 900; }
.app-content { min-width: 0; padding: 22px; background: #f7f7fb; }
.app-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.app-top small, .app-top strong { display: block; }
.app-top small { margin-bottom: 3px; color: #9b9dac; font-size: 7px; font-weight: 900; letter-spacing: .8px; }
.app-top strong { font-size: 15px; }
.app-top button, .control-window button { padding: 9px 12px; border: 0; border-radius: 9px; background: var(--violet); color: #fff; font-size: 9px; font-weight: 800; }
.metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.metric-row article { display: grid; grid-template-columns: 1fr auto; align-items: end; min-width: 0; padding: 13px; border: 1px solid #ebebf1; border-radius: 12px; background: #fff; }
.metric-row span { grid-column: 1 / -1; color: #8c8f9e; font-size: 8px; }
.metric-row strong { margin-top: 6px; font-size: 22px; }
.metric-row small { color: #a0a2ae; font-size: 7px; }
.metric-row small.up { color: var(--green); }
.board-head { display: flex; justify-content: space-between; margin: 20px 0 10px; }
.board-head strong { font-size: 11px; }
.board-head span { color: #9698a6; font-size: 8px; }
.mini-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.board-column { min-width: 0; padding: 10px; border-radius: 12px; background: #eff0f5; }
.board-column > b { display: flex; justify-content: space-between; margin-bottom: 8px; color: #858795; font-size: 7px; letter-spacing: .4px; }
.board-column > b i { display: grid; place-items: center; width: 14px; height: 14px; border-radius: 5px; background: #fff; color: var(--ink); font-style: normal; }
.board-column article { display: grid; gap: 8px; margin-bottom: 7px; padding: 10px; border: 1px solid #e7e7ee; border-radius: 9px; background: #fff; box-shadow: 0 7px 17px rgba(28, 30, 55, .05); }
.board-column article.lifted { animation: cardFloat 4s ease-in-out infinite; }
.board-column article strong { min-height: 29px; font-size: 8px; line-height: 1.45; }
.board-column article > div { display: flex; justify-content: space-between; align-items: center; }
.board-column article small { color: #9799a8; font-size: 6px; }
.tag { justify-self: start; padding: 4px 6px; border-radius: 99px; font-size: 5.5px; font-weight: 900; }
.tag.purple { background: #eeeaff; color: var(--violet); }.tag.blue { background: #e8f0ff; color: var(--blue); }.tag.orange { background: #fff0e8; color: #e97848; }.tag.green { background: #e6f8f1; color: #169b69; }
.avatar { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; color: #fff; font-size: 6px; font-style: normal; font-weight: 900; }.avatar.violet { background: var(--violet); }.avatar.blue { background: var(--blue); }.avatar.orange { background: var(--orange); }.avatar.green { background: var(--green); }
.floating-pill { position: absolute; z-index: 4; display: flex; align-items: center; gap: 7px; padding: 10px 13px; border: 1px solid rgba(226, 226, 236, .95); border-radius: 11px; background: rgba(255, 255, 255, .95); box-shadow: 0 15px 40px rgba(32, 30, 60, .13); font-size: 9px; font-weight: 800; backdrop-filter: blur(12px); animation: pillFloat 5s ease-in-out infinite; }
.pill-one { top: 20%; left: -38px; }.pill-two { right: -21px; bottom: 11%; animation-delay: -2.2s; }
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(40, 189, 132, .12); }

.trust-strip { display: flex; justify-content: center; align-items: center; gap: clamp(15px, 3vw, 42px); min-height: 88px; padding: 20px 30px; border-block: 1px solid #eeeeF3; color: #a4a5b0; font-size: 9px; font-weight: 900; letter-spacing: 1.35px; white-space: nowrap; }
.trust-strip i { width: 4px; height: 4px; border-radius: 50%; background: #d4d4dc; }
.section { width: min(1180px, calc(100% - 42px)); margin: 0 auto; padding: 110px 0; }
.section-heading { max-width: 760px; }
.section-heading h2, .workflow-copy h2, .control-copy h2 { margin: 13px 0 18px; font-size: clamp(34px, 4.4vw, 58px); line-height: 1.07; letter-spacing: -2.4px; }
.section-heading p, .workflow-copy > p, .control-copy > p { max-width: 650px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 50px; }
.feature-card { position: relative; min-height: 265px; padding: 28px; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: #fff; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.feature-card:hover { z-index: 2; border-color: #d9d5f8; box-shadow: var(--shadow); transform: translateY(-6px); }
.feature-card:after { content: ""; position: absolute; width: 150px; height: 150px; right: -60px; top: -60px; border-radius: 50%; background: radial-gradient(circle, var(--card-accent, rgba(108, 86, 239, .12)), transparent 70%); }
.feature-icon { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 13px; background: var(--violet-soft); color: var(--violet); }
.card-2 .feature-icon, .card-5 .feature-icon { background: #fff0e9; color: var(--orange); }.card-3 .feature-icon, .card-6 .feature-icon { background: #e9f9f3; color: var(--green); }
.feature-card h3 { margin: 24px 0 10px; font-size: 18px; }
.feature-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.feature-card a { position: absolute; left: 28px; bottom: 25px; display: inline-flex; align-items: center; gap: 7px; color: var(--violet); text-decoration: none; font-size: 11px; font-weight: 850; }

.workflow-section { display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: 80px; width: auto; max-width: none; padding-inline: max(34px, calc((100vw - 1180px) / 2)); background: #f7f7fb; }
.workflow-copy h2 { font-size: clamp(36px, 4vw, 53px); }
.workflow-copy .button { margin-top: 28px; }
.role-stack { position: relative; display: grid; gap: 12px; }
.role-stack:before { content: ""; position: absolute; left: 30px; top: 14%; bottom: 14%; width: 1px; border-left: 1px dashed #cac7e7; }
.role-stack article { position: relative; display: grid; grid-template-columns: 30px 48px 1fr auto; align-items: center; gap: 16px; min-height: 120px; padding: 20px 24px; border: 1px solid #e5e5ee; border-radius: 18px; background: #fff; box-shadow: 0 14px 38px rgba(29, 31, 54, .05); transition: transform .2s ease, border-color .2s ease; }
.role-stack article:hover { border-color: #d3cef8; transform: translateX(6px); }
.role-number { color: #aaa8b6; font-size: 9px; font-weight: 900; }
.role-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; }.role-icon.violet { background: var(--violet-soft); color: var(--violet); }.role-icon.orange { background: #fff0e9; color: var(--orange); }.role-icon.green { background: #e8f9f3; color: var(--green); }
.role-stack small { color: #9a9ba8; font-size: 7px; font-weight: 900; letter-spacing: .8px; }.role-stack h3 { margin: 4px 0; font-size: 17px; }.role-stack p { margin: 0; color: var(--muted); font-size: 11px; }.role-stack article > svg { color: #b8b8c4; }

.control-section { display: grid; grid-template-columns: 1fr .9fr; align-items: center; gap: 105px; }
.control-visual { position: relative; padding: 55px; border-radius: 28px; background: linear-gradient(145deg, #ece9ff, #f8f7ff); }
.control-window { padding: 21px; border: 1px solid #e2e1eb; border-radius: 18px; background: #fff; box-shadow: 0 35px 80px rgba(63, 50, 133, .16); transform: rotate(-2.4deg); }
.control-top, .control-user, .permission { display: flex; align-items: center; justify-content: space-between; }
.control-top { padding-bottom: 14px; border-bottom: 1px solid #eeeef3; }.control-top span { display: flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 800; }.control-top span i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }.control-top small { padding: 5px 7px; border-radius: 99px; background: var(--violet-soft); color: var(--violet); font-size: 6px; font-weight: 900; }
.control-user { justify-content: flex-start; gap: 10px; padding: 17px 0; }.big-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--violet); color: #fff; font-size: 9px; font-weight: 900; }.control-user div { flex: 1; }.control-user strong, .control-user small { display: block; }.control-user strong { font-size: 10px; }.control-user small { margin-top: 2px; color: #9a9ba6; font-size: 7px; }.control-user em { padding: 5px 8px; border-radius: 99px; background: #e8f9f2; color: #1a9e6e; font-size: 6px; font-style: normal; font-weight: 900; }
.control-label { margin: 6px 0 8px; color: #9b9ca8; font-size: 6.5px; font-weight: 900; letter-spacing: .7px; }
.permission { min-height: 40px; padding: 8px 0; border-top: 1px solid #f0f0f4; }.permission span { display: flex; align-items: center; gap: 8px; font-size: 9px; font-weight: 700; }.permission svg { color: var(--violet); }.toggle { position: relative; display: block; width: 29px; height: 17px; border-radius: 99px; background: var(--violet); }.toggle:after { content: ""; position: absolute; right: 3px; top: 3px; width: 11px; height: 11px; border-radius: 50%; background: #fff; }.toggle.off { background: #d8d8e1; }.toggle.off:after { right: auto; left: 3px; }
.control-window button { width: 100%; margin-top: 13px; }
.security-chip { position: absolute; right: 17px; bottom: 21px; display: flex; align-items: center; gap: 8px; padding: 11px 13px; border-radius: 11px; background: var(--ink); color: #fff; box-shadow: 0 15px 40px rgba(17, 20, 38, .22); font-size: 8px; font-weight: 800; animation: pillFloat 5s ease-in-out infinite; }
.control-copy ul { display: grid; gap: 12px; margin: 29px 0 0; padding: 0; list-style: none; }.control-copy li { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 750; }.control-copy li svg { padding: 3px; border-radius: 50%; background: #e8f9f2; color: var(--green); }

.pricing-section { padding-top: 125px; }
.section-heading.centered { margin: 0 auto; text-align: center; }.section-heading.centered p { margin-inline: auto; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: 14px; margin-top: 50px; }
.price-card { position: relative; display: flex; flex-direction: column; min-height: 465px; padding: 31px; border: 1px solid var(--line); border-radius: 22px; background: #fff; }
.price-card.featured { border: 2px solid var(--violet); box-shadow: 0 28px 80px rgba(84, 67, 190, .14); transform: translateY(-10px); }
.popular { position: absolute; right: 18px; top: 18px; padding: 6px 8px; border-radius: 99px; background: var(--violet); color: #fff; font-size: 6px; font-weight: 900; letter-spacing: .6px; }
.price-card h3 { margin: 0 0 7px; font-size: 21px; }.price-card > p { margin: 0; color: var(--muted); font-size: 12px; }.price { display: flex; align-items: baseline; gap: 5px; margin: 27px 0; padding-bottom: 23px; border-bottom: 1px solid #eeeeF3; }.price small { color: #9a9ba6; font-size: 9px; }.price strong { font-size: 45px; letter-spacing: -2px; }.price span { color: var(--muted); font-size: 10px; }
.price-card ul { display: grid; gap: 13px; margin: 0 0 28px; padding: 0; list-style: none; }.price-card li { display: flex; align-items: center; gap: 9px; color: #4e5265; font-size: 12px; }.price-card li svg { padding: 3px; border-radius: 50%; background: var(--violet-soft); color: var(--violet); }.price-card .button { width: 100%; margin-top: auto; }
.pricing-note { margin: 24px 0 0; color: #999aa8; text-align: center; font-size: 10px; }

.final-cta { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 35px; width: min(1180px, calc(100% - 42px)); min-height: 330px; margin: 30px auto 90px; padding: 58px 65px; overflow: hidden; border-radius: 30px; background: linear-gradient(135deg, #17172b, #4f3fc4 78%, #745df0); color: #fff; }
.final-cta > div:first-child, .final-cta > button { position: relative; z-index: 2; }.eyebrow.light { color: rgba(255, 255, 255, .66); }.final-cta h2 { margin: 12px 0 13px; font-size: clamp(37px, 4.5vw, 58px); line-height: 1.05; letter-spacing: -2.5px; }.final-cta p { margin: 0; color: rgba(255, 255, 255, .66); font-size: 14px; }
.cta-orbit { position: absolute; border: 1px solid rgba(255, 255, 255, .11); border-radius: 50%; }.orbit-one { width: 420px; height: 420px; right: -170px; top: -140px; }.orbit-two { width: 280px; height: 280px; right: -100px; top: -70px; }
footer { display: grid; grid-template-columns: 1fr 1fr auto; align-items: start; gap: 35px; width: min(1180px, calc(100% - 42px)); margin: 0 auto; padding: 0 0 38px; color: var(--muted); }.footer-brand { align-self: start; }.footer-brand + p { max-width: 390px; margin: 0; font-size: 12px; line-height: 1.65; }.footer-brand ~ div { display: flex; gap: 20px; }.footer-brand ~ div a, footer div button { padding: 0; border: 0; background: none; color: #585b6c; text-decoration: none; font-size: 11px; font-weight: 750; cursor: pointer; } footer > small { grid-column: 1 / -1; padding-top: 25px; border-top: 1px solid var(--line); font-size: 9px; } footer > small a { color: var(--violet); text-decoration: none; font-weight: 800; }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: rgba(9, 10, 22, .72); backdrop-filter: blur(12px); animation: fadeIn .22s ease; }
.demo-modal { position: relative; display: grid; grid-template-columns: .82fr 1.18fr; width: min(980px, 100%); max-height: min(760px, calc(100vh - 48px)); overflow: auto; border-radius: 26px; background: #fff; box-shadow: 0 45px 150px rgba(0, 0, 0, .4); animation: modalIn .3s ease; }
.modal-close { position: absolute; right: 15px; top: 15px; z-index: 3; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #e5e5ec; border-radius: 11px; background: #fff; color: var(--ink); cursor: pointer; }
.modal-side { display: flex; flex-direction: column; justify-content: center; padding: 45px; overflow: hidden; background: linear-gradient(145deg, #18182c, #4738b1); color: #fff; }
.brand-mark.large { grid-template-columns: repeat(3, 9px); width: 47px; height: 47px; margin-bottom: auto; padding: 9px; background: var(--violet); }.modal-side .eyebrow { margin-top: 55px; }.modal-side h2 { margin: 12px 0; font-size: 32px; line-height: 1.1; letter-spacing: -1.4px; }.modal-side > p { margin: 0; color: rgba(255, 255, 255, .65); font-size: 12px; }.modal-side ul { display: grid; gap: 10px; margin: 38px 0 0; padding: 0; list-style: none; }.modal-side li { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .8); font-size: 11px; }.modal-side li svg { color: #83e1bc; }
.modal-form { padding: 48px; }.modal-form > small { color: var(--violet); font-size: 8px; font-weight: 900; letter-spacing: 1px; }.modal-form h2 { margin: 7px 0 6px; font-size: 28px; letter-spacing: -1px; }.modal-form > p { margin: 0 0 24px; color: var(--muted); font-size: 11px; }.modal-form form { display: grid; gap: 14px; }.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }.modal-form label { display: grid; gap: 6px; color: #55596a; font-size: 10px; font-weight: 800; }.modal-form input:not([type="checkbox"]) { width: 100%; min-height: 45px; padding: 11px 12px; border: 1px solid #dfe0e8; border-radius: 10px; outline: none; color: var(--ink); font-size: 12px; }.modal-form input:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(108, 86, 239, .11); }.consent { display: flex!important; grid-template-columns: 16px 1fr; align-items: start; gap: 8px!important; color: #7c7f8e!important; font-weight: 500!important; line-height: 1.4; }.consent input { margin: 1px 0 0; accent-color: var(--violet); }.submit-button { width: 100%; }.submit-button:disabled { opacity: .65; cursor: wait; }.website-field { position: absolute!important; left: -9999px!important; width: 1px!important; height: 1px!important; opacity: 0!important; }.form-message { padding: 10px 12px; border-radius: 9px; font-size: 10px; line-height: 1.4; }.form-message:empty { display: none; }.form-message.success { background: #e9f9f2; color: #187c59; }.form-message.error { background: #fff0f1; color: #b43c4c; }

[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
@keyframes cardFloat { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(-1deg); } }
@keyframes pillFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: none; } }

@media (max-width: 1050px) {
  .site-header { grid-template-columns: 1fr auto auto; }.site-header nav { display: none; }.hero { grid-template-columns: 1fr; padding-top: 145px; }.hero-copy { max-width: 760px; text-align: center; justify-self: center; }.hero-copy > p { margin-inline: auto; }.hero-actions, .hero-trust { justify-content: center; }.product-stage { justify-self: center; margin-top: 25px; }.workflow-section, .control-section { grid-template-columns: 1fr; gap: 55px; }.workflow-copy, .control-copy { max-width: 750px; }.control-visual { width: min(640px, 100%); justify-self: center; }.final-cta { align-items: flex-end; }.demo-modal { grid-template-columns: .7fr 1.3fr; }
}

@media (max-width: 760px) {
  .site-header { grid-template-columns: 1fr auto auto; gap: 8px; width: calc(100% - 22px); min-height: 62px; margin-top: 10px; border-radius: 15px; }.brand { font-size: 15px; }.brand-mark { width: 32px; height: 32px; }.header-cta { display: none; }.language-switcher { padding: 2px; }.language-switcher button { min-width: 26px; min-height: 28px; padding: 0 4px; font-size: 8px; }.menu-button { display: grid; place-items: center; justify-self: end; width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--ink); color: #fff; }.site-header nav { position: absolute; left: 0; right: 0; top: 69px; display: none; flex-direction: column; gap: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }.site-header nav.is-open { display: flex; }.site-header nav a { padding: 15px 17px; border-bottom: 1px solid #eeeeF3; }
  .hero { min-height: auto; padding: 120px 20px 70px; }.hero h1 { font-size: clamp(43px, 13vw, 65px); letter-spacing: -3px; }.hero-copy > p { font-size: 15px; }.hero-actions { flex-direction: column; }.hero-actions .button { width: 100%; }.hero-trust { display: grid; justify-content: start; width: max-content; margin-inline: auto; }.app-window { grid-template-columns: 58px 1fr; min-height: 390px; border-radius: 18px; transform: none; }.app-sidebar { padding-inline: 5px; }.mini-logo { margin-bottom: 10px; }.side-link { width: 47px; min-height: 44px; }.side-link b { display: none; }.app-content { padding: 12px; }.app-top strong { font-size: 11px; }.app-top button { padding: 7px; font-size: 7px; }.metric-row { gap: 5px; }.metric-row article { padding: 8px; }.metric-row strong { font-size: 15px; }.mini-board { grid-template-columns: repeat(3, minmax(105px, 1fr)); overflow-x: auto; }.board-column article:nth-of-type(2) { display: none; }.pill-one { left: -6px; }.pill-two { right: -6px; }.floating-pill { font-size: 7px; }
  .trust-strip { justify-content: flex-start; overflow-x: auto; }.section { width: calc(100% - 36px); padding: 78px 0; }.section-heading h2, .workflow-copy h2, .control-copy h2 { font-size: 36px; letter-spacing: -1.7px; }.feature-grid { grid-template-columns: 1fr; }.feature-card { min-height: 245px; }.workflow-section { width: auto; padding-inline: 18px; }.role-stack article { grid-template-columns: 26px 42px 1fr; padding: 16px; }.role-stack article > svg { display: none; }.role-stack p { line-height: 1.5; }.control-visual { padding: 35px 20px 55px; }.control-section { gap: 45px; }.security-chip { left: 28px; right: auto; }.pricing-grid { grid-template-columns: 1fr; gap: 15px; }.price-card.featured { transform: none; }.final-cta { display: grid; width: calc(100% - 28px); margin-bottom: 65px; padding: 40px 28px; }.final-cta h2 { font-size: 39px; }.final-cta .button { width: 100%; }.final-cta p { line-height: 1.6; } footer { display: flex; flex-direction: column; width: calc(100% - 36px); }.footer-brand ~ div { order: 3; } footer > small { width: 100%; }
  .modal-backdrop { align-items: end; padding: 0; }.demo-modal { display: block; width: 100%; max-height: 94vh; border-radius: 24px 24px 0 0; }.modal-side { display: none; }.modal-form { padding: 34px 21px 25px; }.modal-close { top: 11px; right: 11px; }.field-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *:before, *:after { animation-duration: .01ms!important; animation-iteration-count: 1!important; transition-duration: .01ms!important; }
  [data-reveal] { opacity: 1; transform: none; }
}