*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0}
/* ===== landing tokens per style ===== */
.lp{--bg:#ffffff;--bg2:#f5f5f7;--ink:#1d1d1f;--ink2:#515154;--line:#e3e4e8;--acc:#425f99;--acc-ink:#ffffff;--acc-soft:#eaeff7;--card:#ffffff;--radius:12px;--pill:980px;--shadow:none;
--fd:"Manrope",sans-serif;--fb:"IBM Plex Sans",system-ui,sans-serif;--wd:800;--track:-.02em}
.lp{background:var(--bg);color:var(--ink);font-family:var(--fb);font-size:16px;line-height:1.5;container-type:inline-size}
.lp h1,.lp h2,.lp h3{font-family:var(--fd);font-weight:var(--wd);letter-spacing:var(--track);line-height:1.12;margin:0;text-wrap:balance}
.lp h1{font-size:clamp(30px,5.2cqw,56px)}
.lp h2{font-size:clamp(24px,3.4cqw,38px)}
.lp h3{font-size:19px;letter-spacing:-.005em}
.lp p{margin:0}
.lp .wrap{max-width:1120px;margin:0 auto;padding:0 clamp(16px,4cqw,48px)}
.lp section{position:relative;padding:clamp(40px,6cqw,80px) 0}
.lp section.alt{background:var(--bg2)}
.lp .eyebrow{display:inline-flex;align-items:center;gap:8px;font:600 13px/1 var(--fb);letter-spacing:.06em;text-transform:uppercase;color:var(--acc);background:var(--acc-soft);padding:9px 14px;border-radius:var(--pill);margin-bottom:18px}
.lp .eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--acc);flex:0 0 auto}
.lp .lead{color:var(--ink2);font-size:clamp(16px,1.6cqw,19px);max-width:62ch}
.lp .btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:var(--pill);font:600 15px/1 var(--fb);text-decoration:none;border:1px solid transparent;cursor:pointer}
.lp .btn.pri{background:var(--acc);color:var(--acc-ink)}
.lp .btn.sec{border-color:var(--ink2);color:var(--ink);background:transparent}
.lp .btn:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.lp .grid{display:grid;gap:18px}
.lp .g2{grid-template-columns:repeat(2,1fr)} .lp .g3{grid-template-columns:repeat(3,1fr)} .lp .g4{grid-template-columns:repeat(4,1fr)}
@container (max-width:820px){ .lp .g4{grid-template-columns:repeat(2,1fr)} .lp .hero-grid{grid-template-columns:1fr !important} }
@container (max-width:600px){ .lp .g3{grid-template-columns:1fr} }
@container (max-width:520px){ .lp .g2,.lp .g4{grid-template-columns:1fr} }
.lp .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.lp .card h3{margin-bottom:8px}
.lp .card p{color:var(--ink2);font-size:15px}
.lp .tag{display:inline-block;font:600 11px/1 var(--fb);letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:var(--pill);background:var(--acc-soft);color:var(--acc);margin-bottom:14px}
/* nav */
.lp nav{display:flex;align-items:center;gap:22px;padding:16px clamp(16px,4cqw,48px);border-bottom:1px solid var(--line);position:sticky;top:0;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);z-index:4}
.lp .logo{display:flex;align-items:center;text-decoration:none}
.lp .logo img{height:40px;width:auto;display:block}
.lp footer .logo img{height:28px}
.lp nav ul{display:flex;gap:18px;list-style:none;margin:0 auto;padding:0;font-size:14px;color:var(--ink2)}
.lp nav .btn{padding:9px 16px;font-size:14px}
@container (max-width:820px){ .lp nav ul{display:none} }
/* hero */
.lp .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.lp .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.lp .hero h1{margin-bottom:18px}
.lp .aud{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px;font-size:14px;color:var(--ink2)}
.lp .aud a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
/* product mock */
.mock{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow);font-size:13px}
.mock .mh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:12px}
.mock .mh b{font-family:var(--fd);font-size:15px}
.mock .mh span{color:var(--ink2);font-size:12px}
.mock table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.mock th{text-align:left;font-weight:500;color:var(--ink2);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:6px 8px;border-bottom:1px solid var(--line)}
.mock td{padding:9px 8px;border-bottom:1px solid var(--line)}
.mock td:nth-child(2),.mock td:nth-child(3),.mock th:nth-child(2),.mock th:nth-child(3){text-align:right}
.mock tr.sel td{background:var(--acc-soft);font-weight:600}
.mock tr.sel td:first-child::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--acc);margin-right:8px;vertical-align:middle}
.mock .mf{display:flex;justify-content:space-between;align-items:center;margin-top:12px;color:var(--ink2);font-size:12px}
.mock .mf{gap:12px}
.mock .mf span{flex:1 1 auto;min-width:0}
.mock .mf .btn{padding:8px 14px;font-size:12px;white-space:nowrap;flex:0 0 auto}
.mock tbody tr{cursor:pointer}
.mock tbody tr:hover td{background:var(--bg2)}
.mock .mstamp{margin-top:10px;font-size:11px;color:var(--ink2)}
.tray{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.tray-h{display:flex;justify-content:space-between;font-size:12px;color:var(--ink2);margin-bottom:6px}
.tray-h b{color:var(--ink);font-family:var(--fd);font-size:13px}
.tray ul{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:12px}
.tray li{display:flex;justify-content:space-between;gap:10px}
.tray li span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink2)}
.tray li b{font-variant-numeric:tabular-nums;white-space:nowrap}
.tray-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;padding-top:8px;border-top:1px dashed var(--line);font-size:12px;color:var(--ink2)}
.tray-total b{font:var(--wd) 20px/1 var(--fd);color:var(--acc);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.tray-hint{margin-top:8px;font-size:12px;color:var(--ink2)}
.tray-hint a{color:var(--acc);font-weight:600;text-decoration:none}
@media (prefers-reduced-motion:no-preference){
.mock tbody.swap{animation:mswap .45s ease}
@keyframes mswap{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}
.tray li.new{animation:mswap .4s ease}
}
.lp .integ{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;align-items:center}
.lp .integ span{padding:8px 14px;border:1px solid var(--line);border-radius:var(--pill);font-size:14px;color:var(--ink)}
.lp .integ .integ-l{border:0;padding:0 4px 0 0;font-size:12px;color:var(--ink2);letter-spacing:.06em;text-transform:uppercase;flex-basis:100%;margin-top:6px}
.lp .integ .integ-l:first-child{margin-top:0}
.lp .card.bit{border-color:#f00082;box-shadow:inset 0 3px 0 #f00082}
.lp .card.bit .bit-tag{display:inline-block;font:600 11px/1 var(--fb);letter-spacing:.08em;text-transform:uppercase;color:#f00082;margin-bottom:12px}
.lp .bit-logo{display:block;height:26px;width:auto;margin-bottom:12px}
.lp .card.bit h3{color:#272525}
/* stats */
.lp .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@container (max-width:820px){ .lp .stats{grid-template-columns:repeat(2,1fr)} }
.lp .stat b{display:block;font:var(--wd) clamp(26px,3cqw,38px)/1 var(--fd);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.lp .stat span{color:var(--ink2);font-size:14px}
/* steps (a real sequence) */
.lp .step{position:relative;padding-top:8px}
.lp .step em{display:block;font:700 13px/1 var(--fd);color:var(--acc);margin-bottom:12px;font-style:normal}
/* feature list */
.lp .feat{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start}
.lp .feat i{width:34px;height:34px;border-radius:9px;background:var(--acc-soft);display:grid;place-items:center;color:var(--acc)}
.lp .feat i svg{width:18px;height:18px}
.lp .feat b{display:block;font:600 16px/1.3 var(--fd);margin-bottom:4px}
.lp .feat p{color:var(--ink2);font-size:15px}
/* pricing */
.lp .price .big{font:var(--wd) 30px/1 var(--fd);letter-spacing:-.02em;margin:10px 0 6px}
.lp .price ul{margin:16px 0 20px;padding:0 0 0 18px;color:var(--ink2);font-size:15px;display:grid;gap:6px}
/* faq */
.lp details{border-top:1px solid var(--line);padding:16px 0}
.lp details:last-child{border-bottom:1px solid var(--line)}
.lp summary{cursor:pointer;font:600 17px/1.3 var(--fd);list-style:none;display:flex;justify-content:space-between;gap:16px}
.lp summary::after{content:"+";color:var(--acc);font-weight:400}
.lp details[open] summary::after{content:"–"}
.lp details p{color:var(--ink2);margin-top:10px;max-width:70ch}
/* form */
.lp form{display:grid;gap:14px}
.lp .frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@container (max-width:520px){ .lp .frow{grid-template-columns:1fr} }
.lp .fld{display:grid;gap:6px;font-size:13px;color:var(--ink2)}
.lp input,.lp select,.lp textarea{font:400 15px var(--fb);padding:11px 14px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);width:100%}
.lp .chips{display:flex;flex-wrap:wrap;gap:8px}
.lp .chips label{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--line);border-radius:var(--pill);cursor:pointer;font-size:14px;color:var(--ink)}
.lp .chips input{width:auto;padding:0;margin:0;accent-color:var(--acc)}
.lp .fine{font-size:12px;color:var(--ink2)}
/* footer */
.lp footer{position:relative;border-top:1px solid var(--line);padding:40px 0;font-size:14px;color:var(--ink2)}
.lp footer h4{font:600 13px/1 var(--fd);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin:0 0 12px}
.lp footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.lp footer a{color:inherit;text-decoration:none}
.lp .copy{margin-top:30px;font-size:12px;display:flex;flex-wrap:wrap;gap:8px 24px}
.ph{outline:1px dashed color-mix(in srgb,var(--acc) 60%,transparent);outline-offset:2px;border-radius:3px}
@media (prefers-reduced-motion:no-preference){ .lp .btn{transition:transform .15s} .lp .btn:hover{transform:translateY(-1px)} }
/* document modal */
.doc-modal{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%}
.doc-modal::backdrop{background:rgba(29,29,31,.55);backdrop-filter:blur(6px)}
.doc-panel{width:min(960px,calc(100vw - 32px));height:min(90vh,1100px);margin:5vh auto;background:#fff;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(0,0,0,.35);font-family:var(--fb, "IBM Plex Sans", system-ui, sans-serif)}
.doc-head{display:flex;align-items:center;gap:12px;padding:12px 14px 12px 20px;border-bottom:1px solid #e3e4e8}
.doc-head b{font:700 15px/1.3 var(--fd, Manrope, sans-serif);color:#1d1d1f;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc-head a,.doc-head button{font:600 13px/1 var(--fb, "IBM Plex Sans", sans-serif);padding:9px 14px;border-radius:980px;border:1px solid #515154;background:#fff;color:#1d1d1f;text-decoration:none;cursor:pointer;white-space:nowrap}
.doc-head button.x{border-color:transparent;background:#f5f5f7;width:36px;height:36px;padding:0;font-size:18px;line-height:1}
.doc-body{flex:1;background:#f5f5f7;overflow:auto;-webkit-overflow-scrolling:touch}
.doc-body iframe{width:100%;height:100%;border:0;display:block}
.doc-body img{display:block;max-width:100%;margin:0 auto}
@media (max-width:600px){ .doc-head a{display:none} .doc-panel{width:100vw;height:100vh;margin:0;border-radius:0} }
/* logos strip */
.lp .logos{display:flex;flex-wrap:wrap;align-items:center;gap:18px 40px;margin-top:36px;padding-top:28px;border-top:1px solid var(--line)}
.lp .logos-l{flex-basis:100%;font:600 12px/1 var(--fb);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.lp .logos img{height:30px;width:auto;filter:grayscale(1);opacity:.62;transition:filter .25s,opacity .25s}
.lp .logos img.k{height:24px} .lp .logos img.g{height:40px}
.lp .logos img:hover{filter:none;opacity:1}
@container (max-width:600px){ .lp .logos{gap:14px 24px} .lp .logos img{height:24px} .lp .logos img.k{height:19px} .lp .logos img.g{height:32px} }
/* scheme */
.lp .scheme{margin:8px 0 36px;padding:18px 8px 6px;overflow-x:auto}
.lp .scheme svg{width:100%;max-width:1040px;height:auto;display:block;margin:0 auto;font-family:var(--fb);min-width:640px}
.lp .scheme .node{fill:var(--card);stroke:var(--line);stroke-width:1.5}
.lp .scheme .node.fk{stroke:var(--acc)}
.lp .scheme .t{fill:var(--ink);font-size:15px;font-weight:600;font-family:var(--fd)}
.lp .scheme .s{fill:var(--ink2);font-size:12px}
.lp .scheme .lbl{fill:var(--acc);font-size:12px;font-weight:600}
.lp .scheme .flow{fill:none;stroke:var(--acc);stroke-width:2;stroke-linecap:round;marker-end:url(#arw)}
.lp .scheme .flow.back{stroke:var(--ink2);marker-end:url(#arw2)}
.lp .scheme .dash{stroke-dasharray:6 8}
@media (prefers-reduced-motion:no-preference){ .lp .scheme .dash{animation:flowdash 1.4s linear infinite} @keyframes flowdash{to{stroke-dashoffset:-28}} }
/* card icons */
.lp .card .ico{width:38px;height:38px;border-radius:10px;background:var(--acc-soft);display:grid;place-items:center;color:var(--acc);margin-bottom:14px}
.lp .card .ico svg{width:20px;height:20px}
/* screenshots */
.lp .shots{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:36px}
@container (max-width:700px){ .lp .shots{grid-template-columns:1fr} }
.lp .shot{margin:0;display:block;text-decoration:none;color:inherit}
.lp .shot .frame{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg2);box-shadow:0 10px 30px rgba(29,29,31,.06)}
.lp .shot .frame::before{content:"";display:block;height:10px;background:var(--bg2);border-bottom:1px solid var(--line)}
.lp .shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top left}
.lp .shot figcaption{font-size:13px;color:var(--ink2);margin-top:10px}
.lp .shot:hover .frame{border-color:var(--acc)}
.lp .stat b{font-variant-numeric:tabular-nums}
.lp form{position:relative}
.lp .form-status{font-size:14px;color:var(--ink2)}
.lp .form-status.ok{color:#2e7d32}
.lp .form-status.err{color:#b3261e}
.lp form.sent .btn.pri{opacity:.55;pointer-events:none}
/* logos carousel */
.lp .logos{display:block}
.lp .logos .logos-l{display:block;margin-bottom:18px}
.lp .logos-track{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.lp .logos-row{display:flex;align-items:center;gap:56px;width:max-content;padding-right:56px}
.lp .logos-row img{flex:0 0 auto}
@media (prefers-reduced-motion:no-preference){
.lp .logos-row{animation:logos-scroll var(--logos-dur,28s) linear infinite}
.lp .logos-track:hover .logos-row{animation-play-state:paused}
@keyframes logos-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
}
@media (prefers-reduced-motion:reduce){ .lp .logos-row{width:auto;flex-wrap:wrap;gap:18px 40px} .lp .logos-row .dup{display:none} .lp .logos-track{mask-image:none;-webkit-mask-image:none} }
.lp .logos-row .lg-text{font:700 17px/1 var(--fd);letter-spacing:-.01em;color:#7a7a80;white-space:nowrap;opacity:.8;transition:color .25s,opacity .25s}
.lp .logos-row .lg-text:hover{color:var(--ink);opacity:1}
.lp .logos img{height:32px} .lp .logos img.k{height:24px} .lp .logos img.g{height:42px}
.lp nav ul a{color:inherit;text-decoration:none;padding:6px 2px;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.lp nav ul a:hover{color:var(--ink);border-bottom-color:var(--acc)}
.lp section,.lp footer{scroll-margin-top:84px}
/* video */
.lp .vlink{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font:600 15px/1 var(--fb);color:var(--ink);text-decoration:none}
.lp .vlink i{width:36px;height:36px;border-radius:50%;background:var(--acc);display:grid;place-items:center;flex:0 0 auto}
.lp .vlink i::after{content:"";border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent #fff;margin-left:3px}
.lp .vlink:hover{color:var(--acc)}
.lp .vcard{display:grid;grid-template-columns:1.25fr 1fr;gap:28px;align-items:center;margin:0 0 40px;padding:20px;background:var(--card);border:1px solid var(--line);border-radius:16px}
@container (max-width:820px){ .lp .vcard{grid-template-columns:1fr} }
.lp .vcard video{width:100%;aspect-ratio:16/9;border-radius:10px;background:#000;display:block}
.lp .vcard h3{margin-bottom:8px}
.lp .vcard p{color:var(--ink2);font-size:15px}
.doc-body video{width:100%;height:100%;background:#000;display:block}