:root{
  --page:#E4E7EA;
  --surface:#F3F4F5;
  --ink:#1C2228;
  --muted:#56606A;
  --rule:#BCC2C8;
  --plate:#23292F;
  --etch:#E9ECEE;
  --blue:#2F5D8A;
  --straw:#B07F2A;
  --ok:#2E6B47;
  --err:#9B2C2C;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --page:#15191D; --surface:#1D2227; --ink:#E6E9EC; --muted:#9AA3AC; --rule:#363D44;
    --plate:#2C343B; --etch:#EEF0F2; --blue:#86AED6; --straw:#D9A957; --ok:#7FC79C; --err:#E58C8C;
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--page); color:var(--ink);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:1.0625rem; line-height:1.55; font-variation-settings:"wdth" 100;
}
a{color:var(--blue)}
:focus-visible{outline:3px solid var(--blue); outline-offset:3px}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px}

/* header */
.site-head{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:20px}
.brand{font-weight:800; font-variation-settings:"wdth" 125; letter-spacing:.01em; text-decoration:none; color:var(--ink); font-size:1.05rem}
.site-head nav{display:flex; gap:22px; flex-wrap:wrap}
.site-head nav a{color:var(--ink); text-decoration:none; font-weight:500}
.site-head nav a:hover{text-decoration:underline; text-underline-offset:4px}

/* hero */
.hero{display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:center; padding-block:48px 72px}
.hero h1{
  font-size:clamp(2.4rem,5.4vw,4.1rem); line-height:1.02; margin:0 0 20px;
  font-weight:800; font-variation-settings:"wdth" 118; letter-spacing:-.01em; max-width:14ch;
}
.hero p{font-size:1.2rem; color:var(--muted); max-width:46ch; margin:0 0 28px}
.actions{display:flex; gap:12px; flex-wrap:wrap}
.btn{
  display:inline-block; font:inherit; font-weight:700; text-decoration:none; cursor:pointer;
  padding:13px 22px; border-radius:4px; border:2px solid var(--ink);
}
.btn-solid{background:var(--ink); color:var(--page)}
.btn-line{background:transparent; color:var(--ink)}
.btn:hover{border-color:var(--blue)}
.btn-solid:hover{background:var(--blue)}

.plate-wrap{position:relative}
.plate{width:100%; height:auto; display:block; filter:drop-shadow(0 18px 24px rgba(20,26,32,.22))}
.plate .body{fill:var(--plate)}
.plate .hole{fill:var(--page)}
.plate .etch{fill:var(--etch)}
.plate .etch-dim{fill:var(--etch); opacity:.58}
.plate .line{stroke:var(--etch); opacity:.45}
.plate .beam{fill:var(--straw)}
.reveal{transform-box:fill-box; transform-origin:left center; animation:mark 1.9s cubic-bezier(.5,0,.25,1) .3s both}
.beam-g{animation:beam 1.9s cubic-bezier(.5,0,.25,1) .3s both}
@keyframes mark{from{transform:scaleX(0)} to{transform:scaleX(1)}}
@keyframes beam{0%{transform:translateX(0); opacity:1} 92%{opacity:1} 100%{transform:translateX(520px); opacity:0}}
@media (prefers-reduced-motion:reduce){.reveal,.beam-g{animation:none}.beam-g{display:none}}

/* sections */
section{padding:72px 0; border-top:1px solid var(--rule)}
h2{
  font-size:clamp(1.7rem,3vw,2.3rem); line-height:1.1; margin:0 0 12px;
  font-weight:800; font-variation-settings:"wdth" 112;
}
.lede{color:var(--muted); max-width:58ch; margin:0 0 40px}

.services{display:grid; grid-template-columns:repeat(2,1fr); gap:0 56px; margin:0}
.services div{padding:22px 0; border-top:2px solid var(--ink)}
.services dt{font-weight:700; font-size:1.2rem; margin-bottom:6px}
.services dd{margin:0; color:var(--muted); max-width:46ch}
.materials{margin-top:36px; padding:20px 22px; background:var(--surface); border-left:4px solid var(--straw); max-width:760px}
.materials strong{display:block; margin-bottom:4px}

.steps{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,1fr); gap:28px; counter-reset:step}
.steps li{counter-increment:step; padding-top:14px; border-top:2px solid var(--rule)}
.steps li::before{
  content:counter(step); display:block; font-weight:800; font-variation-settings:"wdth" 125;
  font-size:2.2rem; line-height:1; color:var(--blue); margin-bottom:10px;
}
.steps h3{margin:0 0 6px; font-size:1.1rem}
.steps p{margin:0; color:var(--muted); font-size:1rem}

/* forms */
.two-col{display:grid; grid-template-columns:1fr 1.2fr; gap:56px; align-items:start}
form{display:grid; gap:16px}
.row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
label{display:grid; gap:6px; font-weight:600; font-size:.95rem}
input,select,textarea{
  font:inherit; font-weight:400; color:var(--ink); background:var(--surface);
  border:1.5px solid var(--rule); border-radius:4px; padding:11px 12px; width:100%;
}
input:focus,select:focus,textarea:focus{border-color:var(--blue); outline:none; box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 25%,transparent)}
textarea{min-height:120px; resize:vertical}
.hint{font-weight:400; color:var(--muted); font-size:.88rem}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.total{display:flex; justify-content:space-between; align-items:baseline; padding:14px 0; border-top:2px solid var(--ink); font-weight:700; font-size:1.15rem}
.status{min-height:1.5em; font-weight:600; margin:0}
.status.ok{color:var(--ok)} .status.err{color:var(--err)}
#paypal-buttons{min-height:48px}
.note{background:var(--surface); padding:16px 18px; border-left:4px solid var(--blue); color:var(--muted); margin:0}

.price-list{list-style:none; padding:0; margin:0}
.price-list li{display:flex; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--rule)}
.price-list span:last-child{font-weight:700; white-space:nowrap}
.price-list small{display:block; color:var(--muted); font-size:.9rem}

footer{border-top:1px solid var(--rule); padding:40px 0 56px; color:var(--muted)}
footer .wrap{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap}
footer strong{color:var(--ink)}

@media (max-width:860px){
  .hero,.two-col{grid-template-columns:1fr}
  .hero{padding-top:24px; gap:36px}
  .services{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
}
@media (max-width:540px){
  .site-head{flex-direction:column; align-items:flex-start}
  .steps,.row{grid-template-columns:1fr}
  section{padding:56px 0}
}