:root{
  --bg:#0b0d10;
  --bg-alt:#101318;
  --card:#131823;
  --muted:#8aa0b2;
  --text:#e5eef7;
  --accent:#6fb2ff;
  --accent-2:#9ef7d0;
  --border:#1f2633;
  --slider-min: 40px;   /* never smaller than this */
  --slider-max: 385px;   /* never larger than this (desktop target) */
  --slider-vw: 22vw;     /* how quickly it grows with viewport */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#0b0d10 0%, #0e1217 60%, #0b0d10 100%);
}

/* layout */
.container{width:min(1100px,92%); margin-inline:auto}
.row{display:flex; align-items:center; gap:.75rem}
.between{justify-content:space-between}
.narrow{width:min(820px,100%);}

/* top bar */
.topbar{
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(1.2) blur(6px);
  background:rgba(11,13,16,.7);
  border-bottom:1px solid var(--border);
}
.topbar .container{padding:.75rem 0; justify-content:space-between}
.brand{display:flex; align-items:center; gap:.75rem}
/*
.logo{
  width:38px; height:38px; border-radius:10px;
  display:grid; place-items:center;
  font-weight:800; color:#0b0d10; background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 10px 24px rgba(111,178,255,.2);
}
*/
.logo img {
  height: 38px;  /* match current logo height */
  width: auto;   /* keep proportions */
  display: block;
  background-color: lightblue;
  border-radius: 25px;
}


.brand-text strong{display:block; letter-spacing:.3px}
.brand-text span{font-size:.78rem; color:var(--muted)}
.nav a{color:var(--muted); text-decoration:none; margin-left:1rem}
.nav a:hover{color:var(--text)}

/* banner */
.banner{background:#0e1420; border-bottom:1px solid var(--border)}
.banner .container{padding:.65rem 0}
.banner-dot{
  width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #9ef7d0, #36d39b 60%, #1b8e6b 80%);
  box-shadow:0 0 12px rgba(158,247,208,.5);
}
.banner-text{color:#cde7f7}

/* hero */
.hero{padding:1rem 0 0.5rem}
.hero-grid{
  display:grid; gap:1rem;
  grid-template-columns:  .6fr 1.1fr;
}
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr}
}

/* ---------------------- */
/* =========================
   Virelia – Slider styles
   Drop‑in replacement
   ========================= */

/* --- Frame sizing (desktop + responsive) --- */
.slider {
  width: clamp(var(--slider-min), var(--slider-vw), var(--slider-max));
  max-width: 100%;
  height: 75% ;            /* image height */
  margin: 0 auto;
  position: relative;
  background: var(--card, #0d1117);
  border: 1px solid var(--border, #222b36);
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 2 / 3;
}

/* The area that holds all slides. 
   We use an aspect-ratio that matches your portrait images (2:3). */
.slides { 
  object-fit: contain;
  aspect-ratio: 2 / 3;
}

/* Each slide is layered on top of the others for a cross‑fade effect. */
.slide {
  position: absolute;
  inset: 0;                       /* fill the .slides box */
  opacity: 0;
  transition: opacity .45s ease;  /* fade */
  display: grid;
  object-fit: contain;
  place-items: center;            /* center image inside */
  background: #0d1117;            /* subtle matte behind images */
}
.slide.active { opacity: 1; }

/* The image is fully contained in the frame (no overflow, no cropping). */
.slide-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  aspect-ratio: 2 / 3;
}

/* Caption strip (optional). Stays inside the frame. */
.slide figcaption {
  position: absolute;
  inset: auto 0 0 0;               bottom:0; left:0; right:0 
  padding: .85rem 1rem;
  font-size: .5rem;
  color: #d9e8f7;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.65) 72%);
}

/* --- Navigation dots (if present) --- */
.dots {
  display: flex;
  gap: .25rem;
  justify-content: center;
  align-items: center;
  margin: .75rem 0 0;             /* a bit of space under the frame */
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #243140;
  transition: transform .15s ease, background-color .15s ease;
}
.dot.active {
  background: #6aa9ff;
  transform: scale(1.1);
}

/* --- Prev/Next buttons (if present) --- */
.slider .nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.35);
  color: #e6eef8;
  display: grid;
  place-items: center;
  cursor: pointer;
  user-select: none;
}
.slider .nav:hover { background: rgba(0,0,0,.5); }
.slider .prev { left: 8px; }
.slider .next { right: 8px; }

/* --- Responsive: gracefully shrink on small screens --- */
@media (max-width: 600px) {
  .slider {
    width: 90%;                   /* proportional shrink */
  }
  .slide figcaption {
    font-size: .85rem;
    padding: .7rem .9rem;
  }
}


/* ---------------------- */
.hero-copy h1{margin:.1rem 0 0}
.hero-copy p{color:var(--muted); line-height:1.6}
.ticks{margin:.75rem 0 1.25rem; padding-left:1.1rem}
.ticks li{margin:.2rem 0}
.btn{
  display:inline-block; padding:.7rem 1rem; border-radius:10px;
  text-align: center; /* Centers text horizontally */
  background:linear-gradient(135deg,var(--accent),#6fd8ff);
  color:#0b0d10; text-decoration:none; font-weight:700;
  box-shadow:0 10px 26px rgba(110,210,255,.25);
}

/* ---------------------- */
/* Bronze Accord Verdict Widget */
.verdict-section { margin: .25rem auto; max-width: 960px; }
.section-title { font-size: 1.75rem; margin: 0 0 .25rem; }
.section-subtitle { color: #6b7280; margin: 0 0 1rem; }

.verdict-card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
  padding: .25rem 1.25rem 1.5rem; box-shadow: 0 6px 18px rgba(0,0,0,.05);
}

.verdict-label { font-weight: 600; display: block; margin-bottom: .5rem; }
.verdict-input {
  width: 100%; border: 1px solid #d1d5db; border-radius: 10px; padding: .75rem .9rem;
  font: inherit; resize: vertical; outline: none;
}
.verdict-input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.15); }

.verdict-actions { display: flex; align-items: center; gap: .75rem; margin-top: .75rem; }
.btn.btn-primary {
  background: #111827; color: #fff; border: 0; padding: .6rem 1rem; border-radius: 10px; cursor: pointer;
}
.btn.btn-primary:hover { background: #0b1220; }
.verdict-status { color: #6b7280; font-size: .95rem; }

.verdict-result { margin-top: 1rem; }
.verdict-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.verdict-pill {
  background: #f3f4f6; color: #111827; border-radius: 999px; padding: .35rem .75rem; font-weight: 600;
}
.verdict-meta { color: #374151; }
.verdict-message { margin: .5rem 0 0; color: #1f2937; }

.verdict-triggers { margin-top: 1rem; }
.verdict-triggers-title { font-size: 1.1rem; margin: 0 0 .25rem; }
.verdict-trigger-list { list-style: disc; padding-left: 1.25rem; }
.verdict-trigger-list code { background: #111827; color: #fff; padding: .15rem .35rem; border-radius: 6px; }

/* ---------------------- */
/* sections */
.section{padding:0.1rem 0}
.section.alt{background:linear-gradient(180deg,#0b0d10,#0f1319)}
.section h2{margin:0 0 .6rem}
.section p{color:#cfe1f3}
.hint{color:#9bb1c5; font-size:.9rem}

.list{line-height:1.7; color:#cfe1f3}
.list li{margin:.4rem 0}

.cards{
  display:grid; gap:1rem; margin-top:1rem;
  grid-template-columns:repeat(4,1fr);
}
@media (max-width:960px){
  .cards{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .cards{grid-template-columns:1fr}
}
.card{
  background:var(--card); border:1px solid var(--border); border-radius:12px; padding:1rem;
}

/* footer */
.footer{
  border-top:1px solid var(--border); background:#0b0d10;
  color:#a9bfd6; padding:1.25rem 0; font-size:.95rem;
}
.foot-links a{color:#a9bfd6; text-decoration:none; margin-left:1rem}
.foot-links a:hover{color:#e6f2ff}

/* links */
a.link{color:var(--accent)}
a.link:hover{opacity:.85}
.small{color:#99aec2; font-size:.95rem}
.lead{font-size:1.05rem}


/* ---------------------------------------------------------------------------- */
/* NAV: smaller text + tighter spacing */
.nav a{
  font-size: .90rem;     /* try .85rem if you need more room */
  margin-left: .6rem;    /* was 1rem */
  padding: 0;            /* make sure no extra padding inflates width */
}

/* Optional: slightly reduce brand gap so the left block is tighter */
.brand{ gap: .5rem; }    /* was .75rem */

/* Optional: keep the long VIRELIA tagline on a single line on wide screens */
@media (min-width: 1024px){
  .brand-text{ white-space: nowrap; }
}

/* Responsive: compress nav more as the screen narrows */
@media (max-width: 1200px){
  .nav a{ font-size: .85rem; margin-left: .5rem; }
}
@media (max-width: 980px){
  .brand-text span{ display:none; } /* hide tagline on small screens */
}


/* ---------------------- */
/* Style for expandable sections */
details {
  background-color: #000;   /* Keep background black */
  color: #fff;              /* Make all text inside white */
  border: 1px solid #333;   /* Optional subtle border */
  padding: 1rem;            /* Add some spacing inside */
  border-radius: 5px;       /* Rounded corners */
}

/* Ensure summary text is white */
details summary {
  color: #fff;
  cursor: pointer;
  font-weight: bold;
}

/* Ensure list items inside stay white */
details ul li {
  color: #fff;
}

/* Ensure tags at the bottom stay styled correctly */
details .tag {
  background: #111;   /* dark pill background */
  color: #fff;        /* white text */
  border: 1px solid #555;
}