:root{
  --ink:#1B1C1C;
  --slate:#424752;
  --blue:#0A5AAF;
  --blue-soft:rgba(10,90,175,0.08);
  --paper:#F4F5F6;
  --white:#FFFFFF;
  --line:#DCDFE3;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Montserrat',sans-serif;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

/* ---------- top bar ---------- */
header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:28px clamp(20px,5vw,64px);
}

.logo{
  display:flex;
  flex-direction:column;
  line-height:1;
}

.logo .mark{
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  font-size:28px;
  color:var(--blue);
  letter-spacing:-0.5px;
}

.logo .tag{
  font-family:'Montserrat',sans-serif;
  font-weight:500;
  font-size:9.5px;
  letter-spacing:2.5px;
  color:var(--slate);
  margin-top:5px;
}

.status-pill{
  font-family:'Montserrat',sans-serif;
  font-weight:600;
  font-size:11px;
  letter-spacing:1px;
  color:var(--blue);
  border:1px solid var(--blue);
  background:var(--blue-soft);
  padding:6px 12px;
  border-radius:999px;
  display:flex;
  align-items:center;
  gap:8px;
}

.status-pill .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--blue);
  animation:pulse 1.8s ease-in-out infinite;
}

@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:0.35;transform:scale(0.75);}
}

/* ---------- main ---------- */
main{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px clamp(20px,5vw,64px) 60px;
}

.hero{
  max-width:760px;
  width:100%;
  text-align:center;
}

.eyebrow{
  font-family:'Montserrat',sans-serif;
  font-weight:600;
  font-size:12px;
  letter-spacing:3px;
  color:var(--blue);
  text-transform:uppercase;
  margin-bottom:22px;
}

h1{
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  font-size:clamp(34px,6vw,58px);
  line-height:1.1;
  margin:0 0 6px;
  letter-spacing:-1px;
  color:var(--ink);
}

h1 span{color:var(--blue);}

/* plotter ruler — signature element, ticks reference real roll widths */
.ruler{
  position:relative;
  height:34px;
  margin:26px auto 30px;
  max-width:520px;
}

.ruler svg{width:100%;height:100%;display:block;}

.ruler-track{
  stroke:var(--line);
  stroke-width:1.5;
}

.ruler-draw{
  stroke:var(--blue);
  stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray:520;
  stroke-dashoffset:520;
}

.ruler-draw.is-drawing{
  animation:draw 2.4s cubic-bezier(.65,0,.35,1) forwards 0.3s;
}

@keyframes draw{
  to{stroke-dashoffset:0;}
}

.ruler-head{
  fill:var(--blue);
  offset-path:path('M2,17 L518,17');
  offset-rotate:0deg;
  offset-distance:0%;
}

.ruler-head.is-drawing{
  animation:head 2.4s cubic-bezier(.65,0,.35,1) forwards 0.3s;
}

@keyframes head{
  to{offset-distance:100%;}
}

p.lead{
  font-family:'Montserrat',sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.7;
  color:var(--slate);
  max-width:520px;
  margin:0 auto 44px;
}

.info-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  margin-bottom:8px;
}

.info-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:10px;
  padding:16px 22px;
  text-align:left;
  min-width:220px;
}

.info-card .label{
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  font-size:10.5px;
  letter-spacing:1.5px;
  color:var(--blue);
  text-transform:uppercase;
  margin-bottom:8px;
  display:block;
}

.info-card a, .info-card span.val{
  display:block;
  font-family:'Montserrat',sans-serif;
  font-size:14.5px;
  color:var(--ink);
  text-decoration:none;
  font-weight:500;
}

.info-card a:hover{color:var(--blue);}
.info-card .val + .val{margin-top:4px;}

/* ---------- footer ---------- */
footer{
  padding:24px clamp(20px,5vw,64px) 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  border-top:1px solid var(--line);
  font-family:'Montserrat',sans-serif;
  font-weight:500;
  font-size:11px;
  color:var(--slate);
}

.socials{
  display:flex;
  gap:14px;
}

.socials a{
  color:var(--slate);
  text-decoration:none;
  border:1px solid var(--line);
  width:30px;height:30px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .2s, color .2s;
}

.socials a:hover{border-color:var(--blue); color:var(--blue);}