/* ============================================================
   UNIDENTIFIED VPN — Subscription page  ·  v2 "BRAND BOOK / HUD DOSSIER"
   Dark cyberpunk / hacktivist brand system
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@500;600;700;800;900&family=Space+Mono:wght@400;700&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500&display=swap');

:root {
  /* Brand palette */
  --black:    #0A0A0A;
  --black-1:  #0f0f0f;
  --black-2:  #131313;
  --black-3:  #1a1a1a;
  --ghost:    #EDEDED;
  --ghost-dim:#8c8c8c;
  --ghost-fade: rgba(237,237,237,0.55);
  --gray:     #444444;
  --purple:   #A020F0;
  --magenta:  #FF2DA2;

  /* Switchable accents (Tweaks) */
  --accent:   var(--purple);
  --accent-2: var(--magenta);
  --accent-rgb: 160, 32, 240;

  --green:  #2BE08B;
  --amber:  #FFC53D;

  /* Lines */
  --line:     rgba(237,237,237,0.10);
  --line-2:   rgba(237,237,237,0.18);
  --line-soft:rgba(237,237,237,0.05);

  /* Type */
  --f-display: 'Saira Condensed', 'Arial Narrow', sans-serif;
  --f-mono:    'Space Mono', ui-monospace, monospace;
  --f-handle:  'IBM Plex Mono', ui-monospace, monospace;
  --f-body:    'Space Mono', ui-monospace, monospace;
  --f-sans:    'IBM Plex Sans', system-ui, sans-serif;

  /* Texture intensity */
  --tex-halftone: 0.05;
  --tex-scan: 0.03;
  --tex-glitch: 1;

  --maxw: 1080px;
  --frame-pad: 18px;   /* inset of HUD frame from viewport edge */
  --rail-l: 40px;
  --rail-r: 92px;
}

[data-tex="off"]    { --tex-halftone: 0;    --tex-scan: 0;    --tex-glitch: 0; }
[data-tex="subtle"] { --tex-halftone: 0.05; --tex-scan: 0.03; --tex-glitch: 1; }
[data-tex="heavy"]  { --tex-halftone: 0.12; --tex-scan: 0.06; --tex-glitch: 1; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--black);
  color: var(--ghost);
  font-family: var(--f-body);
  line-height: 1.6;
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

/* ---- Ambient textures ----------------------------------------- */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(237,237,237,0.5) 0.6px, transparent 0.7px);
  background-size: 5px 5px; opacity: var(--tex-halftone); mix-blend-mode: screen;
}
.scanlines {
  content: ""; position: fixed; inset: -10% 0; pointer-events: none; z-index: 5;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.55) 3px, rgba(0,0,0,0) 4px);
  opacity: var(--tex-scan); animation: scan 8s linear infinite;
}
@keyframes scan { from { transform: translateY(0); } to { transform: translateY(8px); } }

/* ============================================================
   HUD FRAME  (fixed, decorative)
   ============================================================ */
.frame { position: fixed; inset: 0; pointer-events: none; z-index: 80; }

/* corner brackets */
.frame .corner { position: absolute; width: 34px; height: 34px; }
.frame .corner::before, .frame .corner::after { content: ""; position: absolute; background: var(--accent); }
.frame .corner.tl { top: var(--frame-pad); left: var(--frame-pad); }
.frame .corner.tr { top: var(--frame-pad); right: var(--frame-pad); }
.frame .corner.bl { bottom: var(--frame-pad); left: var(--frame-pad); }
.frame .corner.br { bottom: var(--frame-pad); right: var(--frame-pad); }
/* horizontal arm */
.frame .corner::before { height: 2px; width: 34px; }
/* vertical arm */
.frame .corner::after  { width: 2px; height: 34px; }
.frame .corner.tl::before { top: 0; left: 0; }   .frame .corner.tl::after { top: 0; left: 0; }
.frame .corner.tr::before { top: 0; right: 0; }   .frame .corner.tr::after { top: 0; right: 0; }
.frame .corner.bl::before { bottom: 0; left: 0; } .frame .corner.bl::after { bottom: 0; left: 0; }
.frame .corner.br::before { bottom: 0; right: 0; }.frame .corner.br::after { bottom: 0; right: 0; }
/* small accent square next to TL bracket */
.frame .corner.tl .sq { position: absolute; top: 14px; left: 0; width: 7px; height: 7px; background: var(--accent-2); }

/* glitch bars top & bottom */
.frame .glitch { position: absolute; left: calc(var(--frame-pad) + 40px); right: calc(var(--frame-pad) + 40px); height: 16px; overflow: hidden; opacity: calc(var(--tex-glitch) * 0.9); mix-blend-mode: screen; }
.frame .glitch.top { top: calc(var(--frame-pad) - 6px); }
.frame .glitch.bot { bottom: calc(var(--frame-pad) - 6px); }
.frame .glitch i {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(var(--accent-rgb),0.0) 0 6px, rgba(var(--accent-rgb),0.85) 6px 9px, rgba(var(--accent-rgb),0) 9px 17px),
    repeating-linear-gradient(90deg, rgba(255,45,162,0) 0 11px, rgba(255,45,162,0.8) 11px 13px, rgba(255,45,162,0) 13px 28px),
    repeating-linear-gradient(90deg, rgba(237,237,237,0) 0 23px, rgba(237,237,237,0.5) 23px 24px, rgba(237,237,237,0) 24px 60px);
  filter: blur(0.3px);
  animation: glitchshift 2.6s steps(7) infinite;
}
@keyframes glitchshift { 0%{transform:translateX(0)} 100%{transform:translateX(-28px)} }

/* crosshair markers */
.frame .xh { position: absolute; width: 22px; height: 22px; opacity: 0.85; }
.frame .xh svg { width: 100%; height: 100%; }
.frame .xh.r1 { top: 22%; right: calc(var(--frame-pad) + 4px); }
.frame .xh.r2 { top: 64%; right: calc(var(--frame-pad) + 4px); }
.frame .xh.bl { bottom: 14%; left: calc(var(--frame-pad) + 4px); }

/* edge tick ruler near TR */
.frame .ruler { position: absolute; top: calc(var(--frame-pad) + 6px); right: calc(var(--frame-pad) + 6px); width: 8px; height: 70px;
  background: repeating-linear-gradient(to bottom, var(--ghost-dim) 0 1px, transparent 1px 6px); opacity: 0.5; }

/* ---- Left rail ---- */
.rail-left {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail-l); z-index: 70; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 120px 0 110px;
}
.rail-left .vtext {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--ghost-dim);
}
.rail-left .vtext b { color: var(--ghost); font-weight: 700; }
.rail-left .stripes { width: 14px; height: 120px; background: repeating-linear-gradient(45deg, var(--ghost) 0 1.5px, transparent 1.5px 6px); opacity: 0.35; }
.rail-left .barcode-v { width: 18px; height: 150px; background-image: repeating-linear-gradient(to bottom, var(--ghost) 0 1px, transparent 1px 3px, var(--ghost) 3px 4px, transparent 4px 7px, var(--ghost) 7px 10px, transparent 10px 12px); opacity: 0.55; }

/* ---- Right rail (circuit + labels) ---- */
.rail-right {
  position: fixed; right: 0; top: 0; bottom: 0; width: var(--rail-r); z-index: 70; pointer-events: none;
}
.rail-right .routes { position: absolute; inset: 0; width: 100%; height: 100%; }
.rail-right .routes path { fill: none; stroke-width: 1.4; }
.rail-right .routes .p1 { stroke: var(--accent); }
.rail-right .routes .p2 { stroke: var(--accent-2); }
.rail-right .routes .flow { stroke-dasharray: 6 10; animation: dash 2.4s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -32; } }
.rail-right .node { fill: var(--black); stroke-width: 1.4; }
.rail-right .labels {
  position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 4px; text-align: right;
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ghost-dim);
}

/* ============================================================
   CONTENT
   ============================================================ */
.shell {
  position: relative; z-index: 10;
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 calc(var(--rail-r) + 8px) 0 calc(var(--rail-l) + 12px);
}

/* sticky topbar: brand + status label */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 0 14px; position: sticky; top: 0; z-index: 40;
  background: linear-gradient(180deg, var(--black) 70%, rgba(10,10,10,0));
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand .mark { width: 36px; height: 36px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(var(--accent-rgb),0.3)); }
.brand .wm { font-family: var(--f-display); font-weight: 800; font-size: 22px; letter-spacing: 0.01em; line-height: 0.9; text-transform: uppercase; }
.brand .wm .vpn { color: var(--accent); }
.brand .tag { display: block; font-family: var(--f-mono); font-size: 8px; letter-spacing: 0.3em; color: var(--ghost-dim); margin-top: 4px; }

/* status label (ONLINE-style) */
.slabel { display: inline-flex; align-items: center; gap: 9px; font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; border: 1px solid var(--line-2); padding: 8px 13px; }
.slabel .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: blink 2.4s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.4} }
.slabel.active { border-color: rgba(43,224,139,0.5); color: var(--green); }

/* boot terminal strip */
.boot { font-family: var(--f-mono); font-size: 11px; line-height: 1.85; color: var(--ghost-dim); padding: 12px 0 0; }
.boot .line::before { content: "> "; color: var(--accent); }
.boot .ok { color: var(--accent-2); font-weight: 700; }

/* ---- Section scaffolding ---- */
section { position: relative; padding: 52px 0; border-top: 1px solid var(--line); }
.sec-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.sec-head .num { font-family: var(--f-display); font-weight: 800; font-size: clamp(26px,4vw,40px); color: var(--accent); line-height: 0.8; }
.sec-head .sl { font-family: var(--f-display); font-weight: 700; font-size: clamp(24px,3.6vw,36px); color: var(--accent-2); line-height: 0.8; }
.sec-title { font-family: var(--f-display); font-weight: 800; font-size: clamp(26px,4.4vw,42px); letter-spacing: 0.01em; line-height: 0.82; text-transform: uppercase; }
.sec-kicker { margin-left: auto; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ghost-dim); white-space: nowrap; }
.sec-bar { width: 46px; height: 3px; background: var(--accent-2); margin: 0 0 30px; }

.label { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ghost-dim); }
.label-accent { color: var(--accent); }

/* cards */
.card { position: relative; background: var(--black-2); border: 1px solid var(--line); }

/* barcode strip */
.barcode { height: 26px; width: 100%;
  background-image: repeating-linear-gradient(90deg, var(--ghost) 0 1px, transparent 1px 3px, var(--ghost) 3px 4px, transparent 4px 6px, var(--ghost) 6px 9px, transparent 9px 11px);
  opacity: 0.45; }
.rule { height: 1px; background: var(--line); border: none; }

/* ============================================================
   BUTTONS  (notched / bracket corners)
   ============================================================ */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--f-mono); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; color: var(--ghost); background: var(--black-2);
  border: 1px solid var(--line-2); padding: 15px 22px; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s, transform .05s;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.btn:hover { border-color: var(--accent); }
.btn:active { transform: translateY(1px); }
.btn-block { width: 100%; }

.btn-primary {
  width: 100%; padding: 24px 28px; font-size: clamp(15px,2.6vw,20px); letter-spacing: 0.08em;
  color: #0a0a0a;
  background-color: var(--accent);
  background-image: url('assets/happ-mark.png');
  background-repeat: no-repeat;
  background-position: right 22px center;
  background-size: auto 60%;
  border: 1px solid var(--accent);
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0.4); overflow: hidden;
  animation: pulse-glow 3.4s ease-in-out infinite;
}
.btn-primary:hover { filter: brightness(1.08); }
@keyframes pulse-glow { 0%,100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0.3)} 50%{box-shadow:0 0 26px 2px rgba(var(--accent-rgb),0.28)} }
.btn-primary::after { content:""; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,0.4),transparent); transform:skewX(-18deg); animation:sweep 4.5s ease-in-out infinite; }
@keyframes sweep { 0%,55%{left:-60%} 80%,100%{left:130%} }

.btn-outline-accent {
  border-color: var(--accent);
  background-color: rgba(var(--accent-rgb),0.07);
  background-image: url('assets/karing-mark.png');
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: auto 40%;
}
.btn-outline-accent:hover { background-color: rgba(var(--accent-rgb),0.14); }
.btn-ghost { background: transparent; }

.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 8px var(--accent-2); display: inline-block; }

/* ---- Hero ----------------------------------------------------- */
.hero { padding: 40px 0 50px; text-align: center; overflow: hidden; }
.hero-skullwrap { position: relative; width: min(320px,58vw); margin: 0 auto 6px; aspect-ratio: 1001 / 1093; }
.hero-skullwrap::before { content:""; position:absolute; inset:-16% -10% -6%; background: radial-gradient(circle at 50% 47%, rgba(var(--accent-rgb),0.30), transparent 62%); filter: blur(10px); z-index:0; }
.hero-skull { position:relative; z-index:1; width:100%; height:100%; object-fit:contain; filter: drop-shadow(0 0 18px rgba(0,0,0,0.6)); animation: skull-glitch 7s steps(1) infinite; }
/* hero scan effect over the static logo */
.hero-skullwrap.scanning { overflow: hidden; }
.hero-skullwrap.scanning::after {
  content:""; position:absolute; left:0; right:0; top:0; height:30%;
  background: linear-gradient(to bottom, transparent, rgba(var(--accent-rgb),0.10) 55%, rgba(var(--accent-rgb),0.42) 90%, transparent 100%);
  border-bottom: 2px solid var(--accent-2);
  box-shadow: 0 0 16px 1px var(--accent-2);
  mix-blend-mode: screen; z-index: 3; pointer-events: none;
  animation: heroscan 3.6s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes heroscan {
  0%   { transform: translateY(-105%); opacity: 0; }
  12%  { opacity: 1; }
  50%  { transform: translateY(300%); opacity: 1; }
  64%  { opacity: 0; }
  100% { transform: translateY(-105%); opacity: 0; }
}

/* loading splash */
.loader { position:absolute; inset:0; z-index:9000; background:#070707; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; transition:opacity .65s ease; cursor:pointer; }
.loader-fixed { position:fixed; }
.loader.hide { opacity:0; pointer-events:none; }
.loader-vid { width:min(58vw,300px); aspect-ratio:1/1; object-fit:contain; mix-blend-mode:screen; filter:contrast(1.18) brightness(1.05); -webkit-mask-image:radial-gradient(circle at 50% 48%,#000 56%,transparent 86%); mask-image:radial-gradient(circle at 50% 48%,#000 56%,transparent 86%); }
.loader-cap { font-family:var(--f-mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--ghost-dim); }
.loader-skip { font-family:var(--f-mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:rgba(237,237,237,0.32); }
@keyframes skull-glitch { 0%,96%,100%{transform:none;filter:drop-shadow(0 0 18px rgba(0,0,0,0.6))} 97%{transform:translate(-2px,0);filter:drop-shadow(2px 0 0 var(--accent)) drop-shadow(-2px 0 0 var(--accent-2))} 98%{transform:translate(2px,0)} 99%{transform:translate(-1px,0);filter:drop-shadow(-2px 0 0 var(--accent))} }
.hero h1 { font-family: var(--f-display); font-weight: 900; font-size: clamp(40px,9vw,86px); line-height: 0.84; letter-spacing: 0.005em; text-transform: uppercase; margin: 8px 0 0; text-wrap: balance; }
.hero h1 .em { color: var(--accent); }
.hero-kicker { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
.hero .sub { font-family: var(--f-mono); font-size: clamp(11px,2.2vw,13px); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ghost-dim); margin-top: 16px; }
.hero .ru { max-width: 440px; margin: 12px auto 0; color: var(--ghost-fade); }

/* ---- Status --------------------------------------------------- */
.status-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 0; }
.stat { position: relative; padding: 22px; border: 1px solid var(--line); margin-left: -1px; }
.stat:first-child { margin-left: 0; }
.stat .k { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ghost-dim); }
.stat .big { font-family: var(--f-display); font-weight: 800; font-size: clamp(42px,8vw,62px); line-height: 0.86; margin-top: 12px; }
.stat .big .u { font-family: var(--f-mono); font-size: 14px; color: var(--ghost-dim); letter-spacing: 0.06em; margin-left: 6px; }
.stat .meta { font-family: var(--f-mono); font-size: 11px; color: var(--ghost-fade); margin-top: 10px; }
.bar { height: 6px; background: var(--black-3); border: 1px solid var(--line); margin-top: 16px; position: relative; overflow: hidden; }
.bar > span { position: absolute; inset: 0 auto 0 0; background: var(--accent); }
.bar.seg > span { background: repeating-linear-gradient(90deg, var(--accent) 0 14px, transparent 14px 18px); }

.readout .panel { font-family: var(--f-mono); font-size: 13px; line-height: 2; background: var(--black-1); border: 1px solid var(--line); padding: 22px 24px; }
.readout .row { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px dashed var(--line); padding: 5px 0; }
.readout .row:last-child { border-bottom: none; }
.readout .row .v .accent { color: var(--accent); }

.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid var(--line-2); padding: 8px 13px; color: var(--ghost-fade); border-radius: 2px; }
.chip .d { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); }
.chip b { color: var(--accent); font-weight: 700; }
.chip.accent { border-color: var(--accent); }

/* ---- Generic grids -------------------------------------------- */
.grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.grid.cols-2 { grid-template-columns: 1fr 1fr; }
.grid.cols-3 { grid-template-columns: repeat(3,1fr); }
.grid.cols-5 { grid-template-columns: repeat(5,1fr); }
.grid > * { background: var(--black-2); }

/* connect */
.connect { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.connect-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; }
.copy-line { display: flex; align-items: stretch; border: 1px solid var(--line-2); background: var(--black-1); }
.copy-line .url { flex: 1; min-width: 0; font-family: var(--f-mono); font-size: 12.5px; color: var(--ghost-fade); padding: 15px 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; }
.copy-line .copy-btn { flex: none; border: none; border-left: 1px solid var(--line-2); background: var(--black-2); color: var(--ghost); font-family: var(--f-mono); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; padding: 0 20px; cursor: pointer; transition: background .15s,color .15s; }
.copy-line .copy-btn:hover { background: var(--accent); color: #0a0a0a; }
.copy-line .copy-btn.done { background: var(--accent-2); color: #0a0a0a; }
.hint { font-family: var(--f-mono); font-size: 11px; color: var(--ghost-dim); }

/* ---- Platforms ------------------------------------------------ */
.plat { display: flex; flex-direction: column; gap: 14px; padding: 22px 20px; text-decoration: none; color: var(--ghost); transition: background .15s; position: relative; }
.plat:hover { background: var(--black-3); }
.plat .glyph { width: 40px; height: 40px; display: flex; align-items: center; }
.plat .glyph svg { width: 30px; height: 30px; }
.plat .os { font-family: var(--f-display); font-weight: 800; font-size: 24px; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1; }
.plat .store { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--ghost-dim); text-transform: uppercase; margin-top: 4px; }
.plat .arrow { font-family: var(--f-mono); color: var(--accent); font-size: 11px; margin-top: auto; }

.apps-note { margin-top: 16px; }

/* ---- QR ------------------------------------------------------- */
.qr-block { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; }
.qr-frame { position: relative; padding: 16px; background: var(--black-1); border: 1px solid var(--line-2); width: 224px; height: 224px; display: flex; align-items: center; justify-content: center; }
.qr-frame::before, .qr-frame::after { content:""; position:absolute; width:22px; height:22px; pointer-events:none; }
.qr-frame::before { top:-1px; left:-1px; border-top:2px solid var(--accent); border-left:2px solid var(--accent); }
.qr-frame::after { bottom:-1px; right:-1px; border-bottom:2px solid var(--accent); border-right:2px solid var(--accent); }
.qr-frame svg { width:100%; height:100%; display:block; }
.qr-frame .scanbar { position:absolute; left:8px; right:8px; height:2px; background: var(--accent-2); box-shadow: 0 0 10px var(--accent-2); animation: qrscan 2.6s ease-in-out infinite; }
@keyframes qrscan { 0%,100%{top:14px} 50%{top:calc(100% - 14px)} }
.qr-info h3 { font-family: var(--f-display); font-weight: 800; font-size: clamp(24px,4vw,34px); text-transform: uppercase; line-height: 0.9; margin: 12px 0; }
.qr-info p { color: var(--ghost-fade); max-width: 380px; }

/* ---- Steps ---------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.step { background: var(--black-2); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.step .n { font-family: var(--f-display); font-weight: 900; font-size: 48px; line-height: 0.75; color: var(--accent); }
.step .ph { position: relative; aspect-ratio: 4/3; border: 1px solid var(--line-2); background-color: var(--black-1); background-image: repeating-linear-gradient(45deg, rgba(237,237,237,0.04) 0 8px, transparent 8px 16px); display: flex; align-items: center; justify-content: center; }
.step .ph .ph-label { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.1em; color: var(--ghost-dim); text-transform: uppercase; text-align: center; padding: 0 8px; }
.step h4 { font-family: var(--f-mono); font-weight: 700; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; }
.step p { color: var(--ghost-fade); }

/* ---- Support -------------------------------------------------- */
.support { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.support-card { display: flex; flex-direction: column; gap: 10px; padding: 24px 22px; text-decoration: none; color: var(--ghost); border: 1px solid var(--line); transition: border-color .15s, background .15s; }
.support-card:hover { border-color: var(--accent); background: var(--black-3); }
.support-card .label { color: var(--ghost-dim); }
.support-card .h { font-family: var(--f-display); font-weight: 800; font-size: 24px; text-transform: uppercase; line-height: 1; }
.support-card .tg { font-family: var(--f-handle); font-weight: 500; font-size: 12.5px; color: var(--accent); word-break: break-all; }
.support-card.cta { background: rgba(var(--accent-rgb),0.07); border-color: var(--accent); }

/* ---- Bottom bar (footer) -------------------------------------- */
.botbar { border-top: 1px solid var(--line); padding: 26px 0 46px; }
.botbar .row { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ghost-dim); }
.botbar .row .sq { width: 8px; height: 8px; background: var(--accent-2); display: inline-block; margin-left: 8px; vertical-align: middle; }
.botbar .center { display: flex; align-items: center; gap: 14px; flex: 1; justify-content: center; }
.botbar .center .tick { flex: 1; height: 1px; background: var(--line); max-width: 180px; }
.botbar .globe { width: 40px; height: 40px; opacity: 0.8; }
.botbar .globe svg { width: 100%; height: 100%; }
.botbar .accent { color: var(--accent); }
.botbar .sign { font-family: var(--f-display); font-weight: 900; font-size: clamp(30px,6vw,54px); text-transform: uppercase; line-height: 0.82; margin-top: 22px; }
.botbar .sign .em { color: var(--accent); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1180px) {
  .shell { padding-left: calc(var(--rail-l) + 8px); padding-right: calc(var(--rail-r) + 4px); }
}
@media (max-width: 920px) {
  :root { --rail-r: 56px; }
  .rail-right .labels { display: none; }
}
@media (max-width: 760px) {
  .shell { padding-left: 22px; padding-right: 22px; max-width: 100%; overflow-x: hidden; }
  .rail-left, .rail-right, .frame .xh, .frame .ruler { display: none; }
  .frame .glitch { left: 12px; right: 12px; }
  :root { --frame-pad: 10px; }
  section { padding: 42px 0; }
  .status-grid { grid-template-columns: 1fr; }
  .stat { margin-left: 0; margin-top: -1px; }
  .stat:first-child { margin-top: 0; }
  .connect-row { grid-template-columns: minmax(0,1fr); }
  .grid.cols-5 { grid-template-columns: 1fr 1fr; }
  .grid.cols-3 { grid-template-columns: 1fr; }
  .qr-block { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .qr-info p { margin: 0 auto; }
  .steps { grid-template-columns: 1fr 1fr; }
  .support { grid-template-columns: 1fr; }
  .sec-kicker { width: 100%; margin-left: 0; }
  .botbar .row { flex-wrap: wrap; }
  .botbar .center { order: 3; width: 100%; }
}

/* ============================================================
   DEDICATED MOBILE LAYOUT  ·  attribute-driven (set by JS < 600px,
   and hard-set in the phone preview). Fixed px — spacious, touch-first.
   ============================================================ */
.shell[data-view="mobile"] {
  max-width: 460px; margin: 0 auto; padding: 0 18px; overflow-x: hidden;
}
.shell[data-view="mobile"] section { padding: 36px 0; }

/* header / boot */
.shell[data-view="mobile"] .topbar { padding: 18px 0 14px; }
.shell[data-view="mobile"] .brand .wm { font-size: 20px; }
.shell[data-view="mobile"] .brand .mark { width: 32px; height: 32px; }
.shell[data-view="mobile"] .brand .tag { font-size: 7.5px; }
.shell[data-view="mobile"] .slabel { font-size: 10px; padding: 8px 11px; }
.shell[data-view="mobile"] .boot { font-size: 11px; line-height: 2; }

/* section headers */
.shell[data-view="mobile"] .sec-head { gap: 11px; }
.shell[data-view="mobile"] .sec-head .num { font-size: 34px; }
.shell[data-view="mobile"] .sec-head .sl  { font-size: 28px; }
.shell[data-view="mobile"] .sec-title     { font-size: 28px; line-height: 0.96; }
.shell[data-view="mobile"] .sec-kicker { width: 100%; margin: 4px 0 0; }
.shell[data-view="mobile"] .sec-bar { margin-bottom: 26px; }

/* hero */
.shell[data-view="mobile"] .hero { padding: 18px 0 34px; }
.shell[data-view="mobile"] .hero-kicker { font-size: 10px; margin-bottom: 12px; }
.shell[data-view="mobile"] .hero-skullwrap { width: 220px; }
.shell[data-view="mobile"] .hero h1 { font-size: 30px; line-height: 1.02; }
.shell[data-view="mobile"] .hero .sub { font-size: 11.5px; letter-spacing: 0.16em; margin-top: 16px; }
.shell[data-view="mobile"] .hero .ru { font-size: 14px; margin-top: 14px; }

/* status — single column, roomy */
.shell[data-view="mobile"] .status-grid { grid-template-columns: 1fr; }
.shell[data-view="mobile"] .stat { margin: -1px 0 0; padding: 22px 20px; }
.shell[data-view="mobile"] .stat:first-child { margin-top: 0; }
.shell[data-view="mobile"] .stat .big { font-size: 50px; }
.shell[data-view="mobile"] .readout .panel { font-size: 13px; padding: 20px; }

/* connect */
.shell[data-view="mobile"] .connect { gap: 16px; }
.shell[data-view="mobile"] .connect-row { grid-template-columns: minmax(0,1fr); gap: 12px; }
.shell[data-view="mobile"] .btn { font-size: 13px; padding: 16px 18px; }
.shell[data-view="mobile"] .btn-primary { padding: 22px 20px; font-size: 17px; letter-spacing: 0.04em; }
.shell[data-view="mobile"] .copy-line .url { font-size: 12px; padding: 15px 14px; }
.shell[data-view="mobile"] .copy-line .copy-btn { padding: 0 16px; font-size: 11px; }
.shell[data-view="mobile"] .hint { font-size: 12px; }

/* platforms — comfortable list rows */
.shell[data-view="mobile"] .grid.cols-5 { grid-template-columns: 1fr; }
.shell[data-view="mobile"] .plat { flex-direction: row; align-items: center; gap: 16px; padding: 18px; min-height: 66px; }
.shell[data-view="mobile"] .plat .glyph { width: 30px; height: 30px; flex: none; }
.shell[data-view="mobile"] .plat .glyph svg { width: 27px; height: 27px; }
.shell[data-view="mobile"] .plat .os { font-size: 21px; }
.shell[data-view="mobile"] .plat .store { font-size: 10.5px; margin-top: 3px; }
.shell[data-view="mobile"] .plat .arrow { margin: 0 0 0 auto; white-space: nowrap; font-size: 11px; }
.shell[data-view="mobile"] .apps-note { margin-top: 18px; }
.shell[data-view="mobile"] .chips { gap: 10px; }
.shell[data-view="mobile"] .chip { font-size: 11px; padding: 9px 13px; }

/* QR — stacked, centered */
.shell[data-view="mobile"] .qr-block { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 24px; }
.shell[data-view="mobile"] .qr-frame { width: 220px; height: 220px; }
.shell[data-view="mobile"] .qr-info h3 { font-size: 28px; line-height: 1.0; }
.shell[data-view="mobile"] .qr-info p { font-size: 14px; margin: 0 auto; }

/* steps — single column, image on top */
.shell[data-view="mobile"] .steps { grid-template-columns: 1fr; }
.shell[data-view="mobile"] .step { padding: 18px; gap: 14px; }
.shell[data-view="mobile"] .step .n { font-size: 42px; }
.shell[data-view="mobile"] .step .ph { aspect-ratio: 16/9; }
.shell[data-view="mobile"] .step h4 { font-size: 13px; }
.shell[data-view="mobile"] .step p { font-size: 13.5px; }

/* support */
.shell[data-view="mobile"] .support { grid-template-columns: 1fr; gap: 14px; }
.shell[data-view="mobile"] .support-card { padding: 22px 20px; }
.shell[data-view="mobile"] .support-card .h { font-size: 22px; line-height: 1.05; }

/* bottom bar */
.shell[data-view="mobile"] .botbar { padding: 26px 0 40px; }
.shell[data-view="mobile"] .botbar .row { flex-wrap: wrap; font-size: 11px; }
.shell[data-view="mobile"] .botbar .center { order: 3; width: 100%; }
.shell[data-view="mobile"] .botbar .sign { font-size: 38px; line-height: 0.96; }

@media (prefers-reduced-motion: reduce) {
  .scanlines, .btn-primary, .btn-primary::after, .slabel .dot, .hero-skull, .qr-frame .scanbar, .frame .glitch i, .rail-right .routes .flow { animation: none !important; }
}

/* Motion mode (Tweaks): still / calm(default) / live */
[data-motion="still"] .scanlines,
[data-motion="still"] .btn-primary,
[data-motion="still"] .btn-primary::after,
[data-motion="still"] .slabel .dot,
[data-motion="still"] .hero-skull,
[data-motion="still"] .qr-frame .scanbar,
[data-motion="still"] .hero-skullwrap.scanning::after,
[data-motion="still"] .rail-right .routes .flow { animation: none !important; }

[data-motion="live"] .scanlines     { animation-duration: 3.4s; }
[data-motion="live"] .hero-skull    { animation-duration: 3.4s; }
[data-motion="live"] .btn-primary   { animation-duration: 1.9s; }
[data-motion="live"] .qr-frame .scanbar { animation-duration: 1.5s; }
[data-motion="live"] .slabel .dot   { animation-duration: 1.1s; }
[data-motion="live"] .rail-right .routes .flow { animation-duration: 1.4s; }
[data-motion="live"] .hero-skullwrap.scanning::after { animation-duration: 2.3s; }

#tweaks-root { position: fixed; z-index: 9999; }