/* c5 — базовий скид, типографіка, layout-примітиви, blueprint-сітка */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-sans);
  color:var(--c-graphite);
  background:var(--c-concrete);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,h4,p{margin:0}
svg{display:block}
:focus-visible{outline:3px solid var(--c-orange);outline-offset:2px}

.container{max-width:var(--container-w);margin:0 auto;padding:0 var(--space-5)}
@media (max-width:640px){ .container{padding:0 var(--space-4)} }

main{display:block}

.blueprint-bg{
  position:relative;
}
.blueprint-bg::before{
  content:"";
  position:absolute;inset:0;
  background-image:var(--blueprint-grid);
  background-size:40px 40px;
  pointer-events:none;
  z-index:0;
}
.blueprint-bg--dark::before{ background-image:var(--blueprint-grid-dark); }
.blueprint-bg > *{ position:relative; z-index:1; }

/* технічна типографіка */
.eyebrow{
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--c-steel-dark);
  display:inline-flex;align-items:center;gap:var(--space-2);
}
.eyebrow::before{
  content:"";
  width:22px;height:2px;
  background:var(--c-orange);
  display:inline-block;
}
.section-num{
  font-family:var(--font-mono);
  font-weight:700;
  color:var(--c-yellow-dim);
  -webkit-text-stroke:1px var(--c-graphite);
  font-size:15px;
  letter-spacing:.05em;
}

h1,.h1{font-size:clamp(34px,5.6vw,64px);font-weight:700;line-height:1.05;letter-spacing:-.01em}
h2,.h2{font-size:clamp(26px,3.6vw,42px);font-weight:700;line-height:1.1;letter-spacing:-.01em}
h3,.h3{font-size:clamp(19px,2vw,24px);font-weight:600;line-height:1.25}
p{line-height:1.6;color:var(--c-steel-dark)}

.section{padding:var(--space-9) 0}
@media (max-width:768px){ .section{padding:var(--space-7) 0} }
.section--dark{background:var(--c-graphite);color:var(--c-concrete)}
.section--dark p{color:#B7BCC4}
.section--dark h2,.section--dark h3{color:var(--c-white)}
.section--dark .eyebrow{color:var(--c-yellow)}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-5);margin-bottom:var(--space-7);flex-wrap:wrap}
.section-head .lead{max-width:520px}

/* hazard-стрічка як роздільник секцій */
.hazard-divider{
  height:12px;
  background-image:var(--hazard-stripe);
  background-size:62px 62px;
}
.hazard-divider--anim{
  animation:hazard-scroll 3.2s linear infinite;
}

/* кнопки */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-family:var(--font-sans);font-weight:600;font-size:15px;
  padding:14px 26px;border-radius:var(--radius-s);border:2px solid transparent;
  transition:transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), background var(--dur-2);
  position:relative; overflow:hidden; white-space:nowrap;
}
.btn:active{ transform:translateY(1px) }
.btn-primary{ background:var(--c-orange); color:var(--c-white); }
.btn-primary:hover{ background:var(--c-orange-dim); box-shadow:0 10px 24px rgba(255,106,0,.35) }
.btn-dark{ background:var(--c-graphite); color:var(--c-yellow); }
.btn-dark:hover{ background:var(--c-graphite-2) }
.btn-outline{ background:transparent; color:var(--c-graphite); border-color:var(--c-graphite); }
.btn-outline:hover{ background:var(--c-graphite); color:var(--c-yellow) }
.section--dark .btn-outline{ color:var(--c-white); border-color:var(--c-steel) }
.section--dark .btn-outline:hover{ background:var(--c-yellow); color:var(--c-graphite); border-color:var(--c-yellow) }
.btn-hazard::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:4px;
  background-image:var(--hazard-stripe);
  background-size:24px 24px;
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-2) var(--ease-out);
}
.btn-hazard:hover::after{ transform:scaleX(1) }
.btn-sm{ padding:9px 16px; font-size:13px }

/* бейджі-шильдики */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.06em;
  padding:5px 10px;border-radius:3px;border:1.5px solid var(--c-graphite);
  text-transform:uppercase;
}
.badge-yellow{ background:var(--c-yellow); border-color:var(--c-graphite); color:var(--c-graphite) }
.badge-green{ background:rgba(0,166,81,.12); border-color:var(--c-green); color:#00753a }
.badge-outline{ background:transparent; border-color:var(--c-steel); color:var(--c-steel-dark) }
.badge-orange{ background:var(--c-orange); border-color:var(--c-orange-dim); color:#fff }

.mono{font-family:var(--font-mono)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.skip-link{
  position:absolute;left:8px;top:-60px;background:var(--c-graphite);color:var(--c-yellow);
  padding:10px 16px;border-radius:4px;z-index:1000;transition:top var(--dur-2);
  font-family:var(--font-mono);font-size:13px;
}
.skip-link:focus{ top:8px }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}