@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');

:root {
  /* Core palette */
  --bg: #0b0b0d;
  --panel: #101014;
  --panel-2: #0e0e12;
  --sunken: #0b0b0f;
  --grid: #15151b;
  --line: #1c1c24;
  --line-2: #232331;
  --text: #e6e6ea;
  --muted: #9a9aa3;
  --dim: #6c6c76;
  --good: #00ff8a;
  --warn: #ffd166;
  --bad: #ff4d4d;
  --info: #46a0ff;
  --accent: #ff3b30;
  --accent-2: #f25f5c;
  --accent-soft: #24191b;
  --glow: 0 0 0.5rem rgba(255, 59, 48, 0.35);

  /* Typography */
  --sans: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layout tokens */
  --radius: 6px;
  --radius-lg: 10px;
  --pad: 14px;
  --pad-lg: 18px;
}


/* GLOBAL */
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0;background:radial-gradient(1200px 900px at 80% -10%,#101018 0%,#0b0b0d 50%,#09090a 100%);
  color:var(--text); font-family:var(--mono); letter-spacing:.2px;
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
  background-color: #0b0b0d;
  overscroll-behavior: none;
}

/* subtle grid */
body::before{
  content:""; position:fixed; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 60px 60px, 60px 60px;
  pointer-events:none; mask-image: radial-gradient(ellipse at 50% 50%, #000 40%, rgba(0,0,0,0) 100%);
  opacity:.35;
}

/* App frame */
.app{
  display:grid; grid-template-columns:280px 1fr; grid-template-rows:64px 1fr;
  grid-template-areas:"side head" "side main"; min-height:100vh;
}
.head{grid-area:head; display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; border-bottom:1px solid var(--line); background:linear-gradient(#0f0f13,#0c0c10);
}
.brand{display:flex; gap:10px; align-items:center; font-weight:600; color:#f04f4f; letter-spacing:.8px}
.brand .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px #b82323}
.clock{font-size:14px;color:var(--dim)}

.side{grid-area:side; border-right:1px solid var(--line); padding:14px; background:var(--panel)}
.side .title{font-size:14px;color:var(--dim); margin:8px 0 12px}
.nav{list-style:none;margin:0;padding:0; display:flex;flex-direction:column; gap:6px}

.nav li{padding:8px 10px;border:1px solid var(--line); background:var(--panel-2); border-radius:var(--radius);
  cursor:pointer; transition:.15s; font-size:13px; color:#cfd0d6}
.nav li:hover{border-color:#2b2b39; transform:translateY(-1px)}
.nav li.active{color:#fff;border-color:#3b3b4a; box-shadow:var(--glow)}
.nav-link{text-decoration:none;color:#fff;display: block}

.main{grid-area:main; padding:16px; display:grid; grid-template-columns:repeat(12,1fr); gap:14px}

/* Cards */
.card{background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--pad); position:relative; overflow:hidden}
.card::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient( to bottom, rgba(255,59,48,.06), transparent 120px);
  mix-blend-mode:screen; opacity:.6}
.card h2{margin:0 0 10px; font-size:13px; color:#f35; letter-spacing:.8px}

.span-4{grid-column:span 4} .span-6{grid-column:span 6} .span-8{grid-column:span 8} .span-12{grid-column:span 12}

/* micro UI */
.kv{display:flex;flex-wrap:wrap;flex-direction:row;gap:10px}
.kv .box{flex:1;background:#0c0c10;border:1px solid var(--line);padding:12px;border-radius:var(--radius)}
.kv .box .quote{font-size:13px;color:var(--dim);text-align:center;margin-bottom:10px}
.kv .box .details{font-size:13px;color:#ffffff}
.kv .box .label{font-size:13px;color:var(--dim)}
.kv .box .value{font-size:22px;color:#00ff9d}
.kv .box .details a {
  word-wrap: break-word;
  overflow-wrap: anywhere;
  word-break: break-all;
  display: block;
  max-width: 100%;
  white-space: normal;
}

.testimonial-spacer {margin-top:10px}
.endorsement-container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;margin-top:10px;gap:10px}    
.endorsement-image img {
  width: 48px;        /* match your previous number’s visual footprint */
  height: 48px;
  border-radius: 50%; /* circular avatar */
  object-fit: cover;  /* avoids stretching */
  display: block;
  margin: 0 auto;     /* center horizontally */
}

.credentials-image img {
  max-width: 100%;        
  object-fit: cover;  /* avoids stretching */
  display: block;
  margin: 0 auto;     /* center horizontally */
}


/* log */
.log{font-size:14px;color:#bdbdc7; line-height:1.5}
.log .t{color:#8bb7ff}
.log .h{color:#ff6565}
.log .l{color:#14ffb1}

a.plain-link {text-decoration:none;color:inherit}

/* status sphere (wireframe anim) */
.sphere{--s:140px; width:var(--s); height:var(--s); border-radius:50%; margin:0 auto 8px;
  position:relative; filter:drop-shadow(0 0 10px rgba(255,255,255,.05))}
.sphere::before,.sphere::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:1px solid #2a2a34; animation:rotY 12s linear infinite;
}
.sphere::after{border:none; border-left:1px solid #2a2a34; border-right:1px solid #2a2a34; animation:rotX 9s linear infinite}
@keyframes rotY{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}
@keyframes rotX{from{transform:rotateX(0deg)}to{transform:rotateX(360deg)}}

/* tables (terminal) */
.table{width:100%; border-collapse:collapse; font-size:14px}
.table th,.table td{border-bottom:1px solid var(--line); padding:8px 6px}
.table th{color:#9aa; font-weight:400; text-align:left}
.table tr:hover td{background:#0f0f16}

/* tags & chips */
.tag{font-size:14px;padding:3px 6px;border:1px solid var(--line);border-radius:999px;color:#cbd}
.tag.red{border-color:#48202a;background:#201117;padding-left:15px;color:#ff7a7a}
.tag.green{border-color:#1e3b2b;background:#0e1d15;padding-left:15px;color:#9effc5}

/* bars */
.bar{display:flex; gap:2px}
.bar span{height:8px;flex:1;background:#1b1b22}
.bar span.on{background:#62ffa8}

/* Control Radar (page 4) */
.radar{background:#040507; border:1px solid var(--line); border-radius:var(--radius-lg); position:relative; height:540px; overflow:hidden}
.radar .grid{position:absolute; inset:0; background:
 radial-gradient(circle at 50% 50%, transparent 0 28%, rgba(255,255,255,.05) 29% 30%, transparent 31% 60%, rgba(255,255,255,.05) 61% 62%, transparent 63%),
 repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.04) 0 1px, transparent 1px 60px);
 opacity:.45}
.radar .sweep{position:absolute; inset:0; background:
 conic-gradient(from 0deg, rgba(70,160,255,.25), rgba(0,0,0,0) 25%); 
 mix-blend-mode:screen; animation:sweep 6s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}
.radar .dot{position:absolute; width:10px;height:10px;border-radius:50%; background:#71ffb4;
  box-shadow:0 0 10px #71ffb4, 0 0 2px #000 inset; }

/* Buttons */
.btn{padding:8px 10px; font-size:14px; border:1px solid var(--line); background:#121218; color:#d5d7df; border-radius:4px; cursor:pointer}
.btn:hover{border-color:#2e2e3c}

/* Workflow nodes (page 3) */
.flow{position:relative; height:540px; background:linear-gradient(#0c0c10,#0a0a0d); border:1px solid var(--line); border-radius:var(--radius)}
.node{position:absolute; background:#0f0f16; border:1px solid #2e2e40; padding:10px 12px; border-radius:8px; color:#d5d7df; box-shadow:0 0 0 1px #1f1f2d inset}
.node .mini{font-size:14px;color:#ff7a7a;margin-bottom:4px}
.node.ok .mini{color:#9effc5}
.link{position:absolute; border-top:1px dashed #34344a; transform-origin:left}
.playpad{position:absolute; right:10px; bottom:10px; display:flex; gap:6px}

.notes-row-link {display: block;width: 100%;color:white;text-decoration:none;padding: 8px 12px;}
.notes-row-link:hover {background: rgba(255,255,255,0.1);}