@charset "UTF-8";
/* ==========================================================================
   智能消防体能训练系统 — 产品详情页
   ========================================================================== */

:root{
  --ink:        #101720;
  --ink-2:      #3B4553;
  --ink-3:      #6B7686;
  --ink-4:      #98A2B0;
  --line:       #E3E7ED;
  --line-2:     #EFF2F6;
  --bg:         #FFFFFF;
  --bg-soft:    #F6F7F9;
  --bg-soft-2:  #FAFBFC;
  --navy:       #0B1826;
  --navy-2:     #13293D;
  --navy-3:     #1D3A55;
  --red:        #D0201F;
  --red-2:      #A91616;
  --amber:      #DB9327;

  --font-sans: "PingFang SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans SC","Noto Sans CJK SC","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono: ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;

  --sp-sec: 104px;
  --radius: 4px;
  --shadow-s: 0 1px 2px rgba(16,23,32,.05), 0 2px 8px rgba(16,23,32,.04);
  --shadow-m: 0 2px 6px rgba(16,23,32,.06), 0 12px 32px rgba(16,23,32,.07);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font-sans);
  font-size:15px;
  line-height:1.85;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; height:auto; display:block; border:0; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4,p,dl,dd,dt,figure,blockquote{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
table{ border-collapse:collapse; width:100%; }
strong{ font-weight:600; }

.container{ width:100%; max-width:1180px; margin:0 auto; padding:0 32px; }
.container--wide{ max-width:1320px; }

.num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

/* ==========================================================================
   Top utility bar
   ========================================================================== */
.topbar{
  background:var(--navy);
  color:rgba(255,255,255,.72);
  font-size:12.5px;
  line-height:1;
}
.topbar .container{
  display:flex; align-items:center; justify-content:space-between;
  height:38px; gap:24px;
}
.topbar__l{ display:flex; align-items:center; gap:10px; letter-spacing:.02em; }
.topbar__dot{ width:5px; height:5px; border-radius:50%; background:var(--red); flex:none; }
.topbar__r{ display:flex; align-items:center; gap:26px; }
.topbar__r a{ color:rgba(255,255,255,.9); transition:color .18s; }
.topbar__r a:hover{ color:#fff; }
.topbar__r span{ color:rgba(255,255,255,.34); }

/* ==========================================================================
   Header
   ========================================================================== */
.hd{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid var(--line);
}
.hd .container{ display:flex; align-items:center; height:70px; gap:40px; }
.hd__brand{ display:flex; align-items:center; gap:12px; flex:none; }
.hd__brand svg{ flex:none; }
.hd__brand b{ display:block; font-size:15px; font-weight:600; letter-spacing:.01em; line-height:1.3; }
.hd__brand i{
  display:block; font-style:normal; font-family:var(--font-mono);
  font-size:10px; letter-spacing:.14em; color:var(--ink-4); margin-top:3px;
}
.hd__nav{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.hd__nav a{
  padding:9px 14px; font-size:14px; color:var(--ink-2); border-radius:var(--radius);
  transition:color .18s, background .18s; white-space:nowrap;
}
.hd__nav a:hover{ color:var(--ink); background:var(--bg-soft); }
.hd__tel{
  display:flex; align-items:center; gap:9px; padding-left:26px; margin-left:10px;
  border-left:1px solid var(--line); white-space:nowrap;
}
.hd__tel small{ display:block; font-size:10.5px; color:var(--ink-4); letter-spacing:.06em; }
.hd__tel b{ font-family:var(--font-mono); font-size:15px; letter-spacing:.01em; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative; overflow:hidden;
  background:var(--navy);
  color:#fff;
  min-height:592px;
  display:flex; align-items:center;
}
.hero__bg{
  position:absolute; inset:0;
  background-image:url("../img/hero.jpg");
  background-size:cover; background-position:52% 46%;
}
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(8,17,27,.97) 0%, rgba(8,17,27,.93) 42%, rgba(8,17,27,.78) 66%, rgba(8,17,27,.42) 100%),
    linear-gradient(180deg, rgba(8,17,27,.34) 0%, rgba(8,17,27,0) 34%, rgba(8,17,27,.58) 100%);
}
.hero h1, .hero__sub, .eyebrow{ text-shadow:0 1px 18px rgba(6,13,21,.55); }
.hero__grid{
  position:absolute; inset:0; opacity:.16; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size:112px 112px;
  mask-image:linear-gradient(90deg, transparent 0%, #000 55%, #000 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 55%, #000 100%);
}
.hero .container{ position:relative; padding-top:82px; padding-bottom:74px; }
.hero__inner{ max-width:660px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.19em;
  color:rgba(255,255,255,.66); text-transform:uppercase;
}
.eyebrow::before{
  content:""; width:26px; height:2px; background:var(--red); flex:none;
}
.hero h1{
  margin:22px 0 0;
  font-size:clamp(30px,4.4vw,46px); font-weight:600;
  line-height:1.28; letter-spacing:-.015em; color:#fff;
}
.hero__sub{
  margin:22px 0 0; max-width:590px;
  font-size:15.5px; line-height:2; color:rgba(255,255,255,.76);
}
.hero__metrics{
  display:grid; grid-template-columns:repeat(4,auto); justify-content:start;
  gap:0 34px; margin-top:40px; padding-top:26px;
  border-top:1px solid rgba(255,255,255,.15);
}
.hero__metrics > div{ min-width:0; }
.hero__metrics dt{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.13em;
  color:rgba(255,255,255,.5); text-transform:uppercase;
}
.hero__metrics dd{
  margin:8px 0 0; font-size:24px; font-weight:600; letter-spacing:-.01em; line-height:1;
  font-variant-numeric:tabular-nums;
}
.hero__metrics dd em{ font-style:normal; font-size:13px; font-weight:400; color:rgba(255,255,255,.66); margin-left:5px; }
.hero__acts{ display:flex; align-items:center; gap:14px; margin-top:42px; flex-wrap:wrap; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  height:48px; padding:0 26px; border-radius:var(--radius);
  font-size:14.5px; font-weight:500; letter-spacing:.01em;
  transition:background .2s, border-color .2s, color .2s, transform .2s;
}
.btn--primary{ background:var(--red); color:#fff; }
.btn--primary:hover{ background:var(--red-2); transform:translateY(-1px); }
.btn--ghost{ border:1px solid rgba(255,255,255,.34); color:#fff; }
.btn--ghost:hover{ border-color:rgba(255,255,255,.7); background:rgba(255,255,255,.07); }
.btn svg{ flex:none; }

/* ==========================================================================
   Breadcrumb
   ========================================================================== */
.crumb{ border-bottom:1px solid var(--line); background:var(--bg-soft-2); }
.crumb .container{ display:flex; align-items:center; gap:9px; height:48px; font-size:12.5px; color:var(--ink-3); }
.crumb a:hover{ color:var(--red); }
.crumb span{ color:var(--ink-4); }
.crumb b{ font-weight:500; color:var(--ink-2); }

/* ==========================================================================
   Section frame
   ========================================================================== */
.sec{ padding:var(--sp-sec) 0; }
.sec--soft{ background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.sec--dark{ background:var(--navy); color:#fff; }

.sec-head{ margin-bottom:52px; }
.sec-head__tag{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.18em;
  color:var(--red); text-transform:uppercase;
}
.sec-head__tag i{ font-style:normal; }
.sec-head__tag::after{ content:""; width:38px; height:1px; background:currentColor; opacity:.45; }
.sec-head h2{
  margin:18px 0 0; font-size:clamp(23px,2.9vw,32px); font-weight:600;
  line-height:1.45; letter-spacing:-.012em;
}
.sec-head p{ margin:18px 0 0; max-width:840px; font-size:15px; line-height:2; color:var(--ink-2); }
.sec--dark .sec-head h2{ color:#fff; }
.sec--dark .sec-head p{ color:rgba(255,255,255,.7); }

.sub-head{ margin-bottom:26px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.sub-head h3{ font-size:19px; font-weight:600; letter-spacing:-.005em; display:flex; align-items:baseline; gap:12px; }
.sub-head h3 i{
  font-style:normal; font-family:var(--font-mono); font-size:12px;
  color:var(--red); letter-spacing:.06em; flex:none;
}
.sub-head p{ margin:10px 0 0; font-size:14px; color:var(--ink-3); line-height:1.9; }

/* ==========================================================================
   Overview (01)
   ========================================================================== */
.ov{ display:grid; grid-template-columns:1.06fr .94fr; gap:64px; align-items:start; }
.ov__body > p + p{ margin-top:22px; }
.ov__body p{ font-size:15px; line-height:2.05; color:var(--ink-2); }
.ov__body p b{
  display:inline-block; color:var(--ink); font-weight:600;
  border-bottom:2px solid rgba(208,32,31,.28); padding-bottom:1px; margin-right:2px;
}
.ov__body blockquote{
  margin:26px 0 0; padding:22px 26px;
  background:var(--bg-soft); border-left:3px solid var(--red);
  font-size:14.5px; line-height:2; color:var(--ink-2);
}
.quote-tag{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:10.5px; font-weight:400;
  letter-spacing:.15em; color:var(--red); text-transform:uppercase;
  margin-bottom:11px;
}
.quote-tag::after{ content:""; width:22px; height:1px; background:rgba(208,32,31,.45); }
.ov__body blockquote cite{
  display:block; margin-top:12px; font-style:normal;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em; color:var(--ink-4);
}
.facts{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  margin-top:34px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.facts > div{ padding:22px 20px 22px 0; }
.facts > div + div{ padding-left:24px; border-left:1px solid var(--line); }
.facts dt{ font-size:12px; color:var(--ink-4); letter-spacing:.03em; }
.facts dd{
  margin:10px 0 0; font-size:20px; font-weight:600; letter-spacing:-.01em; line-height:1.3;
  font-variant-numeric:tabular-nums;
}
.facts dd em{ font-style:normal; font-size:12.5px; font-weight:400; color:var(--ink-3); display:block; margin-top:5px; letter-spacing:0; }

.fig{ margin:0; }
.fig img{ width:100%; border-radius:var(--radius); }
.fig figcaption{
  margin-top:14px; font-size:12.5px; color:var(--ink-3); line-height:1.7;
  display:flex; align-items:flex-start; gap:9px;
}
.fig figcaption::before{
  content:""; width:14px; height:1px; background:var(--ink-4); flex:none; margin-top:9px;
}
.ov__fig{ position:sticky; top:106px; }
.ov__fig img{ box-shadow:var(--shadow-m); }

/* ==========================================================================
   Problems (02)
   ========================================================================== */
.probs{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.prob{ background:#fff; padding:34px 34px 32px; }
.prob__no{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.14em;
  color:var(--ink-4); display:block;
}
.prob h3{ margin:14px 0 0; font-size:17.5px; font-weight:600; line-height:1.55; letter-spacing:-.005em; }
.prob__now{ margin:16px 0 0; font-size:14px; line-height:1.95; color:var(--ink-2); }
.prob__fix{
  margin-top:22px; padding:18px 20px 18px 22px;
  background:var(--bg-soft-2); border-left:3px solid var(--red);
}
.prob__fix b{
  display:block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.15em;
  color:var(--red); text-transform:uppercase; margin-bottom:9px;
}
.prob__fix p{ font-size:13.5px; line-height:1.9; color:var(--ink-2); }

/* ==========================================================================
   Architecture (03)
   ========================================================================== */
.arch{ display:grid; gap:14px; }
.layer{
  display:grid; grid-template-columns:212px 1fr; gap:0;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff;
}
.layer__id{
  padding:26px 26px 26px 28px; background:var(--bg-soft);
  border-right:1px solid var(--line);
}
.layer__id span{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.15em;
  color:var(--red); display:block;
}
.layer__id h4{ margin:12px 0 0; font-size:15.5px; font-weight:600; line-height:1.6; }
.layer__id small{ display:block; margin-top:10px; font-size:11.5px; color:var(--ink-4); letter-spacing:.02em; }
.layer__body{ padding:26px 28px; }
.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border:1px solid var(--line); border-radius:2px;
  font-size:13px; color:var(--ink-2); background:var(--bg-soft-2); line-height:1.4;
}
.chip::before{ content:""; width:4px; height:4px; background:var(--ink-4); flex:none; }
.layer--a .layer__id{ background:rgba(208,32,31,.05); border-right-color:rgba(208,32,31,.18); }

.flow{
  display:flex; align-items:center; gap:0; flex-wrap:wrap;
  margin-top:28px; padding:22px 26px;
  background:var(--navy); border-radius:var(--radius); color:rgba(255,255,255,.86);
}
.flow__item{ display:flex; align-items:center; gap:11px; font-size:13.5px; }
.flow__item b{ font-weight:500; }
.flow__item span{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em;
  color:rgba(255,255,255,.45); border:1px solid rgba(255,255,255,.2);
  padding:2px 6px; border-radius:2px;
}
.flow__arrow{ padding:0 20px; color:rgba(255,255,255,.3); flex:none; }

/* ==========================================================================
   Features (04)
   ========================================================================== */
.feat-block + .feat-block{ margin-top:76px; }

.host{ display:grid; grid-template-columns:1.35fr .65fr; gap:52px; align-items:start; }
.host__fig{ position:sticky; top:106px; }
.host__fig img{
  width:100%; background:#0E1116; border-radius:var(--radius);
  box-shadow:var(--shadow-m);
}

.tbl{ font-size:13.5px; }
.tbl caption{
  caption-side:top; text-align:left; font-size:12px; color:var(--ink-4);
  padding-bottom:12px; letter-spacing:.02em;
}
.tbl th{
  text-align:left; font-weight:500; font-size:11.5px; letter-spacing:.1em;
  color:var(--ink-4); text-transform:uppercase;
  padding:0 16px 12px 0; border-bottom:1px solid var(--ink);
  white-space:nowrap;
}
.tbl td{
  padding:15px 16px 15px 0; border-bottom:1px solid var(--line);
  vertical-align:top; line-height:1.75; color:var(--ink-2);
}
.tbl tbody tr:hover td{ background:var(--bg-soft-2); }
.tbl td:first-child{
  width:150px; color:var(--ink); font-weight:500; white-space:nowrap;
}
.tbl td.u{ font-variant-numeric:tabular-nums; letter-spacing:.01em; }
.tbl--wide td:first-child{ width:190px; }
.tbl--wide th:nth-child(3),.tbl--wide th:nth-child(4),.tbl--wide th:nth-child(5),
.tbl--wide td:nth-child(3),.tbl--wide td:nth-child(4),.tbl--wide td:nth-child(5){
  width:112px; white-space:nowrap;
}

.tech{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.tech__c{ background:#fff; padding:30px 28px 32px; }
.tech__c > span{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; color:var(--red);
}
.tech__c h4{ margin:14px 0 0; font-size:16px; font-weight:600; line-height:1.5; }
.tech__c dl{ margin:18px 0 0; }
.tech__c dt{
  font-size:11.5px; color:var(--ink-4); letter-spacing:.04em;
  padding-top:12px; border-top:1px solid var(--line-2);
}
.tech__c dd{ margin:6px 0 0; font-size:13.5px; line-height:1.9; color:var(--ink-2); }
/* 第 5 张卡片横跨两列，用于收口三列网格 */
.tech__c--wide{ grid-column:span 2; }
.tech__c--wide dl{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px 30px; margin-top:18px; }
.tech__c--wide dl > div{ border-top:1px solid var(--line-2); padding-top:12px; }
.tech__c--wide dt{ border-top:0; padding-top:0; }

.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:44px; }
.list-h{ margin-bottom:20px; }
.list-h b{ font-size:15.5px; font-weight:600; display:block; }
.list-h span{
  display:block; margin-top:7px; font-family:var(--font-mono);
  font-size:10.5px; letter-spacing:.13em; color:var(--ink-4);
}
.bullets li{
  position:relative; padding:15px 0 15px 20px;
  border-top:1px solid var(--line); font-size:13.5px; line-height:1.9; color:var(--ink-2);
}
.bullets li::before{
  content:""; position:absolute; left:0; top:23px;
  width:5px; height:5px; background:var(--red); border-radius:50%;
}
.bullets li b{ color:var(--ink); font-weight:500; }

/* Device gallery */
.gal{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.gal figure{ margin:0; }
.gal figure a{ display:block; }
.gal__ph{
  position:relative; background:#0E1116; border-radius:var(--radius);
  aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
  overflow:hidden; padding:16px;
}
.gal__ph img{
  max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
}
.gal figcaption{
  margin-top:13px; font-size:12.5px; line-height:1.75; color:var(--ink-3);
}
.gal figcaption b{ display:block; color:var(--ink); font-weight:500; font-size:13.5px; margin-bottom:4px; }

/* ==========================================================================
   Scenes (06)
   ========================================================================== */
.scenes{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.scene{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.scene__ph{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--navy); }
.scene__ph img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.scene:hover .scene__ph img{ transform:scale(1.045); }
.scene__tx{ padding:24px 24px 28px; }
.scene__tx span{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; color:var(--red);
}
.scene__tx h3{ margin:12px 0 0; font-size:16.5px; font-weight:600; line-height:1.55; }
.scene__tx p{ margin:14px 0 0; font-size:13.5px; line-height:1.92; color:var(--ink-2); }

/* ==========================================================================
   CTA / contact
   ========================================================================== */
.cta{ position:relative; overflow:hidden; background:var(--navy-2); color:#fff; }
.cta__bg{ position:absolute; inset:0; }
.cta__bg img{ width:100%; height:100%; object-fit:cover; opacity:.24; }
.cta__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(11,24,38,.96) 0%, rgba(11,24,38,.88) 46%, rgba(11,24,38,.62) 100%);
}
.cta .container{ position:relative; padding-top:82px; padding-bottom:82px; }
.cta__grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:64px; align-items:start; }
.cta h2{ font-size:clamp(22px,2.7vw,30px); font-weight:600; line-height:1.5; letter-spacing:-.01em; }
.cta__lead{ margin:20px 0 0; font-size:14.5px; line-height:2; color:rgba(255,255,255,.72); max-width:440px; }
.cta__note{
  margin-top:28px; padding-top:22px; border-top:1px solid rgba(255,255,255,.16);
  font-size:12.5px; color:rgba(255,255,255,.5); line-height:1.9;
}
.contact{ display:grid; gap:1px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.14); }
.contact > div{
  background:rgba(11,24,38,.55); padding:22px 26px;
  display:grid; grid-template-columns:96px 1fr; gap:20px; align-items:baseline;
}
.contact dt{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.13em;
  color:rgba(255,255,255,.44); text-transform:uppercase;
}
.contact dd{ margin:0; font-size:15px; line-height:1.7; color:#fff; }
.contact dd a:hover{ color:#fff; text-decoration:underline; text-underline-offset:4px; }
.contact dd small{ display:block; margin-top:4px; font-size:12px; color:rgba(255,255,255,.5); }
.contact .big{ font-family:var(--font-mono); font-size:20px; letter-spacing:.01em; }

/* ==========================================================================
   Footer
   ========================================================================== */
.ft{ background:var(--navy); color:rgba(255,255,255,.5); font-size:12.5px; }
.ft .container{ padding-top:30px; padding-bottom:30px; display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.ft__sep{ color:rgba(255,255,255,.2); }
.ft__r{ margin-left:auto; display:flex; gap:22px; flex-wrap:wrap; }
.ft a:hover{ color:rgba(255,255,255,.86); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1080px){
  :root{ --sp-sec:82px; }
  .ov{ grid-template-columns:1fr; gap:44px; }
  .ov__fig,.host__fig{ position:static; }
  .host{ grid-template-columns:1fr; gap:34px; }
  .host__fig{ order:-1; max-width:520px; }
  .tech{ grid-template-columns:repeat(2,1fr); }
  .tech__c--wide{ grid-column:span 2; }
  .tech__c--wide dl{ grid-template-columns:repeat(3,1fr); }
  .grid3{ grid-template-columns:1fr; gap:40px; }
  .gal{ grid-template-columns:repeat(2,1fr); }
  .scenes{ grid-template-columns:repeat(2,1fr); }
  .cta__grid{ grid-template-columns:1fr; gap:40px; }
  .hd__nav{ display:none; }
}
@media (max-width:820px){
  .container{ padding:0 22px; }
  .hero{ min-height:0; }
  .hero .container{ padding-top:56px; padding-bottom:52px; }
  .hero__metrics{ grid-template-columns:repeat(2,1fr); gap:24px 28px; }
  .topbar__r span,.topbar__r a:not(:last-child){ display:none; }
  .probs{ grid-template-columns:1fr; }
  .flow__arrow{ padding:0 12px; }
  .layer{ grid-template-columns:1fr; }
  .layer__id{ border-right:0; border-bottom:1px solid var(--line); padding:20px 24px; }
  .layer__body{ padding:22px 24px; }
  .layer__id h4{ margin-top:8px; }
  .facts{ grid-template-columns:1fr; }
  .facts > div{ padding:18px 0; }
  .facts > div + div{ padding-left:0; border-left:0; border-top:1px solid var(--line); }
  .contact > div{ grid-template-columns:1fr; gap:7px; }
  .scenes{ grid-template-columns:1fr; }
  .tbl--wide{ font-size:12.5px; }
  .tbl--wide th:nth-child(3),.tbl--wide th:nth-child(4),.tbl--wide th:nth-child(5),
  .tbl--wide td:nth-child(3),.tbl--wide td:nth-child(4),.tbl--wide td:nth-child(5){ width:auto; }
}
@media (max-width:560px){
  :root{ --sp-sec:64px; }
  .hd__brand i{ display:none; }
  .hd__tel{ padding-left:16px; }
  .gal{ grid-template-columns:1fr; }
  .tech{ grid-template-columns:1fr; }
  .tech__c--wide{ grid-column:span 1; }
  .tech__c--wide dl{ grid-template-columns:1fr; gap:16px; }
  .tbl--wide{ font-size:12px; display:block; overflow-x:auto; white-space:nowrap; }
  .tbl--wide td:first-child{ white-space:normal; }
  .hero__metrics dd{ font-size:20px; }
}