/* Serviyou Technologies — Component patterns (v4.0 — dark premium)
 *
 * Buttons, form inputs, cards, alerts, and premium-tier sv-* patterns
 * for the dark navy/electric-blue marketing site. Existing v3 classes
 * (.btn-primary, .card, .badge) remap to dark-mode equivalents so any
 * page that still uses them renders correctly on the new dark BG.
 */

/* ─── Buttons ─────────────────────────────────────────────────── */

.btn,
.btn-primary,
.btn-secondary,
.btn-tertiary,
.btn-destructive {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-target-min);
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast),
              color var(--transition-fast),
              box-shadow var(--transition-fast),
              transform var(--transition-fast),
              border-color var(--transition-fast);
  user-select: none;
}

.btn-primary {
  background-color: var(--color-accent-hover);
  color: #ffffff;
  border-color: var(--color-accent-hover);
}
.btn-primary:hover {
  background-color: #1d4ed8;
  border-color: #1d4ed8;
  box-shadow: var(--shadow-glow-md);
}
.btn-primary:active { transform: scale(0.98); }
.btn-primary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.btn svg,
.btn-primary svg,
.btn-secondary svg,
.btn-tertiary svg,
.sv-card-link svg {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}
.btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-light);
}
.btn-secondary:active,
.btn-tertiary:active,
.btn-destructive:active { transform: scale(0.98); }

.btn-tertiary {
  background: transparent;
  color: var(--color-accent-light);
  border: none;
  padding: var(--space-2) var(--space-3);
  min-height: auto;
}
.btn-tertiary:hover { color: var(--color-accent-primary); text-decoration: underline; }

.btn-destructive {
  background-color: var(--color-error);
  color: #ffffff;
  border-color: var(--color-error);
}
.btn-destructive:hover { background-color: #b91c1c; border-color: #b91c1c; }

.btn[disabled],
.btn-primary[disabled],
.btn-secondary[disabled],
.btn-destructive[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-loading {
  position: relative;
  color: transparent !important;
}
.btn-loading::after {
  content: "";
  position: absolute;
  width: 1rem; height: 1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  color: #ffffff;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Form inputs (dark mode) ────────────────────────────────── */

.input, .textarea, .select {
  display: block;
  width: 100%;
  min-height: var(--tap-target-min);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: var(--focus-ring);
}
.input.has-error, .textarea.has-error, .select.has-error {
  border-color: var(--color-error);
}
.input::placeholder, .textarea::placeholder {
  color: var(--color-text-muted);
}

.field-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}
.field-help {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.field-error {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-error);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.checkbox-custom, .radio-custom {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  min-height: var(--tap-target-min);
  color: var(--color-text-secondary);
}
.checkbox-custom input, .radio-custom input {
  width: 24px; height: 24px;
  min-height: 24px;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: var(--color-accent-primary);
}
.checkbox-custom input:focus-visible,
.radio-custom input:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* ─── Cards (dark mode) ──────────────────────────────────────── */

.card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  transition: box-shadow var(--transition-normal),
              border-color var(--transition-normal),
              transform var(--transition-normal);
}
.card:hover {
  border-color: var(--color-border-accent);
  box-shadow: var(--shadow-glow-sm);
}
.card-elevated {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-glow-md);
}

/* ─── Alerts / banners (dark mode) ───────────────────────────── */

.alert {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-accent-primary);
  background: var(--color-bg-elevated);
  color: var(--color-text-secondary);
}
.alert-success { border-left-color: var(--color-success); background: rgba(16, 185, 129, 0.08); }
.alert-warning { border-left-color: var(--color-warning); background: rgba(245, 158, 11, 0.08); }
.alert-error   { border-left-color: var(--color-error);   background: rgba(239, 68, 68, 0.08); }

/* ─── Badges / chips ─────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-full);
  background: var(--color-bg-elevated);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}
.badge-success { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; border-color: transparent; }
.badge-warning { background: rgba(245, 158, 11, 0.15); color: #fcd34d; border-color: transparent; }
.badge-error   { background: rgba(239, 68, 68, 0.15);  color: #fca5a5; border-color: transparent; }
.badge-primary { background: rgba(59, 130, 246, 0.15); color: var(--color-accent-light); border-color: transparent; }
.badge-accent  { background: rgba(59, 130, 246, 0.15); color: var(--color-accent-light); border-color: transparent; }

/* ─── Sticky banner top ──────────────────────────────────────── */

.sticky-banner {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--color-accent-primary);
  color: #ffffff;
  text-align: center;
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
}

/* ════════════════════════════════════════════════════════════════
 * sv-* — Premium dark-tier marketing patterns (v4)
 * ════════════════════════════════════════════════════════════════ */

/* ─── Header ─────────────────────────────────────────────────── */

.sv-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--header-h);
  background: rgba(4, 8, 20, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}
.sv-header-inner {
  height: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
@media (max-width: 767px) {
  .sv-header { height: var(--header-h-mobile); }
  .sv-header-inner {
    padding-inline: var(--space-4);
    gap: var(--space-3);
  }
  .sv-logo-mark { width: 34px; height: 34px; }
  .sv-logo-text strong { font-size: var(--font-size-sm); }
  .sv-logo-text small { font-size: 8px; }
}
.sv-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-text-primary);
  flex-shrink: 0;
}
.sv-logo:hover { color: var(--color-text-primary); }
.sv-logo-mark {
  width: 44px; height: 44px;
  filter: drop-shadow(0 0 14px rgba(59, 130, 246, 0.48));
}
.sv-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.sv-logo-text strong {
  font-size: 1.05rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-widest);
  color: var(--color-text-primary);
}
.sv-logo-text small {
  margin-top: 2px;
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-widest);
  color: var(--color-text-muted);
}

.sv-nav {
  display: none;
  align-items: center;
  gap: 2px;
  margin-inline: auto;
}
@media (min-width: 1024px) { .sv-nav { display: inline-flex; } }
.sv-nav-link {
  position: relative;
  padding: var(--space-2) var(--space-3);
  font-size: 0.78rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast);
}
.sv-nav-item {
  position: relative;
}
.sv-nav-trigger {
  background: transparent;
  border: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sv-nav-link:hover { color: var(--color-text-primary); }
.sv-nav-link[aria-current="page"] {
  color: var(--color-text-primary);
}
.sv-nav-link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -4px;
  width: 4px; height: 4px;
  background: var(--color-accent-primary);
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 8px var(--color-accent-primary);
}
.sv-nav-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  min-width: 240px;
  padding: var(--space-3);
  background: var(--color-bg-overlay);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card), var(--shadow-glow-sm);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transform: translate(-50%, 8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast),
              visibility var(--transition-fast);
}
.sv-nav-item:hover .sv-nav-dropdown,
.sv-nav-item:focus-within .sv-nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.sv-nav-dropdown-link {
  display: block;
  padding: var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  border-radius: var(--radius-md);
}
.sv-nav-dropdown-link:hover {
  color: var(--color-text-primary);
  background: rgba(59, 130, 246, 0.10);
}
.sv-cta-header {
  margin-left: auto;
  display: none;
}
@media (min-width: 1024px) { .sv-cta-header { display: inline-flex; margin-left: 0; } }
.sv-cta-header .btn-primary {
  min-height: 38px;
  padding: 0 var(--space-4) !important;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
}

.sv-hamburger {
  width: 48px; height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  cursor: pointer;
}
@media (min-width: 1024px) { .sv-hamburger { display: none; } }

/* ─── Mobile menu overlay ────────────────────────────────────── */

.sv-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--color-bg-primary);
  display: flex;
  flex-direction: column;
}
.sv-mobile-menu[hidden] { display: none; }
.sv-mobile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding-inline: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}
@media (max-width: 767px) {
  .sv-mobile-head { height: var(--header-h-mobile); padding-inline: var(--space-4); }
}
.sv-mobile-nav {
  flex: 1;
  padding: var(--space-4) var(--space-6);
  overflow-y: auto;
}
.sv-mobile-nav-link {
  display: flex;
  align-items: center;
  height: 64px;
  padding-inline: var(--space-4);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
}
.sv-mobile-sub-link {
  height: 54px;
  padding-left: var(--space-8);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}
.sv-mobile-foot {
  padding: var(--space-6);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.sv-mobile-contact-note {
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  text-decoration: none;
}

/* ─── Hero ───────────────────────────────────────────────────── */

.sv-hero {
  position: relative;
  min-height: clamp(560px, calc(100vh - var(--header-h)), 620px);
  display: flex;
  align-items: flex-start;
  padding: var(--space-14) 0 var(--space-4);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(2, 5, 16, 0.99) 0%, rgba(4, 10, 27, 0.96) 38%, rgba(6, 18, 42, 0.90) 100%),
    var(--color-bg-primary);
}
@media (max-width: 767px) {
  .sv-hero {
    min-height: clamp(620px, calc(100svh - var(--header-h-mobile)), 760px);
    padding: var(--space-12) 0;
  }
}
.sv-hero .sv-reveal {
  opacity: 1;
  transform: none;
}
.sv-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 52% 82% at 78% 10%, rgba(59, 130, 246, 0.32), transparent 58%),
    radial-gradient(ellipse 42% 50% at 100% 65%, rgba(96, 165, 250, 0.18), transparent 54%),
    linear-gradient(90deg, rgba(1, 4, 12, 0.88) 0%, rgba(1, 4, 12, 0.62) 36%, rgba(1, 4, 12, 0.08) 76%);
  pointer-events: none;
  z-index: 0;
}
.sv-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to bottom, transparent 0%, rgba(10,14,39,0.12) 50%, rgba(2,5,17,0.80) 100%),
    linear-gradient(rgba(59,130,246,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,0.025) 1px, transparent 1px);
  background-size: auto, 60px 60px, 60px 60px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}
.sv-hero-city {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.42;
  mix-blend-mode: screen;
}
.sv-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--space-6);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}
@media (max-width: 520px) {
  .sv-hero-inner,
  .sv-stats-inner,
  .sv-tech-inner,
  .sv-section-inner,
  .sv-footer-inner,
  .sv-footer-bottom {
    width: auto;
    padding-inline: 0;
    margin-inline: var(--space-4);
  }
}
@media (min-width: 1024px) {
  .sv-hero-inner {
    grid-template-columns: minmax(570px, 0.9fr) minmax(640px, 1.1fr);
    gap: var(--space-6);
  }
}
.sv-pre-headline {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
  color: var(--color-accent-primary);
  margin-bottom: var(--space-4);
}
.sv-hero-text,
.sv-hero-visual {
  min-width: 0;
}
.sv-hero-text {
  position: relative;
  z-index: 3;
}
.sv-headline {
  font-size: clamp(var(--font-size-3xl), 4.8vw, 3.95rem);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0;
  color: var(--color-text-primary);
  text-wrap: balance;
  margin: 0;
}
@media (min-width: 1280px) {
  .sv-headline { font-size: 3.95rem; }
  .sv-headline-line { white-space: nowrap; }
}
.sv-headline-line { display: block; }
.sv-headline .accent { color: var(--color-accent-primary); }
@media (max-width: 520px) {
  .sv-headline { font-size: var(--font-size-3xl); }
  .sv-headline-line:last-child {
    max-width: 9ch;
  }
}
.sv-sub {
  margin-top: var(--space-5);
  width: min(540px, calc(100vw - 4rem));
  max-width: 100%;
  font-size: 1.06rem;
  line-height: var(--line-height-normal);
  color: var(--color-text-secondary);
  overflow-wrap: break-word;
}
.sv-cta-row {
  margin-top: var(--space-7, 1.75rem);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  width: min(100%, calc(100vw - 4rem));
}
.sv-hero .btn-primary,
.sv-hero .btn-secondary {
  min-height: 54px;
  padding: 0 var(--space-6);
}
@media (max-width: 520px) {
  .sv-hero-text,
  .sv-sub {
    width: 100%;
    max-width: min(327px, calc(100vw - 3rem)) !important;
  }
  .sv-cta-row {
    width: 100%;
    max-width: 311px !important;
  }
  .sv-cta-row > .btn-primary,
  .sv-cta-row > .btn-secondary {
    width: 100%;
    max-width: 311px !important;
  }
}

/* ─── Hero visual (reference laptop + globe artwork) ───────────── */

.sv-hero-visual {
  position: relative;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
  isolation: isolate;
}
@media (min-width: 1024px) {
  .sv-hero-visual {
    margin-top: calc(var(--space-10) * -1);
  }
}
.sv-hero-visual::before {
  content: "";
  position: absolute;
  inset: 4% -18% -4% -18%;
  background:
    radial-gradient(ellipse 64% 46% at 62% 46%, rgba(59, 130, 246, 0.28), transparent 72%),
    radial-gradient(ellipse 70% 28% at 50% 100%, rgba(59, 130, 246, 0.22), transparent 70%);
  filter: blur(12px);
  z-index: -1;
}
.sv-hero-media {
  position: relative;
  width: min(116%, 790px);
  aspect-ratio: 544 / 320;
  margin-left: -2%;
  border-radius: 0;
  overflow: visible;
  filter: drop-shadow(0 34px 42px rgba(0, 0, 0, 0.76));
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 100%);
}
.sv-hero-media::before,
.sv-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.sv-hero-media::before {
  background:
    radial-gradient(ellipse 46% 42% at 72% 48%, rgba(59,130,246,0.20), transparent 72%),
    linear-gradient(90deg, rgba(2,5,16,0.46) 0%, transparent 34%, transparent 100%);
  mix-blend-mode: screen;
}
.sv-hero-media::after {
  background:
    linear-gradient(90deg, rgba(2,5,16,0.55) 0%, transparent 24%, transparent 78%, rgba(2,5,16,0.10) 100%),
    linear-gradient(180deg, rgba(2,5,16,0.70) 0%, rgba(2,5,16,0.10) 16%, transparent 44%, rgba(2,5,16,0.32) 100%);
}
.sv-hero-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}
.sv-hero-visual > svg {
  width: 124%;
  height: 124%;
  transform: translateX(2%) translateY(-1%);
  filter: drop-shadow(0 32px 44px rgba(0, 0, 0, 0.72));
}
.sv-hero-widget {
  position: absolute;
  right: -1%;
  bottom: 4%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: rgba(8, 12, 31, 0.94);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), var(--shadow-glow-sm);
  min-width: 310px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
@media (max-width: 520px) {
  .sv-hero-media {
    width: 118%;
    margin-left: -9%;
  }
  .sv-hero-widget {
    left: var(--space-3);
    right: var(--space-3);
    bottom: var(--space-3);
    min-width: 0;
  }
  .sv-hero-visual {
    overflow: hidden;
  }
}
.sv-hero-widget-body { flex: 1; }
.sv-hero-widget-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: 1.3;
}
.sv-hero-widget-sub {
  margin-top: 2px;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.sv-hero-widget-status {
  margin-top: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-xs);
  color: var(--color-success);
}
.sv-hero-widget-status::before {
  content: "";
  width: 8px; height: 8px;
  background: var(--color-success);
  border-radius: 50%;
  animation: sv-pulse 2s ease-in-out infinite;
}
@keyframes sv-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.2); }
}
.sv-hero-widget-ring {
  width: 56px; height: 56px;
  flex-shrink: 0;
}

/* ─── Stats bar ──────────────────────────────────────────────── */

.sv-stats {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background:
    linear-gradient(90deg, rgba(4, 13, 31, 0.96), rgba(8, 24, 55, 0.76), rgba(4, 13, 31, 0.96));
}
.sv-stats-inner {
  max-width: 1280px;
  margin-inline: auto;
  padding: var(--space-5) var(--space-6);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
}
@media (min-width: 768px) { .sv-stats-inner { grid-template-columns: repeat(4, 1fr); } }
.sv-stat {
  display: flex;
  flex-direction: row;
  gap: var(--space-3);
  align-items: center;
}
.sv-stats .sv-reveal {
  opacity: 1;
  transform: none;
}
.sv-stat-icon {
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent-primary);
  background: transparent;
  border-radius: var(--radius-md);
}
.sv-stat-number {
  font-size: 1.45rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
  line-height: 1;
}
@media (max-width: 767px) {
  .sv-stat {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
}
.sv-stat-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ─── Tech strip ─────────────────────────────────────────────── */

.sv-tech {
  border-bottom: 1px solid var(--color-border);
  background:
    linear-gradient(90deg, rgba(6, 18, 43, 0.86), rgba(10, 22, 50, 0.78), rgba(5, 14, 33, 0.88));
}
.sv-tech-inner {
  max-width: 1280px;
  margin-inline: auto;
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
@media (min-width: 1024px) {
  .sv-tech-inner { flex-direction: row; align-items: center; gap: var(--space-12); }
}
.sv-tech-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  flex-shrink: 0;
  line-height: 1.3;
}
.sv-tech-list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-16);
  overflow-x: auto;
  padding-bottom: var(--space-1);
  color: #c7d2e6;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  scrollbar-width: thin;
}
.sv-tech-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  opacity: 1;
  white-space: nowrap;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}
.sv-tech-item:hover {
  opacity: 1;
  color: var(--color-accent-light);
}
.sv-tech-icon { width: 24px; height: 24px; flex-shrink: 0; }
.sv-tech-mark {
  position: relative;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: rgba(226, 232, 240, 0.84);
  border: 1px solid rgba(226, 232, 240, 0.30);
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 28%, rgba(96,165,250,0.28), transparent 42%),
    rgba(255,255,255,0.03);
}
.sv-tech-mark::before {
  font-size: 0.58rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0;
}
.sv-tech-mark-atom {
  border-color: transparent;
  background: transparent;
}
.sv-tech-mark-atom::before,
.sv-tech-mark-atom::after {
  content: "";
  position: absolute;
  inset: 6px 2px;
  border: 1.5px solid rgba(226,232,240,0.86);
  border-radius: 50%;
  transform: rotate(28deg);
}
.sv-tech-mark-atom::after {
  transform: rotate(-28deg);
}
.sv-tech-mark-next::before { content: "N"; }
.sv-tech-mark-tw::before { content: "TW"; }
.sv-tech-mark-cf::before { content: "CF"; }
.sv-tech-mark-stripe::before { content: "S"; }
.sv-tech-mark-ai::before { content: "AI"; }
.sv-tech-mark-claude::before { content: "C"; }
.sv-tech-mark-pg::before { content: "PG"; }
@media (min-width: 1024px) {
  .sv-tech-list {
    flex: 1;
    justify-content: space-between;
    gap: var(--space-5);
    overflow: hidden;
    font-size: 0.92rem;
  }
}

/* ─── Section header ─────────────────────────────────────────── */

.sv-section {
  padding: var(--space-14) 0;
  position: relative;
}
.sv-section-inner {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--space-6);
}
#main-content > .sv-section:first-child:not(.sv-hero) {
  overflow: hidden;
  background:
    radial-gradient(ellipse 44% 70% at 76% 0%, rgba(59, 130, 246, 0.18), transparent 62%),
    radial-gradient(ellipse 70% 50% at 0% 100%, rgba(14, 37, 88, 0.34), transparent 62%),
    linear-gradient(180deg, rgba(10, 14, 39, 0.98), rgba(5, 9, 24, 0.96));
  border-bottom: 1px solid var(--color-border);
}
#main-content > .sv-section:first-child:not(.sv-hero)::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(59,130,246,0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,0.026) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 72%);
}
#main-content > .sv-section:first-child:not(.sv-hero) > .sv-section-inner {
  position: relative;
  z-index: 1;
}
.sv-section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-bottom: var(--space-9);
}
@media (min-width: 1024px) {
  .sv-section-head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}
.sv-section-eyebrow {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
  color: var(--color-accent-primary);
  margin-bottom: var(--space-3);
}
.sv-section-title {
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0;
  color: var(--color-text-primary);
  margin: 0;
  text-wrap: balance;
  max-width: 28ch;
}
@media (min-width: 1024px) {
  .sv-section-title { font-size: 2.25rem; }
}
.sv-section-lede {
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-secondary);
  max-width: 56ch;
}
.sv-section-action {
  flex-shrink: 0;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .sv-section-action { width: 100%; }
}

/* ─── Service / industry cards ───────────────────────────────── */

.sv-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 640px)  { .sv-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sv-cards-5 { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1024px) { .sv-cards-3 { grid-template-columns: repeat(3, 1fr); } }

.sv-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 100% 80% at 20% 0%, rgba(59, 130, 246, 0.12), transparent 58%),
    linear-gradient(145deg, rgba(15, 28, 63, 0.92), rgba(8, 14, 35, 0.96));
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  overflow: hidden;
  transition: border-color var(--transition-normal),
              box-shadow var(--transition-normal),
              transform var(--transition-normal);
}
.sv-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.10) 0%, transparent 26%),
    radial-gradient(ellipse 70% 46% at 100% 0%, rgba(59,130,246,0.16), transparent 62%);
  opacity: 0.45;
}
.sv-card > * {
  position: relative;
  z-index: 1;
}
.sv-card:hover {
  border-color: var(--color-border-accent);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34), var(--shadow-glow-md);
  transform: translateY(-4px);
}
@media (hover: none) {
  .sv-card:hover {
    transform: none;
    box-shadow: none;
  }
}
.sv-card-icon {
  width: 56px; height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent-light);
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(96, 165, 250, 0.16);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glow-sm);
  margin-bottom: var(--space-5);
}
.sv-card:hover .sv-card-icon {
  color: #fff;
  background: rgba(59, 130, 246, 0.22);
  border-color: rgba(96, 165, 250, 0.44);
}
.sv-card-icon svg {
  width: 30px;
  height: 30px;
}
.sv-card-title {
  font-size: 1.12rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: var(--line-height-snug);
  margin: 0 0 var(--space-3);
}
.sv-card-body {
  flex: 1;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-text-secondary);
}
.sv-card-link {
  margin-top: var(--space-5);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-accent-primary);
  text-decoration: none;
  transition: gap var(--transition-fast), color var(--transition-fast);
}
.sv-card-link:hover { gap: var(--space-3); color: var(--color-accent-light); }
@media (min-width: 1024px) {
  .sv-cards-5 .sv-card {
    min-height: 300px;
  }
  .sv-cards-5 .sv-card-body,
  .sv-cards-3 .sv-card-body {
    font-size: 0.84rem;
    line-height: 1.55;
  }
}

/* Industry card variant with image-area header */
.sv-icard-visual {
  height: 214px;
  margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-5);
  background: #050816;
  border-bottom: 1px solid var(--color-border);
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent-light);
  overflow: hidden;
  position: relative;
}
.sv-media-card {
  padding-bottom: var(--space-7);
}
.sv-media-card .sv-card-title {
  font-size: 1.18rem;
}
.sv-icard-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(3, 7, 19, 0) 0%, rgba(3, 7, 19, 0.06) 62%, rgba(3, 7, 19, 0.18) 100%),
    radial-gradient(ellipse 72% 78% at 50% 18%, transparent 48%, rgba(3, 7, 19, 0.12) 100%);
  z-index: 1;
  pointer-events: none;
}
.sv-icard-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(96, 165, 250, 0.16);
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
  box-shadow: inset 0 0 44px rgba(59, 130, 246, 0.12);
  z-index: 2;
  pointer-events: none;
}
.sv-icard-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: brightness(1.2) contrast(1.08) saturate(1.08);
  transform: scale(1.015);
}
.sv-icard-subtitle {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent-light);
  margin: 0 0 var(--space-3);
}

/* ─── Process steps ──────────────────────────────────────────── */

.sv-process {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  position: relative;
}
@media (min-width: 1024px) {
  .sv-process { grid-template-columns: repeat(5, 1fr); gap: var(--space-5); position: relative; }
  .sv-process::before {
    content: "";
    position: absolute;
    top: 20px; left: 8%; right: 8%; height: 1px;
    background: repeating-linear-gradient(
      90deg,
      var(--color-border-strong) 0 6px,
      transparent 6px 12px
    );
    z-index: 0;
  }
}
@media (max-width: 1023px) {
  .sv-process::before {
    content: "";
    position: absolute;
    top: 30px;
    bottom: 30px;
    left: 30px;
    width: 1px;
    background: repeating-linear-gradient(
      180deg,
      var(--color-border-strong) 0 6px,
      transparent 6px 12px
    );
  }
}
.sv-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 var(--space-2);
}
@media (max-width: 1023px) {
  .sv-step {
    align-items: flex-start;
    text-align: left;
    padding-left: 88px;
    min-height: 96px;
  }
  .sv-step-num {
    position: absolute;
    left: 0;
    top: 0;
  }
}
.sv-step-num {
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-accent-primary);
  background: var(--color-bg-primary);
  border-radius: 50%;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-glow-sm);
  transition: box-shadow 600ms ease, background-color 600ms ease,
              color 600ms ease;
}
.sv-step.is-visible .sv-step-num {
  background: rgba(59, 130, 246, 0.14);
  box-shadow: var(--shadow-glow-md);
}
.sv-step-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: var(--line-height-snug);
  margin: 0 0 var(--space-2);
}
.sv-step-body {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
  max-width: 24ch;
}

/* ─── Footer ─────────────────────────────────────────────────── */

.sv-footer {
  background:
    radial-gradient(ellipse 40% 80% at 0% 20%, rgba(59, 130, 246, 0.08), transparent 70%),
    var(--color-bg-secondary);
  border-top: 1px solid var(--color-border);
  padding: var(--space-12) 0 var(--space-6);
  margin-top: 0;
}
.sv-footer-inner {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--space-6);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
}
@media (min-width: 768px) {
  .sv-footer-inner { grid-template-columns: 2fr 1fr 1fr 1fr; }
}
@media (min-width: 1280px) {
  .sv-footer-inner { grid-template-columns: 2fr 1fr 1fr 1fr 1.4fr; }
}
.sv-footer-col-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: var(--letter-spacing-wider);
  margin: 0 0 var(--space-4);
}
.sv-footer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.sv-footer-list a {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.sv-footer-list a:hover { color: var(--color-accent-light); }
.sv-footer-blurb {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
  max-width: 40ch;
}
.sv-footer-socials {
  margin-top: var(--space-6);
  display: flex;
  gap: var(--space-3);
}
.sv-footer-social {
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.sv-footer-social:hover {
  border-color: var(--color-accent-primary);
  color: var(--color-accent-light);
}
.sv-footer-contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.sv-footer-contact a { color: var(--color-text-secondary); text-decoration: none; }
.sv-footer-contact a:hover { color: var(--color-accent-light); }
.sv-footer-bottom {
  max-width: var(--container-xl);
  margin-inline: auto;
  margin-top: var(--space-12);
  padding: var(--space-6) var(--space-6) 0;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
@media (min-width: 768px) {
  .sv-footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}
.sv-footer-bottom a { color: var(--color-text-muted); text-decoration: none; }
.sv-footer-bottom a:hover { color: var(--color-accent-light); }

/* ─── Pricing tiers ──────────────────────────────────────────── */

.sv-pricing {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-12);
}
@media (min-width: 640px)  { .sv-pricing { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sv-pricing { grid-template-columns: repeat(4, 1fr); } }

.sv-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
}
.sv-tier-popular {
  border-color: var(--color-accent-primary);
  box-shadow: var(--shadow-glow-md);
}
.sv-tier-badge {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  background: var(--color-accent-primary);
  color: #ffffff;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.sv-tier-badge-soon {
  background: var(--color-bg-elevated);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-strong);
}
.sv-tier-name {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
}
.sv-tier-price {
  margin-top: var(--space-2);
  font-size: var(--font-size-4xl);
  line-height: 1;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}
.sv-tier-price-suffix {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}
.sv-tier-desc {
  margin-top: var(--space-4);
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
}
.sv-tier-feats {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}
.sv-tier-feats li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
}
.sv-tier-feats li::before {
  content: "✓";
  color: var(--color-accent-primary);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
}
.sv-tier-feats.muted li::before { content: "○"; color: var(--color-text-muted); }

.sv-pricing-panel {
  margin-top: var(--space-16);
  padding: var(--space-10);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}
.sv-table-wrap {
  margin-top: var(--space-8);
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.sv-comparison {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  color: var(--color-text-secondary);
}
.sv-comparison th,
.sv-comparison td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}
.sv-comparison thead th {
  color: var(--color-text-primary);
  background: rgba(59, 130, 246, 0.10);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
}
.sv-comparison tbody th {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}
.sv-comparison tbody td:first-of-type {
  color: var(--color-accent-light);
}
.sv-comparison tr:last-child th,
.sv-comparison tr:last-child td {
  border-bottom: 0;
}
.sv-faq-list {
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.sv-faq-item {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.sv-faq-item summary {
  cursor: pointer;
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}
.sv-faq-item p {
  margin-top: var(--space-3);
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
}

/* ─── Final CTA band ─────────────────────────────────────────── */

.sv-cta-band {
  margin-top: var(--space-16);
  background:
    radial-gradient(ellipse 60% 60% at 50% 0%, rgba(59, 130, 246, 0.20), transparent 60%),
    linear-gradient(135deg, var(--color-bg-elevated), var(--color-bg-secondary));
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-24) var(--space-6);
  text-align: center;
}
.sv-cta-band h2 {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-4);
}
.sv-cta-band p {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  max-width: 56ch;
  margin: 0 auto var(--space-8);
}

/* ─── Scroll reveal (uses IntersectionObserver in JS) ────────── */

.sv-reveal {
  opacity: 1;
  transform: none;
  transition: opacity 600ms ease, transform 600ms ease;
}
.sv-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  animation: skeleton-shimmer 1.4s infinite;
}
@keyframes skeleton-shimmer {
  100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .sv-reveal { opacity: 1; transform: none; transition: none; }
  .skeleton::after { animation: none; }
}