/* Neon playful tech style */
:root{
  --bg:#07080b;
  --panel:#0c0f15;
  --panel-2:#0f1420;
  --text:#ECF2FF;
  --muted:#9FB3C8;
  --yellow:#FDB515;
  --red:#FF3B30;
  --orange:#FF7A18;
  --cyan:#22D3EE;
  --glow: 0 0 12px rgba(255,122,24,.55), 0 0 32px rgba(253,181,21,.35);
  --glow-cyan: 0 0 10px rgba(34,211,238,.5), 0 0 26px rgba(34,211,238,.35);
  --radius:16px; --radius-sm:12px; --maxw:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(800px 400px at 5% -10%, rgba(255,59,48,.10), transparent 70%),
    radial-gradient(900px 500px at 110% 10%, rgba(34,211,238,.08), transparent 70%),
    var(--bg);
}

a{color:#E6F0FF;text-decoration:none}
a:hover{color:#fff}

.site-header{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px clamp(16px, 4vw, 28px);
  background:rgba(7,8,11,.72); backdrop-filter: saturate(150%) blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.brand{display:flex; align-items:center; gap:12px; font-weight:900; letter-spacing:.15em}
.brand img{display:block; filter: drop-shadow(0 2px 10px rgba(255,122,24,.25));}
.nav__list{list-style:none; display:flex; gap:16px; margin:0; padding:0; align-items:center}
.nav__list a{opacity:.9} .nav__list a:hover{opacity:1}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 16px; border-radius:14px; font-weight:800; letter-spacing:.02em;
  background: linear-gradient(90deg, var(--orange), var(--yellow));
  color:#0b0b0c; box-shadow: var(--glow); border:1px solid rgba(255,255,255,.1);
}
.btn--ghost{background:transparent; color:#fff; box-shadow:none; border:1px solid rgba(255,255,255,.18)}
.btn--sm{padding:8px 12px; font-size:.95rem}

.hero{padding: clamp(40px,6vw,90px) clamp(16px,4vw,32px)}
.hero__grid{max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns: 1.2fr 1fr; gap:36px; align-items:center}
.hero h1{font-size: clamp(30px, 5.5vw, 58px); margin:0 0 10px}
.hero p{color:#D8E5F5}
.hero__visual{ position:relative; aspect-ratio:16/9; border-radius:var(--radius); background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.08); overflow:hidden; max-height:520px; }
.hero__visual::before{content:""; position:absolute; inset:-40%; background:
  conic-gradient(from 0deg, rgba(255,122,24,.25), transparent 40%, rgba(34,211,238,.2));
  filter: blur(60px); animation: swirl 12s linear infinite;}
@keyframes swirl { to { transform: rotate(1turn); } }
.gridlines{position:absolute; inset:0; background-image: linear-gradient(#19202c 1px, transparent 1px), linear-gradient(90deg, #19202c 1px, transparent 1px); background-size: 32px 32px; opacity:.5}
.neon-chip{position:absolute; top:14%; left:12%; width:76%; height:72%; border:2px solid rgba(253,181,21,.6); border-radius:14px; box-shadow: var(--glow);}

.section{padding: clamp(36px,6vw,80px) clamp(16px,4vw,32px)}
.section h2{max-width:var(--maxw); margin:0 auto 12px; font-size: clamp(22px, 3.5vw, 32px)}
.section.alt{background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01))}

.cards{max-width:var(--maxw); margin:0 auto; display:grid; gap:16px; grid-template-columns: repeat(4, 1fr)}
.card{background: var(--panel); border:1px solid rgba(255,255,255,.08); border-radius: var(--radius);
  padding:18px; box-shadow: 0 10px 28px rgba(0,0,0,.35); position:relative; overflow:hidden}
.card .icon{width:26px; height:26px; display:inline-grid; place-items:center; padding:10px; border-radius:12px;
  background: radial-gradient(80% 80% at 30% 20%, rgba(34,211,238,.8), transparent), rgba(255,255,255,.05);
  color:white; box-shadow: var(--glow-cyan); border:1px solid rgba(34,211,238,.35);}
.card h3{margin:10px 0 6px}
.card:hover{border-color: rgba(253,181,21,.55); box-shadow: var(--glow);}

.specs{max-width:var(--maxw); margin:0 auto; display:grid; gap:16px; grid-template-columns: repeat(3, 1fr)}
.specs ul{margin:0; padding-left:18px; color: var(--muted)}

.steps{max-width:var(--maxw); margin:0 auto; padding-left:18px}

.gallery{max-width:var(--maxw); margin:0 auto; display:grid; gap:16px; grid-template-columns: repeat(4,1fr)}
.gallery .ph{width:100%; aspect-ratio:4/3; border-radius:var(--radius-sm);
  background: radial-gradient(60% 60% at 30% 20%, rgba(255,59,48,.25), transparent), 
              radial-gradient(60% 60% at 70% 80%, rgba(253,181,21,.25), transparent), #0a0c10;
  border:1px solid rgba(255,255,255,.08);}

.contact{max-width:var(--maxw); margin:0 auto; display:grid; gap:24px; grid-template-columns: 1.2fr .8fr}
.form{background: var(--panel-2); border:1px solid rgba(255,255,255,.1); border-radius: var(--radius); padding:18px; box-shadow: 0 10px 30px rgba(0,0,0,.35)}
.form .grid{display:grid; gap:14px; grid-template-columns: repeat(2,1fr)}
.field{position:relative}
.field .ficon{position:absolute; left:12px; top:50%; transform:translateY(-50%); width:18px; height:18px; opacity:.9}
input, select, textarea{
  width:100%; background:#0b0e15; border:1px solid rgba(255,255,255,.18); color:var(--text);
  border-radius:12px; padding:12px 12px 12px 40px; outline:none;
  transition: box-shadow .2s ease, border-color .2s ease;
}
textarea{padding-left:12px}
input:focus, select:focus, textarea:focus{border-color: rgba(253,181,21,.7); box-shadow: var(--glow)}

.contact__info{background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding:18px}
.info-row{display:flex; align-items:center; gap:10px; margin:8px 0}
.info-row .mini{width:18px; height:18px; opacity:.9}

.site-footer{padding:20px clamp(16px,4vw,32px); display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.35)}

.shop-grid{max-width:var(--maxw); margin:0 auto; display:grid; gap:16px; grid-template-columns: repeat(3,1fr)}
.product{background: var(--panel); border:1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding:16px; position:relative}
.product:hover{border-color: rgba(253,181,21,.55); box-shadow: var(--glow)}
.product .thumb{width:100%; aspect-ratio:4/3; border-radius:12px; border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(120deg, rgba(34,211,238,.3), rgba(255,59,48,.25));}
.price{font-weight:900; letter-spacing:.03em}
.buy-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.qty{width:86px; border-radius:12px; border:1px solid rgba(255,255,255,.18); background:#0b0e15; color:var(--text); padding:10px}
.note{color:var(--muted); font-size:.95rem; margin-top:10px}

@media (max-width:1000px){
  .hero__grid{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,1fr)}
  .specs{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .contact{grid-template-columns:1fr}
  .shop-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .cards,.specs,.gallery,.shop-grid{grid-template-columns:1fr}
  .form .grid{grid-template-columns:1fr}
}


/* removed legacy css printer animation */
.printer{
  position:absolute; inset:8% 8% 10% 8%;
  border-radius:14px; background: rgba(8,10,16,.45);
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset;
}
.p-frame{
  position:absolute; inset:6% 6%;
  border:2px solid rgba(253,181,21,.55);
  border-radius:12px; box-shadow: var(--glow);
}
.p-bed{
  position:absolute; left:10%; right:10%; bottom:10%;
  height:14%; border-radius:10px;
  background: linear-gradient(180deg, rgba(34,211,238,.25), rgba(34,211,238,.12));
  border:1px solid rgba(34,211,238,.5); box-shadow: var(--glow-cyan);
}
.p-gantry{
  position:absolute; left:10%; right:10%; top:18%;
  height:10%; border-radius:10px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.15);
}
.p-head{
  position:absolute; top:50%; transform: translateY(-50%);
  left:12%; width:40px; height:26px; border-radius:6px;
  background: linear-gradient(180deg, #fff, #bfc7d6);
  box-shadow: 0 6px 18px rgba(255,255,255,.25);
  animation: head-move 4.2s ease-in-out infinite;
}
.p-tip{
  position:absolute; bottom:-8px; left:50%; transform: translateX(-50%);
  width:6px; height:12px; border-radius:3px;
  background: linear-gradient(180deg, #FF7A18, #FDB515);
  box-shadow: 0 0 10px rgba(255,122,24,.8), 0 0 22px rgba(253,181,21,.6);
}
.p-layers{
  position:absolute; left:12%; right:12%; bottom:12%;
  height:56%;
  display:flex; flex-direction:column; justify-content:flex-end; gap:6px;
}
.p-line{
  display:block; height:6px; border-radius:4px;
  background: linear-gradient(90deg, rgba(255,59,48,.8), rgba(255,122,24,.8));
  box-shadow: 0 0 10px rgba(255,122,24,.4);
  width:0%;
}
/* Layer build-up animation, synced but slightly offset */
.p1{ animation: lay-1 4.2s linear infinite; }
.p2{ animation: lay-2 4.2s linear infinite; }
.p3{ animation: lay-3 4.2s linear infinite; }
.p4{ animation: lay-4 4.2s linear infinite; }
.p5{ animation: lay-5 4.2s linear infinite; }

@keyframes head-move{
  0%{ left:12%; }
  20%{ left:78%; }
  40%{ left:12%; }
  60%{ left:78%; }
  80%{ left:12%; }
  100%{ left:12%; }
}
@keyframes lay-1{
  0%{ width:0% } 18%{ width:86% } 20%{ width:86% } 100%{ width:86% }
}
@keyframes lay-2{
  0%{ width:0% } 36%{ width:86% } 38%{ width:86% } 100%{ width:86% }
}
@keyframes lay-3{
  0%{ width:0% } 54%{ width:86% } 56%{ width:86% } 100%{ width:86% }
}
@keyframes lay-4{
  0%{ width:0% } 72%{ width:86% } 74%{ width:86% } 100%{ width:86% }
}
@keyframes lay-5{
  0%{ width:0% } 90%{ width:86% } 92%{ width:86% } 100%{ width:0% } /* reset for loop */
}


/* removed legacy corexy css */
.printer--corexy{position:absolute; inset:6% 6% 8% 6%; border-radius:14px; background: rgba(10,12,18,.45);
  border:1px solid rgba(255,255,255,.08); overflow:hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04)}
.cx-frame{position:absolute; inset:5% 5% 5% 5%; border:2px solid rgba(253,181,21,.6); border-radius:12px; box-shadow: var(--glow)}
.cx-rails .cx-rail{position:absolute; background:linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.05)); border:1px solid rgba(255,255,255,.12)}
.cx-rails .x{left:10%; right:10%; top:22%; height:10px; border-radius:8px}
.cx-rails .y{top:18%; bottom:28%; left:12%; width:10px; border-radius:8px}
.cx-belts .belt{position:absolute; background: repeating-linear-gradient(90deg, rgba(34,211,238,.55) 0 8px, rgba(34,211,238,.15) 8px 16px);
  height:4px; filter: drop-shadow(0 0 6px rgba(34,211,238,.6)); animation: belt-loop 1.2s linear infinite}
.cx-belts .b1{top:21%; left:12%; right:12%}
.cx-belts .b2{top:27%; left:12%; right:12%}
@keyframes belt-loop{to{background-position: 100% 0}}

.cx-pulleys .pulley{position:absolute; width:18px; height:18px; border-radius:50%;
  border:2px solid rgba(34,211,238,.6); box-shadow: var(--glow-cyan); background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.4), transparent)}
.p-tl{top:19%; left:9%}
.p-tr{top:19%; right:9%}
.p-bl{top:29%; left:9%}
.p-br{top:29%; right:9%}

.cx-bed{position:absolute; left:12%; right:12%; bottom:10%; height:20%; border-radius:12px;
  background: linear-gradient(180deg, rgba(34,211,238,.22), rgba(34,211,238,.12));
  border:1px solid rgba(34,211,238,.5); box-shadow: var(--glow-cyan);
  animation: z-step 4.8s steps(1,end) infinite}
@keyframes z-step{ 0%, 80% { transform: translateY(0)} 81%,100% { transform: translateY(6px)} }

.cx-tool{position:absolute; inset:0}
.tool-head{position:absolute; top:24%; left:14%; width:44px; height:28px; border-radius:6px;
  background: linear-gradient(180deg, #ffffff, #cbd3e2); box-shadow: 0 6px 18px rgba(255,255,255,.25);
  animation: corexy-path 4.8s cubic-bezier(.2,.8,.2,1) infinite}
.hotend{position:absolute; bottom:-8px; left:50%; transform:translateX(-50%); width:6px; height:12px; border-radius:3px;
  background: linear-gradient(180deg, #FF7A18, #FDB515); box-shadow: 0 0 10px rgba(255,122,24,.8), 0 0 22px rgba(253,181,21,.6)}

@keyframes corexy-path{
  /* serpentine passes with diagonal moves (CoreXY feel) */
  0%   { left:14%; top:24% }
  12%  { left:78%; top:26% }   /* fast pass to right */
  16%  { left:78%; top:34% }   /* drop */
  28%  { left:14%; top:36% }   /* back to left */
  32%  { left:14%; top:44% }
  44%  { left:78%; top:46% }
  48%  { left:78%; top:54% }
  60%  { left:14%; top:56% }
  64%  { left:14%; top:64% }
  76%  { left:78%; top:66% }
  80%  { left:78%; top:74% }   /* layer end, small lift occurs on bed */
  100% { left:14%; top:24% }   /* reset (simulate Z change and restart) */
}

.cx-layers{position:absolute; left:14%; right:14%; bottom:14%; height:58%; display:flex; flex-direction:column; justify-content:flex-end; gap:6px}
.cx-layers .lay{height:6px; border-radius:4px; width:0%; background: linear-gradient(90deg, rgba(255,59,48,.85), rgba(255,122,24,.85));
  box-shadow: 0 0 10px rgba(255,122,24,.45)}
.l1{animation: lay-a 4.8s linear infinite}
.l2{animation: lay-b 4.8s linear infinite}
.l3{animation: lay-c 4.8s linear infinite}
.l4{animation: lay-d 4.8s linear infinite}
.l5{animation: lay-e 4.8s linear infinite}
.l6{animation: lay-f 4.8s linear infinite}

@keyframes lay-a{ 0%{width:0%} 10%{width:86%} 100%{width:86%}}
@keyframes lay-b{ 0%{width:0%} 26%{width:86%} 100%{width:86%}}
@keyframes lay-c{ 0%{width:0%} 42%{width:86%} 100%{width:86%}}
@keyframes lay-d{ 0%{width:0%} 58%{width:86%} 100%{width:86%}}
@keyframes lay-e{ 0%{width:0%} 74%{width:86%} 100%{width:86%}}
@keyframes lay-f{ 0%{width:0%} 90%{width:86%} 92%{width:86%} 100%{width:0%}} /* reset for loop */

/* --- WebGL printer container --- */
#printer3d{
  position:absolute; inset:6% 6% 8% 6%;
  border-radius:14px; overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background: radial-gradient(80% 60% at 50% 40%, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
#printer3d canvas{ display:block; width:100%; height:100% }

/* --- Hero video/GIF --- */
.hero-video{
  position:absolute; inset:6% 6% 8% 6%;
  border-radius:14px; overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset;
}
.hero-video video, .hero-video img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter: saturate(1.05) contrast(1.05) brightness(1.02);
}

.hero-video--photo video{ filter: saturate(1.05) contrast(1.06) brightness(1.03) }

/* --- Hero media (GIF/Video) --- */
.hero-media{ position:absolute; inset:0; border-radius:0; overflow:hidden; border:none; box-shadow:none; background: transparent; display:grid; place-items:center; }
.hero-media img{ width:100%; height:100%; object-fit:cover; display:block; filter: brightness(1.12) contrast(1.06) saturate(1.06); image-rendering:auto; }

/* --- Hero visual light variant --- */
.hero__visual--light{ background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)); }
.hero__visual--light .gridlines{ position:absolute; inset:0; background-image: linear-gradient(#2a364a 1px, transparent 1px), linear-gradient(90deg, #2a364a 1px, transparent 1px); background-size:32px 32px; opacity:.8; }
.hero__visual--light .neon-chip{ border-color: rgba(253,181,21,.7); box-shadow: var(--glow); }

/* Media container & image tuning */
.hero-media{ position:absolute; inset:0; border-radius:0; overflow:hidden; border:none; box-shadow:none; background: transparent; display:grid; place-items:center; }
.hero-media img{ width:100%; height:100%; object-fit:cover; display:block; filter: brightness(1.12) contrast(1.06) saturate(1.06); image-rendering:auto; }
@media (max-width: 1000px){
  .hero__visual{ position:relative; aspect-ratio:16/9; border-radius:var(--radius); background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.08); overflow:hidden; max-height:520px; }
}
@media (max-width: 640px){
  .hero__visual{ position:relative; aspect-ratio:16/9; border-radius:var(--radius); background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.08); overflow:hidden; max-height:520px; }
  .hero-media{ position:absolute; inset:0; border-radius:0; overflow:hidden; border:none; box-shadow:none; background: transparent; display:grid; place-items:center; }
}

.hero-media{ position:absolute; inset:6% 8% 8% 8%; display:grid; place-items:center; background:transparent; }
.hero-media--sketch img{ width:100%; height:100%; object-fit:contain; display:block; }
@media (max-width: 1000px){ .hero__visual{ max-height:420px } }
@media (max-width: 640px){ .hero__visual{ aspect-ratio:4/3; max-height:none } .hero-media{ inset:8% } }