:root{
  --bg:#0b1118; --panel:rgba(255,255,255,.06); --panel-strong:rgba(255,255,255,.12);
  --text:#e6f1ff; --muted:#a7b3c3; --primary:#00c2ff; --primary-2:#7cffd5;
  --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.35);
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f6f8fb; --panel:rgba(0,0,0,.05); --panel-strong:rgba(0,0,0,.08);
    --text:#0b1118; --muted:#4b5b6b; --primary:#0077ff; --primary-2:#00c16a; }
}
*{ box-sizing:border-box } html{ scroll-behavior:smooth }
body{
  margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(60rem 60rem at 80% -10%, rgba(0,194,255,.15), transparent 60%),
    radial-gradient(50rem 50rem at -10% 20%, rgba(124,255,213,.15), transparent 60%),
    var(--bg);
  line-height:1.6;
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:1000; display:flex; gap:1rem; align-items:center; justify-content:space-between;
  padding:.8rem 1rem; backdrop-filter:blur(8px);
  background:linear-gradient(to bottom, rgba(10,14,20,.7), rgba(10,14,20,.2));
  border-bottom:1px solid var(--panel-strong);
}
.brand{ display:inline-flex; align-items:center; gap:.6rem; font-weight:700; text-decoration:none; color:var(--text) }
.brand-logo{ width:32px; height:32px; object-fit:contain; }
.brand.foot .brand-logo{ width:24px; height:24px }
.nav{ display:flex; align-items:center; gap:.8rem; }
.nav a{ color:var(--text); opacity:.9; text-decoration:none; padding:.5rem .8rem; border-radius:999px }
.nav a:hover{ background:var(--panel) }
.nav-toggle{ display:none; position:relative; width:44px; height:40px; border:none; background:transparent; cursor:pointer }
.nav-toggle span{ position:absolute; left:10px; right:10px; height:2px; background:var(--text); transition:.3s; }
.nav-toggle span:nth-child(1){ top:12px } .nav-toggle span:nth-child(2){ top:19px } .nav-toggle span:nth-child(3){ top:26px }
.nav-open .nav-toggle span:nth-child(1){ top:19px; transform:rotate(45deg) }
.nav-open .nav-toggle span:nth-child(2){ opacity:0 }
.nav-open .nav-toggle span:nth-child(3){ top:19px; transform:rotate(-45deg) }
@media (max-width:980px){
  .nav-toggle{ display:inline-block }
  .nav{ position:fixed; inset:64px 1rem auto 1rem; display:grid; gap:.6rem; padding:.8rem; background:rgba(10,14,20,.9);
    border:1px solid var(--panel-strong); border-radius:14px; transform:scale(.98); opacity:0; pointer-events:none; transition:.2s; }
  .nav a{ padding:.8rem 1rem; border:1px solid var(--panel) }
  .nav-open .nav{ transform:scale(1); opacity:1; pointer-events:auto }
}

/* Hero */
.hero{ display:grid; grid-template-columns:1.15fr .85fr; gap:2rem; align-items:center; padding:clamp(2rem,8vw,6rem) 1rem 2rem; }
.hero__content .lead{ color:var(--muted); max-width:60ch }
.hero__cta{ display:flex; gap:.8rem; margin-top:1rem }
.badges{ display:flex; flex-wrap:wrap; gap:.5rem 1rem; list-style:none; padding:0; margin:1.2rem 0 0; color:var(--muted) }
.badges li{ padding:.35rem .7rem; border:1px dashed var(--panel-strong); border-radius:999px; background:var(--panel) }
.hero__visual{ position:relative; min-height:360px }
.hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:18px;
  border:1px solid var(--panel-strong); box-shadow:var(--shadow); filter:saturate(1.05) contrast(1.02) }
.hero-overlay{ position:absolute; inset:0; border-radius:18px; background:linear-gradient(120deg, rgba(0,0,0,.35), transparent 40%) }
@media (max-width:980px){ .hero{ grid-template-columns:1fr } .hero__visual{ order:-1; min-height:260px } }

/* Utilities */
.container{ width:min(1100px,100%); margin-inline:auto; padding-inline:1rem }
.section{ padding:clamp(2.5rem,6vw,5rem) 0 }
.section.alt{ background:linear-gradient(180deg, transparent, rgba(255,255,255,.03)) }
.section-title{ font-size:clamp(1.6rem,1.2rem + 1.2vw,2.2rem); margin:0 0 1.2rem }
.section-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap }

/* Buttons */
.btn{ --b:var(--panel-strong); display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.7rem 1rem; border-radius:999px; text-decoration:none; border:1px solid var(--b); cursor:pointer;
  transition:transform .12s, box-shadow .2s, background .2s; color:var(--text); background:var(--panel) }
.btn:hover{ transform:translateY(-1px); box-shadow:0 10px 20px rgba(0,0,0,.15) }
.btn-primary{ --b:transparent; background:linear-gradient(135deg, var(--primary), var(--primary-2)); color:#001018; font-weight:700 }
.btn-ghost{ background:transparent } .btn-outline{ background:transparent; border-style:dashed }

/* Grids & cards */
.grid{ display:grid; gap:1rem } .grid.two{ grid-template-columns:repeat(2,1fr) }
@media (max-width:720px){ .grid.two{ grid-template-columns:1fr } }
.cards{ grid-template-columns:repeat(4,1fr) }
@media (max-width:1100px){ .cards{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px){ .cards{ grid-template-columns:1fr } }
.card{ padding:1.2rem; border-radius:var(--radius); background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--panel-strong); box-shadow:var(--shadow) }
.card .icon{ font-size:1.4rem; margin-bottom:.3rem }
.list{ margin:.6rem 0 0; padding-left:1rem } .list li{ margin:.25rem 0 }

/* Materials */
.materials{ grid-template-columns:repeat(3,1fr) }
.material{ padding:1rem; border:1px dashed var(--panel-strong); border-radius:12px; background:var(--panel) }
@media (max-width:980px){ .materials{ grid-template-columns:1fr } }

/* Machines */
.machine-gallery{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem }
.machine-gallery img{ width:100%; height:100%; object-fit:cover; border-radius:12px; border:1px solid var(--panel-strong) }

/* Gallery */
.filters{ display:flex; gap:.5rem }
.chip{ border:1px solid var(--panel-strong); background:var(--panel); color:var(--text); border-radius:999px; padding:.45rem .8rem; cursor:pointer }
.chip.is-active, .chip:hover{ border-color:transparent; background:linear-gradient(135deg, var(--primary), var(--primary-2)); color:#001018; font-weight:700 }
.gallery{ display:grid; gap:.8rem; grid-template-columns:repeat(3,1fr); margin-top:1rem }
.gallery .item{ overflow:hidden; border-radius:14px; border:1px solid var(--panel-strong); background:var(--panel); box-shadow:var(--shadow) }
.gallery img{ width:100%; height:240px; object-fit:cover; display:block; transition:transform .5s }
.gallery figure:hover img{ transform:scale(1.06) }
.gallery figcaption{ padding:.6rem .7rem; font-size:.95rem; color:var(--muted) }
@media (max-width:980px){ .gallery{ grid-template-columns:1fr 1fr } }
@media (max-width:640px){ .gallery{ grid-template-columns:1fr } }

/* Pricing */
.pricing{ grid-template-columns:repeat(3,1fr) }
.price-card{ padding:1.2rem; border-radius:16px; border:1px solid var(--panel-strong); background:var(--panel); box-shadow:var(--shadow) }
.price-card .price{ color:var(--muted); margin:.6rem 0 .8rem }
.price-card.highlight{ background:linear-gradient(180deg, rgba(0,194,255,.12), rgba(124,255,213,.08)); border-color:transparent; outline:1px solid rgba(255,255,255,.25); scale:1.02 }
@media (max-width:980px){ .pricing{ grid-template-columns:1fr } }

/* Steps */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem }
@media (max-width:980px){ .steps{ grid-template-columns:1fr 1fr } }
@media (max-width:640px){ .steps{ grid-template-columns:1fr } }
.step{ background:var(--panel); border:1px solid var(--panel-strong); border-radius:14px; padding:1rem; display:grid; gap:.3rem }
.step span{ width:28px; height:28px; display:grid; place-items:center; border-radius:999px; background:linear-gradient(135deg, var(--primary), var(--primary-2)); color:#001018; font-weight:800 }

/* Contact form */
.contact-form label{ display:grid; gap:.35rem; margin-bottom:.8rem }
input, select, textarea{ width:100%; padding:.8rem .9rem; border-radius:12px; border:1px solid var(--panel-strong); background:rgba(255,255,255,.02); color:var(--text) }
input:focus, select:focus, textarea:focus{ outline:2px solid var(--primary); outline-offset:1px }
.file{ display:grid; gap:.4rem }
.form-actions{ display:flex; align-items:center; gap:1rem; margin-top:.4rem }
.form-note{ color:var(--muted); font-size:.95rem }
.form-success{ margin-top:.8rem; padding:.8rem 1rem; background:rgba(0,193,111,.15); border:1px solid rgba(0,193,111,.35); border-radius:12px }

/* Footer */
.site-footer{ padding:2rem 0; border-top:1px solid var(--panel-strong); background:rgba(0,0,0,.06) }
.footer-grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:1rem }
.site-footer nav a{ display:inline-block; color:var(--text); text-decoration:none; opacity:.9; padding:.2rem 0 }
.site-footer nav a:hover{ opacity:1 } .footer-contact p{ margin:.3rem 0 } .muted{ color:var(--muted) }
@media (max-width:980px){ .footer-grid{ grid-template-columns:1fr } }

/* Back to top */
.to-top{ position:fixed; right:1rem; bottom:1rem; width:44px; height:44px; display:grid; place-items:center; border-radius:999px;
  text-decoration:none; color:#001018; background:linear-gradient(135deg, var(--primary), var(--primary-2)); box-shadow:var(--shadow);
  border:none; opacity:0; transform:translateY(8px); pointer-events:none; transition:.2s }
.to-top.show{ opacity:1; transform:translateY(0); pointer-events:auto }

/* Reveal on scroll */
.reveal{ opacity:0; transform:translateY(12px); transition:.6s ease }
.reveal.in{ opacity:1; transform:translateY(0) }
.delay-1{ transition-delay:.08s } .delay-2{ transition-delay:.16s } .delay-3{ transition-delay:.24s }

/* Fancy text */
h1 .grad{ background:linear-gradient(135deg, var(--primary), var(--primary-2)); -webkit-background-clip:text; background-clip:text; color:transparent }
/* Typed caret */
#typed{ position:relative; padding-right:.35rem }
#typed::after{ content:""; position:absolute; right:.05rem; top:10%; bottom:10%; width:2px; background:currentColor; opacity:.9; animation:blink .9s steps(2,end) infinite }
@keyframes blink{ 0%,100%{opacity:.1} 50%{opacity:1} }