/* =========================================================
   Vicarion — Features Styles · v1.0
   - Cinematic video hero with gold/glass UI
   - Showcase grid, capability cards, protocol chips, timeline
   - Responsive, a11y-friendly, reduced-motion aware
   ========================================================= */

/* -------- Tokens (align with index/dashboard) -------- */
:root{
  --gold:#ffc107;
  --gold-deep:#ffb300;
  --gold-soft:#ffe082;
  --ink:#000;
  --hdr-h:72px;

  --text:#e0e0e0;
  --muted:#cfcfcf;

  --glass-bg: rgba(255,255,255,.04);
  --glass-bd: rgba(255,255,255,.10);
  --elev-1: 0 10px 24px rgba(0,0,0,.35);
  --elev-2: 0 12px 28px rgba(0,0,0,.35);
}

/* -------- Base -------- */
body{
  background:#000;
  color:var(--text);
  font-family:'Poppins',sans-serif;
  padding-top: var(--hdr-h); /* space for fixed header */
  overflow-x:hidden;
  transition:background .3s ease, color .3s ease;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
a:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* =========================================================
   HERO — Video with Glow Vignettes
   ========================================================= */
.features-hero.hero--video{
  position:relative;
  min-height: calc(100svh - var(--hdr-h));  /* full first screen */
  display:flex; align-items:center; justify-content:center;
  text-align:center; color:#fff;
  overflow:hidden; isolation:isolate;
}

/* Video layer fills hero; text sits above */
.features-video-container{
  position:absolute; inset:0; z-index:0;
}
.features-video{
  width:100%; height:100%; object-fit:cover;
  filter: brightness(55%) saturate(1.05);
}

/* Extra contrast: subtle gold/dark vignette overlay */
.video-gradient{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(1200px 520px at 50% 25%, rgba(0,0,0,.35), transparent 60%),
    radial-gradient(2200px 1200px at 50% 95%, rgba(0,0,0,.80), transparent 72%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 100%);
}

/* Foreground content */
.features-hero .hero-content{
  position:relative; z-index:1;
  width:min(90%, 1100px);
  margin-inline:auto;
}
.eyebrow{
  font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-soft); margin-bottom:.35rem;
}
.hero-title{
  font-family:'Cinzel', serif; line-height:1.12;
  font-size: clamp(2rem, 5vw, 3.4rem);
  background:linear-gradient(90deg, var(--gold-soft), var(--gold) 55%, var(--gold-deep));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 0 14px rgba(0,0,0,.7);
}
.hero-subtitle{
  color:#d8d8d8; max-width:900px; margin:.5rem auto 0;
}

/* CTAs (mirror other pages so it feels unified) */
.hero-cta{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.btn-get-started, .btn-login{
  border-radius:40px; font-weight:700; padding:.85rem 1.8rem;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.btn-get-started{
  color:#000;
  background:linear-gradient(135deg, var(--gold-soft) 0%, var(--gold) 55%, var(--gold-deep) 100%);
  box-shadow:0 0 12px rgba(255,193,7,.6), inset 0 0 24px rgba(255,193,7,.4);
}
.btn-login{
  color:var(--gold);
  background:rgba(255,255,255,.05);
  border:2px solid var(--gold);
  box-shadow:0 0 8px rgba(255,193,7,.7);
}
@media (hover:hover){
  .btn-get-started:hover, .btn-login:hover{ transform:translateY(-4px); }
}

/* Trust chips + scroll hint */
.trust li{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .7rem; border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  color:#f5f5f5; font-size:.92rem;
}
.trust i{ color:var(--gold); }
.scroll-indicator{
  margin-top:1rem; opacity:.9; font-size:1.2rem;
  animation: nudge 1.8s ease-in-out infinite;
}
@keyframes nudge{
  0%,100%{ transform: translateY(0); opacity:.8; }
  50%{ transform: translateY(6px); opacity:1; }
}

/* =========================================================
   Showcase — Dashboard gallery
   ========================================================= */
.dashboard-showcase{
  background: linear-gradient(180deg, #060606, #0b0b0b);
}
.section-title{
  font-family:'Cinzel', serif;
  font-size: clamp(1.6rem, 3.6vw, 2.2rem);
  background:linear-gradient(90deg, var(--gold-soft), var(--gold));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.section-kicker{ color:#cfcfcf; }

.dashboard-item{
  position:relative; border-radius:16px; overflow:hidden;
  background:var(--glass-bg); border:1px solid var(--glass-bd);
  box-shadow: var(--elev-1);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.showcase-img{ width:100%; height:auto; display:block; }
.dashboard-item figcaption{
  text-align:center; padding:.7rem 1rem; color:#ddd; font-size:.95rem;
  border-top:1px solid rgba(255,255,255,.08);
}
@media (hover:hover){
  .dashboard-item:hover{
    transform: translateY(-6px);
    box-shadow: 0 22px 44px rgba(255,193,7,.18);
    filter: brightness(1.03);
  }
}

/* =========================================================
   Capability Grid — Monitor / Predict / Visualize / Scale
   ========================================================= */
.features-grid{ 
  background: linear-gradient(180deg, #0b0b0b, #050505);
  content-visibility:auto; 
  contain-intrinsic-size:800px;
}
.feature-card{
  text-align:center; padding:28px; border-radius:18px; height:100%;
  background: var(--glass-bg);
  border:1px solid var(--glass-bd);
  box-shadow: var(--elev-2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.feature-card h3{ color:#fff; margin:.5rem 0 .3rem; }
.feature-card p{ color:#d6d6d6; margin:0; }

.feature-icon{
  width:120px; height:120px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 12px;
  background: radial-gradient(circle at 35% 35%, var(--gold-soft), var(--gold));
  box-shadow: 0 0 26px rgba(255,193,7,.55);
}
.feature-img{ width:70%; height:auto; }

@media (hover:hover){
  .feature-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 22px 44px rgba(255,193,7,.18);
    border-color: rgba(255,193,7,.35);
  }
}

/* =========================================================
   Protocols / Integrations band
   ========================================================= */
.protocols-band{
  background: radial-gradient(1200px 520px at 50% 0%, rgba(255,193,7,.08), transparent 60%),
              linear-gradient(180deg, #050505, #0b0b0b);
}
.protocols{ margin:0; padding:0; }
.protocol-chip{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .9rem; border-radius:999px; font-weight:700;
  color:#f6f6f6; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  transition: transform .2s ease, border-color .2s ease, filter .2s ease;
}
.protocol-chip i{ color:var(--gold); }
@media (hover:hover){
  .protocol-chip:hover{ transform: translateY(-3px); border-color: rgba(255,193,7,.35); filter: brightness(1.05); }
}

/* =========================================================
   How it Works — 4-step timeline
   ========================================================= */
.how-it-works{
  background: linear-gradient(180deg, #0b0b0b, #060606);
}
.timeline{ position:relative; margin:0; }
.timeline::before{
  content:""; position:absolute; left:50%; top:10px; bottom:10px;
  width:2px; background:linear-gradient(var(--gold), transparent);
  transform: translateX(-50%);
}
.step-card{
  position:relative; text-align:center; padding:22px 18px; border-radius:16px;
  background: var(--glass-bg); border:1px solid var(--glass-bd); color:#e9e9e9;
  box-shadow: var(--elev-1);
  min-height: 140px;
}
.step-num{
  position:absolute; left:50%; top:-16px; transform:translateX(-50%);
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; font-weight:700;
  background: radial-gradient(circle at 35% 35%, var(--gold-soft), var(--gold));
  color:#000; box-shadow:0 0 16px rgba(255,193,7,.55);
}

/* On larger screens, hide the vertical line & rely on card layout */
@media (min-width: 992px){
  .timeline::before{ display:none; }
}

/* =========================================================
   Final CTA band
   ========================================================= */
.cta-band{
  background: radial-gradient(1200px 520px at 50% 100%, rgba(255,193,7,.10), transparent 60%),
              linear-gradient(180deg, #060606, #0b0b0b);
}
.cta-band .section-title{
  background:linear-gradient(90deg, var(--gold), var(--gold-deep));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}

/* =========================================================
   Responsive tweaks
   ========================================================= */
@media (max-width: 1200px){
  .hero-title{ font-size: clamp(1.9rem, 4.2vw, 3.1rem); }
}
@media (max-width: 992px){
  body{ padding-top:64px; }
}
@media (max-width: 576px){
  .btn-get-started, .btn-login{ padding:.7rem 1.4rem; }
}

/* =========================================================
   Accessibility preferences
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .scroll-indicator{ animation:none !important; }
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}

/* =========================================================
   Light mode support (toggle .light-mode on <body>)
   ========================================================= */
body.light-mode{
  color:#0f0f0f; background:#f6f6f6;
}
body.light-mode .video-gradient{
  background:
    radial-gradient(1200px 520px at 50% 25%, rgba(0,0,0,.08), transparent 60%),
    radial-gradient(2200px 1200px at 50% 95%, rgba(0,0,0,.12), transparent 72%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.10) 100%);
}
body.light-mode .dashboard-item,
body.light-mode .feature-card{
  background: rgba(0,0,0,.035);
  border-color: rgba(0,0,0,.08);
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
}
body.light-mode .feature-card h3{ color:#111; }
body.light-mode .feature-card p{ color:#333; }
body.light-mode .protocol-chip{ background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.10); color:#111; }