/* ==========================================================================
   VIREEL — Industrial Chiaroscuro Design System
   Global stylesheet. Load BEFORE any page-specific <style> block.
   ========================================================================== */

/* ── Fonts ────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Archivo:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

/* ── Reset ────────────────────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
html,body{height:100%;}
img,svg,video{display:block;max-width:100%;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
a{color:inherit;text-decoration:none;}
input,textarea,select{font:inherit;color:inherit;}
:focus:not(:focus-visible){outline:none;}
:focus-visible{outline:2px solid var(--crimson);outline-offset:2px;}

/* ── Tokens ───────────────────────────────────────────────────────────── */
:root{
  /* Surface tones — Deep Carbon → Cold Slate */
  --bg:           #0E0E0E;
  --carbon:       #1A1A1A;
  --slate:        #242424;
  --slate-2:      #2A2A2A;
  --slate-3:      #333333;

  /* Ink */
  --ink:          #F0EDE8;
  --ink-2:        rgba(240,237,232,0.70);
  --ink-3:        rgba(240,237,232,0.44);
  --ink-4:        rgba(240,237,232,0.22);

  /* Action Crimson */
  --crimson:      #D32F2F;
  --crimson-hi:   #EF4444;
  --crimson-lo:   #9B1C1C;
  --crimson-glow: rgba(211,47,47,0.32);
  --crimson-wash: rgba(211,47,47,0.08);

  /* Rating tones */
  --rating-s:     #4ADE80;   /* elite green */
  --rating-a:     #D32F2F;   /* crimson */
  --rating-b:     #94A3B8;   /* cold slate */
  --rating-c:     #F59E0B;   /* amber */
  --rating-d:     #EF4444;   /* red */

  /* Borders */
  --line:         rgba(240,237,232,0.08);
  --line-2:       rgba(240,237,232,0.14);
  --line-3:       rgba(240,237,232,0.22);
  --line-hot:     rgba(211,47,47,0.38);

  /* Feedback */
  --ok:           #4ADE80;
  --warn:         #F59E0B;
  --err:          #EF4444;

  /* Glass */
  --glass:        rgba(20,20,20,0.62);
  --glass-hi:     rgba(32,32,32,0.72);

  /* Shadow / elevation */
  --sh-1:         0 1px 0 rgba(255,255,255,0.03) inset, 0 0 0 1px var(--line);
  --sh-2:         0 1px 0 rgba(255,255,255,0.04) inset, 0 0 0 1px var(--line), 0 14px 40px rgba(0,0,0,0.5);
  --sh-3:         0 1px 0 rgba(255,255,255,0.05) inset, 0 0 0 1px var(--line-2), 0 24px 60px rgba(0,0,0,0.6);
  --sh-hot:       0 0 0 1px var(--line-hot), 0 0 48px var(--crimson-glow);

  /* Radii */
  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px;

  /* Type */
  --f-display: 'Bebas Neue', 'Archivo', system-ui, sans-serif;
  --f-body:    'Archivo', system-ui, sans-serif;
  --f-mono:    'Space Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* Motion */
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:   cubic-bezier(0.33, 1, 0.68, 1);
  --dur:        250ms;
  --dur-fast:   150ms;
  --dur-slow:   400ms;
}

/* ── Body base ────────────────────────────────────────────────────────── */
body{
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  overflow-x: hidden;
}

/* ── Grain / noise overlay — global atmosphere ───────────────────────── */
body::before{
  content:'';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.55;
}
/* Subtle crimson flare — anchor for chiaroscuro drama */
body::after{
  content:'';
  position: fixed;
  top: -260px; right: -140px;
  width: 720px; height: 720px;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle, rgba(211,47,47,0.08) 0%, transparent 62%);
}

/* Every stacking context sits above the grain so nothing gets muddy */
body > *{ position: relative; z-index: 2; }

/* ── Typography scale ────────────────────────────────────────────────── */
.display,
h1.display,
.h-display{
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 0.92;
  text-transform: uppercase;
  color: var(--ink);
}

h1,h2,h3,h4,h5,h6{
  font-family: var(--f-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  line-height: 1.02;
  color: var(--ink);
}
h1{ font-size: clamp(48px, 8vw, 120px); }
h2{ font-size: clamp(34px, 5vw, 68px); }
h3{ font-size: clamp(24px, 3vw, 40px); }
h4{ font-size: 22px; }
h5{ font-size: 18px; }
h6{ font-size: 15px; letter-spacing: 0.08em; }

.eyebrow{
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--crimson);
}

.lede{
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 58ch;
}

small, .small{ font-size: 12px; color: var(--ink-3); }
.muted{ color: var(--ink-2); }
.dim{   color: var(--ink-3); }
.mono{  font-family: var(--f-mono); }

/* ── Layout primitives ───────────────────────────────────────────────── */
.container{ max-width: 1280px; margin: 0 auto; padding: 0 48px; }
.stack > * + *{ margin-top: var(--stack-gap, 16px); }
.row{ display:flex; gap: 12px; align-items: center; }
.row-between{ display:flex; gap: 12px; align-items: center; justify-content: space-between; }

/* ── Card — tactile, bordered, inset shadow ──────────────────────────── */
.card{
  background: var(--carbon);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 14px 30px rgba(0,0,0,0.45);
  position: relative;
  transition: border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.card:hover{
  border-color: var(--line-2);
}
.card--hot{
  border-color: var(--line-hot);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 0 1px var(--line-hot),
    0 24px 60px rgba(0,0,0,0.6),
    0 0 80px var(--crimson-glow);
}
.card--glass{
  background: var(--glass);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid var(--line-2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 28px 80px rgba(0,0,0,0.7);
}
.card-head{
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 18px;
}
.card-head svg{ width: 14px; height: 14px; color: var(--crimson); }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: all var(--dur) var(--ease-out);
}
.btn svg{ width: 16px; height: 16px; }
.btn:hover{ border-color: var(--ink-3); transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn:disabled,
.btn[aria-disabled="true"]{
  opacity: 0.42;
  cursor: not-allowed;
  transform: none !important;
}

.btn-primary{
  background: var(--crimson);
  border-color: var(--crimson);
  color: #fff;
  box-shadow: 0 0 0 1px var(--crimson) inset, 0 0 32px var(--crimson-glow);
}
.btn-primary:hover{
  background: var(--crimson-hi);
  border-color: var(--crimson-hi);
  box-shadow: 0 0 0 1px var(--crimson-hi) inset, 0 0 48px rgba(239,68,68,0.48);
}
.btn-primary:active{ background: var(--crimson-lo); }

.btn-ghost{
  background: transparent;
  color: var(--ink-2);
  border-color: var(--line-2);
}
.btn-ghost:hover{
  background: var(--slate);
  color: var(--ink);
  border-color: var(--line-3);
}

.btn-hot{
  background: transparent;
  color: var(--crimson);
  border-color: var(--line-hot);
}
.btn-hot:hover{
  background: var(--crimson-wash);
  border-color: var(--crimson);
  color: #fff;
}

.btn-sm{ padding: 8px 14px; font-size: 12px; }
.btn-lg{ padding: 16px 30px; font-size: 15px; }
.btn-full{ width: 100%; }

/* ── Form controls ───────────────────────────────────────────────────── */
.field{ margin-bottom: 18px; }
.field-label,
label{
  display: block;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="number"],
input[type="search"],
textarea,
select{
  width: 100%;
  background: var(--slate);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 13px 14px;
  font-size: 14px;
  color: var(--ink);
  font-family: var(--f-body);
  outline: none;
  transition: border-color var(--dur) var(--ease-out),
              background var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
input::placeholder,
textarea::placeholder{ color: var(--ink-4); }
input:hover,
textarea:hover,
select:hover{ border-color: var(--line-3); }
input:focus,
textarea:focus,
select:focus{
  border-color: var(--crimson);
  background: var(--slate-2);
  box-shadow: 0 0 0 3px var(--crimson-wash);
}
select{
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23F0EDE8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}
textarea{ min-height: 88px; resize: vertical; }

/* ── Nav ─────────────────────────────────────────────────────────────── */
.nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 48px;
  border-bottom: 1px solid var(--line);
  background: rgba(14,14,14,0.72);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  position: sticky;
  top: 0;
  z-index: 50;
}
.logo{
  font-family: var(--f-display);
  font-size: 28px;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.logo::before{
  content: '';
  display: inline-block;
  width: 10px; height: 10px;
  background: var(--crimson);
  border-radius: 2px;
  box-shadow: 0 0 16px var(--crimson-glow);
}
.logo span{ color: var(--crimson); }

.nav-links{ display: flex; gap: 32px; list-style: none; }
.nav-links a{
  font-size: 12px;
  font-family: var(--f-mono);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color var(--dur) var(--ease-out);
}
.nav-links a:hover{ color: var(--ink); }
.nav-actions{ display: flex; gap: 10px; align-items: center; }

/* ── Badges / rating pills ───────────────────────────────────────────── */
.badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 3px;
  background: var(--slate);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
}
.badge-hot{
  background: var(--crimson-wash);
  border-color: var(--line-hot);
  color: var(--crimson-hi);
}
.badge-live::before{
  content:'';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--rating-s);
  box-shadow: 0 0 8px var(--rating-s);
  animation: pulse 2s var(--ease) infinite;
}

.rating{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 400;
  border-radius: 4px;
  border: 1px solid currentColor;
}
.rating-s{ color: var(--rating-s); background: rgba(74,222,128,0.12); box-shadow: 0 0 14px rgba(74,222,128,0.22); }
.rating-a{ color: var(--rating-a); background: var(--crimson-wash); box-shadow: 0 0 14px var(--crimson-glow); }
.rating-b{ color: var(--rating-b); background: rgba(148,163,184,0.12); }
.rating-c{ color: var(--rating-c); background: rgba(245,158,11,0.12); }
.rating-d{ color: var(--rating-d); background: rgba(239,68,68,0.12); }

/* ── Spinner ─────────────────────────────────────────────────────────── */
.spin{
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.18);
  border-top-color: var(--crimson);
  border-radius: 50%;
  animation: rot 0.62s linear infinite;
}
@keyframes rot{ to{ transform: rotate(360deg); } }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:0.35;} }

/* ── Progress bar ────────────────────────────────────────────────────── */
.prog{
  height: 4px;
  background: var(--slate);
  border-radius: 2px;
  overflow: hidden;
}
.prog-fill{
  height: 100%;
  background: linear-gradient(90deg, var(--crimson-lo), var(--crimson), var(--crimson-hi));
  border-radius: 2px;
  box-shadow: 0 0 12px var(--crimson-glow);
  transition: width var(--dur) var(--ease-out);
}

/* ── Toast ───────────────────────────────────────────────────────────── */
.toast-stack{
  position: fixed;
  top: 24px; right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast{
  background: var(--carbon);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--crimson);
  padding: 12px 18px;
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--ink);
  box-shadow: 0 20px 48px rgba(0,0,0,0.6);
  pointer-events: auto;
  animation: toast-in var(--dur) var(--ease-out);
}
.toast-ok{  border-left-color: var(--ok); }
.toast-err{ border-left-color: var(--err); }
@keyframes toast-in{ from{ opacity:0; transform: translateX(12px); } to{ opacity:1; transform: translateX(0); } }

/* ── Modal ───────────────────────────────────────────────────────────── */
.modal-bg{
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(5,5,5,0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal-bg.open{ display: flex; animation: fade-in var(--dur) var(--ease-out); }
@keyframes fade-in{ from{ opacity:0; } to{ opacity:1; } }
.modal{
  background: var(--glass-hi);
  backdrop-filter: blur(32px) saturate(140%);
  -webkit-backdrop-filter: blur(32px) saturate(140%);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: 32px;
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 40px 100px rgba(0,0,0,0.8);
  animation: modal-in var(--dur) var(--ease-out);
}
@keyframes modal-in{ from{ opacity:0; transform: translateY(12px) scale(0.98); } to{ opacity:1; transform: translateY(0) scale(1); } }
.modal-title{
  font-family: var(--f-display);
  font-size: 26px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-close{
  color: var(--ink-3);
  padding: 6px;
  border-radius: var(--r-xs);
  transition: color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.modal-close:hover{ color: var(--ink); background: var(--slate); }
.modal-foot{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

/* ── Alert ───────────────────────────────────────────────────────────── */
.alert{
  display: none;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--r-sm);
  font-size: 13px;
  margin-bottom: 16px;
  border: 1px solid;
}
.alert.show{ display: flex; }
.alert-err{ background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.35); color: var(--err); }
.alert-ok{  background: rgba(74,222,128,0.08); border-color: rgba(74,222,128,0.35); color: var(--ok); }
.alert-warn{ background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.35); color: var(--warn); }
.alert svg{ width: 16px; height: 16px; flex-shrink: 0; }

/* ── Divider ─────────────────────────────────────────────────────────── */
.divider{
  height: 1px;
  background: var(--line);
  margin: 20px 0;
  border: 0;
}
.divider-text{
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.divider-text::before,
.divider-text::after{
  content:'';
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ── Cursor (desktop only) ───────────────────────────────────────────── */
@media (pointer: fine){
  html,body{ cursor: none; }
  .cursor{
    position: fixed;
    top: 0; left: 0;
    width: 22px; height: 22px;
    border: 1.5px solid var(--crimson);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    mix-blend-mode: difference;
    transform: translate(-50%, -50%);
    transition: width var(--dur) var(--ease-out),
                height var(--dur) var(--ease-out),
                background var(--dur) var(--ease-out);
    will-change: transform;
  }
  .cursor-dot{
    position: fixed;
    top: 0; left: 0;
    width: 4px; height: 4px;
    background: var(--crimson);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    transform: translate(-50%, -50%);
    will-change: transform;
  }
  .cursor.is-hot{
    width: 44px; height: 44px;
    background: var(--crimson-wash);
  }
  a, button, input, select, textarea,
  [role="button"], .clickable{
    cursor: none;
  }
}

/* ── Maintenance banner ──────────────────────────────────────────────── */
.m-banner{
  display: none;
  background: linear-gradient(90deg, transparent, var(--crimson-wash), transparent);
  border-bottom: 1px solid var(--line-hot);
  padding: 12px 24px;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--crimson-hi);
}
.m-banner.show{ display: block; }

/* ── Footer ──────────────────────────────────────────────────────────── */
.ft{
  border-top: 1px solid var(--line);
  padding: 40px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  background: var(--carbon);
}
.ft-links{ display:flex; gap: 28px; list-style: none; flex-wrap: wrap; }
.ft-links a{
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color var(--dur) var(--ease-out);
}
.ft-links a:hover{ color: var(--crimson); }
.ft-copy{
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1024px){
  .container{ padding: 0 32px; }
  .nav{ padding: 18px 32px; }
}
@media (max-width: 768px){
  .container{ padding: 0 20px; }
  .nav{ padding: 16px 20px; }
  .nav-links{ display: none; }
  h1{ font-size: clamp(40px, 12vw, 72px); }
  h2{ font-size: clamp(30px, 9vw, 48px); }
  .card{ padding: 20px; }
  .ft{ padding: 32px 20px; flex-direction: column; text-align: center; }
}
@media (max-width: 480px){
  .container{ padding: 0 16px; }
  .nav{ padding: 14px 16px; }
}

/* Desktop cursor off on touch */
@media (pointer: coarse){
  .cursor, .cursor-dot{ display: none !important; }
}

/* ── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  body::before{ opacity: 0.3; }
  .cursor, .cursor-dot{ display: none !important; }
  html,body{ cursor: auto; }
  a,button,input,select,textarea,[role="button"],.clickable{ cursor: auto; }
}

/* ── Utilities ───────────────────────────────────────────────────────── */
.hidden{ display: none !important; }
.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.text-center{ text-align: center; }
.text-crimson{ color: var(--crimson); }
.text-ink{ color: var(--ink); }
.text-dim{ color: var(--ink-3); }
.uppercase{ text-transform: uppercase; letter-spacing: 0.08em; }