@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600..900&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --bg:#0B0C1F;
  --bg-soft:#12142e;
  --panel:rgba(255,255,255,.045);
  --panel-border:rgba(255,255,255,.10);
  --violet:#8B5CFF;
  --coral:#FF5A7A;
  --sunburst:#FFD23F;
  --text:#F2F2F7;
  --text-dim:rgba(242,242,247,.62);
  --radius:20px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Space Grotesk', sans-serif;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(600px 420px at 85% -5%, rgba(139,92,255,.20), transparent 60%),
    radial-gradient(500px 400px at -5% 30%, rgba(255,90,122,.16), transparent 60%),
    radial-gradient(500px 400px at 100% 80%, rgba(255,210,63,.10), transparent 60%);
  background-attachment:fixed;
}
a{color:inherit; text-decoration:none;}
.display{font-family:'Fraunces', serif; font-optical-sizing:auto;}
.mono{font-family:'JetBrains Mono', monospace;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
::placeholder{color:rgba(242,242,247,.35);}

/* glass panel */
.glass{
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:var(--radius);
  backdrop-filter:blur(14px);
}

/* header */
header{position:sticky; top:0; z-index:50; background:rgba(11,12,31,.75); backdrop-filter:blur(14px); border-bottom:1px solid var(--panel-border);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:16px 32px;}
.logo{display:flex; align-items:center; gap:9px; font-weight:700; font-size:19px;}
.logo img{height:34px; width:auto; filter:drop-shadow(0 0 12px rgba(139,92,255,.5));}
nav.links{display:flex; gap:30px; font-size:14.5px; font-weight:500;}
nav.links a{position:relative; padding:4px 0; color:var(--text-dim);}
nav.links a:hover{color:#fff;}
nav.links a::after{content:''; position:absolute; left:0; bottom:-2px; height:2px; width:0%; background:linear-gradient(90deg,var(--violet),var(--coral)); transition:width .25s ease;}
nav.links a:hover::after{width:100%;}
.nav-cta{display:flex; align-items:center; gap:14px;}
.icon-btn{width:38px; height:38px; border-radius:50%; border:1.5px solid var(--panel-border); display:flex; align-items:center; justify-content:center; font-size:15px; color:var(--text-dim); position:relative;}
.icon-btn .dot{position:absolute; top:-2px; right:-2px; width:16px; height:16px; border-radius:50%; background:var(--coral); font-size:9px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700;}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 24px; border-radius:100px; font-weight:600; font-size:14.5px; border:none; cursor:pointer; font-family:'Space Grotesk',sans-serif; transition:transform .2s ease, box-shadow .2s ease;}
.btn.glow{background:linear-gradient(90deg,var(--violet),var(--coral)); color:#fff; box-shadow:0 0 24px rgba(139,92,255,.35);}
.btn.glow:hover{transform:translateY(-2px); box-shadow:0 0 32px rgba(139,92,255,.55);}
.btn.outline{background:transparent; color:var(--text); border:1.5px solid var(--panel-border);}
.btn.outline:hover{border-color:var(--violet);}
.btn.block{width:100%;}
.btn:disabled{opacity:.5; cursor:not-allowed;}

/* footer */
footer{border-top:1px solid var(--panel-border); padding:44px 0 24px; margin-top:80px; color:var(--text-dim);}
.foot-grid{display:grid; grid-template-columns:1.3fr repeat(3,1fr); gap:30px; padding-bottom:30px; border-bottom:1px solid var(--panel-border);}
.foot-logo{display:flex; align-items:center; gap:10px; color:#fff; font-weight:700; font-size:18px; margin-bottom:12px;}
.foot-logo img{height:28px;}
.foot-grid p{font-size:13.5px; line-height:1.6; max-width:260px;}
.foot-grid h5{color:#fff; font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px; font-family:'JetBrains Mono',monospace;}
.foot-grid ul{list-style:none;}
.foot-grid li{margin-bottom:9px; font-size:14px;}
.foot-grid a:hover{color:#fff;}
.foot-bottom{display:flex; justify-content:space-between; padding-top:22px; font-size:12.5px; flex-wrap:wrap; gap:10px;}

/* page head */
.page-head{padding:40px 0 28px;}
.page-eyebrow{font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--sunburst); margin-bottom:8px;}
.page-head h1{font-family:'Fraunces',serif; font-weight:800; font-size:clamp(28px,3.8vw,44px);}

/* forms */
.field{margin-bottom:18px;}
.field label{display:block; font-size:13px; font-weight:600; margin-bottom:7px; color:var(--text-dim);}
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px; border-radius:12px; font-family:'Space Grotesk',sans-serif; font-size:14.5px;
  background:rgba(255,255,255,.05); border:1.5px solid var(--panel-border); color:var(--text);
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--violet);}
.field-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.field.full{grid-column:1/-1;}

/* product card */
.p-card{border-radius:18px; overflow:hidden; transition:transform .25s ease, box-shadow .25s ease;}
.p-card:hover{transform:translateY(-6px); box-shadow:0 24px 44px rgba(139,92,255,.18);}
.p-img{height:190px; display:flex; align-items:center; justify-content:center; font-size:58px; position:relative; background:linear-gradient(150deg, rgba(139,92,255,.22), rgba(139,92,255,.04));}
.p-badge{position:absolute; top:14px; left:14px; font-family:'JetBrains Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; padding:5px 11px; border-radius:100px; font-weight:700; color:#0B0C1F;}
.p-body{padding:18px 18px 20px;}
.p-cat{font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); margin-bottom:8px;}
.p-name{font-weight:600; font-size:15.5px; margin-bottom:10px; line-height:1.35; min-height:42px;}
.p-row{display:flex; align-items:center; justify-content:space-between;}
.p-price{font-family:'JetBrains Mono',monospace; font-weight:700; font-size:15px;}
.p-was{font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--text-dim); text-decoration:line-through; margin-left:6px;}

.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}

.alert{padding:13px 16px; border-radius:12px; font-size:14px; margin-bottom:20px;}
.alert.error{background:rgba(255,90,122,.12); border:1px solid rgba(255,90,122,.35); color:#ffb3c2;}
.alert.success{background:rgba(139,92,255,.12); border:1px solid rgba(139,92,255,.35); color:#c9b6ff;}

table{width:100%; border-collapse:collapse;}
th{text-align:left; font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); padding:12px 16px; background:rgba(255,255,255,.03);}
td{padding:14px 16px; border-top:1px solid var(--panel-border); font-size:14px;}

.reveal{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

@media (max-width:920px){
  nav.links{display:none;}
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .field-grid{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .grid-3, .grid-4{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;}
}