/* =========================================================
   Vicarion · Index Styles (Hero scales to any screen) · v4
   ========================================================= */

/* -------- Brand tokens -------- */
:root{
  --gold:#ffc107;
  --gold-deep:#ffb300;
  --gold-soft:#ffe082;
  --ink:#000;
  --hdr-h:72px; /* fallback if header.css doesn’t set it */
}

/* ========== 1) Base ========== */
*{ box-sizing:border-box; }
body{
  background:#000;
  color:#e0e0e0;
  font-family:'Poppins',sans-serif;
  padding-top:var(--hdr-h);         /* space for sticky 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; }

/* ========== 2) HERO (device-true full-viewport) ========== */
/* Fallback */
.hero-bg{ min-block-size: calc(100vh - var(--hdr-h)); }
/* Prefer small/large and dynamic viewport units */
@supports (height: 100svh){
  .hero-bg{ min-block-size: calc(100svh - var(--hdr-h)); }
}
@supports (height: 100dvh){
  .hero-bg{ min-block-size: calc(100dvh - var(--hdr-h)); }
}

/* Grid centers content; safe areas for notches */
.hero-bg{
  position:relative;
  display:grid;
  place-items:center;
  text-align:center;
  color:#fff;
  padding-block: clamp(.75rem, 3.5vh, 4rem);
  padding-inline: max(1rem, env(safe-area-inset-left));
  padding-inline-end: max(1rem, env(safe-area-inset-right));
}

/* Foreground copy (no absolute positioning) */
.hero-content{
  position:relative; top:auto; left:auto; transform:none;
  display:flex; flex-direction:column; align-items:center;
  width:min(92vw, 72rem);
  max-inline-size:68ch;              /* readable on 4K/8K */
  z-index:1;
}

/* Title: fluid but capped so it never “shouts” */
.hero-title,
.hero-content h1{
  font-family:'Cinzel',serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1.2px;              /* calmer spacing */
  line-height:1.06;
  font-size: clamp(32px, 2.8vw + .5rem, 58px);
  max-width:22ch;                    /* elegant wraps */
  margin:0 auto;
  text-wrap: balance;

  background:linear-gradient(90deg, var(--gold-soft), var(--gold) 55%, var(--gold-soft));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 6px 18px rgba(0,0,0,.85);
}

.hero-subtitle,
.hero-content p{
  font-size: clamp(16px, 2vw, 20px);
  max-width: 60ch;
  margin: clamp(.6rem, 1.2vh, 1rem) auto 0;
  opacity:.95;
  text-shadow:0 2px 10px rgba(0,0,0,.75);
}

/* Space to CTAs that scales with height */
.hero-content .hero-cta{ margin-top: clamp(1rem, 2.4vh, 1.75rem); }

/* CTAs */
.hero-cta,
.hero-buttons{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }
.hero-cta a,
.hero-buttons a{
  position:relative; display:inline-block;
  font-weight:700; border-radius:40px; overflow:hidden;
  font-size: clamp(.95rem, 1.2vw, 1.1rem);
  padding: clamp(.7rem, 1.4vw, 1rem) clamp(1rem, 3vw, 1.8rem);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  will-change: transform;
}
.hero-cta a:focus-visible{ outline:2px solid #fff; }

/* ===== Hero sizing tune — use the space on large screens ===== */

/* Make the headline wider and larger by default */
.hero-title,
.hero-content h1{
  /* bigger, but still fluid */
  font-size: clamp(40px, 4vw, 86px);
  line-height: 1.08;
  letter-spacing: 1.1px;
  max-width: 30ch;              /* was 22ch — fewer line breaks */
  margin-inline: auto;
  text-wrap: balance;
}

/* Subtitle up a notch too */
.hero-subtitle,
.hero-content p{
  font-size: clamp(18px, 1.8vw, 24px);
  max-width: 64ch;
}

/* Give the whole block a slight upward nudge on roomy viewports */
@media (min-width: 1200px) and (min-height: 800px){
  .hero-content{ transform: translateY(-3vh); }
  .hero-title{ font-size: clamp(64px, 5vw, 96px); max-width: 32ch; }
  .hero-cta a{ padding: 1rem 2rem; font-size: clamp(1rem, 1vw, 1.15rem); }
}

/* Ultra-wide / TV walls — really use the canvas */
@media (min-width: 1600px) and (min-height: 900px){
  .hero-title{ font-size: clamp(72px, 4.8vw, 110px); }
  .hero-subtitle{ font-size: clamp(20px, 1.6vw, 26px); }
}

/* Short-viewport safety (phones in landscape, tiny laptops) */
@media (max-height: 720px){
  .hero-title{ font-size: clamp(32px, 3vw, 54px); }
  .hero-subtitle{ font-size: clamp(16px, 1.6vw, 20px); }
  .hero-cta a{ padding: .65rem 1.2rem; }
}


/* Primary / secondary */
.btn-get-started{
  color:#000;
  background:linear-gradient(135deg, var(--gold-soft), var(--gold) 55%, var(--gold-deep));
  box-shadow:0 0 12px rgba(255,193,7,.6), inset 0 0 24px rgba(255,193,7,.4);
  border:0;
}
.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); }
}
/* Shimmer */
.hero-cta a::after{
  content:""; position:absolute; inset:0 auto 0 -100%;
  width:100%; height:100%;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.4) 50%, transparent 100%);
  transition:left .6s ease;
}
.hero-cta a:hover::after{ left:100%; }

/* Short-viewport guardrails (phones in landscape, tiny laptops) */
@media (max-height: 720px){
  .hero-title{ font-size: clamp(28px, 2.2vw + .4rem, 46px); }
  .hero-subtitle{ font-size: clamp(14px, 1.6vw, 18px); }
  .hero-cta a{ padding: .6rem 1.2rem; }
}
@media (max-height: 560px){
  .hero-bg{ padding-block: clamp(.5rem, 2vh, 1rem); }
  .hero-title{ font-size: clamp(24px, 2vw + .3rem, 38px); letter-spacing:.8px; }
}

/* ========== 3) Constellation “V” variant ========== */
.hero--constellation{ background:#000; }
.hero--constellation::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(1000px 520px at 50% 30%, rgba(0,0,0,.35), transparent 60%),
    radial-gradient(1600px 900px at 50% 90%, rgba(0,0,0,.78), transparent 70%);
}
.constellation{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.constellation .link, .constellation .thin{
  vector-effect: non-scaling-stroke;
  stroke-linecap:round; stroke-linejoin:round;
  filter: drop-shadow(0 0 12px rgba(255,193,7,.25));
}
.constellation .thin{ stroke-width:1.2; opacity:.25; }
.constellation .nodes circle{ filter: drop-shadow(0 0 10px rgba(255,193,7,.45)); }

@keyframes twinkle{ 0%,100%{opacity:.35; transform:scale(1)} 50%{opacity:1; transform:scale(1.6)} }
.tw.t1{ animation:twinkle 3.6s ease-in-out infinite; }
.tw.t2{ animation:twinkle 4.2s ease-in-out infinite .4s; }
.tw.t3{ animation:twinkle 5.0s ease-in-out infinite .8s; }
.tw.t4{ animation:twinkle 4.6s ease-in-out infinite 1.2s; }
.tw.t5{ animation:twinkle 3.8s ease-in-out infinite 1.6s; }
@media (prefers-reduced-motion: reduce){ .tw{ animation:none !important; } }

/* =========================================================
   4) FEATURES — Cinematic Glass Grid
   ========================================================= */
.features-section.section-shell{
  position:relative; overflow:clip; isolation:isolate;
  padding-block: clamp(64px, 9vw, 120px);
  background:
    radial-gradient(1200px 600px at 50% 0%, rgba(255,193,7,.05), transparent 60%),
    linear-gradient(180deg, #0b0b0b, #000);
}
.features-decor{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.06) 0 1px, transparent 1px 80px);
  opacity:.20;
  mask-image: radial-gradient(140% 100% at 50% 0%, #000 55%, transparent 90%);
}
@media (prefers-reduced-motion: no-preference){
  @keyframes gridPulse{ 0%,100%{opacity:.18} 50%{opacity:.28} }
  .features-decor{ animation:gridPulse 10s ease-in-out infinite; }
}

.section-head{ position:relative; z-index:1; text-align:center; }
.section-eyebrow{
  font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-soft); margin-bottom:.35rem;
}
.section-title{
  font-family:'Cinzel',serif; line-height:1.15;
  font-size: clamp(1.8rem, 3.8vw, 2.6rem);
  background:linear-gradient(90deg, var(--gold-soft), var(--gold) 60%, var(--gold-deep));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 0 12px rgba(0,0,0,.6);
}
.section-subtitle{ max-width:920px; margin:.5rem auto 0; color:#cfcfcf; }

.feature-card{
  position:relative; z-index:1;
  padding:28px 22px; border-radius:20px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 12px 28px rgba(0,0,0,.35);
  backdrop-filter:blur(6px);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
  will-change:transform;
}
.feature-card__glow{
  content:""; position:absolute; inset:-2px; border-radius:inherit; z-index:-1;
  background: radial-gradient(380px 140px at 50% -10%, rgba(255,193,7,.35), transparent 60%);
  filter: blur(22px); opacity:.35; transition: opacity .25s ease, transform .25s ease;
}
.feature-card:hover{
  transform:translateY(-8px);
  box-shadow:0 22px 48px rgba(255,193,7,.22);
  border-color:rgba(255,193,7,.35);
}
.feature-card:hover .feature-card__glow{ opacity:.7; transform:translateY(-2px); }

.feature-icon{
  width:96px; height:96px; margin:2px auto 14px; border-radius:50%;
  display:grid; place-items:center; position:relative;
  background:radial-gradient(circle at 30% 30%, var(--gold-soft), var(--gold));
  box-shadow: inset 0 0 30px rgba(255,193,7,.45), 0 0 16px rgba(255,193,7,.35);
}
.feature-icon::after{
  content:""; position:absolute; inset:-6px; border-radius:inherit;
  background:conic-gradient(from 0deg, rgba(255,193,7,.55), rgba(255,193,7,0) 60%);
  filter:blur(12px); opacity:.5;
}
.feature-icon img{ width:56px; height:56px; object-fit:contain; filter:drop-shadow(0 2px 6px rgba(0,0,0,.6)); }

.feature-title{ font-family:'Cinzel',serif; color:#fff; letter-spacing:.04em; font-size: clamp(1.1rem, 2.2vw, 1.35rem); margin-bottom:.25rem; }
.feature-copy{ color:#d8d8d8; font-size:.98rem; min-height:3.2em; }

.feature-specs{
  display:flex; flex-wrap:wrap; gap:.45rem .6rem; justify-content:center;
  margin:.75rem 0 1rem;
}
.feature-specs li{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.9rem; color:#f2f2f2;
  padding:.35rem .65rem; border-radius:999px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.14);
}
.feature-specs i{ color:var(--gold); }

.feature-link{ display:inline-flex; align-items:center; gap:.25rem; font-weight:600; color:var(--gold); transition: transform .2s ease, filter .2s ease; }
.feature-link:hover{ transform:translateX(3px); filter:brightness(1.06); }

.card-glass{
  position:relative; border-radius:20px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 12px 28px rgba(0,0,0,.35);
  backdrop-filter:blur(6px);
  padding:clamp(18px, 4vw, 28px) clamp(16px, 4vw, 28px);
}
.kpis{ gap:10px 20px; }
.kpis li{
  padding:.4rem .85rem; border-radius:999px;
  background:rgba(255,193,7,.08);
  border:1px solid rgba(255,193,7,.25);
  color:#fff;
}
.kpis strong{ color:var(--gold-soft); font-weight:700; }

/* ========== 5) Legacy 4-up features (safe fallback) ========== */
.features-section:not(.section-shell){
  width:100%;
  padding:100px 0;
  background:linear-gradient(135deg, #1a1a1a, #000);
  text-align:center;
}
.features-section:not(.section-shell) .feature-item{
  padding:30px;
  background:linear-gradient(145deg, #222, #111);
  border-radius:20px;
  box-shadow:0 10px 20px rgba(0,0,0,.4);
  transition:transform .3s, box-shadow .3s;
}
.features-section:not(.section-shell) .feature-item:hover{
  transform:translateY(-12px);
  box-shadow:0 15px 35px rgba(255,193,7,.75);
}
.features-section:not(.section-shell) .feature-icon{
  width:130px; height:130px; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle, var(--gold), #e6ac00);
  border-radius:50%;
  box-shadow:0 0 30px rgba(255,193,7,.9);
  margin:0 auto 20px;
}

/* ========== 6) Responsive tweaks ========== */
@media (max-width: 992px){
  body{ padding-top:64px; }
  .feature-card{ padding:24px 18px; }
}
@media (max-width: 576px){
  .feature-icon{ width:80px; height:80px; }
  .feature-copy{ font-size:.95rem; }
  .kpis{ gap:8px 12px; }
  .btn-get-started, .btn-login{ padding:.7rem 1.4rem; }
}

/* ========== 7) Reduced motion (global) ========== */
@media (prefers-reduced-motion: reduce){
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}