/* ============================================================
   SHURIK//VPN — "Signal" design system
   Dark technical-editorial theme shared across all templates.
   Load with: <link rel="stylesheet"
     href="{{ url_for('static', filename='css/signal.css') }}">
   ============================================================ */

:root{
  --ink:#0a0c0b;
  --ink-2:#101413;
  --ink-3:#161c1a;
  --line-soft:rgba(255,255,255,.07);
  --line-mid:rgba(255,255,255,.12);
  --fg:#eef2e9;
  --fg-dim:#8b938a;
  --fg-faint:#5c635b;
  --signal:#c8f135;
  --signal-deep:#9bc21f;
  --danger:#ff5c5c;
  --danger-bg:rgba(255,92,92,.12);
  --ok:#3ddc84;
  --ok-bg:rgba(61,220,132,.12);
  --font-display:'Bricolage Grotesque',sans-serif;
  --font-mono:'Space Mono',ui-monospace,monospace;
  --font-body:'Hanken Grotesk',system-ui,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--fg);
  background:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  overflow-x:hidden;
}

/* --- ambient technical background --- */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(var(--line-soft) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at 50% 0,#000 0,transparent 72%);
          mask-image:radial-gradient(circle at 50% 0,#000 0,transparent 72%);
}
body::after{
  content:"";position:fixed;left:-20%;top:-30%;width:70%;height:70%;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(200,241,53,.10),transparent 70%);
  filter:blur(8px);
}
body>*{position:relative;z-index:1}

.s-wrap{max-width:1120px;margin:0 auto;padding:0 28px}
.s-wrap-sm{max-width:760px;margin:0 auto;padding:0 28px}

/* --- typography helpers --- */
h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.02em;line-height:1.05}
.s-mono{font-family:var(--font-mono)}
.s-big{font-family:var(--font-display);font-weight:800;line-height:.98;
  font-size:clamp(38px,6vw,72px);letter-spacing:-.02em}
.s-big em{font-style:normal;color:var(--signal)}
.s-lead{font-size:19px;color:var(--fg-dim);max-width:52ch}
.s-dim{color:var(--fg-dim)}
.s-accent{color:var(--signal)}
a{color:var(--signal)}

.s-kicker{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--signal-deep);display:flex;align-items:center;gap:12px;margin-bottom:22px}
.s-kicker .ln{height:1px;width:56px;background:var(--signal-deep);opacity:.6}
.s-tag{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-dim)}

/* --- nav --- */
.s-nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);
  background:rgba(10,12,11,.72);border-bottom:1px solid var(--line-soft)}
.s-nav-in{display:flex;align-items:center;justify-content:space-between;height:64px;
  max-width:1120px;margin:0 auto;padding:0 28px}
.s-brand{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);
  font-weight:700;letter-spacing:.02em;font-size:15px;color:var(--fg);text-decoration:none}
.s-dot{width:9px;height:9px;border-radius:50%;background:var(--signal);flex-shrink:0;
  box-shadow:0 0 0 0 rgba(200,241,53,.6);animation:s-pulse 2.2s infinite}
@keyframes s-pulse{0%{box-shadow:0 0 0 0 rgba(200,241,53,.5)}70%{box-shadow:0 0 0 10px rgba(200,241,53,0)}100%{box-shadow:0 0 0 0 rgba(200,241,53,0)}}
.s-nav-links{display:flex;align-items:center;gap:22px;font-size:14px}
.s-nav-links a{color:var(--fg-dim);text-decoration:none;transition:color .2s}
.s-nav-links a:hover{color:var(--fg)}

/* --- buttons --- */
.s-btn{font-family:var(--font-mono);font-size:13px;font-weight:700;text-decoration:none;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:2px;border:none;background:none;
  transition:transform .18s ease,box-shadow .18s ease,background .18s,color .18s}
.s-btn-signal{background:var(--signal);color:#0a0c0b;box-shadow:0 0 0 1px var(--signal)}
.s-btn-signal:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(200,241,53,.28)}
.s-btn-ghost{color:var(--fg);box-shadow:inset 0 0 0 1px var(--line-mid)}
.s-btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--signal);color:var(--signal)}
.s-btn-danger{color:var(--danger);box-shadow:inset 0 0 0 1px rgba(255,92,92,.4)}
.s-btn-danger:hover{background:var(--danger-bg)}
.s-btn-block{width:100%}

/* --- cards / panels --- */
.s-card{background:var(--ink-2);border:1px solid var(--line-soft);padding:30px 28px}
.s-card:hover{border-color:var(--line-mid)}
.s-panel{background:var(--ink-2);border:1px solid var(--line-soft);padding:36px}
.s-panel-accent{border-left:2px solid var(--signal)}

/* --- section --- */
.s-sec{padding:72px 0;position:relative}
.s-sec h2{font-weight:700;font-size:clamp(26px,4vw,40px);margin-top:10px;max-width:22ch}
.s-hero{padding:88px 0 64px}

/* --- feature grid with hairlines --- */
.s-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);margin-top:40px}
.s-cell{background:var(--ink);padding:32px 28px;transition:background .25s}
.s-cell:hover{background:var(--ink-2)}
.s-cell .idx{font-family:var(--font-mono);font-size:12px;color:var(--signal-deep)}
.s-cell h3{font-family:var(--font-display);font-weight:600;font-size:20px;margin:16px 0 9px}
.s-cell p{font-size:15px;color:var(--fg-dim)}
.s-cell .bar{height:2px;width:34px;background:var(--signal);margin-top:20px;transition:width .3s ease}
.s-cell:hover .bar{width:64px}

/* --- forms --- */
label,.s-label{display:block;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fg-dim);margin-bottom:8px}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=search],input[type=tel],input[type=url],input[type=date],
select,textarea,.s-input{
  width:100%;font-family:var(--font-body);font-size:15px;color:var(--fg);
  background:var(--ink-3);border:1px solid var(--line-mid);border-radius:2px;
  padding:12px 14px;transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus,.s-input:focus{
  outline:none;border-color:var(--signal);box-shadow:0 0 0 3px rgba(200,241,53,.14)}
::placeholder{color:var(--fg-faint)}
textarea{min-height:120px;resize:vertical}

/* --- badges / pills --- */
.s-badge{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:5px 12px;border-radius:2px;display:inline-flex;align-items:center;gap:6px}
.s-badge-signal{background:var(--signal);color:#0a0c0b}
.s-badge-ok{background:var(--ok-bg);color:var(--ok);box-shadow:inset 0 0 0 1px rgba(61,220,132,.3)}
.s-badge-danger{background:var(--danger-bg);color:var(--danger);box-shadow:inset 0 0 0 1px rgba(255,92,92,.3)}
.s-badge-mute{background:var(--ink-3);color:var(--fg-dim);box-shadow:inset 0 0 0 1px var(--line-soft)}

/* Component classes set `display`, which outranks the browser rule for [hidden]. */
[hidden]{display:none!important}

/* --- flash / alerts --- */
.s-flash{border-radius:2px;padding:14px 16px;margin-bottom:22px;font-size:15px;
  display:flex;align-items:center;gap:10px}
.s-flash-danger{background:var(--danger-bg);color:var(--danger);border:1px solid rgba(255,92,92,.35)}
.s-flash-ok{background:var(--ok-bg);color:var(--ok);border:1px solid rgba(61,220,132,.35)}
.s-flash-info{background:var(--ink-2);color:var(--fg-dim);border:1px solid var(--line-mid);border-left:2px solid var(--signal)}

/* --- data code block (configs, tokens) --- */
.s-code{font-family:var(--font-mono);font-size:13px;color:var(--signal);
  background:#06110d;border:1px solid var(--line-soft);border-radius:2px;
  padding:14px 16px;word-break:break-all;line-height:1.7}

/* --- tables --- */
.s-table{width:100%;border-collapse:collapse;font-size:14px}
.s-table th{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-dim);text-align:left;padding:12px 14px;border-bottom:1px solid var(--line-mid);font-weight:400}
.s-table td{padding:13px 14px;border-bottom:1px solid var(--line-soft);color:var(--fg)}
.s-table tr:hover td{background:var(--ink-2)}

/* --- metrics row --- */
.s-metrics{display:flex;gap:40px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--line-soft)}
.s-metric .n{font-family:var(--font-mono);font-size:24px;font-weight:700;color:var(--fg)}
.s-metric .n small{color:var(--signal);font-size:15px}
.s-metric .l{font-size:13px;color:var(--fg-dim);margin-top:2px}

/* --- footer --- */
.s-footer{border-top:1px solid var(--line-soft);padding:44px 0;margin-top:48px}
.s-footer-in{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
  max-width:1120px;margin:0 auto;padding:0 28px}
.s-footer small{font-family:var(--font-mono);font-size:12px;color:var(--fg-dim)}

/* --- load reveal --- */
.s-rv{opacity:0;transform:translateY(18px);animation:s-rise .7s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes s-rise{to{opacity:1;transform:none}}

/* --- back link --- */
.s-back{font-family:var(--font-mono);font-size:13px;color:var(--fg-dim);text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;transition:color .2s}
.s-back:hover{color:var(--signal)}

@media(max-width:640px){
  .s-nav-links a:not(.s-btn){display:none}
  .s-hero{padding:56px 0 40px}
  .s-metrics{gap:26px}
  .s-panel{padding:26px 22px}
}