/* ============================================================
   Cyb5r — Hi-fi prototype v2 · "Deep Field"
   Futuristic dark theme. Sora/Inter/JetBrains Mono.
   Deep-space navy, cyan→violet energy gradient, restrained glow.
   ============================================================ */

:root{
  /* Surfaces — deep field */
  --cy-void:       #04081A;   /* page background */
  --cy-paper:      #04081A;   /* alias kept for copied components */
  --cy-fog:        #0A1128;   /* tinted surface */
  --cy-fog-2:      #0E1631;
  --cy-card:       #0B1330;   /* card surface */
  --cy-elev:       #101B42;   /* elevated band / code block */
  --cy-mist:       rgba(122,150,201,.18);  /* hairline */
  --cy-mist-2:     rgba(122,150,201,.30);

  /* Text — light on dark */
  --cy-ink:        #EAF1FD;   /* primary text (was navy) */
  --cy-ink-2:      #FFFFFF;
  --cy-ink-soft:   #B9C6E2;
  --cy-slate:      #9FAECB;   /* secondary text */
  --cy-stone:      #64748F;   /* muted */

  /* Brand energy */
  --cy-cyan:       #00E5FF;
  --cy-cyan-2:     #7DF3FF;
  --cy-cyan-soft:  rgba(0,229,255,.10);
  --cy-cyan-ring:  rgba(0,229,255,.25);
  --cy-violet:     #8B6BFF;
  --cy-violet-soft:rgba(139,107,255,.12);

  --cy-success:    #4ADE80;
  --cy-warn:       #FBBF24;
  --cy-danger:     #F87171;

  --grad-brand:    linear-gradient(135deg,#00E5FF 0%, #8B6BFF 100%);
  --grad-hero:     radial-gradient(ellipse at 70% -10%, rgba(0,229,255,.14) 0%, rgba(139,107,255,.08) 34%, transparent 62%);
  --grad-edge:     linear-gradient(135deg, rgba(0,229,255,.5), rgba(139,107,255,.5));

  /* Type */
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --gutter: clamp(24px, 4vw, 80px);
  --container: 1280px;

  /* Shadows / glow */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 2px 10px rgba(0,0,0,.45);
  --shadow-md: 0 10px 32px rgba(0,0,0,.5);
  --shadow-lg: 0 28px 70px rgba(0,0,0,.6);
  --shadow-glow: 0 0 0 4px rgba(0,229,255,.16);
  --glow-cyan: 0 0 24px rgba(0,229,255,.25);

  --ease: cubic-bezier(.22,1,.36,1);
  --dur:  220ms;
}

/* -------- reset / base -------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background:
    radial-gradient(1200px 600px at 80% -100px, rgba(0,229,255,.06), transparent 60%),
    radial-gradient(900px 500px at 0% 30%, rgba(139,107,255,.05), transparent 60%),
    var(--cy-void);
  color: var(--cy-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection{ background: rgba(0,229,255,.30); color: #fff; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img, svg { display: block; max-width: 100%; }

/* -------- type system -------- */
.eyebrow{
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: var(--cy-cyan);
}
.eyebrow.muted{ color: var(--cy-stone); }
.eyebrow.violet{ color: var(--cy-violet); }

.h-hero{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(48px, 6vw, 92px);
  line-height: .98;
  letter-spacing: -.035em;
  color: var(--cy-ink-2);
  text-wrap: balance;
}
.h-display{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.02;
  letter-spacing: -.025em;
  color: var(--cy-ink-2);
}
.h-section{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--cy-ink-2);
}
.h-card{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--cy-ink);
}
.lede{ font-size: 18px; line-height: 1.65; color: var(--cy-slate); max-width: 60ch; }
.lede.small{ font-size: 16px; }
.mono{ font-family: var(--font-mono); }

.gradient-text{
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* -------- layout -------- */
.container{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section{ padding: clamp(56px, 7vw, 104px) 0; }

/* -------- buttons -------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: var(--grad-brand);
  color: #04102A;
  position: relative;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease);
  white-space: nowrap;
}
.btn:hover{ box-shadow: var(--glow-cyan), var(--shadow-md); transform: translateY(-1px); filter: brightness(1.06); }
.btn:active{ transform: scale(.98); }
.btn.ghost{
  background: rgba(255,255,255,.03);
  border: 1px solid var(--cy-mist-2);
  color: var(--cy-ink);
}
.btn.ghost:hover{ background: rgba(255,255,255,.07); box-shadow: none; }
.btn.accent{
  background: var(--cy-cyan);
  color: #04102A;
}
.btn.accent:hover{ box-shadow: var(--glow-cyan); }
.btn.sm{ padding: 8px 15px; font-size: 13px; border-radius: 8px; }
.btn .arrow{ transition: transform var(--dur) var(--ease); }
.btn:hover .arrow{ transform: translateX(2px); }

/* -------- chip / pill -------- */
.chip{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--cy-mist);
  color: var(--cy-slate);
}
.chip .dot{ width: 6px; height: 6px; border-radius: 999px; background: var(--cy-cyan); box-shadow: 0 0 8px rgba(0,229,255,.8); }
.chip.live .dot{ animation: pulse 2s ease-in-out infinite; }
.chip.violet .dot{ background: var(--cy-violet); box-shadow: 0 0 8px rgba(139,107,255,.8); }
.chip.solid{ background: var(--cy-cyan-soft); border-color: rgba(0,229,255,.25); color: var(--cy-cyan); }
.chip.solid.violet{ background: var(--cy-violet-soft); border-color: rgba(139,107,255,.3); color: var(--cy-violet); }
.chip.dark{ background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.85); }

@keyframes pulse {
  0%,100% { opacity: .95; transform: scale(1); }
  50%     { opacity: .45; transform: scale(.9); }
}

/* -------- card surface -------- */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.008)), var(--cy-card);
  border: 1px solid var(--cy-mist);
  border-radius: 14px;
  padding: 24px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card.lift:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-md), 0 0 30px rgba(0,229,255,.07);
  border-color: rgba(0,229,255,.35);
}
.card.dashed{ border-style: dashed; }
.card.dark{
  background:
    radial-gradient(600px 260px at 85% -20%, rgba(0,229,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)),
    var(--cy-elev);
  color: #fff;
  border: 1px solid var(--cy-mist-2);
}

/* -------- header -------- */
.site-header{
  position: sticky; top: 0;
  z-index: 50;
  background: rgba(4,8,26,.72);
  backdrop-filter: saturate(1.3) blur(14px);
  -webkit-backdrop-filter: saturate(1.3) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}
.site-header.scrolled{ border-bottom-color: var(--cy-mist); }
.site-header .inner{
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0;
  transition: padding var(--dur) var(--ease);
}
.site-header.scrolled .inner{ padding: 12px 0; }
.site-header .logo{
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-weight: 800; font-size: 22px;
  letter-spacing: -.025em;
}
.site-header .logo .five{ color: var(--cy-cyan); }
.site-header .links{
  display: flex; gap: 32px;
  font-size: 14px;
  color: var(--cy-slate);
}
.site-header .links a{
  position: relative;
  padding: 4px 0;
  transition: color var(--dur) var(--ease);
}
.site-header .links a::after{
  content: '';
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--grad-brand);
  border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.site-header .links a:hover{ color: var(--cy-ink-2); }
.site-header .links a:hover::after,
.site-header .links a.active::after{ transform: scaleX(1); }
.site-header .links a.active{ color: var(--cy-ink-2); font-weight: 600; }
.site-header .right{ display: flex; align-items: center; gap: 14px; }

/* -------- footer -------- */
.site-footer{
  background: #030614;
  color: rgba(255,255,255,.7);
  padding: 64px 0 32px;
  margin-top: 64px;
  border-top: 1px solid var(--cy-mist);
  position: relative;
}
.site-footer::before{
  content:'';
  position:absolute; top:-1px; left:10%; right:10%;
  height:1px;
  background: var(--grad-brand);
  opacity:.5;
}
.site-footer a{ color: rgba(255,255,255,.7); transition: color var(--dur) var(--ease); }
.site-footer a:hover{ color: var(--cy-cyan); }
.site-footer .cols{
  display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px;
}
.site-footer .col h4{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255,255,255,.4);
  margin: 0 0 14px;
}
.site-footer .col ul{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.site-footer .legal{
  margin-top: 48px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 11px;
  color: rgba(255,255,255,.4); letter-spacing: .1em;
}

/* -------- scribble accent → energy underline -------- */
.scribble{
  position: relative;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0;
}

/* -------- hero -------- */
.hero{
  position: relative;
  padding: clamp(72px, 10vw, 140px) 0 clamp(56px, 7vw, 96px);
  overflow: hidden;
}
.hero::before{
  content: '';
  position: absolute; inset: -10% -10% 20% 20%;
  background: var(--grad-hero);
  pointer-events: none;
  z-index: 0;
}
/* perspective grid floor */
.hero::after{
  content: '';
  position: absolute; left: -10%; right: -10%; bottom: -2%;
  height: 42%;
  background:
    linear-gradient(to right, rgba(0,229,255,.07) 1px, transparent 1px),
    linear-gradient(to top, rgba(0,229,255,.09) 1px, transparent 1px);
  background-size: 56px 44px;
  transform: perspective(600px) rotateX(62deg);
  transform-origin: bottom center;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.5), transparent 85%);
  mask-image: linear-gradient(to top, rgba(0,0,0,.5), transparent 85%);
  pointer-events: none;
  z-index: 0;
}
.hero > *{ position: relative; z-index: 1; }

.network-motif{
  position: absolute;
  right: clamp(-40px, -2vw, 0px);
  top: 40px;
  width: clamp(420px, 50%, 640px);
  height: clamp(360px, 40vw, 480px);
  pointer-events: none;
  z-index: 0;
}

/* -------- image slot defaults -------- */
image-slot{
  --is-bg: var(--cy-fog);
  --is-fg: var(--cy-slate);
  --is-border: var(--cy-mist);
  --is-radius: 10px;
  font-family: var(--font-mono);
}

/* -------- forms / inputs -------- */
.input, .select{
  width: 100%;
  padding: 10px 14px;
  font: 400 14px var(--font-body);
  background: rgba(255,255,255,.035);
  border: 1px solid var(--cy-mist);
  border-radius: 8px;
  color: var(--cy-ink);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input::placeholder{ color: var(--cy-stone); }
.input:focus, .select:focus{ outline: none; border-color: var(--cy-cyan); box-shadow: var(--shadow-glow); }
.select option{ background: var(--cy-card); color: var(--cy-ink); }

/* -------- contact widget -------- */
.contact-widget{
  position: fixed; right: 20px; bottom: 20px;
  z-index: 100;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
  font-family: var(--font-body);
}
.contact-widget .bubble{
  background: var(--grad-brand);
  color: #04102A;
  border-radius: 999px;
  border: none;
  padding: 14px 20px;
  box-shadow: var(--shadow-lg), 0 0 30px rgba(0,229,255,.25);
  display: flex; align-items: center; gap: 12px;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.contact-widget .bubble:hover{ transform: translateY(-2px); box-shadow: var(--shadow-lg), 0 0 44px rgba(0,229,255,.4); }
.contact-widget .bubble .live{
  width: 8px; height: 8px; border-radius: 999px;
  background: #056b38;
  box-shadow: 0 0 0 4px rgba(4,16,42,.25);
  animation: pulse 2.4s ease-in-out infinite;
}

/* -------- drawer -------- */
.drawer-backdrop{
  position: fixed; inset: 0; z-index: 200;
  background: rgba(2,4,14,.62);
  backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.drawer-backdrop.open{ opacity: 1; pointer-events: auto; }
.drawer{
  position: fixed; right: 0; top: 0; bottom: 0;
  z-index: 201;
  width: min(540px, 100vw);
  background: var(--cy-fog);
  border-left: 1px solid var(--cy-mist-2);
  box-shadow: -24px 0 80px rgba(0,0,0,.6);
  transform: translateX(100%);
  transition: transform 320ms var(--ease);
  display: flex; flex-direction: column;
}
.drawer.open{ transform: translateX(0); }
.drawer .head{
  padding: 22px 28px;
  border-bottom: 1px solid var(--cy-mist);
  display: flex; justify-content: space-between; align-items: center;
}
.drawer .body{
  flex: 1; overflow-y: auto;
  padding: 28px;
  display: flex; flex-direction: column; gap: 20px;
}
.drawer .foot{
  padding: 20px 28px;
  border-top: 1px solid var(--cy-mist);
  background: var(--cy-card);
}
.drawer .close{
  width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid var(--cy-mist); background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--cy-slate);
}
.drawer .close:hover{ background: rgba(255,255,255,.06); color: var(--cy-ink); }

/* -------- entry animations -------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up{ animation: fadeUp 600ms var(--ease) both; }
.fade-up.d-1{ animation-delay: 80ms; }
.fade-up.d-2{ animation-delay: 160ms; }
.fade-up.d-3{ animation-delay: 240ms; }
.fade-up.d-4{ animation-delay: 320ms; }
.fade-up.d-5{ animation-delay: 400ms; }

@media (prefers-reduced-motion: reduce){
  .fade-up{ animation: none; }
}

/* -------- prototype badge -------- */
.proto-badge{
  position: fixed; left: 16px; bottom: 16px;
  z-index: 90;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px 8px 8px;
  background: var(--cy-card);
  border: 1px solid var(--cy-mist);
  border-radius: 99px;
  box-shadow: var(--shadow-sm);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--cy-slate);
}
.proto-badge .dot{
  width: 16px; height: 16px; border-radius: 999px;
  background: var(--grad-brand);
  box-shadow: 0 0 10px rgba(0,229,255,.6);
}
.proto-badge a{ color: var(--cy-cyan); font-weight: 600; }


/* ---- PHP build extras: range slider + scoper option focus ---- */
input[type=range]{
  -webkit-appearance:none; appearance:none;
  height:6px; border-radius:99px; outline:none; cursor:pointer;
  background:var(--cy-mist);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:20px; height:20px; border-radius:99px;
  background:var(--cy-void); border:2.5px solid var(--cy-cyan);
  box-shadow:0 0 12px rgba(0,229,255,.5); cursor:pointer;
}
input[type=range]::-moz-range-thumb{
  width:20px; height:20px; border-radius:99px;
  background:var(--cy-void); border:2.5px solid var(--cy-cyan);
  box-shadow:0 0 12px rgba(0,229,255,.5); cursor:pointer;
}
.scope-opt:hover,.scope-check:hover{ border-color:var(--cy-mist-2); }
.scope-opt.sel{ font-weight:700; }

/* ============================================================
   Responsive — tablet & mobile
   Desktop layout lives in inline grid styles in the templates;
   the g3/g4/g5/g-split/opt-grid/f-row/mod-row classes exist only
   so these breakpoints can collapse them (hence the !important).
   ============================================================ */

/* --- header: logo + CTA on row one, nav on its own row --- */
@media (max-width: 860px){
  .site-header .inner{ flex-wrap: wrap; row-gap: 10px; }
  .site-header .links{
    order: 3; width: 100%;
    gap: 22px;
    overflow-x: auto;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
  }
  .site-header .right .chip{ display: none; }
}

/* --- tablet --- */
@media (max-width: 1024px){
  .g-split, .g-split3{ grid-template-columns: 1fr !important; }
  .g3, .g4{ grid-template-columns: repeat(2, 1fr) !important; }
  .g5{ grid-template-columns: repeat(3, 1fr) !important; }
}

@media (max-width: 900px){
  .g5{ grid-template-columns: repeat(2, 1fr) !important; }
  .site-footer .cols{ grid-template-columns: repeat(2, 1fr); }
  .site-footer .cols .col:first-child{ grid-column: 1 / -1; }
  .site-footer .legal{ flex-wrap: wrap; gap: 8px; }
}

/* --- phone --- */
@media (max-width: 680px){
  .h-hero{ font-size: clamp(38px, 11vw, 56px); }
  .g3, .g4, .g5{ grid-template-columns: 1fr !important; }
  .opt-grid{ grid-template-columns: repeat(2, 1fr) !important; }

  /* decorative hero constellation just adds noise on small screens */
  .network-motif{ display: none; }

  /* portal tabs scroll sideways instead of wrapping */
  .tabs-row{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tabs-row a, .tabs-row span{ white-space: nowrap; flex-shrink: 0; }

  /* portal "recent findings" rows: drop assignee + age columns */
  .f-row{ grid-template-columns: 64px auto 1fr !important; }
  .f-row > :nth-child(4), .f-row > :nth-child(5){ display: none; }

  /* training syllabus timeline: tighter label + dot columns */
  .mod-row{ grid-template-columns: 72px 20px 1fr !important; gap: 10px !important; }

  /* full-width buttons read better on phones */
  .hero .btn, .drawer .body .btn{ justify-content: center; }
}