/* ==============================================================
   VALOHAX — Shared design system
   ============================================================== */

:root {
  /* Core palette */
  --val-red:        #ff4655;
  --val-red-dim:    #cf2e3c;
  --val-red-light:  #ff6b78;
  --val-bg:         #0a0e13;        /* deeper than 0F1923 = more contrast */
  --val-panel:      #11181f;
  --val-panel-2:    #161e26;
  --val-line:       rgba(255,255,255,.08);
  --val-line-strong:rgba(255,255,255,.18);

  /* Accent colours */
  --val-cyan:       #5BE9F1;        /* radiant / verified */
  --val-gold:       #ffab52;        /* immortal / premium */
  --val-purple:     #b07cff;        /* exclusive */
  --val-emerald:    #20e3a3;        /* undetected */

  /* Typography */
  --font-display: "Tungsten", "Bebas Neue", "Oswald", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--val-bg); }
body {
  font-family: var(--font-body);
  background: var(--val-bg);
  color: white;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ----- Background patterns / decoration ----- */
.bg-grid {
  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: 48px 48px;
}
.bg-noise::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.6'/></svg>");
  opacity: .05;
  mix-blend-mode: overlay;
}
.bg-radial-red {
  background:
    radial-gradient(ellipse at 20% -10%, rgba(255,70,85,.35), transparent 50%),
    radial-gradient(ellipse at 100% 50%, rgba(91,233,241,.12), transparent 60%),
    var(--val-bg);
}

/* ----- Navbar ----- */
.nav-link {
  position: relative;
  font-weight: 500;
  font-size: .9rem;
  letter-spacing: .02em;
  color: rgba(255,255,255,.75);
  transition: color .18s ease;
  padding: .25rem 0;
}
.nav-link:hover { color: white; }
.nav-link.active { color: white; }
.nav-link.active::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -10px; height: 2px;
  background: var(--val-red);
  border-radius: 2px;
  box-shadow: 0 0 12px var(--val-red);
}

/* ----- Buttons ----- */
.btn-primary,
.btn-secondary,
.btn-ghost {
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: .55rem;
  padding: .85rem 1.6rem;
  border-radius: .85rem;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  transition: all .18s ease;
  font-size: .95rem;
}
.btn-primary {
  background: var(--val-red);
  color: white;
  box-shadow:
    inset 0 -3px 0 rgba(0,0,0,.2),
    0 8px 24px -8px rgba(255,70,85,.45);
  border: 1px solid var(--val-red-light);
}
.btn-primary:hover {
  background: var(--val-red-light);
  transform: translateY(-1px);
  box-shadow:
    inset 0 -3px 0 rgba(0,0,0,.2),
    0 12px 30px -10px rgba(255,70,85,.6);
}
.btn-secondary {
  background: white;
  color: var(--val-bg);
}
.btn-secondary:hover { background: rgba(255,255,255,.85); }
.btn-ghost {
  background: transparent;
  color: white;
  border: 1px solid var(--val-line-strong);
}
.btn-ghost:hover { background: rgba(255,255,255,.05); }

.btn-cta-large {
  padding: 1.1rem 2.2rem;
  font-size: 1.05rem;
  border-radius: 1rem;
}

/* Slashy / corner-clipped panels (Valorant's signature shape) */
.clip-corners {
  clip-path: polygon(
    16px 0,
    100% 0,
    100% calc(100% - 16px),
    calc(100% - 16px) 100%,
    0 100%,
    0 16px
  );
}
.clip-corners-sharp {
  clip-path: polygon(
    8px 0, 100% 0, 100% calc(100% - 8px),
    calc(100% - 8px) 100%, 0 100%, 0 8px
  );
}

/* ----- Card ----- */
.card {
  background: linear-gradient(180deg, var(--val-panel) 0%, var(--val-panel-2) 100%);
  border: 1px solid var(--val-line);
  border-radius: 1.25rem;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s, box-shadow .25s;
  position: relative;
  overflow: hidden;
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--val-line-strong);
  box-shadow: 0 24px 48px -16px rgba(0,0,0,.55);
}
.card-glow:hover {
  border-color: rgba(255,70,85,.5);
  box-shadow: 0 24px 48px -16px rgba(255,70,85,.25);
}
.card-glow::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,70,85,.18), transparent 40%);
  opacity: 0; transition: opacity .25s;
  pointer-events: none;
}
.card-glow:hover::before { opacity: 1; }

/* Section heading kicker */
.kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--val-red);
}
.kicker::before {
  content: ''; width: 24px; height: 1px;
  background: var(--val-red);
}

/* Big headlines */
.h-hero {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 7.5rem);
  line-height: .9;
  letter-spacing: -.03em;
  text-transform: uppercase;
  font-weight: 900;
}

/* Stat counter typography */
.stat-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 4.5vw, 4rem);
  letter-spacing: -.025em;
  line-height: 1;
}

/* Coloured pills */
.pill {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .65rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pill-emerald  { background: rgba(32,227,163,.12); color: var(--val-emerald); }
.pill-red      { background: rgba(255,70,85,.12);  color: var(--val-red-light); }
.pill-cyan     { background: rgba(91,233,241,.12); color: var(--val-cyan); }
.pill-gold     { background: rgba(255,171,82,.12); color: var(--val-gold); }
.pill-purple   { background: rgba(176,124,255,.12);color: var(--val-purple); }

/* Live dot */
.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--val-emerald);
  box-shadow: 0 0 8px var(--val-emerald);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: .35; transform: scale(.85); }
}

/* Agent card showcase */
.agent-card {
  position: relative;
  height: 420px;
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid var(--val-line);
  background: var(--val-panel);
  cursor: pointer;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.agent-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.agent-card:hover img { transform: scale(1.08); }
.agent-card .overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10,14,19,.95) 100%);
}
.agent-card .meta {
  position: absolute; bottom: 1rem; left: 1.25rem; right: 1.25rem;
}

/* Marquee strip */
.marquee {
  display: flex;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, black 7%, black 93%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 7%, black 93%, transparent 100%);
}
.marquee-track {
  display: flex; gap: 2.5rem;
  animation: marquee 35s linear infinite;
  flex-shrink: 0; padding-right: 2.5rem;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* FAQ accordion */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
.accordion-content.open { max-height: 600px; }

/* Modal animation */
.modal-pop {
  animation: modalPop .25s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes modalPop {
  from { opacity: 0; transform: scale(.92) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Forms */
.input {
  width: 100%;
  background: var(--val-bg);
  border: 1px solid var(--val-line);
  border-radius: .85rem;
  padding: .85rem 1rem;
  color: white;
  font-size: .9rem;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus {
  outline: none;
  border-color: var(--val-red);
  box-shadow: 0 0 0 3px rgba(255,70,85,.18);
}

/* Mobile nav */
.mobile-nav {
  transform: translateY(-12px);
  opacity: 0; pointer-events: none;
  transition: transform .25s ease, opacity .25s ease;
}
.mobile-nav.open {
  transform: translateY(0);
  opacity: 1; pointer-events: auto;
}

/* Animated underline links */
.underline-hover {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: background-size .25s ease;
}
.underline-hover:hover { background-size: 100% 1px; }

/* Glow buttons */
.glow-red:hover {
  box-shadow: 0 0 0 4px rgba(255,70,85,.18), 0 12px 30px -10px rgba(255,70,85,.6);
}

/* Toast */
.toast-pop {
  animation: slideUp .35s cubic-bezier(.2,.8,.2,1);
}
@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--val-bg); }
::-webkit-scrollbar-thumb { background: #2a3744; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--val-red); }

/* Hide scrollbar utility */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Section divider with diagonal slash */
.section-divider {
  position: relative;
  height: 80px;
  background: linear-gradient(180deg, transparent, var(--val-panel));
}
.section-divider::after {
  content: '';
  position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 1px; height: 40px;
  background: linear-gradient(to top, var(--val-red), transparent);
}

/* Image with red overlay */
.tinted {
  position: relative;
  overflow: hidden;
}
.tinted::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,70,85,.25), transparent 50%, rgba(91,233,241,.15));
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Code block style */
.code-block {
  font-family: ui-monospace, "JetBrains Mono", "SF Mono", monospace;
  background: #06090c;
  border: 1px solid var(--val-line);
  border-radius: .75rem;
  padding: 1rem 1.25rem;
  font-size: .85rem;
  color: rgba(255,255,255,.85);
}

/* Table */
.table-pretty {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.table-pretty th, .table-pretty td {
  text-align: left;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--val-line);
}
.table-pretty th {
  font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  font-weight: 600;
}

/* Float animation for hero agent */
.float-y {
  animation: float-y 6s ease-in-out infinite;
}
@keyframes float-y {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-12px); }
}

/* Hover-shine for buttons */
.shine {
  position: relative; overflow: hidden;
}
.shine::after {
  content: '';
  position: absolute; top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.3), transparent);
  transform: skewX(-20deg);
  transition: left .55s ease;
}
.shine:hover::after { left: 125%; }

/* Focus visible accessibility */
:focus-visible {
  outline: 2px solid var(--val-red);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Hero diagonal section breaker */
.skew-section {
  transform: skewY(-2deg);
  transform-origin: top left;
}
.skew-section > * { transform: skewY(2deg); }

/* Disable text selection on big visual elements */
.no-select { user-select: none; -webkit-user-select: none; }

/* Hide on mobile / desktop helpers */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}