/* styles.css */
/* Color system: dark red canvas + white text */
:root{
  --bg:#00203F;      /* DarkRed */
  --bg-2:#6f0000;    /* Deeper red for sections */
  --ink:#ffffff;     /* Primary text */
  --ink-2:#e9e9e9;   /* Muted text on dark */
  --ink-3:#cfcfcf;   /* Lighter separators */
  --panel:rgba(0,0,0,.35);
  --panel-2:rgba(0,0,0,.5);
  --border:rgba(255,255,255,.14);
  --pill:rgba(255,255,255,.08);
  --accent:#ff364d;  /* Bright red accent */
  --gold:#ffc107;    /* Star fill */
}

/* Reset */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-text-size-adjust:100%;
}
img, video{ max-width:100%; height:auto; display:block; }
a{ color:var(--ink); text-underline-offset:2px; }

/* Layout helpers */
.container{ width:min(1200px, 92%); margin-inline:auto; }
.strip{ padding:2.25rem 0; background:var(--panel); backdrop-filter:saturate(120%) blur(0px); }
.strip.alt{ background:var(--panel-2); }
.note{ color:var(--ink-2); font-size:.95rem; }

/* Skip link */
.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:1rem; top:1rem; width:auto; height:auto; background:#000; color:var(--ink); padding:.5rem .75rem; z-index:9999;
}

/* Header / Nav */
.site-header{
  background:linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.25));
  position:sticky; top:0; z-index:1000; backdrop-filter:saturate(120%) blur(4px);
}
.nav-wrap{ display:flex; align-items:center; justify-content:space-between; padding:.75rem 0; }
.brand{ font-weight:800; letter-spacing:.4px; }

.site-nav ul{ display:flex; gap:.75rem; list-style:none; margin:0; padding:0; }
.site-nav a{
  text-decoration:none;
  padding:.5rem .65rem;
  border-radius:.375rem;
  border:1px solid transparent;
}
.site-nav a:hover{ background:var(--pill); border-color:var(--border); }

/* Mobile nav toggle */
.nav-toggle{ display:none; }
.nav-toggle-btn{
  display:none; font-size:1.6rem; cursor:pointer; padding:.25rem .5rem; border-radius:.25rem;
}
@media (max-width: 768px){
  .nav-toggle-btn{ display:block; }
  .site-nav{ position:absolute; left:0; right:0; top:100%; background:rgba(0,0,0,.9); display:none; }
  .site-nav ul{ flex-direction:column; padding:1rem; }
  .nav-toggle:checked ~ .site-nav{ display:block; }
}

/* Hero */
.hero{
  padding: clamp(2rem, 4vw, 4rem) 0;
  background:
    radial-gradient(900px 480px at 85% 10%, rgba(255,54,77,.28), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.1) 60%),
    var(--bg);
}
.hero-grid{
  display:grid;
  gap:1.25rem;
  align-items:center;
}
.hero-text h1{ margin:0 0 .5rem; font-size: clamp(1.5rem, 4.2vw, 2.4rem); }
.hero-text p{ margin:0 0 1rem; color:var(--ink-2); }
.btn{
  display:inline-block; background:#000;
  text-decoration:none; padding:.7rem 1rem; border-radius:.5rem; font-weight:700; border:1px solid rgba(255,255,255,.22);
}
.btn:hover{ filter:brightness(1.05) contrast(1.05); }
.hero-media{ display:none; }
.hero-box{
  width:100%; aspect-ratio: 4/3; border:1px dashed var(--border); border-radius:.75rem; background:rgba(0,0,0,.15);
}

/* Enhance layout for larger screens */
@media (min-width: 992px){
  .hero-grid{ grid-template-columns: 1.1fr .9fr; gap:2rem; }
  .hero-media{ display:block; }
}

/* Video */
.video-section{ background:var(--panel); padding:2.25rem 0; }
.hero-video{ border-radius:.6rem; border:1px solid var(--border); background:#000; }

/* Cards / Profiles */
.profiles{ padding:2.25rem 0; }
.grid-cards{
  display:grid;
  grid-template-columns: 1fr;
  gap:1rem;
}
@media (min-width: 640px){
  .grid-cards{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px){
  .grid-cards{ grid-template-columns: repeat(3, 1fr); }
}
.card{
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:.85rem;
  overflow:hidden;
  box-shadow:0 8px 26px rgba(0,0,0,.18);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform: translateY(-2px); box-shadow:0 12px 34px rgba(0,0,0,.28); }

.card-media{ position:relative; background:#2b0a0a; }
.badge{
  position:absolute; top:.6rem; left:.6rem;
  background:#000; color:#fff;
  padding:.28rem .55rem; font-size:.8rem; border-radius:.4rem; border:1px solid var(--border);
}
.card-body{ padding:1rem; }
.card-title{ margin:.25rem 0 .25rem; font-size:1.12rem; }
.card-desc{ margin:0 0 .75rem; color:var(--ink-2); }

/* Stars (accessible, no webfonts) */
.stars{
  position:relative;
  display:inline-block;
  font-size:1rem;
  line-height:1;
  letter-spacing:.15rem;
}
.stars__base{ color:#6f6f6f; }
.stars__fill{
  position:absolute; inset:0 auto 0 0;
  width: calc(var(--rating, 0) / 5 * 100%);
  color:var(--gold);
  white-space:nowrap; overflow:hidden; pointer-events:none;
}

/* Prices */
.prices{ padding:2.25rem 0; }
.table-wrap{ overflow-x:auto; background:var(--panel-2); border-radius:.6rem; border:1px solid var(--border); }
.price-table{
  width:100%;
  border-collapse:collapse;
  min-width:600px;
  color:var(--ink);
}
.price-table caption{
  text-align:left; padding:1rem; font-weight:800;
}
.price-table th, .price-table td{
  text-align:left; padding:.85rem 1rem; border-top:1px solid var(--border);
}
.price-table thead th{
  background:rgba(0,0,0,.55); color:#fff;
}

/* Tags */
.tags{ padding:2.25rem 0; }
.tag-list{
  display:flex; flex-wrap:wrap; gap:.6rem; list-style:none; margin:0; padding:0;
}
.tag-list a{
  display:inline-block;
  background:var(--pill); color:#fff;
  text-decoration:none; padding:.44rem .7rem; border-radius:999px; font-size:.95rem;
  border:1px solid var(--border);
}
.tag-list a:hover{ background:rgba(255,255,255,.14); }

/* FAQ */
.faq{ padding:2.25rem 0; background:var(--panel); }
details{
  background:rgba(0,0,0,.4); border:1px solid var(--border); border-radius:.6rem; padding:.75rem 1rem; margin:.75rem 0;
}
summary{ cursor:pointer; font-weight:800; }

/* Reviews */
.reviews{ padding:2.25rem 0; }
.review-list{ list-style:none; margin:0; padding:0; display:grid; gap:1rem; }
.review{
  background:var(--panel-2); border:1px solid var(--border); border-radius:.6rem; padding:1rem;
}
.review-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.25rem; }
.review strong{ font-weight:800; }

/* Footer */
.site-footer{
  background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.9));
  color:#fff;
  padding:2rem 0 1.25rem;
  border-top:1px solid var(--border);
}
.footer-grid{
  display:grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap:2rem;
}
@media (max-width: 992px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .footer-grid{ grid-template-columns: 1fr; }
}
.site-footer h3{ margin-top:0; }
.list{ list-style:none; margin:0; padding:0; }
.list a{ color:#ffffff; text-decoration:none; }
.list a:hover{ text-decoration:underline; }
.copyright{
  border-top:1px solid rgba(255,255,255,.16);
  margin-top:1.25rem; padding-top:.9rem; text-align:center; color:var(--ink-3);
}