/* Contour: white space, brand typography, and precise cyan outlines. */
:root { --page-bg:#fff; --header-bg:#fff; --ink:#321752; --muted:#716b7b; --line:#e5e6ed; --accent:#5413b7; }
body { color:var(--ink); }
:focus-visible { outline-color:#1cbced; }
.concept-bar { color:#706781; background:#fff; border-bottom:1px solid #e5e6ed; }
.concept-home::before { color:#5413b7; }
.concept-nav a:hover { color:#5413b7; background:#fff; border-color:#e5e6ed; }
.concept-nav a[aria-current="page"] { color:#5413b7; background:#fff; border-color:#1cbced; }
.site-header { border-bottom:1px solid #e5e6ed; }
.header-inner { min-height:94px; }
.main-nav { color:#51465f; gap:24px; font-size:15px; }
.header-action { color:#5413b7; border-color:#5413b7; border-radius:12px; }
.contour-hero { display:grid; grid-template-columns:minmax(0,.97fr) minmax(0,1fr); gap:66px; align-items:center; padding-top:64px; padding-bottom:48px; }
.hero-heading { display:grid; gap:28px; padding-bottom:15px; }
.overline { color:#716b7b; font-size:11px; line-height:1.5; letter-spacing:.08em; text-transform:uppercase; font-weight:700; }
.overline::before { content:""; display:inline-block; width:24px; height:2px; margin-right:10px; vertical-align:middle; background:#1cbced; }
.hero-heading h1 { margin-top:22px; color:#5413b7; font-size:clamp(45px,4.7vw,68px); line-height:1.07; font-weight:800; letter-spacing:-.045em; }
.hero-heading h1 span { color:#8c43f5; }
.hero-intro p { max-width:440px; color:#645b71; font-size:18px; line-height:1.65; margin-bottom:24px; }
.button { border-radius:12px; padding:14px 22px; font-size:16px; }
.button-light,.button-dark { background:#5413b7; color:#fff; }
.button-light:hover,.button-dark:hover { background:#6f2bce; }
.hero-sequence { margin:29px 0 0; padding:0 0 0 20px; border-left:1px solid #1cbced; list-style:none; display:grid; gap:14px; }
.hero-sequence li { display:flex; align-items:center; gap:16px; color:#5f536e; font-size:16px; }
.hero-sequence span { color:#5413b7; font-size:11px; font-weight:700; }
.working-desk { position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; padding:33px 26px 24px; border:1px solid #e1e6ee; border-radius:24px; background:#fff; }
.working-desk::before { content:""; position:absolute; z-index:-1; inset:-11px 12px 15px -11px; border:1.5px solid #1cbced; border-radius:24px 96px 24px 24px; pointer-events:none; }
.working-desk { isolation:isolate; }
.desk-screen { margin:0; display:grid; justify-items:center; gap:18px; align-content:start; padding-bottom:62px; min-width:0; }
.desk-screen figcaption { width:100%; color:#5413b7; font-size:18px; font-weight:700; display:grid; gap:5px; line-height:1.35; }
.desk-screen figcaption span { color:#7b7187; font-size:14px; font-weight:500; }
.hero-phone,.demo-phone,.product-phone { width:202px; border:6px solid #242329; border-radius:27px; overflow:hidden; background:#242329; box-shadow:0 15px 24px #301d4010; flex:none; }
.hero-phone img,.demo-phone img,.product-phone img { width:100%; height:auto; border-radius:20px; }
.section-space { padding-top:86px; padding-bottom:86px; }
.section-heading h2,.modules-heading h2 { margin-top:18px; }
main h2 { color:#5413b7; font-size:clamp(31px,3.4vw,46px); line-height:1.13; letter-spacing:-.035em; font-weight:800; }
.benefits-section { border-top:1px solid #e5e6ed; }
.benefits-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px; margin-top:38px; }
.benefit { min-width:0; border-top:2px solid #1cbced; padding-top:24px; }
.benefit > [data-icon] { color:#1cbced; width:38px; height:38px; border:1px solid #1cbced; border-radius:12px; }
.benefit h3 { color:#5413b7; margin:20px 0 12px; font-size:23px; letter-spacing:-.025em; }
.benefit p { color:#716879; font-size:16px; line-height:1.65; }
.benefit a { display:inline-flex; align-items:center; gap:14px; margin-top:23px; min-height:44px; font-size:15px; color:#5413b7; font-weight:700; }
.benefit a:hover { text-decoration:underline; text-underline-offset:5px; }
.product-section { border-block:1px solid #e5e6ed; background:#fff; }
.product-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:98px; align-items:center; }
.product-copy h2 { margin:19px 0; }
.section-lead { max-width:395px; color:#716879; font-size:17px; line-height:1.65; }
.product-tabs { display:grid; gap:8px; margin-top:30px; }
.product-tab { display:flex; align-items:center; text-align:left; gap:16px; min-height:78px; padding:17px 19px; border:1px solid #e5e6ed; border-radius:16px; background:#fff; color:#5413b7; }
.product-tab.is-active { border:1.5px solid #cbb9e2; padding:16.5px 18.5px; background:#fff; }
.product-tab:hover:not(.is-active) { border-color:#8c43f5; }
.product-tab > [data-icon]:first-child { color:#1cbced; }
.tab-copy { flex:1; min-width:0; }
.tab-copy strong { display:block; font-size:20px; line-height:1.35; }
.tab-copy span { display:block; margin-top:6px; color:#716879; font-size:16px; line-height:1.5; }
.product-visual { display:flex; flex-direction:column; align-items:center; padding:24px 28px 28px; border-radius:24px; border:1px solid #e1e6ee; background:#fff; }
.product-visual-heading { align-self:stretch; display:flex; align-items:center; justify-content:space-between; gap:20px; color:#716879; font-size:14px; line-height:1.5; padding-bottom:25px; }
.product-phone { width:264px; }
.screen-caption { min-height:36px; margin-top:64px; text-align:center; color:#716879; max-width:300px; font-size:16px; line-height:1.6; }
.modules-section { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr); gap:90px; }
.modules-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 34px; }
.module { padding:4px 0 20px; border-bottom:1px solid #e5e6ed; min-width:0; }
.module > [data-icon] { color:#1cbced; }
.module h3 { color:#5413b7; font-size:20px; margin:14px 0 8px; line-height:1.35; }
.module p { color:#716879; font-size:16px; line-height:1.6; }
.assistant-panel { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,.7fr); gap:30px; align-items:center; padding:42px 56px 0; border:1px solid #e1e6ee; border-radius:24px; background:#fff; overflow:hidden; }
.assistant-copy { align-self:center; padding-bottom:42px; }
.assistant-copy .overline { color:#716879; display:flex; align-items:center; gap:12px; }
.assistant-copy .overline::before { display:none; }
.assistant-copy .overline [data-icon] { color:#1cbced; }
.assistant-copy h2 { margin:20px 0; }
.assistant-copy > p:not(.overline) { max-width:510px; color:#716879; font-size:16px; line-height:1.7; margin-bottom:24px; }
.assistant-mascot { align-self:end; overflow:hidden; }
.assistant-mascot img { width:100%; max-width:320px; margin-inline:auto; }
.closing-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(240px,.6fr); gap:50px; align-items:end; margin-top:20px; }
.closing-grid p { color:#716879; font-size:17px; line-height:1.7; margin-bottom:24px; }
.site-footer { border-top:1px solid #e5e6ed; }
.footer-inner { display:flex; gap:35px; align-items:center; min-height:122px; }
.footer-inner p { color:#716879; font-size:12px; }
.footer-inner > a:last-child { margin-left:auto; display:inline-flex; align-items:center; gap:12px; color:#5413b7; font-size:12px; font-weight:700; min-height:44px; }
@media(max-width:1120px) { .main-nav { gap:14px; font-size:14px; } .header-inner { gap:22px; } .header-action { padding-inline:13px; font-size:11px; } .contour-hero { gap:36px; } .working-desk { gap:16px; padding-inline:18px; } .hero-phone,.demo-phone { width:180px; } .product-grid,.modules-section { gap:48px; } .assistant-panel { padding-inline:35px; } }
@media(max-width:850px) { .header-inner { min-height:80px; } .contour-hero { gap:30px; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); } .hero-heading h1 { font-size:clamp(39px,5.2vw,46px); } .hero-intro p { font-size:17px; } .working-desk { grid-template-columns:1fr; padding:28px 25px 18px; } .desk-screen:nth-of-type(2) { display:none; } .desk-screen figcaption { max-width:220px; display:grid; gap:5px; } .hero-phone { width:220px; } .hero-sequence { margin-top:23px; } .product-grid { gap:35px; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); } .product-visual { padding-inline:16px; } .product-phone { width:240px; } .benefits-grid { gap:22px; } .modules-section { gap:34px; } .assistant-panel { grid-template-columns:minmax(0,1.2fr) minmax(0,.6fr); padding:32px 30px 0; gap:15px; } .assistant-copy { padding-bottom:32px; } .assistant-copy h2 { font-size:34px; } .assistant-copy > p:not(.overline) { font-size:16px; } }
@media(max-width:650px) { .container { padding-inline:20px; } .contour-hero { grid-template-columns:1fr; gap:40px; padding-top:35px; padding-bottom:44px; } .hero-heading { gap:23px; padding:0; } .hero-heading h1 { font-size:clamp(40px,10.5vw,59px); margin-top:17px; } .hero-intro p { font-size:17px; max-width:410px; margin-bottom:20px; } .hero-sequence { grid-template-columns:1fr; gap:12px; margin-top:25px; } .working-desk { margin-inline:8px 0; padding:25px 20px 24px; border-radius:22px; } .desk-screen figcaption { max-width:250px; } .hero-phone { width:250px; } .section-space { padding-top:58px; padding-bottom:58px; } main h2 { font-size:33px; } .benefits-grid { grid-template-columns:1fr; gap:28px; margin-top:28px; } .benefit { display:grid; grid-template-columns:38px 1fr; gap:0 18px; padding-top:22px; } .benefit > [data-icon] { grid-row:1/4; } .benefit h3 { margin:0 0 10px; font-size:21px; } .benefit p { font-size:15px; } .benefit a { margin-top:8px; font-size:15px; } .product-grid { grid-template-columns:1fr; gap:30px; } .product-tabs { margin-top:25px; } .product-tab { min-height:77px; padding:17px 16px; } .product-tab.is-active { padding:16.5px 15.5px; } .tab-copy strong { font-size:19px; } .tab-copy span { font-size:15px; } .product-visual { padding:22px 22px 28px; } .product-phone { width:260px; } .modules-section { grid-template-columns:1fr; gap:30px; } .modules-grid { gap:20px; } .module h3 { font-size:19px; } .module p { font-size:15px; } .assistant-panel { grid-template-columns:1fr; padding:28px 24px 0; gap:0; border-radius:22px; } .assistant-copy { padding-bottom:15px; } .assistant-copy h2 { font-size:33px; } .assistant-mascot { max-height:250px; width:205px; margin-inline:auto; } .assistant-copy .button { font-size:15px; padding-inline:16px; } .closing-grid { grid-template-columns:1fr; gap:24px; } .closing-grid p { font-size:16px; margin-bottom:20px; } .footer-inner { flex-wrap:wrap; gap:18px; padding-block:28px; } .footer-inner > a:last-child { width:100%; margin:0; } .footer-inner p { font-size:11px; margin-left:auto; } }
@media(max-width:360px) { .container { padding-inline:15px; } .hero-heading h1 { font-size:39px; } .working-desk { padding-inline:12px; } .hero-phone { width:238px; } .product-visual { padding-inline:10px; } .product-phone { width:242px; } .assistant-panel { padding-inline:19px; } .assistant-copy h2 { font-size:29px; } .assistant-copy .button { font-size:15px; } .concept-nav a { padding-inline:9px; } }
@media(max-width:650px) { .screen-caption { font-size:15px; } .section-lead { font-size:16px; } .assistant-copy > p:not(.overline) { font-size:15px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } }