/* ============================================================
   VERITAS — 3D layer (loads AFTER styles.css)
   WebGL canvas, 3D tilt cards, glass depth, redesigned hero.
   ============================================================ */

/* ---------- hero canvas ---------- */
.hero-canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  z-index:0;
  pointer-events:none;
  will-change:transform,opacity;
}
.page-hero .hero-canvas,
.contact-hero .hero-canvas{
  z-index:0; opacity:.9;
  mask-image:linear-gradient(180deg,#000 30%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 100%);
}

/* ============================================================
   HOMEPAGE HERO — rebuilt around the 3D scene
   ============================================================ */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  padding:200px 0 120px;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
/* radial depth glow behind the shield */
.hero::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  top:46%; right:14%; transform:translate(50%,-50%);
  width:min(60vw,720px); height:min(60vw,720px);
  background:radial-gradient(circle, rgba(224,30,55,.30), rgba(232,178,74,.06) 45%, transparent 68%);
  filter:blur(8px);
}
.hero-vignette{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 18% 50%, rgba(10,11,14,.92) 0%, rgba(10,11,14,.55) 38%, transparent 62%),
    linear-gradient(180deg, rgba(10,11,14,.4) 0%, transparent 22%, transparent 70%, var(--bg) 100%);
}
.hero .hero-inner{
  position:relative; z-index:2;
  display:block;
}
.hero-copy{ max-width:680px; }
.hero-copy .chip{ margin-bottom:28px; backdrop-filter:blur(8px); }
.hero-copy h1{ margin-bottom:0; }
.hero .lead{ margin-top:26px; max-width:50ch; }
.hero-actions{ display:flex; gap:14px; margin-top:38px; flex-wrap:wrap; }
.hero-meta{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:34px;
  font-family:var(--font-mono); font-size:13px; letter-spacing:.03em; color:var(--muted);
}
.hero-meta strong{ color:var(--gold); font-weight:500; }
.hero-meta-div{ width:1px; height:16px; background:var(--line-2); }

/* scroll cue */
.hero-scrollcue{
  position:absolute; left:50%; bottom:30px; transform:translateX(-50%);
  z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted-2);
}
.hero-scrollcue .cue-rail{
  width:1px; height:46px;
  background:linear-gradient(180deg, var(--gold), transparent);
  position:relative; overflow:hidden;
}
.hero-scrollcue .cue-rail::after{
  content:""; position:absolute; top:-40%; left:0; width:1px; height:40%;
  background:var(--gold);
  animation:cueDrop 2.1s var(--ease) infinite;
}
@keyframes cueDrop{ 0%{ top:-40% } 70%,100%{ top:100% } }

/* WebGL fallback — show a styled static hero with the logo */
.no-webgl .hero-canvas{ display:none; }
.no-webgl .hero::before{
  content:""; position:absolute; z-index:0; inset:0;
  background:
    radial-gradient(60% 60% at 72% 48%, rgba(224,30,55,.22), transparent 60%),
    radial-gradient(40% 40% at 80% 60%, rgba(232,178,74,.14), transparent 60%);
}

/* ============================================================
   3D TILT CARDS
   ============================================================ */
.tilt3d{
  transform-style:preserve-3d;
  transition:transform .25s var(--ease), border-color .35s, box-shadow .35s;
  will-change:transform;
}
.tilt-glare{
  position:absolute; inset:0; border-radius:inherit;
  opacity:0; transition:opacity .3s var(--ease);
  pointer-events:none; z-index:3;
  mix-blend-mode:screen;
}
/* lift inner content for parallax depth on the strongest cards */
.svc-card.tilt3d:hover, .compare-card.tilt3d:hover,
.ind-card.tilt3d:hover, .cred-card.tilt3d:hover{
  box-shadow:0 36px 80px -36px rgba(0,0,0,.85), 0 0 0 1px var(--line-2);
}
.svc-card .svc-ico, .ind-card .ind-ico, .cred-abbr{ transform:translateZ(28px); }
.svc-card h3, .ind-card h3{ transform:translateZ(18px); }
.svc-card .svc-go{ transform:translateZ(14px); }

/* ============================================================
   GLASS DEPTH — promote key surfaces
   ============================================================ */
.svc-card, .compare-card, .ind-card, .stat-card, .cred-card,
.value-card, .step, .facts-card, .contact-form-wrap, .insure-card{
  background:linear-gradient(180deg, rgba(26,30,38,.72), rgba(15,17,22,.82));
  backdrop-filter:blur(10px) saturate(120%);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
}

/* float section glows for depth between bands */
.section{ position:relative; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:860px){
  .hero{ min-height:92vh; padding-top:150px; }
  .hero::after{ right:50%; top:30%; transform:translateX(50%); opacity:.7; }
  .hero-vignette{
    background:
      radial-gradient(120% 70% at 50% 40%, rgba(10,11,14,.55) 0%, transparent 60%),
      linear-gradient(180deg, rgba(10,11,14,.5) 0%, transparent 30%, transparent 68%, var(--bg) 100%);
  }
}
@media (max-width:600px){
  .hero{ padding-top:128px; }
  .hero-scrollcue{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .hero-scrollcue .cue-rail::after{ animation:none; }
  .tilt3d{ transition:none; }
}