:root {
  color-scheme: light;
  --ink: #0a1633;
  --muted: #63708a;
  --line: #dfe5ef;
  --surface: #ffffff;
  --canvas: #f7f9fc;
  --blue-950: #002060;
  --blue-800: #0c3f98;
  --blue-600: #1a5fd1;
  --blue-500: #2474f5;
  --blue-100: #e8f0ff;
  --coral: #ff7043;
  --amber: #f6a524;
  --radius-lg: 28px;
  --shadow: 0 24px 80px rgba(17, 45, 92, .12);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--canvas); -webkit-font-smoothing: antialiased; }
button, a { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
[hidden] { display: none !important; }
.shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 100; padding: 12px 18px; border-radius: 12px; background: #fff; box-shadow: var(--shadow); transition: top .2s; }
.skip-link:focus { top: 16px; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 50; height: 78px; border-bottom: 1px solid transparent; transition: background .25s, border-color .25s, box-shadow .25s; }
.site-header.is-scrolled { background: rgba(247, 249, 252, .86); border-color: rgba(209, 218, 232, .8); box-shadow: 0 10px 30px rgba(14, 36, 73, .05); backdrop-filter: blur(18px); }
.nav-shell { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 22px; font-weight: 780; letter-spacing: -.04em; }
.brand img { border-radius: 12px; }
.desktop-nav { display: flex; gap: 30px; margin-left: auto; }
.desktop-nav a { color: #526078; font-size: 14px; font-weight: 650; transition: color .2s; }
.desktop-nav a:hover { color: var(--blue-600); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.language-button { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.7); font-size: 12px; font-weight: 800; cursor: pointer; }
.language-button:hover { border-color: #afbed4; background: #fff; }
.language-select-wrap { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 10px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.7); color: #526078; }
.language-select-wrap:focus-within { border-color: #afbed4; background: #fff; }
.language-select { max-width: 145px; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; padding: 0 22px; border-radius: 15px; font-weight: 750; letter-spacing: -.015em; transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.button-small { min-height: 42px; padding-inline: 17px; border-radius: 13px; font-size: 13px; }
.button-dark { background: var(--ink); color: #fff; box-shadow: 0 10px 24px rgba(7, 22, 52, .16); }
.button-primary { color: #fff; background: linear-gradient(135deg, var(--blue-800), var(--blue-500)); box-shadow: 0 18px 35px rgba(36, 116, 245, .24); }
.button-primary:hover { box-shadow: 0 22px 42px rgba(36, 116, 245, .3); }
.button-disabled, .button-disabled:hover { cursor: not-allowed; opacity: .68; transform: none; box-shadow: none; }

.hero { position: relative; min-height: 800px; padding: 155px 0 105px; overflow: hidden; background: linear-gradient(180deg, #fbfcfe 0%, #f3f7fd 100%); }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .28; background-image: linear-gradient(rgba(30, 76, 145, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(30, 76, 145, .06) 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(to bottom, #000 0%, transparent 70%); }
.hero-glow { position: absolute; border-radius: 999px; filter: blur(4px); opacity: .8; pointer-events: none; }
.hero-glow-one { width: 550px; height: 550px; right: -180px; top: 25px; background: radial-gradient(circle, rgba(36,116,245,.2), rgba(36,116,245,0) 70%); }
.hero-glow-two { width: 390px; height: 390px; left: -220px; bottom: 0; background: radial-gradient(circle, rgba(83,173,245,.15), transparent 72%); }
.hero-grid { position: relative; display: grid; grid-template-columns: .86fr 1.14fr; align-items: center; gap: 62px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 23px; color: var(--blue-600); font-size: 12px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow > span:first-child { width: 30px; height: 2px; background: var(--blue-500); }
.hero h1, .section-heading h2, .platform-copy h2, .security-copy h2, .final-inner h2 { margin: 0; font-size: clamp(48px, 5.2vw, 76px); line-height: .99; letter-spacing: -.065em; font-weight: 770; }
.hero h1 em, .section-heading h2 em, .platform-copy h2 em, .security-copy h2 em, .final-inner h2 em { color: var(--blue-500); font-style: normal; }
.hero h1 em { display: inline-block; transform-origin: left center; animation: flexible-word 1.15s cubic-bezier(.45, 0, .2, 1) both; }
@keyframes flexible-word { 0%, 100% { transform: scaleX(1); } 42% { transform: scaleX(1.13); } 62% { transform: scaleX(.94); } 78% { transform: scaleX(1.04); } }
.hero-lead { max-width: 570px; margin: 27px 0 0; color: var(--muted); font-size: 18px; line-height: 1.65; }
.hero-actions { display: flex; align-items: center; gap: 26px; margin-top: 34px; }
.text-link { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 750; }
.text-link:hover { color: var(--blue-600); }
.hero-notes { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 31px; color: #68748a; font-size: 12px; font-weight: 620; }
.hero-notes > span { display: inline-flex; align-items: center; gap: 7px; }
.hero-notes i { width: 7px; height: 7px; border-radius: 50%; background: #26a972; box-shadow: 0 0 0 4px rgba(38,169,114,.1); }

.hero-product { position: relative; min-width: 0; }
.product-orbit { position: absolute; border: 1px solid rgba(36,116,245,.13); border-radius: 50%; pointer-events: none; }
.orbit-one { width: 650px; height: 650px; left: -20px; top: -65px; }
.orbit-two { width: 520px; height: 520px; left: 45px; top: 0; }
.phone-device { position: relative; z-index: 2; width: 322px; margin: 0 auto; padding: 8px; border: 1px solid #34415a; border-radius: 44px; background: linear-gradient(145deg,#26334b,#101a2c 55%,#202d43); box-shadow: 0 38px 95px rgba(12,35,76,.28), inset 0 0 0 2px rgba(255,255,255,.08); }
.phone-screen { position: relative; overflow: hidden; height: 578px; border-radius: 35px; background: #fff; }
.phone-home-indicator { width: 78px; height: 4px; margin: 7px auto 5px; border-radius: 99px; background: #17243b; }
.app-window { position: relative; z-index: 2; overflow: hidden; height: 535px; border: 0; border-radius: 0; background: rgba(255,255,255,.97); box-shadow: none; }
.phone-screen > .app-window { height: 562px; }
.phone-screen .app-body { height: 513px; }
.window-bar { height: 49px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; border-bottom: 1px solid #e6ebf3; }
.window-brand { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.window-brand img { width: 27px; height: 27px; border-radius: 8px; }
.window-actions { display: flex; gap: 8px; }
.window-actions span { width: 8px; height: 8px; border: 1px solid #b7c1d1; border-radius: 50%; }
.app-body { display: grid; grid-template-columns: 1fr; height: 486px; min-height: 0; }
.app-sidebar { display: none; }
.app-sidebar { padding: 18px 12px; border-right: 1px solid #e9edf4; background: #f8faff; }
.sidebar-profile { display: flex; align-items: center; gap: 8px; margin: 0 5px 20px; font-size: 10px; }
.sidebar-profile > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; color: #fff; background: var(--ink); font-weight: 800; }
.side-item { width: 100%; height: 37px; display: flex; align-items: center; gap: 8px; padding: 0 9px; border: 0; border-radius: 10px; background: transparent; color: #657188; font-size: 10px; text-align: left; }
.side-item b { margin-left: auto; font-size: 9px; }
.side-item.active { color: var(--blue-600); background: #e9f1ff; font-weight: 750; }
.side-icon { width: 16px; text-align: center; font-weight: 900; }
.side-label { margin: 20px 9px 8px; color: #a0a9ba; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.list-dot { width: 8px; height: 8px; border-radius: 3px; background: var(--blue-500); }
.list-dot.coral { background: var(--coral); }
.task-pane { display: flex; flex-direction: column; min-height: 0; padding: 14px 13px 12px; }
.task-heading { display: flex; align-items: center; justify-content: space-between; }
.task-heading small { color: #8a95a7; font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.task-heading h2 { margin: 3px 0 0; font-size: 21px; letter-spacing: -.04em; }
.task-heading button { width: 34px; height: 34px; border: 0; border-radius: 12px; color: #fff; background: var(--blue-500); font-size: 23px; line-height: 1; box-shadow: 0 10px 20px rgba(36,116,245,.22); }
.summary-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin: 13px 0 10px; }
.summary-row > span { display: flex; align-items: baseline; gap: 5px; padding: 8px 7px; border: 1px solid #e5eaf2; border-radius: 10px; background: #fbfcfe; }
.summary-row b { font-size: 13px; }
.summary-row small { color: #8a95a6; font-size: 7px; }
.task-list { display: grid; gap: 7px; }
.task-card { display: grid; grid-template-columns: 22px 1fr; gap: 8px; min-height: 67px; padding: 10px 8px; border: 1px solid #e3e8f1; border-radius: 12px; background: #fff; box-shadow: 0 5px 15px rgba(17,45,92,.035); }
.task-card-focus { border-color: #aec9fa; box-shadow: 0 7px 22px rgba(36,116,245,.08); }
.task-check { width: 20px; height: 20px; border: 1.5px solid #a9b5c7; border-radius: 50%; background: #fff; }
.task-card strong { display: block; font-size: 10px; line-height: 1.35; }
.task-card p { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0; }
.pill { display: inline-flex; padding: 4px 6px; border-radius: 99px; color: #667288; background: #f1f4f8; font-size: 7px; font-style: normal; }
.pill-blue { color: var(--blue-600); background: #eaf1ff; }
.pill-amber { color: #b87405; background: #fff4de; }
.steps { display: grid; grid-template-columns: 7px auto; gap: 3px 6px; align-items: center; margin-top: 6px; color: #8b95a6; }
.steps span { width: 5px; height: 5px; margin-left: 1px; border: 1px solid #aeb8c8; border-radius: 50%; }
.steps small { font-size: 7px; }
.task-card.completed { opacity: .55; }
.task-card.completed strong { text-decoration: line-through; }
.task-check.checked { display: grid; place-items: center; border-color: var(--blue-500); color: #fff; background: var(--blue-500); font-size: 10px; }
.phone-tab-bar { display: grid; grid-template-columns: repeat(4,1fr); margin-top: auto; padding: 10px 0 2px; border-top: 1px solid #e9edf4; }
.phone-tab-bar span { display: flex; flex-direction: column; align-items: center; gap: 3px; color: #7e899c; }
.phone-tab-bar span.is-active { color: var(--blue-600); }
.phone-tab-bar i { font-size: 14px; font-style: normal; line-height: 1; }
.phone-tab-bar small { font-size: 7px; font-weight: 700; }
.floating-card { position: absolute; z-index: 4; display: flex; align-items: center; border: 1px solid rgba(183,198,221,.85); background: rgba(255,255,255,.9); box-shadow: 0 18px 44px rgba(24,51,96,.16); backdrop-filter: blur(16px); }
.reminder-card { right: -35px; bottom: 62px; gap: 10px; width: 180px; padding: 13px; border-radius: 16px; }
.reminder-card .mini-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: #c67c04; background: #fff1d7; }
.reminder-card small, .reminder-card strong { display: block; }
.reminder-card small { margin-bottom: 2px; color: #8a94a5; font-size: 8px; }
.reminder-card strong { font-size: 10px; }
.sync-card { left: -18px; bottom: 26px; gap: 8px; padding: 10px 14px; border-radius: 99px; color: #42705d; font-size: 9px; font-weight: 750; }
.sync-dot { width: 8px; height: 8px; border-radius: 50%; background: #32b57d; box-shadow: 0 0 0 4px rgba(50,181,125,.12); }

.trust-strip { border-top: 1px solid #e3e8f1; border-bottom: 1px solid #e3e8f1; background: #fff; }
.trust-grid { min-height: 135px; display: grid; grid-template-columns: repeat(3,1fr); align-items: center; }
.trust-grid p { min-height: 52px; display: flex; flex-direction: column; justify-content: center; margin: 0; padding: 0 34px; border-right: 1px solid #e6ebf2; }
.trust-grid p:first-child { padding-left: 0; }
.trust-grid p:last-child { border-right: 0; }
.trust-grid strong { margin-bottom: 5px; font-size: 14px; }
.trust-grid span { color: #7a8597; font-size: 12px; }

.section { padding: 120px 0; }
.section-kicker { margin: 0 0 20px; color: var(--blue-600); font-size: 11px; font-weight: 850; letter-spacing: .16em; }
.section-heading { max-width: 820px; }
.section-heading h2, .platform-copy h2, .security-copy h2, .final-inner h2 { font-size: clamp(39px, 4.4vw, 61px); line-height: 1.05; }
.section-heading > p:last-child { max-width: 650px; margin: 25px 0 0; color: var(--muted); font-size: 17px; line-height: 1.7; }
.experience { background: #fff; }
.customizer { overflow: hidden; margin-top: 68px; border: 1px solid #dce3ed; border-radius: 30px; background: #f7f9fc; box-shadow: var(--shadow); }
.demo-tabs { display: grid; grid-template-columns: repeat(3,1fr); padding: 10px; border-bottom: 1px solid #dfe5ee; background: #fff; }
.demo-tabs button { position: relative; min-height: 70px; display: grid; grid-template-columns: 32px 1fr; grid-template-rows: auto auto; align-content: center; column-gap: 10px; padding: 10px 16px; border: 0; border-radius: 16px; color: #778397; background: transparent; text-align: left; cursor: pointer; transition: color .2s, background .2s; }
.demo-tabs button:not(:last-child)::after { content: ""; position: absolute; right: -5px; top: 15px; bottom: 15px; width: 1px; background: #e6ebf2; }
.demo-tabs button > span { grid-row: 1 / 3; align-self: center; width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid #dce3ed; border-radius: 9px; color: #8a96a8; font-size: 8px; font-weight: 850; }
.demo-tabs button b { align-self: end; color: var(--ink); font-size: 13px; }
.demo-tabs button small { align-self: start; margin-top: 3px; font-size: 9px; }
.demo-tabs button[aria-selected="true"] { color: var(--blue-600); background: #eef4ff; }
.demo-tabs button[aria-selected="true"] > span { color: #fff; border-color: var(--blue-500); background: var(--blue-500); }
.demo-panel { display: none; grid-template-columns: .8fr 1.2fr; }
.demo-panel.is-active { display: grid; }
.customizer-controls { padding: 42px; border-right: 1px solid #dfe5ee; background: #fff; }
.control-label { margin: 0 0 11px; color: var(--blue-600); font-size: 9px; font-weight: 850; letter-spacing: .15em; }
.customizer-controls h3 { margin: 0; font-size: 30px; letter-spacing: -.04em; }
.customizer-controls > p:not(.control-label):not(.setting-group-title):not(.settings-scope) { margin: 12px 0 30px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.setting-group-title { margin: 0 0 5px; color: #8b96a8; font-size: 9px; font-weight: 850; letter-spacing: .14em; }
.setting-list { display: grid; gap: 5px; }
.setting-list label { min-height: 59px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 4px; border-bottom: 1px solid #edf0f5; cursor: pointer; }
.setting-list label > span { display: flex; flex-direction: column; gap: 4px; }
.setting-list b { font-size: 13px; }
.setting-list small { color: #8993a4; font-size: 10px; }
.setting-list input { position: absolute; opacity: 0; pointer-events: none; }
.setting-list i { position: relative; width: 42px; height: 24px; flex: 0 0 auto; border-radius: 99px; background: #dce2eb; transition: background .2s; }
.setting-list i::after { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(8,28,60,.18); transition: transform .2s; }
.setting-list input:checked + i { background: var(--blue-500); }
.setting-list input:checked + i::after { transform: translateX(18px); }
.setting-list input:focus-visible + i { outline: 3px solid rgba(36,116,245,.25); outline-offset: 2px; }
.demo-setting-block { margin-top: 20px; padding-top: 19px; border-top: 1px solid #edf0f5; }
.setting-block-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.setting-block-heading > span { display: flex; flex-direction: column; gap: 4px; }
.setting-block-heading b { font-size: 13px; }
.setting-block-heading small { color: #8993a4; font-size: 10px; }
.setting-block-heading em { padding: 5px 7px; border-radius: 99px; color: var(--blue-600); background: var(--blue-100); font-size: 7px; font-style: normal; font-weight: 800; white-space: nowrap; }
.time-preset-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 13px; }
.time-preset-row button { min-height: 36px; border: 1px solid #dce3ed; border-radius: 10px; color: #667288; background: #fff; font-size: 10px; font-weight: 750; cursor: pointer; transition: .2s ease; }
.time-preset-row button:hover { border-color: #aac7fa; }
.time-preset-row button.is-selected { color: #fff; border-color: var(--blue-500); background: var(--blue-500); box-shadow: 0 8px 18px rgba(36,116,245,.2); }
.snooze-inputs { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin-top: 13px; }
.snooze-inputs label { display: grid; gap: 6px; padding: 10px; border: 1px solid #e0e6ef; border-radius: 11px; background: #fafbfd; }
.snooze-inputs label > span:first-child { color: #7c8799; font-size: 8px; font-weight: 700; }
.snooze-inputs label > span:last-child { display: flex; align-items: center; gap: 4px; }
.snooze-inputs input { width: 45px; padding: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 15px; font-weight: 800; }
.snooze-inputs i { color: #8a95a6; font-size: 9px; font-style: normal; }
.settings-scope { margin: 20px 0 0; padding: 14px; border-radius: 12px; color: #61708a; background: #f3f7fd; font-size: 9px; line-height: 1.6; }
.customizer-preview { position: relative; align-self: center; width: min(620px, calc(100% - 52px)); min-height: 500px; margin: 42px auto; padding: 24px; border: 1px solid #e0e6ef; border-radius: 23px; background: #fff; box-shadow: 0 20px 55px rgba(24,54,100,.1); transition: background .2s; }
.flow-preview { min-height: 560px; }
.preview-topbar { display: flex; align-items: center; justify-content: space-between; font-size: 17px; font-weight: 800; }
.preview-topbar > small { color: #8a96a8; font-size: 7px; letter-spacing: .11em; }
.preview-topbar div { display: flex; gap: 5px; }
.preview-topbar button { width: 32px; height: 32px; border: 0; border-radius: 9px; color: #6f7a8e; background: #f4f6fa; }
.preview-lists { display: flex; gap: 7px; margin-top: 22px; }
.preview-lists button { min-height: 36px; padding: 0 13px; border: 0; border-radius: 11px; color: #68748a; background: #f0f3f8; font-size: 10px; font-weight: 700; }
.preview-lists button.selected { color: #fff; background: var(--blue-500); }
.preview-lists button { cursor: pointer; }
.preview-lists b { margin-left: 6px; font-size: 9px; opacity: .8; }
.preview-filter { display: flex; justify-content: space-between; align-items: flex-end; margin: 26px 0 12px; }
.preview-filter div { display: flex; flex-direction: column; gap: 4px; }
.preview-filter small { color: #8a95a7; font-size: 8px; font-weight: 800; }
.preview-filter strong { font-size: 18px; }
.preview-filter button { height: 31px; padding: 0 11px; border: 1px solid #dce3ed; border-radius: 10px; background: #fff; font-size: 9px; font-weight: 700; }
.preview-task { display: grid; grid-template-columns: 23px 1fr; gap: 10px; min-height: 76px; padding: 14px 12px; border: 1px solid #e2e7ef; border-radius: 14px; margin-bottom: 8px; transition: min-height .2s, padding .2s; }
.preview-check { width: 20px; height: 20px; padding: 0; border: 1.5px solid #aab5c5; border-radius: 50%; background: #fff; cursor: pointer; }
.preview-task b { font-size: 11px; }
.preview-task p { display: flex; gap: 6px; margin: 7px 0 0; color: #778296; font-size: 8px; }
.preview-task em { padding-left: 6px; border-left: 1px solid #ccd4e1; color: var(--blue-600); font-style: normal; }
.preview-task ul { margin: 9px 0 0; padding: 0; list-style: none; color: #8993a5; font-size: 8px; }
.preview-task li { position: relative; margin: 5px 0 0 6px; padding-left: 13px; }
.preview-task li::before { content: ""; position: absolute; left: 0; top: 3px; width: 4px; height: 4px; border: 1px solid #9da8b9; border-radius: 50%; }
.preview-task li:not(:last-child)::after { content: ""; position: absolute; left: 2px; top: 9px; width: 1px; height: 7px; background: #cbd3df; }
.preview-completed { opacity: .56; }
.preview-completed b { text-decoration: line-through; }
.preview-check.is-done { display: grid; place-items: center; border-color: var(--blue-500); color: #fff; background: var(--blue-500); font-size: 9px; }
.customizer-preview.is-compact .preview-task { min-height: 57px; padding-block: 10px; }
.customizer-preview.is-compact .preview-task ul { display: none; }
.demo-help { margin: 15px 0 0; color: #8390a3; font-size: 8px; line-height: 1.5; text-align: center; }
.smart-entry-demo { margin-top: 14px; padding: 14px; border: 1px solid #dce6f5; border-radius: 14px; background: #f7faff; }
.smart-entry-demo > label { display: block; margin-bottom: 8px; color: var(--blue-600); font-size: 7px; font-weight: 850; letter-spacing: .12em; }
.smart-entry-field { display: flex; align-items: center; gap: 8px; }
.smart-entry-field input { min-width: 0; flex: 1; height: 36px; padding: 0 11px; border: 1px solid #dbe3ef; border-radius: 10px; outline: 0; color: var(--ink); background: #fff; font-size: 10px; }
.smart-entry-field input:focus { border-color: #87b1fa; box-shadow: 0 0 0 3px rgba(36,116,245,.1); }
.smart-entry-demo p { display: flex; align-items: center; gap: 7px; margin: 9px 0 0; color: #8390a3; font-size: 8px; }
.smart-entry-demo p b { padding: 4px 7px; border-radius: 99px; color: #256b55; background: #e6f6ef; font-size: 8px; }
.editor-entry { margin-top: 22px; }
.editor-entry p { display: block; line-height: 1.5; }
.first-block { margin-top: 0; padding-top: 0; border-top: 0; }
.quick-preview { min-height: 455px; display: flex; flex-direction: column; justify-content: center; }
.result-card { padding: 20px; border: 1px solid #dce4ef; border-radius: 17px; background: #fbfcfe; box-shadow: 0 10px 25px rgba(24,54,100,.06); }
.result-card small { display: block; margin-bottom: 10px; color: #8995a7; font-size: 7px; font-weight: 850; letter-spacing: .12em; }
.result-card > b { display: block; font-size: 14px; line-height: 1.4; }
.result-card p { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; color: #758196; font-size: 10px; }
.result-card p strong { padding: 6px 9px; border-radius: 99px; color: var(--blue-600); background: var(--blue-100); font-size: 10px; }
.result-card-primary { border-color: #b8d0fb; background: linear-gradient(135deg,#f7faff,#edf4ff); }
.result-card-primary p strong { color: #237154; background: #e3f5ec; }
.result-arrow { margin: 10px 0; color: #8ca8d5; text-align: center; }
.notification-demo { margin-top: 10px; margin-bottom: 55px; padding: 13px; border: 1px solid #e2e7ef; border-radius: 14px; background: #fff; box-shadow: 0 9px 24px rgba(27,55,100,.07); }
.notification-demo > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.notification-demo small { color: #8995a6; font-size: 7px; letter-spacing: .1em; }
.notification-demo b { font-size: 10px; }
.notification-actions { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-top: 11px; }
.notification-actions button { min-height: 31px; border: 1px solid #dce4f0; border-radius: 9px; color: #637087; background: #f8fafc; font-size: 8px; font-weight: 750; }
.notification-actions button:first-child { color: #fff; border-color: var(--blue-500); background: var(--blue-500); }
.notification-actions button { cursor: pointer; transition: transform .15s, box-shadow .15s; }
.notification-actions button:active { transform: translateY(1px); }
.notification-preview { min-height: 455px; color: #fff; background: linear-gradient(155deg,#10264e,#08152d); }
.phone-status { display: flex; align-items: center; justify-content: space-between; color: #bdcae0; font-size: 9px; }
.phone-status i { width: 35px; height: 7px; border: 1px solid rgba(255,255,255,.32); border-radius: 99px; }
.notification-preview .notification-demo { margin: 54px 0 14px; padding: 20px; border-color: rgba(255,255,255,.13); color: #fff; background: rgba(255,255,255,.09); box-shadow: 0 22px 50px rgba(0,0,0,.22); backdrop-filter: blur(18px); }
.notification-preview .notification-demo > div:first-child { align-items: flex-start; flex-direction: column; gap: 5px; }
.notification-preview .notification-demo small { color: #91b7f3; }
.notification-preview .notification-demo b { font-size: 14px; }
.notification-preview .notification-demo p { margin: 0; color: #adbad0; font-size: 9px; }
.notification-preview .notification-actions button { color: #d4dff0; border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.07); }
.notification-preview .notification-actions button:first-child { color: #fff; border-color: #347ef7; background: #347ef7; }
.notification-feedback { min-height: 67px; display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 11px; padding: 12px; border: 1px solid rgba(127,171,241,.2); border-radius: 14px; background: rgba(64,111,187,.12); }
.notification-feedback > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #0c2a60; background: #8cb9ff; font-size: 12px; font-weight: 900; }
.notification-feedback div { display: flex; flex-direction: column; gap: 3px; }
.notification-feedback b { font-size: 10px; }
.notification-feedback small { color: #a7b7cf; font-size: 8px; }
.notification-feedback.is-success { border-color: rgba(77,205,146,.28); background: rgba(44,181,123,.13); }
.notification-feedback.is-success > span { color: #073a28; background: #6ed5a7; }
.notification-preview .demo-help { color: #8ea1c0; }
.customizer-footnote { margin: 0; border-top: 1px solid #dfe5ee; border-radius: 0; padding: 17px 25px; text-align: center; }

.features { background: #f4f7fb; }
.section-heading-row { max-width: none; display: grid; grid-template-columns: 1fr .58fr; align-items: end; gap: 80px; }
.section-heading-row > p:last-child { margin: 0 0 4px; }
.bento-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 65px; }
.feature-card { position: relative; min-height: 380px; overflow: hidden; padding: 36px; border: 1px solid #dce3ed; border-radius: 26px; background: #fff; }
.feature-card h3 { margin: 23px 0 11px; font-size: 24px; line-height: 1.15; letter-spacing: -.04em; }
.feature-card p { max-width: 480px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.feature-number { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 25px; border: 1px solid #dce3ed; border-radius: 99px; color: var(--blue-600); font-size: 9px; font-weight: 850; }
.feature-wide { grid-column: 1 / -1; min-height: 400px; display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 45px; }
.feature-dark { color: #fff; border-color: #12254d; background: linear-gradient(145deg, #071630, #0c2a60); }
.feature-dark p { color: #aebbd2; }
.feature-dark .feature-number { border-color: rgba(255,255,255,.2); color: #8db9ff; }
.timeline-visual { position: relative; height: 220px; }
.timeline-line { position: absolute; left: 12%; right: 12%; top: 50%; height: 2px; background: linear-gradient(90deg, #cbd9ef, var(--blue-500), #d7dfeb); }
.timeline-point { position: absolute; top: calc(50% - 40px); width: 130px; display: grid; grid-template-columns: 25px 1fr; grid-template-rows: auto auto; column-gap: 9px; padding: 14px; border: 1px solid #dce4f0; border-radius: 15px; background: #fff; box-shadow: 0 13px 35px rgba(24,55,104,.12); }
.timeline-point i { grid-row: 1 / 3; align-self: center; width: 23px; height: 23px; border: 6px solid #ddebff; border-radius: 50%; background: var(--blue-500); }
.timeline-point span { color: #8290a4; font-size: 8px; }
.timeline-point b { margin-top: 3px; font-size: 13px; }
.point-one { left: 7%; }
.point-two { right: 7%; }
.point-two i { border-color: #ffe9c5; background: var(--amber); }
.repeat-builder { margin: 35px 0 28px; padding: 17px; border: 1px solid rgba(144,181,241,.2); border-radius: 18px; background: rgba(255,255,255,.055); }
.repeat-builder-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.repeat-builder-head span { color: #78a9f8; font-size: 7px; font-weight: 850; letter-spacing: .12em; }
.repeat-builder-head b { font-size: 10px; }
.repeat-visual { display: grid; grid-template-columns: repeat(7,1fr); gap: 7px; margin: 17px 0; }
.repeat-visual span { display: grid; place-items: center; aspect-ratio: 1; border-radius: 11px; color: #8fa5c9; background: rgba(79,142,246,.09); border: 1px solid rgba(126,172,247,.18); font-size: 10px; font-weight: 750; }
.repeat-visual span.selected { color: #071630; background: #8cb9ff; border-color: #8cb9ff; box-shadow: 0 7px 15px rgba(80,142,240,.2); }
.repeat-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.repeat-summary > span { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 10px; background: rgba(5,19,45,.4); }
.repeat-summary small { color: #7893bd; font-size: 6px; letter-spacing: .09em; }
.repeat-summary b { font-size: 8px; }
.widget-visual { margin: 5px 0 30px; padding: 19px; border-radius: 19px; color: #d9e7ff; background: linear-gradient(145deg, #07152e, #0d2d64); box-shadow: 0 16px 34px rgba(9,33,75,.19); }
.widget-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; color: #fff; font-size: 12px; }
.widget-head span { font-size: 18px; }
.widget-visual p { display: flex; align-items: center; gap: 10px; margin: 12px 0; color: #d5e2f8; font-size: 9px; }
.widget-visual i { width: 14px; height: 14px; border: 1.5px solid #83a9e8; border-radius: 50%; }
.calendar-visual { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; margin: 32px 0 50px; }
.calendar-visual span { position: relative; display: grid; place-items: center; height: 54px; border: 1px solid #e2e7ef; border-radius: 15px; color: #768297; font-size: 11px; }
.calendar-visual span.selected { color: #fff; background: var(--blue-500); border-color: var(--blue-500); box-shadow: 0 10px 22px rgba(36,116,245,.2); }
.calendar-visual i { position: absolute; bottom: 7px; width: 4px; height: 4px; border-radius: 50%; background: #fff; }
.offline-card { min-height: 380px; display: flex; flex-direction: column; }
.offline-card .offline-visual { flex: 1; min-height: 150px; margin-top: 20px; }
.offline-visual { display: flex; align-items: center; justify-content: center; }
.device { width: 100px; height: 135px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; border: 1px solid #dce4ef; border-radius: 22px; background: #fff; box-shadow: 0 16px 35px rgba(23,51,96,.09); }
.device span { color: #7d899b; font-size: 9px; }
.device i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; background: #2caf79; font-style: normal; }
.cloud-core { width: 78px; height: 78px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg,var(--blue-800),var(--blue-500)); box-shadow: 0 15px 35px rgba(36,116,245,.24); }
.cloud-core i { position: absolute; width: 50px; height: 50px; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; }
.cloud-core b { font-size: 10px; }
.sync-path { width: 75px; display: flex; justify-content: space-evenly; }
.sync-path span { width: 5px; height: 5px; border-radius: 50%; background: #78a8f7; opacity: .35; animation: pulse 1.8s infinite; }
.sync-path span:nth-child(2) { animation-delay: .25s; }.sync-path span:nth-child(3) { animation-delay: .5s; }
.sync-path.reverse { transform: rotate(180deg); }
.personalization-card { min-height: 365px; color: #fff; border-color: #14336e; background: linear-gradient(135deg,#071630,#0a2c66 62%,#174c9e); }
.personalization-card p { color: #b8c5da; }
.personalization-card .feature-number { color: #9ec3ff; border-color: rgba(255,255,255,.2); }
.settings-cloud { position: relative; min-height: 240px; }
.settings-cloud span, .settings-cloud i { position: absolute; display: grid; place-items: center; border: 1px solid rgba(154,190,247,.22); border-radius: 99px; color: #cfe0fb; background: rgba(255,255,255,.07); font-size: 9px; font-style: normal; font-weight: 750; box-shadow: 0 12px 30px rgba(0,0,0,.1); }
.settings-cloud span:nth-child(1) { width: 90px; height: 40px; left: 5%; top: 8%; }
.settings-cloud span:nth-child(2) { width: 112px; height: 44px; left: 35%; top: 0; }
.settings-cloud span:nth-child(3) { width: 108px; height: 43px; right: 4%; top: 17%; }
.settings-cloud span:nth-child(4) { width: 96px; height: 40px; left: 0; top: 55%; }
.settings-cloud span:nth-child(5) { width: 88px; height: 39px; right: 5%; top: 62%; }
.settings-cloud span:nth-child(6) { width: 95px; height: 39px; left: 25%; bottom: 0; }
.settings-cloud span:nth-child(7) { width: 80px; height: 37px; right: 25%; bottom: 3%; }
.settings-cloud span:nth-child(8) { width: 61px; height: 34px; right: 0; bottom: 0; }
.settings-cloud i { width: 124px; height: 124px; left: 50%; top: 50%; transform: translate(-50%,-50%); color: #09255a; border: 8px solid rgba(140,185,255,.22); border-radius: 50%; background: #8cb9ff; font-size: 12px; box-shadow: 0 18px 45px rgba(2,12,30,.28); }

.platforms { color: #fff; background: #071630; }
.platform-grid { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 100px; }
.platform-copy .section-kicker { color: #79abff; }
.platform-copy h2 em { color: #75a9ff; }
.platform-copy > p:not(.section-kicker) { max-width: 500px; margin: 26px 0 33px; color: #aab7cc; font-size: 16px; line-height: 1.7; }
.platform-stack { display: grid; gap: 14px; }
.platform-stack article { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 18px; min-height: 145px; padding: 23px; border: 1px solid rgba(174,195,229,.16); border-radius: 22px; background: rgba(255,255,255,.055); }
.platform-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 17px; font-size: 17px; font-weight: 850; }
.android-icon { color: #a9ccff; background: rgba(70,135,237,.17); }
.web-icon { color: #0a285f; background: #dceaff; }
.platform-stack small { color: #7195cf; font-size: 8px; font-weight: 850; letter-spacing: .14em; }
.platform-stack h3 { margin: 6px 0; font-size: 18px; }
.platform-stack p { margin: 0; color: #a8b5ca; font-size: 11px; line-height: 1.5; }
.status-pill { padding: 7px 10px; border-radius: 99px; color: #91baff; background: rgba(90,145,235,.12); font-size: 8px; font-weight: 750; white-space: nowrap; }
.status-live { color: #89d5b4; background: rgba(54,176,124,.12); }

.security { background: #fff; }
.security-panel { display: grid; grid-template-columns: 130px 1fr .9fr; align-items: center; gap: 48px; padding: 55px; border: 1px solid #dae2ed; border-radius: 30px; background: linear-gradient(135deg,#f8fbff,#eef4fd); }
.security-mark { width: 112px; height: 112px; display: grid; place-items: center; border-radius: 33px; background: linear-gradient(145deg,var(--blue-800),var(--blue-500)); box-shadow: 0 24px 42px rgba(36,116,245,.22); }
.security-mark svg { width: 54px; height: 54px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.security-copy h2 { font-size: clamp(35px,3.5vw,50px); }
.security-copy > p:last-child { margin: 21px 0 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.security-points { display: grid; gap: 12px; }
.security-points p { display: grid; grid-template-columns: 27px 1fr; gap: 11px; margin: 0; padding: 13px; border-radius: 14px; background: rgba(255,255,255,.7); }
.security-points i { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: #168b5c; background: #ddf5ea; font-size: 10px; font-style: normal; }
.security-points span { display: flex; flex-direction: column; gap: 3px; }
.security-points b { font-size: 11px; }
.security-points small { color: #7f8a9b; font-size: 9px; line-height: 1.4; }

.final-cta { position: relative; overflow: hidden; padding: 105px 0; color: #fff; background: #05132d; text-align: center; }
.final-cta::before { content: ""; position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(rgba(114,165,247,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(114,165,247,.14) 1px,transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(circle at center,#000,transparent 72%); }
.cta-glow { position: absolute; width: 700px; height: 420px; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle,rgba(36,116,245,.28),transparent 68%); }
.final-inner { position: relative; display: flex; flex-direction: column; align-items: center; }
.final-inner img { margin-bottom: 25px; border-radius: 21px; box-shadow: 0 18px 42px rgba(0,0,0,.25); }
.final-inner .section-kicker { color: #84b2ff; }
.final-inner h2 em { color: #7aabff; }
.final-inner > p:not(.section-kicker) { max-width: 570px; margin: 23px 0 31px; color: #aebacf; line-height: 1.7; }
.button-light { color: #08204c; background: #fff; box-shadow: 0 17px 38px rgba(0,0,0,.22); }
footer { background: #030d20; color: #9dabc1; }
.footer-inner { min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 11px; }
.footer-brand { color: #fff; font-size: 17px; }
.footer-brand img { border-radius: 10px; }
.footer-links { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.footer-links a { color: #c4cfdf; font-weight: 700; transition: color .2s; }
.footer-links a:hover { color: #fff; }
.footer-inner > a:last-child { color: #dbe7fa; font-weight: 700; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .75s ease, transform .75s ease; }
.reveal-delay { transition-delay: .12s; }
.reveal.is-visible { opacity: 1; transform: none; }
@keyframes pulse { 0%,100%{opacity:.22;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)} }

@media (max-width: 980px) {
  .desktop-nav { display: none; }
  .hero { padding-top: 135px; }
  .hero-grid { grid-template-columns: 1fr; gap: 70px; }
  .hero-copy { max-width: 700px; }
  .hero-product { width: min(700px,100%); margin-inline: auto; }
  .trust-grid { grid-template-columns: 1fr; padding: 22px 0; }
  .trust-grid p, .trust-grid p:first-child { min-height: 70px; padding: 16px 0; border-right: 0; border-bottom: 1px solid #e6ebf2; }
  .trust-grid p:last-child { border-bottom: 0; }
  .demo-panel.is-active { grid-template-columns: 1fr; }
  .customizer-controls { border-right: 0; border-bottom: 1px solid #dfe5ee; }
  .section-heading-row { grid-template-columns: 1fr; gap: 24px; }
  .feature-wide { grid-template-columns: 1fr; }
  .platform-grid { grid-template-columns: 1fr; gap: 60px; }
  .security-panel { grid-template-columns: 100px 1fr; }
  .security-points { grid-column: 1 / -1; grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 680px) {
  .shell { width: min(100% - 28px, 1180px); }
  .site-header { height: 68px; }
  .brand { font-size: 19px; }
  .brand img { width: 37px; height: 37px; }
  .button-small { display: none; }
  .hero { min-height: auto; padding: 118px 0 75px; }
  .hero h1 { font-size: 47px; }
  .hero-lead { font-size: 16px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 20px; }
  .hero-notes { flex-direction: column; gap: 11px; }
  .phone-device { width: min(322px,100%); }
  .app-window { transform: none; }
  .app-body { grid-template-columns: 1fr; }
  .app-sidebar { display: none; }
  .task-pane { padding: 14px 13px 12px; }
  .summary-row > span { padding: 9px 7px; }
  .reminder-card { right: -6px; bottom: -20px; }
  .sync-card { left: -4px; bottom: 38px; }
  .section { padding: 86px 0; }
  .section-heading h2, .platform-copy h2, .security-copy h2, .final-inner h2 { font-size: 40px; }
  .customizer { margin-top: 48px; border-radius: 23px; }
  .demo-tabs { padding: 7px; }
  .demo-tabs button { min-height: 66px; grid-template-columns: 20px minmax(0,1fr); column-gap: 6px; padding: 7px 5px; }
  .demo-tabs button > span { width: 20px; height: 20px; border-radius: 6px; font-size: 7px; }
  .demo-tabs button b { font-size: 11px; }
  .demo-tabs button small { display: block; margin-top: 2px; font-size: 7px; line-height: 1.2; }
  .customizer-controls { padding: 29px 22px; }
  .customizer-preview { width: calc(100% - 24px); margin: 28px auto; padding: 17px; }
  .flow-preview, .quick-preview, .notification-preview { min-height: auto; }
  .notification-demo > div:first-child { align-items: flex-start; flex-direction: column; gap: 4px; }
  .preview-lists { overflow-x: auto; }
  .preview-lists button { white-space: nowrap; }
  .bento-grid { grid-template-columns: 1fr; }
  .feature-wide { grid-column: auto; }
  .feature-card { min-height: auto; padding: 27px; }
  .timeline-visual { height: 190px; }
  .timeline-point { width: 115px; }
  .point-one { left: 0; }.point-two { right: 0; }
  .offline-visual { transform: scale(.82); margin-inline: -38px; }
  .settings-cloud { transform: scale(.9); margin-inline: -18px; }
  .platform-stack article { grid-template-columns: 50px 1fr; }
  .platform-stack .status-pill { grid-column: 2; justify-self: start; }
  .security-panel { grid-template-columns: 1fr; padding: 31px 24px; }
  .security-mark { width: 80px; height: 80px; border-radius: 24px; }
  .security-points { grid-column: auto; grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; justify-content: center; padding: 28px 0; }
  .footer-links { margin-left: 0; }
}

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