:root{
  color-scheme:dark;
  --bg:#0b141e;
  --panel:#101e2a;
  --ink:#f1f4f6;
  --muted:#a8b7c4;
  --subtle:#8194a6;
  --blue:#9ac9ed;
  --green:#9ec9b7;
  --amber:#e9bb7c;
  --line:#ffffff16;
  --mono:ui-monospace,SFMono-Regular,Consolas,monospace;
  --stage-height:min(820px,calc(100svh - 108px));
  --sticky-top:94px;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-synthesis:none
}
*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth;
  scroll-padding-top:110px
}
body{
  margin:0;
  background-color:var(--bg);
  color:var(--ink);
  background-image:linear-gradient(#7aa6c309 1px,transparent 1px),linear-gradient(90deg,#7aa6c309 1px,transparent 1px),radial-gradient(ellipse at 50% 1%,#244b693b,transparent 1200px);
  background-size:48px 48px,48px 48px,auto
}
.brand-intro{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  width:min(100%,900px);
  min-height:112px;
  flex-shrink:0;
  gap:24px;
  margin-bottom:28px
}
.hero-masthead{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%
}
.intro-symbol{
  position:relative;
  width:148px;
  height:112px;
  flex:0 0 148px
}
.brand-intro-art{
  display:block;
  position:absolute;
  top:50%;
  left:50%;
  width:440px;
  height:auto;
  max-width:none;
  overflow:visible;
  transform:translate(-57.6%,-50%)
}
@media(min-width:701px){
  .brand-intro{
    width:fit-content;
    max-width:min(100%,900px);
    transform:translateX(-17px)
  }
  .brand-intro .intro-caption{
    flex:0 1 auto
  }
}
.has-brand-intro .brand-intro{
  transform:translateX(var(--intro-group-x,0px))
}
.has-brand-intro .hero-masthead{
  transform:translateY(var(--intro-offset,calc(50svh - 260px)))
}
.has-brand-intro .intro-symbol{
  transform:translateX(var(--intro-logo-x,0px))
}
.intro-caption{
  border-left:1px solid #9ac9ed59;
  padding:13px 0 13px 24px;
  text-align:left;
  flex:1;
  min-width:0
}
.intro-caption-title{
  font:600 12px/1.6 var(--mono);
  letter-spacing:.13em;
  color:var(--blue);
  margin:0 0 8px
}
.intro-caption-copy{
  font-size:14px;
  line-height:1.5;
  color:var(--muted);
  margin:0
}
.has-brand-intro .intro-caption{
  opacity:var(--intro-caption-opacity,0)
}
.has-brand-intro .hero-masthead h1{
  animation:intro-title-in .6s ease both
}
@keyframes intro-title-in{
  from{opacity:0;filter:blur(6px)}
  to{opacity:1;filter:blur(0)}
}
.intro-transition .site-header,
.intro-transition .hero>:not(.hero-masthead),
.intro-transition main>section:not(.hero),
.intro-transition .site-footer{
  transition:opacity .75s ease
}
.has-brand-intro:not(.intro-revealing) .site-header,
.has-brand-intro:not(.intro-revealing) .hero>:not(.hero-masthead),
.has-brand-intro:not(.intro-revealing) main>section:not(.hero),
.has-brand-intro:not(.intro-revealing) .site-footer{
  opacity:0;
  pointer-events:none
}
.intro-letter{
  font:700 124px Arial,"Helvetica Neue",Helvetica,sans-serif;
  letter-spacing:-.04em;
  fill:var(--ink)
}
#intro-orelli{
  transform-origin:200px 117px
}
html:not(.has-brand-intro) #intro-word{
  transform:translate(120px,0)!important
}
html:not(.has-brand-intro) #intro-orelli{
  transform:translate(-19px,-38px) scale(.5)!important
}
html:not(.has-brand-intro) #intro-relli{
  opacity:0!important
}
.intro-skip{
  display:none;
  position:fixed;
  z-index:100;
  right:24px;
  bottom:max(28px,env(safe-area-inset-bottom));
  padding:12px 18px;
  border:1px solid var(--line);
  border-radius:5px;
  background:transparent;
  color:var(--muted);
  font-size:14px
}
.has-brand-intro .intro-skip{
  display:block
}
button,a,input,textarea{
  -webkit-tap-highlight-color:transparent
}
a{
  color:inherit;
  text-decoration:none
}
button,input,textarea{
  font:inherit
}
button{
  cursor:pointer
}
button:disabled{
  cursor:default
}
a,button{
  touch-action:manipulation
}
button:focus-visible,a:focus-visible,textarea:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:5px
}
button{
  color:inherit
}
p{
  line-height:1.65
}
h1,h2,h3,p{
  margin-top:0
}
h1,h2{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  letter-spacing:-.045em
}
h1 em,h2 em{
  font-weight:400;
  color:#c1d9eb
}
h3{
  font-size:20px;
  font-weight:550;
  line-height:1.4;
  letter-spacing:-.025em
}
.page-width{
  width:calc(100% - 96px);
  max-width:1380px;
  margin-inline:auto
}
.section-space{
  padding-block:108px
}
.eyebrow{
  font:12px/1.5 var(--mono);
  font-weight:500;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--blue);
  margin-bottom:25px
}
.eyebrow>span{
  margin-right:14px;
  color:var(--subtle)
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-weight:720;
  font-size:25px;
  letter-spacing:-.04em
}
.brand-mark{
  font:700 40px/1 Arial,sans-serif;
  letter-spacing:-.11em;
  display:inline-block;
  padding-right:5px
}
.site-header{
  position:fixed;
  inset:0 0 auto;
  z-index:50;
  height:82px;
  padding-inline:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  background:#0b141eed;
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(18px)
}
.site-header nav{
  display:flex;
  gap:30px;
  font-size:14px;
  color:#c0cbd4
}
.site-header nav a:hover,.text-link:hover,.login:hover{
  color:var(--blue)
}
.header-actions{
  display:flex;
  gap:26px;
  align-items:center;
  font-size:14px
}
.button{
  background:var(--blue);
  color:#101e2a;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  border:1px solid transparent;
  border-radius:5px;
  padding:16px 22px;
  font-size:14px;
  font-weight:650;
  line-height:1.3;
  transition:background .2s,transform .2s
}
.button:hover{
  background:#b7dcf7;
  transform:translateY(-2px)
}
.button span{
  font-size:18px
}
.button-small{
  padding:12px 17px;
  gap:18px
}
.text-link{
  font-size:14px;
  display:inline-flex;
  gap:20px;
  align-items:center;
  line-height:1.4
}
.hero{
  text-align:center;
  padding:clamp(122px,12svh,150px) 24px 40px;
  display:flex;
  flex-direction:column;
  align-items:center
}
.hero .eyebrow{
  margin-bottom:25px
}
.hero h1{
  font-size:clamp(32px,3.4vw,48px);
  line-height:1.06;
  margin-bottom:25px
}
.hero-description{
  font-size:17px;
  max-width:920px;
  color:var(--muted);
  margin-bottom:0
}
.hero-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:30px
}
.hero-note{
  font:12px/1.7 var(--mono);
  color:var(--subtle);
  margin:25px 0 0;
  display:flex;
  align-items:center;
  gap:12px
}
.hero-note i{
  font-style:normal;
  color:#506273
}
.status-dot{
  display:inline-block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 10px #9ec9b74d
}
.story{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,.82fr);
  gap:clamp(38px,4vw,76px);
  max-width:1480px;
  position:relative
}
.visual-track{
  position:relative;
  min-width:0
}
.visual-card{
  position:sticky;
  top:var(--sticky-top);
  height:var(--stage-height);
  border:1px solid #a7c9e22c;
  border-radius:10px;
  background:#0e1a25;
  box-shadow:0 30px 90px #0005;
  overflow:hidden;
  transform:translate3d(var(--entrance-x,0px),0,0);
  will-change:transform
}
.window-bar{
  height:46px;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:#1c2a37;
  border-bottom:1px solid var(--line);
  font:12px/1 var(--mono);
  letter-spacing:.1em;
  color:#bccbd7
}
.small-brand{
  font:700 19px Arial;
  margin-right:8px;
  color:var(--ink);
  letter-spacing:0
}
.window-product{
  color:var(--subtle);
  margin-left:6px
}
.demo-label{
  font-size:10px;
  letter-spacing:.08em;
  color:var(--subtle)
}
.scene-stack{
  height:calc(100% - 86px);
  position:relative
}
.scene{
  position:absolute;
  inset:0;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s;
  overflow:hidden
}
.scene.is-active{
  opacity:1;
  visibility:visible;
  pointer-events:auto
}
.window-footer{
  position:absolute;
  bottom:0;
  height:40px;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 18px;
  border-top:1px solid var(--line);
  background:#111e29;
  color:var(--subtle);
  font:10px/1.3 var(--mono);
  gap:12px
}
.scene-navigation{
  display:flex;
  gap:4px
}
.scene-navigation button{
  padding:12px 2px;
  background:none;
  border:0
}
.scene-navigation button::after{
  content:"";
  display:block;
  width:17px;
  height:2px;
  background:#4d6477;
  transition:width .2s,background .2s
}
.scene-navigation button[aria-current=true]::after{
  width:30px;
  background:var(--blue)
}
.scene-counter{
  white-space:nowrap;
  color:var(--blue)
}
.story-step{
  min-height:90svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-block:95px;
  opacity:.2;
  transition:opacity .25s;
  scroll-margin-top:0
}
.story-step.is-active{
  opacity:var(--copy-opacity,1)
}
.story-step h2{
  font-size:clamp(34px,3.25vw,49px);
  line-height:1.13;
  margin-bottom:25px
}
.story-step>p:not(.eyebrow):not(.story-note){
  font-size:17px;
  color:var(--muted);
  margin-bottom:25px;
  max-width:460px
}
.feature-line{
  padding:0;
  margin:0 0 25px;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:9px 15px;
  font-size:12px;
  color:#c7d5df
}
.feature-line li{
  padding-bottom:8px;
  border-bottom:1px solid #9ac9ed40
}
.story-step .story-note{
  font-size:13px;
  color:var(--subtle);
  max-width:400px;
  border-left:1px solid #9ac9ed4a;
  padding-left:15px;
  margin:0
}
.mobile-visual{
  display:none
}
.section-heading{
  max-width:900px
}
.audiences{
  border-top:1px solid var(--line)
}
.audience-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:40px
}
.audience-grid article{
  padding-top:20px;
  border-top:1px solid #9ac9ed40
}
.audience-grid h3{
  font-size:19px;
  margin-bottom:16px
}
.audience-grid p{
  font-size:16px;
  color:var(--muted);
  margin-bottom:20px
}
.audience-grid .text-link{
  color:var(--blue)
}
.section-heading h2,.accuracy h2{
  font-size:clamp(38px,4.3vw,62px);
  line-height:1.1;
  margin-bottom:26px
}
.coaching .section-heading h2,.ecosystem .section-heading h2{
  font-size:clamp(30px,3.2vw,46px)
}
.section-heading>p:last-child{
  max-width:670px;
  font-size:18px;
  color:var(--muted)
}
.coaching{
  border-top:1px solid var(--line)
}
.benefits{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:52px;
  margin-top:55px
}
.benefit-number{
  font:11px/1.5 var(--mono);
  color:var(--subtle);
  letter-spacing:.1em
}
.benefits h3{
  margin:23px 0 14px;
  max-width:280px
}
.benefits p{
  font-size:15px;
  color:var(--muted);
  margin-bottom:0
}
.workflow{
  margin-top:55px;
  padding:25px 0;
  border-block:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  font-size:13px;
  color:var(--muted)
}
.workflow i{
  font-style:normal;
  color:#557085
}
.workflow strong{
  color:var(--blue);
  font-weight:500
}
.ecosystem{
  border-top:1px solid var(--line)
}
.platform-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top:48px
}
.platform-card{
  border:1px solid var(--line);
  background:linear-gradient(145deg,#1a2b3b99,#111e2966);
  padding:34px;
  border-radius:8px
}
.platform-top{
  display:flex;
  align-items:center;
  gap:13px;
  flex-wrap:wrap
}
.platform-top .eyebrow{
  margin:0;
  font-size:11px
}
.platform-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--blue);
  line-height:1
}
.platform-tag{
  margin-left:auto;
  font-size:11px;
  color:var(--subtle)
}
.platform-card h3{
  font-family:Georgia,serif;
  font-size:32px;
  font-weight:400;
  line-height:1.16;
  margin:33px 0 20px
}
.platform-card>p{
  font-size:16px;
  color:var(--muted);
  max-width:500px
}
.platform-card ul{
  padding:0;
  list-style:none;
  color:#b5c5d2;
  font-size:14px;
  line-height:2.2;
  margin:25px 0
}
.platform-card li::before{
  content:"↗";
  margin-right:12px;
  color:#7593a9
}
.platform-card .text-link{
  color:var(--blue)
}
.integration-note{
  font-size:13px;
  color:var(--subtle);
  max-width:1000px;
  margin:25px 0 0;
  line-height:1.7
}
.integration-note span{
  font:10px var(--mono);
  letter-spacing:.1em;
  color:var(--blue);
  margin-right:15px
}
.accuracy{
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px
}
.accuracy h2{
  font-size:clamp(36px,3.8vw,54px)
}
.accuracy-list article{
  display:flex;
  gap:24px;
  padding:24px 0;
  border-bottom:1px solid var(--line)
}
.accuracy-list article:first-child{
  padding-top:0
}
.accuracy-list article>span{
  font:12px var(--mono);
  color:var(--subtle);
  padding-top:6px
}
.accuracy-list h3{
  font-size:17px;
  margin-bottom:10px
}
.accuracy-list p{
  font-size:14px;
  color:var(--muted);
  margin:0
}
.final-cta{
  text-align:center;
  padding:100px 24px 120px;
  border-top:1px solid var(--line);
  background:radial-gradient(ellipse at 50% 50%,#22435c40,transparent 65%)
}
.final-cta h2{
  font-size:clamp(36px,4.2vw,60px);
  line-height:1.03;
  margin-bottom:25px
}
.final-cta>p:not(.eyebrow){
  font-size:17px;
  color:var(--muted);
  margin-bottom:28px
}
.final-cta small{
  display:block;
  font-size:12px;
  color:var(--subtle);
  margin-top:20px
}
.site-footer{
  border-top:1px solid var(--line);
  display:flex;
  gap:38px;
  align-items:center;
  padding-block:35px
}
.site-footer p{
  color:var(--subtle);
  font-size:12px;
  margin:0
}
.site-footer>div{
  display:flex;
  align-items:center;
  gap:28px;
  margin-left:auto;
  font-size:12px
}
.site-footer>div>span{
  font-size:10px;
  color:var(--subtle)
}
.skip-link{
  position:fixed;
  z-index:100;
  top:10px;
  left:10px;
  background:var(--blue);
  color:var(--bg);
  padding:14px;
  transform:translateY(-150%)
}
.skip-link:focus{
  transform:none
}
.noscript-note{
  text-align:center;
  color:var(--amber);
  padding:25px
}
/* Reserve about one third of the Studio card below the hero in the first viewport. */
@media(min-width:960px) and (min-height:600px){
  .hero{
    min-height:calc(100svh - var(--stage-height) / 3);
    justify-content:center;
    padding:112px 24px 36px
  }
  .hero .eyebrow{
    margin-bottom:20px
  }
  .hero h1{
    font-size:clamp(32px,3.2vw,48px);
    margin-bottom:20px
  }
  .hero-description{
    line-height:1.6;
    margin-bottom:0
  }
  .hero-note{
    margin-top:22px
  }
}
@media(min-width:960px) and (min-height:600px) and (max-height:800px){
  .hero{
    padding-top:96px;
    padding-bottom:24px
  }
  .brand-intro{
    min-height:100px;
    margin-bottom:20px
  }
  .hero .eyebrow{
    margin-bottom:14px
  }
  .hero h1{
    font-size:clamp(32px,3vw,42px);
    margin-bottom:16px
  }
  .hero-description{
    font-size:16px;
    line-height:1.5
  }
  .hero-note{
    margin-top:16px
  }
}
@media(min-width:1600px){
  .story{
    grid-template-columns:minmax(0,1.35fr) minmax(0,.82fr)
  }
}
@media(max-width:1100px){
  .site-header{
    padding-inline:28px
  }
  .site-header nav{
    gap:18px
  }
  .page-width{
    width:calc(100% - 56px)
  }
  .header-actions{
    gap:17px
  }
  .story{
    gap:35px
  }
  .window-footer{
    padding-inline:12px
  }
  .demo-label{
    font-size:9px
  }
  .story-step h2{
    font-size:35px
  }
  .story-step>p:not(.eyebrow):not(.story-note){
    font-size:16px
  }
  .scene-navigation button::after{
    width:12px
  }
  .scene-navigation button[aria-current=true]::after{
    width:20px
  }
}
@media(max-width:959px),(max-height:599px){
  :root{
    --stage-height:620px
  }
  .hero{
    min-height:auto;
    padding-top:145px;
    padding-bottom:40px
  }
  .hero h1{
    font-size:42px
  }
  .site-header nav{
    display:none
  }
  .story{
    display:block;
    max-width:720px
  }
  .visual-track{
    display:none
  }
  .story-step{
    min-height:0;
    padding:0 0 85px;
    opacity:1!important;
    scroll-margin-top:115px
  }
  .mobile-visual{
    display:block;
    height:var(--stage-height);
    margin-bottom:38px;
    border:1px solid #a7c9e22c;
    border-radius:8px;
    overflow:hidden;
    position:relative;
    background:#0e1a25;
    box-shadow:0 25px 65px #0003
  }
  .mobile-visual .scene{
    position:relative;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    height:calc(100% - 80px)
  }
  .mobile-visual .window-footer{
    position:relative
  }
  .mobile-visual .window-bar{
    height:40px
  }
  .story-step h2{
    font-size:42px
  }
  .story-step>p:not(.eyebrow):not(.story-note),.story-step .story-note{
    max-width:600px
  }
  .story-step .eyebrow{
    margin-bottom:17px
  }
  .section-space{
    padding-block:75px
  }
  .benefits{
    gap:26px
  }
  .accuracy{
    gap:35px
  }
  .site-footer{
    flex-wrap:wrap
  }
  .site-footer>div{
    margin-left:0
  }
  .workflow{
    font-size:12px
  }
  .platform-card{
    padding:27px
  }
  .platform-tag{
    display:none
  }
  .wide-break{
    display:none
  }
}
@media(max-width:600px){
  :root{
    --stage-height:575px
  }
  .site-header{
    height:70px;
    padding-inline:20px
  }
  .brand{
    font-size:23px;
    gap:9px
  }
  .brand-mark{
    font-size:34px
  }
  .header-actions .login{
    display:none
  }
  .button-small{
    padding:11px 13px;
    font-size:12px;
    gap:12px
  }
  .page-width{
    width:calc(100% - 36px)
  }
  .hero{
    padding:125px 20px 40px
  }
  .hero .eyebrow{
    font-size:10px;
    letter-spacing:.11em
  }
  .hero h1{
    font-size:32px;
    line-height:1.08;
    margin-bottom:22px
  }
  .hero-description{
    font-size:16px
  }
  .hero-actions{
    flex-direction:column;
    gap:23px
  }
  .hero-note{
    font-size:10px;
    gap:7px;
    flex-wrap:wrap;
    justify-content:center;
    max-width:330px;
    line-height:1.6
  }
  .hero-note .status-dot{
    display:none
  }
  .hero-note i:last-of-type{
    display:none
  }
  .hero-note{
    margin-top:28px
  }
  .hero-actions .button{
    font-size:13px;
    padding-inline:18px
  }
  .mobile-visual{
    margin-bottom:31px
  }
  .story-step{
    padding-bottom:65px
  }
  .story-step h2{
    font-size:36px
  }
  .story-step>p:not(.eyebrow):not(.story-note){
    font-size:16px
  }
  .eyebrow{
    font-size:11px
  }
  .window-footer{
    font-size:9px
  }
  .demo-label{
    font-size:8px
  }
  .window-product{
    display:none
  }
  .window-bar{
    padding-inline:12px
  }
  .benefits{
    grid-template-columns:1fr;
    gap:28px;
    margin-top:35px
  }
  .benefits article{
    border-top:1px solid var(--line);
    padding-top:24px
  }
  .benefits h3{
    max-width:none;
    margin-top:15px
  }
  .workflow{
    display:grid;
    grid-template-columns:auto 20px;
    gap:17px
  }
  .workflow i{
    transform:rotate(90deg);
    text-align:center
  }
  .workflow span:last-child{
    grid-column:1
  }
  .platform-grid{
    grid-template-columns:1fr
  }
  .section-space{
    padding-block:58px
  }
  .section-heading h2{
    font-size:38px
  }
  .section-heading>p:last-child{
    font-size:16px
  }
  .platform-card{
    padding:25px
  }
  .platform-card h3{
    font-size:30px
  }
  .accuracy{
    grid-template-columns:1fr;
    gap:20px
  }
  .accuracy h2{
    font-size:37px
  }
  .final-cta{
    padding:70px 6px
  }
  .final-cta h2{
    font-size:40px
  }
  .final-cta>p:not(.eyebrow){
    font-size:15px
  }
  .site-footer{
    gap:25px
  }
  .site-footer>div{
    flex-wrap:wrap;
    gap:20px
  }
  .site-footer>div>span{
    flex-basis:100%
  }
  .site-footer p{
    font-size:11px
  }
}
@media(max-width:700px){
  .brand-intro{
    flex-direction:column;
    gap:12px;
    margin-bottom:24px
  }
  .intro-symbol{
    width:124px;
    height:88px;
    flex-basis:88px
  }
  .brand-intro-art{
    width:360px
  }
  .intro-caption{
    border-left:0;
    border-top:1px solid #9ac9ed40;
    padding:16px 0 0;
    max-width:440px;
    text-align:center
  }
  .intro-caption-title{
    font-size:11px;
    letter-spacing:.08em
  }
  .audience-grid{
    grid-template-columns:1fr;
    gap:28px
  }
}
@media(prefers-reduced-motion:reduce){
  .has-brand-intro .hero-masthead,.has-brand-intro .intro-symbol{
    transform:none
  }
  .has-brand-intro .site-header,
  .has-brand-intro .hero>:not(.hero-masthead),
  .has-brand-intro main>section:not(.hero),
  .has-brand-intro .site-footer{
    opacity:1!important;
    pointer-events:auto
  }
  html{
    scroll-behavior:auto
  }
  *,*::before,*::after{
    transition:none!important;
    animation:none!important
  }
  .visual-card{
    transform:none!important;
    will-change:auto
  }
  .story-step{
    opacity:1!important
  }
}

/* --- v4: секции «Метрики» и «Съёмка» ------------------------------------ */
.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  clip-path:inset(50%);
  overflow:hidden;
  white-space:nowrap
}
.metrics-table-wrap{
  margin-top:44px;
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel)
}
.metrics-table{
  width:100%;
  min-width:640px;
  border-collapse:collapse;
  font-size:15px
}
.metrics-table thead th{
  text-align:left;
  padding:18px 22px;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--subtle);
  font-weight:500;
  border-bottom:1px solid var(--line);
  white-space:nowrap
}
.metrics-table tbody th,.metrics-table td{
  padding:16px 22px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
  font-weight:400;
  text-align:left
}
.metrics-table tbody tr:last-child th,.metrics-table tbody tr:last-child td{
  border-bottom:0
}
.metric-name{
  display:block;
  color:var(--ink)
}
.metric-id{
  display:block;
  margin-top:4px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--subtle)
}
.metric-phase{
  color:var(--muted);
  white-space:nowrap
}
.metric-range{
  font-family:var(--mono);
  color:var(--blue);
  white-space:nowrap
}
.metric-fault{
  color:var(--muted);
  max-width:34ch
}
.metrics-notes{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:28px;
  margin-top:40px
}
.metrics-notes h3{
  margin:0 0 10px;
  font-size:17px;
  font-weight:500;
  color:var(--ink)
}
.metrics-notes p{
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.6
}
@media (max-width:760px){
  .metrics-table{font-size:14px}
  .metrics-table thead th,.metrics-table tbody th,.metrics-table td{padding:14px 16px}
}

.metrics-details{
  margin-top:36px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel);
  overflow:hidden
}
.metrics-details summary{
  list-style:none;
  cursor:pointer;
  padding:20px 24px;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 14px
}
.metrics-details summary::-webkit-details-marker{display:none}
.metrics-details summary::after{
  content:"+";
  margin-left:auto;
  font-family:var(--mono);
  font-size:18px;
  color:var(--subtle)
}
.metrics-details[open] summary::after{content:"−"}
.metrics-details summary:hover .metrics-summary-label{color:var(--blue)}
.metrics-summary-label{
  font-size:16px;
  color:var(--ink);
  transition:color .2s
}
.metrics-summary-hint{
  font-size:13px;
  color:var(--subtle)
}
.metrics-details .metrics-table-wrap{
  margin-top:0;
  border:0;
  border-top:1px solid var(--line);
  border-radius:0
}
.capture-head{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:40px;
  align-items:end
}
.capture-lead{
  margin:0;
  color:var(--muted);
  font-size:17px;
  line-height:1.65
}
.capture-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px;
  margin-top:48px
}
.capture-cards article{
  padding:28px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel)
}
.capture-icon{
  display:block;
  font-size:22px;
  line-height:1;
  color:var(--green);
  margin-bottom:18px
}
.capture-cards h3{
  margin:0 0 12px;
  font-size:18px;
  font-weight:500
}
.capture-cards p{
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.65
}
.capture-note{
  margin:28px 0 0;
  color:var(--subtle);
  font-size:14px;
  line-height:1.6;
  max-width:70ch
}
@media (max-width:860px){
  .capture-head{grid-template-columns:1fr;gap:22px;align-items:start}
}
.metrics-details{
  margin-top:36px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel);
  overflow:hidden
}
.metrics-details summary{
  list-style:none;
  cursor:pointer;
  padding:20px 24px;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 14px
}
.metrics-details summary::-webkit-details-marker{display:none}
.metrics-details summary::after{
  content:"+";
  margin-left:auto;
  font-family:var(--mono);
  font-size:18px;
  color:var(--subtle)
}
.metrics-details[open] summary::after{content:"−"}
.metrics-details summary:hover .metrics-summary-label{color:var(--blue)}
.metrics-summary-label{
  font-size:16px;
  color:var(--ink);
  transition:color .2s
}
.metrics-summary-hint{
  font-size:13px;
  color:var(--subtle)
}
.metrics-details .metrics-table-wrap{
  margin-top:0;
  border:0;
  border-top:1px solid var(--line);
  border-radius:0
}
.capture-head{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:40px;
  align-items:end
}
.capture-lead{
  margin:0;
  color:var(--muted);
  font-size:17px;
  line-height:1.65
}
.capture-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px;
  margin-top:48px
}
.capture-cards article{
  padding:28px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel)
}
.capture-icon{
  display:block;
  font-size:22px;
  line-height:1;
  color:var(--green);
  margin-bottom:18px
}
.capture-cards h3{
  margin:0 0 12px;
  font-size:18px;
  font-weight:500
}
.capture-cards p{
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.65
}
.capture-note{
  margin:28px 0 0;
  color:var(--subtle);
  font-size:14px;
  line-height:1.6;
  max-width:70ch
}
@media (max-width:860px){
  .capture-head{grid-template-columns:1fr;gap:22px;align-items:start}
}





.metrics{
  position:relative;
  overflow:hidden
}
.metrics>*:not(.metrics-mark){
  position:relative;
  z-index:1
}
.metrics-mark{
  position:absolute;
  margin:0;
  top:clamp(48px,7vw,96px);
  right:clamp(-56px,-2vw,0px);
  width:clamp(220px,26vw,380px);
  color:var(--blue);
  opacity:.1;
  pointer-events:none
}
.metrics-mark svg{
  display:block;
  width:100%;
  height:auto
}
@media (max-width:980px){
  .metrics-mark{display:none}
}