/*
 * Public landing page (https://optor.ai), ported from prototype/landing.html.
 * A standalone page: it shares tokens and the procurement-preview component, but does not
 * load workspace stylesheets, so its short class names do not collide with components.css.
 */
/* Short names for the shared tokens (tokens.css). */
:root{--ink:var(--color-ink);--muted:var(--color-text-muted);--line:var(--color-line);--soft:var(--color-surface-muted)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:white;color:var(--ink);font:.9375rem/1.55 var(--font-sans)}
button,input,textarea{font:inherit}
a{color:inherit;text-decoration:none}
button,a,input,textarea{outline-offset:5px}
button{cursor:pointer}
button:focus-visible,a:focus-visible,textarea:focus-visible{outline:2px solid var(--color-focus)}
svg{width:23px;height:23px;flex-shrink:0}
.wrap{max-width:1280px;margin:auto;padding:0 48px}
.logo{width:150px;height:auto;display:block}
header{height:92px;display:flex;align-items:center;justify-content:space-between;gap:30px}
nav{display:flex;gap:30px;font-size:.8125rem;font-weight:500;margin-right:auto;margin-left:30px}
.actions{display:flex;align-items:center;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:45px;border:1px solid var(--line);border-radius:10px;padding:11px 20px;font-size:.8125rem;font-weight:500;background:white}
.btn:hover{background:var(--color-surface-hover)}
.btn.dark{background:var(--ink);color:white;border-color:var(--ink)}
.btn.dark:hover{background:var(--color-ink-hover)}
.btn.arrow:after{content:'↗';font-size:1.125rem}
.menu{display:none}
.hero{padding-top:40px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-areas:"intro preview" "catalog catalog";gap:48px;align-items:center}
.heroContent{grid-area:intro;min-width:0}
.hero>.procurement-preview{grid-area:preview}
.pill{display:inline-flex;padding:6px 11px;border:1px solid var(--line);border-radius:30px;font-size:.6875rem;color:#515257;align-items:center;gap:8px}
.pill:before{content:'';width:5px;height:5px;border-radius:50%;background:#444}
h1{max-width:710px;font-size:clamp(2.625rem,4.2vw,3.75rem);line-height:1.08;letter-spacing:-.055em;font-weight:600;margin:23px 0 20px}
.lead{max-width:580px;font-size:1.0625rem;line-height:1.6;color:var(--muted);margin:0}
/* -- Main procurement action ------- */
.composer{margin-top:28px;border:1px solid var(--color-line-strong);border-radius:14px;background:var(--color-surface);padding:10px;display:flex;align-items:flex-end;gap:12px}
.composer:focus-within{outline:2px solid var(--color-focus);outline-offset:4px}
.composer>svg{display:none}
.composer textarea{width:100%;min-width:0;height:72px;min-height:72px;max-height:144px;resize:vertical;border:0;background:transparent;line-height:24px;padding:6px;outline:none;font-size:1rem;color:var(--color-text)}
.composer textarea::placeholder{color:var(--color-placeholder);opacity:1}
.send{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border:0;border-radius:9px;background:var(--color-ink);color:var(--nav-text-active);flex-shrink:0;padding:12px 14px;font-size:.8125rem;font-weight:500}
.send:hover{background:var(--color-ink-hover)}
.suggestions{display:flex;gap:9px;flex-wrap:wrap;margin-top:13px}
.suggestions button,.suggestions a{display:flex;gap:8px;align-items:center;padding:10px 13px;border:1px solid #e9e9eb;border-radius:9px;background:#f7f7f8;font-size:.6875rem}
.suggestions button:hover,.suggestions a:hover{background:#eaeaec}
.suggestions svg{width:16px;height:16px}
.demoNote{font-size:.6875rem;color:var(--color-text-subtle);margin:12px 0 0}
.section{padding-top:80px;scroll-margin-top:20px}
.catalogEntry{grid-area:catalog;padding-top:0;padding-bottom:32px;border-bottom:1px solid var(--color-line)}
.catalogEntry h2{font-size:1.5rem;letter-spacing:-.6px}
.catalogEntry .sectionHead{margin-bottom:20px}
.catalogEntry .pubChips a{min-height:44px}
.sectionHead{display:flex;justify-content:space-between;gap:50px;align-items:flex-end;margin-bottom:30px}
h2{font-size:2.1875rem;line-height:1.16;letter-spacing:-1.4px;font-weight:600;margin:0;max-width:700px}
.sectionHead p{color:var(--muted);font-size:.8125rem;max-width:310px;margin:0}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.step{padding:27px;background:var(--soft);border-radius:13px}
.stepTop{display:flex;align-items:center;justify-content:space-between;margin-bottom:35px}
.stepTop span{font-size:.75rem;color:var(--color-text-subtle)}
.stepTop svg{width:31px;height:31px}
.step h3{font-size:1.1875rem;letter-spacing:-.5px;margin:0 0 11px;font-weight:600}
.step p{font-size:.8125rem;color:var(--muted);margin:0}
.audience{margin-top:78px;padding:35px;background:var(--soft);border-radius:16px}
.audience .sectionHead{margin-bottom:30px}
.audienceGrid{display:grid;grid-template-columns:1fr 1fr;gap:17px}
.audienceCard{background:white;border:1px solid #ededee;border-radius:12px;padding:27px;scroll-margin-top:25px}
.audienceTitle{display:flex;gap:13px;align-items:center;margin-bottom:20px}
.audienceTitle h3{margin:0;font-size:1.125rem;font-weight:600}
.audienceCard ul{padding:0;margin:0 0 26px;list-style:none;display:grid;gap:12px;font-size:.75rem;color:#66686c}
.audienceCard li{display:flex;gap:10px}
.audienceCard li:before{content:'✓';color:#222}
.textLink{font-size:.75rem;font-weight:500;display:inline-flex;gap:24px}
.textLink:hover{text-decoration:underline}
/* -- Final invitation ------- */
.cta{margin-top:22px;background:#1c1d1f;color:white;border-radius:14px;padding:43px 38px;display:flex;justify-content:space-between;gap:30px;align-items:center;overflow:hidden;position:relative}
.section+.cta{margin-top:78px}
.cta h2{font-size:2.25rem;max-width:650px}
.cta p{font-size:.8125rem;color:#b9b9be;max-width:500px;margin:15px 0 23px}
.cta .btn{border:0;color:var(--ink)}
.ctaMark{width:170px;height:170px;opacity:.15;flex-shrink:0;transform:rotate(-12deg)}
.ctaMark svg{width:100%;height:100%}
footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:31px 0 35px;font-size:.625rem;color:var(--color-text-subtle)}
footer .logo{width:112px;height:28px;color:#222}
.footerBrand{display:flex;align-items:center;gap:22px}
footer .links{display:flex;gap:23px}
/* Operator requisites (components/operator_details.html) and the /contacts page */
footer{flex-wrap:wrap}
.operator{margin:0}
.operator--line{flex-basis:100%;line-height:1.6}
.page{padding:40px 0 70px;max-width:720px}
.page h1{font-size:clamp(2.25rem,4vw,3.25rem);letter-spacing:-2px;margin:10px 0 18px}
.pageLead{font-size:.9375rem;color:var(--muted);margin:0 0 8px;max-width:560px}
.pageContact{font-size:.9375rem;margin:0 0 34px}
.pageContact a{text-decoration:underline;text-underline-offset:3px}
/* /rules: plain reading text */
.page h2{font-size:1.25rem;letter-spacing:-.4px;margin:34px 0 10px}
.page ul{margin:0;padding-left:20px;display:grid;gap:8px;font-size:.9375rem;line-height:1.6}
.page main p,.page > p{font-size:.9375rem;line-height:1.6}
/* /developers: request examples */
.page pre{margin:12px 0;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--soft);font-size:.8125rem;line-height:1.55;overflow-x:auto;white-space:pre}
.page code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em}
.page table{border-collapse:collapse;font-size:.875rem;width:100%;margin:8px 0}
.page th,.page td{border-bottom:1px solid var(--line);padding:8px 6px;text-align:left;vertical-align:top}
.operator--block{border:1px solid var(--line);border-radius:14px;padding:26px 28px;background:var(--soft)}
/* .page .operator__title: the eyebrow wins over the page's h2 size and top margin. */
.operator__title,.page .operator__title{font-size:.75rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:500;margin:0 0 12px}
.operator__details{font-style:normal;font-size:.9375rem}
.operator__details p{margin:0}
.operator__details .operator__name{font-size:1.125rem;font-weight:600;margin-bottom:10px}
.operator__ids{display:flex;flex-wrap:wrap;gap:6px 26px;margin:0 0 6px}
.operator__ids div{display:flex;gap:7px}
.operator__ids dt{color:var(--muted)}
.operator__ids dd{margin:0;font-variant-numeric:tabular-nums}
.mobileMenu{display:none}
a,button{-webkit-tap-highlight-color:transparent}
button:disabled{opacity:.5}

@media(max-width:1050px){.wrap{padding:0 28px}
header{gap:16px}
nav{gap:17px;margin-left:12px}
.hero{gap:28px}
h1{font-size:2.875rem;max-width:650px}
.sectionHead{gap:24px}
h2{font-size:1.875rem}
.step{padding:22px}
.audience{padding:27px}
.ctaMark{width:130px;height:130px}}

@media(max-width:760px){.wrap{padding:0 20px}
header{height:76px;gap:14px}
header .logo{width:125px;height:30px}
nav{display:none}
header .actions>.btn.dark{display:none}header .actions>.btn{min-height:0;padding:9px 13px;font-size:.75rem}
.menu{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:white;border-radius:8px;font-size:.75rem;padding:9px 13px}.menu svg{width:15px;height:15px}
.mobileMenu.open{display:flex;flex-direction:column;gap:17px;border-bottom:1px solid var(--line);padding:5px 0 24px;font-size:.875rem}
.mobileMenu .btn{align-self:flex-start}
.hero{padding-top:28px;grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "catalog" "preview";gap:32px}
.hero>.catalogEntry{padding-top:0}
h1{font-size:clamp(2rem,10.2vw,2.6875rem);letter-spacing:-2px;max-width:540px;margin:20px 0}
.lead{font-size:.9375rem;max-width:460px}
.pill{font-size:.625rem}
.composer{margin-top:24px;padding:10px;gap:8px;flex-wrap:wrap}
.composer:focus-within{outline:2px solid var(--color-focus);outline-offset:4px}
.composer>svg{display:none}
.composer textarea{font-size:1rem;height:72px;line-height:24px}
.send{width:100%;min-height:44px;font-size:.875rem}
.suggestions{gap:7px}
.suggestions button,.suggestions a{padding:9px;font-size:.625rem}
.demoNote{font-size:.625rem;max-width:320px}
.section{padding-top:48px}
.catalogEntry{padding-bottom:28px}
.catalogEntry h2{font-size:1.5rem}
.sectionHead{display:block;margin-bottom:22px}
h2{font-size:1.8125rem;letter-spacing:-1px;text-wrap:balance}
.sectionHead p{max-width:100%;margin-top:14px;font-size:.75rem}
.steps{grid-template-columns:1fr;gap:10px}
.step{padding:22px}
.stepTop{margin-bottom:15px}
.stepTop svg{width:25px;height:25px}
.step h3{font-size:1.125rem}
.step p{font-size:.8125rem}
.audience{margin-top:40px;padding:22px 14px}
.audience .sectionHead{padding:0 6px}
.audienceGrid{grid-template-columns:1fr;gap:12px}
.audienceCard{padding:23px}
.cta{padding:29px 24px;margin-top:16px}
.section+.cta{margin-top:40px}
.cta h2{font-size:1.8125rem}
.ctaMark{position:absolute;right:-35px;bottom:-35px;width:150px;height:150px;pointer-events:none}
.cta>div:first-child{z-index:1}
.cta p{max-width:95%;font-size:.75rem}
footer{align-items:flex-start;flex-direction:column;padding:28px 0;gap:17px}
.footerBrand{gap:14px}
/* Tap targets: 32px tall links, rows touch instead of an extra gap. */
footer .links{flex-wrap:wrap;gap:0 18px;align-items:center}
footer .links a{display:inline-flex;align-items:center;min-height:32px}
.footerBrand>span{font-size:.5625rem}
/* Public subpages have no menu: both «Войти» and «Создать компанию» stay in the header. */
.pageHeader{gap:10px}
.pageHeader .logo{width:104px;height:26px}
.pageHeader .actions{gap:6px}
.pageHeader .actions>.btn,.pageHeader .actions>.btn.dark{display:inline-flex;padding:9px 11px;white-space:nowrap}
/* «Каталог поставщиков» on the landing: two even columns, the count at the right edge. */
#catalog .pubChips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
#catalog .pubChips a{display:flex;justify-content:space-between;gap:6px;height:100%;padding:6px 10px;font-size:.75rem;line-height:1.25}
#catalog .pubChips li:last-child:nth-child(odd){grid-column:1/-1}
.page{padding:24px 0 48px}
.operator--block{padding:20px}
.desktopBreak{display:none}}

/* Quick starts under the composer: where three no longer fit in a row, one even column. */
@media(max-width:560px){.suggestions{display:grid;grid-template-columns:minmax(0,1fr)}
.suggestions button,.suggestions a{font-size:.75rem;padding:9px 12px}}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

@media(max-width:760px){.suggestions button,.suggestions a,.mobileMenu a,.textLink{min-height:44px}
.mobileMenu a{display:flex;align-items:center}
.composer textarea{scroll-margin-bottom:100px}}

@media(max-width:360px){
header{gap:8px}
header .logo{width:104px;height:26px}
header .actions{gap:8px}
header .actions>.btn,.menu{padding:9px 10px}
}