:root{
  --primary:#6a2b87;
  --secondary:#37657b;
  --primary-dark:#4a1d61;
  --secondary-dark:#265568;
  --text:#f1f3f9;
  --muted:#d5c8e8;
  --line:rgba(255,255,255,0.15);
  --ok:#3bb273;
  --bad:#ff6b6b;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);
  min-height:100vh;
}
a{color:inherit}

/* Layout */
.app{display:grid;grid-template-columns:280px 1fr;min-height:100vh}

/* Sidebar — primary purple */
.sidebar{
  background:var(--primary-dark);
  border-right:1px solid var(--line);
  padding:1rem;
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;gap:1rem;
}
.brand{display:flex;align-items:center;gap:.75rem}
.brand-logo{
  width:36px;height:36px;border-radius:10px;
  background:var(--secondary);
  display:grid;place-items:center;font-weight:800;
}
.brand-title{font-weight:800;letter-spacing:.2px}
.nav{display:flex;flex-direction:column;gap:.25rem}
.nav-link{
  padding:.6rem .75rem;border-radius:10px;
  text-decoration:none;color:var(--text);
  border:1px solid transparent;transition:.15s background;
}
.nav-link:hover{background:rgba(255,255,255,0.1);border-color:var(--line)}
.nav-link.active{background:var(--secondary);border-color:transparent}
.nav .icon{display:inline-flex;vertical-align:-3px;margin-right:.35rem}
.sidebar-foot{margin-top:auto;color:var(--muted)}

/* Content area */
.content{padding:1.25rem 1.5rem}
.lead{color:var(--muted)}

/* Cards — semi-transparent primary tint */
.card{
  background:rgba(74,29,97,0.75);
  border:1px solid var(--line);
  border-radius:16px;padding:1rem 1.25rem;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
  margin-bottom:1rem;
  backdrop-filter:blur(4px);
}

/* Grids */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.cols{columns:2;gap:2rem;padding-left:1rem}.cols li{break-inside:avoid;margin:.25rem 0}

/* Tiles — secondary teal tint */
.tile{
  text-decoration:none;display:block;
  border:1px solid var(--line);border-radius:16px;padding:1rem;
  background:rgba(55,101,123,0.45);
  backdrop-filter:blur(4px);
  transition:.2s transform,.2s background;
}
.tile:hover{transform:translateY(-3px);background:rgba(55,101,123,0.65)}
.tile-head h2{margin:.25rem 0}
.tile-list{color:var(--muted)}

/* Forms */
.form label{display:block;margin-bottom:.75rem;font-weight:600;color:var(--muted)}
.form input,.form select,.form textarea{
  width:100%;padding:.7rem .8rem;border-radius:12px;
  border:1px solid var(--line);
  background:rgba(0,0,0,0.25);color:var(--text);
}
.actions{display:flex;gap:.75rem;flex-wrap:wrap}

/* Buttons — primary purple, secondary on hover */
button,.button{
  appearance:none;border:none;cursor:pointer;
  font-weight:700;padding:.7rem 1.25rem;border-radius:999px;
  background:var(--primary);color:white;
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;
  transition:.2s background;
}
button:hover,.button:hover{background:var(--secondary)}
.button.ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
.button.ghost:hover{background:rgba(255,255,255,0.1)}

/* Misc */
.muted{color:var(--muted)}
.site-footer{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line);color:var(--muted)}
.product{border:1px dashed var(--line);border-radius:12px;padding:.75rem}
.product-thumb{height:120px;border-radius:10px;border:1px solid var(--line);background:rgba(0,0,0,0.2)}
.skeleton{background:linear-gradient(90deg,rgba(106,43,135,0.4),rgba(55,101,123,0.4),rgba(106,43,135,0.4));background-size:200% 100%;animation:s 1.5s infinite}
@keyframes s{0%{background-position:200% 0}100%{background-position:-200% 0}}
.hours-table{width:100%;border-collapse:collapse;margin-top:.5rem}
.hours-table td{padding:.45rem .5rem;border-bottom:1px solid var(--line)}
.hours-table tr:last-child td{border-bottom:none}
.hours-table td:first-child{font-weight:600;width:120px}
.field-hint{display:block;font-size:.75rem;color:var(--muted);margin-top:.25rem;font-weight:400}
.form-status{margin-top:.5rem;min-height:1.25rem}
.form-status.ok{color:var(--ok);font-weight:700}
.form-status.bad{color:var(--bad);font-weight:700}

/* ── Coming Soon card ── */
.coming-soon-card{border-color:rgba(255,200,80,0.35);background:rgba(74,29,97,0.85)}
.coming-soon-badge{display:inline-block;background:linear-gradient(90deg,#f0a500,#f7d000);color:#1a0a00;font-weight:800;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;padding:.3rem .85rem;border-radius:999px;margin-bottom:.75rem}

/* ── Portfolio slideshow ── */
.portfolio-slideshow{position:relative;border-radius:14px;overflow:hidden;background:rgba(0,0,0,0.25);margin-top:.75rem;min-height:260px;display:flex;align-items:center;justify-content:center}
.portfolio-slideshow .slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;display:flex;align-items:center;justify-content:center;padding:.5rem}
.portfolio-slideshow .slide.active{opacity:1}
.portfolio-slideshow .slide img{max-width:100%;max-height:340px;object-fit:contain;border-radius:10px;pointer-events:none;-webkit-user-drag:none;user-select:none}
.slideshow-dots{display:flex;justify-content:center;gap:.5rem;margin-top:.6rem}
.dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.3);transition:.2s background}
.dot.active{background:var(--secondary)}

/* ── Portfolio grid ── */
.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;margin-top:.75rem}
.portfolio-item{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:rgba(0,0,0,0.2)}
.img-protect{position:relative;overflow:hidden;line-height:0}
.img-protect img{width:100%;height:180px;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none;user-select:none}
.img-protect::after{content:'';position:absolute;inset:0;z-index:1}
.portfolio-item-label{padding:.4rem .75rem;font-size:.82rem;color:var(--muted);margin:0}
.portfolio-section-label{margin:1rem 0 .4rem;font-size:.85rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}

/* ── PDF cards ── */
.pdf-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.75rem;margin-top:.5rem}
.pdf-card{display:flex;align-items:center;gap:.75rem;padding:.75rem;border:1px solid var(--line);border-radius:12px;background:rgba(0,0,0,0.2);text-decoration:none;color:var(--text);transition:.15s background}
.pdf-card:hover{background:rgba(255,255,255,0.1)}
.pdf-icon{font-size:1.4rem;flex-shrink:0}

/* ── Copyright notice ── */
.copyright-notice{background:rgba(255,107,107,0.12);border:1px solid rgba(255,107,107,0.3);border-radius:10px;padding:.75rem 1rem;font-size:.88rem;margin-top:.75rem;line-height:1.5}

@media(max-width:980px){
  .app{grid-template-columns:1fr}
  .sidebar{position:static;height:auto}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .cols{columns:1}
}