/* ================================
   QuantumPlaylist – Greyscale UI
   Palette: text #646464, accent #ccc, bg #fff
   ================================ */

/* --- Root tokens --- */
:root{
  --text: #646464;
  --muted: #8a8a8a;
  --accent: #ccc;
  --line: #e6e6e6;
  --bg: #fff;
  --bg-soft: #fafafa;
  --radius: 14px;
  --shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* --- Reset / base --- */
*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0;
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  line-height:1.5; color:var(--text); background:var(--bg);
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.muted{ color:var(--muted); }

/* --- Containers --- */
.container{ max-width:1100px; margin:0 auto; padding:0 20px; }
.container-fluid{ width:100%; max-width:100%; margin:0; padding:0 2rem; }

/* --------------------------------
   Header / Navigation
   -------------------------------- */
.header{
  position:sticky; top:0; z-index:100;
  background:var(--bg);
}
.header .container{ max-width:none; margin:0; padding:0 40px; min-height:100px; }

.header-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 40px;
  box-shadow:0 4px 14px rgba(0,0,0,.06);
}
.header span {
    font-size:21px;
    margin-left:-17px;
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:600; margin-right:auto; }
.logo-wrap {
  position: relative;
  width: 55px;
  height: 55px;
  z-index:-1;
}
.logo-wrap .logo {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  transition: opacity 0.4s ease;
}
.logo.after { opacity: 0; }
.brand:hover .logo.after { opacity: 1; }
.brand:hover .logo.before { opacity: 0; }
.header span:hover { opacity: 1; }
.header span:hover { opacity: 0.5; }

.nav{
  display:flex; align-items:center; justify-content:flex-end; gap:16px; flex:0 0 auto;
}

/* let op: .btn is hier verwijderd om dubbele definities te voorkomen */
.nav a,
.dropbtn{
  display:inline-block; text-align:center;
  color:var(--text); font-weight:500; background:var(--bg);
  border:1px solid var(--line); border-radius:8px;
  padding:.6rem 1.1rem; transition:background .2s, color .2s, border-color .2s, transform .2s;
  min-width:130px;
}
.nav a:hover,
.dropbtn:hover{
  background:#eee; border-color:var(--accent); transform:translateY(-2px);
}

/* Dropdown */
.dropdown{ position:relative; }
.dropdown-content{
  display:none; position:absolute; top:calc(100% + 12px); left:0;
  background:var(--bg); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow); min-width:160px; padding:6px 0; z-index:200;
}
.dropdown-content a{ display:block; padding:10px 14px; transition:background .2s, color .2s; }
.dropdown-content a:hover{ background:#efefef; }
.dropdown:hover .dropdown-content{ display:block; }

/* --------------------------------
   Hero
   -------------------------------- */
.hero{ padding:225px 0; text-align:center; background:var(--bg-soft); }
.hero h1{ font-size:30px; line-height:1.1; margin:0 0 14px; color:var(--text); }
.hero h1 .highlight{ color:var(--text); }
.hero p{ color:var(--muted); max-width:640px; margin:0 auto 32px; font-size:1.1rem; }
.hero.login,
.hero.pricing,
.hero.register {
  padding: 15px 0;
}

/* --------------------------------
   Cards / Grid / Tables / Notices
   -------------------------------- */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px;
}

.card{
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius);
  padding:1rem; box-shadow:var(--shadow);
  transition:transform .2s, box-shadow .2s;
}
.card:hover{ transform:translateY(-3px); box-shadow:0 6px 18px rgba(0,0,0,.08); }
.card h2{ font-size:1.4rem; margin:.2rem 0 .6rem; color:var(--text); }
.card-title{ font-weight:600; margin-bottom:.4rem; color:var(--text); }

.table{ width:100%; border-collapse:collapse; font-size:.95rem; }
.table th,.table td{ border-bottom:1px solid var(--line); padding:.6rem .4rem; text-align:left; }
.table th{ background:#f7f7f7; color:var(--muted); font-weight:600; }
.table tr:hover{ background:#f6f6f6; }

.notice{
  background:#fff8f0; border:1px solid #f1ddc2; color:#6b4a2b;
  padding:.75rem 1rem; border-radius:var(--radius); margin-bottom:1rem;
}

/* Avatars (shared) */
.avatar{
  width:56px; height:56px; border-radius:50%; object-fit:cover; box-shadow:var(--shadow);
}

/* --------------------------------
   Features section
   -------------------------------- */
.features{ padding:70px 0; }

/* --------------------------------
   Tabs
   -------------------------------- */
.tabs{ display:flex; gap:1rem; margin:1rem 0; }
.tab{
  padding:.5rem 1rem; border:1px solid var(--line); border-radius:8px; cursor:pointer;
  background:#fafafa; transition:background .2s, color .2s, border-color .2s;
}
.tab:hover{ background:#efefef; }
.tab.is-active{ background:#e6e6e6; color:#222; border-color:var(--accent); }
.tabpane{
  display:none; background:var(--bg); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:1.5rem;
}
.tabpane.is-active{ display:block; }

/* --------------------------------
   Dashboard shell + sidebar
   -------------------------------- */
.qp-shell{
  display:grid;
  grid-template-columns:260px 1fr;
  background:#fdfdfd;
}
.qp-main{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.qp-content{
  padding:20px;
  background:#fff;
}

/* === SIDEBAR STRUCTUUR (STICKY TEGEN HEADER) === */
.qp-sidebar {
  background: var(--bg);
  border-right: 1px solid var(--line);
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  box-shadow: 2px 4px 12px rgba(0,0,0,.05);
  width: 230px;
  padding: 1.6rem 1rem 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: sticky;
  top: var(--header-height, 60px);
  height: calc(85vh - var(--header-height, 60px));
  overflow: hidden;
  z-index: 10;
}

/* scrollbare binnenkant */
.sb-inner, .sb-nav {
  flex: 1 1 auto;
  overflow-y: auto;
  padding-bottom: 5rem;
}

.qp-sidebar>.sb-inner::-webkit-scrollbar { width: 6px; }
.qp-sidebar>.sb-inner::-webkit-scrollbar-thumb {
  background: #d1d1d1;
  border-radius: 4px;
}

/* === SIDEBAR NAVIGATIE === */
.sb-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1rem;
}
.sb-nav {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.sb-link, .sb-ext {
  display: block;
  padding: .55rem .8rem;
  border-radius: 6px;
  color: var(--text);
  transition: background .15s, color .15s;
}
.sb-link:hover, .sb-ext:hover { background: #efefef; }
.sb-link.is-active {
  background: #d9d9d9;
  color: #222;
  font-weight: 600;
}
.sb-sep {
  border-bottom: 1px solid var(--line);
  margin: .6rem 0;
}

/* === TOGGLE BUTTON === */
.sb-toggle {
  margin-top: 1.2rem;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 1.3rem;
  cursor: pointer;
  transition: color .2s;
}
.sb-toggle:hover { color: #2f2f2f; }

/* === TOKEN BLOK (ALTJD ZICHTBAAR, STICKY ONDERIN) === */
.sb-tokens {
  position: sticky;
  bottom: 0;
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  padding: .8rem;
  text-align: center;
  border-radius: var(--radius) var(--radius) 0 0;
  z-index: 15;
}

/* === TOKEN BLOK ELEMENTEN === */
.token-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.token-count {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.2;
}
.token-label {
  font-size: .8rem;
  color: var(--muted);
  margin-top: .1rem;
}
.token-meter {
  background: var(--line);
  height: 6px;
  border-radius: 3px;
  margin-top: .6rem;
  overflow: hidden;
}
.token-bar {
  height: 100%;
  background: var(--accent);
  transition: width .4s ease;
}
.token-extra {
  display: flex;
  justify-content: space-around;
  margin-top: .5rem;
}
.token-link {
  font-size: .8rem;
  text-decoration: none;
  color: var(--accent);
}
.token-link.muted { color: var(--muted); }
.token-link:hover { text-decoration: underline; }

/* Role switcher */
.role-switch{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  background:#fcfcfc; border:1px solid var(--accent); border-radius:10px;
  padding:.5rem .8rem; box-shadow:inset 0 0 6px rgba(0,0,0,.05);
  transition:box-shadow .25s, border-color .25s;
}
.role-switch:hover{ box-shadow:inset 0 0 6px rgba(0,0,0,.09); }
.role-labels{ display:flex; gap:.5rem; font-size:.9rem; font-weight:600; }
.role-labels span{ color:#b5b5b5; transition:color .25s; }
.role-labels span.on{ color:var(--text); }

/* Toggle switch */
.switch{ position:relative; display:inline-block; width:46px; height:24px; }
.switch input{ opacity:0; width:0; height:0; }
.slider{
  position:absolute; inset:0; cursor:pointer; background:#d0d0d0; border-radius:24px; transition:.3s;
}
.slider:before{
  content:""; position:absolute; left:3px; bottom:3px; width:18px; height:18px;
  background:#fff; border-radius:50%; transition:.3s;
}
.switch input:checked + .slider{ background:#9c9c9c; }
.switch input:checked + .slider:before{ transform:translateX(22px); }

/* Topbar */
.qp-topbar{
  background:var(--bg); border-bottom:1px solid var(--line);
  padding:14px 20px; display:flex; justify-content:space-between; align-items:center;
  box-shadow:var(--shadow);
}
.qp-topbar h1{ margin:0; font-size:1.3rem; color:var(--text); }
.user-mini{ display:flex; align-items:center; gap:10px; }
.name{ font-weight:600; color:var(--text); }
.mail{ color:var(--muted); font-size:.85rem; }

/* KPI styles */
.kpi-title{ color:var(--muted); font-size:.9rem; }
.kpi-value{ font-size:1.6rem; font-weight:700; color:var(--text); }

/* --------------------------------
   Dashboard overview layout
   -------------------------------- */
#overview{
  display:grid;
  grid-template-columns:2fr 1fr;
  grid-template-rows:auto 1fr;
  grid-template-areas:
    "kpi quality"
    "subs quality";
  row-gap:1rem;          /* vertical gap tussen KPI en submissions */
  column-gap:1.5rem;     /* horizontale gap */
  align-items:start;
}

/* KPI cards */
.cards.kpi{
  grid-area:kpi;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1rem;
}

/* Quality card column */
.cards.quality{
  grid-area:quality;
  align-self:start;
}

/* Submissions panel – strak onder KPI, geen geforceerde hoogte */
.submissions-section{
  grid-area:subs;
  display:block;
  background:var(--bg);
  border-radius:12px;
  padding:1.2rem;
  box-shadow:0 0 10px rgba(0,0,0,.08);
}
.submissions-section table{ width:100%; border-collapse:collapse; }
.submissions-section th,
.submissions-section td{
  padding:.5rem .7rem;
  text-align:left;
  border-bottom:1px solid #d1d1d1;
  font-size:.9rem;
}

/* Quality card + radial */
.card.quality{
  background:var(--bg); box-shadow:0 0 14px rgba(0,0,0,.08);
  border-radius:14px; padding:1.8rem; text-align:center; min-height:280px;
}
.metric-center{ display:grid; place-items:center; gap:1rem; }
.label{ font-size:1rem; font-weight:600; color:#000; }
.mini-stats{ list-style:none; padding:0; margin:1rem 0 0; text-align:left; }
.mini-stats li{
  font-size:.9rem; color:#000;
  border-bottom:1px solid #c3c3c3; padding:.25rem 0;
}

.radial{ width:160px; height:160px; }
.radial .bg{ fill:none; stroke:#ddd; stroke-width:3; }
.radial .fg{ fill:none; stroke:#646464; stroke-width:4; stroke-linecap:round; }
.radial .val{ font-size:10px; fill:#777; text-anchor:middle; }

/* External sidebar links */
.sb-ext{ color:var(--text); }
.sb-ext + .sb-ext{ margin-top:.25rem; }

/* --------------------------------
   Pricing
   -------------------------------- */
.pricing h1{ font-size:42px; margin-bottom:10px; color:var(--text); }
.pricing p{ color:var(--muted); margin-bottom:50px; }
.pricing .card ul{ list-style:none; padding:0; margin:20px 0; text-align:left; }
.pricing .card ul li{
  padding:6px 0; border-bottom:1px solid #f2f2f2; color:var(--text);
}
.price{ font-size:1.6rem; font-weight:700; margin:20px 0; color:var(--text); }
.price span{ font-size:1rem; color:var(--muted); }
.basic-plan{ background:#fafafa; border:1px solid var(--line); transition:transform .2s, box-shadow .2s; }
.premium-plan{
  background:#fff; border:2px solid #dedede; box-shadow:0 8px 30px rgba(0,0,0,.08);
  position:relative; overflow:hidden; transition:transform .3s, box-shadow .3s;
}
.premium-plan h2{ color:var(--text); font-weight:700; margin-bottom:16px; }
.premium-plan::before{
  content:"PREMIUM"; position:absolute; top:14px; right:-40px; transform:rotate(45deg);
  background:#bdbdbd; color:#fff; font-size:.75rem; font-weight:600; padding:4px 40px;
  border-radius:2px; box-shadow:0 4px 8px rgba(0,0,0,.1);
}
.premium-plan:hover{ transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,.15); }
.addons{ text-align:center; }
.addons h2{ font-size:1.8rem; margin-bottom:30px; color:var(--text); }

/* Billing switch */
.billing-switch{
  display:flex; justify-content:center; align-items:center;
  gap:14px; margin-bottom:40px;
}
.switch-label{ font-weight:500; color:var(--muted); transition:color .2s; }
.switch-label.active{ color:var(--text); font-weight:600; }
.switch small{ font-size:.8rem; }

/* --------------------------------
   Blog
   -------------------------------- */
.blog-page h1{ font-size:42px; margin-bottom:10px; color:var(--text); }
.blog-page .intro{ color:var(--muted); margin-bottom:40px; font-size:1.1rem; text-align:center; }

.blog-search{
  display:flex; justify-content:center; align-items:center;
  gap:10px; margin-bottom:40px;
}
.blog-search input{
  padding:10px 14px; border:1px solid var(--line); border-radius:8px; width:280px;
  box-shadow:var(--shadow); transition:border-color .2s, box-shadow .2s;
}
.blog-search input:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(0,0,0,.05);
}
.blog-search button{
  border:1px solid var(--line); background:#f3f3f3; color:#222;
  border-radius:8px; padding:10px 16px;
  cursor:pointer; box-shadow:var(--shadow); transition:transform .2s, background .2s;
}
.blog-search button:hover{ background:#e9e9e9; transform:translateY(-2px); }

.blog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:24px;
}
.blog-card{
  display:flex; flex-direction:column; overflow:hidden; border-radius:var(--radius);
  background:var(--bg); border:1px solid var(--line); box-shadow:var(--shadow);
  transition:transform .25s, box-shadow .25s;
}
.blog-card:hover{ transform:translateY(-4px); box-shadow:0 10px 30px rgba(0,0,0,.08); }
.blog-thumb{ width:100%; height:180px; object-fit:cover; }
.blog-content{ padding:20px; flex:1; }
.blog-content h2{ font-size:1.3rem; margin-bottom:10px; color:var(--text); }
.blog-content p{ color:var(--muted); font-size:.95rem; margin-bottom:20px; }

.blog-categories{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:10px; margin-bottom:25px;
}
.cat-btn{
  border:1px solid var(--line); background:#fff; color:var(--text);
  border-radius:8px; padding:8px 16px; font-weight:500; cursor:pointer;
  transition:background .2s, transform .2s, border-color .2s; box-shadow:var(--shadow);
}
.cat-btn:hover{ background:#f0f0f0; transform:translateY(-1px); }
.cat-btn.active{ background:#e6e6e6; border-color:var(--accent); }

/* --------------------------------
   FAQ
   -------------------------------- */
.faq-hero{ padding:80px 0 40px; background:#f0f0f0; color:#222; }
.faq-hero h1{ font-size:2.4rem; margin-bottom:.5rem; }
.faq-hero p{ color:#555; font-size:1rem; }

.faq-main{ background:#fff; padding:60px 0; }
.faq-item{
  border:1px solid var(--line); border-radius:10px; margin-bottom:15px;
  padding:1rem 1.2rem; transition:background .25s, border-color .25s;
  background:#fafafa;
}
.faq-item[open]{ background:#f0f0f0; border-color:#bbb; }
.faq-item summary{
  font-weight:600; font-size:1.1rem; cursor:pointer; list-style:none;
}
.faq-item p{ margin-top:10px; font-size:.95rem; color:#333; }

.faq-cta{ background:#f8f8f8; padding:60px 0; }
.faq-cta h2{ font-size:1.8rem; margin-bottom:.5rem; }
.faq-cta p{ color:#444; margin-bottom:1rem; }

/* --------------------------------
   How-to section
   -------------------------------- */
.how-to-section{ background:#f9f9f9; padding:80px 0; }
.howto-subtitle{ font-size:1rem; color:#555; margin-bottom:3rem; }
.howto-flex{
  display:flex; justify-content:space-between; align-items:stretch; flex-wrap:nowrap;
  gap:1.5rem; max-width:1200px; margin:0 auto;
}
.howto-step{
  flex:1 1 0; background:#fff; border:1px solid #e0e0e0; border-radius:12px;
  padding:2rem 1.5rem; text-align:center; transition:transform .3s, box-shadow .3s; position:relative;
}
.howto-step:hover{ transform:translateY(-6px); box-shadow:0 8px 18px rgba(0,0,0,.1); }
.step-icon{
  width:55px; height:55px; margin:0 auto 1rem; border-radius:50%; background:#111; color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.2rem;
}
.howto-step h3{ font-size:1.1rem; margin-bottom:.6rem; }
.howto-step p{ font-size:.95rem; color:#444; }
@media (max-width:900px){
  .howto-flex{ flex-wrap:wrap; }
  .howto-step{ flex:1 1 100%; }
}

/* --------------------------------
   Homepage showcase
   -------------------------------- */
.fullwidth{
  background:#fff; color:#000; padding:60px 0;
  box-shadow:0 0 10px rgba(0,0,0,.08);
}
.showcase-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:2rem;
}
.showcase-item img{
  width:100%; border-radius:12px; object-fit:cover;
}
.showcase-item .info{ padding:1rem 0; text-align:center; }

/* --------------------------------
   Footer
   -------------------------------- */
.white-footer{
  margin-top:4rem; background:#fff; border-top:1px solid var(--line);
  padding-top:2rem; padding-bottom:2rem;
}
.footer-container{
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1.2fr 1fr 1fr;
  align-items:start; gap:2rem; padding:0 1rem;
}
.footer-brand{ display:flex; flex-direction:column; align-items:flex-start; }
.footer-links h4,.footer-social h4{
  font-size:.95rem; font-weight:600; margin-bottom:.7rem; color:#000;
}
.footer-links ul{ list-style:none; margin:0; padding:0; }
.footer-links li{ margin-bottom:.4rem; }
.footer-links a{ color:#444; transition:color .2s; }
.footer-links a:hover{ color:#646464; }
.footer-social p{ font-size:.85rem; color:#444; margin-bottom:.6rem; }
.footer-social a{ color:#444; transition:color .2s; }
.footer-social a:hover{ color:#646464; }
.social-icons{
  display:flex; gap:.9rem; margin-top:.5rem;
  align-items:center;
}
.social-icons a{
  font-size:1.1rem; width:34px; height:34px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#f6f6f6; box-shadow:0 1px 3px rgba(0,0,0,.08);
  transition:all .25s;
}
.social-icons a:hover{ background:#000; color:#fff; transform:translateY(-2px); }
.footer-bottom{
  border-top:1px solid var(--line); margin-top:2.5rem;
  text-align:center; padding-top:1.2rem;
}
.footer-bottom p{ font-size:.8rem; color:#666; letter-spacing:.3px; }

@media (max-width:800px){
  .footer-container{ grid-template-columns:1fr; text-align:center; }
  .footer-brand,.footer-links,.footer-social{ align-items:center; }
  .social-icons{ justify-content:center; }
}
.footer-nav .btn {
  background: transparent;
  color: #444;
  border: none;
  font-weight: 500;
  padding: 0.4rem 0.8rem;
  transition: color 0.2s ease;
}

/* --------------------------------
   Top Curators page
   -------------------------------- */
.top-curators{ padding:80px 0; text-align:center; }
.top-curators h1{ font-size:42px; margin-bottom:10px; color:var(--text); }
.top-curators .intro{ color:var(--muted); font-size:1.1rem; margin-bottom:40px; }
.curators-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.6rem;
}
.curator-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:1.5rem 1rem;
  transition:transform .2s, box-shadow .2s;
}
.curator-card:hover{ transform:translateY(-4px); box-shadow:0 10px 24px rgba(0,0,0,.1); }
.curator-card .avatar{
  width:80px; height:80px; border-radius:50%; object-fit:cover; margin-bottom:.8rem;
}
.curator-card h2{ margin:.4rem 0; font-size:1.1rem; font-weight:600; }
.curator-card p{ color:var(--muted); margin:.3rem 0; font-size:.9rem; }

/* --------------------------------
   Buttons (generic)
   -------------------------------- */
.btn{
  border:1px solid var(--line);
  background:#fff;
  border-radius:8px;
  padding:.5rem .8rem;
  cursor:pointer;
}
.btn:active{ transform:translateY(0); }

/* --------------------------------
   Responsive for sidebar shell
   -------------------------------- */
@media (max-width:920px){
  .qp-shell{ grid-template-columns:70px 1fr; }
  .qp-sidebar{ padding:8px; }
  .sb-nav .sb-link{ font-size:0; line-height:0; padding:10px; }
  .sb-nav .sb-link::before{ content:"•"; font-size:18px; }
  .brand span, .role-labels{ display:none; }
}
@media (max-width:900px){
  .qp-sidebar{
    position:relative; top:0; width:100%;
    border-radius:0; box-shadow:none; border-right:none; border-bottom:1px solid var(--line);
  }
  .qp-sidebar>.sb-inner{ position:static; max-height:none; overflow:visible; }
}

/* --------------------------------
   INDEX PAGE FEATURES
   -------------------------------- */
.featured-banner {
  background: #fff;
  padding: 4rem 0;
  color: #646464;
  text-align: center;
}

.featured-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 2rem;
}

.featured-item {
  width: 220px;
  aspect-ratio: 1 / 1;
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  transition: transform 0.3s ease;
  background: #f7f7f7;
  flex: 0 0 auto;
}

.featured-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.featured-center {
  transform: translateY(-20px);
  z-index: 1;
}

.featured-item:hover {
  transform: scale(1.05);
}

.featured-cover {
  position: relative;
  width: 100%;
  height: 100%;
}

.featured-cover .overlay {
  position: absolute;
  inset: 0;
  background: #ccc;
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}

.featured-item:hover .overlay {
  opacity: 1;
}

.overlay h3 {
  font-size: 1rem;
  margin-bottom: 0.3rem;
}

.overlay p {
  font-size: 0.8rem;
  margin-bottom: 0.6rem;
}

.actions {
  display: flex;
  gap: 0.5rem;
}

/* --------------------------------
   REGISTER
   -------------------------------- */
.register-form input {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 1rem;
}

.register-form label {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.3rem;
  display: block;
}

/* --------------------------------
   Breadcrumb
   -------------------------------- */
.breadcrumb {
  font-size:0.9rem;
  margin-left:5px;
  text-align:left;
  margin-top:-40px;
}
.breadcrumb ol {
  list-style:none; padding:0; margin:0;
  display:flex; flex-wrap:wrap;
}
.breadcrumb a { color:#646464; text-decoration:none; }
.breadcrumb a:hover { text-decoration:underline; }
.breadcrumb li::after { content:"›"; margin:0 6px; color:#aaa; }
.breadcrumb li:last-child::after { content:""; }

/* --------------------------------
   INDEX ABOUT
   -------------------------------- */

.about-section { padding: 5rem 0; background:#fff; color:#444; }
.about-row { align-items:center; gap:3rem; margin-bottom:4rem; }
.about-row img { width:100%; border-radius:14px; box-shadow:0 8px 24px rgba(0,0,0,.06); }
.section-divider { width:80%; margin:4rem auto; border:0; height:1px; background:#eee; }
.about-summary p { max-width:700px; margin:0 auto 1rem; }
.col img { max-width:500px; box-shadow:4px 8px 10px rgba(0,0,0,.3); }

.hover-image-wrapper {
  position: relative;
}

.hover-image-wrapper {
  position: relative;
}

.hover-img {
  position: absolute;
  right: -420px;
  top:110px;
  transform: translateY(-50%);
  opacity: 0.2;
  width: 800px; 
  transition: transform .5s ease, opacity .4s ease;
}

.hover-img:hover {
  transform: translateY(-50%) scale(0.98);
}