/* =====================================================================
   hero.css — Dark animated brand hero ("Scale Like A System")
   Recreates the uploaded brand mockup, fully live/animated.
   Loaded only on index.php.
   ===================================================================== */

/* ---- Header turns transparent/white over the dark hero, solid on scroll ---- */
.header.over-dark:not(.scrolled){ background:transparent; box-shadow:none; }
.header.over-dark:not(.scrolled) .brand{ color:#fff; }
.header.over-dark:not(.scrolled) .nav-links a{ color:rgba(255,255,255,.82); }
.header.over-dark:not(.scrolled) .nav-links a:hover{ color:#fff; }
.header.over-dark:not(.scrolled) .nav-toggle{ color:#fff; }

/* ---- Hero shell ---- */
.xhero{
  position:relative; isolation:isolate; overflow:hidden;
  background:
    radial-gradient(60% 50% at 78% 38%, rgba(194,24,7,.28), transparent 60%),
    radial-gradient(40% 40% at 12% 20%, rgba(194,24,7,.10), transparent 60%),
    linear-gradient(180deg,#0a0a0d 0%, #0d0e12 60%, #0a0a0d 100%);
  color:#fff; padding:8.5rem 0 3.5rem;
}
.xhero::before{ /* subtle grid texture */
  content:""; position:absolute; inset:0; z-index:0; opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:54px 54px; mask-image:radial-gradient(circle at 50% 40%, #000, transparent 80%);
}
/* Liquid Chrome animated backdrop (sits behind everything in the hero) */
#liquid-hero{ position:absolute; inset:0; z-index:0; opacity:.45; pointer-events:none; }
#liquid-hero canvas{ width:100%; height:100%; }
.xhero::after{ /* darkening veil so headline + cards stay readable over the chrome */
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(10,10,13,.55), rgba(10,10,13,.78));
}
.xhero .container{ position:relative; z-index:2; }

.xhero-top{ display:grid; grid-template-columns:1.05fr .95fr; gap:2.5rem; align-items:center; }
@media (max-width:940px){ .xhero-top{ grid-template-columns:1fr; text-align:center; } }

.xhero .keyline{
  display:inline-flex; align-items:center; gap:.55rem; font-family:var(--font-head); font-weight:600;
  font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.6);
  border:1px solid rgba(255,255,255,.14); padding:.4rem .9rem; border-radius:999px; margin-bottom:1.6rem;
}
.xhero .keyline i{ color:var(--accent); }
.xhero h1{
  font-family:'Poppins','Inter',system-ui,sans-serif;
  font-weight:900;                       /* black */
  letter-spacing:-.03em;                 /* Poppins is wide — ease the tracking */
  line-height:1;                         /* fits the hero in one frame */
  font-size:clamp(2.4rem,5vw,4.4rem);    /* scales to fit, no overflow */
  color:#fff;
}
.xhero h1 .red{ color:var(--accent); text-shadow:0 0 50px rgba(194,24,7,.5); }
.xhero h1 .word{ display:inline-block; opacity:0; transform:translateY(40%); }
.xhero .sub{ font-size:clamp(1.05rem,1.7vw,1.3rem); color:rgba(255,255,255,.7); max-width:30ch; margin:1.4rem 0 0; }
@media (max-width:940px){ .xhero .sub{ margin-inline:auto; } }
.xhero .xcta{ display:flex; gap:1rem; margin-top:2.2rem; flex-wrap:wrap; }
@media (max-width:940px){ .xhero .xcta{ justify-content:center; } }
.xhero .btn-outline{ background:transparent; color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); }
.xhero .btn-outline:hover{ box-shadow:inset 0 0 0 1px #fff; transform:translateY(-3px); }

/* ---- Orb stage ---- */
.orb-stage{ position:relative; width:100%; aspect-ratio:1/1; max-width:520px; margin-inline:auto; }
#orbCanvas{ position:absolute; inset:0; width:100%; height:100%; }
.orb-core{
  position:absolute; left:50%; top:50%; width:30%; height:30%; transform:translate(-50%,-50%);
  border-radius:50%; background:radial-gradient(circle, #ff5a3c 0%, var(--accent) 40%, transparent 72%);
  filter:blur(6px); animation:orbPulse 2s ease-in-out infinite;
}
@keyframes orbPulse{ 0%,100%{ opacity:.5; transform:translate(-50%,-50%) scale(.96); } 50%{ opacity:1; transform:translate(-50%,-50%) scale(1.14); } }
.orb-label{
  position:absolute; transform:translate(-50%,-50%); z-index:3;
  background:rgba(20,20,24,.72); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.12);
  border-radius:12px; padding:.5rem .8rem; font-size:.78rem; font-weight:600; white-space:nowrap;
  box-shadow:0 14px 40px -16px rgba(0,0,0,.7); display:flex; align-items:center; gap:.45rem;
}
.orb-label i{ color:var(--accent); }
.orb-label small{ display:block; color:rgba(255,255,255,.5); font-weight:500; font-size:.66rem; }

/* ---- Stats strip ---- */
.xstats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:3rem;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); border-radius:18px; overflow:hidden;
}
.xstats .cell{ background:#0c0d11; padding:1.3rem 1rem; text-align:center; }
.xstats .cell .n{ font-family:var(--font-head); font-weight:800; font-size:clamp(1.3rem,2.6vw,1.9rem); color:#fff; }
.xstats .cell .n .u{ color:var(--accent); }
.xstats .cell .l{ font-size:.74rem; color:rgba(255,255,255,.55); margin-top:.3rem; }
@media (max-width:860px){ .xstats{ grid-template-columns:repeat(2,1fr); } }

/* ---- Stop / Start cards ---- */
.xcards{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-top:1.4rem; }
.xcard{ border-radius:18px; padding:1.6rem; border:1px solid rgba(255,255,255,.08); position:relative; overflow:hidden; }
.xcard .ey{ font-family:var(--font-head); font-weight:600; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; opacity:.7; }
.xcard h4{ font-family:var(--font-head); font-weight:800; font-size:1.5rem; margin:.3rem 0 1rem; color:#fff; }
.xcard ul li{ display:flex; align-items:center; gap:.6rem; padding:.4rem 0; font-size:.92rem; color:rgba(255,255,255,.82); }
.xcard.stop{ background:radial-gradient(120% 120% at 100% 0,rgba(194,24,7,.22),transparent 55%),#0c0d11; }
.xcard.stop h4{ color:#ff6b5e; } .xcard.stop li i{ color:var(--accent); }
.xcard.start{ background:radial-gradient(120% 120% at 100% 0,rgba(34,197,94,.2),transparent 55%),#0c0d11; }
.xcard.start h4{ color:#3ddc84; } .xcard.start li i{ color:var(--success); }
.xcard .vs{ position:absolute; right:1.2rem; top:1.2rem; font-size:1.3rem; opacity:.3; z-index:2; }
/* Text + side image layout */
.xcard.stop, .xcard.start{ display:flex; align-items:center; gap:1.2rem; }
.xcard .xcard-content{ flex:1; min-width:0; }
.xcard-side{ width:40%; max-width:200px; flex:none; border-radius:14px; object-fit:cover;
  border:1px solid rgba(255,255,255,.12); box-shadow:0 14px 40px -18px rgba(0,0,0,.75); }
/* Glow borders */
.xcard.stop{ border:1px solid rgba(194,24,7,.5); box-shadow:0 0 36px -10px rgba(194,24,7,.42); }
.xcard.start{ border:1px solid rgba(34,197,94,.45); box-shadow:0 0 36px -10px rgba(34,197,94,.35); }
@media (max-width:760px){ .xcards{ grid-template-columns:1fr; } }
@media (max-width:520px){ .xcard.stop, .xcard.start{ flex-direction:column; align-items:flex-start; } .xcard-side{ width:100%; max-width:none; } }

/* ---- Bottom tag row ---- */
.xtags{ display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin-top:2rem; }
.xtag{ display:inline-flex; align-items:center; gap:.5rem; font-size:.8rem; font-weight:600; color:rgba(255,255,255,.65);
  border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:.5rem 1rem; }
.xtag i{ color:var(--accent); }

@media (prefers-reduced-motion:reduce){
  .xhero h1 .word{ opacity:1!important; transform:none!important; }
  .orb-core{ animation:none; }
}