/* Basic reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans",sans-serif;
  background:#0b0e12;color:#ddd;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* Nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:40}
.nav-inner{max-width:1100px;margin:18px auto;display:flex;align-items:center;justify-content:center;padding:0 20px;position:relative}
.logo{display:none}
.menu{z-index:30}
.menu{position:relative}
.menu ul{list-style:none;display:flex;gap:22px;color:#bdb7bf;font-weight:500;flex-wrap:nowrap;white-space:nowrap;margin:0 auto}
.menu li{cursor:default}

/* Nav link button style for Home */
.menu .nav-link{color:#bdb7bf;text-decoration:none;padding:6px 10px;border-radius:8px;display:inline-block;font-weight:600;transition:color .18s ease,text-shadow .2s ease,transform .18s ease;cursor:pointer}
.menu .nav-link:focus{outline:2px solid rgba(255,60,60,0.12);outline-offset:4px}
.menu .nav-link:hover,.menu .nav-link:focus{color:#ff3b3b;text-shadow:0 8px 28px rgba(255,60,60,0.22),0 0 10px rgba(255,80,80,0.12);transform:translateY(-2px)}
.actions{display:flex;gap:12px;align-items:center;position:absolute;right:20px;top:50%;transform:translateY(-50%);z-index:40}
.actions .signup{background:linear-gradient(180deg,#ffb3b3,#ff8b8b);border-radius:12px;padding:8px 14px;border:none;color:#3a0a0a;font-weight:700}
.actions .signin{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:8px 12px;border-radius:8px;color:#ddd}
.icon-btn{background:transparent;border:none;color:#d8cfe0}

/* Hero area */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;padding:140px 20px}
.hero-inner{width:820px;text-align:center;position:relative;z-index:20;transform:translateZ(0);will-change:transform;margin:0 auto}
.label-pill{display:inline-block;background:linear-gradient(180deg,#ffb3b3,#ff6b6b);color:#3a0a0a;border-radius:28px;padding:10px 22px;border:4px solid rgba(255,255,255,0.04);font-weight:700;margin-bottom:28px}
.title{font-size:80px;line-height:0.98;color:#f5f3f7;font-weight:800;margin-bottom:20px;text-shadow:0 2px 0 rgba(0,0,0,0.4);transform:translateZ(0)}
.lead{color:#a29aa3;max-width:720px;margin:0 auto 22px;padding:0 10px}
.cta{display:flex;gap:16px;justify-content:center;margin-top:18px}
.btn{position:relative;padding:14px 28px;border-radius:12px;border:none;cursor:pointer;font-weight:700;overflow:hidden;color:inherit;transition:transform .18s cubic-bezier(.2,.9,.2,1),box-shadow .18s ease,background-color .18s ease;will-change:transform,box-shadow}
.btn::before{content:'';position:absolute;left:0;top:0;right:0;height:52%;background:linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.02));mix-blend-mode:overlay;pointer-events:none;transform:translateY(-12%);opacity:0.9;transition:transform .28s ease,opacity .28s}
.btn::after{content:'';position:absolute;inset:0;border-radius:12px;box-shadow:inset 0 -6px 18px rgba(0,0,0,0.35), inset 0 6px 12px rgba(255,255,255,0.02);pointer-events:none}
.btn:focus{outline:none}
.btn:active{transform:translateY(1px) scale(.995)}
.primary{background:linear-gradient(180deg,#ff9a9a,#ff6b6b);color:#3a0a0a;box-shadow:0 18px 46px rgba(255,60,60,0.14),0 6px 18px rgba(0,0,0,0.5)}
.primary:hover,.primary:focus{box-shadow:0 28px 66px rgba(255,60,60,0.22),0 10px 26px rgba(0,0,0,0.6)}
.ghost{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));border:1px solid rgba(255,255,255,0.06);color:#ddd;box-shadow:inset 0 4px 10px rgba(255,255,255,0.02),0 10px 28px rgba(0,0,0,0.45)}
.ghost:hover,.ghost:focus{box-shadow:inset 0 6px 14px rgba(255,255,255,0.03),0 16px 38px rgba(0,0,0,0.5)}

/* Hover / focus effects for buttons */
.btn:hover,.btn:focus{transform:translateY(-4px) scale(1.035);box-shadow:0 20px 38px rgba(200,50,50,0.18),0 0 28px rgba(255,60,60,0.12);outline:none}
.primary:hover,.primary:focus{background:linear-gradient(180deg,#ffb3b3,#ff6b6b);box-shadow:0 26px 54px rgba(255,60,60,0.22),0 0 36px rgba(255,60,60,0.18)}
.ghost:hover,.ghost:focus{background:rgba(255,255,255,0.03);box-shadow:0 16px 36px rgba(0,0,0,0.52),0 0 18px rgba(255,255,255,0.03);transform:translateY(-3px) scale(1.02)}

/* Header action buttons */
.actions .signup{background:linear-gradient(180deg,#ffc2c2,#ff8b8b);border-radius:12px;padding:8px 14px;border:none;color:#3a0a0a;font-weight:700;transition:transform .16s ease,box-shadow .16s ease;position:relative;overflow:hidden}
.actions .signup::before{content:'';position:absolute;left:0;top:0;right:0;height:48%;background:linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.02));mix-blend-mode:overlay;pointer-events:none;transform:translateY(-10%);transition:transform .24s ease}
.actions .signin{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));border:1px solid rgba(255,255,255,0.06);padding:8px 12px;border-radius:8px;color:#ddd;transition:transform .16s ease,box-shadow .16s ease;position:relative;overflow:hidden}
.actions .signup:hover,.actions .signup:focus{transform:translateY(-3px) scale(1.03);box-shadow:0 14px 40px rgba(255,60,60,0.18),0 0 18px rgba(255,60,60,0.14)}
.actions .signin:hover,.actions .signin:focus{transform:translateY(-2px) scale(1.02);box-shadow:0 10px 28px rgba(0,0,0,0.45),0 0 12px rgba(255,255,255,0.03)}

/* Background grid overlay */
.grid-overlay{position:absolute;inset:0;display:block;background-image:
  linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size:40px 40px,40px 40px;opacity:0.08;mix-blend-mode:overlay;z-index:10;filter:blur(1px);backface-visibility:hidden}

/* Zigzag SVG background */
.zigzags{position:absolute;inset:0;width:100%;height:100%;z-index:13;pointer-events:none;overflow:visible}
.zigzags .zig{fill:none;stroke:#ff3b3b;stroke-width:3.8;stroke-linecap:round;stroke-linejoin:round;opacity:0.34;filter:drop-shadow(0 28px 68px rgba(255,50,50,0.20));mix-blend-mode:screen}
.zigzags .zig-1{stroke:#ff6b6b;opacity:0.40;stroke-width:4.2}
.zigzags .zig-2{stroke:#ff3b3b;opacity:0.36;stroke-width:3.8}
.zigzags .zig-3{stroke:#ff9a9a;opacity:0.30;stroke-width:3.4}
.zigzags .zig-4{stroke:#ff5252;opacity:0.30;stroke-width:3.2}
.zigzags .zig-5{stroke:#ff7b7b;opacity:0.24;stroke-width:3}
.zigzags .zig-6{stroke:#ff4444;opacity:0.28;stroke-width:3.6}

/* Make the lines appear to carry a flowing current: dash + offset animation + glow pulse */
.zigzags .zig{transform-origin:0 0;will-change:transform,opacity,filter,stroke-dashoffset}
.zigzags .zig{stroke-dasharray:18 10;stroke-linecap:round}
.zig-1{animation: floatZ 18s linear infinite, electricFlow 1.0s linear infinite, redGlow 2.8s ease-in-out infinite}
.zig-2{animation: floatZ 22s linear infinite reverse, electricFlow 0.9s linear infinite reverse, redGlow 3.2s ease-in-out infinite}
.zig-3{animation: floatZ 26s linear infinite, electricFlow 1.3s linear infinite, redGlow 3.8s ease-in-out infinite reverse}
.zig-4{animation: floatZ 20s linear infinite reverse, electricFlow 1.1s linear infinite, redGlow 3.6s ease-in-out infinite}
.zig-5{animation: floatZ 24s linear infinite, electricFlow 1.4s linear infinite reverse, redGlow 4.4s ease-in-out infinite}
.zig-6{animation: floatZ 19s linear infinite reverse, electricFlow 0.95s linear infinite, redGlow 2.6s ease-in-out infinite}

@keyframes floatZ{
  0%{transform:translate3d(-40px,0,0) translateY(0)}
  50%{transform:translate3d(60px,6px,0) translateY(-8px)}
  100%{transform:translate3d(-40px,0,0) translateY(0)}
}

@keyframes electricFlow{
  0%{stroke-dashoffset:0}
  100%{stroke-dashoffset:-220}
}

@keyframes redGlow{
  0%{opacity:0.18;filter:drop-shadow(0 10px 28px rgba(255,50,50,0.10))}
  30%{opacity:0.42;filter:drop-shadow(0 30px 88px rgba(255,60,60,0.30))}
  60%{opacity:0.36;filter:drop-shadow(0 22px 58px rgba(255,50,50,0.22))}
  100%{opacity:0.18;filter:drop-shadow(0 10px 28px rgba(255,50,50,0.10))}
}

/* Stars (generated by JS too) */
.stars{position:absolute;inset:0;z-index:5;pointer-events:none}
.star{position:absolute;background:radial-gradient(circle, #fff 0%, rgba(255,255,255,0.2) 40%, transparent 50%);width:6px;height:6px;border-radius:50%;opacity:0.06;animation: drift 12s linear infinite;image-rendering:optimizeQuality;filter:blur(0.4px)}
@keyframes drift{0%{transform:translateY(0) scale(0.8) }50%{transform:translateY(-20px) scale(1)}100%{transform:translateY(0) scale(0.8)}}

/* Centered square vignette to match screenshot look */
.hero:before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:640px;height:420px;background:rgba(12,9,14,0.18);box-shadow:inset 0 0 80px rgba(0,0,0,0.6);z-index:12;mix-blend-mode:overlay;border-radius:4px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}

/* Responsive */
@media (max-width:900px){
  .title{font-size:46px}
  .hero-inner{width:92%}
}
@media (max-width:520px){
  .menu{display:none}
  .title{font-size:32px}
  .label-pill{padding:8px 14px}
  .actions .signup{padding:6px 10px}
}

/* High-resolution / 1920x1080 tweaks to reduce pixelation and scale elements */
@media (min-width:1920px){
  body{background:#07060a}
  .hero{padding:160px 20px}
  .hero-inner{width:980px}
  .title{font-size:96px}
  .label-pill{padding:12px 26px}
  .hero:before{width:820px;height:520px;background:rgba(12,9,14,0.15);box-shadow:inset 0 0 120px rgba(0,0,0,0.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
  .grid-overlay{background-size:48px 48px,48px 48px;opacity:0.06;filter:blur(1.6px)}
  .star{opacity:0.08}
  .star{width:8px;height:8px}
}

/* Products grid */
.products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:34px}
.product-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));padding:22px;border-radius:12px;box-shadow:0 18px 46px rgba(0,0,0,0.45);text-align:left}
.product-card .product-media{height:120px;border-radius:8px;background:linear-gradient(135deg,#1a0b0b,#2a0f0f);box-shadow:inset 0 -6px 18px rgba(0,0,0,0.6);margin-bottom:14px}
.product-card h3{margin:0 0 6px 0;color:#fff}
.product-card .muted{color:#b9b2b7;font-size:14px;margin-bottom:12px}
.product-card .card-cta{display:flex;justify-content:flex-start}

/* --- Signup page specific styles (matching provided design) --- */
.signup-panel {
  width: 420px;
  margin: 40px auto 80px;
  text-align: center;
  color: #dcd6e0;
}
.signup-panel .title {
  text-align: center;
  margin: 6px 0 6px;
  font-size: 26px;
  color: #fff;
  font-weight: 600;
}
.signup-panel .lead {
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 18px;
}
.signup-panel .lead .nav-link { color: #ff6b6b; font-weight: 600; text-decoration: none; }

.signup-form { width: 100%; }
.form-row { margin-bottom: 14px; }
.field-label { display:block; font-size:12px; color: rgba(255,255,255,0.32); margin-bottom:8px; }
.field { position: relative; }
.field-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 16px; opacity: 0.9; }
.field input {
  width: 100%;
  padding: 14px 16px 14px 44px;
  background: rgba(255,255,255,0.01);
  border: 1px solid rgba(255,255,255,0.12);
  color: #eee;
  border-radius: 12px;
  height: 52px;
  outline: none;
  transition: box-shadow .14s ease, transform .12s ease, border-color .12s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.01);
 }
.field input::placeholder { color: rgba(255,255,255,0.36); }
.field input:focus {
  box-shadow: 0 10px 30px rgba(255,90,90,0.06);
  border-color: rgba(255,90,90,0.18);
  transform: translateY(-1px);
}

.signup-msg{margin:18px 0;color:#e6f7e6;font-weight:700;text-align:center;font-size:15px}

.field input:focus {
  box-shadow: 0 10px 30px rgba(255,90,90,0.06);
  border-color: rgba(255,90,90,0.28);
  transform: translateY(-1px);
  outline: 2px solid rgba(255,90,90,0.06);
}

/* Prevent browser's default red outline for invalid fields; use custom messages instead */
.field input:invalid{ box-shadow:none; outline:none; }

.signup-btn {
  margin-top: 10px;
  width: 100%;
  height: 56px;
  border-radius: 12px;
  background: linear-gradient(90deg,#ffb3b3,#ff6b6b);
  color: #1a0823;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 8px 28px rgba(255,90,90,0.12);
  border: none;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.signup-btn:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(255,90,90,0.18); }

@media (max-width: 600px) {
  .signup-panel { width: 92%; margin: 30px auto; }
}

/* small tweak to keep hero spacing consistent on signup */
.hero .hero-inner { padding-top: 36px; padding-bottom: 36px; }

@media (max-width:1100px){
  .products-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .products-grid{grid-template-columns:1fr}
}