/* style.css
   Sophisticated dark theme for Landara — Club
   Improvements: better hero framing and responsive cropping
*/

/* Colors */
:root{
  --bg: #0e0e0e;
  --panel: rgba(255,255,255,0.03);
  --muted: #bdbdbd;
  --text: #eaeaea;
  --accent: #ffffff;
  --glass: rgba(255,255,255,0.04);
  --border: rgba(255,255,255,0.08);
  --glass-strong: rgba(255,255,255,0.06);
}

/* Reset + base */
* { box-sizing: border-box; }
html,body { height: 100%; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);
  background: linear-gradient(180deg,#0e0e0e,#0b0b0b);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height: 1.5;
  font-size: 16px;
}
.container { max-width: 1100px; margin: 0 auto; padding: 1.5rem; }

/* Accessibility helper */
.sr-only {
  position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;
}

/* Header (unchanged) */
.site-header { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(6px); background: linear-gradient(180deg, rgba(14,14,14,0.6), rgba(14,14,14,0.35)); border-bottom: 1px solid rgba(255,255,255,0.02); }
.header-inner { display:flex; align-items:center; gap:1rem; justify-content:space-between; padding:0.6rem 0; }
.brand { display:flex; align-items:center; gap:0.6rem; }
.brand-mark { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:8px; background:var(--glass); font-family: Georgia, serif; font-size:18px; color:var(--accent); box-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.brand-name { font-weight:600; letter-spacing:0.03em; font-family: Georgia, serif; font-size:1.05rem; }
.brand-sub { display:block; font-size:0.7rem; color:var(--muted); margin-left:-4px; }

/* Nav + buttons (unchanged) */
.nav { display:flex; gap:0.8rem; }
.nav a { color:var(--muted); text-decoration:none; padding:0.45rem 0.6rem; border-radius:6px; font-size:0.95rem; }
.btn { display:inline-block; text-decoration:none; color:var(--text); border:1px solid var(--border); padding:0.6rem 1rem; border-radius:6px; background:transparent; transition: all 180ms ease; font-weight:600; }
.btn:hover, .btn:focus { background:var(--accent); color:var(--bg); border-color:var(--accent); }

/* HERO: framing improvements */
.hero {
  position:relative;
  /* slightly shorter height to avoid aggressive vertical crop on many screens */
  min-height:66vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

/* Video: if present, better object-position */
.hero__video {
  position:absolute;
  inset:0;
  width:120%;
  height:120%;
  object-fit:cover;
  object-position:center 40%; /* favour slightly higher area */
  z-index:0;
  filter:brightness(0.45) saturate(0.9);
}

.hero__slideshow { position:absolute; inset:0; z-index:0; }

/* slide: allow per-slide inline background-position (set by JS) */
.slide {
  position:absolute;
  inset:0;
  background-size:cover;
  background-repeat:no-repeat;
  /* default focal point if JS doesn't set one */
  background-position:center 42%;
  opacity:0;
  transition:opacity 900ms ease, transform 500ms ease;
  will-change:opacity,transform;
}
.slide.is-active { opacity:1; transform:translateZ(0); }

/* overlay to guarantee legibility */
.hero__overlay { position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.22), rgba(0,0,0,0.6)); z-index:1; }

/* content slightly lower so header/branding doesn't cover focal points */
.hero__content { position:relative; z-index:2; text-align:center; padding:4.5rem 1rem 3rem; max-width:980px; }
.site-title { font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.8rem, 4.5vw, 3.2rem); margin:0; letter-spacing:0.02em; color:var(--accent); }
.site-sub { margin:0.7rem 0 1.2rem; color:var(--muted); font-size:1.05rem; }

/* Rest of CSS remains same as before (sections, BI panel, footer...) */
/* ... (no changes below) ... */

/* Sections */
.section { padding:3rem 0; }
.section-title { font-family: Georgia, serif; font-size:1.4rem; margin-bottom:0.6rem; color:var(--accent); }
.lead { color:var(--muted); font-size:1.02rem; max-width:70ch; }

/* Cards and services */
.services__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-top:1.25rem; }
.card { background:var(--panel); border:1px solid rgba(255,255,255,0.03); padding:1.25rem; border-radius:12px; box-shadow: 0 6px 20px rgba(0,0,0,0.6); transition: transform 200ms ease, box-shadow 200ms ease; }
.card:hover { transform:translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,0.7); }
.card-link { display:inline-block; margin-top:0.75rem; color:var(--muted); text-decoration:none; font-weight:600; }

/* BI panel */
.bi-panel { display:flex; gap:1rem; margin-top:1rem; align-items:flex-start; flex-wrap:wrap; }
.bi-sidebar { width:220px; min-width:160px; background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent); padding:0.6rem; border-radius:10px; border:1px solid rgba(255,255,255,0.02); }
.bi-tab { display:block; width:100%; text-align:left; background:transparent; border:none; color:var(--muted); padding:0.7rem 0.5rem; font-weight:600; border-radius:6px; cursor:pointer; }
.bi-tab.is-active { color:var(--accent); background:var(--glass-strong); }
.bi-content { flex:1; min-width:280px; background:var(--panel); padding:1rem; border-radius:10px; border:1px solid rgba(255,255,255,0.03); }

/* BI panes + rest unchanged... */
.bi-pane { display:none; }
.bi-pane.is-active { display:block; }
.kpis { display:flex; gap:1rem; margin-top:1rem; flex-wrap:wrap; }
.kpi { background:rgba(255,255,255,0.02); padding:0.8rem 1rem; border-radius:8px; min-width:140px; text-align:center; }
.kpi-value { font-size:1.2rem; font-weight:700; color:var(--accent); }
.kpi-label { color:var(--muted); font-size:0.9rem; margin-top:0.3rem; }

/* Chart placeholder + inventory */
.chart-placeholder { margin-top:1rem; border-radius:8px; overflow:hidden; border:1px solid rgba(255,255,255,0.02); }
.inventory { margin-top:0.8rem; color:var(--muted); }
.doc-list { margin-top:0.6rem; display:flex; flex-direction:column; gap:0.4rem; }
.doc { color:var(--muted); text-decoration:none; padding:0.5rem; border-radius:6px; background:transparent; border:1px dashed rgba(255,255,255,0.02); }
.doc[aria-disabled="true"] { opacity:0.8; pointer-events:none; }

/* Footer */
.site-footer { border-top:1px solid rgba(255,255,255,0.03); padding:1.25rem 0; color:var(--muted); }
.footer__inner { display:flex; justify-content:center; align-items:center; gap:1rem; }

/* Reveal animation */
.reveal { opacity:0; transform:translateY(10px); transition: opacity 600ms ease, transform 600ms ease; }
.reveal.is-visible { opacity:1; transform:none; }

/* Responsive */
@media (max-width: 900px) {
  .services__grid { grid-template-columns:1fr; }
  .bi-panel { flex-direction:column; }
  .bi-sidebar { width:100%; min-width:unset; order:2; display:flex; gap:0.5rem; flex-wrap:wrap; }
  .bi-tab { flex:1 1 48%; }
  .brand-name { display:none; }
  .brand-sub { display:none; }
  /* On small screens be less aggressive with vertical crop */
  .slide { background-position:center 50% !important; }
  .hero { min-height:55vh; }
  .hero__content { padding:2.5rem 1rem 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .slide, .hero__video { transition: none !important; animation: none !important; }
}