/* Смотрико — «свой стиль» (ветка stil, 25.10.2026).
   Подключается после style.css и переопределяет оформление.
   Мотив: рамка распознавания, как на экране камеры (уголки, подпись, время).
   Шрифты: Geologica (текст) и Martian Mono (цифры, время, метки), SIL OFL 1.1,
   лежат в assets/fonts вместе с текстами лицензий. */
@font-face{font-family:"Geologica";font-style:normal;font-weight:300 800;font-display:swap;src:url(fonts/geologica.woff2) format("woff2")}
@font-face{font-family:"Martian Mono";font-style:normal;font-weight:300 700;font-stretch:75% 112.5%;font-display:swap;src:url(fonts/martian-mono.woff2) format("woff2")}
:root{
  --bg:#F4F3EE;--surface:#FFFFFF;--text:#1C201C;--muted:#5A6057;--line:#D8DAD2;--line-2:#BFC3B9;
  --frame:#0E6B74;--frame-soft:#E3EFEF;
  --radius-card:0;--radius-control:0;--shadow:none;
  --sans:"Geologica",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"Martian Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
}
*,*::before,*::after{border-radius:0!important}
body{font-family:var(--sans);font-size:17px;line-height:1.55;font-variation-settings:"SHRP" 0}
h1,h2,h3,h4{font-weight:700;letter-spacing:-.025em;font-variation-settings:"SHRP" 60}
h1{line-height:1.02}
h2{line-height:1.08}
:focus-visible{outline:3px solid #1F5FBF;outline-offset:2px}

/* моно: цифры, время, метки */
.eyebrow,.tag-demo,.b-dev,.b-add,.b-ok,.b-new,.sh-mod,.kpi span,.kpi b,.p-k,.ctrl-label,.num,.st,.ds,
time,.top-phone,.menu-phone,.phone-big,.bars-in span,.osd,.cam-cap,.legend,.ops-d,.hist b,.draft-flag em,
.seg button em,.tab em,.pm-tab em,.dg-site .dg-meta,.klog-head,.f-leg,.req-note{
  font-family:var(--mono);font-stretch:87.5%;font-variant-numeric:tabular-nums;letter-spacing:0}
.eyebrow{font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--frame)}
.eyebrow::before{content:"";display:inline-block;width:10px;height:10px;border:2px solid var(--frame);margin-right:10px;vertical-align:-1px}
.tag-demo,.b-dev,.b-add,.b-ok,.b-new,.sh-mod{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.04em;padding:5px 7px;border:1px solid currentColor;background:transparent}
.tag-demo{color:var(--accent-text)}
.sh-mod{color:#4A5048;background:transparent}
.sh-mod-p{color:var(--accent-text)}
.b-dev{color:var(--accent-text);background:var(--accent-soft)}
.b-ok{background:var(--success-soft)}

/* рамка распознавания */
.rf{position:relative}
.rf::after{content:"";position:absolute;inset:-7px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M1 17V1h16' fill='none' stroke='%230E6B74' stroke-width='2'/%3E%3C/svg%3E") left top no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M1 1h16v16' fill='none' stroke='%230E6B74' stroke-width='2'/%3E%3C/svg%3E") right top no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M1 1v16h16' fill='none' stroke='%230E6B74' stroke-width='2'/%3E%3C/svg%3E") left bottom no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M17 1v16H1' fill='none' stroke='%230E6B74' stroke-width='2'/%3E%3C/svg%3E") right bottom no-repeat}
.rf-a::after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M1 17V1h16' fill='none' stroke='%23D98A10' stroke-width='2'/%3E%3C/svg%3E") left top no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M1 1h16v16' fill='none' stroke='%23D98A10' stroke-width='2'/%3E%3C/svg%3E") right top no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M1 1v16h16' fill='none' stroke='%23D98A10' stroke-width='2'/%3E%3C/svg%3E") left bottom no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M17 1v16H1' fill='none' stroke='%23D98A10' stroke-width='2'/%3E%3C/svg%3E") right bottom no-repeat}
.cam{margin:0;background:#141714;border:1px solid #141714;display:flex;flex-direction:column}
.cam picture,.cam img{display:block;width:100%;height:auto}
.osd{order:-1;display:flex;justify-content:space-between;gap:12px;padding:7px 12px;color:#E9ECE6;font-size:12px;line-height:1.3;text-transform:uppercase;letter-spacing:.05em;background:#141714}
.osd span:last-child{color:#F2C46B}
.cam-cap{padding:9px 12px;color:#D5D9D1;font-size:12px;line-height:1.45;background:#141714}

/* шапка: сплошная, без размытия */
.top{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid var(--line-2)}
.top-phone,.menu-phone{font-size:15px;font-weight:500}
.menu a{font-weight:500}
@media (max-width:860px){.menu{box-shadow:none;border-bottom:1px solid var(--line-2)}}

/* кнопки: прямоугольные */
.btn{border-width:2px;font-weight:600;letter-spacing:0;min-height:48px}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-ghost{background:transparent;border-color:var(--text)}
.btn-ghost:hover{background:var(--text);border-color:var(--text);color:#fff}
.btn-sm{min-height:44px}
.dark .btn-ghost{border-color:#fff;color:#fff}

/* первый экран */
.hero-in{align-items:start}
.hero h1{font-size:clamp(40px,4.4vw,62px)}
.hero-demo{display:flex;flex-direction:column}
.cam-hero{margin-right:56px}
.hero-demo .shift{margin:-72px 0 0 56px;position:relative;z-index:1}
.hero-facts{border-top:1px solid var(--line-2);padding-top:18px;margin-top:8px}
.hero-facts li::before{border-color:var(--frame)}
.dp{box-shadow:none;border:1px solid var(--line-2)}
.shift{padding:18px 20px}
.shift-list{gap:0;border-top:1px solid var(--line)}
.sh-ev{border:0;border-bottom:1px solid var(--line);border-left:3px solid #C9CCC2;padding:11px 14px;background:#fff;transition:background-color .15s}
.sh-ev:hover{box-shadow:none;background:#F7F7F3}
.sh-ev.is-hl{box-shadow:none;background:var(--frame-soft)}
.sh-t{font-size:16px}
.sh-d{font-size:14px}
.sh-ev{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:2px;align-items:center}
.sh-foot{display:contents}
.sh-t{grid-column:1;grid-row:1}.sh-d{grid-column:1;grid-row:2}
.sh-mod{grid-column:2;grid-row:1;justify-self:end}.sh-go{grid-column:2;grid-row:2;justify-self:end}
.sh-go{min-height:44px;display:inline-flex;align-items:center}
.shift-foot{font-size:12.5px}
@media (max-width:1023px){
  .hero-demo{max-width:640px}
}
@media (max-width:640px){
  .cam-hero{margin-right:0}
  .hero-demo .shift{margin:16px 0 0}
  .osd{font-size:11px;padding:6px 10px}
  .eyebrow{font-size:11.5px;letter-spacing:.02em}
  .eyebrow::before{margin-right:8px}
}

/* без пульсации */
.tb-pulse{animation:none!important;display:none}

/* секции */
.sec-head h2{max-width:22em}
.soft{background:#ECEBE5}
.demo-box{box-shadow:none;border:1px solid var(--line-2)}
.plan,.bars,.mock-list,.ops,.msg,.pick-sum,.params{background:var(--bg)}
.kpi{background:transparent;border:1px solid var(--line);padding:10px 12px}
.kpi span{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.kpi b{font-weight:600;font-size:26px;letter-spacing:-.02em}
.kpi b small{font-family:var(--sans);font-size:14px}
.kpi-warn{border-color:var(--danger);background:transparent}
.side-card,.notif button,.dg-ev,.dg-card,.dg-site{border-color:var(--line)}
.notif button:hover{background:#fff;border-color:var(--text)}
.st{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.03em}
.lg{border-radius:0!important}
.lg.delay{box-shadow:none;outline:2px solid var(--danger-soft)}
.freed,.lg.freed{background:#ECEDE8}
.legend{font-size:13px}

.tabs{gap:0}
.tab{border-radius:0;margin-left:-1px;background:var(--surface);border-color:var(--line-2)}
.tab[aria-selected=true]{background:var(--text);border-color:var(--text);color:#fff}
.seg{padding:3px;border-color:var(--line-2)}
.seg button{min-height:44px}
.seg-quiet button[aria-checked=true]{box-shadow:inset 0 0 0 1.5px var(--text)}
.panel{border-color:var(--line-2)}
.shot-img img,.video-in video,.pm-shot img{border-color:var(--line-2)}
.bars-in i{background:#C3C8BD}
.klog{border-color:var(--line-2)}
.kl-go{min-height:44px}
.kl-st{font-family:var(--mono);font-stretch:87.5%;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.02em}
.video-more{border-color:var(--line-2)}

/* уведомления */
.msg{border:1px solid var(--line)}
.msg-card{border:1px solid var(--line)}
.msg-ava{border-radius:50%!important}
.bubble{border-left:3px solid var(--frame)}

/* подключение: шаги линией */
.steps{gap:0;border-top:2px solid var(--text)}
.steps li{background:transparent;border:0;border-left:1px solid var(--line-2);padding:18px 24px 6px}
.steps li:first-child{border-left:0;padding-left:0}
.num{width:auto;height:auto;background:none;display:block;margin:0 0 14px;font-size:44px;font-weight:400;line-height:1;color:var(--frame)}
.num::before{content:"0"}
.data-flow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-areas:"cam df" "cam cap";gap:20px 40px;align-items:start;margin-top:40px;background:var(--surface);border:1px solid var(--line-2);padding:28px}
.data-flow .cam-ev{grid-area:cam}
.data-flow .df{grid-area:df;grid-template-columns:1fr;gap:26px;margin:0}
.data-flow .df-cap{grid-area:cap;margin:0}
.df li{background:transparent;border:1px solid var(--line-2);align-items:flex-start;text-align:left;padding:14px 16px}
.df li+li::before{left:24px;top:-20px;width:2px;height:14px;background:var(--frame)}
.df li+li::after{left:20px;top:-10px;border-color:var(--frame);transform:rotate(135deg)}
.df li:last-child{border-color:var(--frame)}
.df span{font-family:var(--mono);font-stretch:87.5%;font-size:12px;text-transform:uppercase;letter-spacing:.03em}
@media (max-width:860px){
  .steps{grid-template-columns:1fr;border-top:0}
  .steps li,.steps li:first-child{border-left:0;border-top:1px solid var(--line-2);padding:16px 0 14px;display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:8px}
  .steps li:first-child{border-top:2px solid var(--text)}
  .steps li .num{grid-row:1/3;font-size:32px;margin:0}
  .steps li h3,.steps li p{grid-column:2}
  .data-flow{grid-template-columns:1fr;grid-template-areas:"cam" "df" "cap";padding:18px}
}

/* тарифы */
.tg-prices,.prices{gap:0}
.tg-prices .price,.price{border:1px solid var(--line-2);margin-left:-1px;background:var(--surface)}
.tg-prices .price-accent{border:2px solid var(--accent);box-shadow:none;z-index:1;margin-top:-1px;margin-bottom:-1px}
.price h3{font-size:22px}
.p-k{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.p-sub b:not(.p-word){font-family:var(--mono);font-stretch:87.5%;font-variant-numeric:tabular-nums;font-weight:600;font-size:34px;letter-spacing:-.03em;line-height:1.15}
.tg-prices .p-sub b.p-word{font-size:24px}
.ticks li::before{border-color:var(--frame)!important}
.draft-flag{border-left:3px solid var(--accent);padding-left:12px}
.connect-grid{gap:0}
.cn-card{border:1px solid var(--line-2);margin-left:-1px;background:var(--surface);box-shadow:none}
.cn-main{background:var(--surface);border-top:3px solid var(--frame)}
@media (max-width:1023px){
  .tg-prices .price,.price,.cn-card{margin-left:0;margin-top:-1px}
}
@media (max-width:640px){
  .p-sub b:not(.p-word){font-size:28px}
}

/* пилот, вопросы, заявка */
.pilot-table{border-color:var(--line-2)}
.pilot-list div,.report,.rep-row{box-shadow:none}
.report{border-color:var(--line-2)}
#faq details{border-color:var(--line-2)}
.form{border:1px solid #3A3F39}
.form input:not([type=checkbox]),.form select{border-width:1px;border-color:#9EA398}
.form input:focus,.form select:focus{border-color:var(--frame);outline:2px solid var(--frame);outline-offset:0}
.form select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235A6057' stroke-width='1.6'/%3E%3C/svg%3E");background-position:calc(100% - 14px) 50%;background-size:12px 8px}
.form-ok{border-left:3px solid var(--success)}
.m-box{border:1px solid var(--line-2)}
.m-x{border-radius:0!important}
.foot{border-top:1px solid var(--line-2)}
button,input,select,textarea{font-family:inherit}