/* ---------- Variables ---------- */
:root {
  --bg: #07080d;
  --bg-elevated: #0e111a;
  --text: #f2f2f5;
  --text-muted: #a3a3ae;
  --purple: #6d4ee8;
  --blue: #2e9fe6;
  --silver: #b9c2cc;
  --gradient: linear-gradient(135deg, var(--purple), var(--blue));
  /* Cosmic ramp for developer names — blue easing up into purple. */
  --cosmic-name: linear-gradient(100deg, #5fd0ff 0%, #4f8ef7 45%, #9a6bff 100%);
  --border: rgba(255, 255, 255, 0.08);
  --radius: 14px;
  --font-heading: "Space Grotesk", sans-serif;
  --font-body: "Inter", sans-serif;
  --container-width: 1100px;
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
  /* Stops the "select this image to copy/save" behavior a double-tap (or
     double-click, or a mobile long-press) triggers by default — the
     selection highlight and the -webkit callout menu are what actually
     drive that prompt, not clicks/links, so this doesn't affect normal
     tapping or dragging an image inside a link or button. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}

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

ul { list-style: none; }

h1, h2, h3 { font-family: var(--font-heading); line-height: 1.15; }

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

.gradient-text {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: var(--gradient);
  color: #fff;
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}
.btn-ghost:hover { border-color: rgba(255,255,255,0.25); }

.btn-small { padding: 8px 18px; font-size: 0.85rem; }

.btn-large { padding: 18px 36px; font-size: 1.05rem; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: transparent;
  padding: 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  pointer-events: none;
}

.site-header > * {
  pointer-events: auto;
}

.nav-left {
  position: relative;
}

.header-icons {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* The brand mark is deliberately NOT part of the fixed header — the header
   stays fixed on every page (so nav/cart/profile are always reachable),
   and a big logo living inside it would permanently cover page content
   while scrolling. Instead, same as the homepage's own hero, a large logo
   sits once at the top of the scrolling page content (see .page-hero-logo
   below and .hero-logo on the homepage) and scrolls away naturally. */
.page-hero-logo-link {
  display: inline-block;
  margin-bottom: 20px;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.page-hero-logo-link:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 0 14px rgba(109, 78, 232, 0.5));
}
.page-hero-logo {
  /* Fed by the 1024px transparent artwork, not the 256px favicon-sized one,
     so it stays crisp at this size instead of being upscaled soft. */
  height: 280px;
  width: auto;
}
@media (max-width: 640px) {
  .page-hero-logo { height: 180px; }
}

.cart-icon-link,
.profile-icon-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--text);
  transition: background 0.15s ease;
}
.cart-icon-link:hover,
.profile-icon-link:hover { background: rgba(255, 255, 255, 0.06); }

.cart-icon,
.profile-icon {
  width: 22px;
  height: 22px;
}

.cart-icon-link .cart-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  margin-left: 0;
}

.nav-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.nav-toggle:hover { background: rgba(255, 255, 255, 0.06); }

.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--text);
  display: block;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-links {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 500;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.nav-links.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.nav-links a {
  color: var(--text-muted);
  padding: 10px 12px;
  border-radius: 8px;
  transition: color 0.15s ease, background 0.15s ease;
  display: flex;
  align-items: center;
}
.nav-links a:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }

.cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 8px;
  background: var(--gradient);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 999px;
}

/* ---------- Hero logo ---------- */
.hero-logo-wrap {
  position: relative;
  width: clamp(280px, 38vw, 480px);
  margin: 0 auto 32px;
  perspective: 900px;
}

.hero-logo-wrap::before {
  content: "";
  position: absolute;
  inset: -25%;
  z-index: 0;
  background: radial-gradient(circle, rgba(109, 78, 232, 0.6) 0%, rgba(46, 159, 230, 0.4) 40%, transparent 70%);
  filter: blur(28px);
  animation: logoGlowPulse 3.2s ease-in-out infinite;
  pointer-events: none;
}

.hero-logo {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  /* The width/height attributes on the tag give the browser the aspect ratio
     up front (no layout shift). Without this, the height attribute would be
     taken literally against the CSS width and stretch the logo. */
  height: auto;
  filter:
    drop-shadow(0 0 40px rgba(109, 78, 232, 0.65))
    drop-shadow(0 0 80px rgba(46, 159, 230, 0.45));
  transition: transform 0.4s cubic-bezier(.22, 1, .36, 1);
  transform-style: preserve-3d;
  will-change: transform;
  cursor: pointer;
}

@keyframes logoGlowPulse {
  0%, 100% { opacity: 0.55; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-logo-wrap::before {
    animation: none;
    opacity: 0.8;
  }
}

/* Mobile: no glow, and the logo doesn't tilt/track touch input. */
@media (max-width: 860px) {
  .hero-logo-wrap::before {
    display: none;
  }

  .hero-logo {
    filter: none;
  }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 140px 0 120px;
  overflow: hidden;
  text-align: center;
}

.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(109, 78, 232, 0.2), transparent 65%),
    linear-gradient(180deg, rgba(8, 8, 12, 0.55) 0%, rgba(8, 8, 12, 0.8) 65%, var(--bg) 100%);
  pointer-events: none;
  z-index: 1;
}

.hero-content { position: relative; z-index: 2; max-width: 780px; margin: 0 auto; }

/* ---------- Website Management background video ---------- */
.work {
  position: relative;
  overflow: hidden;
}

.work-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}

/* PC browsers only — larger screens get a slightly less transparent video background. */
@media (min-width: 861px) {
  .hero-bg-video,
  .work-bg-video {
    opacity: 0.5;
  }
}

.work-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(109, 78, 232, 0.2), transparent 65%),
    linear-gradient(180deg, var(--bg) 0%, rgba(8, 8, 12, 0.8) 20%, rgba(8, 8, 12, 0.8) 80%, var(--bg) 100%);
  pointer-events: none;
  z-index: 1;
}

.work .container { position: relative; z-index: 2; }

.eyebrow {
  color: var(--purple);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85rem;
  margin-bottom: 20px;
}

.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 700;
  margin-bottom: 24px;
}

.hero-sub {
  color: var(--text-muted);
  font-size: 1.15rem;
  max-width: 560px;
  margin: 0 auto 36px;
}

/* ---------- Sections ---------- */
section { padding: 100px 0; }

.section-title {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700;
  margin-bottom: 16px;
}

.section-sub {
  color: var(--text-muted);
  max-width: 560px;
  margin-bottom: 48px;
}

/* ---------- Services ---------- */
.service-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.service-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  min-height: 400px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 28px 28px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: transform 0.4s cubic-bezier(.22, 1, .36, 1),
              box-shadow 0.4s cubic-bezier(.22, 1, .36, 1),
              border-color 0.4s ease;
}

@media (min-width: 861px) {
  .service-row:hover {
    transform: scale(1.03) translateY(-8px);
    border-color: rgba(109, 78, 232, 0.5);
    box-shadow:
      0 24px 60px rgba(109, 78, 232, 0.25),
      0 8px 30px rgba(46, 159, 230, 0.2),
      0 0 0 1px rgba(109, 78, 232, 0.15);
  }
}

.service-media {
  flex: 0 0 auto;
  width: 130px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-media img {
  width: 100%;
  height: 100%;
  transition: transform 0.4s cubic-bezier(.22, 1, .36, 1);
}

@media (min-width: 861px) {
  .service-row:hover .service-media img {
    transform: scale(1.15) rotate(-3deg);
  }
}

.service-text h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
}

.service-text p {
  color: var(--text-muted);
  font-size: 0.98rem;
}

.service-cta {
  margin-top: auto;
  width: 100%;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: border-color 0.4s ease;
}

@media (min-width: 861px) {
  .service-row:hover .service-cta {
    border-top-color: rgba(109, 78, 232, 0.4);
  }
}

@media (max-width: 860px) {
  .service-list { grid-template-columns: 1fr; }
  .service-row { min-height: 0; }
}

/* ---------- Services: photo cards (Gaming / Business / Social only) ---------- */
#services .service-row {
  padding: 0;
  overflow: hidden;
}

#services .service-photo {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  height: 240px;
  background-size: cover;
  background-position: center;
  background-color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

#services .service-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(88, 28, 135, 0.35) 0%,
    rgba(20, 10, 35, 0.6) 45%,
    var(--bg-elevated) 100%);
}

#services .service-icon {
  position: relative;
  z-index: 1;
  width: 110px;
  height: 110px;
  filter: drop-shadow(0 0 20px rgba(109, 78, 232, 0.75)) drop-shadow(0 0 40px rgba(109, 78, 232, 0.4));
  transition: transform 0.4s cubic-bezier(.22, 1, .36, 1);
}

@media (min-width: 861px) {
  #services .service-row:hover .service-icon {
    transform: scale(1.15) rotate(-3deg);
  }
}

#services .service-text {
  padding: 22px 26px 0;
}

#services .service-divider {
  display: block;
  width: 44px;
  height: 3px;
  margin: 10px auto 16px;
  background: var(--purple);
  border-radius: 2px;
}

#services .service-cta {
  padding: 0 26px 30px;
  border-top: none;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  color: var(--purple);
}

@media (min-width: 861px) {
  #services .service-row:hover .service-cta {
    border-top-color: transparent;
  }
}

/* ---------- About ---------- */
.about-grid p { color: var(--text-muted); margin-bottom: 16px; max-width: 640px; }

/* ---------- Contact ---------- */
.contact { text-align: center; }
.contact .section-sub { margin-left: auto; margin-right: auto; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 32px 0;
}

.footer-inner {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.footer-inner a {
  color: var(--text-muted);
  text-decoration: underline;
  transition: color 0.15s ease;
}

.footer-inner a:hover {
  color: var(--text);
}

/* ---------- Request form pages ---------- */
.page-hero {
  position: relative;
  padding: 160px 0 60px;
  text-align: center;
  overflow: hidden;
}

/* A soft glow in the brand gradient's colors — every inner page shares this
   one component, so this single background treatment is what was actually
   missing across ~17 otherwise-plain hero sections, not something each
   page needed its own fix for. Kept to a quiet radial glow rather than a
   video or illustration to stay in the same understated register as the
   rest of the site. */
.page-hero::before {
  content: "";
  position: absolute;
  top: -180px;
  left: 50%;
  translate: -50% 0;
  width: min(900px, 160vw);
  height: 480px;
  background: radial-gradient(ellipse at center, rgba(109, 78, 232, 0.22), rgba(46, 159, 230, 0.12) 45%, transparent 72%);
  pointer-events: none;
  z-index: 0;
}

.page-hero .container { position: relative; z-index: 1; }

.page-hero .eyebrow { margin-bottom: 16px; }

.page-hero h1 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 16px;
}

.page-hero .hero-sub {
  max-width: 600px;
  margin: 0 auto;
}

.request-form-section { padding: 0 0 120px; }

.request-form {
  max-width: 720px;
  margin: 0 auto;
}

.form-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  margin-bottom: 24px;
}

.form-card h2 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  margin-bottom: 6px;
}

.form-hint {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 20px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.form-group { margin-bottom: 20px; }
.form-group:last-child { margin-bottom: 0; }

.form-group label,
.form-label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 8px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="password"],
.form-group select,
.form-group textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group select {
  cursor: pointer;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="tel"]:focus,
.form-group input[type="password"]:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: rgba(109, 78, 232, 0.6);
  box-shadow: 0 0 0 3px rgba(109, 78, 232, 0.15);
}

.form-group input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.radio-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

/* For the longer tick-lists (platforms, wanted features) a wrapping grid
   keeps them scannable in columns instead of one ragged run-on row. */
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px 18px;
}

.radio-option,
.checkbox-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--text-muted);
  cursor: pointer;
}

.radio-option input,
.checkbox-option input {
  accent-color: var(--purple);
  width: 16px;
  height: 16px;
}

.domain-followup {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* ---------- Subscription tier picker ---------- */
.subscription-panel {
  margin-top: 20px;
}

.billing-toggle-center {
  text-align: center;
}

.billing-toggle {
  display: inline-flex;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 20px;
}

.billing-tab {
  border: none;
  background: none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.billing-tab.active {
  background: var(--gradient);
  color: #fff;
}

.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.tier-card {
  position: relative;
  cursor: pointer;
}

.tier-card.info-only {
  cursor: default;
}

.tier-card.tier-silver {
  --tier-c1: #e7e7ec;
  --tier-c2: #5a5a63;
  --tier-glow: rgba(130, 130, 140, 0.35);
}

.tier-card.tier-gold {
  --tier-c1: #ffe9a8;
  --tier-c2: #c9971f;
  --tier-glow: rgba(201, 151, 31, 0.35);
}

.tier-card.tier-platinum {
  --tier-c1: #f3f8ff;
  --tier-c2: #9fb8dd;
  --tier-glow: rgba(159, 184, 221, 0.4);
}

.tier-card.build-basic {
  --tier-c1: #a5d8ff;
  --tier-c2: #2e9fe6;
  --tier-glow: rgba(46, 159, 230, 0.35);
}

.tier-card.build-common {
  --tier-c1: #d8b4fe;
  --tier-c2: #6d4ee8;
  --tier-glow: rgba(109, 78, 232, 0.35);
}

.tier-card.build-ultimate {
  --tier-c1: #c084fc;
  --tier-c2: #2e9fe6;
  --tier-glow: rgba(109, 78, 232, 0.4);
}

.tier-subtitle {
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.45;
  margin-bottom: 14px;
}

.tier-radio {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.tier-card-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.tier-card:hover .tier-card-inner {
  border-color: var(--tier-c2);
  transform: translateY(-2px);
}

.tier-radio:checked + .tier-card-inner {
  border-color: var(--tier-c2);
  box-shadow: 0 0 0 2px var(--tier-glow), 0 12px 30px var(--tier-glow);
}

.tier-name {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  background: linear-gradient(135deg, var(--tier-c1), var(--tier-c2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 8px;
}

.tier-price {
  margin-bottom: 14px;
}

.price-amount {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--text);
}

.price-period {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-left: 2px;
}

.tier-features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.tier-features li {
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--text-muted);
  padding-left: 18px;
  position: relative;
}

.tier-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--tier-c2);
  font-weight: 700;
}

.tier-purchase-btn {
  width: 100%;
  border: 1px solid var(--tier-c2);
  background: linear-gradient(135deg, var(--tier-c1), var(--tier-c2));
  color: #0a0a0f;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.tier-purchase-btn:hover {
  transform: translateY(-1px);
  opacity: 0.9;
}

.tier-purchase-btn:disabled {
  cursor: default;
  opacity: 0.7;
  transform: none;
}

@media (max-width: 780px) {
  .tier-grid { grid-template-columns: 1fr; }
}

.form-actions {
  text-align: center;
  margin-top: 8px;
}

.form-note {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: 12px;
}

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* ---------- Cart page ---------- */
.cart-container {
  max-width: 720px;
  margin: 0 auto;
}

.cart-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}

.cart-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
}

.cart-item-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.cart-item-service {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cart-item-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
}

.cart-item-price {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  white-space: nowrap;
  flex: 0 0 auto;
}

.cart-item-remove {
  flex: 0 0 auto;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.cart-item-remove:hover {
  border-color: rgba(109, 78, 232, 0.5);
  color: var(--text);
}

.cart-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}

.cart-empty p {
  margin-bottom: 20px;
}

.cart-summary {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}

.cart-totals {
  margin-bottom: 24px;
}

.cart-total-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
}

.cart-total-row:last-child {
  border-bottom: none;
}

.cart-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

.clear-cart-link {
  display: inline-block;
  margin-top: 16px;
  color: var(--text-muted);
  font-size: 0.85rem;
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
}

.clear-cart-link:hover {
  color: var(--text);
}

/* ---------- Legal pages ---------- */
.legal-content {
  max-width: 760px;
  margin: 0 auto;
}

.legal-updated {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-bottom: 40px;
}

.legal-content h2 {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  margin: 40px 0 12px;
}

.legal-content h2:first-of-type {
  margin-top: 0;
}

.legal-content p {
  color: var(--text-muted);
  margin-bottom: 16px;
}

.legal-content ul {
  color: var(--text-muted);
  margin: 0 0 16px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legal-content strong {
  color: var(--text);
}

.legal-content a {
  color: var(--purple);
  text-decoration: underline;
}

.legal-disclaimer {
  margin-top: 48px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* ---------- Quick link tabs (hero) ---------- */
.quick-links-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 36px;
}

.quick-link-tab {
  padding: 12px 28px;
  border-radius: 999px;
  border: 1px solid rgba(109, 78, 232, 0.3);
  background: rgba(16, 16, 24, 0.6);
  backdrop-filter: blur(8px);
  color: var(--text);
  font-weight: 600;
  font-size: 0.9rem;
  position: relative;
  /* A glow OUTSIDE the pill (box-shadow), not a tint fill inside it — kept
     faint at rest and turned up on hover, rather than only appearing on
     hover, so these read as "alive" instead of flat even before you touch
     them. */
  box-shadow: 0 0 10px rgba(109, 78, 232, 0.18);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.quick-link-tab:hover {
  border-color: rgba(109, 78, 232, 0.75);
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(109, 78, 232, 0.65), 0 0 42px rgba(46, 159, 230, 0.4);
}

/* ---------- Custom cursor (desktop with a mouse, motion allowed, marketing pages only) ---------- */
/* cursor:none only applies once JS confirms it has a live mouse position — see
   main.js. This way the native cursor is always the fallback, never a gap. */
body.custom-cursor-active,
body.custom-cursor-active a,
body.custom-cursor-active button {
  cursor: none;
}

.custom-cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--purple);
  box-shadow: 0 0 8px rgba(109, 78, 232, 0.9), 0 0 16px rgba(46, 159, 230, 0.6);
  pointer-events: none;
  z-index: 10000;
  opacity: 0;
  /* translate/scale as independent properties (not transform: translate3d()
     scale()) is what makes the fix below possible: position tracks the
     mouse with zero transition delay every single mousemove, while only
     scale — the hover pop — eases. The previous single `transform`
     transition eased BOTH at once, so the dot visibly trailed ~150ms
     behind the real cursor on every movement, not just on hover. */
  translate: var(--cx, 0px) var(--cy, 0px);
  scale: 1;
  transition: opacity 0.15s ease, scale 0.15s ease;
}

.custom-cursor-dot.is-visible {
  opacity: 1;
}

.custom-cursor-dot.is-hovering {
  scale: 1.8;
}

/* A DigiCode signature: moving the cursor "reveals" a trail of falling
   code glyphs behind it — a small, literal nod to the fact that everything
   here is real hand-written code, not a drag-and-drop template. Same
   support gating as the cursor dot above (see main.js). */
.matrix-trail-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
}

/* ---------- Page watermark ---------- */
.page-watermark {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(60vw, 800px);
  opacity: 0.12;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: -1;
}

/* ---------- Client portal placeholder ---------- */
.portal-card {
  max-width: 420px;
  margin: 0 auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 32px;
  text-align: center;
}

.portal-lock {
  width: 56px;
  height: 56px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(109, 78, 232, 0.12);
  color: var(--purple);
}

.portal-lock svg {
  width: 26px;
  height: 26px;
}

.portal-form {
  text-align: left;
  margin-bottom: 24px;
}

.portal-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.portal-note {
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* ---------- Info page intro / CTA ---------- */
.info-intro {
  max-width: 640px;
  margin: 0 auto 48px;
  text-align: center;
  color: var(--text-muted);
}

.info-cta {
  text-align: center;
  margin-top: 56px;
  padding-top: 48px;
  border-top: 1px solid var(--border);
}

/* A dedicated "not live yet" treatment for public marketing pages — same
   icon-circle-over-card language as .portal-lock/.portal-card, so it reads
   as a considered part of the site rather than a placeholder. Kept
   separate from .dev-empty (still used as-is for the portal dashboard's
   transient "no items yet" lists, where a plain dashed box is the right,
   lower-key treatment). */
.coming-soon-panel {
  max-width: 640px;
  margin: 0 auto;
  padding: 40px 32px;
  text-align: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.coming-soon-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(109, 78, 232, 0.12);
  color: var(--purple);
}
.coming-soon-icon svg { width: 26px; height: 26px; }

.coming-soon-panel p { color: var(--text-muted); margin-bottom: 0; }
.coming-soon-panel p + p { margin-top: 12px; }
.coming-soon-panel strong { color: var(--text); }

.info-cta p {
  color: var(--text-muted);
  margin-bottom: 20px;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}

.portfolio-card {
  display: block;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.portfolio-card:hover { border-color: rgba(109, 78, 232, 0.5); transform: translateY(-3px); }

.portfolio-card-image {
  position: relative;
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
}
.portfolio-card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 8, 12, 0.1), rgba(8, 8, 12, 0.75));
}

/* A game's thumbnail can be a live illustration instead of a photo — this
   fills the same card-image slot a background-image would, cropping via
   preserveAspectRatio="xMidYMid slice" on the <svg> itself the way
   background-size:cover crops a photo. */
.game-thumb-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.rh-thumb-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.rh-thumb-habib {
  position: absolute;
  left: 40%;
  bottom: 20%;
  width: 15%;
  height: auto;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5));
}
@media (prefers-reduced-motion: no-preference) {
  .rh-thumb-habib { animation: rh-thumb-hop 0.6s ease-in-out infinite; }
}
@keyframes rh-thumb-hop {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50% { transform: translateY(-8px) scaleY(1.04); }
}

.portfolio-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  background: rgba(109, 78, 232, 0.85);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}

.portfolio-card-body { padding: 20px 22px; }
.portfolio-card-body h3 { font-size: 1.1rem; margin-bottom: 8px; }
.portfolio-card-body p { color: var(--text-muted); font-size: 0.88rem; margin-bottom: 16px; }
.portfolio-card-link {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  color: #a78bfa;
}
.portfolio-card:hover .portfolio-card-link { color: #c4b5fd; }

/* ---------- Portal / sign-in flow ---------- */
.portal-message {
  color: var(--text);
  font-weight: 600;
  margin-bottom: 12px;
}

.portal-login-form {
  text-align: left;
  margin-bottom: 20px;
}

.portal-login-form .btn {
  width: 100%;
  margin-top: 4px;
}

.portal-login-error {
  color: #f87171;
  font-size: 0.85rem;
  margin-bottom: 14px;
}

.portal-projects {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
  margin: 0 auto;
}

.portal-project-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
}

.portal-project-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.portal-project-service {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.portal-project-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
}

.portal-project-status {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--purple);
  white-space: nowrap;
}

.portal-sample-banner {
  max-width: 720px;
  margin: 0 auto 24px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
}

/* ---------- Dev dashboard ---------- */
.dashboard-section {
  margin-bottom: 56px;
}

.dashboard-section-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 20px;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.stat-tile {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stat-tile-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stat-tile-value {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--text);
}

.stat-tile-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.stat-delta {
  font-size: 0.85rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.stat-delta.up { color: #0ca30c; }
.stat-delta.down { color: #d03b3b; }

.stat-sparkline { flex: 0 0 auto; }
.stat-sparkline .spark-base {
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.5;
}
.stat-sparkline .spark-accent {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stat-sparkline .spark-dot {
  fill: var(--blue);
  stroke: var(--bg-elevated);
  stroke-width: 2;
}

.rank-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}

.rank-row {
  display: grid;
  grid-template-columns: 150px 1fr 48px;
  align-items: center;
  gap: 14px;
}

.rank-label {
  font-size: 0.9rem;
  color: var(--text);
}

.rank-bar-track {
  height: 8px;
  border-radius: 999px;
  background: var(--bg);
  overflow: hidden;
}

.rank-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--blue);
}

.rank-value {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.perf-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.perf-tile {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.perf-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.perf-icon svg { width: 16px; height: 16px; }
.perf-icon.good { background: rgba(12, 163, 12, 0.15); color: #0ca30c; }
.perf-icon.warning { background: rgba(250, 178, 25, 0.15); color: #fab219; }

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

.perf-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.perf-value {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
}

@media (max-width: 860px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .perf-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .stat-grid { grid-template-columns: 1fr; }
  .rank-row { grid-template-columns: 96px 1fr 40px; }
}

/* ---------- Dev project pipeline ---------- */
.dev-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--border);
}

.dev-tab {
  padding: 10px 18px;
  border: none;
  background: none;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transform: translateY(1px);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.dev-tab:hover { color: var(--text); }
.dev-tab.active { color: var(--text); border-bottom-color: var(--purple); }

.dev-tab-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dev-tab-panel[hidden] {
  display: none;
}

.dev-empty {
  color: var(--text-muted);
  font-size: 0.9rem;
  padding: 24px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

.project-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}

.project-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.project-service {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.project-client {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
}

.project-date {
  font-size: 0.8rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.project-tiers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.project-tag {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: 0.78rem;
  color: var(--text);
}

.project-contact {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0 0 16px;
  padding: 14px;
  background: var(--bg);
  border-radius: 10px;
}
.project-contact dt {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.project-contact dd {
  font-size: 0.85rem;
  color: var(--text);
  word-break: break-word;
}

.project-details {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 18px;
  line-height: 1.5;
}

.project-assigned-to {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.project-assigned-to strong { color: var(--text); }

.project-notes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.project-note {
  padding: 10px 14px;
  background: var(--bg);
  border-radius: 8px;
  font-size: 0.85rem;
}
.project-note-date {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: 3px;
}

.add-note-form {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.add-note-form .note-input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.9rem;
}
.add-note-form .note-input:focus {
  outline: none;
  border-color: rgba(109, 78, 232, 0.6);
}
.btn-small-inline { padding: 10px 18px; white-space: nowrap; }

.project-review {
  padding: 16px;
  background: var(--bg);
  border-radius: 10px;
}
.project-review-stars {
  display: block;
  color: #fab219;
  letter-spacing: 2px;
  margin-bottom: 8px;
}
.project-review p {
  color: var(--text);
  font-style: italic;
  font-size: 0.9rem;
}

/* ---------- Client portal ---------- */
/* Three-step progress track on the client's own project card. */
.client-stage-track {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin: 18px 0 4px;
  padding: 0;
  list-style: none;
}
.client-stage {
  flex: 1;
  position: relative;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted);
}
/* The connector runs from each step back to the previous one, so it never
   trails off the end of the last step. */
.client-stage:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 6px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--border);
}
.client-stage.done::before,
.client-stage.current::before { background: var(--purple); }
.client-stage-dot {
  position: relative;
  z-index: 1;
  display: block;
  width: 14px;
  height: 14px;
  margin: 0 auto 8px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 2px solid var(--border);
}
.client-stage.done .client-stage-dot { background: var(--purple); border-color: var(--purple); }
.client-stage.current .client-stage-dot {
  background: var(--purple);
  border-color: var(--purple);
  box-shadow: 0 0 0 4px rgba(109, 78, 232, 0.25);
}
.client-stage.done .client-stage-label,
.client-stage.current .client-stage-label { color: var(--text); font-weight: 600; }

/* Collapsed copy of the brief they submitted at checkout. */
.client-brief {
  margin: 14px 0 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  background: var(--bg);
}
.client-brief summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}
.client-brief summary:hover { color: var(--text); }
.client-brief p {
  margin-top: 10px;
  font-size: 0.88rem;
  color: var(--text-muted);
  white-space: pre-wrap;
}

/* Star picker for leaving a review. */
.client-star-row { display: flex; gap: 4px; }
.client-star {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.6rem;
  line-height: 1;
  padding: 0 2px;
  color: rgba(255, 255, 255, 0.22);
  transition: color 0.12s ease, transform 0.12s ease;
}
.client-star:hover { transform: scale(1.12); }
.client-star.on { color: #fab219; }

#clientReviewText {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.9rem;
  resize: vertical;
}
#clientReviewText:focus {
  outline: none;
  border-color: rgba(109, 78, 232, 0.6);
}

.dev-warning-banner {
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-bottom: 24px;
}

.add-dev-form {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 24px;
}

.permission-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 8px;
}

.dev-team-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dev-team-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
}

.dev-team-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dev-team-name {
  font-family: var(--font-heading);
  font-weight: 700;
  background: var(--cosmic-name);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.dev-team-meta { font-size: 0.8rem; color: var(--text-muted); }
.dev-team-perms { font-size: 0.78rem; color: var(--text-muted); }

.rank-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--gradient);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  vertical-align: middle;
  margin-left: 4px;
}

@media (max-width: 640px) {
  .project-contact { grid-template-columns: 1fr; }
  .permission-grid { grid-template-columns: 1fr; }
  .add-note-form { flex-direction: column; }
}

/* ---------- Dev chat ---------- */
.chat-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 20px;
  min-height: 480px;
}

.chat-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.chat-mode-toggle {
  display: flex;
  width: 100%;
}
.chat-mode-toggle .billing-tab {
  flex: 1;
  text-align: center;
}

.chat-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}

.chat-list-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  text-align: left;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.chat-list-item:hover { border-color: rgba(109, 78, 232, 0.4); }
.chat-list-item.active {
  border-color: var(--purple);
  background: rgba(109, 78, 232, 0.1);
}

.chat-list-name {
  font-weight: 700;
  font-size: 0.9rem;
  /* .chat-list-item is a <button>, and buttons don't inherit `color` — so
     without this the name fell back to the browser's default black on the
     dark card. Painted in the cosmic ramp rather than plain white. */
  background: var(--cosmic-name);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Where a rank pill sits alongside the name, the name gets its own wrapper
   so the gradient runs across just the name — spanning the pill too would
   leave a short name stuck at the blue end of the ramp. */
.cosmic-name {
  background: var(--cosmic-name);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* The pill is nested inside the name span, so opt it back out of the
   clipped gradient and let it keep its own solid fill. */
.chat-list-name .rank-badge,
.dev-team-name .rank-badge {
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #fff;
}

.chat-list-preview {
  font-size: 0.8rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.chat-thread {
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  min-height: 480px;
  min-width: 0;
}

.chat-thread-header {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.chat-messages {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  margin-bottom: 16px;
  max-height: 360px;
}

.chat-message {
  display: flex;
  flex-direction: column;
  max-width: 75%;
}
.chat-message.mine { align-items: flex-end; align-self: flex-end; }
.chat-message.theirs { align-items: flex-start; align-self: flex-start; }

.chat-message-bubble {
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 0.9rem;
  line-height: 1.4;
  word-break: break-word;
}
.chat-message.mine .chat-message-bubble {
  background: var(--gradient);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-message.theirs .chat-message-bubble {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-bottom-left-radius: 4px;
}

.chat-message-meta {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.chat-input-row {
  display: flex;
  gap: 10px;
}

.chat-input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
}
.chat-input:focus {
  outline: none;
  border-color: rgba(109, 78, 232, 0.6);
}

.chat-empty-state {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  text-align: center;
}

@media (max-width: 780px) {
  .chat-layout { grid-template-columns: minmax(0, 1fr); }
  .chat-thread { min-height: 360px; }
}

/* TEMP: Dev/Client preview toggle — for design/testing only, remove once a real client portal exists. */
.view-switch-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  padding-bottom: 32px;
  border-bottom: 1px dashed var(--border);
}
.view-switch-row[hidden] { display: none; }

.view-switch-label {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ---------- Domain link & live website health ---------- */
.domain-row {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.domain-form {
  display: flex;
  gap: 10px;
  flex: 1;
  min-width: 220px;
}

.domain-input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.9rem;
}
.domain-input:focus {
  outline: none;
  border-color: rgba(109, 78, 232, 0.6);
}

.domain-value {
  font-size: 0.9rem;
  color: var(--text);
  word-break: break-all;
}

.health-panel {
  margin-top: 16px;
}

.health-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.health-header span:first-child {
  font-weight: 700;
  font-size: 0.9rem;
}

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

.health-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}

.health-tile {
  padding: 14px;
  gap: 6px;
}
.health-tile .stat-tile-value {
  font-size: 1.4rem;
}

.health-good { color: #0ca30c; }
.health-warning { color: #fab219; }
.health-critical { color: #d03b3b; }

.health-vitals {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.health-loading,
.health-error {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.health-error { color: #d03b3b; }

.api-key-card {
  margin-bottom: 24px;
}

@media (max-width: 640px) {
  .health-grid { grid-template-columns: repeat(2, 1fr); }
  .domain-form { flex-direction: column; }
}


/* ---------- Own Your Platform ---------- */
/* The moving backdrop is drawn here rather than being photography: nothing
   to licence, no extra megabytes to download, and it can't go out of date.
   Everything animates on transform/opacity only, so it stays cheap, and it
   all stops for anyone who's asked for reduced motion (bottom of section). */
.oyp-hero {
  position: relative;
  overflow: hidden;
}

.oyp-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.oyp-bg-soft { opacity: 0.55; }

.oyp-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
  will-change: transform;
}
.oyp-orb-1 {
  width: 420px; height: 420px;
  top: -80px; left: -60px;
  background: radial-gradient(circle, rgba(109, 78, 232, 0.85), transparent 70%);
  animation: oypDrift1 22s ease-in-out infinite;
}
.oyp-orb-2 {
  width: 360px; height: 360px;
  top: 40px; right: -70px;
  background: radial-gradient(circle, rgba(46, 159, 230, 0.8), transparent 70%);
  animation: oypDrift2 27s ease-in-out infinite;
}
.oyp-orb-3 {
  width: 300px; height: 300px;
  bottom: -110px; left: 45%;
  background: radial-gradient(circle, rgba(154, 107, 255, 0.7), transparent 70%);
  animation: oypDrift3 19s ease-in-out infinite;
}
.oyp-orb-4 {
  width: 380px; height: 380px;
  top: 10%; left: -100px;
  background: radial-gradient(circle, rgba(46, 159, 230, 0.6), transparent 70%);
  animation: oypDrift2 31s ease-in-out infinite;
}
.oyp-orb-5 {
  width: 340px; height: 340px;
  bottom: 5%; right: -90px;
  background: radial-gradient(circle, rgba(109, 78, 232, 0.6), transparent 70%);
  animation: oypDrift1 25s ease-in-out infinite;
}

@keyframes oypDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(70px, 50px) scale(1.12); }
  66%      { transform: translate(30px, -40px) scale(0.94); }
}
@keyframes oypDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%      { transform: translate(-60px, 60px) scale(1.1); }
  75%      { transform: translate(-20px, -30px) scale(0.96); }
}
@keyframes oypDrift3 {
  0%, 100% { transform: translate(-50%, 0) scale(1); }
  50%      { transform: translate(-50%, -60px) scale(1.15); }
}

/* A slow-scrolling grid, so the movement reads as depth rather than just
   coloured blobs. Masked out at the edges so it never ends on a hard line. */
.oyp-grid {
  position: absolute;
  inset: -50% 0;
  background-image:
    linear-gradient(rgba(140, 170, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 170, 255, 0.07) 1px, transparent 1px);
  background-size: 54px 54px;
  transform: perspective(420px) rotateX(58deg);
  animation: oypGrid 14s linear infinite;
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 45%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 55% at 50% 45%, #000 30%, transparent 75%);
}
@keyframes oypGrid {
  from { background-position: 0 0; }
  to   { background-position: 0 54px; }
}

.oyp-hero .container { position: relative; z-index: 1; }

/* --- Rented vs owned --- */
.oyp-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 8px;
}
.oyp-split-col {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 22px;
  background: var(--bg-elevated);
}
.oyp-rented { opacity: 0.82; }
.oyp-owned {
  border-color: rgba(109, 78, 232, 0.45);
  box-shadow: 0 0 30px rgba(109, 78, 232, 0.12);
}
.oyp-split-tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
  color: var(--text-muted);
}
.oyp-owned .oyp-split-tag {
  background: var(--cosmic-name);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.oyp-list { display: flex; flex-direction: column; gap: 11px; }
.oyp-list li {
  position: relative;
  padding-left: 26px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-muted);
}
.oyp-rented .oyp-list li::before {
  content: "✕";
  position: absolute;
  left: 0;
  color: #e0645a;
  font-weight: 700;
}
.oyp-owned .oyp-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #4ad6a0;
  font-weight: 700;
}
.oyp-owned .oyp-list li { color: var(--text); }
.oyp-footnote { text-align: center; margin-top: 20px; }

/* --- Floating possibility cards --- */
.oyp-cards-section { position: relative; overflow: hidden; }
.oyp-cards-section .container { position: relative; z-index: 1; }

.oyp-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.oyp-card {
  position: relative;
  padding: 26px 24px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: linear-gradient(160deg, rgba(24, 26, 40, 0.92), rgba(14, 17, 26, 0.92));
  backdrop-filter: blur(6px);
  /* Each card bobs on its own slightly different cycle so the grid never
     pulses in unison — nth-child below staggers the delay and duration. */
  animation: oypFloat 7s ease-in-out infinite;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.oyp-card:nth-child(3n+1) { animation-duration: 8.5s; animation-delay: -1.2s; }
.oyp-card:nth-child(3n+2) { animation-duration: 7.4s; animation-delay: -3.6s; }
.oyp-card:nth-child(3n)   { animation-duration: 9.2s; animation-delay: -5.1s; }

@keyframes oypFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

.oyp-card:hover {
  animation-play-state: paused;
  transform: translateY(-6px);
  border-color: rgba(109, 78, 232, 0.6);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 26px rgba(109, 78, 232, 0.25);
}
.oyp-card-icon {
  display: block;
  font-size: 1.7rem;
  margin-bottom: 12px;
  line-height: 1;
}
.oyp-card h3 {
  font-size: 1.02rem;
  margin-bottom: 9px;
  background: var(--cosmic-name);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.oyp-card p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* --- Who it's for --- */
.oyp-who-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 32px;
}
.oyp-who {
  padding: 24px 22px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
}
.oyp-who h3 { font-size: 1rem; margin-bottom: 10px; }
.oyp-who p { font-size: 0.9rem; line-height: 1.6; color: var(--text-muted); }

.oyp-cta { max-width: 720px; text-align: center; }

@media (max-width: 760px) {
  .oyp-split { grid-template-columns: 1fr; }
}

/* Everything above is decoration — hold it all still for anyone who's asked
   the OS for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .oyp-orb,
  .oyp-grid,
  .oyp-card { animation: none; }
}

/* The Own Your Platform tab is the one we most want clicked, so it gets a
   filled treatment rather than sitting flat among the outline tabs. */
.quick-link-tab-feature {
  border-color: rgba(109, 78, 232, 0.7);
  background: linear-gradient(135deg, rgba(109, 78, 232, 0.35), rgba(46, 159, 230, 0.28));
  box-shadow: 0 0 18px rgba(109, 78, 232, 0.35);
}
.quick-link-tab-feature:hover {
  background: linear-gradient(135deg, rgba(109, 78, 232, 0.55), rgba(46, 159, 230, 0.45));
  box-shadow: 0 0 26px rgba(109, 78, 232, 0.5);
}
:root { --dc-rain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='520' viewBox='0 0 260 520'%3E%3Cg font-family='ui-monospace,SFMono-Regular,Menlo,monospace' font-weight='600'%3E%3Ctext x='10' y='22' font-size='9' fill='%236f8dff' opacity='0.81'%3E1%3C/text%3E%3Ctext x='68' y='25' font-size='12' fill='%236f8dff' opacity='0.64'%3E^%3C/text%3E%3Ctext x='84' y='18' font-size='14' fill='%23a9d8ff' opacity='0.71'%3E1%3C/text%3E%3Ctext x='125' y='5' font-size='11' fill='%23a9d8ff' opacity='0.29'%3E0%3C/text%3E%3Ctext x='139' y='19' font-size='9' fill='%23a9d8ff' opacity='0.31'%3E0%3C/text%3E%3Ctext x='179' y='21' font-size='9' fill='%236f8dff' opacity='0.92'%3E0%3C/text%3E%3Ctext x='226' y='15' font-size='13' fill='%236f8dff' opacity='0.44'%3E1%3C/text%3E%3Ctext x='95' y='26' font-size='9' fill='%236f8dff' opacity='0.72'%3E1%3C/text%3E%3Ctext x='137' y='31' font-size='11' fill='%236f8dff' opacity='0.53'%3E^%3C/text%3E%3Ctext x='233' y='45' font-size='12' fill='%236f8dff' opacity='0.76'%3E^%3C/text%3E%3Ctext x='247' y='37' font-size='10' fill='%236f8dff' opacity='0.2'%3E1%3C/text%3E%3Ctext x='16' y='55' font-size='11' fill='%23a9d8ff' opacity='0.4'%3E{%3C/text%3E%3Ctext x='112' y='75' font-size='10' fill='%236f8dff' opacity='0.91'%3E*%3C/text%3E%3Ctext x='4' y='82' font-size='11' fill='%236f8dff' opacity='0.2'%3E1%3C/text%3E%3Ctext x='42' y='87' font-size='12' fill='%236f8dff' opacity='1'%3E0%3C/text%3E%3Ctext x='129' y='88' font-size='12' fill='%236f8dff' opacity='0.96'%3E0%3C/text%3E%3Ctext x='167' y='93' font-size='14' fill='%236f8dff' opacity='0.39'%3E/%3C/text%3E%3Ctext x='235' y='102' font-size='11' fill='%236f8dff' opacity='0.35'%3E0%3C/text%3E%3Ctext x='40' y='113' font-size='9' fill='%236f8dff' opacity='0.92'%3E1%3C/text%3E%3Ctext x='77' y='106' font-size='12' fill='%236f8dff' opacity='0.8'%3E&gt;%3C/text%3E%3Ctext x='139' y='118' font-size='11' fill='%236f8dff' opacity='0.85'%3E^%3C/text%3E%3Ctext x='171' y='128' font-size='11' fill='%236f8dff' opacity='0.31'%3E1%3C/text%3E%3Ctext x='196' y='126' font-size='14' fill='%23a9d8ff' opacity='0.6'%3E1%3C/text%3E%3Ctext x='228' y='113' font-size='10' fill='%23a9d8ff' opacity='0.55'%3E?%3C/text%3E%3Ctext x='38' y='155' font-size='13' fill='%23a9d8ff' opacity='0.34'%3E^%3C/text%3E%3Ctext x='58' y='132' font-size='9' fill='%23a9d8ff' opacity='0.72'%3E?%3C/text%3E%3Ctext x='117' y='148' font-size='14' fill='%23a9d8ff' opacity='0.83'%3E&lt;%3C/text%3E%3Ctext x='133' y='138' font-size='10' fill='%23a9d8ff' opacity='0.65'%3E0%3C/text%3E%3Ctext x='218' y='136' font-size='10' fill='%236f8dff' opacity='0.57'%3E0%3C/text%3E%3Ctext x='18' y='161' font-size='9' fill='%236f8dff' opacity='0.52'%3E1%3C/text%3E%3Ctext x='48' y='162' font-size='12' fill='%236f8dff' opacity='0.93'%3E/%3C/text%3E%3Ctext x='63' y='171' font-size='12' fill='%236f8dff' opacity='0.88'%3E^%3C/text%3E%3Ctext x='122' y='178' font-size='10' fill='%23a9d8ff' opacity='0.29'%3E0%3C/text%3E%3Ctext x='147' y='165' font-size='10' fill='%236f8dff' opacity='0.73'%3E0%3C/text%3E%3Ctext x='168' y='162' font-size='11' fill='%236f8dff' opacity='0.37'%3E1%3C/text%3E%3Ctext x='198' y='167' font-size='14' fill='%23a9d8ff' opacity='0.35'%3E;%3C/text%3E%3Ctext x='224' y='164' font-size='13' fill='%236f8dff' opacity='0.98'%3E0%3C/text%3E%3Ctext x='248' y='165' font-size='14' fill='%236f8dff' opacity='0.9'%3E1%3C/text%3E%3Ctext x='24' y='205' font-size='11' fill='%23a9d8ff' opacity='0.43'%3E?%3C/text%3E%3Ctext x='72' y='190' font-size='13' fill='%236f8dff' opacity='0.65'%3E0%3C/text%3E%3Ctext x='128' y='191' font-size='9' fill='%236f8dff' opacity='0.75'%3E0%3C/text%3E%3Ctext x='171' y='207' font-size='14' fill='%236f8dff' opacity='0.95'%3E1%3C/text%3E%3Ctext x='217' y='192' font-size='12' fill='%23a9d8ff' opacity='0.65'%3E0%3C/text%3E%3Ctext x='234' y='199' font-size='12' fill='%236f8dff' opacity='0.64'%3E0%3C/text%3E%3Ctext x='55' y='230' font-size='14' fill='%236f8dff' opacity='0.62'%3E0%3C/text%3E%3Ctext x='101' y='229' font-size='11' fill='%236f8dff' opacity='0.76'%3E}%3C/text%3E%3Ctext x='147' y='233' font-size='10' fill='%236f8dff' opacity='0.37'%3E{%3C/text%3E%3Ctext x='178' y='208' font-size='14' fill='%236f8dff' opacity='0.97'%3E?%3C/text%3E%3Ctext x='193' y='217' font-size='13' fill='%23a9d8ff' opacity='0.67'%3E0%3C/text%3E%3Ctext x='210' y='229' font-size='14' fill='%23a9d8ff' opacity='0.76'%3E;%3C/text%3E%3Ctext x='244' y='213' font-size='12' fill='%236f8dff' opacity='0.47'%3E0%3C/text%3E%3Ctext x='16' y='236' font-size='9' fill='%236f8dff' opacity='0.28'%3E1%3C/text%3E%3Ctext x='51' y='249' font-size='12' fill='%236f8dff' opacity='0.72'%3E0%3C/text%3E%3Ctext x='84' y='257' font-size='13' fill='%236f8dff' opacity='0.5'%3E1%3C/text%3E%3Ctext x='143' y='244' font-size='11' fill='%23a9d8ff' opacity='0.28'%3E*%3C/text%3E%3Ctext x='172' y='246' font-size='13' fill='%236f8dff' opacity='0.69'%3E&amp;%3C/text%3E%3Ctext x='194' y='251' font-size='9' fill='%236f8dff' opacity='1'%3E;%3C/text%3E%3Ctext x='209' y='243' font-size='12' fill='%23a9d8ff' opacity='0.48'%3E1%3C/text%3E%3Ctext x='60' y='272' font-size='13' fill='%236f8dff' opacity='0.55'%3E0%3C/text%3E%3Ctext x='107' y='277' font-size='13' fill='%23a9d8ff' opacity='0.33'%3E&gt;%3C/text%3E%3Ctext x='145' y='279' font-size='14' fill='%23a9d8ff' opacity='0.43'%3E1%3C/text%3E%3Ctext x='181' y='262' font-size='10' fill='%23a9d8ff' opacity='0.23'%3E$%3C/text%3E%3Ctext x='205' y='282' font-size='9' fill='%236f8dff' opacity='0.5'%3E}%3C/text%3E%3Ctext x='235' y='281' font-size='11' fill='%23a9d8ff' opacity='0.45'%3E}%3C/text%3E%3Ctext x='4' y='309' font-size='13' fill='%23a9d8ff' opacity='0.67'%3E*%3C/text%3E%3Ctext x='54' y='292' font-size='12' fill='%236f8dff' opacity='0.92'%3E~%3C/text%3E%3Ctext x='94' y='290' font-size='10' fill='%23a9d8ff' opacity='0.72'%3E0%3C/text%3E%3Ctext x='146' y='299' font-size='13' fill='%236f8dff' opacity='0.82'%3E&lt;%3C/text%3E%3Ctext x='189' y='297' font-size='12' fill='%236f8dff' opacity='0.95'%3E0%3C/text%3E%3Ctext x='233' y='309' font-size='9' fill='%236f8dff' opacity='0.35'%3E&amp;%3C/text%3E%3Ctext x='38' y='313' font-size='14' fill='%23a9d8ff' opacity='0.24'%3E1%3C/text%3E%3Ctext x='71' y='313' font-size='9' fill='%236f8dff' opacity='0.97'%3E0%3C/text%3E%3Ctext x='106' y='313' font-size='11' fill='%236f8dff' opacity='0.64'%3E&amp;%3C/text%3E%3Ctext x='220' y='331' font-size='14' fill='%236f8dff' opacity='0.68'%3E;%3C/text%3E%3Ctext x='33' y='354' font-size='13' fill='%236f8dff' opacity='0.99'%3E0%3C/text%3E%3Ctext x='69' y='360' font-size='12' fill='%236f8dff' opacity='0.58'%3E$%3C/text%3E%3Ctext x='84' y='340' font-size='13' fill='%23a9d8ff' opacity='0.52'%3E1%3C/text%3E%3Ctext x='105' y='355' font-size='11' fill='%236f8dff' opacity='0.6'%3E0%3C/text%3E%3Ctext x='258' y='338' font-size='13' fill='%236f8dff' opacity='0.87'%3E1%3C/text%3E%3Ctext x='62' y='377' font-size='14' fill='%23a9d8ff' opacity='0.78'%3E1%3C/text%3E%3Ctext x='154' y='371' font-size='13' fill='%236f8dff' opacity='0.38'%3E;%3C/text%3E%3Ctext x='167' y='376' font-size='11' fill='%236f8dff' opacity='0.53'%3E&lt;%3C/text%3E%3Ctext x='183' y='384' font-size='13' fill='%236f8dff' opacity='0.58'%3E*%3C/text%3E%3Ctext x='233' y='373' font-size='10' fill='%236f8dff' opacity='0.3'%3E0%3C/text%3E%3Ctext x='240' y='377' font-size='14' fill='%236f8dff' opacity='0.97'%3E0%3C/text%3E%3Ctext x='86' y='407' font-size='12' fill='%23a9d8ff' opacity='0.38'%3E^%3C/text%3E%3Ctext x='111' y='413' font-size='14' fill='%236f8dff' opacity='0.89'%3E&amp;%3C/text%3E%3Ctext x='138' y='412' font-size='14' fill='%23a9d8ff' opacity='0.96'%3E1%3C/text%3E%3Ctext x='213' y='395' font-size='11' fill='%236f8dff' opacity='0.87'%3E0%3C/text%3E%3Ctext x='251' y='414' font-size='9' fill='%236f8dff' opacity='0.89'%3E1%3C/text%3E%3Ctext x='5' y='425' font-size='13' fill='%236f8dff' opacity='0.2'%3E1%3C/text%3E%3Ctext x='48' y='424' font-size='12' fill='%236f8dff' opacity='0.97'%3E1%3C/text%3E%3Ctext x='56' y='422' font-size='14' fill='%23a9d8ff' opacity='0.71'%3E/%3C/text%3E%3Ctext x='78' y='432' font-size='13' fill='%236f8dff' opacity='0.39'%3E?%3C/text%3E%3Ctext x='136' y='429' font-size='11' fill='%23a9d8ff' opacity='0.43'%3E/%3C/text%3E%3Ctext x='162' y='437' font-size='14' fill='%236f8dff' opacity='0.99'%3E&lt;%3C/text%3E%3Ctext x='203' y='438' font-size='10' fill='%236f8dff' opacity='0.63'%3E~%3C/text%3E%3Ctext x='217' y='421' font-size='14' fill='%236f8dff' opacity='0.25'%3E}%3C/text%3E%3Ctext x='253' y='436' font-size='13' fill='%23a9d8ff' opacity='0.49'%3E0%3C/text%3E%3Ctext x='42' y='450' font-size='12' fill='%23a9d8ff' opacity='0.75'%3E0%3C/text%3E%3Ctext x='61' y='466' font-size='9' fill='%23a9d8ff' opacity='0.43'%3E0%3C/text%3E%3Ctext x='170' y='448' font-size='9' fill='%236f8dff' opacity='0.43'%3E?%3C/text%3E%3Ctext x='200' y='464' font-size='9' fill='%236f8dff' opacity='0.25'%3E;%3C/text%3E%3Ctext x='6' y='474' font-size='12' fill='%23a9d8ff' opacity='0.88'%3E$%3C/text%3E%3Ctext x='49' y='490' font-size='12' fill='%236f8dff' opacity='0.96'%3E&lt;%3C/text%3E%3Ctext x='71' y='477' font-size='10' fill='%236f8dff' opacity='0.69'%3E1%3C/text%3E%3Ctext x='132' y='474' font-size='11' fill='%236f8dff' opacity='0.79'%3E0%3C/text%3E%3Ctext x='230' y='477' font-size='14' fill='%236f8dff' opacity='0.83'%3E=%3C/text%3E%3Ctext x='14' y='519' font-size='10' fill='%23a9d8ff' opacity='0.88'%3E0%3C/text%3E%3Ctext x='50' y='513' font-size='9' fill='%23a9d8ff' opacity='0.38'%3E0%3C/text%3E%3Ctext x='67' y='517' font-size='12' fill='%236f8dff' opacity='0.51'%3E0%3C/text%3E%3Ctext x='146' y='518' font-size='13' fill='%236f8dff' opacity='0.79'%3E1%3C/text%3E%3Ctext x='167' y='509' font-size='9' fill='%236f8dff' opacity='0.63'%3E$%3C/text%3E%3Ctext x='199' y='515' font-size='13' fill='%236f8dff' opacity='0.47'%3E0%3C/text%3E%3Ctext x='233' y='502' font-size='13' fill='%236f8dff' opacity='0.32'%3E0%3C/text%3E%3C/g%3E%3C/svg%3E"); --dc-rain-h: 520px; }
/* =====================================================================
   DIGITAL SURFACE
   ---------------------------------------------------------------------
   Every panel on the site is treated as a pane of smoked glass sitting in
   front of a running machine: a translucent body, a hairline lit edge,
   faint code raining down behind the content, HUD ticks in the corners,
   and a light bar that sweeps across when you touch it.

   It is built entirely here in CSS on ::before / ::after, so no markup or
   copy had to change to get it, and it falls back to the previous flat
   panels anywhere the effects are unsupported.

   Three rules keep it professional rather than gaudy:
     1. the rain sits at very low opacity and always behind the text,
     2. nothing moves on its own except the rain, so a page at rest is calm,
     3. all of it stops for prefers-reduced-motion (bottom of file).
   ===================================================================== */

:root {
  --dc-edge: rgba(120, 160, 255, 0.22);
  --dc-edge-hot: rgba(140, 190, 255, 0.6);
  --dc-glass-1: rgba(22, 27, 44, 0.72);
  --dc-glass-2: rgba(12, 15, 26, 0.82);
  --dc-corner: rgba(130, 175, 255, 0.55);
}

/* The shared panel look, applied by listing the existing component classes
   rather than adding a new one to every element in the HTML. */
.service-row,
.tier-card,
.form-card,
.portal-card,
.project-card,
.oyp-card,
.oyp-split-col,
.oyp-who,
.portfolio-card,
.dashboard-section,
.health-panel,
.chat-thread,
.chat-sidebar,
.api-key-card,
.cart-summary,
.coming-soon-panel,
.subscription-panel {
  position: relative;
  isolation: isolate;
  background: linear-gradient(160deg, var(--dc-glass-1) 0%, var(--dc-glass-2) 100%);
  border: 1px solid var(--dc-edge);
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  box-shadow:
    0 1px 0 rgba(190, 220, 255, 0.09) inset,
    0 -1px 0 rgba(0, 0, 0, 0.4) inset,
    0 14px 38px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

/* Corner ticks. Eight thin gradient slivers pinned to the four corners,
   drawn on ::after so ::before stays free for the rain. */
.service-row::after,
.tier-card::after,
.form-card::after,
.portal-card::after,
.project-card::after,
.oyp-card::after,
.oyp-split-col::after,
.oyp-who::after,
.portfolio-card::after,
.dashboard-section::after,
.health-panel::after,
.chat-thread::after,
.api-key-card::after,
.cart-summary::after,
.coming-soon-panel::after,
.subscription-panel::after {
  content: "";
  position: absolute;
  inset: 7px;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(var(--dc-corner), var(--dc-corner)) left top / 1px 13px no-repeat,
    linear-gradient(var(--dc-corner), var(--dc-corner)) left top / 13px 1px no-repeat,
    linear-gradient(var(--dc-corner), var(--dc-corner)) right top / 1px 13px no-repeat,
    linear-gradient(var(--dc-corner), var(--dc-corner)) right top / 13px 1px no-repeat,
    linear-gradient(var(--dc-corner), var(--dc-corner)) left bottom / 1px 13px no-repeat,
    linear-gradient(var(--dc-corner), var(--dc-corner)) left bottom / 13px 1px no-repeat,
    linear-gradient(var(--dc-corner), var(--dc-corner)) right bottom / 1px 13px no-repeat,
    linear-gradient(var(--dc-corner), var(--dc-corner)) right bottom / 13px 1px no-repeat;
  opacity: 0.4;
  transition: opacity 0.3s ease;
}
.service-row:hover::after,
.tier-card:hover::after,
.portal-card:hover::after,
.project-card:hover::after,
.oyp-card:hover::after,
.portfolio-card:hover::after,
.health-panel:hover::after { opacity: 1; }

/* The rain. One shared texture scrolling behind the content, masked out at
   the top and bottom so it never collides with a heading or a button. */
.service-row::before,
.tier-card::before,
.form-card::before,
.portal-card::before,
.project-card::before,
.oyp-card::before,
.oyp-split-col::before,
.oyp-who::before,
.portfolio-card::before,
.dashboard-section::before,
.health-panel::before,
.chat-thread::before,
.api-key-card::before,
.cart-summary::before,
.coming-soon-panel::before,
.subscription-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--dc-rain);
  background-repeat: repeat;
  background-size: 260px var(--dc-rain-h);
  opacity: 0.42;
  animation: dcRain 26s linear infinite;
  /* Two masks intersected: the first fades the rain out at the top and
     bottom edges, the second punches a soft hole through the middle. The
     result is code running down the sides of the glass while the area the
     copy actually occupies stays completely clear — which is what lets the
     effect be bold enough to read as code without ever fighting the text. */
  -webkit-mask-image:
    linear-gradient(180deg, transparent, #000 18%, #000 78%, transparent),
    radial-gradient(ellipse 62% 58% at 50% 52%, transparent 35%, #000 78%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, transparent, #000 18%, #000 78%, transparent),
    radial-gradient(ellipse 62% 58% at 50% 52%, transparent 35%, #000 78%);
  mask-composite: intersect;
}
@keyframes dcRain {
  from { background-position: 0 0; }
  to   { background-position: 0 var(--dc-rain-h); }
}

/* Stagger, so a grid of cards never rains in lockstep. */
.oyp-card:nth-of-type(3n+1)::before,
.tier-card:nth-of-type(3n+1)::before,
.service-row:nth-of-type(3n+1)::before { animation-duration: 31s; animation-delay: -7s; }
.oyp-card:nth-of-type(3n+2)::before,
.tier-card:nth-of-type(3n+2)::before,
.service-row:nth-of-type(3n+2)::before { animation-duration: 22s; animation-delay: -14s; }

/* Content sits above the rain. */
.service-row > *,
.tier-card > *,
.form-card > *,
.portal-card > *,
.project-card > *,
.oyp-card > *,
.oyp-split-col > *,
.oyp-who > *,
.portfolio-card > *,
.dashboard-section > *,
.health-panel > *,
.chat-thread > *,
.api-key-card > *,
.cart-summary > *,
.coming-soon-panel > *,
.subscription-panel > * {
  position: relative;
  z-index: 1;
}

/* Touching a panel lifts the edge and brings the rain up a little. */
.service-row:hover,
.tier-card:hover,
.portal-card:hover,
.oyp-card:hover,
.portfolio-card:hover,
.project-card:hover {
  border-color: var(--dc-edge-hot);
  box-shadow:
    0 1px 0 rgba(200, 230, 255, 0.16) inset,
    0 -1px 0 rgba(0, 0, 0, 0.45) inset,
    0 20px 46px rgba(0, 0, 0, 0.5),
    0 0 34px rgba(109, 78, 232, 0.28);
}
.service-row:hover::before,
.tier-card:hover::before,
.portal-card:hover::before,
.oyp-card:hover::before,
.portfolio-card:hover::before,
.project-card:hover::before { opacity: 0.62; }

/* Panels that are mostly dense text (forms, dashboards, chat) get a
   quieter pour than the marketing cards — the same effect at card strength
   would make a long form tiring to read. */
.form-card::before,
.dashboard-section::before,
.chat-thread::before,
.api-key-card::before,
.cart-summary::before,
.oyp-split-col::before,
.subscription-panel::before { opacity: 0.22; }

/* --- Inputs: make every field feel like a live terminal line --- */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group textarea,
.form-group select,
.portal-login-form input,
.domain-input,
.chat-input,
#clientReviewText {
  background: linear-gradient(180deg, rgba(10, 14, 24, 0.9), rgba(16, 20, 34, 0.9));
  border: 1px solid var(--dc-edge);
  border-left: 2px solid rgba(109, 78, 232, 0.5);
  border-radius: 8px;
  color: var(--text);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) inset;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.form-group input::placeholder,
.form-group textarea::placeholder,
.portal-login-form input::placeholder,
.domain-input::placeholder,
.chat-input::placeholder,
#clientReviewText::placeholder {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.86em;
  color: rgba(160, 180, 220, 0.45);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus,
.portal-login-form input:focus,
.domain-input:focus,
.chat-input:focus,
#clientReviewText:focus {
  outline: none;
  border-color: var(--dc-edge-hot);
  border-left-color: var(--blue);
  background: linear-gradient(180deg, rgba(12, 18, 32, 0.95), rgba(20, 26, 44, 0.95));
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.35) inset,
    0 0 0 3px rgba(109, 78, 232, 0.16),
    0 0 22px rgba(46, 159, 230, 0.22);
}

/* Field labels read as machine labels. */
.form-group > label,
.form-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(175, 195, 235, 0.85);
}

input[type="checkbox"],
input[type="radio"] { accent-color: var(--purple); }

/* --- Buttons and tabs: glass, with a light sweep on hover --- */
.btn-primary,
.quick-link-tab,
.tier-purchase-btn {
  position: relative;
  overflow: hidden;
}
.btn-primary::after,
.quick-link-tab::after,
.tier-purchase-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.26) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 0.55s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
.btn-primary:hover::after,
.quick-link-tab:hover::after,
.tier-purchase-btn:hover::after { transform: translateX(120%); }

.quick-link-tab {
  background: linear-gradient(160deg, rgba(24, 30, 50, 0.75), rgba(12, 16, 28, 0.85));
  border-color: var(--dc-edge);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.quick-link-tab:hover { border-color: var(--dc-edge-hot); }

.eyebrow {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.18em;
}

/* --- Readout tiles --- */
.stat-tile,
.perf-tile,
.health-tile {
  border-radius: 12px;
  border: 1px solid var(--dc-edge);
  background: linear-gradient(160deg, rgba(20, 25, 42, 0.8), rgba(11, 14, 25, 0.88));
}
.stat-tile-value,
.perf-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: -0.01em;
}

/* --- Service cards, the ones that most needed lifting --- */
.service-row { border-radius: 18px; }
.service-row .service-cta {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.service-row .service-divider {
  background: linear-gradient(90deg, transparent, var(--dc-edge-hot), transparent);
  height: 1px;
}

.chat-message-meta {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.03em;
}

/* Anything carrying its own artwork keeps it above the rain. */
.service-row .service-photo,
.service-row .service-media,
.portfolio-card-image { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .service-row::before,
  .tier-card::before,
  .form-card::before,
  .portal-card::before,
  .project-card::before,
  .oyp-card::before,
  .oyp-split-col::before,
  .oyp-who::before,
  .portfolio-card::before,
  .dashboard-section::before,
  .health-panel::before,
  .chat-thread::before,
  .api-key-card::before,
  .cart-summary::before,
  .coming-soon-panel::before,
  .subscription-panel::before { animation: none; }
  .btn-primary::after,
  .quick-link-tab::after,
  .tier-purchase-btn::after { transition: none; }
}

/* ---------------------------------------------------------------------
   Fixes found once the glass went on
   ------------------------------------------------------------------ */

/* Tier cards nest a .tier-card-inner that carries its own solid background,
   which sat on top of the glass and hid it completely — and because the
   inner runs a few pixels past its parent, the outer's overflow:hidden was
   shaving the bottom off the Add to Cart button. So the inner is the real
   visual box: it gets the glass, and the outer steps back to being pure
   layout with nothing to clip against. */
.tier-card {
  background: none;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
}
.tier-card::before,
.tier-card::after { content: none; }

.tier-card-inner {
  position: relative;
  isolation: isolate;
  background: linear-gradient(160deg, var(--dc-glass-1) 0%, var(--dc-glass-2) 100%);
  border: 1px solid var(--dc-edge);
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  box-shadow:
    0 1px 0 rgba(190, 220, 255, 0.09) inset,
    0 -1px 0 rgba(0, 0, 0, 0.4) inset,
    0 14px 38px rgba(0, 0, 0, 0.4);
  /* Room for the Add to Cart button to breathe inside the rounded corner. */
  padding-bottom: 24px;
}
.tier-card-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image: var(--dc-rain);
  background-repeat: repeat;
  background-size: 260px var(--dc-rain-h);
  opacity: 0.34;
  animation: dcRain 26s linear infinite;
  -webkit-mask-image:
    linear-gradient(180deg, transparent, #000 18%, #000 78%, transparent),
    radial-gradient(ellipse 62% 58% at 50% 52%, transparent 35%, #000 78%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, transparent, #000 18%, #000 78%, transparent),
    radial-gradient(ellipse 62% 58% at 50% 52%, transparent 35%, #000 78%);
  mask-composite: intersect;
}
.tier-card-inner > * { position: relative; z-index: 1; }
.tier-card:hover .tier-card-inner { border-color: var(--dc-edge-hot); }
.tier-card:hover .tier-card-inner::before { opacity: 0.5; }

/* Nothing anywhere should be able to clip a purchase button. */
.tier-purchase-btn { position: relative; z-index: 2; }

/* No rain behind anything you type into. A field of drifting glyphs sitting
   under a caret is genuinely distracting to read against while filling in a
   form, and these panels are all work surfaces rather than shop windows. */
.form-card::before,
.portal-card::before,
.chat-thread::before,
.api-key-card::before,
.add-dev-form::before,
.domain-form::before { content: none; }

/* Belt and braces: any panel that turns out to contain a field loses it too,
   in case a form lands somewhere not listed above. */
.oyp-card:has(input)::before,
.project-card:has(input)::before,
.project-card:has(textarea)::before,
.dashboard-section:has(input)::before,
.dashboard-section:has(textarea)::before,
.subscription-panel:has(input)::before { content: none; }

/* Inner blocks that used to paint a solid --bg slab: on a flat card that was
   invisible, but on glass it reads as a grey box pasted over the panel. Made
   translucent so the glass and its rain carry through, with a hairline edge
   doing the separating instead of a fill. */
.billing-toggle,
.project-note,
.project-contact,
.project-review,
.client-brief,
.rank-bar-track,
.chat-message.theirs .chat-message-bubble {
  background: rgba(8, 11, 20, 0.5);
  border: 1px solid rgba(120, 160, 255, 0.14);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.project-tag {
  background: rgba(8, 11, 20, 0.55);
  border: 1px solid rgba(120, 160, 255, 0.18);
}

/* Keep the toggle centred on its panel rather than hugging the left edge. */
.billing-toggle {
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   SEO & ONLINE GROWTH — marketing page
   Headline numbers, what we do, and the team behind it.
   ============================================================ */

.seo-section {
  position: relative;
  padding: 78px 0 88px;
  border-top: 1px solid rgba(185, 194, 204, 0.12);
}
.seo-section .eyebrow,
.seo-section .section-title { text-align: center; }
.seo-section .section-sub {
  max-width: 760px; margin-left: auto; margin-right: auto; text-align: center;
}

.seo-sub-head {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin: 64px 0 12px;
  text-align: center;
  background: linear-gradient(100deg, #5fd0ff 0%, #4f8ef7 45%, #9a6bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.seo-lede {
  max-width: 720px; margin: 0 auto 30px;
  text-align: center; font-size: 0.95rem; line-height: 1.72;
  color: rgba(230, 236, 244, 0.72);
}

/* ---------------- Headline numbers ---------------- */
.seo-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
  margin-top: 40px;
}
.seo-stat {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 28px 24px 24px;
  border-radius: 18px;
  text-align: center;
  background: linear-gradient(160deg, rgba(24, 30, 44, 0.72), rgba(12, 16, 26, 0.84));
  border: 1px solid rgba(125, 200, 255, 0.16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 22px 46px rgba(0, 0, 0, 0.42);
}
/* the running-code layer the rest of the site uses on its glass */
.seo-stat::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background-image: var(--dc-rain);
  background-size: 260px var(--dc-rain-h);
  opacity: 0.28;
  animation: dcRain 26s linear infinite;
  -webkit-mask-image:
    linear-gradient(180deg, transparent, #000 18%, #000 78%, transparent),
    radial-gradient(ellipse 62% 58% at 50% 52%, transparent 40%, #000 82%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, transparent, #000 18%, #000 78%, transparent),
    radial-gradient(ellipse 62% 58% at 50% 52%, transparent 40%, #000 82%);
  mask-composite: intersect;
  pointer-events: none;
}
.seo-stat > * { position: relative; z-index: 1; }
.seo-stat-value {
  display: block;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: clamp(2.1rem, 5vw, 2.9rem);
  font-weight: 700; line-height: 1;
  background: linear-gradient(100deg, #5fd0ff 0%, #4f8ef7 50%, #9a6bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.seo-stat-label {
  display: block;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(215, 224, 236, 0.72);
  margin: 10px 0 12px;
}
.seo-stat p {
  font-size: 0.86rem; line-height: 1.68;
  color: rgba(228, 234, 243, 0.7);
}

/* ---------------- What we do ---------------- */
.seo-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
}
.seo-card {
  position: relative;
  padding: 28px 26px 24px;
  border-radius: 18px;
  background: linear-gradient(165deg, rgba(18, 24, 38, 0.8), rgba(10, 14, 23, 0.88));
  border: 1px solid rgba(125, 200, 255, 0.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 20px 44px rgba(0, 0, 0, 0.4);
  transition: transform .28s cubic-bezier(.22, 1, .36, 1), border-color .28s ease, box-shadow .28s ease;
}
.seo-card:hover {
  transform: translateY(-5px);
  border-color: rgba(125, 200, 255, 0.4);
  box-shadow: 0 28px 58px rgba(0, 0, 0, 0.5), 0 0 38px rgba(109, 78, 232, 0.2);
}
.seo-card h4 {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 1.12rem; letter-spacing: 0.01em;
  margin-bottom: 10px;
}
.seo-card > p {
  font-size: 0.9rem; line-height: 1.72;
  color: rgba(228, 234, 243, 0.72);
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(185, 194, 204, 0.13);
}

/* ---------------- Tick lists ---------------- */
.seo-check { list-style: none; padding: 0; margin: 0; }
.seo-check li {
  position: relative;
  padding-left: 30px;
  font-size: 0.88rem; line-height: 1.6;
  color: rgba(222, 230, 241, 0.82);
  margin-bottom: 11px;
}
.seo-check li::before {
  content: "";
  position: absolute;
  left: 4px; top: 0.34em;
  width: 12px; height: 7px;
  border-left: 2.5px solid #9a6bff;
  border-bottom: 2.5px solid #9a6bff;
  transform: rotate(-45deg);
  border-radius: 1px;
}
.seo-check b { color: #fff; font-weight: 600; }

.seo-check-team {
  max-width: 860px;
  margin: 0 auto;
  padding: 30px 32px;
  border-radius: 18px;
  background: linear-gradient(165deg, rgba(18, 24, 38, 0.78), rgba(10, 14, 23, 0.86));
  border: 1px solid rgba(125, 200, 255, 0.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 22px 48px rgba(0, 0, 0, 0.42);
}
.seo-check-team li {
  font-size: 0.92rem;
  line-height: 1.66;
  margin-bottom: 15px;
}
.seo-check-team li:last-child { margin-bottom: 0; }

.seo-section .info-cta { margin-top: 56px; }

@media (max-width: 640px) {
  .seo-section { padding: 54px 0 62px; }
  .seo-cards { grid-template-columns: 1fr; }
  .seo-card { padding: 22px 20px 20px; }
  .seo-check-team { padding: 24px 20px; }
  .seo-check li { font-size: 0.85rem; padding-left: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  .seo-stat::before { animation: none; }
  .seo-card:hover { transform: none; }
}

/* ============================================================
   LIVE CHAT WIDGET — visitor side
   Sits above everything on every public page. Deliberately has no
   code-rain layer: it's a form, and rain behind a text field is
   confusing to type over.
   ============================================================ */

.dc-chat {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 900;
  font-family: "Inter", system-ui, sans-serif;
}

/* ---------------- launcher ---------------- */
.dc-chat-launcher {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1px solid rgba(125, 200, 255, 0.35);
  background: linear-gradient(135deg, #6d4ee8, #2e9fe6);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5), 0 0 26px rgba(109, 78, 232, 0.45);
  transition: transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .22s ease;
}
.dc-chat-launcher:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 16px 40px rgba(0,0,0,.55), 0 0 38px rgba(109,78,232,.6); }
.dc-chat-launcher:focus-visible { outline: 2px solid #7df0ff; outline-offset: 3px; }
.dc-chat-launcher svg { width: 27px; height: 27px; transition: opacity .18s ease, transform .18s ease; }
.dc-chat-icon-close { position: absolute; opacity: 0; transform: rotate(-45deg); }
.dc-chat.is-open .dc-chat-icon-open { opacity: 0; transform: rotate(45deg); }
.dc-chat.is-open .dc-chat-icon-close { opacity: 1; transform: none; }

.dc-chat-dot {
  position: absolute; top: 2px; right: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #ff3b5c; border: 2.5px solid #0b0f1a;
  animation: dcChatPing 1.8s ease-in-out infinite;
}
@keyframes dcChatPing { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }

/* ---------------- panel ---------------- */
.dc-chat-panel {
  position: absolute;
  right: 0;
  bottom: 74px;
  /* the site stylesheet gives every <section> 100px of vertical padding */
  padding: 0;
  margin: 0;
  width: min(380px, calc(100vw - 44px));
  height: min(560px, calc(100vh - 130px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(165deg, rgba(19, 25, 40, 0.94), rgba(9, 12, 21, 0.97));
  border: 1px solid rgba(125, 200, 255, 0.22);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.62), 0 0 50px rgba(109, 78, 232, 0.18);
  /* Origin sits on the launcher's centre, so the panel grows out of the
     circle and shrinks back into it rather than sliding around near it.
     29px = half the 58px bubble; 45px clears the 74px bottom offset. */
  transform-origin: calc(100% - 29px) calc(100% + 45px);
  animation: dcChatIn .3s cubic-bezier(.2, 1.08, .32, 1) both;
}
@keyframes dcChatIn {
  from { opacity: 0; transform: scale(.16); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: scale(1); }
}
/* `hidden` alone loses to the display:flex above — without this the panel
   is stuck open on every page load. */
.dc-chat-panel[hidden] { display: none; }
/* Collapses back toward the bubble instead of blinking out. */
.dc-chat-panel.is-closing { animation: dcChatOut .24s cubic-bezier(.5, 0, .75, .2) both; pointer-events: none; }
@keyframes dcChatOut {
  from { opacity: 1; transform: scale(1); }
  40%  { opacity: 1; }
  to   { opacity: 0; transform: scale(.16); }
}

.dc-chat-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 14px 14px 16px;
  border-bottom: 1px solid rgba(125, 200, 255, 0.16);
  background: linear-gradient(120deg, rgba(109, 78, 232, 0.22), rgba(46, 159, 230, 0.12));
}
.dc-chat-head-mark {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(4, 7, 15, 0.6);
  border: 1px solid rgba(125, 200, 255, 0.24);
}
.dc-chat-head-mark img { width: 30px; height: 30px; object-fit: contain; }
.dc-chat-head > div:nth-child(2) { flex: 1; min-width: 0; }
.dc-chat-head strong {
  display: block;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 0.95rem; letter-spacing: 0.01em; color: #fff;
}
.dc-chat-head span {
  display: block; font-size: 0.74rem; margin-top: 1px;
  color: rgba(200, 212, 230, 0.68);
}
.dc-chat-min {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border-radius: 8px; cursor: pointer;
  background: transparent; border: 1px solid transparent;
  color: rgba(210, 222, 240, 0.7);
}
.dc-chat-min:hover { background: rgba(125, 200, 255, 0.12); border-color: rgba(125, 200, 255, 0.24); color: #fff; }
.dc-chat-min svg { width: 18px; height: 18px; }

/* ---------------- log ---------------- */
.dc-chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 16px 15px;
  display: flex; flex-direction: column; gap: 12px;
  scrollbar-width: thin;
}
.dc-chat-log::-webkit-scrollbar { width: 7px; }
.dc-chat-log::-webkit-scrollbar-thumb { background: rgba(125, 200, 255, 0.22); border-radius: 4px; }

.dc-chat-intro {
  padding: 14px 15px;
  border-radius: 13px;
  background: rgba(125, 200, 255, 0.06);
  border: 1px solid rgba(125, 200, 255, 0.15);
}
.dc-chat-intro p { font-size: 0.85rem; line-height: 1.62; color: rgba(226, 234, 245, 0.8); }
.dc-chat-intro p + p { margin-top: 8px; }
.dc-chat-intro strong { color: #fff; }

.dc-msg { display: flex; flex-direction: column; max-width: 84%; animation: dcMsgIn .2s ease both; }
@keyframes dcMsgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.dc-msg-mine { align-self: flex-end; align-items: flex-end; }
.dc-msg-them { align-self: flex-start; align-items: flex-start; }
.dc-msg-bubble {
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 0.875rem; line-height: 1.55;
  white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere;
}
.dc-msg-mine .dc-msg-bubble {
  background: linear-gradient(135deg, #6d4ee8, #2e9fe6);
  color: #fff;
  border-bottom-right-radius: 5px;
}
.dc-msg-them .dc-msg-bubble {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(125, 200, 255, 0.16);
  color: #e8eefa;
  border-bottom-left-radius: 5px;
}
.dc-msg-meta {
  font-size: 0.66rem; margin-top: 4px;
  color: rgba(185, 194, 204, 0.55);
}

/* ---------------- composer ---------------- */
.dc-chat-form {
  padding: 12px 13px 13px;
  border-top: 1px solid rgba(125, 200, 255, 0.16);
  background: rgba(6, 9, 17, 0.5);
}
.dc-chat-identity { margin-bottom: 10px; }
.dc-chat-optional {
  display: block;
  font-size: 0.68rem; line-height: 1.4;
  color: rgba(185, 194, 204, 0.55);
  margin-bottom: 6px;
}
.dc-chat-optional-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* `hidden` alone loses to the display above, so restate it */
.dc-chat-identity[hidden] { display: none; }
.dc-chat-identity input,
.dc-chat-form textarea {
  width: 100%;
  background: rgba(4, 7, 15, 0.85);
  border: 1px solid rgba(125, 200, 255, 0.2);
  border-radius: 10px;
  padding: 10px 12px;
  color: #eaf0ff;
  font-family: inherit;
  font-size: 0.85rem;
}
.dc-chat-identity input::placeholder,
.dc-chat-form textarea::placeholder { color: #63709a; }
.dc-chat-identity input:focus,
.dc-chat-form textarea:focus {
  outline: none;
  border-color: rgba(125, 200, 255, 0.6);
  box-shadow: 0 0 0 3px rgba(125, 200, 255, 0.12);
}

.dc-chat-send-row { display: flex; gap: 8px; align-items: flex-end; }
.dc-chat-form textarea { resize: none; line-height: 1.5; max-height: 120px; }
.dc-chat-send {
  flex: none;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 11px; cursor: pointer; border: none;
  background: linear-gradient(135deg, #6d4ee8, #2e9fe6);
  color: #fff;
  transition: transform .16s ease, box-shadow .16s ease;
}
.dc-chat-send:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(109, 78, 232, 0.5); }
.dc-chat-send svg { width: 19px; height: 19px; }

.dc-chat-note {
  margin-top: 8px;
  font-size: 0.7rem; line-height: 1.5;
  color: rgba(185, 194, 204, 0.55);
}
.dc-chat-note.is-error { color: #ff8fa0; }

@media (max-width: 560px) {
  .dc-chat { right: 14px; bottom: 14px; }
  .dc-chat-launcher { width: 52px; height: 52px; }
  .dc-chat-panel {
    width: calc(100vw - 28px);
    height: min(540px, calc(100vh - 110px));
    bottom: 66px;
    transform-origin: calc(100% - 26px) calc(100% + 40px);
  }
  .dc-chat-optional-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .dc-chat-panel, .dc-chat-panel.is-closing, .dc-msg { animation: none; }
  .dc-chat-dot { animation: none; }
  .dc-chat-launcher:hover { transform: none; }
}

/* ============================================================
   LIVE CHAT — portal side (visitor conversations in the dev chat)
   ============================================================ */

.chat-list-item .chat-visitor-badge {
  display: inline-block;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 0.56rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  margin-left: 6px; vertical-align: middle;
  background: rgba(255, 59, 92, 0.18);
  border: 1px solid rgba(255, 59, 92, 0.45);
  color: #ff8fa0;
}
.chat-list-item .chat-visitor-badge.is-read {
  background: rgba(125, 200, 255, 0.1);
  border-color: rgba(125, 200, 255, 0.28);
  color: #8fd4ff;
}
.chat-visitor-meta {
  display: block;
  font-size: 0.72rem;
  color: rgba(185, 194, 204, 0.6);
  margin-top: 4px;
}
.chat-live-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(46, 210, 130, 0.14);
  border: 1px solid rgba(46, 210, 130, 0.4);
  color: #6ee7a8;
  margin-left: 10px;
}
.chat-live-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #2ed282;
  animation: dcChatPing 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .chat-live-pill::before { animation: none; } }

/* ---------------- Homepage team section ---------------- */
.team-section { position: relative; }
.team-section .section-sub {
  max-width: 760px; margin-left: auto; margin-right: auto;
  text-align: center; margin-bottom: 34px;
}
.team-footnote {
  margin-top: 26px; text-align: center;
  font-size: 0.9rem; color: rgba(185, 194, 204, 0.66);
}

/* ---------------- Deleting visitor conversations ---------------- */
.chat-visitor-row { position: relative; }
.chat-visitor-row .chat-list-item { width: 100%; padding-right: 38px; }
.chat-visitor-delete {
  position: absolute;
  top: 10px; right: 8px;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 7px; cursor: pointer;
  font-size: 1.05rem; line-height: 1;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(185, 194, 204, 0.42);
  opacity: 0;
  transition: opacity .16s ease, color .16s ease, background .16s ease, border-color .16s ease;
}
.chat-visitor-row:hover .chat-visitor-delete,
.chat-visitor-delete:focus-visible { opacity: 1; }
.chat-visitor-delete:hover {
  background: rgba(255, 59, 92, 0.14);
  border-color: rgba(255, 59, 92, 0.45);
  color: #ff8fa0;
}
/* Touch has no hover, so never hide it there. */
@media (hover: none) {
  .chat-visitor-delete { opacity: 1; }
}

.chat-clear-read {
  width: 100%;
  margin-top: 10px;
  font-size: 0.76rem;
}

/* ============================================================
   DISCOUNT CODES — checkout field and the portal panel
   ============================================================ */

/* ---------------- Checkout ---------------- */
.cart-discount {
  padding-top: 16px;
  margin-top: 14px;
  border-top: 1px solid rgba(185, 194, 204, 0.14);
}
.cart-discount-label {
  display: block;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(185, 194, 204, 0.7);
  margin-bottom: 9px;
}
.cart-discount-row { display: flex; gap: 9px; }
.cart-discount-row[hidden] { display: none; }
.cart-discount-row input {
  flex: 1; min-width: 0;
  background: rgba(4, 7, 15, 0.8);
  border: 1px solid rgba(125, 200, 255, 0.2);
  border-radius: 10px;
  padding: 11px 13px;
  color: #eaf0ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cart-discount-row input::placeholder { text-transform: none; letter-spacing: 0; color: #5f6c94; }
.cart-discount-row input:focus {
  outline: none;
  border-color: rgba(125, 200, 255, 0.6);
  box-shadow: 0 0 0 3px rgba(125, 200, 255, 0.12);
}
.cart-discount-row .btn { flex: none; padding: 11px 22px; }

.cart-discount-msg {
  margin-top: 8px;
  font-size: 0.8rem;
  color: rgba(185, 194, 204, 0.7);
}
.cart-discount-msg.is-error { color: #ff8fa0; }

.cart-discount-applied {
  display: flex; align-items: center; gap: 10px;
  margin-top: 4px;
}
.cart-discount-applied[hidden] { display: none; }
.cart-discount-tag {
  flex: 1;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  border-radius: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  color: #8ef0c0;
  background: rgba(46, 210, 130, 0.1);
  border: 1px solid rgba(46, 210, 130, 0.4);
}
.cart-discount-tag::before { content: "✓"; font-weight: 700; }
.cart-discount-remove {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 8px; cursor: pointer;
  font-size: 1.15rem; line-height: 1;
  background: transparent;
  border: 1px solid rgba(185, 194, 204, 0.2);
  color: rgba(185, 194, 204, 0.6);
}
.cart-discount-remove:hover {
  border-color: rgba(255, 59, 92, 0.5);
  color: #ff8fa0;
  background: rgba(255, 59, 92, 0.1);
}

.cart-total-final {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(125, 200, 255, 0.22);
}
.cart-total-final span:last-child {
  background: linear-gradient(100deg, #5fd0ff 0%, #4f8ef7 50%, #9a6bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
}

/* ---------------- Portal panel ---------------- */
.discount-list { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }

.discount-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 15px 18px;
  border-radius: 13px;
  background: rgba(14, 19, 31, 0.72);
  border: 1px solid rgba(185, 194, 204, 0.13);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.discount-main { flex: 1; min-width: 210px; display: flex; flex-direction: column; gap: 3px; }
.discount-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1rem; font-weight: 700; letter-spacing: 0.08em;
  color: #a8dcff;
}
.discount-value { font-size: 0.86rem; color: #e4eaf3; }
.discount-meta { font-size: 0.76rem; color: rgba(185, 194, 204, 0.6); }

.discount-status {
  flex: none;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid transparent;
}
.discount-status.tone-live { background: rgba(46, 210, 130, 0.14); border-color: rgba(46, 210, 130, 0.42); color: #6ee7a8; }
.discount-status.tone-soon { background: rgba(255, 211, 110, 0.14); border-color: rgba(255, 211, 110, 0.45); color: #ffd36e; }
.discount-status.tone-wait { background: rgba(125, 200, 255, 0.12); border-color: rgba(125, 200, 255, 0.36); color: #8fd4ff; }
.discount-status.tone-off  { background: rgba(185, 194, 204, 0.1);  border-color: rgba(185, 194, 204, 0.28); color: rgba(185, 194, 204, 0.72); }

.discount-actions { display: flex; align-items: center; gap: 8px; flex: none; }

@media (max-width: 640px) {
  .discount-row { gap: 10px; padding: 13px 14px; }
  .discount-actions { width: 100%; justify-content: flex-end; }
}

/* ---------------- Editing a developer's rank and permissions ---------------- */
.dev-team-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.dev-team-row.is-editing {
  border-color: rgba(125, 200, 255, 0.45);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.dev-edit-form {
  margin: -1px 0 12px;
  padding: 20px 22px;
  border: 1px solid rgba(125, 200, 255, 0.45);
  border-top: none;
  border-radius: 0 0 13px 13px;
  background: rgba(12, 17, 28, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.dev-edit-form h4 {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 0.95rem;
  margin-bottom: 16px;
  color: #8fd4ff;
}
.dev-edit-actions { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.edit-dev-saved { color: #6ee7a8; }

@media (max-width: 640px) {
  .dev-team-actions { width: 100%; justify-content: flex-end; margin-top: 8px; }
  .dev-edit-form { padding: 16px 14px; }
}

/* Service-area links in the footer — every page points at the location pages
   so they aren't orphans, which is most of why location pages fail to rank. */
.footer-areas {
  margin-top: 8px;
  font-size: 0.82rem;
  color: rgba(185, 194, 204, 0.6);
}
.footer-areas a { color: rgba(143, 212, 255, 0.85); text-decoration: none; }
.footer-areas a:hover { color: #8fd4ff; text-decoration: underline; }