/* ============================================================
   REDESIGN 2 — "OBSIDIAN"
   Dark editorial · Cold chromes · Razor typography
   Activated via html[data-design="obsidian"]
   ============================================================ */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800;900&family=DM+Mono:wght@400;500&display=swap');

/* ── Tokens ───────────────────────────────────────────────── */
html[data-design="obsidian"] {
  --bg:      #08090d;
  --bg2:     #0e1018;
  --surface: rgba(255,255,255,.055);
  --surface2: rgba(255,255,255,.04);
  --ink:     #f0f2f8;
  --muted:   rgba(240,242,248,.52);
  --stroke:  rgba(255,255,255,.10);
  --stroke2: rgba(255,255,255,.06);

  /* Accent: electric cyan */
  --a:       #00e5ff;
  --a2:      #0091ff;
  --a-glow:  rgba(0,229,255,.18);

  --r:  14px;
  --r2: 22px;

  --shadow:  0 24px 80px rgba(0,0,0,.65);
  --shadow2: 0 12px 36px rgba(0,0,0,.45);

  color-scheme: dark;
}

/* ── Reset body ───────────────────────────────────────────── */
html[data-design="obsidian"] body {
  font-family: 'Syne', ui-sans-serif, system-ui, sans-serif;
  background:
    radial-gradient(900px 700px at 0% 0%,   rgba(0,145,255,.12), transparent 55%),
    radial-gradient(800px 600px at 100% 5%,  rgba(0,229,255,.08), transparent 52%),
    radial-gradient(700px 600px at 55% 100%, rgba(0,91,200,.10),  transparent 55%),
    linear-gradient(180deg, #060810, var(--bg));
  color: var(--ink);
}

/* ── Noise grain ──────────────────────────────────────────── */
html[data-design="obsidian"] body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9999;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
}

/* ── Scanlines ────────────────────────────────────────────── */
html[data-design="obsidian"] body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9998;
  opacity: .025;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0, transparent 3px,
    rgba(0,229,255,.15) 3px, rgba(0,229,255,.15) 4px
  );
}

/* ── Typography ───────────────────────────────────────────── */
html[data-design="obsidian"] .h2 {
  font-family: 'Syne', sans-serif;
  font-weight: 900;
  letter-spacing: -0.04em;
  font-size: clamp(26px, 3.2vw, 44px);
  color: var(--ink);
  text-shadow: none;
}

html[data-design="obsidian"] .muted {
  color: var(--muted);
}

/* ── Section ──────────────────────────────────────────────── */
html[data-design="obsidian"] .section {
  padding: 64px 0;
}

/* ═══════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════ */
html[data-design="obsidian"] .hero {
  padding: 36px 0 20px;
}

html[data-design="obsidian"] .hero__tapes {
  opacity: .3;
  filter: saturate(.4) brightness(.6);
}

html[data-design="obsidian"] .hero__inner > div {
  position: relative;
  width: min(920px, 100%);
  margin-inline: auto;
  border-radius: 28px;
  padding: 8px;
  isolation: isolate;
}

/* Corner accents */
html[data-design="obsidian"] .hero__inner > div::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 29px;
  filter: blur(16px);
  opacity: .6;
  z-index: -1;
}

html[data-design="obsidian"] .hero__video {
  height: 420px;
  border-radius: 22px;
  background: #00000000;
}

@media (max-width: 720px) {
  html[data-design="obsidian"] .hero { padding: 24px 0 14px; }
  html[data-design="obsidian"] .hero__video { height: 420px; }
  html[data-design="obsidian"] .hero__inner > div { border-radius: 22px; padding: 6px; }
}

/* ═══════════════════════════════════════════════════════════
   TAPES
   ═══════════════════════════════════════════════════════════ */
html[data-design="obsidian"] .tape {
  background: rgba(0,229,255,.04);
  border: 1px solid rgba(0,229,255,.12);
  box-shadow: none;
  opacity: .45;
}

html[data-design="obsidian"] .tape__word {
  font-family: 'DM Mono', monospace;
  color: rgba(0,229,255,.50);
  letter-spacing: .22em;
  text-shadow: none;
}

html[data-design="obsidian"] .tape__word strong {
  color: rgba(0,229,255,.78);
  text-shadow: 0 0 12px rgba(0,229,255,.35);
}

/* ═══════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════ */
html[data-design="obsidian"] .btn {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(0,229,255,.20);
  box-shadow: 0 0 0 0 transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

html[data-design="obsidian"] .btn__icon {
  background: linear-gradient(135deg, rgba(0,229,255,.22), rgba(0,91,255,.16));
  border: 1px solid rgba(0,229,255,.25);
  color: #00e5ff;
}

html[data-design="obsidian"] .btn__title {
  color: var(--ink);
}

html[data-design="obsidian"] .btn__sub {
  color: var(--muted);
}

/* Override the glow sweep for dark mode */
html[data-design="obsidian"] .btn--glow::before {
  background: linear-gradient(90deg,
    rgba(0,0,0,0) 0%,
    rgba(0,229,255,.65) 22%,
    rgba(0,145,255,.60) 50%,
    rgba(0,229,255,.50) 78%,
    rgba(0,0,0,0) 100%);
  background-size: 240% 100%;
  background-position: 0% 50%;
  filter: blur(14px) saturate(1.6);
  opacity: .7;
}

html[data-design="obsidian"] .btn--glow::after {
  background: rgba(8,9,14,.88);
}

@media (hover:hover) and (pointer:fine) {
  html[data-design="obsidian"] .btn:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 0 28px rgba(0,229,255,.18), var(--shadow2);
    border-color: rgba(0,229,255,.38);
  }
}

/* ═══════════════════════════════════════════════════════════
   LINKS CARD
   ═══════════════════════════════════════════════════════════ */
html[data-design="obsidian"] .links__card {
  background: transparent;
  box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════
   BRAND CARD
   ═══════════════════════════════════════════════════════════ */
html[data-design="obsidian"] .brand__card {
  background: var(--surface);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

html[data-design="obsidian"] .brand__card::before {
  content: "";
  position: absolute;
  top: -80px; right: -80px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,229,255,.09), transparent 68%);
  pointer-events: none;
}

html[data-design="obsidian"] .brand__logoLink::before {
  background: conic-gradient(from 0deg,
    rgba(0,229,255,.65),
    rgba(0,91,255,.55),
    rgba(0,229,255,.65));
  filter: blur(12px);
  opacity: .6;
}

html[data-design="obsidian"] .brand__logoLink::after {
  background: rgba(8,9,14,.85);
  border: 1px solid rgba(0,229,255,.18);
}

html[data-design="obsidian"] .brand__title {
  color: var(--ink);
}

html[data-design="obsidian"] .brand__title .muted {
  color: var(--muted);
}

html[data-design="obsidian"] .brand__tagline {
  color: rgba(0,229,255,.65);
  font-family: 'DM Mono', monospace;
  font-size: .85em;
  letter-spacing: .04em;
}

html[data-design="obsidian"] .brand__desc {
  color: var(--muted);
}

/* ═══════════════════════════════════════════════════════════
   INFO CARD
   ═══════════════════════════════════════════════════════════ */
html[data-design="obsidian"] .info__card {
  background: var(--surface);
  border: 1px solid var(--stroke);
  backdrop-filter: none;
  box-shadow: var(--shadow);
}

html[data-design="obsidian"] .info__item {
  background: var(--surface2);
  border: 1px solid var(--stroke2);
  box-shadow: none;
  transition: border-color .2s ease, background .2s ease;
}

@media (hover:hover) and (pointer:fine) {
  html[data-design="obsidian"] .info__item:hover {
    border-color: rgba(0,229,255,.22);
    background: rgba(0,229,255,.05);
  }
}

html[data-design="obsidian"] .info__badge {
  background: linear-gradient(135deg, rgba(0,229,255,.16), rgba(0,91,255,.12));
  border: 1px solid rgba(0,229,255,.18);
}

html[data-design="obsidian"] .info__title {
  color: var(--ink);
}

html[data-design="obsidian"] .info__text {
  color: var(--muted);
}

/* ═══════════════════════════════════════════════════════════
   TESTIMONIALS
   ═══════════════════════════════════════════════════════════ */
html[data-design="obsidian"] .tcar__shell {
  background: var(--surface);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
}

html[data-design="obsidian"] .tcar__shell::before {
  background:
    radial-gradient(520px 260px at 18% 34%, rgba(0,229,255,.08), transparent 60%),
    radial-gradient(520px 260px at 86% 66%, rgba(0,91,255,.07), transparent 60%);
}

html[data-design="obsidian"] .tcar__stage {
  background: rgba(8,9,14,.72);
}

html[data-design="obsidian"] .tcardx {
  background: rgba(255,255,255,.04);
  box-shadow: 0 12px 36px rgba(0,0,0,.5);
  border: 1px solid var(--stroke2);
}

html[data-design="obsidian"] .tcardx::before {
  background: conic-gradient(from 0deg,
    rgba(0,229,255,.22),
    rgba(0,91,255,.18),
    rgba(0,229,255,.22));
  filter: blur(14px);
  opacity: .5;
}

html[data-design="obsidian"] .tcardx::after {
  border-color: rgba(0,229,255,.10);
}

html[data-design="obsidian"] .tcardx__name {
  color: var(--ink);
}

html[data-design="obsidian"] .tcardx__role {
  color: rgba(0,229,255,.55);
  font-family: 'DM Mono', monospace;
  font-size: .78em;
  letter-spacing: .05em;
}

html[data-design="obsidian"] .tcardx__text {
  color: rgba(240,242,248,.72);
}

html[data-design="obsidian"] .tcardx__avatar {
  background: linear-gradient(135deg, rgba(0,229,255,.16), rgba(0,91,255,.12));
  box-shadow: 0 8px 20px rgba(0,0,0,.5);
}

html[data-design="obsidian"] .tcar__nav {
  background: rgba(255,255,255,.06);
  box-shadow: none;
  border: 1px solid var(--stroke);
  transition: transform .18s ease, border-color .18s ease;
}

html[data-design="obsidian"] .tcar__nav::before {
  background: conic-gradient(from 0deg,
    rgba(0,229,255,.55),
    rgba(0,91,255,.45),
    rgba(0,229,255,.55));
  filter: blur(10px);
  opacity: .4;
}

html[data-design="obsidian"] .tcar__nav::after {
  background: rgba(8,9,14,.88);
}

html[data-design="obsidian"] .tcar__nav > span {
  color: rgba(0,229,255,.85);
}

@media (hover:hover) and (pointer:fine) {
  html[data-design="obsidian"] .tcar__nav:hover {
    border-color: rgba(0,229,255,.35);
    box-shadow: 0 0 18px rgba(0,229,255,.14);
  }
}

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */
html[data-design="obsidian"] .footer__container {
  border-top-color: rgba(0,229,255,.12);
}

html[data-design="obsidian"] .footer__brand {
  color: var(--ink);
  font-family: 'DM Mono', monospace;
  letter-spacing: .08em;
  font-size: .88em;
}

html[data-design="obsidian"] .footer__copy {
  color: var(--muted);
  font-family: 'DM Mono', monospace;
  font-size: .82em;
}

html[data-design="obsidian"] .footer__link {
  color: rgba(0,229,255,.55);
  border-bottom-color: rgba(0,229,255,.20);
  font-family: 'DM Mono', monospace;
  font-size: .82em;
  letter-spacing: .04em;
}

html[data-design="obsidian"] .footer__link:hover {
  color: rgba(0,229,255,.9);
  border-bottom-color: rgba(0,229,255,.45);
}

/* ═══════════════════════════════════════════════════════════
   LARGE SCREENS
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
  html[data-design="obsidian"] body {
    background:
      radial-gradient(1000px 800px at 0%   0%,   rgba(0,145,255,.10), transparent 58%),
      radial-gradient(900px  700px at 100%  6%,  rgba(0,229,255,.07), transparent 55%),
      radial-gradient(800px  700px at 55%  102%, rgba(0,91,200,.09),  transparent 58%),
      linear-gradient(180deg, #060810, var(--bg));
  }
}

/* ═══════════════════════════════════════════════════════════
   DESIGN SWITCHER WIDGET
   ═══════════════════════════════════════════════════════════ */
.dsw {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  font-family: 'Syne', ui-sans-serif, system-ui, sans-serif;
}

.dsw__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .5;
  color: currentColor;
}

.dsw__pills {
  display: flex;
  gap: 6px;
  background: rgba(8,9,14,.88);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 5px;
  backdrop-filter: blur(14px);
  box-shadow: 0 16px 48px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
}

.dsw__pill {
  position: relative;
  padding: 7px 16px;
  border-radius: 999px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  color: rgba(255,255,255,.50);
  transition: color .18s ease;
  letter-spacing: -.01em;
  -webkit-tap-highlight-color: transparent;
}

.dsw__pill--active {
  color: #fff;
}

.dsw__pill--active::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.20);
}

.dsw__pill--original.dsw__pill--active::before {
  background: rgba(255,122,24,.18);
  border-color: rgba(255,122,24,.30);
}

.dsw__pill--obsidian.dsw__pill--active::before {
  background: rgba(0,229,255,.14);
  border-color: rgba(0,229,255,.28);
}

.dsw__pill span {
  position: relative;
  z-index: 1;
}

/* In original (light) mode, adapt widget colors */
html:not([data-design="obsidian"]) .dsw__pills {
  background: rgba(255,255,255,.82);
  border-color: rgba(15,20,35,.12);
  box-shadow: 0 16px 48px rgba(10,16,32,.16), 0 0 0 1px rgba(15,20,35,.06);
}

html:not([data-design="obsidian"]) .dsw__pill {
  color: rgba(15,20,35,.40);
}

html:not([data-design="obsidian"]) .dsw__pill--active {
  color: rgba(15,20,35,.90);
}

html:not([data-design="obsidian"]) .dsw__pill--original.dsw__pill--active::before {
  background: rgba(255,122,24,.12);
  border-color: rgba(255,122,24,.28);
}

html:not([data-design="obsidian"]) .dsw__label {
  color: rgba(15,20,35,.50);
}

@media (max-width: 480px) {
  .dsw {
    bottom: 16px;
    right: 16px;
  }
  .dsw__pill {
    padding: 6px 13px;
    font-size: 12px;
  }
}