/* ========= THEME VARIABLES ========= */
:root {
  --bg: #050816;
  --bg-soft: #020617;
  --header-bg: rgba(5, 8, 22, 0.95);
  --card-bg: #020617;
  --border-subtle: #1f2937;
  --border-strong: #1d4ed8;

  --accent: #38bdf8;
  --accent-strong: #0ea5e9;
  --accent-soft: rgba(56, 189, 248, 0.16);

  --text-main: #f9fafb;
  --text-muted: #9ca3af;

  --shadow-strong: rgba(15, 23, 42, 0.7);
}

/* Neon theme */
:root[data-theme="neon"] {
  --bg: #020617;
  --bg-soft: #020617;
  --card-bg: #020617;
  --border-subtle: #172554;
  --border-strong: #22c55e;

  --accent: #22c55e;
  --accent-strong: #16a34a;
  --accent-soft: rgba(34, 197, 94, 0.18);

  --shadow-strong: rgba(6, 78, 59, 0.85);
}

/* Sunset theme */
:root[data-theme="sunset"] {
  --bg: #0b1120;
  --bg-soft: #020617;
  --card-bg: #020617;
  --border-subtle: #7c2d12;
  --border-strong: #f97316;

  --accent: #fb923c;
  --accent-strong: #f97316;
  --accent-soft: rgba(249, 115, 22, 0.18);

  --shadow-strong: rgba(124, 45, 18, 0.8);
}

/* Violet theme */
:root[data-theme="violet"] {
  --bg: #050016;
  --bg-soft: #020010;
  --card-bg: #050016;

  --border-subtle: #312e81;
  --border-strong: #a855f7;

  --accent: #c4b5fd;
  --accent-strong: #a855f7;
  --accent-soft: rgba(168, 85, 247, 0.22);

  --shadow-strong: rgba(88, 28, 135, 0.8);
}

/* Crimson theme (red-focused) */
:root[data-theme="crimson"] {
  --bg: #09000b;
  --bg-soft: #050008;
  --card-bg: #0b0204;

  --header-bg: rgba(9, 0, 11, 0.96);
  --border-subtle: #4b1113;
  --border-strong: #f97373;

  /* strong red accents */
  --accent: #ef4444;                /* main red */
  --accent-strong: #b91c1c;         /* deeper red for hover */
  --accent-soft: rgba(248, 113, 113, 0.22);

  --text-main: #fef2f2;             /* soft off-white */
  --text-muted: #fecaca;            /* warm muted text */

  --shadow-strong: rgba(127, 29, 29, 0.9);
}

/* Black & white (high-contrast mono) */
:root[data-theme="mono"] {
  --bg: #050505;
  --bg-soft: #050505;
  --card-bg: #0b0b0b;

  --border-subtle: #27272a;
  --border-strong: #fafafa;

  --accent: #fafafa;          /* white accents */
  --accent-strong: #e5e5e5;
  --accent-soft: rgba(250, 250, 250, 0.14);

  --shadow-strong: rgba(0, 0, 0, 0.9);
}

/* ========= RESET & BASE ========= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text-main);
  line-height: 1.6;
}

html {
  scroll-behavior: smooth;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ========= HEADER ========= */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 6vw;
  background: var(--header-bg);
  border-bottom: 1px solid #111827;
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(16px);
}

.logo {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem;
}

.site-nav {
  display: flex;
  gap: 1.5rem;
  font-size: 0.9rem;
}

.site-nav a {
  color: var(--text-muted);
  position: relative;
}

.site-nav a.active,
.site-nav a:hover {
  color: var(--text-main);
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.2rem;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width 0.15s ease;
}

.site-nav a:hover::after,
.site-nav a.active::after {
  width: 100%;
}

/* ========= MAIN LAYOUT ========= */
main {
  padding: 2.5rem 6vw 3rem;
}

.section {
  margin-top: 2.5rem;
}

.section + .section {
  margin-top: 3rem;
}

.section-header {
  margin-bottom: 1.75rem;
}

.section-header h2 {
  margin: 0 0 0.4rem;
}

.section-header p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* ========= THEME SWITCHER ========= */
.theme-switcher {
  margin-top: 1.5rem;
}

.theme-switcher-inner {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: var(--card-bg);
}

.theme-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

.theme-pill {
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  padding: 0.25rem 0.8rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.08s ease;
}

.theme-pill:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text-main);
  transform: translateY(-1px);
}

.theme-pill.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text-main);
}

/* ========= HERO ========= */
.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr);
  gap: 2rem;
  align-items: flex-start;
}

.hero h1 {
  font-size: clamp(2.2rem, 4vw, 2.8rem);
  margin-bottom: 0.5rem;
}

.hero-text {
  max-width: 540px;
  color: var(--text-main);
}

.eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.5rem;
}

.hero-main h1 {
  margin: 0 0 0.6rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

/* ========= SNAPSHOT 3D CARD ========= */
.hero-meta-wrapper {
  perspective: 1100px;
}

.hero-meta-panel-inner {
  position: relative;
  border-radius: 1rem;
  border: 1px solid var(--border-subtle);
  background: radial-gradient(circle at top, #0b1120, var(--bg-soft));
  padding: 1rem 1.2rem;
  transform-style: preserve-3d;
  transition:
    transform 0.7s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.2s ease;
  cursor: pointer;
}

/* Rim-only glow layer for Snapshot card */
.hero-meta-panel-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid transparent;
  box-shadow: none;
  pointer-events: none;
  opacity: 0;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease;
}

.hero-meta-wrapper:hover .hero-meta-panel-inner {
  border-color: var(--accent);
  background: radial-gradient(circle at top, var(--accent-soft), var(--bg-soft));
  box-shadow:
    0 18px 45px var(--shadow-strong),
    0 0 0 1px var(--accent),
    0 0 35px var(--accent-soft);
}

.hero-meta-wrapper:hover .hero-meta-panel-inner::before {
  opacity: 1;
  border-color: var(--accent);
  box-shadow: 0 0 30px var(--accent-soft);
}

/* Snapshot card faces – only front visible for now */
.hero-meta-face {
  position: static;
  padding: 0;
  backface-visibility: visible;
}

.hero-meta-title {
  margin: 0 0 0.7rem;
  font-size: 0.95rem;
}

.hero-meta-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
}

.hero-meta-list li + li {
  margin-top: 0.4rem;
}

.hero-meta-list .meta-label {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.7rem;
  color: var(--text-muted);
}

.hero-meta-list .meta-value {
  font-weight: 500;
}

/* ========= GRID & CARDS ========= */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.card {
  padding: 1.2rem 1.4rem;
  border-radius: 0.9rem;
  border: 1px solid var(--border-subtle);
  background: var(--card-bg);
}

.card h2,
.card h3 {
  margin-top: 0;
}

.card-meta {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Generic lists */
.bullet-list {
  margin: 0.5rem 0 0;
  padding-left: 1.2rem;
  font-size: 0.9rem;
  color: var(--text-main);
}

.bullet-list li {
  margin-bottom: 0.25rem;
}

.meta-list {
  margin: 0.5rem 0 0;
  padding-left: 1.2rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.meta-list li {
  margin-bottom: 0.2rem;
}

/* ========= HOW IT WORKS – CLEAN LIST (no boxes) ========= */

.steps-list {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 0;

  display: grid;
  gap: 0.85rem;

  max-width: 860px;
}

/* simple row */
.steps-list li {
  position: relative;
  padding: 0.25rem 0 0.25rem 2.4rem;

  font-size: 0.98rem;
  color: var(--text-main);
}

/* subtle left “timeline” line */
.steps-list li::after {
  content: "";
  position: absolute;
  left: 0.95rem;
  top: 0.15rem;
  bottom: 0.15rem;
  width: 1px;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  opacity: 0.5;
}

/* number badge */
.steps-list li::before {
  content: counter(step);
  counter-increment: step;

  position: absolute;
  left: 0;
  top: 0.1rem;

  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;

  display: grid;
  place-items: center;

  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);

  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent-soft) 45%, transparent);
  box-shadow: 0 0 10px var(--accent-soft);
}

/* enable the counter */
.steps-list {
  counter-reset: step;
}

/* your strong label becomes cleaner, less shouty */
.steps-list strong {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
}

/* mobile */
@media (max-width: 640px) {
  .steps-list li {
    padding-left: 2.2rem;
    font-size: 0.95rem;
  }

  .steps-list li::after {
    left: 0.85rem;
  }
}

/* ========= HOME: FEATURED WORK ========= */
.featured-grid {
  position: relative;
}

.featured-card {
  position: relative;
  overflow: hidden;
  border-radius: 0.9rem;
  border: 1px solid var(--border-subtle);
  background: var(--card-bg);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.12s ease,
    background 0.2s ease;
  animation: featuredGlow 10s ease-in-out infinite;
}

.featured-card:nth-child(2) {
  animation-delay: 2s;
}

.featured-card:nth-child(3) {
  animation-delay: 4s;
}

.featured-card::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at top, var(--accent-soft), transparent 55%);
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 0.3s ease,
    transform 0.4s ease;
}

.featured-card-content {
  position: relative;
  z-index: 1;
}

.featured-card:hover {
  border-color: var(--accent);
  box-shadow: 0 18px 45px var(--shadow-strong);
  transform: translateY(-3px);
}

.featured-card:hover::before {
  opacity: 1;
  transform: translate3d(0, -6px, 0);
}

/* ========= PORTFOLIO PROJECT CARDS (hover + clickable) ========= */
.portfolio-card {
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.12s ease,
    background 0.2s ease;
}

.portfolio-card:hover {
  border-color: var(--accent);
  background:
    radial-gradient(circle at top, var(--accent-soft), var(--bg-soft));
  box-shadow:
    0 18px 45px var(--shadow-strong),
    0 0 0 1px var(--accent),
    0 0 35px var(--accent-soft);
  transform: translateY(-3px);
}

/* ========= PORTFOLIO: Discord cards equal height + pinned widget ========= */

.bots-grid .portfolio-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* top content area */
.bots-grid .portfolio-card-body {
  flex: 0 0 auto;
}

/* bottom widget area pinned to bottom */
.bots-grid .portfolio-card-bottom {
  margin-top: auto;
  padding-top: 1rem;
}

/* keep the widget text spacing consistent */
.bots-grid .craftbot-widget .card-meta {
  margin: 0 0 0.75rem;
}

/* force both discord widgets to the same visual size */
.bots-grid .craftbot-widget iframe {
  width: 100%;
  height: 360px;
}

@keyframes featuredGlow {
  0%,
  100% {
    box-shadow: 0 0 0 transparent;
  }
  50% {
    box-shadow: 0 0 24px var(--accent-soft);
  }
}

@keyframes headerBarGlow {
  0% {
    background-position: 0% 0;
    opacity: 0.5;
  }
  50% {
    background-position: 100% 0;
    opacity: 1;
  }
  100% {
    background-position: 0% 0;
    opacity: 0.5;
  }
}

/* ========= SPLIT LAYOUT (“Need a website?”) ========= */
.section-split .split-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}

.section-cta-row {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ========= THREE.JS CONTAINER ========= */
.three-preview #three-container {
  margin-top: 0.5rem;
  width: 100%;
  height: 320px;
  border-radius: 0.9rem;
  border: 1px solid var(--border-subtle);
  background: radial-gradient(circle at top, #111827, var(--bg-soft));
  overflow: hidden;
}

/* ========= SERVICES: WHAT I OFFER (cards + rotating pills) ========= */
.offer-section {
  margin-top: 3rem;
}

/* No big outer box any more – just layout helper */
.offer-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  position: relative;
}

/* kill the old glow disc */
.offer-shell::before {
  content: none;
}

.offer-header {
  max-width: 620px;
  margin: 0 0 2.2rem;
}

.offer-eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin: 0 0 0.4rem;
}

.offer-header h1 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.7rem, 3vw, 2.1rem);
}

.offer-header p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.offer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.6rem;
}

/* individual cards stay “boxed” */
.offer-block {
  position: relative;
  border-radius: 1.1rem;
  padding: 1.3rem 1.4rem 1.5rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background:
    radial-gradient(circle at top, rgba(15, 23, 42, 0.9), transparent 55%),
    linear-gradient(145deg, #020617, #020617);
  box-shadow:
    0 18px 42px rgba(15, 23, 42, 0.9),
    0 0 0 1px rgba(15, 23, 42, 0.9);
  overflow: hidden;

  /* ✅ add these */
  display: flex;
  flex-direction: column;
}

.offer-block h3 {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
}

.offer-block p {
  margin: 0 0 1rem;
  font-size: 0.88rem;
  color: var(--text-main);

  /* ✅ optional: helps balance spacing */
  flex: 0 0 auto;
}

/* ========= WHAT I OFFER: vertical "song select" pills ========= */

/* pill tags inside each block – 3-slot "song select" carousel */
.offer-tags {
  position: relative;
  padding: 0;
  list-style: none;

  width: 100%;
  max-width: 420px;
  height: 6.4rem;
  overflow: hidden;

  /* ✅ replace margin shorthand with explicit anchors */
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0.3rem;
  margin-top: auto; /* 👈 this is the key */
}

/* fixed light band in the center slot */
.offer-tags::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2.2rem;
  transform: translateY(-50%);
  pointer-events: none;

  background: radial-gradient(
    ellipse at center,
    rgba(148, 163, 184, 0.40),
    transparent 72%
  );
  mix-blend-mode: screen;
  opacity: 0.8;
}

/* base pill – long, thin bar; all equal width */
.offer-tags li {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;

  width: 90%;
  padding: 0.28rem 1.8rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  font-size: 0.74rem;
  text-align: center;
  white-space: nowrap;

  background: rgba(15, 23, 42, 0.96);
  color: var(--text-muted);

  opacity: 0;
  top: 50%;
  transform: translateY(-50%) scale(0.9);
  pointer-events: none;

  transition:
    top 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.35s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.25s ease,
    color 0.25s ease;
}

/* slot above the center – previous item */
.offer-tags li.pos-above {
  top: 20%;                               /* top slot */
  opacity: 0.55;
  transform: translateY(-50%) scale(0.96);
}

/* slot in the center – active item */
.offer-tags li.pos-center {
  top: 50%;                               /* center slot */
  opacity: 1;
  transform: translateY(-50%) scale(1.04);
  pointer-events: auto;

  color: var(--text-main);
  border-color: var(--accent);
  background: radial-gradient(
    circle at center,
    var(--accent-soft),
    rgba(15, 23, 42, 0.98)
  );
  box-shadow:
    0 0 18px var(--accent-soft),
    0 0 0 1px rgba(56, 189, 248, 0.35);
}

/* slot below the center – next item */
.offer-tags li.pos-below {
  top: 80%;                               /* bottom slot */
  opacity: 0.55;
  transform: translateY(-50%) scale(0.96);
}

/* ========= SERVICES: 6-BUTTON SHOWCASE GRID ========= */
.offer-buttons-section {
  margin-top: 4rem;      /* space above */
  margin-bottom: 4rem;   /* space below before "How It Works" */
}

/* Text-only shell (no big glowing box) */
.offer-buttons-shell {
  max-width: 880px;
  margin: 0 auto 2.4rem;
  text-align: center;
}

.offer-buttons-title {
  margin: 0 0 0.6rem;
  font-size: 0.92rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.offer-buttons-copy {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* 3 x 2 grid, centered */
.offer-buttons-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 230px));
  gap: 2rem 2.4rem;
  justify-content: center;
}

/* Wrapper card around each button – bigger, no hover animation */
.offer-button-card {
  position: relative;
  border-radius: 1.6rem;
  padding: 1.6rem 1.8rem;              /* roomy box around the button */
  border: 1px solid var(--border-subtle);
  background:
    radial-gradient(circle at top, rgba(15, 23, 42, 0.85), transparent 60%),
    linear-gradient(135deg, var(--bg-soft), var(--bg));
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;                   /* forces all cards to the same height */
}

/* Base style for all big buttons – consistent size */
.offer-big-btn {
  position: relative;
  width: 100%;
  max-width: 100%;
  padding: 1.05rem 1.4rem;
  min-height: 54px;                    /* key: consistent button height */
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: var(--card-bg);
  color: var(--text-main);
  font-size: 0.9rem;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  outline: none;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    box-shadow 0.18s ease,
    transform 0.1s ease,
    color 0.15s ease;
}

.offer-big-btn span {
  position: relative;
  z-index: 1;
}

.offer-big-btn:active {
  transform: translateY(1px) scale(0.99);
}

/* 1. Neon pulse pill */
.btn-neon-pulse {
  border-radius: 999px;
  background: radial-gradient(circle at top, var(--accent-soft), var(--card-bg));
  box-shadow: 0 0 0 transparent;
}

.btn-neon-pulse::before {
  content: "";
  position: absolute;
  inset: -30%;
  background: radial-gradient(circle, var(--accent), transparent 60%);
  opacity: 0;
  filter: blur(4px);
  transition: opacity 0.25s ease;
}

.btn-neon-pulse:hover {
  border-color: var(--accent);
  box-shadow:
    0 18px 40px var(--shadow-strong),
    0 0 24px var(--accent-soft);
  animation: neonPulse 1.4s ease-in-out infinite alternate;
}

.btn-neon-pulse:hover::before {
  opacity: 0.8;
}

@keyframes neonPulse {
  0% {
    transform: translateY(-2px) scale(1);
  }
  100% {
    transform: translateY(-3px) scale(1.03);
  }
}

/* 2. Diagonal gradient skew button (Bold Primary CTA) */
.btn-gradient-skew {
  border-radius: 0.9rem;
  background-image: linear-gradient(
    135deg,
    var(--accent),
    var(--accent-strong)
  );
  background-size: 180% 180%;
  color: #020617;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.85);
  transform: skewX(-6deg);
  transition:
    background-position 0.25s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease,
    color 0.18s ease;
}

.btn-gradient-skew span {
  display: inline-block;
  transform: skewX(6deg);
}

/* hover: sweep gradient & slightly brighten */
.btn-gradient-skew:hover {
  background-image: linear-gradient(
    135deg,
    #f9fafb,
    var(--accent)
  );
  background-position: 100% 0;
  color: #020617;
  transform: skewX(-6deg) translateY(-3px);
  box-shadow:
    0 22px 55px rgba(15, 23, 42, 0.95),
    0 0 26px var(--accent-soft);
}

/* 3. Orbit ring button */
.btn-orbit-ring {
  border-radius: 999px;
  padding: 1.05rem 1.05rem;
  background: radial-gradient(circle at top, #0b1120, var(--card-bg));
}

.btn-orbit-ring::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  border: 1px dashed rgba(148, 163, 184, 0.6);
  opacity: 0.7;
  transition: border-color 0.2s ease, opacity 0.2s ease;
}

.btn-orbit-ring::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--accent);
  top: 50%;
  left: 10%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 14px var(--accent-soft);
  animation: orbitDot 2.4s linear infinite;
}

.btn-orbit-ring:hover::before {
  border-color: var(--accent);
  opacity: 1;
}

@keyframes orbitDot {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) translateX(90px);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) translateX(90px);
  }
}

/* 4. Outline flip / card style */
.btn-outline-flip {
  border-radius: 1rem;
  background: transparent;
}

.btn-outline-flip::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--border-subtle);
  transition:
    border-color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.btn-outline-flip:hover {
  color: var(--accent);
}

.btn-outline-flip:hover::before {
  border-color: var(--accent);
  transform: rotateX(10deg) rotateY(-6deg);
  box-shadow: 0 18px 40px var(--shadow-strong);
}

/* 5. Tile pop (chunky square) */
.btn-tile-pop {
  border-radius: 0.85rem;
  text-align: center;
  background:
    radial-gradient(circle at top left, var(--accent-soft), transparent 60%),
    var(--card-bg);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.9);
}

.btn-tile-pop:hover {
  transform: translateY(-4px) rotate3d(1, -1, 0, 6deg);
  box-shadow:
    0 20px 48px rgba(15, 23, 42, 1),
    0 0 24px var(--accent-soft);
}

/* 6. Soft ghost link – shimmering outline */
.btn-soft-fade {
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  border: 1px dashed var(--border-subtle);
  position: relative;
}

.btn-soft-fade::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: conic-gradient(
    from 180deg,
    transparent,
    var(--accent),
    transparent,
    var(--accent-strong),
    transparent
  );
  opacity: 0;
  mix-blend-mode: screen;
  filter: blur(2px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
  z-index: 0;
}

.btn-soft-fade span {
  position: relative;
  z-index: 1;
}

.btn-soft-fade:hover {
  color: var(--text-main);
  border-color: transparent;
}

.btn-soft-fade:hover::before {
  opacity: 0.85;
  transform: rotate(8deg);
}

/* Responsive tweaks */
@media (max-width: 900px) {
  .offer-buttons-grid {
    grid-template-columns: repeat(2, minmax(0, 230px));
  }
}

@media (max-width: 640px) {
  .offer-buttons-grid {
    grid-template-columns: minmax(0, 260px);
  }
}

/* ========= BUTTONS ========= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  font-size: 0.9rem;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.08s ease;
}

.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #020617;
}

.btn.primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  transform: translateY(-1px);
}

.btn.ghost {
  background: transparent;
  border-color: var(--border-subtle);
  color: var(--text-main);
}

.btn.ghost:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* ========= CONTACT CALLOUT ========= */
.contact-callout {
  margin-top: 2.5rem;
  padding: 1.5rem 1.6rem;
  border-radius: 1rem;
  border: 1px solid var(--border-strong);
  background: radial-gradient(circle at top left, #0f172a, var(--bg-soft));

  /* NEW for orb layer */
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* ========= CONTACT ORBS (actual drifting) ========= */
.contact-orbs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Base orb */
.contact-orb {
  position: absolute;
  border-radius: 999px;

  background:
    radial-gradient(circle at 30% 30%,
      color-mix(in srgb, var(--accent) 35%, transparent),
      transparent 60%),
    radial-gradient(circle at 50% 50%,
      var(--accent-soft),
      transparent 70%);

  opacity: 0.28;
  filter: blur(12px);
  mix-blend-mode: screen;

  transform: translate3d(0,0,0);

  /* ✅ make them loop forever */
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: both;

  will-change: transform;
  pointer-events: none;
}

/* Give each orb a different "start spot" */
.contact-orb:nth-child(1) {
  top: -20px;     /* ✅ less extreme */
  left: 4%;       /* ✅ brings it inward */
  width: 250px;
  height: 250px;
  animation-name: orbPath1;
  animation-duration: 18s;
}

.contact-orb:nth-child(2) {
  top: auto;
  right: auto;

  bottom: -40px;   /* pull it slightly off the box edge */
  left: 50%;

  width: 200px;
  height: 200px;

  animation-name: orbPath2;
  animation-duration: 15s;
  animation-delay: -5s;
}

.contact-orb:nth-child(3) {
  bottom: -80px;
  left: 62%;
  width: 210px;
  height: 210px;
  animation-name: orbPath3;   /* ✅ add this */
  animation-duration: 20s;
  animation-delay: -8s;
}

/* Real drifting paths (no opacity animation) */
@keyframes orbPath1 {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(80px, 30px); }     /* ✅ push downward */
  50%  { transform: translate(140px, 120px); }   /* ✅ visits mid/lower */
  75%  { transform: translate(40px, 160px); }    /* ✅ deeper dip */
  100% { transform: translate(0, 0); }
}

@keyframes orbPath2 {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-90px, 20px); }
  45%  { transform: translate(-160px, -60px); }
  70%  { transform: translate(-60px, -120px); }
  100% { transform: translate(0, 0); }
}

@keyframes orbPath3 {
  0%   { transform: translate(0, 0); }
  30%  { transform: translate(110px, -45px); }
  55%  { transform: translate(190px, 30px); }
  80%  { transform: translate(80px, 130px); }
  100% { transform: translate(0, 0); }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .contact-orb { animation: none; }
}

/* ensure text/buttons sit above orbs */
.contact-callout > *:not(.contact-orbs) {
  position: relative;
  z-index: 1;
}

/* ========= LINKS ========= */
.text-link {
  color: var(--accent);
  font-weight: 500;
}

.text-link:hover {
  text-decoration: underline;
}

/* ========= FOOTER ========= */
.site-footer {
  padding: 1.5rem 6vw 2rem;
  border-top: 1px solid #111827;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
}

/* ========= PAGE HEADER (Portfolio / Services) ========= */
.page-header {
  margin-bottom: 2.4rem;
  position: relative;
}

.page-header h1 {
  margin-bottom: 0.7rem;
  display: inline-block;
  position: relative;
}

/* subtle gradient underline under "Portfolio" */
.page-header h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.4rem;
  width: 130px; /* tweak length if you want */
  height: 2px;
  border-radius: 999px;

  /* animated glowing bar */
  background: linear-gradient(
    90deg,
    transparent,
    var(--accent),
    transparent
  );
  background-size: 200% 100%;
  animation: headerBarGlow 2.4s ease-in-out infinite;
  box-shadow: 0 0 10px var(--accent-soft);
  opacity: 0.9;
}

.page-portfolio .page-header p,
.page-services .page-header p {
  max-width: 680px;
}

/* new pill row */
.page-header-focus {
  margin-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-size: 0.78rem;
}

/* individual pills */
.focus-pill {
  padding: 0.32rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 500;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.08s ease;
}

.focus-pill:hover {
  border-color: var(--accent);
  color: var(--text-main);
  background: var(--accent-soft);
  transform: translateY(-1px);
}

.focus-pill.is-active {
  border-color: var(--accent);
  color: var(--text-main);
  background: radial-gradient(circle at top, var(--accent-soft), transparent 60%);
}

/* Portfolio header block */
.page-header--portfolio {
  max-width: 900px;
  border-radius: 1.25rem;
  padding: 1.8rem 1.9rem;
  margin-bottom: 2.5rem;
  border: 1px solid var(--border-subtle);
  background:
    radial-gradient(circle at top left, rgba(148, 163, 184, 0.12), transparent 60%),
    linear-gradient(135deg, #020617, #020617);
  box-shadow: 0 22px 55px var(--shadow-strong);
}

/* Slight tighter spacing inside */
.page-header--portfolio h1 {
  margin-bottom: 0.75rem;
}

.page-header--portfolio p {
  max-width: 650px;
}

/* Focus line under the intro */
.page-header-focus {
  margin-top: 1.3rem;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.page-header-focus span {
  color: var(--text-main);
  font-weight: 500;
}

/* ========= PROFILE & EXPERIENCE (RESUME PANEL) ========= */
.profile-section {
  border-radius: 1.25rem;
  border: 1px solid var(--border-subtle);
  background: radial-gradient(circle at top left, #0b1120, var(--bg-soft));
  padding: 2rem 1.8rem;
  margin-top: 3rem;
  box-shadow: 0 24px 60px var(--shadow-strong);
}

.profile-section .section-header {
  margin-bottom: 1.5rem;
}

.profile-section .section-header h2 {
  margin-bottom: 0.35rem;
}

.profile-section .section-header p {
  color: var(--text-muted);
  font-size: 0.95rem;
}

.profile-section .grid {
  gap: 1.25rem;
}


/* Resume-style cards */
.profile-section .card {
  position: relative;
  border-radius: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background:
    radial-gradient(circle at top, rgba(148, 163, 184, 0.13), transparent 55%),
    linear-gradient(135deg, #020617, #020617);
  box-shadow:
    0 18px 45px rgba(15, 23, 42, 0.9),
    0 0 0 1px rgba(15, 23, 42, 0.9);
  padding: 1.25rem 1.4rem;
  overflow: hidden;
}

/* Top highlight rim inside each resume card */
.profile-section .card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border-top: 1px solid rgba(148, 163, 184, 0.7);
  opacity: 0.45;
  pointer-events: none;
}

/* Headings inside the profile section */
.profile-section h3 {
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0.7rem;
  color: var(--accent);
}

/* Text inside profile section: full brightness */
.profile-section p,
.profile-section li {
  color: var(--text-main);
}

/* In the profile section, use custom timeline bullets (no default dots) */
.profile-section .bullet-list,
.profile-section .meta-list {
  list-style: none;        /* remove the white bullets */
  padding-left: 0;
  margin-left: 0;
  font-size: 0.9rem;
}

/* Space between top grid (skills/goals) and bottom grid (experience/service) */
.profile-section .grid + .grid {
  margin-top: 1.75rem;
}

/* Timeline dots + vertical line for ALL profile lists (skills, experience, etc.) */
.profile-section .bullet-list li,
.profile-section .meta-list li {
  position: relative;
  padding-left: 1.75rem;   /* space for dot + line */
  margin-bottom: 0.75rem;
}

/* Green (or theme accent) dot */
.profile-section .bullet-list li::before,
.profile-section .meta-list li::before {
  content: "";
  position: absolute;
  left: 0.4rem;
  top: 0.55rem;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Vertical line connecting dots */
.profile-section .bullet-list li::after,
.profile-section .meta-list li::after {
  content: "";
  position: absolute;
  left: 0.7rem;
  top: 1.2rem;
  bottom: -0.6rem;
  width: 1px;
  background: rgba(148, 163, 184, 0.35);
}

/* Stop the line after the last item */
.profile-section .bullet-list li:last-child::after,
.profile-section .meta-list li:last-child::after {
  display: none;
}

/* Strong titles sit nicely above body text */
.profile-section .bullet-list li strong,
.profile-section .meta-list li strong {
  display: inline-block;
  margin-bottom: 0.15rem;
}

/* ========= FAQ GRID (Services) ========= */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

/* ========= SECRET KEY GRID PUZZLE ========= */
.key-grid-section {
  margin-top: 3rem;
  position: relative;
  padding: 1rem 0 2.5rem;
}

.key-grid-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  align-items: center;
}

.key-grid-wrapper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 44px));
  grid-auto-rows: 44px;
  gap: 0.5rem;
  padding: 1.2rem 1rem;
  border-radius: 1rem;
  border: 1px solid var(--border-subtle);
  background: radial-gradient(circle at top, #020617, var(--bg-soft));
}

/* Individual buttons */
.key-cell {
  width: 44px;
  height: 44px;
  border-radius: 0.75rem;
  border: 1px solid var(--border-subtle);
  background: radial-gradient(circle at top, #0b1120, var(--bg-soft));
  cursor: pointer;
  transition:
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    transform 0.08s ease,
    opacity 0.2s ease;
}

.key-cell:hover {
  border-color: var(--accent);
  box-shadow: 0 0 18px var(--accent-soft);
  transform: translateY(-1px);
}

.key-cell.key-cell--on {
  border-color: var(--accent);
  background: radial-gradient(circle at top, var(--accent-soft), var(--bg-soft));
  box-shadow:
    0 0 22px var(--accent-soft),
    0 0 0 1px var(--accent-soft);
}

/* Fade-out animation when solved */
.key-grid-wrapper.key-grid--solved {
  opacity: 0;
  transform: scale(0.97);
  pointer-events: none;
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}

/* Reveal overlay */
.key-reveal {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.key-reveal.key-reveal--visible {
  opacity: 1;
  pointer-events: auto;
}

/* Glassy reveal button */
.key-reveal-btn {
  position: relative;
  min-width: 260px;
  padding: 1.05rem 3.4rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.7);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(15, 23, 42, 0.88)),
    radial-gradient(circle at top, color-mix(in srgb, var(--accent) 32%, transparent), #020617);
  color: #e5e7eb;
  font-size: 0.9rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  overflow: hidden;
  box-shadow:
    0 24px 65px var(--shadow-strong),
    0 0 30px color-mix(in srgb, var(--accent) 45%, transparent);
  cursor: pointer;
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  transition:
    transform 0.16s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease;
}

.key-reveal-btn::before {
  content: "";
  position: absolute;
  inset: -75%;
  background: conic-gradient(
    from 180deg,
    transparent 0 20%,
    var(--accent) 35% 55%,
    transparent 70% 100%
  );
  opacity: 0;
  transform: rotate(0deg);
  transition:
    opacity 0.4s ease,
    transform 1.2s linear;
  mix-blend-mode: screen;
  z-index: 0;
}

.key-reveal-btn::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.26),
    rgba(255, 255, 255, 0.02)
  );
  opacity: 0.75;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}

.key-reveal-btn span {
  position: relative;
  z-index: 1;
}

.key-reveal-btn:hover {
  transform: translateY(-3px) scale(1.03);
  border-color: var(--accent);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(15, 23, 42, 0.9)),
    radial-gradient(circle at top, color-mix(in srgb, var(--accent) 45%, transparent), #020617);
  box-shadow:
    0 30px 80px var(--shadow-strong),
    0 0 40px color-mix(in srgb, var(--accent) 60%, transparent);
}

.key-reveal-btn:hover::before {
  opacity: 0.9;
  transform: rotate(360deg);
}

.key-reveal-btn:active {
  transform: translateY(0) scale(0.97);
  box-shadow:
    0 14px 40px var(--shadow-strong),
    0 0 22px color-mix(in srgb, var(--accent) 50%, transparent);
}

/* Craft Bot live server widget */
.craftbot-widget iframe {
  border-radius: 0.75rem;
  border: 1px solid var(--border-subtle);
  background: #020617;
  display: block;
}

/* ========= STACKED SCROLL PANELS (super scroll effect) ========= */
.scroll-stack-section {
  margin-top: 5rem;
  position: relative;
}

.scroll-stack-shell {
  max-width: 980px;
  margin: 0 auto;
  padding: 1rem 0 6rem;
  position: relative;
}

.scroll-stack-eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin: 0 0 0.35rem;
}

.scroll-stack-title {
  margin: 0 0 0.55rem;
  font-size: clamp(1.6rem, 2.8vw, 2rem);
}

.scroll-stack-copy {
  margin: 0 0 2.2rem;
  font-size: 0.95rem;
  color: var(--text-muted);
}

/* the vertical "deck" of panels */
.scroll-stack {
  position: relative;
}

/* each panel is sticky, so it pins as you scroll past */
.scroll-panel {
  position: sticky;
  top: 5rem;                          /* how far from the top it pins */
  margin-bottom: 3rem;

  border-radius: 1.4rem;
  padding: 1.6rem 1.7rem 1.9rem;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background:
    radial-gradient(circle at top left, rgba(148, 163, 184, 0.16), transparent 60%),
    linear-gradient(135deg, #020617, #020617);
  box-shadow:
    0 22px 52px rgba(15, 23, 42, 1),
    0 0 0 1px rgba(15, 23, 42, 0.95);

  overflow: hidden;
  transform-origin: center top;
  transition:
    transform 0.35s ease-out,
    box-shadow 0.35s ease-out,
    border-color 0.25s ease-out,
    background 0.25s ease-out;
}

/* subtle glow rim inside each panel */
.scroll-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border-top: 1px solid rgba(148, 163, 184, 0.7);
  opacity: 0.4;
  pointer-events: none;
}

/* label pill at the top */
.scroll-panel-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.6);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  margin-bottom: 0.55rem;
}

.scroll-panel h3 {
  margin: 0 0 0.45rem;
  font-size: 1rem;
}

.scroll-panel p {
  margin: 0 0 0.7rem;
  font-size: 0.9rem;
  color: var(--text-main);
}

.scroll-panel-list {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.86rem;
  color: var(--text-main);
}

.scroll-panel-list li {
  margin-bottom: 0.25rem;
}

/* give each panel a slightly different tint + depth */
.scroll-panel--plan {
  z-index: 3;
}

.scroll-panel--build {
  z-index: 4;
  transform: translateY(6px) scale(0.985);
  background:
    radial-gradient(circle at top right, rgba(56, 189, 248, 0.16), transparent 60%),
    linear-gradient(135deg, #020617, #020617);
}

.scroll-panel--launch {
  z-index: 5;
  transform: translateY(12px) scale(0.975);
  background:
    radial-gradient(circle at bottom, rgba(34, 197, 94, 0.2), transparent 65%),
    linear-gradient(135deg, #020617, #020617);
}

/* On hover (or as it’s the one in “view”), give extra punch */
.scroll-panel:hover {
  transform: translateY(0) scale(1);
  border-color: var(--accent);
  box-shadow:
    0 28px 70px rgba(15, 23, 42, 1),
    0 0 24px var(--accent-soft);
}

/* small-screen tweaks */
@media (max-width: 640px) {
  .scroll-stack-shell {
    padding-bottom: 4rem;
    margin-inline: -2vw;
  }

  .scroll-panel {
    top: 4rem;
    padding: 1.4rem 1.3rem 1.7rem;
  }
}

/* ================================
   CONTACT PAGE (interactive)
   Scoped to .page-contact
================================ */

.page-contact .page-header.contact-hero {
  max-width: 980px;
  margin-inline: auto;
}

.contact-hero-eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin: 0 0 0.35rem;
}

.contact-hero-sub {
  max-width: 760px;
  color: var(--text-muted);
}

.contact-hero-pills {
  margin-top: 1.15rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* Layout shell */
.contact-grid-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr);
  gap: 1.8rem;
  align-items: start;
}

/* Panels */
.contact-panel {
  position: relative;
  border-radius: 1.25rem;
  border: 1px solid var(--border-subtle);
  background:
    radial-gradient(circle at top left, rgba(148, 163, 184, 0.10), transparent 60%),
    linear-gradient(135deg, var(--bg-soft), var(--bg));
  box-shadow: 0 22px 55px var(--shadow-strong);
  overflow: hidden;
  isolation: isolate;
}

.contact-panel--form {
  padding: 1.7rem 1.7rem 1.9rem;
  min-height: 520px;
}

.contact-panel--info {
  padding: 1.6rem 1.5rem 1.8rem;
}

.contact-panel-header h2 {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
}

.contact-panel-header p {
  margin: 0 0 1.1rem;
  font-size: 0.92rem;
  color: var(--text-muted);
}

/* Ambient background for form panel */
.contact-panel-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Match Portfolio/Services header text width rules */
.page-contact .page-header p {
  max-width: 680px;
}

/* If you want the contact hero to feel less centered */
.page-contact .page-header.contact-hero {
  max-width: 900px;
  margin-inline: 0;
}

/* Give the right panel header buttons a little breathing room */
.page-contact .contact-panel--info .fast-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.8rem;
}

/* ================================
   STICKY TRANSMISSION PANEL
   Slides down while scrolling
   Stops at bottom of the contact grid
================================ */

.page-contact .contact-panel--info {
  position: sticky;
  top: 6rem;         /* tweak this "dock" distance */
  align-self: start;    /* important for grid + sticky */
}

/* Disable sticky on smaller screens */
@media (max-width: 980px) {
  .page-contact .contact-panel--info {
    position: static;
    top: auto;
  }
}

.ambient-orb {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  opacity: 0.22;
  filter: blur(14px);
  mix-blend-mode: screen;

  background:
    radial-gradient(circle at 30% 30%,
      color-mix(in srgb, var(--accent) 35%, transparent),
      transparent 60%),
    radial-gradient(circle at 50% 50%,
      var(--accent-soft),
      transparent 70%);
}

/* place them */
.ambient-orb:nth-child(1) { top: -70px; left: -40px; }
.ambient-orb:nth-child(2) { top: 35%; right: -60px; width: 140px; height: 140px; }
.ambient-orb:nth-child(3) { bottom: -80px; left: 35%; width: 220px; height: 220px; }

/* subtle grid shimmer */
.ambient-grid {
  position: absolute;
  inset: 0;
  opacity: 0.08;
  background-image:
    linear-gradient(rgba(148,163,184,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,0.12) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(circle at 20% 10%, #000 0 35%, transparent 70%);
}

/* Ensure content above ambient */
.contact-panel--form > *:not(.contact-panel-ambient) {
  position: relative;
  z-index: 1;
}

/* Scope chips */
.contact-scope {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.2rem;
}

.scope-chip {
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-muted);
  padding: 0.28rem 0.85rem;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.08s ease,
    box-shadow 0.18s ease;
}

.scope-chip:hover {
  border-color: var(--accent);
  color: var(--text-main);
  background: var(--accent-soft);
  transform: translateY(-1px);
}

.scope-chip.is-active {
  border-color: var(--accent);
  color: var(--text-main);
  background: radial-gradient(circle at top, var(--accent-soft), transparent 60%);
  box-shadow: 0 0 14px var(--accent-soft);
}

/* Form layout */
.contact-form {
  display: grid;
  gap: 1.05rem;
}

.contact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}

.field {
  display: grid;
  gap: 0.35rem;
}

.field-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
}

.field input,
.field textarea {
  border-radius: 0.85rem;
  border: 1px solid var(--border-subtle);
  background: rgba(2, 6, 23, 0.85);
  color: var(--text-main);
  padding: 0.75rem 0.85rem;
  font-size: 0.92rem;
  outline: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

.field textarea {
  resize: vertical;
  min-height: 140px;
}

.field input::placeholder,
.field textarea::placeholder {
  color: color-mix(in srgb, var(--text-muted) 75%, transparent);
}

.field input:focus,
.field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: rgba(2, 6, 23, 0.98);
}

.field-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Vibe pill row */
.field-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pill-toggle {
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: transparent;
  padding: 0.3rem 0.8rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease,
    transform 0.08s ease,
    box-shadow 0.18s ease;
}

/* Only the pill you're actually hovering should show hover visuals */
.pill-toggle:hover {
  border-color: var(--accent);
  color: var(--text-main);
  background: var(--accent-soft);
  transform: translateY(-1px);
}

/* Active pill always looks active */
.pill-toggle.is-active {
  border-color: var(--accent);
  color: var(--text-main);
  background:
    radial-gradient(circle at center, var(--accent-soft), rgba(2,6,23,0.9));
  box-shadow: 0 0 14px var(--accent-soft);
}

/* ✅ REMOVE this rule entirely (it causes the row-wide hover confusion)
.field-pill-row:hover .pill-toggle.is-active:not(:hover) { ... }
*/

.page-contact .field-pill-row {
  justify-content: flex-start;
  align-items: center;
}

.page-contact .pill-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: max-content;
  flex: 0 0 auto;
  white-space: nowrap;
}
/* Message meta / signal */
.field--message {
  gap: 0.55rem;
}

/* ===== VIBE PILL HITBOX FIX (hard clamp) ===== */
.page-contact .field-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

/* Force pills to size ONLY to content */
.page-contact .field-pill-row .pill-toggle {
  display: inline-flex !important;
  width: auto !important;
  max-width: max-content !important;
  flex: 0 0 auto !important;

  align-items: center;
  justify-content: center;

  line-height: 1;
  white-space: nowrap;
}

/* Kill any accidental hitbox-expanding pseudo layers */
.page-contact .field-pill-row .pill-toggle::before,
.page-contact .field-pill-row .pill-toggle::after {
  content: none !important;
}

.page-contact .field-pill-row button {
  width: auto !important;
}

.message-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.message-count {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent);
}

.message-count-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-right: 0.4rem;
}

.signal-meter {
  display: inline-flex;
  align-items: flex-end;
  gap: 4px;
  padding: 0.2rem 0.4rem;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: rgba(2,6,23,0.6);
}

.signal-bar {
  width: 6px;
  height: 8px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  opacity: 0.35;
  transition: height 0.18s ease, opacity 0.18s ease, background 0.18s ease;
}

.signal-label {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Timeline */
.timeline-range {
  width: 100%;
  accent-color: var(--accent);
}

.timeline-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

/* Actions */
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-top: 0.2rem;
}

.contact-submit {
  position: relative;
  overflow: hidden;
}

.contact-submit::after {
  content: "";
  position: absolute;
  inset: -50%;
  background: radial-gradient(circle, rgba(255,255,255,0.22), transparent 55%);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.contact-submit:hover::after {
  opacity: 1;
  transform: translateY(0);
}

/* Status */
.contact-status {
  font-size: 0.85rem;
  color: var(--text-muted);
  min-height: 1.2em;
}

/* Right side fast cards */
.contact-fast-grid {
  display: grid;
  gap: 1rem;
}

.fast-card {
  position: relative;
  border-radius: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background:
    radial-gradient(circle at top, rgba(148, 163, 184, 0.12), transparent 55%),
    linear-gradient(135deg, #020617, #020617);
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.9);
  padding: 1.1rem 1.15rem 1.2rem;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.12s ease,
    background 0.18s ease;
}

.fast-card:hover {
  border-color: var(--accent);
  box-shadow:
    0 22px 52px rgba(15, 23, 42, 1),
    0 0 20px var(--accent-soft);
  transform: translateY(-2px);
}

.fast-card-badge {
  display: inline-flex;
  padding: 0.18rem 0.7rem;
  border-radius: 999px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  border: 1px solid rgba(148,163,184,0.45);
  margin-bottom: 0.5rem;
}

.fast-card h3 {
  margin: 0 0 0.35rem;
  font-size: 0.98rem;
}

.fast-card p {
  margin: 0 0 0.75rem;
  font-size: 0.88rem;
  color: var(--text-main);
}

.fast-mini {
  margin-top: 0.6rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.fast-list {
  margin: 0.2rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.85rem;
}

.fast-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.mini-pill {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* Small buttons */
.small-btn {
  padding: 0.45rem 0.85rem;
  font-size: 0.8rem;
}

/* ================================
   FUTURISTIC TRANSMISSION LOG
   (replaces the old block)
================================ */

.page-contact .transmission-log {
  position: relative;
  margin-top: 1.2rem;
  border-radius: 1.1rem;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border-subtle));
  overflow: hidden;

  background:
    radial-gradient(circle at 10% 15%, var(--accent-soft), transparent 45%),
    radial-gradient(circle at 90% 85%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 50%),
    linear-gradient(135deg, rgba(255,255,255,0.06), transparent 40%),
    rgba(2,6,23,0.92);

    box-shadow:
    0 14px 32px var(--shadow-strong);
}

/* Animated "energy sweep" (mask-free) */
.page-contact .transmission-log::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;

  height: 2px;
  border-radius: 999px;

  background: linear-gradient(
    90deg,
    transparent,
    var(--accent),
    transparent
  );
  background-size: 220% 100%;
  animation: transmissionEdge 5.5s ease-in-out infinite;

  box-shadow:
    0 0 10px var(--accent-soft),
    0 0 18px var(--accent-soft);

  pointer-events: none;
  opacity: 0.9;
}

/* Subtle scanlines overlay */
.page-contact .transmission-log::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.035) 0px,
      rgba(255,255,255,0.035) 1px,
      transparent 1px,
      transparent 5px
    );
  opacity: 0.18;
  mix-blend-mode: overlay;
  pointer-events: none;
  animation: scanDrift 8s linear infinite;
}

@keyframes transmissionEdge {
  0%, 100% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
}

@keyframes scanDrift {
  0% { transform: translateY(0); }
  100% { transform: translateY(14px); }
}

/* Header feels like a console bar */
.page-contact .log-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);

  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--accent) 12%, transparent),
      transparent 40%,
      color-mix(in srgb, var(--accent) 10%, transparent)
    ),
    rgba(2,6,23,0.9);
}

/* Brighter "status lights" */
.page-contact .log-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 45%, #94a3b8);
  box-shadow: 0 0 10px var(--accent-soft);
  opacity: 0.75;
}

/* Console title */
.page-contact .log-title {
  margin-left: 0.25rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--text-main);
  opacity: 0.9;
  text-shadow: 0 0 10px var(--accent-soft);
}

/* Terminal body */
.page-contact .log-body {
  position: relative;
  margin: 0;
  padding: 1.05rem 1.05rem 1.25rem;

  /* Cleaner pro terminal type */
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.82rem;
  line-height: 1.6;
  letter-spacing: 0.01em;

  color: color-mix(in srgb, var(--text-main) 92%, transparent);

  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 55%);

  min-height: 170px;

  text-shadow: none;
  white-space: pre-wrap;
}

/* Optional blinking cursor if your preview element is inside log-body */
.page-contact #transmissionPreview::after {
  content: "▌";
  opacity: 0.65;
  margin-left: 2px;
  animation: cursorBlink 1.1s steps(1) infinite;
}

@keyframes cursorBlink {
  50% { opacity: 0.15; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .page-contact .transmission-log::before,
  .page-contact .transmission-log::after,
  .page-contact #transmissionPreview::after {
    animation: none;
  }
}

/* Bottom callout */
.contact-bottom-callout {
  position: relative;
  border-radius: 1.25rem;
  border: 1px solid var(--border-subtle);
  padding: 1.7rem 1.8rem;
  max-width: 980px;
  margin-inline: auto;
  background:
    radial-gradient(circle at top left, var(--accent-soft), transparent 55%),
    linear-gradient(135deg, var(--bg-soft), var(--bg));
  overflow: hidden;
}

.contact-bottom-glow {
  position: absolute;
  inset: -30%;
  background: radial-gradient(circle, var(--accent-soft), transparent 60%);
  opacity: 0.55;
  filter: blur(20px);
  pointer-events: none;
}

/* Tilt support */
[data-tilt] {
  transform-style: preserve-3d;
}

/* Responsive */
@media (max-width: 980px) {
  .contact-grid-shell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .contact-row {
    grid-template-columns: 1fr;
  }
}

/* ========= RESPONSIVE ========= */
@media (max-width: 800px) {
  .hero-layout {
    grid-template-columns: 1fr;
  }

  .hero-meta-wrapper {
    margin-top: 1rem;
  }
}

@media (max-width: 768px) {
  .profile-section {
    padding: 1.6rem 1.2rem;
    margin-inline: -2vw;
  }

  .profile-section .grid {
    gap: 1rem;
  }
}

@media (max-width: 640px) {
  .site-nav {
    gap: 1rem;
    font-size: 0.8rem;
  }

  main {
    padding-inline: 4vw;
  }

  .site-header {
    padding-inline: 4vw;
  }

  .three-preview #three-container {
    height: 260px;
  }
}