:root{
  --bg:#06070d;
  --card:#0b1020;
  --text:#eaf0ff;
  --muted:#a9b4d0;
  --accent:#b026ff;
  --accent2:#6d5efc;
  --radius:18px;
  --stroke: rgba(255,255,255,.10);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: var(--bg);
  color:var(--text);
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto; display:block}
.container{max-width:1100px; margin:0 auto; padding:22px}
.muted{color:var(--muted)}
.accent{color:var(--accent)}

/* FX background */
.fx-bg{position:fixed; inset:0; z-index:-1; pointer-events:none;}
#matrix{width:100%; height:100%; display:block; opacity:.55; filter:saturate(1.2) contrast(1.05);}
.fx-glow{
  position:absolute; inset:-40px;
  background:
    radial-gradient(900px 500px at 20% 10%, rgba(176,38,255,.24), transparent 60%),
    radial-gradient(800px 420px at 80% 20%, rgba(109,94,252,.18), transparent 60%),
    radial-gradient(700px 400px at 50% 90%, rgba(35,213,171,.10), transparent 65%);
  mix-blend-mode: screen;
}

/* Header */
.site-header{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:14px;}
.nav{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.menu{list-style:none; display:flex; gap:12px; padding:0; margin:0;}
.menu a{color:var(--muted); padding:8px 10px; border-radius:12px; border:1px solid transparent;}
.menu a:hover{border-color:rgba(176,38,255,.25); color:#fff;}

.badge{
  display:inline-flex; gap:8px; align-items:center;
  padding:10px 14px;
  border:1px solid rgba(176,38,255,.22);
  border-radius:999px;
  color:var(--muted);
  font-size:14px;
  background: rgba(10,12,20,.45);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset;
}

/* Brand glitch */
.ai-brand{
  font-weight:900;
  font-size:20px;
  letter-spacing:1px;
  position:relative;
  text-transform: lowercase;
  color:#fff;
  line-height:1;
}
.ai-brand span{color:var(--accent)}
.ai-brand::before,
.ai-brand::after{
  content: attr(data-text);
  position:absolute;
  left:0; top:0;
  width:100%;
  overflow:hidden;
  color: var(--accent);
  opacity:.55;
  pointer-events:none;
}
.ai-brand::before{
  clip-path: inset(0 0 60% 0);
  animation: glitchTop 3s infinite linear alternate-reverse;
}
.ai-brand::after{
  clip-path: inset(60% 0 0 0);
  animation: glitchBottom 2.5s infinite linear alternate-reverse;
}
@keyframes glitchTop{
  0%{transform:translate(0)}
  20%{transform:translate(-1px,-1px)}
  40%{transform:translate(-2px,1px)}
  60%{transform:translate(1px,-1px)}
  80%{transform:translate(2px,1px)}
  100%{transform:translate(0)}
}
@keyframes glitchBottom{
  0%{transform:translate(0)}
  20%{transform:translate(1px,1px)}
  40%{transform:translate(2px,-1px)}
  60%{transform:translate(-1px,1px)}
  80%{transform:translate(-2px,-1px)}
  100%{transform:translate(0)}
}

/* Hero */
.hero{
  display:grid; gap:12px;
  margin:18px 0 22px;
  padding:22px;
  border-radius:var(--radius);
  border:1px solid rgba(176,38,255,.22);
  background: linear-gradient(135deg, rgba(176,38,255,.12), rgba(109,94,252,.08));
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.04) 0px, rgba(255,255,255,.04) 1px, transparent 2px, transparent 6px);
  opacity:.25;
  pointer-events:none;
}
.hero h1{margin:0; font-size:38px; letter-spacing:.2px; text-shadow:0 0 16px rgba(176,38,255,.25); line-height:1.05;}
.hero p{margin:0; color:var(--muted); max-width:70ch;}

/* Grid / cards */
.grid{display:grid; grid-template-columns: repeat(4, 1fr); gap:14px;}
@media (max-width: 980px){ .grid{grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 520px){ .grid{grid-template-columns: 1fr;} }

.card{
  background: rgba(11,16,32,.78);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius);
  padding:14px;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
  position:relative;
  overflow:hidden;
}
.card::after{
  content:"";
  position:absolute;
  inset:-40px;
  background: radial-gradient(380px 180px at 30% 10%, rgba(176,38,255,.16), transparent 60%);
  opacity:.55;
  pointer-events:none;
}
.card:hover{transform:translateY(-3px); border-color:rgba(176,38,255,.45); box-shadow:0 12px 45px rgba(0,0,0,.45);}
.card h3{margin:10px 0 6px; font-size:16px; position:relative; z-index:1;}
.thumb-fallback{height:210px; border-radius:14px; background:#070a14; border:1px solid rgba(255,255,255,.06);}
.card img{width:100%; height:210px; object-fit:cover; border-radius:14px; background:#070a14; border:1px solid rgba(255,255,255,.06); position:relative; z-index:1;}
.price{color:#d9b3ff; font-weight:800; text-shadow:0 0 12px rgba(176,38,255,.18); position:relative; z-index:1;}
.row{display:flex; gap:8px; margin-top:8px; position:relative; z-index:1; flex-wrap:wrap;}
.mini{
  font-size:12px;
  color:var(--muted);
  border:1px solid rgba(255,255,255,.10);
  padding:6px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.18);
}

/* Buttons */
.btn, button, .button, input[type="submit"]{
  display:inline-flex; justify-content:center; align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(176,38,255,.25);
  cursor:pointer;
  background: linear-gradient(135deg, rgba(176,38,255,.95), rgba(109,94,252,.92));
  color:#fff;
  font-weight:800;
  box-shadow: 0 0 22px rgba(176,38,255,.12);
  text-decoration:none;
}
.btn:hover, button:hover, .button:hover, input[type="submit"]:hover{filter:brightness(1.06);}

input, select, textarea{
  background: rgba(11,16,32,.78);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  color: var(--text);
  padding: 10px 12px;
}
input:focus, select:focus, textarea:focus{outline:none; border-color:rgba(176,38,255,.45); box-shadow:0 0 0 3px rgba(176,38,255,.12);}

/* Mini strip */
.mini-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:18px 0 10px;}
@media (max-width: 980px){ .mini-strip{grid-template-columns:1fr;}}
.mini-card{
  display:flex; gap:12px; align-items:flex-start;
  padding:14px; border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(11,16,32,.58);
}
.mini-icon{
  width:36px; height:36px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(176,38,255,.25);
  background: rgba(176,38,255,.10);
}

/* Footer */
.site-footer{color:var(--muted); padding:26px 0; font-size:14px}

/* WooCommerce tweaks */
.woocommerce .woocommerce-breadcrumb{color:var(--muted)}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{color:var(--muted)}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:#fff}
.woocommerce-message, .woocommerce-info, .woocommerce-error{
  border-radius:var(--radius);
  background: rgba(11,16,32,.78);
  border:1px solid rgba(176,38,255,.25);
  color:#fff;
}
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt{background: linear-gradient(135deg, rgba(176,38,255,.95), rgba(109,94,252,.92));}

/* Single product layout */
.ai-product-grid{display:grid; grid-template-columns:1fr 1fr; gap:30px;}
@media (max-width: 980px){ .ai-product-grid{grid-template-columns:1fr;}}
.ai-gallery{position:relative;}
.ai-gallery img{border-radius:18px; box-shadow:0 0 60px rgba(176,38,255,.35);}
.ai-pulse{
  position:absolute; inset:0; border-radius:18px;
  box-shadow:0 0 40px rgba(176,38,255,.45);
  animation:pulse 2.5s infinite;
  pointer-events:none;
}
@keyframes pulse{0%{opacity:.35} 50%{opacity:.85} 100%{opacity:.35}}
.ai-features{margin-top:18px; padding:0; list-style:none;}
.ai-features li{margin-bottom:8px; color:#d9b3ff;}
.ai-below{margin-top:24px;}
.ai-product .product_title{margin-top:0; text-shadow:0 0 16px rgba(176,38,255,.18);}

/* AI Panel */
.ai-panel .order-card{margin-bottom:14px;}
.order-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px;}
.order-items{margin:0 0 10px; padding-left:18px;}
.notes{margin-top:8px;}
.note{padding:10px 12px; border-radius:14px; border:1px solid rgba(255,255,255,.10); background:rgba(0,0,0,.18); margin-bottom:8px;}

/* Popup */
#ai-popup{
  position:fixed; inset:0;
  background:rgba(0,0,0,.75);
  display:none;
  justify-content:center; align-items:center;
  z-index:9999;
  padding:18px;
}
#ai-popup[aria-hidden="false"]{display:flex;}
.ai-popup-box{
  width:min(520px, 100%);
  background:#0b1020;
  border:1px solid rgba(176,38,255,.4);
  padding:26px;
  border-radius:18px;
  text-align:center;
  box-shadow:0 0 60px rgba(176,38,255,.45);
}
.ai-popup-box h3{margin:10px 0 6px;}
.ai-popup-box p{margin:0; color:var(--muted);}
.popup-close{
  margin-top:12px;
  width:100%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:var(--muted);
  box-shadow:none;
}
.popup-close:hover{filter:brightness(1.08);}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  #matrix{opacity:.18}
  .card, .btn, button, .button, input[type="submit"]{transition:none}
  .ai-pulse{animation:none; opacity:.35}
  .ai-brand::before, .ai-brand::after{animation:none; opacity:.25}
}