/* ==========================================================================
   CryptoMiningSites.io — "Neon Grid" theme
   Cyberpunk crypto terminal x high-end property listing sheet.
   Sharp chamfered geometry, neon BTC orange + electric cyan on void black.
   ========================================================================== */

:root {
  --void: #04050a;
  --bg: #070910;
  --panel: #0b0f19;
  --panel-2: #0e1320;
  --line: #1a2335;
  --line-hi: #273451;
  --text: #eef3ff;
  --muted: #e6ebf3;
  --dim: #aab5c9;

  --btc: #ff9416;
  --btc-hi: #ffb24d;
  --btc-glow: rgba(255, 148, 22, .55);
  --cyan: #00e5ff;
  --cyan-hi: #7af3ff;
  --cyan-glow: rgba(0, 229, 255, .45);
  --violet: #8b5cff;
  --violet-glow: rgba(139, 92, 255, .5);
  --red: #ff2a3d;
  --red-glow: rgba(255, 42, 61, .5);
    --land: #111827;

  --sale: #00e5ff;
  --lease: #ffd60a;
  --yellow: #ffd60a;
  --yellow-glow: rgba(255, 214, 10, .5);

  --display: "Chakra Petch", "Space Grotesk", system-ui, sans-serif;
  --sans: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --cut: 14px;      /* chamfer size */
  --cut-sm: 8px;
  --gutter: 16px;
  --max: 1240px;
  --header-h: 64px;
}
@media (min-width: 768px) { :root { --gutter: 28px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0; background: var(--void); color: var(--text);
  font-family: var(--sans); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
/* CRT scanlines + vignette over everything, non-interactive */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 50% 40%, transparent 60%, rgba(0,0,0,.45));
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
::selection { background: var(--btc); color: #000; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.mono { font-family: var(--mono); font-feature-settings: "tnum"; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.eyebrow {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cyan); display: inline-block; line-height: 1.5;
}
.eyebrow::before { content: "//"; margin-right: 8px; color: var(--btc); }

/* chamfer helpers */
.cut { clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }

/* ---------- Buttons ---------- */
.btn {
  --c: var(--cut-sm);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border: 0; text-decoration: none; white-space: nowrap;
  font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: .06em; text-transform: uppercase;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  transition: background .2s, color .2s, filter .2s, transform .12s;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--btc); color: #0a0500; }
.btn-primary:hover { background: var(--btc-hi); filter: drop-shadow(0 0 14px var(--btc-glow)); }
.btn-ghost, .btn-line {
  background: linear-gradient(var(--bg), var(--bg)) padding-box, linear-gradient(135deg, var(--cyan), var(--line-hi) 60%) border-box;
  border: 1px solid transparent; color: var(--text);
}
.btn-ghost:hover, .btn-line:hover { color: var(--cyan); background: linear-gradient(rgba(0,229,255,.08), rgba(0,229,255,.08)) padding-box, linear-gradient(135deg, var(--cyan), var(--cyan)) border-box; }
.btn-dark { background: var(--cyan); color: #001216; }
.btn-dark:hover { background: var(--cyan-hi); filter: drop-shadow(0 0 14px var(--cyan-glow)); }
.btn-sm { min-height: 42px; padding: 0 16px; font-size: 13.5px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  background: rgba(4, 5, 10, .78); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--line);
}
.site-header::after { /* neon underline sweep */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--btc) 30%, var(--cyan) 70%, transparent);
  opacity: .7;
}
.site-header .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.brand-mark { width: 34px; height: 34px; flex: none; filter: drop-shadow(0 0 8px var(--btc-glow)); }
.brand-name { font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: .02em; white-space: nowrap; text-transform: uppercase; }
.brand-name b { color: var(--btc); font-weight: 700; }
.brand-name small { font-family: var(--mono); font-size: 11px; color: var(--cyan); margin-left: 2px; text-transform: none; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a:not(.btn) {
  text-decoration: none; color: var(--muted); font-family: var(--mono); font-size: 12.5px; letter-spacing: .1em;
  text-transform: uppercase; padding: 10px 12px;
}
.nav a:not(.btn):hover, .nav a[aria-current="page"] { color: var(--cyan); text-shadow: 0 0 10px var(--cyan-glow); }
.nav .nav-link-hide { display: none; }
@media (min-width: 820px) { .nav .nav-link-hide { display: inline-block; } }
@media (max-width: 420px) {
  .brand-name { font-size: 15px; }
  .brand-name small { display: none; }
  .nav .btn span { display: none; }
  .nav .btn { padding: 0 13px; }
}

/* ---------- Ticker ---------- */
.ticker {
  border-bottom: 1px solid var(--line); background: #05070d;
  overflow: hidden; white-space: nowrap; font-family: var(--mono); font-size: 12px; color: var(--muted);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.ticker-track { display: inline-flex; gap: 40px; padding: 9px 0; animation: tick 70s linear infinite; }
.ticker-item { display: inline-flex; gap: 8px; align-items: center; }
.ticker-item b { color: var(--text); font-weight: 500; }
.ticker-item .up { color: var(--btc); }
.ticker-dot { width: 6px; height: 6px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 64px 0 44px; overflow: hidden; isolation: isolate; }
.hero::before { /* perspective neon floor grid */
  content: ""; position: absolute; left: -50%; right: -50%; bottom: -10%; height: 70%; z-index: -1;
  background:
    linear-gradient(rgba(0,229,255,.22) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(90deg, rgba(0,229,255,.22) 1px, transparent 1px) 0 0 / 60px 60px;
  transform: perspective(420px) rotateX(62deg); transform-origin: 50% 100%;
  mask-image: linear-gradient(0deg, #000 10%, transparent 85%);
  -webkit-mask-image: linear-gradient(0deg, #000 10%, transparent 85%);
  animation: floor 4s linear infinite;
}
.hero::after { /* sun glow */
  content: ""; position: absolute; z-index: -2; right: -10%; top: -20%; width: 70vw; max-width: 760px; aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(255,148,22,.28), rgba(255,42,61,.10) 55%, transparent 75%);
  filter: blur(10px);
}
@keyframes floor { to { background-position: 0 60px, 0 0; } }
.hero h1 {
  position: relative; font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: -.01em; line-height: .95; font-size: clamp(34px, 10.4vw, 108px); margin: 18px 0 20px;
}
.hero h1 .nw { white-space: nowrap; }
.hero h1 .glow { color: var(--btc); text-shadow: 0 0 24px var(--btc-glow), 0 0 2px #fff3; display: block; }
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none;
}
.glitch::before { color: var(--cyan); transform: translate(-2px, 0); mix-blend-mode: screen; opacity: .75; animation: gl1 3.2s steps(1) infinite; }
.glitch::after  { color: var(--yellow);  transform: translate(2px, 0);  mix-blend-mode: screen; opacity: .75; animation: gl2 2.7s steps(1) infinite; }
@keyframes gl1 { 0%, 90%, 100% { clip-path: inset(0 0 100% 0); } 92% { clip-path: inset(10% 0 55% 0); } 95% { clip-path: inset(60% 0 12% 0); } }
@keyframes gl2 { 0%, 88%, 100% { clip-path: inset(0 0 100% 0); } 90% { clip-path: inset(45% 0 30% 0); } 94% { clip-path: inset(5% 0 80% 0); } }
.hero p.lede { color: var(--muted); font-size: clamp(16px, 2.4vw, 19px); max-width: 56ch; margin: 0 0 30px; }
.hero p.lede b { color: var(--cyan); font-weight: 500; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 480px) { .hero-cta .btn { flex: 1 1 100%; } }

.stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 44px;
}
@media (min-width: 720px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat {
  position: relative; padding: 16px 18px 14px; background: rgba(11,15,25,.85);
  border: 1px solid var(--line); backdrop-filter: blur(6px);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
.stat::before { content: ""; position: absolute; left: 0; top: 0; width: 28px; height: 2px; background: var(--btc); box-shadow: 0 0 10px var(--btc-glow); }
.stat:nth-child(even)::before { background: var(--cyan); box-shadow: 0 0 10px var(--cyan-glow); }
.stat-v { font-family: var(--mono); font-size: clamp(24px, 5.5vw, 34px); font-weight: 600; letter-spacing: -.03em; }
.stat-v small { font-size: .45em; color: var(--muted); margin-left: 4px; letter-spacing: 0; }
.stat-l { font-family: var(--mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .14em; }

/* ---------- Sections ---------- */
.section { padding: 60px 0; position: relative; }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.section-head h2 {
  font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: -.005em; line-height: 1;
  font-size: clamp(30px, 6vw, 54px); margin: 12px 0 0;
}
.section-head h2 em { font-style: normal; color: var(--cyan); text-shadow: 0 0 20px var(--cyan-glow); }
.section-head p { color: var(--muted); margin: 12px 0 0; max-width: 56ch; }

/* ---------- Map ---------- */
.map-shell { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.map-shell > * { min-width: 0; } /* stop the nowrap chip row from widening the grid */
@media (min-width: 1000px) { .map-shell { grid-template-columns: minmax(0, 1fr) 370px; align-items: stretch; } }

.map-card {
  position: relative; overflow: hidden; min-height: 300px; aspect-ratio: 1.9 / 1;
  background:
    radial-gradient(90% 80% at 50% 45%, rgba(0,229,255,.07), transparent 70%),
    linear-gradient(rgba(0,229,255,.05) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(0,229,255,.05) 1px, transparent 1px) 0 0 / 28px 28px,
    #05070d;
  border: 1px solid var(--line);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
/* HUD corner brackets */
.map-card::before, .map-card::after {
  content: ""; position: absolute; width: 22px; height: 22px; pointer-events: none; z-index: 2;
  border: 2px solid var(--cyan); filter: drop-shadow(0 0 6px var(--cyan-glow));
}
.map-card::before { right: 8px; bottom: 8px; border-left: 0; border-top: 0; }
.map-card::after { left: 8px; top: 8px; border-right: 0; border-bottom: 0; }
@media (max-width: 640px) {
  .map-card { aspect-ratio: auto; height: 66vw; min-height: 240px; max-height: 420px; }
}
.map-card svg { width: 100%; height: 100%; }
/* Countries lift + glow on hover; hovered path is raised in JS so the scale-up overlaps neighbours */
.map-card .country {
  fill: #182132; stroke: #2a3550; stroke-width: .5; vector-effect: non-scaling-stroke;
  transform-box: fill-box; transform-origin: center;
  transition: transform .35s cubic-bezier(.2,.9,.25,1.3), fill .25s ease, filter .25s ease;
}
.map-card .country:hover { fill: #1d2940; transform: scale(1.04); }

/* Tier 3: private-listing regions (quiet slate) */
.map-card .country.tier-active { fill: #2b3854; stroke: rgba(210,222,242,.6); stroke-width: .7; cursor: pointer; }
.map-card .country.tier-active:hover { fill: #3a4a6b; stroke: #dfe7f5; transform: scale(1.1); filter: drop-shadow(0 0 12px rgba(223,231,245,.45)); }

/* Tier 2: hosting available (electric cyan) */
.map-card .country.tier-hosting { fill: #0797b3; stroke: var(--cyan); stroke-width: .8; cursor: pointer; filter: drop-shadow(0 0 6px var(--cyan-glow)); }
.map-card .country.tier-hosting:hover { fill: var(--cyan); transform: scale(1.12); filter: drop-shadow(0 0 18px var(--cyan-glow)); }

/* Tier 1: OneMiners sale & lease hubs (brightest, breathing glow) */
.map-card .country.tier-sites {
  fill: var(--btc); stroke: #ffe2b8; stroke-width: 1; cursor: pointer;
  animation: breathe 2.8s ease-in-out infinite;
}
.map-card .country.tier-sites:hover { fill: var(--btc-hi); transform: scale(1.08); animation: none; filter: drop-shadow(0 0 26px var(--btc-glow)) brightness(1.15); }
@keyframes breathe {
  0%, 100% { filter: drop-shadow(0 0 6px var(--btc-glow)) brightness(1); }
  50%      { filter: drop-shadow(0 0 20px var(--btc-glow)) brightness(1.18); }
}

.map-card .country.is-selected { stroke: #fff; stroke-width: 1.8; }
.map-card .graticule { fill: none; stroke: rgba(0,229,255,.06); stroke-width: .5; vector-effect: non-scaling-stroke; }

.map-tools { position: absolute; right: 14px; top: 14px; display: flex; flex-direction: column; gap: 6px; z-index: 3; }
.map-tools button {
  width: 40px; height: 40px; border: 1px solid var(--line-hi); background: rgba(5,7,13,.9);
  font-family: var(--mono); font-size: 19px; line-height: 1; display: grid; place-items: center; color: var(--cyan);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.map-tools button:hover { background: rgba(0,229,255,.12); }
.map-hint {
  position: absolute; left: 14px; bottom: 14px; z-index: 3; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cyan); background: rgba(5,7,13,.85); padding: 6px 10px; border: 1px solid rgba(0,229,255,.3);
}
@media (max-width: 640px) {
  .map-tools { right: 10px; top: 10px; }
  .map-tools button { width: 34px; height: 34px; font-size: 17px; }
  .map-hint { font-size: 9.5px; padding: 4px 7px; left: 10px; bottom: 10px; }
}
.map-tip {
  position: absolute; z-index: 4; pointer-events: none; padding: 8px 12px;
  background: rgba(5,7,13,.95); border: 1px solid var(--cyan); box-shadow: 0 0 18px var(--cyan-glow);
  font-size: 13px; white-space: nowrap; transform: translate(-50%, calc(-100% - 14px)); opacity: 0; transition: opacity .12s;
}
.map-tip.show { opacity: 1; }
.map-tip b { display: block; font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.map-tip span { color: var(--btc); font-family: var(--mono); font-size: 11px; }
.map-loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--cyan); font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }


/* Country panel */
.panel {
  position: relative; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 320px; max-height: 660px; overflow: hidden;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.panel::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--btc), var(--yellow), var(--cyan)); }
.panel-head { padding: 20px 18px 14px; border-bottom: 1px solid var(--line); }
.panel-head .kicker { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--cyan); }
.panel-head h3 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 28px; margin: 6px 0 8px; line-height: 1.05; }
.panel-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .1em; padding: 4px 8px; border: 1px solid var(--line-hi); color: var(--muted);
}
.tag.net { color: var(--btc); border-color: var(--btc); background: rgba(255,148,22,.08); box-shadow: inset 0 0 12px rgba(255,148,22,.12); }
.tag.host { color: var(--cyan); border-color: var(--cyan); background: rgba(0,229,255,.07); }
.tag.act { color: #dfe7f5; border-color: #8e9bb5; background: rgba(223,231,245,.06); }
.panel-body { padding: 10px; overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }
.panel-empty { padding: 16px; color: var(--muted); font-size: 15px; }
.panel-empty ol { padding-left: 18px; margin: 12px 0 0; }
.panel-empty li { margin: 6px 0; }
.mini {
  display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; align-items: center; width: 100%;
  padding: 12px; border: 1px solid transparent; border-left: 2px solid var(--line-hi); background: none; text-align: left; margin-bottom: 4px;
}
.mini:hover { background: rgba(0,229,255,.05); border-color: rgba(0,229,255,.25); border-left-color: var(--cyan); }
.mini-t { font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.mini-s { color: var(--muted); font-size: 12px; grid-column: 1; font-family: var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.mini-v { grid-row: 1 / span 2; grid-column: 2; text-align: right; font-family: var(--mono); font-size: 15px; color: var(--btc); font-weight: 600; }
.mini-v small { display: block; color: var(--cyan); font-size: 11px; font-weight: 400; }
.mini.locked { filter: blur(4px); pointer-events: none; user-select: none; opacity: .55; }
.panel-foot { padding: 14px; border-top: 1px solid var(--line); background: rgba(0,0,0,.35); }
.panel-foot p { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.panel-foot .btn { width: 100%; }

.chips { display: flex; gap: 8px; overflow-x: auto; padding: 14px 0 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 14px; border: 1px solid var(--line-hi); background: var(--panel);
  font-size: 13.5px; font-weight: 600;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
.chip .n { font-family: var(--mono); font-size: 11px; color: var(--cyan); }
.chip.sites { border-color: var(--btc); box-shadow: inset 0 0 14px rgba(255,148,22,.18); }
.chip.sites .n { color: var(--btc); }
.chip.hosting { border-color: rgba(0,229,255,.6); }
.chip.hosting .n { color: var(--cyan); }
.chip.active .n { color: #c9d3e6; }
.chip[aria-pressed="true"] { background: var(--btc); color: #0a0500; border-color: var(--btc); }
.chip[aria-pressed="true"] .n { color: #3a1f00; }

/* ---------- Listings: the "property sheet" half ---------- */
.estate { background: linear-gradient(180deg, var(--void), #070a12 30%, var(--void)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.estate .eyebrow::before { color: var(--yellow); }

.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 24px; }
.seg { display: inline-flex; padding: 3px; background: var(--panel); border: 1px solid var(--line-hi); overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button {
  flex: none; border: 0; background: none; min-height: 38px; padding: 0 14px;
  font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--cyan); color: #001216; box-shadow: 0 0 16px var(--cyan-glow); }
.seg button[data-type="sale"][aria-pressed="true"] { background: var(--btc); color: #0a0500; box-shadow: 0 0 16px var(--btc-glow); }
.seg button[data-type="lease"][aria-pressed="true"] { background: var(--yellow); color: #141000; box-shadow: 0 0 16px var(--yellow-glow); }
.seg button[data-type="inquiry"][aria-pressed="true"] { background: #dfe7f5; color: #0a0d14; box-shadow: 0 0 16px rgba(223,231,245,.4); }
.select {
  min-height: 46px; padding: 0 38px 0 14px; border: 1px solid var(--line-hi); border-radius: 0;
  background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2300e5ff' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center;
  appearance: none; -webkit-appearance: none; font: inherit; font-family: var(--mono); font-size: 13px; color: var(--text);
}
.result-count { margin-left: auto; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--cyan); }
@media (max-width: 640px) { .filters .select { flex: 1; } .result-count { margin-left: 0; width: 100%; } }

.grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid { grid-template-columns: repeat(3, 1fr); } }

.card {
  --c: 18px;
  position: relative; display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
  transition: transform .2s ease, filter .2s ease;
}
.card::after { /* neon hairline frame drawn inside the clip */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, var(--line-hi), var(--line) 40%, var(--line) 60%, var(--line-hi)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  padding: 1px;
}
.card:hover { transform: translateY(-3px); filter: drop-shadow(0 0 18px rgba(0,229,255,.18)); }
.card:hover::after { background: linear-gradient(135deg, var(--cyan), var(--line-hi) 45%, var(--line-hi) 55%, var(--btc)) border-box; }
.card-art { position: relative; height: 132px; background: #03050a; color: var(--btc); overflow: hidden; border-bottom: 1px solid var(--line); }
.card-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.card-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.card:hover .card-art img { transform: scale(1.05); }
.card-art img { filter: saturate(1.25) brightness(.8); }
.photo-gate {
  position: absolute; left: 50%; top: 46%; z-index: 2; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 7px; white-space: nowrap; text-decoration: none;
  background: rgba(4,5,10,.62); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #fff;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: background .2s, border-color .2s;
}
.photo-gate:hover { background: rgba(34,158,217,.3); border-color: #229ed9; }
.tg-logo { width: 30px; height: 30px; border-radius: 50%; background: #229ed9; display: grid; place-items: center; box-shadow: 0 0 16px rgba(34,158,217,.7); flex: none; }
.card-art .tg-logo svg { position: static; inset: auto; width: 16px; height: 16px; margin-left: -2px; }
.card-art:has(img) { height: 176px; }
.card-art:has(img)::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(4,5,10,.35), transparent 35%, rgba(4,5,10,.85)); }
.card-art::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px); pointer-events: none; }
.plaque {
  position: absolute; left: 14px; top: 14px; padding: 5px 10px 4px; z-index: 1;
  font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  background: var(--text); color: #000;
  clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  padding-right: 16px;
}
.plaque.sale { background: var(--btc); color: #0a0500; box-shadow: 0 0 14px var(--btc-glow); }
.plaque.lease { background: var(--yellow); color: #141000; box-shadow: 0 0 14px var(--yellow-glow); }
.plaque.both { display: flex; padding: 0; background: none; box-shadow: 0 0 14px var(--yellow-glow); }
.plaque.both i { font-style: normal; padding: 5px 10px 4px; }
.plaque.both .p-sale { background: var(--btc); color: #0a0500; }
.plaque.both .p-lease { background: var(--yellow); color: #141000; padding-right: 16px; }
.plaque.hosting { background: var(--cyan); color: #001216; box-shadow: 0 0 14px var(--cyan-glow); }
.plaque.inquiry { background: linear-gradient(135deg, #f4f7fc, #aeb9cf); color: #0a0d14; box-shadow: 0 0 12px rgba(223,231,245,.35); }
.new-badge {
  position: absolute; right: 14px; top: 14px; z-index: 1; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  padding: 4px 8px; background: var(--btc); color: #0a0500; font-weight: 700; animation: blink 1.6s steps(1) infinite;
}
@keyframes blink { 50% { background: #0a0500; color: var(--btc); box-shadow: inset 0 0 0 1px var(--btc); } }
.card-mw {
  position: absolute; left: 16px; bottom: 14px; z-index: 1; color: #fff; font-family: var(--mono);
  font-size: 34px; font-weight: 700; letter-spacing: -.04em; line-height: 1; text-shadow: 0 0 18px rgba(255,148,22,.6);
}
.card-id { position: absolute; right: 14px; bottom: 12px; z-index: 1; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; color: var(--cyan); opacity: .8; }
.card-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card-loc { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.card-loc svg { width: 13px; height: 13px; flex: none; color: var(--btc); }
.card h3 { font-family: var(--display); font-weight: 600; font-size: 21px; line-height: 1.15; margin: 0; text-transform: uppercase; letter-spacing: .01em; }
.specs { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); background: rgba(0,0,0,.25); margin-top: 2px; }
.spec { padding: 10px 10px 8px; }
.spec + .spec { border-left: 1px solid var(--line); }
.spec-v { font-family: var(--mono); font-size: 14.5px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; color: var(--text); }
.spec:nth-child(2) .spec-v { color: var(--cyan); }
.spec:nth-child(3) .spec-v { color: var(--btc); }
.spec-l { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .14em; color: var(--dim); margin-top: 2px; }
.card-asset { font-size: 14px; color: var(--muted); margin: 0; }
.card-broker { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--yellow); }
.card-foot { margin-top: auto; display: flex; gap: 10px; align-items: center; padding-top: 6px; }
.card-foot .btn { flex: 1; }
.card-foot .btn-line { flex: 0 0 auto; }

.load-more { display: flex; justify-content: center; margin-top: 28px; }
.empty { padding: 30px; text-align: center; color: var(--muted); border: 1px dashed var(--line-hi); grid-column: 1 / -1; }
.empty a { color: var(--cyan); }

/* ---------- How it works ---------- */
.steps { display: grid; gap: 14px; grid-template-columns: 1fr; counter-reset: s; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step {
  position: relative; padding: 24px 22px; background: var(--panel); border: 1px solid var(--line); counter-increment: s;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.step::before {
  content: "0" counter(s); font-family: var(--mono); font-weight: 700; font-size: 40px; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--cyan); text-shadow: 0 0 16px var(--cyan-glow);
}
.step h3 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 22px; margin: 14px 0 6px; letter-spacing: .02em; }
.step p { color: var(--muted); margin: 0; font-size: 15px; }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative; overflow: hidden; padding: clamp(28px, 5vw, 56px);
  background:
    radial-gradient(80% 120% at 100% 100%, rgba(255,214,10,.18), transparent 60%),
    radial-gradient(70% 120% at 0% 0%, rgba(255,148,22,.2), transparent 60%),
    #070910;
  border: 1px solid var(--line-hi);
  clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px);
}
.cta-band::after {
  content: "₿"; position: absolute; right: 2%; bottom: -50px; font-size: 280px; line-height: 1; font-family: var(--display); font-weight: 700;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255,148,22,.35); pointer-events: none;
}
.cta-band h2 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(30px, 6vw, 52px); line-height: 1; margin: 12px 0 12px; max-width: 16ch; }
.cta-band p { color: var(--muted); max-width: 52ch; margin: 0 0 24px; position: relative; }
.cta-band .hero-cta { position: relative; z-index: 1; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 44px 0 116px; color: var(--muted); font-size: 14px; background: #030408; }
@media (min-width: 768px) { .site-footer { padding-bottom: 44px; } }
.foot-grid { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer h4 { color: var(--cyan); font-family: var(--mono); font-weight: 500; font-size: 11.5px; text-transform: uppercase; letter-spacing: .18em; margin: 0 0 12px; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--btc); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.site-footer address { font-style: normal; line-height: 1.7; font-family: var(--mono); font-size: 13px; }
.fine { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.6; color: var(--dim); }

/* ---------- Mobile sticky CTA ---------- */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: rgba(4,5,10,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line-hi); display: flex; gap: 10px;
}
.mobile-cta::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan), var(--btc), transparent); }
.mobile-cta .btn { flex: 1; }
.mobile-cta .btn-ghost { flex: 0 0 34%; }
@media (min-width: 768px) { .mobile-cta { display: none; } }

/* ---------- Modal ---------- */
dialog.modal {
  border: 1px solid var(--line-hi); padding: 0; width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 24px);
  background: linear-gradient(180deg, var(--panel-2), var(--bg)); color: var(--text);
  box-shadow: 0 0 0 1px rgba(0,229,255,.15), 0 0 60px rgba(0,229,255,.15), 0 40px 80px -20px #000;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
dialog.modal::backdrop { background: rgba(2,3,8,.78); backdrop-filter: blur(4px); }
@media (max-width: 560px) {
  dialog.modal { margin: auto 0 0; width: 100vw; max-width: 100vw; clip-path: polygon(0 18px, 18px 0, 100% 0, 100% 100%, 0 100%); border-bottom: 0; }
}
.modal-in { padding: 24px 22px calc(22px + env(safe-area-inset-bottom)); position: relative; }
.modal-in::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--btc), var(--yellow), var(--cyan)); }
.modal-top { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.modal-close { border: 1px solid var(--line-hi); background: none; width: 40px; height: 40px; font-size: 20px; flex: none; color: var(--cyan); }
.modal h3 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 26px; margin: 8px 0 6px; line-height: 1.05; }
.modal-sum { font-family: var(--mono); font-size: 12.5px; color: var(--btc); margin: 0 0 16px; letter-spacing: .02em; }
.modal-locked { border: 1px dashed rgba(0,229,255,.35); padding: 14px; margin: 0 0 18px; background: rgba(0,229,255,.04); font-size: 14px; }
.modal-locked b { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); }
.modal-locked ul { margin: 10px 0 0; padding-left: 18px; color: var(--muted); }
.modal-actions { display: grid; gap: 10px; }
.modal-actions .btn { width: 100%; }
.modal-note { font-size: 12px; color: var(--dim); text-align: center; margin: 12px 0 0; }

/* ---------- About page ---------- */
.about-hero { padding: 64px 0 36px; position: relative; overflow: hidden; isolation: isolate; }
.about-hero::after {
  content: ""; position: absolute; z-index: -1; left: -10%; top: -40%; width: 70vw; max-width: 700px; aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(0,229,255,.16), rgba(255,214,10,.08) 55%, transparent 75%);
}
.about-hero h1 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(40px, 9vw, 88px); line-height: .95; margin: 18px 0; max-width: 13ch; }
.about-hero h1 em { font-style: normal; color: var(--btc); text-shadow: 0 0 24px var(--btc-glow); }
.about-hero p { color: var(--muted); font-size: 18px; max-width: 58ch; margin: 0; }
.about-grid { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .about-grid { grid-template-columns: 1.2fr 1fr; gap: 48px; } }
.prose h2 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(26px, 4.5vw, 36px); margin: 0 0 14px; }
.prose p { margin: 0 0 16px; color: var(--muted); font-size: 17px; }
.pillars { display: grid; gap: 12px; margin-top: 24px; }
.pillar {
  display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 16px; background: var(--panel); border: 1px solid var(--line);
  border-left: 2px solid var(--cyan);
}
.pillar svg { width: 36px; height: 36px; color: var(--btc); filter: drop-shadow(0 0 6px var(--btc-glow)); }
.pillar h3 { margin: 0 0 2px; font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; font-size: 16px; }
.pillar p { margin: 0; font-size: 14.5px; color: var(--muted); }
.office {
  background: var(--panel); border: 1px solid var(--line); align-self: start; overflow: hidden;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.office iframe { display: block; width: 100%; height: 260px; border: 0; filter: invert(.92) hue-rotate(180deg) saturate(.6) contrast(.9); }
.office-in { padding: 20px; }
.office h3 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 24px; margin: 8px 0 8px; }
.office address { font-style: normal; line-height: 1.7; margin-bottom: 16px; font-family: var(--mono); font-size: 13.5px; color: var(--muted); }
.office .btn { width: 100%; }
.office .btn + .btn { margin-top: 10px; }

@media (prefers-reduced-motion: reduce) {
  .ticker-track, .hero::before, .glitch::before, .glitch::after, .map-card .country.tier-sites, .new-badge { animation: none !important; }
  .glitch::before, .glitch::after { display: none; }
}
.section-head h2 em.c-sale { color: var(--btc); text-shadow: 0 0 20px var(--btc-glow); }
.section-head h2 em.c-lease { color: var(--yellow); text-shadow: 0 0 20px var(--yellow-glow); }

/* ---------- Map glow ---------- */
/* clip-path on .map-card would cut off its own shadow, so the halo lives on a wrapper */
.map-frame { position: relative; filter: drop-shadow(0 0 14px rgba(0,229,255,.28)) drop-shadow(0 0 40px rgba(255,148,22,.12)); }
.map-card { border-color: rgba(0,229,255,.35); }
.map-card svg { position: relative; z-index: 1; }

.glow-layer { pointer-events: none; animation: glowPulse 4s ease-in-out infinite; }
.glow-layer .tier-sites   { fill: #ff9416; opacity: 1; }
.glow-layer .tier-hosting { fill: #00e5ff; opacity: .85; }
.glow-layer .tier-active  { fill: #9fb6e6; opacity: .38; }
@keyframes glowPulse { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }

/* radar-style scan sweep */
.map-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 28%; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(0,229,255,.07) 70%, rgba(0,229,255,.35) 99%, transparent);
  animation: scan 7s linear infinite; mix-blend-mode: screen;
}
@keyframes scan { from { transform: translateY(-100%); } to { transform: translateY(400%); } }

@media (prefers-reduced-motion: reduce) { .glow-layer, .map-scan { animation: none; } .map-scan { display: none; } }

/* Countries where crypto mining is banned or restricted */
.map-card .country.tier-banned { fill: #4a0d16; stroke: rgba(255,42,61,.75); stroke-width: .7; cursor: pointer; }
.map-card .country.tier-banned:hover { fill: #8a1426; stroke: var(--red); transform: scale(1.06); filter: drop-shadow(0 0 12px var(--red-glow)); }
.glow-layer .tier-banned { fill: #ff2a3d; opacity: .45; }
.tag.ban { color: #ff6b7a; border-color: var(--red); background: rgba(255,42,61,.08); }

/* ---------- 3D map ---------- */
/* The map plane is tilted back in perspective; JS nudges --rx/--ry toward the cursor */
.map-card { perspective: 1100px; }
.map-card svg {
  transform: rotateX(var(--rx, 24deg)) rotateY(var(--ry, 0deg)) scale(1.1);
  transform-origin: 50% 58%;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
@media (max-width: 640px) { .map-card svg { transform: rotateX(18deg) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .map-card svg { transition: none; } }

.shadow-layer path { fill: #000; opacity: .7; }
.extrude path { fill: #0a0f19; stroke: none; }
.extrude .tier-sites   { fill: #7a3b00; }
.extrude .tier-hosting { fill: #01566a; }
.extrude .tier-active  { fill: #1d1452; }
.extrude .tier-banned  { fill: #3d0711; }

/* Hover lifts the country off its slab */
.map-card .tops .country:hover { transform: translateY(-3px) scale(1.04); }
.map-card .tops .country.tier-active:hover  { transform: translateY(-5px) scale(1.1); }
.map-card .tops .country.tier-hosting:hover { transform: translateY(-6px) scale(1.12); }
.map-card .tops .country.tier-sites:hover   { transform: translateY(-6px) scale(1.08); }
.map-card .tops .country.tier-banned:hover  { transform: translateY(-4px) scale(1.06); }

/* ---------- Private tier: electric violet ---------- */
.map-card .country.tier-active { fill: #3f2f9e; stroke: #9d8bff; stroke-width: .7; }
.map-card .country.tier-active:hover { fill: #7a5cff; stroke: #e1dbff; filter: drop-shadow(0 0 14px rgba(122,92,255,.6)); }
.glow-layer .tier-active { fill: #7a5cff; opacity: .32; }
.tag.act { color: #b3a4ff; border-color: #7a5cff; background: rgba(122,92,255,.1); }
.chip.active { border-color: rgba(122,92,255,.55); }
.chip.active .n { color: #b3a4ff; }
.plaque.inquiry { background: #7a5cff; color: #fff; box-shadow: 0 0 14px rgba(122,92,255,.5); }
.seg button[data-type="inquiry"][aria-pressed="true"] { background: #7a5cff; color: #fff; box-shadow: 0 0 16px rgba(122,92,255,.5); }

/* ---------- WhatsApp / email contact buttons ---------- */
[hidden] { display: none !important; }
.btn-wa { background: #25d366; color: #03170a; }
.btn-wa:hover { background: #4be083; filter: drop-shadow(0 0 14px rgba(37,211,102,.5)); }
.btn-icon { flex: 0 0 48px !important; padding: 0; }
.contact-row { display: flex; gap: 10px; }
.contact-row .btn { flex: 1; }
.panel-foot .contact-row { margin-top: 10px; }
.panel-foot .contact-row .btn { width: auto; }
.office .contact-row { margin-top: 10px; }

/* ---------- Palette v2: hosting = yellow (rented capacity, like lease), private = cyan ---------- */
.map-card .country.tier-hosting { fill: #d9b300; stroke: #fff1a0; stroke-width: .8; filter: drop-shadow(0 0 6px var(--yellow-glow)); }
.map-card .country.tier-hosting:hover { fill: var(--yellow); stroke: #fff; filter: drop-shadow(0 0 18px var(--yellow-glow)); }
.glow-layer .tier-hosting { fill: #ffd60a; opacity: .85; }
.extrude .tier-hosting { fill: #6b5800; }

.map-card .country.tier-active { fill: #0b5a6c; stroke: #4fe9ff; stroke-width: .7; }
.map-card .country.tier-active:hover { fill: #0aa5c0; stroke: #c9fbff; filter: drop-shadow(0 0 14px var(--cyan-glow)); }
.glow-layer .tier-active { fill: #00e5ff; opacity: .26; }
.extrude .tier-active { fill: #02323d; }

.tag.host { color: var(--yellow); border-color: var(--yellow); background: rgba(255,214,10,.08); }
.tag.act { color: var(--cyan); border-color: var(--cyan); background: rgba(0,229,255,.07); }
.chip.hosting { border-color: rgba(255,214,10,.6); }
.chip.hosting .n { color: var(--yellow); }
.chip.active { border-color: rgba(0,229,255,.45); }
.chip.active .n { color: var(--cyan); }
.plaque.hosting { background: var(--yellow); color: #141000; box-shadow: 0 0 14px var(--yellow-glow); }
.plaque.inquiry { background: var(--cyan); color: #001216; box-shadow: 0 0 14px var(--cyan-glow); }
.seg button[data-type="hosting"][aria-pressed="true"] { background: var(--yellow); color: #141000; box-shadow: 0 0 16px var(--yellow-glow); }
.seg button[data-type="inquiry"][aria-pressed="true"] { background: var(--cyan); color: #001216; box-shadow: 0 0 16px var(--cyan-glow); }

/* ---------- Quick deals (WhatsApp-green highlight) ---------- */
:root { --wa: #25d366; --wa-hi: #5cf08f; --wa-glow: rgba(37, 211, 102, .45); }
.quick { padding-top: 12px; }
.section-head h2 em.c-wa { color: var(--wa); text-shadow: 0 0 22px var(--wa-glow); font-style: normal; }
.quick .eyebrow { color: var(--wa); }
.quick .eyebrow::before { color: var(--wa); }

.quick-grid { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* phones & small tablets: swipeable carousel */
@media (max-width: 820px) {
  .quick-grid {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px;
    margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter) 12px; scrollbar-width: none;
  }
  .quick-grid::-webkit-scrollbar { display: none; }
  .qcard { flex: 0 0 78%; max-width: 320px; scroll-snap-align: start; }
}

.qcard {
  position: relative; display: flex; flex-direction: column; text-align: left; padding: 0; border: 0; color: var(--text);
  background: linear-gradient(180deg, #0c1a14, var(--panel));
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  transition: transform .2s ease, filter .2s ease;
}
.qcard::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; padding: 1px;
  background: linear-gradient(135deg, var(--wa), rgba(37,211,102,.15) 45%, rgba(37,211,102,.15) 60%, var(--wa)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.qcard:hover { transform: translateY(-3px); filter: drop-shadow(0 0 18px var(--wa-glow)); }
.qcard:focus-visible { outline: 2px solid var(--wa); outline-offset: 3px; }
.q-media { position: relative; display: block; height: 118px; overflow: hidden; background: #03050a; }
.q-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.2) brightness(.7); }
.q-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,5,10,.2), rgba(4,5,10,.85)); }
.q-badge {
  position: absolute; left: 12px; top: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 7px; border-radius: 999px; background: var(--wa); color: #03170a;
  font-family: var(--display); font-weight: 700; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 0 0 3px rgba(37,211,102,.25), 0 0 18px var(--wa-glow);
  animation: waPing 2.4s ease-in-out infinite;
}
.q-badge svg { width: 15px; height: 15px; }
@keyframes waPing { 0%, 100% { box-shadow: 0 0 0 3px rgba(37,211,102,.25), 0 0 14px var(--wa-glow); } 50% { box-shadow: 0 0 0 6px rgba(37,211,102,.12), 0 0 24px var(--wa-glow); } }
.q-mw { position: absolute; left: 12px; bottom: 10px; z-index: 1; font-family: var(--mono); font-weight: 700; font-size: 26px; letter-spacing: -.03em; color: #fff; text-shadow: 0 0 16px var(--wa-glow); }
.q-body { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px 14px; flex: 1; }
.q-loc { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--wa); }
.q-title { font-family: var(--display); font-weight: 600; font-size: 17px; line-height: 1.15; text-transform: uppercase; }
.q-row { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-family: var(--mono); font-size: 13px; }
.q-row b { color: var(--btc); font-weight: 600; }
.q-row i { font-style: normal; color: var(--cyan); }
.q-cta { margin-top: auto; padding-top: 6px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--wa); }

/* small tag on the same listings inside the main grid */
.q-tag {
  position: absolute; right: 14px; top: 44px; z-index: 1; display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px 3px 5px; border-radius: 999px; background: var(--wa); color: #03170a;
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.q-tag svg { width: 12px; height: 12px; }

/* ---------- Quick-deal pop-up ---------- */
dialog.qmodal { width: min(640px, calc(100vw - 24px)); box-shadow: 0 0 0 1px rgba(37,211,102,.35), 0 0 60px rgba(37,211,102,.18), 0 40px 80px -20px #000; }
dialog.qmodal .modal-in::before { background: linear-gradient(90deg, var(--wa), var(--cyan)); }
dialog.qmodal .modal-in { overflow-y: auto; max-height: calc(100dvh - 24px); }
.q-close { position: absolute; right: 16px; top: 16px; z-index: 2; background: rgba(4,5,10,.7); }
.q-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-right: 48px; }
.q-head .q-badge { position: static; animation: none; }
.q-id { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
dialog.qmodal h3 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(22px, 5vw, 30px); line-height: 1.05; margin: 12px 0 6px; }
.q-pitch { color: var(--muted); margin: 0 0 16px; }
.q-loc-wrap { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; align-items: stretch; margin-bottom: 14px; }
@media (max-width: 560px) { .q-loc-wrap { grid-template-columns: 1fr; } }
.q-minimap { position: relative; height: 170px; background: #05070d; border: 1px solid rgba(37,211,102,.3); overflow: hidden; }
.q-minimap svg { width: 100%; height: 100%; display: block; }
.q-map-loading { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.mm-land { fill: #182132; stroke: #2a3550; stroke-width: .6; }
.mm-target { fill: rgba(37,211,102,.35); stroke: var(--wa); stroke-width: 1.6; filter: drop-shadow(0 0 8px var(--wa-glow)); }
.mm-area { fill: rgba(37,211,102,.22); stroke: var(--wa); stroke-width: 1.2; stroke-dasharray: 4 3; }
.mm-dot { fill: #fff; stroke: var(--wa); stroke-width: 2; }
.mm-pulse { fill: none; stroke: var(--wa); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: mmPulse 2s ease-out infinite; }
@keyframes mmPulse { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(3.2); } }
.q-loc-text { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 12px; background: rgba(37,211,102,.06); border: 1px solid rgba(37,211,102,.2); }
.q-loc-text b { font-family: var(--display); text-transform: uppercase; letter-spacing: .03em; }
.q-loc-text span { font-size: 13px; color: var(--muted); }
.q-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); margin-bottom: 14px; }
@media (min-width: 560px) { .q-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.qf { padding: 10px 12px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.qf span { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.qf b { display: block; font-family: var(--mono); font-size: 14px; font-weight: 600; margin-top: 3px; overflow-wrap: anywhere; }
.q-hl { margin: 0 0 14px; padding-left: 18px; color: var(--muted); font-size: 14.5px; }
.q-hl li::marker { color: var(--wa); }
.q-lock { font-size: 13px; color: var(--muted); padding: 10px 12px; border: 1px dashed rgba(37,211,102,.35); margin-bottom: 14px; }
.q-actions { display: grid; gap: 10px; }
.q-main { width: 100%; min-height: 54px; font-size: 16px; }
@media (prefers-reduced-motion: reduce) { .q-badge, .mm-pulse { animation: none; } }

/* ---------- Highlighted listings: map needles + grid ---------- */
.needle { cursor: pointer; }
.needle .needle-in { transition: transform .25s cubic-bezier(.2,.9,.25,1.3); }
.needle:hover .needle-in, .needle:focus .needle-in { transform: translateY(-4px) scale(1.25); }
.needle:focus { outline: none; }
.n-shadow { fill: rgba(0,0,0,.6); }
.n-stem { stroke: #d6ffe6; stroke-width: 1.6; stroke-linecap: round; }
.n-head { fill: var(--wa); stroke: #eafff1; stroke-width: 1.2; }
.n-glow { fill: var(--wa); opacity: .35; animation: needleGlow 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.n-hit { fill: transparent; }
@keyframes needleGlow { 0%, 100% { opacity: .15; transform: scale(1); } 50% { opacity: .5; transform: scale(1.6); } }
@media (prefers-reduced-motion: reduce) { .n-glow { animation: none; } }

.card-hl { filter: drop-shadow(0 0 10px rgba(37,211,102,.25)); }
.card-hl::after { background: linear-gradient(135deg, var(--wa), rgba(37,211,102,.2) 45%, rgba(37,211,102,.2) 60%, var(--wa)) border-box; }
.seg button[data-type="featured"] { color: var(--wa); }
.seg button[data-type="featured"][aria-pressed="true"] { background: var(--wa); color: #03170a; box-shadow: 0 0 16px var(--wa-glow); }
.nav a.nav-hl { color: var(--wa); }
.nav a.nav-hl:hover { color: var(--wa-hi); text-shadow: 0 0 10px var(--wa-glow); }

/* ---------- 3D globe ---------- */
.map-card { aspect-ratio: 1.45 / 1; perspective: none; }
@media (max-width: 640px) { .map-card { aspect-ratio: auto; height: min(96vw, 440px); } }
.map-card svg { transform: none !important; cursor: grab; }
.map-card svg:active { cursor: grabbing; }
.g-atmo, .g-overlay { pointer-events: none; }
.g-ocean { stroke: rgba(0,229,255,.45); stroke-width: 1; }
.map-card .graticule { stroke: rgba(0,229,255,.1); }

/* "Highlighted" tag: under the sale/lease plaque, above the Telegram photo overlay */
.card-art .q-tag { left: 14px; right: auto; top: 46px; z-index: 3; box-shadow: 0 0 14px var(--wa-glow); }
.card-art .q-tag svg { position: static; inset: auto; width: 12px; height: 12px; }

/* ---------- Holographic globe (neon borders, see-through) ---------- */
.g-ocean { stroke: #00e5ff; stroke-width: 1.4; filter: drop-shadow(0 0 6px rgba(0,229,255,.8)); }
.g-back path { fill: none; stroke: rgba(0,229,255,.16); stroke-width: .6; pointer-events: none; }
.g-back path.tier-sites   { stroke: rgba(255,148,22,.3); }
.g-back path.tier-hosting { stroke: rgba(255,214,10,.26); }
.g-back path.tier-banned  { stroke: rgba(255,42,61,.22); }
.map-card .graticule { stroke: rgba(0,229,255,.16); stroke-width: .5; stroke-dasharray: 2 3; }
.glow-layer { opacity: .55; }

/* fills are translucent tints; the neon lives in the borders */
.map-card .tops .country { fill: rgba(120,150,190,.05); stroke: rgba(140,170,210,.3); stroke-width: .6; animation: none; filter: none; }
.map-card .tops .country.tier-active  { fill: rgba(0,229,255,.1);   stroke: #22e6ff; stroke-width: .8; }
.map-card .tops .country.tier-hosting { fill: rgba(255,214,10,.22); stroke: #ffe24a; stroke-width: 1; }
.map-card .tops .country.tier-sites   { fill: rgba(255,148,22,.3);  stroke: #ffb04a; stroke-width: 1.2; }
.map-card .tops .country.tier-banned  { fill: rgba(255,42,61,.16);  stroke: #ff4d5e; stroke-width: .8; }
.map-card .tops .country.tier-active:hover  { fill: rgba(0,229,255,.32);  stroke: #d5fbff; filter: none; }
.map-card .tops .country.tier-hosting:hover { fill: rgba(255,214,10,.45); stroke: #fff6c2; filter: none; }
.map-card .tops .country.tier-sites:hover   { fill: rgba(255,148,22,.55); stroke: #ffe0b8; filter: none; }
.map-card .tops .country.tier-banned:hover  { fill: rgba(255,42,61,.38);  stroke: #ffc2c8; filter: none; }
.map-card .tops .country.is-selected { stroke: #fff; stroke-width: 1.8; }

/* ---------- Beacons (highlighted listings) ---------- */
.needle .needle-in { transition: transform .3s cubic-bezier(.2,.9,.25,1.3); }
.needle:hover .needle-in, .needle:focus .needle-in { transform: scale(1.3); }
.b-beam { fill: url(#beam); }
.b-core { fill: #3dff9a; stroke: #eafff3; stroke-width: 1; filter: drop-shadow(0 0 4px #3dff9a) drop-shadow(0 0 10px rgba(61,255,154,.7)); }
.b-ring { fill: none; stroke: #3dff9a; stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: beaconRing 2.4s ease-out infinite; }
.b-ring2 { animation-delay: 1.2s; }
@keyframes beaconRing { from { opacity: .95; transform: scale(.5); } to { opacity: 0; transform: scale(2.6); } }
@media (prefers-reduced-motion: reduce) { .b-ring { animation-duration: 4s; } }

/* Globe v3: no sphere outline or halo; nearly clear sphere, only countries glow */
.g-ocean { fill: rgba(0,229,255,.025); stroke: none; filter: none; }
.g-atmo, .g-overlay { display: none; }
.map-card .graticule { stroke: rgba(0,229,255,.07); }
.g-back path { stroke: rgba(0,229,255,.2); }

/* Parallels & meridians */
.map-card .graticule { fill: none; stroke: rgba(0,229,255,.32); stroke-width: .6; stroke-dasharray: none; filter: drop-shadow(0 0 2px rgba(0,229,255,.6)); }
.map-card .graticule-major { fill: none; stroke: rgba(122,243,255,.75); stroke-width: 1; filter: drop-shadow(0 0 4px rgba(0,229,255,.9)); pointer-events: none; }
.g-back .graticule-back { fill: none; stroke: rgba(0,229,255,.09); stroke-width: .5; }

/* Wordmark: larger .io + subtle neon glow */
.brand-name { text-shadow: 0 0 10px rgba(0,229,255,.28), 0 0 2px rgba(255,255,255,.25); }
.brand-name b { text-shadow: 0 0 12px rgba(255,148,22,.55); }
.brand-name small { font-size: 14px; font-weight: 600; text-shadow: 0 0 10px rgba(0,229,255,.7); }
.brand-mark { filter: drop-shadow(0 0 6px rgba(0,229,255,.35)); }
.mm-grid { fill: none; stroke: rgba(0,229,255,.12); stroke-width: .6; }
.mm-land { fill: rgba(24,33,50,.85); }

/* ---------- Full-width globe; country panel underneath on every screen size ---------- */
@media (min-width: 1000px) {
  .map-shell { grid-template-columns: minmax(0, 1fr); }
  .map-card { aspect-ratio: 16 / 9; max-height: 720px; }
  .panel { max-height: none; }
  .panel-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; align-content: start; }
  .panel-body > .panel-empty { grid-column: 1 / -1; }
}

/* ---------- Dividers in the globe's palette: hubs · hosting · highlighted · private · banned ---------- */
:root { --globe-line: linear-gradient(90deg, #ff9416 0%, #ffd60a 25%, #3dff9a 50%, #00e5ff 75%, #ff2a3d 100%); }
.site-header::after { background: var(--globe-line); opacity: .85; }
.panel::before, .modal-in::before, dialog.qmodal .modal-in::before { background: var(--globe-line); box-shadow: 0 0 10px rgba(0,229,255,.35); }
.mobile-cta::before { background: var(--globe-line); }

/* ---------- Sticky listing filters + back to top ---------- */
.filters-sentinel { height: 1px; }
.filters {
  position: sticky; top: var(--header-h); z-index: 30;
  margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1);
  padding: 10px var(--gutter); transition: background .25s, box-shadow .25s;
}
.filters.is-stuck {
  background: rgba(4, 5, 10, .9); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 12px 30px -18px #000;
}
.filters.is-stuck::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--globe-line); opacity: .7; }
.to-top {
  display: none; align-items: center; gap: 6px; min-height: 42px; padding: 0 14px; border: 1px solid var(--line-hi); background: var(--panel);
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
.to-top svg { width: 15px; height: 15px; }
.to-top:hover { background: rgba(0,229,255,.12); }
.filters.is-stuck .to-top { display: inline-flex; }
@media (max-width: 640px) {
  .filters { gap: 8px; }
  .filters .seg { width: 100%; }
  .filters.is-stuck .result-count { display: none; }
  .filters.is-stuck .to-top { flex: 0 0 auto; padding: 0 12px; }
  .filters.is-stuck .to-top span { display: none; }
}
@media (max-width: 640px) {
  .filters { flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
  .filters .select { flex: 1 1 0; min-width: 0; min-height: 42px; }
  .filters.is-stuck .to-top { min-height: 42px; }
  .filters.is-stuck .seg button { min-height: 34px; }
}

/* ---------- Lease = electric violet (yellow now means hosting only) ---------- */
:root { --lease: #8c6bff; --lease-glow: rgba(140, 107, 255, .55); }
.plaque.lease { background: var(--lease); color: #fff; box-shadow: 0 0 14px var(--lease-glow); }
.plaque.both { box-shadow: 0 0 14px var(--lease-glow); }
.plaque.both .p-lease { background: var(--lease); color: #fff; }
.seg button[data-type="lease"][aria-pressed="true"] { background: var(--lease); color: #fff; box-shadow: 0 0 16px var(--lease-glow); }
.section-head h2 em.c-lease { color: #a58bff; text-shadow: 0 0 22px var(--lease-glow); }

/* Lease = electric blue */
:root { --lease: #2f6bff; --lease-glow: rgba(47, 107, 255, .6); }
.section-head h2 em.c-lease { color: #5a8bff; text-shadow: 0 0 22px var(--lease-glow); }

/* ---------- Globe lite mode (phones / tablets): same look, no per-frame filters ---------- */
.globe-lite .map-scan { display: none; }
.map-frame:has(.globe-lite) { filter: none; }
.globe-lite { box-shadow: inset 0 0 0 1px rgba(0,229,255,.35); }
.globe-lite .graticule, .globe-lite .graticule-major { filter: none; }
.globe-lite .glow-layer { display: none; }
.globe-lite .tops .country { filter: none !important; transition: none; }
.globe-lite .tops .country.tier-sites { stroke-width: 1.6; }
.globe-lite .tops .country.tier-hosting { stroke-width: 1.3; }
.globe-lite .b-ring2 { display: none; }
.globe-lite .b-ring { animation-duration: 3.2s; }
.globe-lite .b-core { filter: none; }