:root{
  --bg:#0b1220;
  --panel:#0a1426;
  --line:#182341;
  --text:#e6eefb;
  --muted:#94a3b8;
  --accent:#39bdf8;
  --accent2:#2dd4bf;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
img{max-width:100%;display:block}

/* Layout */
.container{max-width:1100px;margin:0 auto;padding:0 20px}
header{position:sticky;top:0;z-index:20;background:rgba(11,18,32,.7);backdrop-filter:blur(10px);border-bottom:1px solid rgba(24,35,65,.6)}
nav{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0}

.brand{display:flex;align-items:center;gap:10px}
.brand img{height:40px;width:auto}
.brand .name{font-weight:800;letter-spacing:.2px}

.links{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.links a{color:var(--text);text-decoration:none;opacity:.9}
.links a:hover{opacity:1;color:var(--accent)}

.btn{display:inline-flex;align-items:center;gap:.6rem;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#06101d;border:0;padding:.7rem 1.0rem;border-radius:10px;font-weight:700;cursor:pointer;text-decoration:none}
.btn.alt{background:linear-gradient(135deg,#7dd3fc,#86efac);color:#06211a}

.section-title{font-size:clamp(22px,4vw,32px);margin:0 0 8px}
.muted{color:var(--muted)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px}
.grid{display:grid;gap:14px}

/* Cards */
.cards{grid-template-columns:repeat( auto-fit, minmax(240px,1fr) )}
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px;
  display:grid;
  gap:10px;
}

/* Service icons — Option A: virtual crop + centered, no letterboxing */
.icon{
  width:auto;
  height:96px;             /* slightly taller for headroom */
  border-radius:16px;
  display:grid;
  place-items:center;
  background:#0a1426;
  border:1px solid #182341;
  padding:0;               /* remove inner padding to avoid bars */
  overflow:hidden;         /* hide after nudging */
}
.icon img{
  height:100%;
  width:auto;
  max-width:100%;
  object-fit:contain;      /* preserve the full art */
  object-position:center;
  display:block;
  transform:translateY(-4%);  /* gentle upward nudge for bottom whitespace */
}
/* Per-icon micro-adjustments (tweak if any still feel off) */
.icon img[src$="CNC icon.png"]{ transform:translateY(-2%) }
.icon img[src$="Laser engraving icon.png"]{ transform:translateY(-3%) }
.icon img[src$="UV printing icon.png"]{ transform:translateY(-5%) }

/* Gallery */
.gallery{
  display:grid;
  gap:14px;
  grid-template-columns:repeat( auto-fit, minmax(240px,1fr) );
}
.frame{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  aspect-ratio:4/3;
  display:flex;align-items:center;justify-content:center;
}
.frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

/* Footer */
footer{
  border-top:1px solid var(--line);
  margin-top:40px;
  background:#091223;
}
.footer-grid{
  display:grid;
  gap:18px;
  grid-template-columns:repeat( auto-fit, minmax(180px,1fr) );
  padding:20px 0;
}
.footer-brand{display:flex;align-items:center;gap:10px}
.footer-brand img{height:34px;width:auto}
.copyright{
  color:var(--muted);
  font-size:.9rem;
  padding:10px 0 24px;
  border-top:1px solid rgba(24,35,65,.6);
}

/* Forms */
input,select,textarea{
  background:var(--panel);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 12px;
  font:inherit;
}
input::placeholder,textarea::placeholder{color:#7d8cab}
button.btn{border:none}

/* Responsive tweaks */
@media (max-width:720px){
  .brand img{height:34px}
  .links{gap:12px}
  .icon{height:92px}        /* slightly smaller on mobile */
}