:root{
  /* DARK is default */
  --bg:#050714;
  --bg2:#070a1c;
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.04);
  --stroke:rgba(255,255,255,.10);
  --text:#eef2ff;
  --muted:rgba(238,242,255,.68);

  --accent:#38bdf8; /* cyan */
  --accent2:#a78bfa; /* violet */
  --gold:#ffd86b;
  --shadow:0 24px 70px rgba(0,0,0,.55);

  --r:18px;
  --max:1180px;
  --fast:180ms;
  --slow:520ms;
}

[data-theme="light"]{
  --bg:#f7f8ff;
  --bg2:#ffffff;
  --card:rgba(10,15,25,.06);
  --card2:rgba(10,15,25,.04);
  --stroke:rgba(10,15,25,.12);
  --text:#0b1220;
  --muted:rgba(11,18,32,.70);
  --shadow:0 24px 70px rgba(12,18,28,.18);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background:
    radial-gradient(1100px 700px at 15% -10%, rgba(56,189,248,.18), transparent 60%),
    radial-gradient(900px 520px at 95% 10%, rgba(167,139,250,.18), transparent 58%),
    radial-gradient(900px 520px at 30% 110%, rgba(255,216,107,.12), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  overflow-x:hidden;
}

/* animated background "alive" layer */
body::before, body::after{
  content:"";
  position:fixed;
  inset:-40vmax;
  pointer-events:none;
  z-index:-1;
  filter: blur(40px);
  opacity:.55;
}
body::before{
  background: conic-gradient(from 180deg, rgba(56,189,248,.35), rgba(167,139,250,.28), rgba(255,216,107,.18), rgba(56,189,248,.35));
  animation: drift 18s linear infinite;
}
body::after{
  background: radial-gradient(circle at 30% 30%, rgba(56,189,248,.22), transparent 52%),
              radial-gradient(circle at 70% 40%, rgba(167,139,250,.22), transparent 52%),
              radial-gradient(circle at 55% 75%, rgba(255,216,107,.16), transparent 52%);
  animation: floaty 10s ease-in-out infinite;
}

@keyframes drift{ to { transform: rotate(360deg); } }
@keyframes floaty{ 0%,100%{ transform: translate3d(0,0,0) scale(1);} 50%{ transform: translate3d(2vmax,-1vmax,0) scale(1.04);} }

a{color:inherit}
.muted{color:var(--muted)}
.small{font-size:12px}

.topbar{
  position:sticky;
  top:0;
  z-index:30;
  display:flex;
  align-items:center;
  gap:16px;
  justify-content:space-between;
  padding:14px 18px;
  background: rgba(6,8,20,.55);
  backdrop-filter: blur(14px);
  border-bottom:1px solid var(--stroke);
}
[data-theme="light"] .topbar{background: rgba(255,255,255,.72)}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}
.brand-logo{
  width:38px;
  height:38px;
  object-fit:contain;
  border-radius:10px;
  /* no box */
  background:transparent;
}
.brand-name{
  font-weight:900;
  letter-spacing:.02em;
}

.nav{display:flex; gap:14px; align-items:center}
.nav a{
  text-decoration:none;
  color:var(--muted);
  font-weight:700;
  padding:8px 10px;
  border-radius:12px;
  transition: background var(--fast), color var(--fast);
}
.nav a:hover{ background: rgba(255,255,255,.06); color: var(--text); }

.actions{display:flex; gap:10px; align-items:center}
.iconbtn{
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.05);
  color: var(--text);
  padding:10px 12px;
  border-radius:14px;
  cursor:pointer;
  transition: transform var(--fast), box-shadow var(--fast), background var(--fast);
}
.iconbtn:hover{ transform: translateY(-1px); box-shadow: 0 14px 34px rgba(0,0,0,.30); background: rgba(255,255,255,.08); }

.cartbtn{
  display:flex;
  gap:10px;
  align-items:center;
  border:1px solid rgba(56,189,248,.35);
  background: linear-gradient(135deg, rgba(56,189,248,.22), rgba(167,139,250,.12));
  color:var(--text);
  padding:10px 12px;
  border-radius:16px;
  cursor:pointer;
  box-shadow: 0 12px 45px rgba(56,189,248,.12);
  transition: transform var(--fast), box-shadow var(--fast);
}
.cartbtn:hover{ transform: translateY(-1px); box-shadow: 0 22px 70px rgba(56,189,248,.18); }
.cartbtn-pill{
  display:inline-grid;
  place-items:center;
  min-width:24px;
  height:24px;
  padding:0 8px;
  border-radius:999px;
  background: rgba(255,255,255,.12);
  border:1px solid var(--stroke);
  font-weight:900;
}

main{max-width:var(--max); margin:0 auto; padding: 0 18px 70px;}

.hero{
  padding: 48px 0 18px;
  display:grid;
  grid-template-columns: 1fr;
  gap:18px;
}
.hero-inner{
  border:1px solid var(--stroke);
  border-radius: 26px;
  padding: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}
.hero-inner::before{
  content:"";
  position:absolute;
  inset:-1px;
  background: radial-gradient(800px 220px at 30% 0%, rgba(56,189,248,.24), transparent 60%),
              radial-gradient(800px 220px at 80% 0%, rgba(167,139,250,.18), transparent 55%);
  opacity:.9;
  pointer-events:none;
}
.hero-inner::after{
  content:"";
  position:absolute;
  inset:-40px;
  background-image: url('assets/gallery/models_teeshirts.jpg');
  background-size: cover;
  background-position: center;
  opacity: .08;
  mix-blend-mode: screen;
  transform: scale(1.05);
  animation: heroPan 14s ease-in-out infinite;
  pointer-events:none;
}
@keyframes heroPan{ 0%,100%{ transform: translate3d(0,0,0) scale(1.05);} 50%{ transform: translate3d(14px,-10px,0) scale(1.08);} }
.hero-inner > *{ position:relative; }

.hero-badge{
  display:inline-flex;
  gap:8px;
  align-items:center;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  padding:8px 12px;
  border-radius:999px;
  font-weight:800;
  color: var(--muted);
}

.hero h1{ margin:14px 0 10px; font-size: clamp(34px, 5vw, 54px); line-height:1.02; letter-spacing:-.02em; }
.hero-sub{ font-weight:900; background: linear-gradient(90deg, var(--accent), var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-copy{ max-width: 62ch; color: var(--muted); font-weight:650; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; }
.hero-note{ margin-top: 12px; }

.section{ padding: 38px 0; }
.section.alt{
  border:1px solid var(--stroke);
  border-radius: 26px;
  padding: 34px 18px;
  background: rgba(255,255,255,.04);
}
.section-head{ margin-bottom: 18px; }
.section-head h2{ margin:0 0 6px; font-size: 28px; letter-spacing:-.01em; }
.section-actions{ margin-top: 16px; display:flex; justify-content:center; }

.btn{
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding: 12px 14px;
  border-radius: 16px;
  font-weight:900;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition: transform var(--fast), box-shadow var(--fast), background var(--fast), border-color var(--fast);
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 18px 60px rgba(0,0,0,.35); background: rgba(255,255,255,.09); }
.btn.primary{
  border-color: rgba(56,189,248,.45);
  background: linear-gradient(135deg, rgba(56,189,248,.32), rgba(167,139,250,.20));
  box-shadow: 0 18px 70px rgba(56,189,248,.16);
}
.btn.primary:hover{ box-shadow: 0 26px 90px rgba(56,189,248,.22); }
.btn.ghost{ background: transparent; }
.btn.full{ width:100%; }

.product-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:16px;
}
@media (max-width: 980px){ .product-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .product-grid{ grid-template-columns: 1fr; } .nav{display:none;} }

.card{
  border:1px solid var(--stroke);
  border-radius: 22px;
  overflow:hidden;
  background: rgba(255,255,255,.05);
  box-shadow: 0 18px 70px rgba(0,0,0,.22);
  transform: translateZ(0);
  transition: transform var(--fast), box-shadow var(--fast);
}
.card:hover{ transform: translateY(-2px); box-shadow: 0 26px 90px rgba(0,0,0,.30); }

.card-media{ aspect-ratio: 4/3; display:grid; place-items:center; background: rgba(0,0,0,.12); }
[data-theme="light"] .card-media{ background: rgba(10,15,25,.06); }
.card-media img{ width:100%; height:100%; object-fit:contain; padding: 10px; filter: drop-shadow(0 18px 30px rgba(0,0,0,.25)); }
.card-body{ padding: 16px; }
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:900;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--muted);
}
.card-title{ font-size:18px; font-weight:950; margin-top:8px; }
.card-sub{ color: var(--muted); margin-top:6px; }
.price{ font-size:28px; font-weight:950; margin-top:12px; letter-spacing:-.02em; }

.opts{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-top: 12px; }
.field label{ display:block; font-size:12px; font-weight:900; color: var(--muted); margin-bottom:6px; }
select, input, textarea{
  width:100%;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.05);
  color: var(--text);
  padding: 12px 12px;
  border-radius: 16px;
  outline:none;
}
[data-theme="light"] select,
[data-theme="light"] input,
[data-theme="light"] textarea{ background: rgba(10,15,25,.04); }

.swatches{ display:flex; flex-wrap:wrap; gap:8px; }
.swatch{
  width:24px; height:24px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.18);
  cursor:pointer;
  transition: transform var(--fast), box-shadow var(--fast), border-color var(--fast);
}
.swatch:hover{ transform: scale(1.06); box-shadow: 0 10px 26px rgba(0,0,0,.25); }
.swatch.active{ border-color: rgba(56,189,248,.9); box-shadow: 0 0 0 6px rgba(56,189,248,.14); }

.card-actions{ display:flex; gap:10px; margin-top: 12px; }

/* Studio preview */
.studio{ border:1px solid var(--stroke); border-radius: 22px; overflow:hidden; background: rgba(255,255,255,.05); box-shadow: var(--shadow); }
.studio-top{ padding: 16px; border-bottom:1px solid var(--stroke); }
.studio-controls{ display:grid; grid-template-columns: 1fr 2fr; gap:12px; }
@media (max-width: 720px){ .studio-controls{ grid-template-columns: 1fr; } }
.color-row{ display:flex; flex-wrap:wrap; gap:8px; }
.color-swatch{ width:26px; height:26px; border-radius:999px; border:2px solid rgba(255,255,255,.18); cursor:pointer; }
.color-swatch.active{ border-color: rgba(56,189,248,.9); box-shadow: 0 0 0 6px rgba(56,189,248,.14); }
.studio-frame{ display:grid; place-items:center; padding: 18px; min-height: 340px; background: rgba(0,0,0,.12); }
[data-theme="light"] .studio-frame{ background: rgba(10,15,25,.05); }
.studio-mock{ width:min(520px, 100%); height:auto; object-fit:contain; filter: drop-shadow(0 24px 40px rgba(0,0,0,.35)); animation: pop 520ms ease both; }
@keyframes pop{ from{ transform: translateY(10px); opacity:.0;} to{ transform: translateY(0); opacity:1; } }

/* Gallery */
.gallery{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:12px; }
@media (max-width: 980px){ .gallery{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
.gitem{ border:1px solid var(--stroke); border-radius: 18px; overflow:hidden; background: rgba(255,255,255,.05); cursor:pointer; }
.gitem img{ width:100%; height:220px; object-fit:cover; display:block; }
.gcap{ padding: 10px 12px; font-weight:850; color: var(--muted); }

/* About + FAQ */
.about{ display:grid; grid-template-columns: 1.2fr .8fr; gap:16px; }
@media (max-width: 980px){ .about{ grid-template-columns: 1fr; } }
.about-card{ border:1px solid var(--stroke); border-radius: 22px; padding: 16px; background: rgba(255,255,255,.05); box-shadow: 0 18px 70px rgba(0,0,0,.18); }
.about-top{ display:flex; gap:14px; align-items:center; }
.about-photo{ width:70px; height:70px; border-radius: 18px; object-fit:cover; border:1px solid var(--stroke); }
.about-name{ font-weight:950; font-size:18px; }
.about-role{ color: var(--muted); font-weight:850; }
.about-actions{ display:flex; gap:10px; margin-top: 12px; }

.checks{ margin: 12px 0 0; padding: 0 0 0 18px; color: var(--muted); font-weight:650; }

.faq details{
  border:1px solid var(--stroke);
  border-radius: 18px;
  padding: 12px 14px;
  background: rgba(255,255,255,.05);
  margin-bottom: 10px;
}
.faq summary{ cursor:pointer; font-weight:950; }

.contact{ display:flex; flex-direction:column; gap:10px; }

.footer{
  max-width: var(--max);
  margin: 0 auto;
  padding: 26px 18px 40px;
  display:flex;
  gap:12px;
  justify-content:space-between;
  color: var(--muted);
}
.footer-links{ display:flex; gap:12px; }

/* Drawer */
.drawer{ position:fixed; inset:0; z-index:60; display:none; }
.drawer.open{ display:block; }
.drawer-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); }
.drawer-panel{
  position:absolute; right:0; top:0; height:100%; width:min(420px, 92vw);
  background: rgba(8,10,24,.82);
  border-left:1px solid var(--stroke);
  backdrop-filter: blur(16px);
  box-shadow: -30px 0 80px rgba(0,0,0,.40);
  display:flex; flex-direction:column;
}
[data-theme="light"] .drawer-panel{ background: rgba(255,255,255,.92); }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; padding: 14px; border-bottom:1px solid var(--stroke); }
.drawer-title{ font-weight:950; font-size:18px; }
.drawer-body{ padding: 14px; overflow:auto; }

.cart-items{ display:flex; flex-direction:column; gap:12px; }
.cart-item{ border:1px solid var(--stroke); background: rgba(255,255,255,.05); border-radius: 18px; padding: 12px; }
.cart-item-title{ font-weight:950; }
.cart-item-meta{ color: var(--muted); font-size: 12px; margin-top: 2px; }
.cart-item-top{ display:flex; justify-content:space-between; gap:10px; }
.cart-item-price{ font-weight:950; }
.cart-item-controls{ display:flex; align-items:center; gap:10px; margin-top:10px; }
.qtybtn{ width:34px; height:34px; border-radius: 12px; border:1px solid var(--stroke); background: rgba(255,255,255,.06); color: var(--text); cursor:pointer; font-weight:950; }
.qty{ min-width:24px; text-align:center; font-weight:950; }

.cart-summary{ margin-top: 14px; border:1px solid var(--stroke); border-radius: 18px; padding: 12px; background: rgba(255,255,255,.04); }
.row{ display:flex; justify-content:space-between; gap:10px; }
.row.total{ margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--stroke); font-size: 18px; }

.checkout{ margin-top: 14px; display:flex; flex-direction:column; gap:12px; }
.hint{ font-size: 12px; color: var(--muted); margin-top: 6px; }

/* Modal */
.modal{ position:fixed; inset:0; z-index:70; display:none; }
.modal.open{ display:block; }
.modal-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); backdrop-filter: blur(8px); }
.modal-card{ position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); width:min(520px, 92vw);
  border:1px solid var(--stroke); border-radius: 22px; padding: 18px;
  background: rgba(8,10,24,.90);
}
[data-theme="light"] .modal-card{ background: rgba(255,255,255,.92); }
.modal-close{ position:absolute; right:10px; top:10px; width:38px; height:38px; border-radius: 14px; border:1px solid var(--stroke); background: rgba(255,255,255,.06); color: var(--text); cursor:pointer; }
.divider{ height:1px; background: var(--stroke); margin: 12px 0; }

/* Lightbox */
.lightbox{ position:fixed; inset:0; z-index:80; display:none; }
.lightbox.open{ display:grid; place-items:center; background: rgba(0,0,0,.72); backdrop-filter: blur(10px); }
.lightbox img{ width:min(980px, 92vw); height:auto; border-radius: 18px; border:1px solid rgba(255,255,255,.18); box-shadow: 0 30px 100px rgba(0,0,0,.55); }
.lightbox-close{ position:fixed; top:18px; right:18px; width:44px; height:44px; border-radius: 16px; border:1px solid rgba(255,255,255,.22); background: rgba(0,0,0,.35); color:#fff; font-size: 28px; cursor:pointer; }