:root {
  --ink: #172b42;
  --muted: #617188;
  --blue: #2888e8;
  --blue-deep: #176ccb;
  --blue-pale: #eaf7ff;
  --yellow: #ffca48;
  --mint: #45c9b3;
  --line: rgba(78, 128, 170, .16);
  --glass: rgba(255, 255, 255, .62);
  --shadow: 0 24px 70px rgba(41, 94, 140, .14);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #f8fcff;
  scroll-behavior: smooth;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: linear-gradient(135deg, #fbfeff 0%, #f3fbff 53%, #fffdf6 100%); }
a { color: inherit; }
.container { width: min(1120px, calc(100% - 40px)); margin-inline: auto; position: relative; }
.page-glow { position: fixed; z-index: -1; border-radius: 50%; filter: blur(18px); opacity: .65; pointer-events: none; }
.glow-blue { width: 42vw; height: 42vw; min-width: 420px; min-height: 420px; top: -18vw; right: -11vw; background: rgba(99, 199, 255, .33); }
.glow-yellow { width: 34vw; height: 34vw; min-width: 330px; min-height: 330px; top: 36%; left: -20vw; background: rgba(255, 213, 92, .23); }
.glow-mint { width: 30vw; height: 30vw; min-width: 280px; min-height: 280px; bottom: -8vw; right: 2vw; background: rgba(91, 226, 204, .16); }

.site-header { height: 88px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; letter-spacing: -.04em; text-decoration: none; }
.brand-mascot { width: 36px; height: 36px; object-fit: contain; filter: drop-shadow(0 5px 8px rgba(23, 142, 154, .22)); }
.header-link { font-size: 14px; color: #46647e; text-decoration: none; font-weight: 650; }.header-link span { color: var(--blue); font-size: 18px; vertical-align: -1px; }

.hero { min-height: 610px; display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 34px; padding-block: 64px 72px; }
.eyebrow { margin: 0 0 15px; color: #3881ae; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 5px rgba(69, 201, 179, .14); margin-right: 7px; }
h1, h2, h3, p { margin-top: 0; } h1, h2 { letter-spacing: -.055em; line-height: 1.02; }
h1 { max-width: 600px; margin-bottom: 21px; font-size: clamp(44px, 5vw, 70px); font-weight: 770; } h1 em { font-style: normal; color: var(--blue); position: relative; white-space: nowrap; } h1 em::after { content: ""; position: absolute; left: 2%; right: 2%; height: 8px; bottom: -7px; z-index: -1; background: rgba(255, 202, 72, .55); border-radius: 99px; transform: rotate(-1.5deg); }
.hero-text { max-width: 530px; color: var(--muted); font-size: 18px; line-height: 1.58; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 30px; }.hero-actions#channels { scroll-margin-top: 32vh; }.button { min-height: 51px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 19px; border: 1px solid transparent; border-radius: 16px; font-size: 15px; font-weight: 760; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }.button:hover { transform: translateY(-2px); }.button-primary { color: #fff; background: linear-gradient(135deg, #258be9, #1e74d8); box-shadow: 0 13px 25px rgba(31, 117, 213, .24); }.button-primary svg { width: 18px; fill: currentColor; }.button-glass { color: #24516f; background: rgba(255,255,255,.72); border-color: rgba(131, 185, 220, .3); box-shadow: 0 10px 24px rgba(43, 104, 150, .08); }.max-icon { width: 19px; height: 19px; flex: 0 0 19px; object-fit: contain; }.button.is-disabled { pointer-events: none; opacity: .45; }.trial-note { margin: 17px 0 0; color: #63768b; font-size: 13px; }.trial-note span { color: #e4a711; font-size: 17px; margin-right: 4px; }.trial-note strong { color: #2b5272; }

.hero-visual { min-height: 490px; position: relative; display: grid; place-items: center; isolation: isolate; }.orb { position: absolute; z-index: -1; border-radius: 50%; }.orb-one { width: 310px; height: 310px; background: radial-gradient(circle at 30% 30%, #d8f3ff, #a4d8ff 64%, transparent 65%); top: 18px; right: 4%; opacity: .72; }.orb-two { width: 175px; height: 175px; bottom: 25px; left: 3%; background: radial-gradient(circle at 40% 40%, #fff3b9, #ffe28b 62%, transparent 63%); opacity: .7; }
.glass-card { background: var(--glass); border: 1px solid rgba(255,255,255,.76); box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.82); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }.chat-card { width: min(100%, 440px); padding: 14px; border-radius: 27px; transform: rotate(2.2deg); box-shadow: 0 32px 65px rgba(27, 91, 143, .18), inset 0 1px #fff; }.chat-top { display: flex; align-items: center; gap: 9px; padding: 2px 5px 14px; }.avatar { width: 31px; height: 31px; flex: 0 0 31px; }.avatar-mascot { object-fit: contain; filter: drop-shadow(0 3px 4px rgba(23, 142, 154, .18)); }.chat-top strong { display: block; font-size: 12px; }.chat-top small { display: block; margin-top: 1px; font-size: 10px; color: #4bb99d; }.more { margin-left: auto; color: #8ba0b2; letter-spacing: 2px; }.message { max-width: 88%; padding: 11px 13px; border-radius: 15px; font-size: 12px; line-height: 1.4; }.question { margin: 0 0 9px auto; color: #fff; background: #3294e8; border-bottom-right-radius: 5px; }.answer { color: #35516a; background: rgba(255,255,255,.88); border-bottom-left-radius: 5px; }.answer-title { display: block; margin-bottom: 3px; font-weight: 800; color: #1d5c8b; }.formula { margin-top: 9px; padding: 7px 8px; border-radius: 9px; background: #eef8ff; color: #3b7095; font-size: 13px; }.formula i { font-family: Georgia, serif; }.formula b { float: right; color: #1d86d9; }.answer-foot { display: block; margin-top: 9px; color: #75a093; font-size: 9px; }.mini-chart { position: relative; height: 52px; margin-top: 10px; overflow: hidden; border-radius: 8px; background: linear-gradient(#f7fcff, #f7fcff); }.chart-line { position: absolute; left: 0; right: 0; border-top: 1px solid #d9ecf7; }.line-one { top: 13px; }.line-two { top: 27px; }.line-three { top: 41px; }.chart-path { position: absolute; width: 82%; height: 46px; left: 8%; top: 7px; border-top: 3px solid #35a0e9; border-radius: 50% 50% 0 0; transform: rotate(-6deg) skewX(-24deg); }.chart-point { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #35a0e9; }.point-one { left: 18%; top: 32px; }.point-two { left: 48%; top: 12px; }.point-three { right: 13%; top: 29px; }
.float-card { position: absolute; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.9); background: rgba(255,255,255,.75); border-radius: 14px; box-shadow: 0 15px 30px rgba(51,104,142,.13); backdrop-filter: blur(11px); }.float-card span { width: 25px; height: 25px; display: grid; place-items: center; color: #1f7bd0; background: #e6f5ff; border-radius: 7px; font-size: 11px; font-weight: 800; }.float-card b { display: block; font-size: 11px; }.float-card small { display: block; color: #7890a4; font-size: 9px; margin-top: 2px; }.float-doc { bottom: 52px; left: 0; transform: rotate(-4deg); }.float-sparkle { width: 43px; height: 43px; top: 72px; right: 1%; justify-content: center; padding: 0; color: #e9a911; font-size: 20px; transform: rotate(12deg); }

.trust { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 140px; overflow: hidden; border-block: 1px solid var(--line); }.trust div { padding: 22px 10%; border-right: 1px solid var(--line); }.trust div:last-child { border: 0; }.trust b { display: block; font-size: 18px; letter-spacing: -.03em; }.trust span { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; }
.section-heading { max-width: 670px; margin-bottom: 40px; }.section-heading h2, .how h2, .credits h2, .final-card h2 { margin-bottom: 16px; font-size: clamp(34px, 4vw, 50px); }.section-heading > p:last-child { color: var(--muted); font-size: 17px; line-height: 1.55; }.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }.feature-card { min-height: 244px; padding: 24px; border-radius: 23px; }.feature-large { grid-column: span 2; }.feature-icon { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 28px; border-radius: 13px; font-size: 21px; font-weight: 800; }.icon-blue { color: #1985d7; background: #e2f4ff; }.icon-yellow { color: #cb8f11; background: #fff2c9; }.icon-mint { color: #168c7d; background: #ddf8ef; }.icon-violet { color: #8263df; background: #eee9ff; }.feature-card h3 { margin-bottom: 9px; font-size: 18px; letter-spacing: -.03em; }.feature-card p { margin-bottom: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }.steps-preview { display: flex; align-items: center; gap: 10px; margin-top: 25px; }.steps-preview span { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; color: #2486d8; background: #e7f5ff; font-size: 10px; font-weight: 800; }.steps-preview i { width: 34px; height: 1px; background: #bfddf0; }.steps-preview b { margin-left: 2px; color: #2787d6; font-size: 11px; }

.how { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 8vw, 120px); align-items: center; margin-top: 170px; }.how-visual { height: 390px; position: relative; border-radius: 30px; overflow: hidden; background: linear-gradient(145deg, rgba(229,248,255,.85), rgba(255,255,255,.65)); }.paper { position: absolute; width: 236px; height: 300px; border-radius: 10px; background: #fff; box-shadow: 0 23px 34px rgba(61,107,135,.15); }.paper-back { transform: rotate(-10deg); left: 16%; top: 55px; background: #fff8df; }.paper-front { padding: 28px 24px; transform: rotate(7deg); right: 13%; top: 39px; }.paper-kicker { color: #88a0ae; font-size: 8px; font-weight: 800; letter-spacing: .13em; }.paper-line { display: block; width: 76%; height: 5px; margin-top: 12px; border-radius: 9px; background: #dcebf1; }.paper-line.wide { width: 100%; margin-top: 17px; }.paper-line.short { width: 47%; }.paper-graph { position: absolute; height: 105px; right: 21px; bottom: 22px; left: 21px; border-left: 2px solid #99b3c1; border-bottom: 2px solid #99b3c1; }.paper-graph i { position: absolute; right: 0; left: 0; border-top: 1px solid #e5f0f4; }.paper-graph i:nth-child(1) { top: 26%; }.paper-graph i:nth-child(2) { top: 51%; }.paper-graph i:nth-child(3) { top: 76%; }.paper-graph b { position: absolute; width: 77%; height: 56%; left: 9%; bottom: 12%; border-top: 3px solid #2d9de6; border-radius: 100% 80% 0 0; transform: rotate(-13deg) skewX(-24deg); }.scan-chip { position: absolute; right: 10%; bottom: 35px; padding: 11px 13px; border-radius: 12px; color: #3e756d; background: rgba(255,255,255,.88); box-shadow: 0 10px 25px rgba(40,111,121,.15); font-size: 11px; font-weight: 800; }.scan-chip span { display: inline-grid; width: 17px; height: 17px; place-items: center; margin-right: 5px; border-radius: 50%; color: #fff; background: #48c0a7; }.how-copy > p { margin-bottom: 13px; }.how-copy > h2 { max-width: 440px; }.how ol { margin: 33px 0 0; padding: 0; list-style: none; }.how li { display: flex; gap: 16px; margin-bottom: 21px; }.how li > span { padding-top: 2px; color: #49a0d5; font-size: 12px; font-weight: 800; }.how li h3 { margin-bottom: 4px; font-size: 16px; }.how li p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }

.credits { display: grid; grid-template-columns: .88fr 1.12fr; gap: 70px; align-items: center; margin-top: 170px; }.credits-copy p:last-child { max-width: 360px; margin-bottom: 0; color: var(--muted); line-height: 1.5; }.price-list { padding: 5px 24px; border-radius: 22px; }.price-list > div { display: grid; grid-template-columns: 35px 1fr auto; align-items: center; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line); }.price-list > div:last-child { border-bottom: 0; }.price-list p { margin: 0; color: #446179; font-size: 14px; }.price-list b { color: #1d557c; font-size: 13px; white-space: nowrap; }.price-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 10px; font-size: 15px; font-weight: 800; }.price-icon.blue { color: #258ddc; background: #e5f5ff; }.price-icon.yellow { color: #c68e12; background: #fff3d0; }.price-icon.mint { color: #238d7d; background: #e0f9ef; }

.final-cta { margin-top: 160px; margin-bottom: 32px; }.final-card { position: relative; overflow: hidden; padding: 60px 12%; text-align: center; border-radius: 31px; color: #fff; background: linear-gradient(125deg, #176eb8, #2a9be7 54%, #52cdb9); box-shadow: 0 25px 54px rgba(28,123,194,.24); }.final-card h2 { position: relative; margin-bottom: 13px; font-size: clamp(35px, 4vw, 54px); }.final-card p:not(.eyebrow) { position: relative; margin-bottom: 26px; color: rgba(255,255,255,.82); }.final-card .eyebrow { position: relative; color: rgba(255,255,255,.72); }.final-card .hero-actions { position: relative; justify-content: center; margin-top: 0; }.button-dark { color: #19577f; background: #fff; box-shadow: 0 11px 25px rgba(16,69,114,.18); }.button-light { color: #fff; border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.14); }.cta-shine { position: absolute; width: 56%; height: 170%; left: -18%; top: -38%; border-radius: 50%; background: rgba(255,255,255,.13); transform: rotate(24deg); }
.footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 100px; padding-block: 24px; color: #6d8192; font-size: 12px; }.footer .brand { color: var(--ink); font-size: 15px; }.footer .brand-mascot { width: 28px; height: 28px; }.footer-info { display: flex; align-items: center; justify-content: center; gap: 17px; }.footer-info span { color: #8395a5; }.footer-info a { color: #4d728c; text-decoration: none; }.footer-info a:hover { color: #2188d7; }.footer-info b { font-weight: 800; }.footer > a:last-child { color: #4382a9; text-decoration: none; }

@media (max-width: 820px) { .hero { grid-template-columns: 1fr; padding-top: 44px; }.hero-copy { text-align: center; }.hero-text { margin-inline: auto; }.hero-actions { justify-content: center; }.hero-visual { width: min(100%, 510px); min-height: 430px; margin-inline: auto; }.trust { margin-bottom: 100px; }.feature-grid { grid-template-columns: repeat(2, 1fr); }.feature-large { grid-column: span 2; }.how, .credits { grid-template-columns: 1fr; gap: 45px; }.how { margin-top: 120px; }.how-visual { max-width: 540px; width: 100%; margin-inline: auto; }.credits { margin-top: 120px; }.credits-copy { text-align: center; }.credits-copy p:last-child { margin-inline: auto; }.final-cta { margin-top: 115px; }.footer { flex-wrap: wrap; justify-content: center; text-align: center; } }
@media (max-width: 520px) { .container { width: min(100% - 28px, 1120px); }.site-header { height: 70px; }.header-link { font-size: 12px; }.hero { min-height: auto; padding-block: 45px 42px; }.eyebrow { font-size: 10px; }.hero-text { font-size: 16px; }.button { width: 100%; }.hero-actions { width: 100%; }.hero-actions#channels { scroll-margin-top: 19vh; }.hero-visual { min-height: 353px; }.chat-card { width: calc(100% - 26px); padding: 11px; border-radius: 22px; }.float-doc { left: 3px; bottom: 24px; }.float-sparkle { top: 20px; right: 0; }.trust { grid-template-columns: 1fr; margin-bottom: 78px; }.trust div { padding: 14px 8px; display: flex; align-items: baseline; justify-content: center; gap: 8px; border-right: 0; border-bottom: 1px solid var(--line); }.trust div:last-child { border-bottom: 0; }.trust b { font-size: 15px; }.trust span { margin: 0; font-size: 12px; }.section-heading { margin-bottom: 25px; }.section-heading > p:last-child { font-size: 15px; }.feature-grid { grid-template-columns: 1fr; gap: 12px; }.feature-large { grid-column: auto; }.feature-card { min-height: auto; padding: 21px; }.feature-icon { margin-bottom: 18px; }.how { margin-top: 90px; }.how-visual { height: 310px; }.paper { transform: scale(.8) rotate(7deg); transform-origin: center; }.paper-back { transform: scale(.8) rotate(-10deg); }.scan-chip { right: 5%; bottom: 20px; }.credits { margin-top: 90px; gap: 30px; }.price-list { padding-inline: 17px; }.price-list > div { grid-template-columns: 32px 1fr; gap: 9px; }.price-list b { grid-column: 2; font-size: 12px; }.price-list p { font-size: 13px; }.final-cta { margin-top: 88px; }.final-card { padding: 46px 21px; border-radius: 24px; }.footer { margin-top: 8px; }.footer-info { width: 100%; flex-direction: column; gap: 7px; }.footer > a:last-child { width: 100%; } }
@media (prefers-reduced-motion: no-preference) { .page-glow { animation: breathe 11s ease-in-out infinite alternate; }.glow-yellow { animation-delay: -5s; } .button { transition-duration: .18s; } } @keyframes breathe { to { transform: translate3d(10px, -8px, 0) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }