/* === Base / Theme === */
:root{
  --bg0:#070712;
  --bg1:#0a0a16;

  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);
  --muted2: rgba(255,255,255,.52);

  --p1:#7c3aed;
  --p2:#2563eb;
  --p3:#22d3ee;

  --glassA: rgba(255,255,255,.085);
  --glassB: rgba(255,255,255,.045);

  --stroke: rgba(255,255,255,.12);

  --shadowA: 0 18px 48px rgba(0,0,0,.42);
  --shadowB: 0 10px 26px rgba(0,0,0,.26);

  --r: 26px;

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display","SF Pro Text",
          Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial;

  --ease: cubic-bezier(.2,.8,.2,1);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: var(--sans);
  color: var(--text);
  background:
    radial-gradient(900px 640px at 18% 12%, rgba(124,58,237,.18), transparent 62%),
    radial-gradient(900px 640px at 82% 18%, rgba(37,99,235,.14), transparent 62%),
    radial-gradient(900px 740px at 52% 96%, rgba(34,211,238,.08), transparent 66%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}

code.code{
  font-family: var(--mono);
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.12);
  padding: 2px 6px;
  border-radius: 8px;
  color: rgba(255,255,255,.86);
}

/* Background */
.bg{ position:fixed; inset:0; z-index:-1; pointer-events:none; }
.bg::before{
  content:"";
  position:absolute;
  inset:-28vh -24vw;
  background:
    radial-gradient(closest-side at 20% 30%, rgba(124,58,237,.18), transparent 72%),
    radial-gradient(closest-side at 80% 22%, rgba(37,99,235,.14), transparent 72%),
    radial-gradient(closest-side at 52% 88%, rgba(34,211,238,.08), transparent 74%);
  opacity:.95;
  animation: drift 42s var(--ease) infinite;
  transform: translateZ(0);
}
.bg::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.06;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.03) 0 1px, transparent 1px 4px);
}
@keyframes drift{
  0%{ transform: translate(0,0) scale(1); }
  45%{ transform: translate(2.2vw,1.4vh) scale(1.015); }
  75%{ transform: translate(-1.4vw,2.2vh) scale(1.01); }
  100%{ transform: translate(0,0) scale(1); }
}
.perf .bg::before{ animation:none; }

.wrap{
  max-width: 1140px;
  margin: 0 auto;
  padding: clamp(72px, 8vh, 92px) clamp(14px, 2.8vw, 18px) 74px;
}

/* Header */
header{
  position:fixed;
  top:14px;
  left:50%;
  transform: translateX(-50%);
  width: min(1140px, calc(100% - 24px));
  z-index: 60;
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 16px 46px rgba(0,0,0,.26);
  position:relative;
  overflow:hidden;
}
.canBlur .nav{ backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nav::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(820px 220px at 15% 0%, rgba(255,255,255,.10), transparent 55%),
    radial-gradient(700px 220px at 92% 10%, rgba(124,58,237,.08), transparent 60%);
  opacity:.9;
  pointer-events:none;
}
.nav > *{ position:relative; z-index:1; }

.brand{ display:flex; align-items:center; gap:10px; min-width: 220px; }
.mark{
  width: 36px; height: 36px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(circle at 30% 25%, rgba(124,58,237,.80), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(37,99,235,.70), transparent 55%),
    rgba(255,255,255,.08);
  box-shadow: 0 10px 26px rgba(124,58,237,.10);
}
.brandMeta{ display:flex; flex-direction:column; line-height:1.12; }
.brandMeta b{ font-weight: 820; letter-spacing:-.01em; }
.brandMeta small{ font-family: var(--mono); font-size: 12px; color: var(--muted2); }

.navlinks{
  display:flex;
  gap: 6px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.navlinks a{
  text-decoration:none;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12.5px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.0);
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
  white-space: nowrap;
}
.navlinks a:hover{
  color: var(--text);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
}
.navlinks a.active{
  color: var(--text);
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.16);
}
.status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(255,255,255,.82);
  margin-left: 6px;
}
.dot{
  width: 8px; height: 8px; border-radius: 99px;
  background: linear-gradient(135deg, var(--p1), var(--p2));
  box-shadow: 0 0 0 6px rgba(124,58,237,.14);
}
@media (max-width: 720px){
  .brandMeta small{ display:none; }
  .status{ display:none; }
}

/* Surfaces */
.glass{
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--glassA), var(--glassB));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadowA);
  position:relative;
  overflow:hidden;
}
.canBlur .glass{ backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.glass::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(820px 260px at 18% 8%, rgba(255,255,255,.11), transparent 56%),
    radial-gradient(720px 260px at 92% 16%, rgba(124,58,237,.08), transparent 62%),
    radial-gradient(720px 280px at 52% 96%, rgba(37,99,235,.06), transparent 64%);
  opacity:.9;
  pointer-events:none;
}
.glass > *{ position:relative; z-index:1; }

.lift{ transition: transform .18s var(--ease); }
.lift:hover{ transform: translateY(-2px); }
.perf .lift:hover{ transform:none; }

.badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.16);
  font-family: var(--mono);
  font-size: 12.5px;
  color: rgba(255,255,255,.78);
}

h1{
  margin: 14px 0 10px;
  font-size: clamp(30px, 4.4vw, 58px);
  line-height: 1.04;
  letter-spacing: -0.04em;
}
.grad{
  background: linear-gradient(90deg, var(--p1), var(--p2), var(--p3));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
.lead{
  margin:0;
  color: var(--muted);
  font-size: clamp(15px, 1.2vw, 16.8px);
  line-height: 1.65;
  max-width: 70ch;
}

.cta{
  margin-top: 18px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  align-items:center;
}
.btn{
  appearance:none;
  border:none;
  cursor:pointer;
  padding: 11px 14px;
  border-radius: 14px;
  font-weight: 860;
  letter-spacing: -.01em;
  color: rgba(255,255,255,.94);
  background: linear-gradient(135deg, rgba(124,58,237,.92), rgba(37,99,235,.92));
  box-shadow: 0 14px 36px rgba(37,99,235,.16);
  transition: transform .18s var(--ease), filter .18s var(--ease);
  display:inline-flex;
  gap:10px;
  align-items:center;
  text-decoration:none;
}
.btn:hover{ transform: translateY(-1px); filter:saturate(1.05); }
.btn.secondary{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow:none;
  color: var(--text);
}

.sectionTitle{
  margin: 18px 0 10px;
  font-size: 12px;
  letter-spacing:.14em;
  text-transform: uppercase;
  font-family: var(--mono);
  color: rgba(255,255,255,.82);
}

/* Index layout */
.heroStacked{
  display:grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin-top: 18px;
}
.heroMain{
  padding: clamp(22px, 3vw, 30px);
}
.heroMain::after{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(920px 340px at 12% 0%, rgba(124,58,237,.18), transparent 58%),
    radial-gradient(920px 340px at 86% 8%, rgba(37,99,235,.14), transparent 62%);
  opacity:.9;
  pointer-events:none;
}
.heroMain > *{ position:relative; z-index:1; }

/* Social grid */
.socials{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.social{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.16);
  text-decoration:none;
  color: var(--text);
  transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.social:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
}
.left{ display:flex; align-items:center; gap: 10px; min-width: 0; }
.icon{
  width: 40px; height: 40px; border-radius: 16px;
  display:grid; place-items:center;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  flex: 0 0 auto;
}
.icon svg{
  width: 18px;
  height: 18px;
  color: rgba(255,255,255,.92); /* stroke uses currentColor */
}
.social b{
  display:block;
  font-weight: 860;
  letter-spacing: -.01em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.social small{
  display:block;
  color: var(--muted2);
  font-family: var(--mono);
  font-size: 12px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.arrow{ color: rgba(255,255,255,.70); font-family: var(--mono); }

/* Pages content blocks */
.pageGrid{
  display:grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  align-items: start;
  margin-top: 18px;
}
.block{
  padding: 18px;
  border-radius: var(--r);
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.05);
  box-shadow: 0 10px 30px rgba(0,0,0,.20);
  position:relative;
  overflow:hidden;
}
.canBlur .block{ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* Terminal base classes (used in terminal.html) */
.termCard{ padding: 14px; display:flex; flex-direction:column; height: clamp(360px, 62vh, 620px); min-height: 360px; }
.termWindowBar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 10px 12px; border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.16);
  box-shadow: var(--shadowB);
}
.lights{ display:flex; gap:6px; align-items:center; }
.l{ width:10px; height:10px; border-radius:99px; box-shadow: 0 0 0 4px rgba(255,255,255,.06); }
.l.r{ background:#ff5f57; } .l.y{ background:#febc2e; } .l.g{ background:#28c840; }
.termTitle{ flex:1 1 auto; min-width:0; font-family:var(--mono); font-size:12px; color: rgba(255,255,255,.74); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding: 0 6px; }
.termBadge{ font-family:var(--mono); font-size:12px; color: rgba(255,255,255,.70); border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.14); padding: 6px 10px; border-radius:999px; white-space:nowrap; }
.termRuntimeBar{
  margin-top: 10px; padding: 10px 12px; border-radius:18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.045);
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.tabs{ display:flex; gap:8px; flex-wrap:wrap; font-family:var(--mono); font-size:12px; color: rgba(255,255,255,.74); }
.tab{ padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.14); }
.tab.active{ border-color: rgba(34,211,238,.25); background: rgba(34,211,238,.10); color: rgba(255,255,255,.86); }
.termPane{
  margin-top: 10px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  box-shadow: var(--shadowB);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  flex: 1 1 auto;
  min-height: 0;
  contain: content;
}
.termScroll{
  flex: 1 1 auto; min-height:0;
  overflow:auto; overscroll-behavior: contain;
  padding: 14px;
  font-family: var(--mono);
  font-size: 12.8px;
  line-height: 1.65;
  color: rgba(255,255,255,.78);
  white-space: pre-wrap;
}
.termScroll::-webkit-scrollbar{ width: 10px; }
.termScroll::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(124,58,237,.35), rgba(37,99,235,.35));
  border: 2px solid rgba(0,0,0,.30);
  border-radius: 999px;
}
.termScroll{ scrollbar-width: thin; scrollbar-color: rgba(124,58,237,.45) transparent; }
.cmdBar{
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.28);
  padding: 10px 12px;
  display:flex;
  align-items:center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12.8px;
  color: rgba(255,255,255,.86);
}
.prompt{ color: rgba(124,58,237,.92); }
.cmdText{ color: rgba(255,255,255,.92); }
.cursor{
  display:inline-block;
  width: 8px;
  height: 16px;
  border-radius: 2px;
  background: rgba(255,255,255,.70);
  animation: blink 1s steps(1) infinite;
  margin-left: 2px;
}
@keyframes blink { 50%{ opacity:0; } }
.tDim{ color: rgba(255,255,255,.50); }
.tAccent{ color: rgba(34,211,238,.92); }
.tGreen{ color: rgba(52,211,153,.92); }
.tBlue{ color: rgba(37,99,235,.92); }
.tWarn{ color: rgba(251,191,36,.92); }
.cmdHistoryLine{ display:block; margin: 0 0 2px; }

/* Modal (Rickroll) */
.modal{
  position: fixed;
  inset: 0;
  z-index: 100;
  display:none;
  align-items:center;
  justify-content:center;
  padding: 18px;
  background: rgba(0,0,0,.62);
}
.modal.show{ display:flex; }
.modalCard{
  width: min(980px, 100%);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(12,12,24,.70);
  box-shadow: 0 28px 80px rgba(0,0,0,.55);
  overflow:hidden;
}
.canBlur .modalCard{ backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.modalTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.modalTop b{ font-family: var(--mono); font-size: 12px; color: rgba(255,255,255,.82); }
.modalTop button{
  appearance:none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.88);
  border-radius: 12px;
  padding: 8px 10px;
  cursor:pointer;
  font-family: var(--mono);
  font-size: 12px;
}
.videoWrap{ aspect-ratio: 16 / 9; width: 100%; background: rgba(0,0,0,.35); }
.videoWrap iframe{ width:100%; height:100%; border:0; }

/* Toast */
.toast{
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.65);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.88);
  padding: 10px 12px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 12px;
  opacity: 0;
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 80;
}
.toast.show{ opacity:1; transform: translateX(-50%) translateY(-2px); }

.socialSection{
  margin-top: 14px;
}
.socialSectionHead{
  display:flex;
  align-items:center;
  gap: 12px;
  margin: 2px 0 10px;
}
.socialSectionTitle{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.84);
  white-space: nowrap;
}
.socialSectionLine{
  height: 1px;
  flex: 1 1 auto;
  background: linear-gradient(90deg, rgba(124,58,237,.35), rgba(37,99,235,.18), transparent);
  border-radius: 99px;
  opacity: .9;
}

/* --- Social Board (Columns) --- */
.socialBoard{
  display:grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items:start;
  margin-top: 12px;
}

/* 3 columns -> 2 -> 1 */
@media (max-width: 980px){
  .socialBoard{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .socialBoard{ grid-template-columns: 1fr; }
}

.groupCol{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
  padding: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
}
.canBlur .groupCol{
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.groupHead{
  display:flex;
  align-items:center;
  gap: 12px;
  margin: 4px 4px 12px;
}
.groupTitle{
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  white-space: nowrap;
}
.groupLine{
  height: 1px;
  flex: 1 1 auto;
  background: linear-gradient(90deg, rgba(124,58,237,.35), rgba(37,99,235,.18), transparent);
  border-radius: 99px;
  opacity: .9;
}

.socialList{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

/* make cards a bit tighter + consistent */
.social{
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
}
.social:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.16);
}

/* icon chip nicer */
.icon{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
}

/* line-icons use currentColor */
.icon svg{
  width: 18px;
  height: 18px;
  color: rgba(255,255,255,.92);
}

/* =========================
   SOCIALS V2 (sm- prefix)
   ========================= */

#smRoot { margin-top: 14px; }

.sm-section{ margin-top: 16px; }

.sm-titleRow{
  display:flex;
  align-items:center;
  gap: 12px;
  margin: 10px 2px 10px;
}

.sm-title{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
  white-space: nowrap;
}

.sm-line{
  height: 1px;
  flex: 1 1 auto;
  background: linear-gradient(90deg, rgba(124,58,237,.40), rgba(37,99,235,.18), transparent);
  border-radius: 999px;
  opacity: .9;
}

/* Grid like your example */
.sm-grid{
  display:grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px){
  .sm-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px){
  .sm-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .sm-grid{ grid-template-columns: 1fr; }
}

.sm-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;

  padding: 14px 14px;
  border-radius: 18px;

  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  box-shadow: 0 12px 30px rgba(0,0,0,.22);

  text-decoration:none;
  color: var(--text);

  transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
  will-change: transform;
}

.sm-card:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
}
.sm-card:active{ transform: translateY(0) scale(.99); }

button.sm-card{
  cursor:pointer;
  appearance:none;
}

.sm-left{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
}

.sm-icon{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  flex: 0 0 auto;

  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
}

.sm-icon svg{
  width: 19px;
  height: 19px;
  color: rgba(255,255,255,.92); /* stroke uses currentColor */
}

.sm-text{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap: 2px;
}

.sm-name{
  font-weight: 860;
  letter-spacing: -.01em;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sm-user{
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(255,255,255,.56);
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sm-go{
  font-family: var(--mono);
  font-size: 14px;
  color: rgba(255,255,255,.55);
  padding-left: 8px;
}

/* =========================
   SOCIALS V3 (scoped safe)
   ========================= */

#socialGrid{ margin-top: 14px; }

#socialGrid .smv3-section{ margin-top: 16px; }

#socialGrid .smv3-head{
  display:flex;
  align-items:center;
  gap: 12px;
  margin: 10px 2px 10px;
}

#socialGrid .smv3-title{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
  white-space: nowrap;
}

#socialGrid .smv3-line{
  height: 1px;
  flex: 1 1 auto;
  background: linear-gradient(90deg, rgba(124,58,237,.42), rgba(37,99,235,.18), transparent);
  border-radius: 999px;
  opacity: .9;
}

/* Grid wie dein Beispiel */
#socialGrid .smv3-grid{
  display:grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px){
  #socialGrid .smv3-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px){
  #socialGrid .smv3-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  #socialGrid .smv3-grid{ grid-template-columns: 1fr; }
}

#socialGrid .smv3-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;

  width: 100%;
  padding: 14px 14px;
  border-radius: 18px;

  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  box-shadow: 0 12px 30px rgba(0,0,0,.22);

  text-decoration:none;
  color: var(--text);

  transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
  will-change: transform;
}

#socialGrid .smv3-card:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
}

#socialGrid .smv3-card:active{
  transform: translateY(0) scale(.99);
}

#socialGrid button.smv3-card{
  appearance:none;
  cursor:pointer;
}

#socialGrid .smv3-left{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
}

#socialGrid .smv3-icon{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  flex: 0 0 auto;

  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
}

#socialGrid .smv3-icon svg{
  width: 19px;
  height: 19px;
  color: rgba(255,255,255,.92);
}

#socialGrid .smv3-text{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap: 2px;
}

#socialGrid .smv3-name{
  font-weight: 860;
  letter-spacing: -.01em;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#socialGrid .smv3-user{
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(255,255,255,.56);
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#socialGrid .smv3-go{
  font-family: var(--mono);
  font-size: 14px;
  color: rgba(255,255,255,.55);
  padding-left: 8px;
}

/* Debug (falls Container fehlt) */
#socialGrid .smv3-error{
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,80,80,.35);
  background: rgba(255,80,80,.10);
  color: rgba(255,255,255,.88);
  font-family: var(--mono);
  font-size: 12.5px;
}

/* ===== SOCIALS V3 HARD FIX (override huge svgs) ===== */

/* Ensure container isn't inheriting old grid rules */
#socialGrid{ display:block !important; }

/* The cards grid */
#socialGrid .smv3-grid{
  display:grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px){ #socialGrid .smv3-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px){  #socialGrid .smv3-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px){  #socialGrid .smv3-grid{ grid-template-columns: 1fr; } }

/* Card */
#socialGrid .smv3-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;

  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  box-shadow: 0 12px 30px rgba(0,0,0,.22);

  min-height: 74px;               /* keeps all cards consistent */
  text-decoration:none;
  color: var(--text);
  transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
#socialGrid .smv3-card:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
}
#socialGrid .smv3-card:active{ transform: translateY(0) scale(.99); }
#socialGrid button.smv3-card{ appearance:none; cursor:pointer; }

/* Left cluster */
#socialGrid .smv3-left{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
}

/* Icon chip */
#socialGrid .smv3-icon{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  flex: 0 0 auto;

  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
  overflow:hidden;
}

/* 🔥 HARD OVERRIDE for any global svg rules */
#socialGrid .smv3-icon svg{
  width: 19px !important;
  height: 19px !important;
  max-width: 19px !important;
  max-height: 19px !important;
  display:block !important;

  /* If some global CSS sets svg to position absolute etc. */
  position: static !important;
  inset: auto !important;

  /* Use stroke color from currentColor */
  color: rgba(255,255,255,.92) !important;
}

/* Text */
#socialGrid .smv3-text{ min-width:0; display:flex; flex-direction:column; gap: 2px; }
#socialGrid .smv3-name{
  font-weight: 860;
  letter-spacing: -.01em;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#socialGrid .smv3-user{
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(255,255,255,.56);
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#socialGrid .smv3-go{
  font-family: var(--mono);
  font-size: 14px;
  color: rgba(255,255,255,.55);
  padding-left: 8px;
}

/* Section headings */
#socialGrid .smv3-head{
  display:flex;
  align-items:center;
  gap: 12px;
  margin: 14px 2px 10px;
}
#socialGrid .smv3-title{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
  white-space: nowrap;
}
#socialGrid .smv3-line{
  height: 1px;
  flex: 1 1 auto;
  background: linear-gradient(90deg, rgba(124,58,237,.42), rgba(37,99,235,.18), transparent);
  border-radius: 999px;
  opacity: .9;
}

/* =========================
   PC SPECS (no-conflict)
   ========================= */

.pcCard{
  padding: 18px;
  margin-top: 14px;
}

.pcTitle{
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.86);
}

.pcSub{
  margin-top: 6px;
  color: rgba(255,255,255,.62);
  font-size: 14px;
}

.pcList{
  margin-top: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  overflow: hidden;
}

.pcRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.pcRow:first-child{ border-top: 0; }

.pcKey{
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.60);
}

.pcVal{
  font-weight: 850;
  color: rgba(255,255,255,.92);
  text-align:right;
  max-width: 70%;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pcChips{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 12px;
}

.pcChip{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.78);
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px;
}

.videoWrap{
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.35);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}

#rickVideo{
  width: 100%;
  height: auto;
  display: block;
}

/* Background + decorative overlays must not block clicks */
.bg { pointer-events: none !important; }

/* Falls dein Glass-Effekt über Pseudo-Elemente läuft */
.glass::before,
.glass::after,
.lift::before,
.lift::after {
  pointer-events: none !important;
}

/* Background + decorative overlays must not block clicks */
.bg { pointer-events: none !important; }

/* Falls dein Glass-Effekt über Pseudo-Elemente läuft */
.glass::before,
.glass::after,
.lift::before,
.lift::after {
  pointer-events: none !important;
}

.modal{
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  padding: 18px;
  background: rgba(0,0,0,.55);
  z-index: 9999;
}

.modal.show{
  display: grid;
}

.modalCard{
  width: min(920px, 96vw);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.28);
  box-shadow: 0 25px 80px rgba(0,0,0,.45);
  overflow: hidden;
}

.modalTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.videoWrap{
  width: 100%;
  background: rgba(0,0,0,.35);
}

#rickVideo{
  width: 100%;
  height: auto;
  display: block;
}

/* Header logo */
.mark{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  overflow: hidden;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

.mark img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.05); /* bisschen “premium” */
}

/* ===== Background image layer (uses your <div class="bg">) ===== */
.bg{
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;

  /* ✅ dein Bild */
  background-image:
    radial-gradient(1200px 700px at 20% 10%, rgba(124,58,237,.28), transparent 60%),
    radial-gradient(900px 600px at 85% 25%, rgba(37,99,235,.22), transparent 55%),
    radial-gradient(900px 700px at 50% 90%, rgba(0,200,255,.10), transparent 60%),
    url("./assets/bg.png");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* “Apple Glass” vibe */
  filter: saturate(1.1) contrast(1.05);
  transform: translateZ(0);
}

/* Soft dark veil + subtle noise, damit Text immer lesbar bleibt */
.bg::before{
  content: "";
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  background: linear-gradient(
    360deg,
    rgba(8,10,18,.78),
    rgba(8,10,18,.55) 40%,
    rgba(8,10,18,.82)
  );

  /* wichtig: nichts soll scrollen/verschieben */
  transform: none !important;
  will-change: auto;
}


/* Optional: Noise (ultra subtle) */
.bg::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}

/* Fallback falls Bild fehlt */
body{
  background: #0b0b14;
}