/* ============ Vessa — legal / info pages (light, on-brand) ============ */ /* dual-language toggle: hide the inactive language; the active one keeps its natural display. carries i18n-ru (default) or i18n-en. */ html.i18n-ru [data-lang="en"], html.i18n-ru [data-lang="kz"]{ display:none !important; } html.i18n-en [data-lang="ru"], html.i18n-en [data-lang="kz"]{ display:none !important; } html.i18n-kz [data-lang="ru"], html.i18n-kz [data-lang="en"]{ display:none !important; } /* KZ informational-translation notice */ .kz-translation-note{ margin:0 0 22px; padding:13px 16px; border:1px solid #e7c200; background:#fff8d6; color:#5a4b00; border-radius:12px; font-size:13.5px; line-height:1.5; } .kz-translation-note strong{ font-weight:700; } :root{ --bg:#f4f6f9; --surface:#ffffff; --surface-2:#fafbfd; --surface-3:#f3f5f9; --ink:#151b29; --ink-2:#4b5468; --ink-3:#828ca0; --ink-4:#a6aebe; --accent:#6a9cff; --accent-700:#3f7ae6; --accent-soft:#eaf1ff; --accent-line:#bcd2ff; --line:#e7eaf0; --line-2:#dde1ea; --mono:'IBM Plex Mono',ui-monospace,monospace; --font:'Manrope',system-ui,-apple-system,sans-serif; --success:#1c8a5a; --success-soft:#e6f6ee; --success-line:#bfe6cf; --maxw:1180px; } *{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); line-height:1.62; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(900px 480px at 82% -4%, color-mix(in srgb,#5b52d6 8%,transparent), transparent 60%), radial-gradient(720px 420px at 4% 0%, color-mix(in srgb,#5b52d6 5%,transparent), transparent 55%); } a{color:var(--accent-700); text-decoration:none} a:hover{text-decoration:underline} /* ---------- header ---------- */ .lhead{ position:sticky; top:0; z-index:20; background:rgba(244,246,249,.72); -webkit-backdrop-filter:blur(20px) saturate(1.6); backdrop-filter:blur(20px) saturate(1.6); border-bottom:1px solid var(--line); } .lhead-in{max-width:var(--maxw); margin:0 auto; padding:15px 40px; display:flex; align-items:center; justify-content:space-between; gap:24px} .brand{display:inline-flex; align-items:center; gap:11px} .brand-mark{width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:linear-gradient(150deg,#5b52d6,#3a3aa8); color:#fff; font-weight:800; font-size:17px; letter-spacing:-.02em; box-shadow:0 6px 18px rgba(59,69,214,.32)} /* ---- Vessa AI logo (animated wordmark) ---- */ .vessa-logo{ --g1:#6a9cff; --g2:#3f7ae6; --logo-ink:#262833; display:inline-flex; align-items:baseline; line-height:1; font-family:var(--font); font-size:23px; user-select:none; } .vessa-logo .v{ display:inline-block; height:.792em; width:auto; margin-right:-.06em; } .vessa-logo .word{ font-weight:800; letter-spacing:-.03em; } .vessa-logo .word .essa{ color:var(--logo-ink); } .vessa-logo .word .ai{ margin-left:.16em; font-size:.8em; letter-spacing:-.01em; background:linear-gradient(135deg,var(--g1),var(--g2)); -webkit-background-clip:text; background-clip:text; color:transparent; } .vessa-logo .bar{ transform-box:fill-box; transform-origin:center; animation:vessaTalk 1.05s ease-in-out infinite; } @keyframes vessaTalk{ 0%,100%{ transform:scaleY(.42); } 50%{ transform:scaleY(1); } } @media (prefers-reduced-motion: reduce){ .vessa-logo .bar{ animation:none; } } .site-footer .vessa-logo{ font-size:25px; } .brand-tx{display:flex; flex-direction:column; line-height:1.12} .brand-tx b{font-size:16px; font-weight:800; letter-spacing:-.015em; color:var(--ink)} .brand-tx span{font-size:11px; color:var(--ink-3); font-weight:500} .lhead-nav{display:flex; align-items:center; gap:22px; flex-wrap:wrap} .lhead-nav a{font-size:14px; font-weight:600; color:var(--ink-2)} .lhead-nav a:hover{color:var(--accent-700); text-decoration:none} .lhead-nav a.home{display:inline-flex; align-items:center; gap:7px} /* ---------- layout ---------- */ .legal-wrap{max-width:920px; margin:0 auto; padding:48px 40px 16px} .eyebrow{display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-700); margin-bottom:18px} .eyebrow::before{content:""; width:6px; height:6px; border-radius:2px; background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft)} /* ---------- article card ---------- */ .legal-card{ background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:44px 48px; box-shadow:0 24px 60px -36px rgba(20,27,41,.28), inset 0 1px 0 rgba(255,255,255,.7); } .legal-card h1{font-size:clamp(28px,3.4vw,40px); font-weight:800; letter-spacing:-.025em; line-height:1.1; margin:0 0 12px; text-wrap:balance} .legal-card h2{font-size:22px; font-weight:700; letter-spacing:-.015em; margin:34px 0 12px; padding-top:26px; border-top:1px solid var(--line); color:var(--ink)} .legal-card h2:first-of-type{} .legal-card h3{font-size:17.5px; font-weight:700; margin:24px 0 8px; color:var(--ink)} .legal-card p{margin:11px 0; font-size:15.5px; line-height:1.66; color:var(--ink-2)} .legal-card strong{color:var(--ink); font-weight:700} .legal-card ul,.legal-card ol{padding-left:22px; margin:11px 0; color:var(--ink-2)} .legal-card li{margin:7px 0; font-size:15.5px; line-height:1.6} .legal-card a{font-weight:600} /* meta + small print */ .legal-card .meta{color:var(--ink-3); font-size:14px; margin:0 0 22px} .legal-card .muted{font-size:13.5px; color:var(--ink-3); margin-top:26px} .legal-card .footer{margin-top:30px; padding-top:18px; border-top:1px solid var(--line); font-family:var(--mono); font-size:12.5px; letter-spacing:.01em; color:var(--ink-3)} /* RF-only notice */ .notice{display:flex; gap:11px; padding:15px 18px; margin:4px 0 26px; border:1px solid var(--accent-line); background:var(--accent-soft); border-radius:14px; font-size:14px; line-height:1.55; color:var(--ink); position:relative} .notice::before{content:""; flex-shrink:0; width:7px; height:7px; margin-top:8px; border-radius:50%; background:var(--accent)} /* success/info note (request-demo, it-activity, security) */ .note{padding:16px 18px; margin:22px 0; border:1px solid var(--success-line); background:var(--success-soft); border-radius:16px; font-size:15px; line-height:1.55; color:#13502f} .legal-card .note p{color:#13502f; margin:0} /* inset card (contacts requisites) */ .legal-card .card{background:var(--surface-2); border:1px solid var(--line); border-radius:16px; padding:18px 22px; margin:18px 0} .legal-card .card h2{border-top:0; padding-top:0; margin-top:0; font-size:18px} .legal-card .card p{margin:0} /* lead paragraph + callout (regulator docs: pricing / install / lifecycle) */ .legal-card .lead{font-size:17px; line-height:1.6; color:var(--ink); margin:0 0 22px} .legal-card .callout{padding:15px 18px; margin:18px 0 24px; border:1px solid var(--accent-line); background:var(--accent-soft); border-radius:14px; font-size:14px; line-height:1.55; color:var(--ink)} /* document tables */ .legal-card table{width:100%; border-collapse:collapse; margin:18px 0 24px; font-size:14px} .legal-card thead th{text-align:left; font-weight:700; color:var(--ink); background:var(--surface-2); border-bottom:1px solid var(--line); padding:11px 14px} .legal-card tbody td{padding:11px 14px; border-bottom:1px solid var(--line); color:var(--ink-2); line-height:1.5; vertical-align:top} .legal-card tbody tr:last-child td{border-bottom:0} .legal-card h3{font-size:16px; font-weight:700; margin:22px 0 10px; color:var(--ink)} .legal-card ol{margin:0 0 18px; padding-left:22px} .legal-card ol li{margin:7px 0; line-height:1.55; color:var(--ink-2)} /* document grid */ .doclinks{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin-top:22px} .doclink{display:block; border:1px solid var(--line); border-radius:16px; padding:18px 20px; background:var(--surface-2); transition:transform .16s ease, box-shadow .2s ease, border-color .2s ease} .doclink:hover{transform:translateY(-2px); box-shadow:0 14px 30px -18px rgba(20,27,41,.3); border-color:var(--accent-line); text-decoration:none} .doclink b{display:block; color:var(--ink); margin-bottom:5px; font-size:15px; font-weight:700} .doclink span{color:var(--ink-3); font-size:13.5px; line-height:1.45; display:block} /* primary button */ .legal-card .btn{display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 22px; background:var(--accent); color:#fff; border-radius:12px; font-weight:700; font-size:15px; margin-top:14px; box-shadow:0 8px 20px -10px rgba(59,69,214,.6); transition:.16s} .legal-card .btn:hover{background:var(--accent-700); transform:translateY(-1px); text-decoration:none} .legal-back{display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:var(--ink-3); margin-bottom:18px} .legal-back:hover{color:var(--accent-700); text-decoration:none} /* ---------- footer (multi-column, like main site) ---------- */ .site-footer{margin-top:64px; border-top:1px solid var(--line); background:rgba(255,255,255,.4)} .site-footer .fwrap{max-width:var(--maxw); margin:0 auto; padding:60px 40px 40px} .foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px} .foot-brand .brand{margin-bottom:16px} .foot-claim{font-size:13.5px; line-height:1.6; color:var(--ink-3); max-width:34ch} .foot-col h5{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-4); margin:0 0 14px} .foot-col a{display:block; font-size:13.5px; color:var(--ink-2); padding:5px 0; transition:.15s} .foot-col a:hover{color:var(--accent-700); text-decoration:none} .foot-bottom{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; max-width:var(--maxw); margin:0 auto; padding:22px 40px 40px; border-top:1px solid var(--line)} .foot-bottom .c{font-size:12.5px; color:var(--ink-4)} .foot-honest{font-size:12px; color:var(--ink-4); font-family:var(--mono); display:flex; flex-wrap:wrap; gap:6px 14px} .foot-offer{max-width:var(--maxw); margin:0 auto; padding:0 40px 40px; font-size:11.5px; line-height:1.5; color:var(--ink-4)} @media(max-width:860px){ .lhead-in,.legal-wrap{padding-left:22px; padding-right:22px} .legal-card{padding:28px 24px} .site-footer .fwrap{padding:44px 22px 30px} .foot-grid{grid-template-columns:1fr 1fr; gap:30px} .foot-brand{grid-column:1 / -1} .foot-bottom,.foot-offer{padding-left:22px; padding-right:22px} } @media(max-width:540px){ .lhead-nav a:not(.home){display:none} } .legal-card code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.88em; background:var(--surface-3); border:1px solid var(--line); border-radius:6px; padding:1px 6px;} .legal-card hr{border:0; border-top:1px solid var(--line); margin:26px 0;}