.landing-container { width: min(calc(100% - 2rem), 78rem); margin-inline: auto; }
.landing-header { position: absolute; z-index: 10; top: 0; right: 0; left: 0; color: #f3f8fb; }
.landing-nav { display: flex; align-items: center; justify-content: space-between; min-height: 5.5rem; gap: 2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.landing-nav .brand { color: #fff; }
.landing-nav .brand small { color: #aebdc8; }
.landing-nav-links { display: flex; align-items: center; gap: 2rem; margin-left: auto; }
.landing-nav-links a, .landing-login-link { color: #d8e4ea; font-size: .875rem; font-weight: 650; text-decoration: none; }
.landing-nav-links a:hover, .landing-login-link:hover { color: #fff; }
.landing-nav-actions { display: flex; align-items: center; gap: .75rem; }
.landing-theme-toggle { color: #e9f1f5; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }
.landing-header .btn, .landing-hero .btn, .landing-plan-card .btn, .landing-cta .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .72rem 1rem; text-decoration: none; }

.landing-hero { position: relative; overflow: hidden; min-height: 48rem; padding: 10rem 0 6rem; color: #f5f9fb; background: radial-gradient(circle at 78% 26%, rgba(37,99,235,.34), transparent 25rem), radial-gradient(circle at 4% 86%, rgba(37,99,235,.2), transparent 24rem), linear-gradient(145deg, #101820 0%, #182733 54%, #102131 100%); }
.landing-hero::before { position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom, #000, transparent 80%); content: ""; }
.landing-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, .88fr) minmax(32rem, 1.12fr); align-items: center; gap: clamp(3rem, 7vw, 7rem); }
.landing-hero-copy { position: relative; z-index: 2; }
.landing-kicker { display: inline-flex; align-items: center; gap: .55rem; padding: .45rem .75rem; color: #bfdbfe; background: rgba(37,99,235,.13); border: 1px solid rgba(96,165,250,.25); border-radius: var(--app-radius-pill); font-size: .78rem; font-weight: 700; }
.landing-hero h1 { max-width: 12ch; margin: 1.25rem 0 1.25rem; font-size: clamp(2.75rem, 5.5vw, 5.2rem); font-weight: 750; letter-spacing: -.06em; line-height: .99; }
.landing-hero-copy > p { max-width: 38rem; margin: 0; color: #b9c8d1; font-size: clamp(1rem, 1.6vw, 1.16rem); line-height: 1.7; }
.landing-hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.landing-hero .btn-app-secondary { color: #f3f8fb; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.22); }
.landing-proof-list { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; padding: 0; margin: 1.75rem 0 0; color: #adbdc7; list-style: none; font-size: .78rem; }
.landing-proof-list li { display: flex; align-items: center; gap: .4rem; }
.landing-proof-list i { color: #60a5fa; }

.landing-product { position: relative; min-width: 0; perspective: 1000px; }
.landing-product-glow { position: absolute; inset: 15% 10%; background: rgba(37,99,235,.42); filter: blur(80px); }
.landing-window { position: relative; overflow: hidden; color: var(--app-ink); background: var(--app-surface-muted); border: 1px solid rgba(255,255,255,.2); border-radius: var(--app-radius-lg); box-shadow: 0 2.5rem 6rem rgba(0,0,0,.38); transform: rotateY(-3deg) rotateX(1deg); }
.landing-window-bar { display: flex; align-items: center; justify-content: space-between; min-height: 3.6rem; padding: .65rem 1rem; background: var(--app-surface); border-bottom: 1px solid var(--app-border); }
.landing-window-brand { display: flex; align-items: center; gap: .55rem; font-size: .78rem; }
.landing-window-brand .brand-mark { width: 1.8rem; height: 1.8rem; border-radius: .5rem; font-size: .85rem; box-shadow: none; }
.landing-window-company { display: flex; align-items: center; gap: .4rem; color: var(--app-muted); font-size: .68rem; }
.landing-window-body { display: grid; min-height: 27rem; grid-template-columns: 3.6rem 1fr; }
.landing-window-sidebar { display: flex; align-items: center; flex-direction: column; gap: .65rem; padding: 1rem .5rem; color: #9eb0bc; background: linear-gradient(180deg, var(--app-sidebar), var(--app-sidebar-end)); }
.landing-window-sidebar span { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: .65rem; font-size: .85rem; }
.landing-window-sidebar .is-active { color: #fff; background: var(--app-primary); }
.landing-dashboard { min-width: 0; padding: 1.25rem; }
.landing-dashboard-heading { display: flex; align-items: center; justify-content: space-between; }
.landing-dashboard-heading div { display: grid; }
.landing-dashboard-heading small { color: var(--app-primary-hover); font-size: .55rem; font-weight: 750; letter-spacing: .1em; }
.landing-dashboard-heading strong { font-size: 1rem; }
.landing-dashboard-heading > span { display: grid; width: 2rem; height: 2rem; place-items: center; color: var(--app-muted); background: var(--app-surface); border: 1px solid var(--app-border); border-radius: .6rem; font-size: .75rem; }
.landing-metrics { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .7rem; margin-top: 1rem; }
.landing-metrics > div { display: grid; padding: .85rem; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: .7rem; box-shadow: var(--app-shadow-sm); }
.landing-metrics span { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; margin-bottom: .65rem; border-radius: .5rem; font-size: .8rem; }
.landing-metrics .is-blue { color: var(--app-primary-hover); background: var(--app-primary-soft); }
.landing-metrics .is-green { color: var(--app-success); background: var(--app-success-soft); }
.landing-metrics .is-amber { color: var(--app-warning); background: var(--app-warning-soft); }
.landing-metrics small { color: var(--app-muted); font-size: .6rem; }
.landing-metrics strong { font-size: 1.35rem; }
.landing-metrics em { color: var(--app-success); font-size: .55rem; font-style: normal; }
.landing-dashboard-panels { display: grid; grid-template-columns: 1.35fr .9fr; gap: .7rem; margin-top: .7rem; }
.landing-chart-panel, .landing-tasks-panel { min-width: 0; padding: .9rem; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: .7rem; }
.landing-chart-panel > span { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .65rem; }
.landing-chart-panel > span small { color: var(--app-muted); }
.landing-bars { display: flex; align-items: end; height: 7.5rem; gap: .5rem; padding-top: 1rem; border-bottom: 1px solid var(--app-border); background: repeating-linear-gradient(to bottom, transparent, transparent calc(33.333% - 1px), var(--app-border) 33.333%); }
.landing-bars i { width: 100%; height: var(--bar); background: linear-gradient(to top, var(--app-primary), #60a5fa); border-radius: .25rem .25rem 0 0; }
.landing-tasks-panel { display: grid; align-content: start; gap: .75rem; }
.landing-tasks-panel > strong { font-size: .65rem; }
.landing-tasks-panel > span { display: grid; grid-template-columns: .45rem 1fr auto; align-items: center; gap: .4rem; padding-bottom: .55rem; border-bottom: 1px solid var(--app-border); }
.landing-tasks-panel i { width: .4rem; height: .4rem; background: var(--app-primary); border-radius: 50%; }
.landing-tasks-panel small, .landing-tasks-panel em { overflow: hidden; color: var(--app-muted); font-size: .52rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.landing-floating-card { position: absolute; right: -1.5rem; bottom: -1.6rem; display: flex; align-items: center; gap: .7rem; padding: .85rem 1rem; color: var(--app-ink); background: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--app-radius-sm); box-shadow: var(--app-shadow-md); }
.landing-floating-card > span { display: grid; width: 2rem; height: 2rem; place-items: center; color: #fff; background: var(--app-success); border-radius: 50%; }
.landing-floating-card div { display: grid; }
.landing-floating-card strong { font-size: .75rem; }
.landing-floating-card small { color: var(--app-muted); font-size: .62rem; }

/* Scaled preview of the current product dashboard. */
.landing-window { display: grid; grid-template-columns: 8.4rem minmax(0,1fr); min-height: 30rem; }
.landing-preview-sidebar { display: flex; min-width: 0; flex-direction: column; color: #dce7ed; background: linear-gradient(180deg,#18273a,#101820); }
.landing-preview-brand { display: flex; align-items: center; gap: .5rem; min-height: 3.7rem; padding: .55rem .65rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.landing-preview-brand .brand-mark { width: 1.8rem; height: 1.8rem; flex: 0 0 1.8rem; border-radius: .5rem; box-shadow: none; font-size: .78rem; }
.landing-preview-brand > span:last-child,.landing-preview-company > span { display: grid; min-width: 0; }
.landing-preview-brand strong { font-size: .62rem; line-height: 1.05; }
.landing-preview-brand small { margin-top: .12rem; color: #8fa2af; font-size: .45rem; }
.landing-preview-company { display: flex; align-items: center; gap: .45rem; padding: .55rem .65rem; background: rgba(255,255,255,.035); border-bottom: 1px solid rgba(255,255,255,.07); }
.landing-preview-company > i { display: grid; width: 1.65rem; height: 1.65rem; flex: 0 0 1.65rem; place-items: center; color: #bfdbfe; background: rgba(96,165,250,.14); border-radius: .48rem; font-size: .68rem; }
.landing-preview-company small { color: #8498a5; font-size: .4rem; }
.landing-preview-company strong { overflow: hidden; margin-top: .1rem; color: #eef4f7; font-size: .5rem; text-overflow: ellipsis; white-space: nowrap; }
.landing-preview-sidebar nav { display: grid; gap: .18rem; padding: .65rem .48rem; }
.landing-preview-sidebar nav > small { padding: .45rem .35rem .15rem; color: #8194a1; font-size: .4rem; font-weight: 750; letter-spacing: .08em; }
.landing-preview-sidebar nav > span { display: flex; align-items: center; gap: .45rem; min-height: 1.85rem; padding: .38rem .45rem; color: #aebdc7; border-radius: .5rem; font-size: .5rem; }
.landing-preview-sidebar nav > span i { width: .75rem; flex: 0 0 .75rem; text-align: center; }
.landing-preview-sidebar nav > span b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.landing-preview-sidebar nav > span.is-active { color: #fff; background: #2563eb; box-shadow: 0 .45rem 1rem rgba(37,99,235,.2); }
.landing-preview-app { min-width: 0; background: #f4f7fa; }
.landing-preview-topbar { display: flex; align-items: center; justify-content: space-between; min-height: 3.7rem; padding: .55rem .8rem; color: #17212b; background: #fff; border-bottom: 1px solid #d8e1e9; }
.landing-preview-topbar > div:first-child { display: grid; }
.landing-preview-topbar > div:first-child small { color: #2563eb; font-size: .4rem; font-weight: 800; letter-spacing: .08em; }
.landing-preview-topbar > div:first-child strong { margin-top: .08rem; font-size: .65rem; }
.landing-preview-topbar-actions { display: flex; align-items: center; gap: .55rem; color: #667789; font-size: .68rem; }
.landing-preview-plan { padding: .32rem .5rem; color: #6d28d9; background: #f3e8ff; border-radius: 99px; font-size: .45rem; font-weight: 750; }
.landing-preview-avatar { display: grid; width: 1.7rem; height: 1.7rem; place-items: center; color: #fff; background: #2563eb; border-radius: 50%; font-size: .45rem; font-weight: 800; }
.landing-preview-app .landing-dashboard { display: grid; gap: .65rem; padding: .75rem; }
.landing-dashboard-welcome { position: relative; isolation: isolate; overflow: hidden; padding: .95rem; color: #fff; background: radial-gradient(circle at 82% 18%,rgba(125,211,252,.38),transparent 10rem),radial-gradient(circle at 102% 108%,rgba(99,102,241,.46),transparent 12rem),linear-gradient(125deg,#2563eb 0%,#1d4ed8 52%,#263da4 100%); border-radius: .85rem; box-shadow: 0 .8rem 1.8rem rgba(30,64,175,.2); }
.landing-dashboard-welcome::before,.landing-dashboard-welcome::after { position: absolute; z-index: -1; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; content: ""; }
.landing-dashboard-welcome::before { top: -5rem; right: 8%; width: 11rem; height: 11rem; }
.landing-dashboard-welcome::after { right: -3rem; bottom: -6rem; width: 13rem; height: 13rem; }
.landing-dashboard-welcome-main { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.landing-dashboard-copy { min-width: 0; }
.landing-dashboard-copy > small { color: rgba(255,255,255,.72); font-size: .43rem; font-weight: 750; letter-spacing: .06em; }
.landing-dashboard-copy > strong { display: block; margin-top: .3rem; font-size: 1.25rem; letter-spacing: -.04em; }
.landing-dashboard-copy p { max-width: 20rem; margin: .25rem 0 0; color: rgba(255,255,255,.75); font-size: .52rem; line-height: 1.45; }
.landing-dashboard-actions { display: flex; align-items: center; gap: .65rem; margin-top: .55rem; font-size: .48rem; font-style: normal; }
.landing-dashboard-actions b { padding: .38rem .55rem; color: #1e3a8a; background: #fff; border-radius: .5rem; }
.landing-dashboard-actions em { color: #fff; font-style: normal; font-weight: 700; }
.landing-dashboard-aside { display: grid; flex: 0 0 4rem; justify-items: center; gap: .4rem; }
.landing-dashboard-aside > span { display: grid; width: 3.1rem; height: 3.1rem; place-items: center; color: rgba(255,255,255,.7); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: .85rem; font-size: 1.35rem; transform: rotate(6deg); }
.landing-dashboard-aside > small { display: grid; min-width: 3.8rem; justify-items: center; padding: .28rem; color: rgba(255,255,255,.65); background: rgba(15,23,42,.16); border-radius: .48rem; font-size: .35rem; }
.landing-dashboard-aside > small strong { color: #fff; font-size: .45rem; }
.landing-dashboard-pulse { display: flex; align-items: center; justify-content: space-between; padding-top: .65rem; margin-top: .65rem; color: rgba(255,255,255,.7); border-top: 1px solid rgba(255,255,255,.15); font-size: .4rem; font-weight: 750; letter-spacing: .05em; }
.landing-command-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .4rem; margin-top: .45rem; }
.landing-command-metrics > div { display: flex; align-items: center; gap: .35rem; min-width: 0; min-height: 2.9rem; padding: .42rem; background: linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.065)); border: 1px solid rgba(255,255,255,.15); border-radius: .55rem; }
.landing-command-metrics > div > i { display: grid; width: 1.35rem; height: 1.35rem; flex: 0 0 1.35rem; place-items: center; color: #bfdbfe; background: rgba(15,23,42,.17); border-radius: .4rem; font-size: .55rem; }
.landing-command-metrics span { display: grid; min-width: 0; }
.landing-command-metrics strong { font-size: .72rem; line-height: 1; }
.landing-command-metrics small { overflow: hidden; margin-top: .15rem; color: rgba(255,255,255,.66); font-size: .33rem; text-overflow: ellipsis; white-space: nowrap; }
.landing-dashboard-quick { padding: .7rem; color: #f8fafc; background: radial-gradient(circle at 95% 0,rgba(37,99,235,.3),transparent 9rem),linear-gradient(130deg,#101827,#172235); border: 1px solid rgba(148,163,184,.16); border-radius: .75rem; }
.landing-dashboard-quick > div:first-child { display: grid; }
.landing-dashboard-quick > div:first-child small { color: #60a5fa; font-size: .38rem; font-weight: 750; letter-spacing: .07em; }
.landing-dashboard-quick > div:first-child strong { margin-top: .12rem; font-size: .65rem; }
.landing-dashboard-quick-grid { display: grid; grid-template-columns: 1.25fr repeat(2,minmax(0,1fr)); gap: .38rem; margin-top: .5rem; }
.landing-dashboard-quick-grid > span { display: flex; align-items: center; gap: .35rem; min-width: 0; min-height: 2.6rem; padding: .4rem; color: #dce7ed; background: rgba(255,255,255,.045); border: 1px solid rgba(148,163,184,.16); border-radius: .5rem; font-size: .4rem; }
.landing-dashboard-quick-grid > span.is-primary { color: #fff; background: linear-gradient(135deg,#2563eb,#1d4ed8); border-color: transparent; }
.landing-dashboard-quick-grid i { color: #93c5fd; }
.landing-dashboard-quick-grid .is-primary i { color: #fff; }
.landing-dashboard-quick-grid b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.landing-value-rail { position: relative; z-index: 3; margin-top: -2.1rem; }
.landing-value-rail > div { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; padding: 1.3rem 1.6rem; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--app-radius-lg); box-shadow: var(--app-shadow-md); }
.landing-value-rail span { display: grid; grid-template-columns: 2.6rem 1fr; align-items: center; min-width: 0; column-gap: .75rem; }
.landing-value-rail span > i { display: grid; width: 2.6rem; height: 2.6rem; grid-row: span 2; place-items: center; color: var(--app-primary-hover); background: var(--app-primary-soft); border-radius: .7rem; }
.landing-value-rail small { color: var(--app-muted); font-size: .67rem; }
.landing-value-rail strong { overflow: hidden; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.landing-value-rail > div > i { color: var(--app-border-strong); font-size: .8rem; }

.landing-section { padding: clamp(4.5rem, 9vw, 7.5rem) 0; }
.landing-section-heading { max-width: 46rem; }
.landing-section-heading h2, .landing-security h2, .landing-cta h2 { margin: .7rem 0 1rem; font-size: clamp(2rem, 4.5vw, 3.5rem); letter-spacing: -.05em; line-height: 1.08; }
.landing-section-heading > p { max-width: 42rem; margin: 0; color: var(--app-muted); font-size: 1.05rem; line-height: 1.7; }
.landing-intro { background: var(--app-surface-muted); }
.landing-feature-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; margin-top: 3rem; }
.landing-feature-card { min-height: 17rem; padding: 1.5rem; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--app-radius-md); box-shadow: var(--app-shadow-sm); }
.landing-feature-main { grid-column: span 2; }
.landing-feature-icon { display: grid; width: 2.8rem; height: 2.8rem; place-items: center; margin-bottom: 1.35rem; color: var(--app-primary-hover); background: var(--app-primary-soft); border-radius: .8rem; font-size: 1.25rem; }
.landing-feature-card h3 { margin: .45rem 0 .65rem; font-size: 1.25rem; letter-spacing: -.025em; }
.landing-feature-card p { max-width: 37rem; margin: 0; color: var(--app-muted); line-height: 1.65; }
.landing-flow-preview { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .6rem; margin-top: 1.6rem; }
.landing-flow-preview span { display: grid; grid-template-columns: .5rem 1fr auto; align-items: center; gap: .5rem; padding: .75rem; background: var(--app-surface-muted); border: 1px solid var(--app-border); border-radius: .65rem; }
.landing-flow-preview span.is-current { border-color: color-mix(in srgb, var(--app-primary) 55%, var(--app-border)); }
.landing-flow-preview i { width: .45rem; height: .45rem; background: var(--app-muted); border-radius: 50%; }
.landing-flow-preview .is-current i { background: var(--app-primary); }
.landing-flow-preview small { color: var(--app-muted); font-size: .67rem; }
.landing-flow-preview strong { font-size: .78rem; }

.landing-profiles { color: #f2f7fa; background: radial-gradient(circle at 15% 10%, rgba(37,99,235,.2), transparent 24rem), linear-gradient(145deg, #18212b, #101820); }
.landing-profiles .app-eyebrow { color: #93c5fd; }
.landing-profiles-heading { display: flex; align-items: end; justify-content: space-between; gap: 3rem; }
.landing-profiles-heading > p { max-width: 29rem; margin: 0 0 .4rem; color: #aebdc7; line-height: 1.65; }
.landing-profile-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; margin-top: 3rem; }
.landing-profile-card { position: relative; overflow: hidden; min-height: 23rem; padding: 1.5rem; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12); border-radius: var(--app-radius-md); }
.landing-profile-card::after { position: absolute; right: -2.5rem; bottom: -3rem; width: 9rem; height: 9rem; background: var(--profile-glow,rgba(37,99,235,.15)); border-radius: 50%; filter: blur(12px); content: ""; }
.landing-profile-card.is-supervisor { --profile-glow: rgba(18,129,94,.18); }
.landing-profile-card.is-field { --profile-glow: rgba(183,121,0,.18); }
.landing-profile-card.is-finance { --profile-glow: rgba(43,108,176,.2); }
.landing-profile-card-top { display: flex; align-items: center; justify-content: space-between; }
.landing-profile-card-top > span { display: grid; width: 3rem; height: 3rem; place-items: center; color: #bfdbfe; background: rgba(37,99,235,.2); border: 1px solid rgba(96,165,250,.2); border-radius: .85rem; font-size: 1.25rem; }
.landing-profile-card-top small { color: #93a7b3; font-size: .66rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.landing-profile-card h3 { margin: 1.5rem 0 .7rem; font-size: 1.2rem; letter-spacing: -.025em; }
.landing-profile-card p { min-height: 6.2rem; margin: 0; color: #adbdc7; font-size: .88rem; line-height: 1.65; }
.landing-profile-card ul { position: relative; z-index: 1; display: grid; gap: .55rem; padding: 1.1rem 0 0; margin: 1.1rem 0 0; border-top: 1px solid rgba(255,255,255,.1); list-style: none; color: #dce7ed; font-size: .76rem; }
.landing-profile-card li::before { margin-right: .45rem; color: #60a5fa; content: "✓"; }
.landing-profile-note { display: flex; align-items: center; gap: .85rem; padding: 1rem 1.2rem; margin-top: 1rem; color: #adbdc7; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: var(--app-radius-sm); font-size: .8rem; }
.landing-profile-note > i { color: #60a5fa; font-size: 1.1rem; }
.landing-profile-note strong { color: #f2f7fa; }

.landing-api { position: relative; overflow: hidden; color: #edf5f8; background: radial-gradient(circle at 70% 20%,rgba(37,99,235,.26),transparent 25rem), radial-gradient(circle at 5% 90%,rgba(18,129,94,.14),transparent 22rem), linear-gradient(145deg,#111b24,#0b1218); }
.landing-api::before { position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(rgba(147,197,253,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(147,197,253,.18) 1px,transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom,transparent,#000 18%,#000 72%,transparent); content: ""; }
.landing-api-atmosphere { position: absolute; inset: 0; pointer-events: none; }
.landing-api-atmosphere i { position: absolute; border: 1px solid rgba(96,165,250,.16); border-radius: 50%; }
.landing-api-atmosphere i:first-child { top: -14rem; right: -9rem; width: 34rem; height: 34rem; }
.landing-api-atmosphere i:nth-child(2) { top: -8rem; right: -3rem; width: 22rem; height: 22rem; }
.landing-api-atmosphere i:last-child { bottom: -11rem; left: -8rem; width: 26rem; height: 26rem; }
.landing-api-grid { position: relative; display: grid; grid-template-columns: minmax(0,.93fr) minmax(31rem,1.07fr); align-items: center; gap: clamp(3rem,8vw,7rem); }
.landing-api-copy h2 { max-width: 12ch; margin: .7rem 0 1rem; font-size: clamp(2.25rem,4.7vw,3.8rem); letter-spacing: -.055em; line-height: 1.03; }
.landing-api-copy > p { max-width: 39rem; margin: 0; color: #adbdc7; font-size: 1.04rem; line-height: 1.7; }
.landing-api .app-eyebrow { color: #93c5fd; }
.landing-api-status { display: flex; width: fit-content; align-items: center; gap: .45rem; padding: .42rem .68rem; margin-bottom: 1.25rem; color: #84d7b6; background: rgba(18,129,94,.14); border: 1px solid rgba(95,211,169,.22); border-radius: var(--app-radius-pill); font-size: .68rem; font-weight: 750; }
.landing-api-status i { filter: drop-shadow(0 0 .45rem rgba(95,211,169,.75)); }
.landing-api-tags { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.4rem; }
.landing-api-tags span { display: inline-flex; align-items: center; gap: .42rem; padding: .5rem .7rem; color: #dce8ee; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12); border-radius: var(--app-radius-pill); font-size: .72rem; font-weight: 700; backdrop-filter: blur(8px); }
.landing-api-tags i { color: #60a5fa; }
.landing-api-capabilities { display: grid; gap: .9rem; margin-top: 1.8rem; }
.landing-api-capabilities article { display: grid; grid-template-columns: 2.5rem 1fr; gap: .85rem; padding: .85rem; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08); border-radius: var(--app-radius-sm); backdrop-filter: blur(8px); }
.landing-api-capabilities article > i { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; color: #93c5fd; background: rgba(37,99,235,.2); border: 1px solid rgba(96,165,250,.16); border-radius: .7rem; }
.landing-api-capabilities strong { display: block; margin-bottom: .15rem; font-size: .88rem; }
.landing-api-capabilities p { margin: 0; color: #9eafb9; font-size: .76rem; line-height: 1.55; }
.landing-api-console { position: relative; min-width: 0; overflow: visible; color: #dce8ee; background: rgba(9,15,20,.9); border: 1px solid #3b5363; border-radius: var(--app-radius-lg); box-shadow: 0 2.5rem 6rem rgba(0,0,0,.42),0 0 0 .35rem rgba(37,99,235,.06); transform: rotateY(-2deg) rotateX(1deg); backdrop-filter: blur(16px); }
.landing-api-console::before { position: absolute; z-index: -1; inset: -18%; background: radial-gradient(circle,rgba(37,99,235,.35),transparent 62%); content: ""; filter: blur(18px); }
.landing-api-console::after { position: absolute; top: 0; right: 1.2rem; left: 1.2rem; height: 1px; background: linear-gradient(90deg,transparent,#60a5fa,transparent); content: ""; }
.landing-api-console-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 3.7rem; padding: 0 1rem; background: rgba(255,255,255,.025); border-bottom: 1px solid #2c3d49; border-radius: var(--app-radius-lg) var(--app-radius-lg) 0 0; }
.landing-api-console-bar > span { display: flex; gap: .35rem; }
.landing-api-console-bar > span i { width: .55rem; height: .55rem; background: #506572; border-radius: 50%; }
.landing-api-console-bar > span i:first-child { background: #ef6969; }
.landing-api-console-bar > span i:nth-child(2) { background: #e8b949; }
.landing-api-console-bar > span i:last-child { background: #51bb91; }
.landing-api-console-bar strong { display: flex; align-items: center; gap: .45rem; font-size: .72rem; }
.landing-api-console-bar strong i { color: #60a5fa; }
.landing-api-console-bar small { justify-self: end; color: #68d4a8; font-size: .6rem; font-weight: 750; letter-spacing: .08em; }
.landing-api-request { display: flex; align-items: center; gap: .65rem; padding: .9rem 1.1rem; background: #16232d; border-bottom: 1px solid #2c3d49; font-size: .72rem; }
.landing-api-request .is-method { padding: .25rem .4rem; color: #84d7b6; background: rgba(18,129,94,.2); border-radius: .35rem; font-weight: 800; }
.landing-api-request code { min-width: 0; overflow: hidden; color: #dce8ee; text-overflow: ellipsis; white-space: nowrap; }
.landing-api-request .is-status { margin-left: auto; color: #84d7b6; font-size: .65rem; font-weight: 750; }
.landing-api-console pre { min-height: 19rem; padding: 1.5rem; margin: 0; overflow: auto; color: #b7c7d0; font-size: clamp(.66rem,1.3vw,.78rem); line-height: 1.8; }
.landing-api-console pre code { color: inherit; }
.landing-api-console .is-key { color: #93c5fd; }
.landing-api-console .is-value { color: #a7e2c9; }
.landing-api-console .is-number { color: #f6c85f; }
.landing-api-console .is-brace { color: #dce8ee; }
.landing-api-console-footer { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 1.1rem; color: #8296a3; border-top: 1px solid #2c3d49; font-size: .62rem; }
.landing-api-console-footer span { display: flex; align-items: center; gap: .4rem; }
.landing-api-console-footer i { color: #60a5fa; }
.landing-api-webhook { position: absolute; right: -1.5rem; bottom: -2rem; display: grid; grid-template-columns: 2.2rem 1fr auto; align-items: center; gap: .65rem; min-width: 15rem; padding: .8rem .9rem; color: #e9f2f6; background: #192630; border: 1px solid #3b5261; border-radius: var(--app-radius-sm); box-shadow: 0 1.25rem 3rem rgba(0,0,0,.4); }
.landing-api-webhook > i { display: grid; width: 2.2rem; height: 2.2rem; place-items: center; color: #84d7b6; background: rgba(18,129,94,.18); border-radius: .6rem; }
.landing-api-webhook div { display: grid; }
.landing-api-webhook small, .landing-api-webhook > span { color: #91a4b0; font-size: .58rem; }
.landing-api-webhook strong { font-size: .68rem; }
.landing-api-flow { position: relative; display: grid; grid-template-columns: auto minmax(8rem,1fr) auto; align-items: center; gap: 1.5rem; padding: 1.15rem 1.25rem; margin-top: 4rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: var(--app-radius-md); backdrop-filter: blur(10px); }
.landing-api-flow-source { display: flex; align-items: center; gap: .7rem; }
.landing-api-flow-source .brand-mark { width: 2.45rem; height: 2.45rem; flex: 0 0 auto; border-radius: .7rem; font-size: 1rem; box-shadow: 0 0 .9rem rgba(37,99,235,.35); }
.landing-api-flow-source div { display: grid; }
.landing-api-flow-source small { color: #8297a4; font-size: .58rem; }
.landing-api-flow-source strong { font-size: .8rem; }
.landing-api-flow-line { position: relative; display: flex; align-items: center; min-width: 0; }
.landing-api-flow-line > span { width: 100%; height: 1px; background: linear-gradient(90deg,rgba(96,165,250,.2),#60a5fa,rgba(96,165,250,.2)); }
.landing-api-flow-line > i { position: absolute; left: 50%; width: .55rem; height: .55rem; background: #60a5fa; border: 2px solid #17242e; border-radius: 50%; box-shadow: 0 0 0 .35rem rgba(96,165,250,.12),0 0 1rem rgba(96,165,250,.75); animation: landing-api-signal 2.8s var(--app-ease-standard) infinite; }
.landing-api-flow-line em { position: absolute; top: .6rem; left: 50%; color: #748b99; font-size: .54rem; font-style: normal; transform: translateX(-50%); white-space: nowrap; }
.landing-api-flow-targets { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.landing-api-flow-targets span { display: inline-flex; align-items: center; gap: .38rem; padding: .5rem .65rem; color: #becbd2; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.1); border-radius: var(--app-radius-pill); font-size: .64rem; font-weight: 700; }
.landing-api-flow-targets i { color: #60a5fa; }
@keyframes landing-api-signal { 0% { left: 0; opacity: 0; } 15%,85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

.landing-steps { background: var(--app-surface); }
.landing-steps-grid { display: grid; grid-template-columns: minmax(0,.9fr) minmax(28rem,1.1fr); align-items: start; gap: clamp(3rem,8vw,8rem); }
.landing-text-link { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.5rem; color: var(--app-primary-hover); font-weight: 700; text-decoration: none; }
.landing-step-list { display: grid; padding: 0; margin: 0; list-style: none; }
.landing-step-list li { display: grid; grid-template-columns: 4rem 1fr; gap: 1.3rem; padding: 1.75rem 0; border-bottom: 1px solid var(--app-border); }
.landing-step-list li:first-child { padding-top: 0; }
.landing-step-list > li > span { display: grid; width: 3.2rem; height: 3.2rem; place-items: center; color: var(--app-primary-hover); background: var(--app-primary-soft); border-radius: .9rem; font-size: .8rem; font-weight: 800; }
.landing-step-list h3 { margin: 0 0 .35rem; font-size: 1.15rem; }
.landing-step-list p { margin: 0; color: var(--app-muted); line-height: 1.6; }

.landing-security { padding-top: 0; background: var(--app-surface); }
.landing-security-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; padding: clamp(2rem,5vw,3.5rem); background: color-mix(in srgb, var(--app-primary) 6%, var(--app-surface-muted)); border: 1px solid color-mix(in srgb, var(--app-primary) 20%, var(--app-border)); border-radius: var(--app-radius-lg); }
.landing-security-mark { display: grid; width: 5.5rem; height: 5.5rem; place-items: center; color: var(--app-primary-contrast); background: var(--app-primary); border-radius: 1.5rem; font-size: 2.25rem; box-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--app-primary) 25%, transparent); }
.landing-security h2 { margin-bottom: .7rem; font-size: clamp(1.8rem,3vw,2.6rem); }
.landing-security p { max-width: 48rem; margin: 0; color: var(--app-muted); line-height: 1.65; }
.landing-security ul { display: grid; gap: .7rem; min-width: 12rem; padding: 0; margin: 0; list-style: none; font-size: .85rem; font-weight: 650; }
.landing-security li { display: flex; align-items: center; gap: .5rem; }
.landing-security li i { color: var(--app-success); }

.landing-plans { background: var(--app-surface-muted); }
.landing-plans-heading { display: flex; align-items: end; justify-content: space-between; gap: 3rem; }
.landing-plans-heading > p { max-width: 30rem; margin: 0 0 .5rem; color: var(--app-muted); line-height: 1.7; }
.landing-plan-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,19rem),1fr)); gap: 1rem; max-width: 78rem; margin: 3rem auto 0; }
.landing-plan-card { position: relative; display: flex; flex-direction: column; padding: clamp(1.5rem,3vw,2.25rem); background: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--app-radius-lg); box-shadow: var(--app-shadow-sm); }
.landing-plan-card.is-business { border-color: color-mix(in srgb,var(--app-primary) 52%,var(--app-border)); box-shadow: 0 1.5rem 4rem color-mix(in srgb,var(--app-primary) 13%,transparent); }
.landing-plan-badge { position: absolute; top: 1rem; right: 1rem; display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .65rem; color: var(--app-primary-hover); background: var(--app-primary-soft); border-radius: var(--app-radius-pill); font-size: .66rem; font-weight: 750; }
.landing-plan-card header { display: flex; align-items: center; gap: .9rem; padding-right: 0; }
.landing-plan-card.has-badge header { padding-right: 7rem; }
.landing-plan-icon { display: grid; width: 3.25rem; height: 3.25rem; flex: 0 0 auto; place-items: center; color: var(--app-primary-hover); background: var(--app-primary-soft); border-radius: .9rem; font-size: 1.35rem; }
.landing-plan-card header div { display: grid; }
.landing-plan-card header small { color: var(--app-muted); font-size: .7rem; font-weight: 700; }
.landing-plan-card h3 { margin: .05rem 0 0; font-size: 1.55rem; letter-spacing: -.035em; }
.landing-plan-card > p { min-height: 3.3rem; margin: 1.4rem 0; color: var(--app-muted); line-height: 1.6; }
.landing-plan-price { display: grid; min-height: 5rem; align-content: start; margin-bottom: 1.25rem; }
.landing-plan-price strong { font-size: clamp(1.8rem,4vw,2.6rem); letter-spacing: -.04em; }
.landing-plan-price span { color: var(--app-muted); font-size: .75rem; }
.landing-plan-price small { margin-top: .25rem; color: var(--app-muted); font-size: .7rem; }
.landing-plan-card > .btn { width: 100%; }
.landing-plan-divider { height: 1px; margin: 1.6rem 0 1.3rem; background: var(--app-border); }
.landing-plan-includes { font-size: .78rem; }
.landing-plan-card ul { display: grid; gap: .75rem; padding: 0; margin: 1rem 0 0; list-style: none; }
.landing-plan-card li { display: flex; align-items: flex-start; gap: .55rem; color: var(--app-muted); font-size: .82rem; }
.landing-plan-card li i { flex: 0 0 auto; color: var(--app-success); }
.landing-plan-card li strong { color: var(--app-ink-soft); }
.landing-plan-footnote { display: flex; justify-content: center; gap: .5rem; margin: 1.25rem 0 0; color: var(--app-muted); font-size: .78rem; text-align: center; }
.landing-plan-empty { display: grid; grid-column: 1 / -1; justify-items: center; padding: 3rem 1.5rem; color: var(--app-muted); text-align: center; background: var(--app-surface); border: 1px dashed var(--app-border); border-radius: var(--app-radius-lg); }
.landing-plan-empty > i { margin-bottom: .75rem; color: var(--app-primary-hover); font-size: 1.6rem; }
.landing-plan-empty strong { color: var(--app-ink); }
.landing-plan-empty p { margin: .35rem 0 0; }

.landing-faq { background: var(--app-surface); }
.landing-faq-grid { display: grid; grid-template-columns: minmax(0,.78fr) minmax(30rem,1.22fr); align-items: start; gap: clamp(3rem,8vw,8rem); }
.landing-faq-list { border-top: 1px solid var(--app-border); }
.landing-faq-list details { border-bottom: 1px solid var(--app-border); }
.landing-faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; font-weight: 700; cursor: pointer; list-style: none; }
.landing-faq-list summary::-webkit-details-marker { display: none; }
.landing-faq-list summary i { position: relative; display: grid; width: 2rem; height: 2rem; flex: 0 0 auto; place-items: center; color: var(--app-primary-hover); background: var(--app-primary-soft); border-radius: .6rem; font-size: 0; transition: transform var(--app-duration-normal) var(--app-ease-standard); }
.landing-faq-list summary i::before,
.landing-faq-list summary i::after { position: absolute; width: .75rem; height: 2px; background: currentColor; border-radius: 999px; content: ""; }
.landing-faq-list summary i::after { transform: rotate(90deg); }
.landing-faq-list details[open] summary i { transform: rotate(45deg); }
.landing-faq-list details p { max-width: 43rem; padding: 0 3rem 1.25rem 0; margin: 0; color: var(--app-muted); line-height: 1.65; }

.landing-cta { padding: clamp(4.5rem,9vw,7rem) 0; color: #f3f8fb; background: radial-gradient(circle at 78% 50%, rgba(37,99,235,.34), transparent 25rem), linear-gradient(135deg, #18212b, #101820); }
.landing-cta-content { display: flex; align-items: center; justify-content: space-between; gap: 3rem; }
.landing-cta-content > div:first-child { max-width: 48rem; }
.landing-cta h2 { margin-bottom: .8rem; }
.landing-cta p { margin: 0; color: #b8c7d0; line-height: 1.65; }
.landing-cta .app-eyebrow { color: #93c5fd; }
.landing-cta-actions { display: flex; flex: 0 0 auto; gap: .75rem; }
.landing-cta .btn-app-secondary { color: #f3f8fb; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.2); }

.landing-footer { padding: 2rem 0; background: var(--app-surface); border-top: 1px solid var(--app-border); }
.landing-footer-content { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; }
.landing-footer p { margin: 0; color: var(--app-muted); font-size: .8rem; text-align: center; }
.landing-footer nav { display: flex; gap: 1.25rem; }
.landing-footer nav a { color: var(--app-muted); font-size: .78rem; font-weight: 650; text-decoration: none; }
.landing-footer nav a:hover { color: var(--app-primary-hover); }

/* Institutional dark-tech language shared by every landing section. */
.landing-value-rail { background: #101820; }
.landing-value-rail > div { color: #edf5f8; background: linear-gradient(135deg,rgba(28,43,54,.96),rgba(18,29,38,.96)); border-color: #344a58; box-shadow: 0 1.5rem 4rem rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.04); }
.landing-value-rail span > i { color: #93c5fd; background: rgba(37,99,235,.2); border: 1px solid rgba(96,165,250,.18); }
.landing-value-rail small { color: #8196a3; }
.landing-value-rail > div > i { color: #506572; }

.landing-intro { position: relative; overflow: hidden; color: #edf5f8; background: radial-gradient(circle at 90% 20%,rgba(37,99,235,.13),transparent 28rem),linear-gradient(180deg,#101820,#111d26); }
.landing-intro::before { position: absolute; top: 8rem; right: -9rem; width: 26rem; height: 26rem; border: 1px solid rgba(96,165,250,.12); border-radius: 50%; box-shadow: 0 0 0 5rem rgba(96,165,250,.025); content: ""; }
.landing-intro .landing-container { position: relative; }
.landing-intro .app-eyebrow { color: #60a5fa; }
.landing-intro .landing-section-heading > p { color: #9fb0ba; }
.landing-feature-card { color: #edf5f8; background: linear-gradient(145deg,rgba(31,46,57,.9),rgba(22,34,43,.88)); border-color: rgba(151,174,188,.18); box-shadow: 0 1rem 2.5rem rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.035); backdrop-filter: blur(10px); transition: transform var(--app-duration-normal) var(--app-ease-standard),border-color var(--app-duration-normal) var(--app-ease-standard),box-shadow var(--app-duration-normal) var(--app-ease-standard); }
.landing-feature-card:hover { border-color: rgba(96,165,250,.38); box-shadow: 0 1.5rem 3.5rem rgba(0,0,0,.24),0 0 2rem rgba(37,99,235,.08); transform: translateY(-4px); }
.landing-feature-card p { color: #9fb0ba; }
.landing-feature-icon { color: #93c5fd; background: rgba(37,99,235,.2); border: 1px solid rgba(96,165,250,.16); }
.landing-flow-preview span { background: rgba(255,255,255,.035); border-color: rgba(151,174,188,.16); }
.landing-flow-preview span.is-current { background: rgba(37,99,235,.1); border-color: rgba(96,165,250,.45); }
.landing-flow-preview small { color: #93a6b2; }

.landing-profile-card { transition: transform var(--app-duration-normal) var(--app-ease-standard),border-color var(--app-duration-normal) var(--app-ease-standard); }
.landing-profile-card:hover { border-color: rgba(96,165,250,.3); transform: translateY(-4px); }

.landing-steps { position: relative; overflow: hidden; color: #edf5f8; background: radial-gradient(circle at 12% 50%,rgba(37,99,235,.13),transparent 25rem),#0d161d; border-top: 1px solid rgba(255,255,255,.05); }
.landing-steps::after { position: absolute; top: 0; right: 7%; width: 1px; height: 100%; background: linear-gradient(transparent,rgba(96,165,250,.2),transparent); content: ""; }
.landing-steps-grid { position: relative; z-index: 1; }
.landing-steps .app-eyebrow { color: #60a5fa; }
.landing-steps .landing-section-heading > p,.landing-step-list p { color: #9fb0ba; }
.landing-steps .landing-text-link { color: #93c5fd; }
.landing-step-list { counter-reset: landing-steps; }
.landing-step-list li { position: relative; border-color: rgba(151,174,188,.17); }
.landing-step-list > li > span { color: #bfdbfe; background: rgba(37,99,235,.2); border: 1px solid rgba(96,165,250,.2); box-shadow: inset 0 1px rgba(255,255,255,.04); }
.landing-step-list li::after { position: absolute; right: 0; bottom: -1px; width: 0; height: 1px; background: #60a5fa; content: ""; transition: width var(--app-duration-normal) var(--app-ease-standard); }
.landing-step-list li:hover::after { width: 100%; }

.landing-security { color: #edf5f8; background: #0d161d; }
.landing-security-card { background: linear-gradient(115deg,rgba(31,48,61,.94),rgba(20,32,41,.94)); border-color: rgba(96,165,250,.2); box-shadow: 0 1.5rem 4rem rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.04); }
.landing-security-mark { color: #fff; background: linear-gradient(145deg,#2563eb,#1d4ed8); box-shadow: 0 1rem 2.5rem rgba(37,99,235,.25),inset 0 1px rgba(255,255,255,.18); }
.landing-security .app-eyebrow { color: #60a5fa; }
.landing-security p { color: #9fb0ba; }
.landing-security li { color: #dce7ed; }
.landing-security li i { color: #68d4a8; }

.landing-plans { position: relative; overflow: hidden; color: #edf5f8; background: radial-gradient(circle at 50% 15%,rgba(37,99,235,.15),transparent 30rem),linear-gradient(180deg,#111d26,#101820); border-top: 1px solid rgba(255,255,255,.05); }
.landing-plans::before { position: absolute; inset: 0; opacity: .09; background-image: linear-gradient(rgba(147,197,253,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(147,197,253,.16) 1px,transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom,#000,transparent 72%); content: ""; }
.landing-plans > .landing-container { position: relative; }
.landing-plans .app-eyebrow { color: #60a5fa; }
.landing-plans-heading > p { color: #9fb0ba; }
.landing-plan-card { color: #edf5f8; background: linear-gradient(145deg,rgba(31,46,57,.94),rgba(18,29,38,.94)); border-color: rgba(151,174,188,.2); box-shadow: 0 1.5rem 4rem rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.04); backdrop-filter: blur(12px); transition: transform var(--app-duration-normal) var(--app-ease-standard),border-color var(--app-duration-normal) var(--app-ease-standard),box-shadow var(--app-duration-normal) var(--app-ease-standard); }
.landing-plan-card:hover { border-color: rgba(96,165,250,.38); transform: translateY(-4px); }
.landing-plan-card.is-business { background: radial-gradient(circle at 100% 0,rgba(37,99,235,.18),transparent 20rem),linear-gradient(145deg,rgba(29,45,58,.98),rgba(16,27,36,.98)); border-color: rgba(96,165,250,.62); box-shadow: 0 1.8rem 5rem rgba(0,0,0,.32),0 0 3rem rgba(37,99,235,.1); }
.landing-plan-badge { color: #bfdbfe; background: rgba(37,99,235,.24); border: 1px solid rgba(96,165,250,.18); }
.landing-plan-icon { color: #93c5fd; background: rgba(37,99,235,.2); border: 1px solid rgba(96,165,250,.16); }
.landing-plan-card header small,.landing-plan-card > p,.landing-plan-price span,.landing-plan-card li,.landing-plan-footnote { color: #9fb0ba; }
.landing-plan-card li strong { color: #e5eef3; }
.landing-plan-card li i { color: #68d4a8; }
.landing-plan-divider { background: rgba(151,174,188,.17); }
.landing-plan-card .btn-app-secondary { color: #eaf2f6; background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.18); }
.landing-plan-card .btn-app-secondary:hover { background: rgba(255,255,255,.1); border-color: rgba(96,165,250,.42); }

.landing-faq { position: relative; color: #edf5f8; background: radial-gradient(circle at 8% 18%,rgba(37,99,235,.1),transparent 22rem),#0d161d; border-top: 1px solid rgba(255,255,255,.05); }
.landing-faq .app-eyebrow { color: #60a5fa; }
.landing-faq .landing-section-heading > p,.landing-faq-list details p { color: #9fb0ba; }
.landing-faq-list { border-color: rgba(151,174,188,.17); }
.landing-faq-list details { border-color: rgba(151,174,188,.17); }
.landing-faq-list summary { color: #edf5f8; }
.landing-faq-list summary i { color: #93c5fd; background: rgba(37,99,235,.2); border: 1px solid rgba(96,165,250,.15); }
.landing-faq-list details[open] { margin-inline: -.9rem; padding-inline: .9rem; background: rgba(255,255,255,.025); border-radius: var(--app-radius-sm); }

.landing-cta { position: relative; overflow: hidden; background: radial-gradient(circle at 82% 35%,rgba(96,165,250,.3),transparent 24rem),linear-gradient(125deg,#172a3a,#13253a 48%,#111b24); border-top: 1px solid rgba(96,165,250,.18); }
.landing-cta::after { position: absolute; right: -7rem; bottom: -15rem; width: 30rem; height: 30rem; border: 1px solid rgba(147,197,253,.15); border-radius: 50%; box-shadow: 0 0 0 5rem rgba(147,197,253,.025),0 0 0 10rem rgba(147,197,253,.018); content: ""; }
.landing-cta-content { position: relative; z-index: 1; }
.landing-cta .btn-app-secondary { color: #edf5f8; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); }

.landing-footer { color: #dce7ed; background: #091017; border-color: rgba(255,255,255,.08); }
.landing-footer .brand { color: #f1f6f8; }
.landing-footer .brand small,.landing-footer p,.landing-footer nav a { color: #8296a3; }
.landing-footer nav a:hover { color: #93c5fd; }

@media (hover: hover) {
  .landing-plan-card:hover,.landing-feature-card:hover,.landing-profile-card:hover { transform: translateY(-4px); }
}

/* Balanced rhythm: technical dark showcases framed by calm product surfaces. */
.landing-value-rail { background: var(--app-surface-muted); }
.landing-value-rail > div { color: var(--app-ink); background: var(--app-surface); border-color: var(--app-border); box-shadow: var(--app-shadow-md); }
.landing-value-rail span > i { color: var(--app-primary-hover); background: var(--app-primary-soft); border-color: color-mix(in srgb,var(--app-primary) 16%,var(--app-border)); }
.landing-value-rail small { color: var(--app-muted); }
.landing-value-rail > div > i { color: var(--app-border-strong); }

.landing-intro { color: var(--app-ink); background: radial-gradient(circle at 90% 20%,color-mix(in srgb,var(--app-primary) 8%,transparent),transparent 28rem),var(--app-surface-muted); }
.landing-intro .app-eyebrow { color: var(--app-primary-hover); }
.landing-intro .landing-section-heading > p,.landing-feature-card p { color: var(--app-muted); }
.landing-feature-card { color: var(--app-ink); background: color-mix(in srgb,var(--app-surface) 96%,var(--app-primary) 4%); border-color: var(--app-border); box-shadow: var(--app-shadow-sm); }
.landing-feature-card:hover { border-color: color-mix(in srgb,var(--app-primary) 42%,var(--app-border)); box-shadow: 0 1.5rem 3.5rem color-mix(in srgb,var(--app-primary) 10%,transparent); }
.landing-feature-icon { color: var(--app-primary-hover); background: var(--app-primary-soft); border-color: color-mix(in srgb,var(--app-primary) 15%,var(--app-border)); }
.landing-flow-preview span { background: var(--app-surface-muted); border-color: var(--app-border); }
.landing-flow-preview span.is-current { background: color-mix(in srgb,var(--app-primary) 8%,var(--app-surface)); border-color: color-mix(in srgb,var(--app-primary) 52%,var(--app-border)); }
.landing-flow-preview small { color: var(--app-muted); }

.landing-steps { color: var(--app-ink); background: radial-gradient(circle at 12% 50%,color-mix(in srgb,var(--app-primary) 7%,transparent),transparent 25rem),var(--app-surface); border-color: var(--app-border); }
.landing-steps .app-eyebrow { color: var(--app-primary-hover); }
.landing-steps .landing-section-heading > p,.landing-step-list p { color: var(--app-muted); }
.landing-steps .landing-text-link { color: var(--app-primary-hover); }
.landing-step-list li { border-color: var(--app-border); }
.landing-step-list > li > span { color: var(--app-primary-hover); background: var(--app-primary-soft); border-color: color-mix(in srgb,var(--app-primary) 16%,var(--app-border)); }

.landing-security { color: var(--app-ink); background: var(--app-surface); }
.landing-security-card { background: color-mix(in srgb,var(--app-primary) 6%,var(--app-surface-muted)); border-color: color-mix(in srgb,var(--app-primary) 22%,var(--app-border)); box-shadow: var(--app-shadow-sm); }
.landing-security .app-eyebrow { color: var(--app-primary-hover); }
.landing-security p { color: var(--app-muted); }
.landing-security li { color: var(--app-ink-soft); }
.landing-security li i { color: var(--app-success); }

.landing-plans { color: var(--app-ink); background: radial-gradient(circle at 50% 15%,color-mix(in srgb,var(--app-primary) 8%,transparent),transparent 30rem),var(--app-surface-muted); border-color: var(--app-border); }
.landing-plans .app-eyebrow { color: var(--app-primary-hover); }
.landing-plans-heading > p { color: var(--app-muted); }
.landing-plan-card { color: var(--app-ink); background: var(--app-surface); border-color: var(--app-border); box-shadow: var(--app-shadow-sm); }
.landing-plan-card:hover { border-color: color-mix(in srgb,var(--app-primary) 42%,var(--app-border)); }
.landing-plan-card.is-business { background: radial-gradient(circle at 100% 0,color-mix(in srgb,var(--app-primary) 10%,transparent),transparent 20rem),var(--app-surface); border-color: color-mix(in srgb,var(--app-primary) 62%,var(--app-border)); box-shadow: 0 1.8rem 5rem color-mix(in srgb,var(--app-primary) 13%,transparent); }
.landing-plan-badge { color: var(--app-primary-hover); background: var(--app-primary-soft); border-color: color-mix(in srgb,var(--app-primary) 18%,var(--app-border)); }
.landing-plan-icon { color: var(--app-primary-hover); background: var(--app-primary-soft); border-color: color-mix(in srgb,var(--app-primary) 16%,var(--app-border)); }
.landing-plan-card header small,.landing-plan-card > p,.landing-plan-price span,.landing-plan-card li,.landing-plan-footnote { color: var(--app-muted); }
.landing-plan-card li strong { color: var(--app-ink-soft); }
.landing-plan-card li i { color: var(--app-success); }
.landing-plan-divider { background: var(--app-border); }
.landing-plan-card .btn-app-secondary { color: var(--app-ink); background: var(--app-surface); border-color: var(--app-border); }
.landing-plan-card .btn-app-secondary:hover { color: var(--app-primary-hover); background: var(--app-primary-soft); border-color: var(--app-primary); }

.landing-faq { color: var(--app-ink); background: radial-gradient(circle at 8% 18%,color-mix(in srgb,var(--app-primary) 6%,transparent),transparent 22rem),var(--app-surface); border-color: var(--app-border); }
.landing-faq .app-eyebrow { color: var(--app-primary-hover); }
.landing-faq .landing-section-heading > p,.landing-faq-list details p { color: var(--app-muted); }
.landing-faq-list,.landing-faq-list details { border-color: var(--app-border); }
.landing-faq-list summary { color: var(--app-ink); }
.landing-faq-list summary i { color: var(--app-primary-hover); background: var(--app-primary-soft); border-color: color-mix(in srgb,var(--app-primary) 15%,var(--app-border)); }
.landing-faq-list details[open] { background: color-mix(in srgb,var(--app-primary) 3%,var(--app-surface)); }

.landing-footer { color: var(--app-ink); background: var(--app-surface); border-color: var(--app-border); }
.landing-footer .brand { color: var(--app-ink); }
.landing-footer .brand small,.landing-footer p,.landing-footer nav a { color: var(--app-muted); }
.landing-footer nav a:hover { color: var(--app-primary-hover); }

@media (max-width: 1100px) {
  .landing-nav-links { display: none; }
  .landing-hero-grid { grid-template-columns: minmax(0,.9fr) minmax(27rem,1.1fr); gap: 2.5rem; }
  .landing-window-body { min-height: 24rem; }
  .landing-window { grid-template-columns: 7rem minmax(0,1fr); }
  .landing-preview-brand,.landing-preview-company { padding-inline: .48rem; }
  .landing-command-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .landing-dashboard-aside { display: none; }
  .landing-security-card { grid-template-columns: auto 1fr; }
  .landing-security ul { grid-column: 2; grid-template-columns: repeat(3,1fr); }
  .landing-profile-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .landing-profile-card { min-height: 20rem; }
  .landing-profile-card p { min-height: 4.5rem; }
}
@media (max-width: 900px) {
  .landing-header { position: absolute; }
  .landing-hero { padding-top: 8.5rem; }
  .landing-hero-grid, .landing-steps-grid { grid-template-columns: 1fr; }
  .landing-hero-copy { max-width: 43rem; }
  .landing-hero h1 { max-width: 11ch; }
  .landing-product { width: min(100%,42rem); margin-inline: auto; }
  .landing-feature-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .landing-profiles-heading, .landing-plans-heading { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .landing-api-grid { grid-template-columns: 1fr; }
  .landing-api-copy h2 { max-width: 17ch; }
  .landing-api-console { width: min(100%,42rem); margin-inline: auto; transform: none; }
  .landing-api-flow { grid-template-columns: auto minmax(7rem,1fr); }
  .landing-api-flow-targets { grid-column: 1 / -1; justify-content: flex-start; }
  .landing-plan-grid { max-width: 100%; }
  .landing-faq-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .landing-cta-content { align-items: flex-start; flex-direction: column; }
  .landing-footer-content { grid-template-columns: 1fr auto; }
  .landing-footer p { display: none; }
}
@media (max-width: 640px) {
  .landing-container { width: min(calc(100% - 1.5rem),78rem); }
  .landing-nav { min-height: 4.8rem; }
  .landing-nav .brand small, .landing-login-link, .landing-theme-toggle { display: none; }
  .landing-nav-actions .btn { min-height: 2.5rem; padding-inline: .8rem; font-size: .78rem; }
  .landing-hero { min-height: auto; padding: 7.6rem 0 4.5rem; }
  .landing-hero h1 { font-size: clamp(2.7rem,14vw,4rem); }
  .landing-hero-actions, .landing-cta-actions { align-items: stretch; flex-direction: column; width: 100%; }
  .landing-hero-actions .btn, .landing-cta-actions .btn { width: 100%; }
  .landing-proof-list { display: grid; }
  .landing-product { margin-top: 1rem; }
  .landing-window { transform: none; }
  .landing-window-company, .landing-floating-card { display: none; }
  .landing-window { grid-template-columns: 1fr; min-height: 0; }
  .landing-preview-sidebar { display: none; }
  .landing-preview-topbar { min-height: 3.25rem; }
  .landing-preview-plan { display: none; }
  .landing-dashboard-copy p { max-width: 16rem; }
  .landing-command-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .landing-dashboard-quick-grid { grid-template-columns: 1fr; }
  .landing-dashboard-quick-grid > span { min-height: 2.2rem; }
  .landing-window-body { min-height: 20rem; grid-template-columns: 2.8rem 1fr; }
  .landing-window-sidebar { padding-inline: .3rem; }
  .landing-window-sidebar span { width: 2rem; height: 2rem; }
  .landing-dashboard { padding: .8rem; }
  .landing-metrics { gap: .4rem; }
  .landing-metrics > div { padding: .55rem; }
  .landing-metrics span, .landing-metrics em { display: none; }
  .landing-metrics strong { font-size: 1.1rem; }
  .landing-dashboard-panels { grid-template-columns: 1fr; }
  .landing-tasks-panel { display: none; }
  .landing-section { padding: 4.25rem 0; }
  .landing-section-heading h2 { font-size: 2.2rem; }
  .landing-feature-grid { grid-template-columns: 1fr; margin-top: 2rem; }
  .landing-feature-main { grid-column: auto; }
  .landing-flow-preview { grid-template-columns: 1fr; }
  .landing-feature-card { min-height: auto; }
  .landing-value-rail { margin-top: 0; background: var(--app-surface-muted); }
  .landing-value-rail > div { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; padding: 1.25rem 0; border: 0; border-radius: 0; box-shadow: none; }
  .landing-value-rail > div > i { display: none; }
  .landing-value-rail span { grid-template-columns: 2.35rem 1fr; }
  .landing-value-rail span > i { width: 2.35rem; height: 2.35rem; }
  .landing-value-rail strong { font-size: .72rem; }
  .landing-profile-grid, .landing-plan-grid { grid-template-columns: 1fr; }
  .landing-profile-card { min-height: auto; }
  .landing-profile-card p { min-height: auto; }
  .landing-profile-note { align-items: flex-start; }
  .landing-api-status { align-items: flex-start; border-radius: var(--app-radius-sm); line-height: 1.4; }
  .landing-api-console pre { min-height: 17rem; padding: 1rem; font-size: .63rem; }
  .landing-api-webhook { position: static; min-width: 0; margin: 0 .75rem .75rem; box-shadow: none; }
  .landing-api-console-footer { flex-direction: column; gap: .45rem; }
  .landing-api-flow { grid-template-columns: 1fr; gap: 1rem; margin-top: 2.5rem; }
  .landing-api-flow-line { display: none; }
  .landing-api-flow-targets { grid-column: auto; }
  .landing-plan-card header { padding-right: 0; }
  .landing-plan-badge { position: static; align-self: flex-start; margin-bottom: 1rem; }
  .landing-plan-card > p, .landing-plan-price { min-height: 0; }
  .landing-faq-list summary { font-size: .9rem; }
  .landing-faq-list details[open] { margin-inline: 0; padding-inline: 0; }
  .landing-faq-list details p { padding-right: 0; }
  .landing-steps-grid { gap: 2.5rem; }
  .landing-step-list li { grid-template-columns: 3.3rem 1fr; gap: .8rem; }
  .landing-step-list > li > span { width: 2.8rem; height: 2.8rem; }
  .landing-security-card { grid-template-columns: 1fr; gap: 1.4rem; }
  .landing-security-mark { width: 4.5rem; height: 4.5rem; border-radius: 1.2rem; font-size: 1.8rem; }
  .landing-security ul { grid-column: auto; grid-template-columns: 1fr; }
  .landing-footer-content { grid-template-columns: 1fr; }
  .landing-footer nav { flex-wrap: wrap; gap: .8rem 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-window,.landing-api-console { transform: none; }
  .landing-api-flow-line > i { animation: none; }
  .landing-plan-card,.landing-feature-card,.landing-profile-card,.landing-step-list li::after { transition: none; }
}