@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700,900&display=swap');

:root{
  --ink:#12181F;
  --paper:#F7F8F6;
  --steel:#5B6670;
  --accent:#FF6B1A;
  --line:#D8DBDD;
  --contour:#C9D6D3;
  --card:#FFFFFF;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x:hidden; max-width:100%;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Satoshi',sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  max-width:100%;
}
h1,h2,h3{font-family:'Satoshi',sans-serif;letter-spacing:-0.01em;}
.mono{font-family:'Satoshi',sans-serif;}
a{color:inherit;text-decoration:none;}
img,video{max-width:100%;display:block;}

/* ---------- utility ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
.eyebrow{
  font-family:'Satoshi',monospace;
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--accent);
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:18px;height:1px;
  background:var(--accent);
  display:inline-block;
}
.contour-rule{
  width:100%;
  height:14px;
  display:block;
}
section{position:relative;}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(247,248,246,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 0;
}
.logo{
  display:flex; align-items:center; gap:10px;
  font-family:'Satoshi',sans-serif;
  font-weight:700; font-size:19px;
  text-decoration:none;
  color:inherit;
}
.logo:hover{opacity:0.85;}
.logo-mark{
  height:34px; width:auto;
}
footer .logo-mark.footer-mark{
  height:30px;
}
.logo small{
  font-family:'Satoshi',monospace;
  font-weight:400; font-size:11px; color:var(--steel);
  letter-spacing:0.04em;
}
nav ul{
  list-style:none; display:flex; gap:36px;
  font-size:14px; font-weight:500;
}
nav ul li a{
  position:relative; padding:4px 0; color:var(--ink);
  transition:color .2s;
}
nav ul li a.active{color:var(--accent);}
nav ul li a:not(.active):hover{color:var(--steel);}
.nav-toggle{
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  width:34px; height:34px;
  background:none; border:0; padding:0; cursor:pointer;
  flex:none;
}
.nav-toggle span{
  display:block; width:100%; height:2px;
  background:var(--ink);
  transition:transform .25s ease, opacity .2s ease;
}
header.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
header.nav-open .nav-toggle span:nth-child(2){opacity:0;}
header.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------- buttons ---------- */
.btn-ghost{
  border:1px solid var(--line);
  padding:14px 26px; font-size:14px; font-weight:500;
  transition:border-color .2s;
}
.btn-ghost:hover{border-color:var(--ink);}

/* ---------- page header (services / about / etc.) ---------- */
.page-header{padding:64px 0 48px; border-bottom:1px solid var(--line);}
.page-header h1{font-size:clamp(32px,4.4vw,48px); font-weight:700; line-height:1.1; margin-top:10px; max-width:720px;}
.page-header p{color:var(--steel); font-size:16px; max-width:600px; margin-top:16px;}

/* ---------- footer ---------- */
footer{padding:56px 0 36px; background:var(--ink); color:var(--paper);}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:40px;
  padding-bottom:40px; border-bottom:1px solid rgba(247,248,246,0.14);
}
footer h4{font-family:'Satoshi',monospace; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); margin-bottom:16px;}
footer .logo{color:var(--paper);}
footer p.about{color:rgba(247,248,246,0.6); font-size:13.5px; margin-top:14px; max-width:280px;}
footer ul{list-style:none; font-size:14px;}
footer ul li{margin-bottom:10px;}
footer ul li a{color:rgba(247,248,246,0.75); transition:color .2s;}
footer ul li a:hover{color:var(--paper);}
.footer-map{
  display:block; max-width:220px;
  overflow:hidden;
}
.footer-map img{
  width:100%; height:auto; display:block;
  filter:brightness(.88);
  transition:filter .2s, transform .3s;
}
.footer-map:hover img{filter:brightness(1.05); transform:scale(1.04);}
.footer-iso-badge{
  display:block; max-width:108px;
  transition:transform .3s, filter .2s;
}
.footer-iso-badge img{width:100%; height:auto; display:block;}
.footer-iso-badge:hover{transform:scale(1.05);}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:24px; font-family:'Satoshi',monospace; font-size:11.5px; color:rgba(247,248,246,0.45);
  flex-wrap:wrap; gap:10px;
}
.footer-iso-link{color:rgba(247,248,246,0.45); transition:color .2s;}
.footer-iso-link:hover{color:var(--accent);}

/* ---------- responsive ---------- */
@media (max-width:920px){
  nav ul{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    box-shadow:0 16px 32px -20px rgba(18,24,31,0.25);
  }
  header.nav-open nav ul{display:flex;}
  nav ul li{width:100%;}
  nav ul li a{display:block; padding:16px 32px; border-top:1px solid var(--line);}
  nav ul li:first-child a{border-top:0;}
  .nav-toggle{display:flex;}
  .footer-grid{grid-template-columns:1fr 1fr; gap:28px;}
}
@media (max-width:560px){
  .wrap{padding:0 20px;}
  .footer-grid{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}