/* NOVEX brand theme: obsidian surfaces with electric violet light. */
:root {
  --primary: #c61cff;
  --primary-rgb: 198, 28, 255;
  --primary-hover: #dd5cff;
  --background: #08060b;
  --surface: rgba(24, 18, 30, 0.78);
  --surface-light: rgba(34, 25, 43, 0.88);
  --card: rgba(22, 16, 28, 0.74);
  --card-border: rgba(221, 118, 255, 0.16);
  --card-hover-border: rgba(231, 155, 255, 0.38);
  --foreground: #fbf8ff;
  --foreground-inv: #100b14;
  --muted: #b8adbf;
  --muted-dim: #897d91;
  --border: rgba(255, 255, 255, 0.09);
  --navbar-bg: rgba(13, 9, 17, 0.76);
  --navbar-border: rgba(231, 155, 255, 0.16);
  --grid-color: rgba(222, 112, 255, 0.045);
  --studio-blue: #d84cff;
  --studio-cyan: #f08cff;
  --studio-ink: #fbf8ff;
  --studio-violet: #9622ce;
  --studio-mint: #d94cff;
  --studio-warm: #f1a2ff;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.045);
  --shadow-lg: 0 30px 90px rgba(0, 0, 0, 0.5), 0 0 45px rgba(198, 28, 255, 0.07);
  --premium-shadow: 0 24px 70px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.055);
  --premium-shadow-hover: 0 32px 90px rgba(0, 0, 0, 0.5), 0 14px 34px rgba(54, 9, 72, 0.28), 0 0 34px rgba(198, 28, 255, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html { color-scheme: dark; }

body,
body:not(.dark-mode) {
  background:
    radial-gradient(circle at 50% -12%, rgba(198, 28, 255, 0.20), transparent 34%),
    radial-gradient(circle at 10% 28%, rgba(92, 18, 132, 0.17), transparent 30%),
    radial-gradient(circle at 92% 22%, rgba(236, 80, 255, 0.10), transparent 28%),
    radial-gradient(circle at 72% 86%, rgba(91, 13, 126, 0.12), transparent 32%),
    linear-gradient(180deg, #08060b 0%, #100a15 46%, #070509 100%) !important;
  color: var(--foreground);
}

body::before {
  background-image:
    linear-gradient(rgba(231, 155, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231, 155, 255, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 50% 35%, rgba(198, 28, 255, 0.055), transparent 45%) !important;
}

body::after {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(208, 61, 255, 0.13), transparent 58%),
    linear-gradient(115deg, rgba(97, 18, 137, 0.14), rgba(198, 28, 255, 0.10), rgba(240, 140, 255, 0.04)) !important;
  opacity: 0.72;
}

.page-glow-bottom {
  background:
    radial-gradient(ellipse at 52% 78%, rgba(192, 35, 244, 0.13), transparent 62%),
    radial-gradient(ellipse at 76% 42%, rgba(240, 140, 255, 0.07), transparent 54%) !important;
}

body:not(.dark-mode) h1,
body:not(.dark-mode) h2,
body:not(.dark-mode) h3,
h1, h2, h3, h4, h5, h6 { color: var(--foreground); }

.hero-sub,
.portfolio-hero p,
.section-header p,
.nav-links a,
.pricing-note { color: var(--muted) !important; }

.navbar,
.navbar.scrolled {
  max-width: 980px !important;
  background: rgba(13, 9, 17, 0.76) !important;
  border-color: rgba(231, 155, 255, 0.16) !important;
  box-shadow: 0 18px 56px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(198, 28, 255, 0.035), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.nav-cta-mobile-btn { display: inline-flex !important; }

.navbar.scrolled { background: rgba(10, 7, 13, 0.9) !important; }

.nav-logo { color: #fff !important; }
.nav-logo img {
  object-fit: contain;
  filter: drop-shadow(0 0 9px rgba(204, 44, 255, 0.32));
}
.nav-logo:hover img { box-shadow: none !important; filter: drop-shadow(0 0 13px rgba(220, 88, 255, 0.5)); }

.nav-links a:hover {
  color: #fff !important;
  background: rgba(198, 28, 255, 0.08) !important;
}
.nav-links a.active {
  color: #f1b7ff !important;
  background: rgba(198, 28, 255, 0.09) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 5px 20px rgba(74, 5, 100, 0.18) !important;
}
.nav-links a::after {
  background: linear-gradient(90deg, #8e13c7, #ee68ff) !important;
  box-shadow: 0 2px 10px rgba(214, 64, 255, 0.48);
}

.glass,
.service-card,
.advantage-card,
.step-card,
.pricing-card,
.addon-card,
.faq-item,
.specialty-card,
.tool-card,
.process-step,
.rules-outro,
.rule-card,
.values-banner,
.about-stats-bar,
.portfolio-video-card,
.portfolio-image-card,
.contact-form,
.contact-info-card {
  background: linear-gradient(145deg, rgba(30, 22, 38, 0.88), rgba(15, 11, 19, 0.76)) !important;
  border-color: rgba(231, 155, 255, 0.14) !important;
  box-shadow: var(--premium-shadow) !important;
}

.glass::after,
.service-card::after,
.advantage-card::after,
.pricing-card::after,
.specialty-card::after,
.tool-card::after,
.rule-card::after {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.07), transparent 42%) !important;
}

.glass:hover,
.glass-hover:hover,
.service-card:hover,
.advantage-card:hover,
.pricing-card:hover,
.addon-card:hover,
.faq-item:hover,
.specialty-card:hover,
.tool-card:hover,
.rule-card:hover {
  border-color: rgba(231, 155, 255, 0.34) !important;
  box-shadow: var(--premium-shadow-hover) !important;
}

.label,
.portfolio-kicker,
.portfolio-section-label,
.skill-pill {
  color: #e9a6ff !important;
  background: rgba(198, 28, 255, 0.09) !important;
  border-color: rgba(221, 98, 255, 0.2) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 24px rgba(0, 0, 0, 0.16) !important;
}

.btn-primary,
.pricing-badge {
  color: #fff !important;
  background: linear-gradient(180deg, #d53cff 0%, #8e10c6 100%) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 14px 34px rgba(128, 13, 172, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}
.btn-primary:hover { background: linear-gradient(180deg, #e567ff 0%, #aa19e5 100%) !important; }
.btn-outline {
  color: #f7effa !important;
  background: rgba(255, 255, 255, 0.055) !important;
  border-color: rgba(255, 255, 255, 0.13) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 30px rgba(0, 0, 0, 0.2) !important;
}
.btn-outline:hover { background: rgba(198, 28, 255, 0.1) !important; border-color: rgba(225, 111, 255, 0.28) !important; }

.stats-bar,
.showcase-stats {
  background: rgba(20, 14, 25, 0.7) !important;
  border-color: rgba(231, 155, 255, 0.13) !important;
  box-shadow: var(--premium-shadow) !important;
}
.stat-num,
.about-stat-num { color: #f2c1ff !important; }

.service-card .icon,
.advantage-card .icon,
.pricing-card-icon {
  color: #e887ff !important;
  background: linear-gradient(145deg, rgba(216, 76, 255, 0.15), rgba(255, 255, 255, 0.035)) !important;
  border-color: rgba(231, 155, 255, 0.16) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 28px rgba(0, 0, 0, 0.24) !important;
}

.hero-title-gradient {
  background: linear-gradient(135deg, #fff 5%, #deb8ea 48%, #fff 94%) !important;
  background-size: 180% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.hero-title-bold {
  background: linear-gradient(112deg, #7e0dae 0%, #cb24ff 30%, #f19aff 52%, #ce27ff 72%, #68078c 100%) !important;
  background-size: 220% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.36) !important;
}

.hero-avatar-wrap { filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.35)); }
.avatar-front {
  background: radial-gradient(circle at 42% 34%, rgba(226, 102, 255, 0.14), rgba(10, 7, 13, 0.9) 70%) !important;
  border-color: rgba(231, 155, 255, 0.24) !important;
}
.hero-avatar { object-fit: contain !important; filter: drop-shadow(0 0 15px rgba(202, 44, 255, 0.24)); }
.hero-ring { border-color: rgba(220, 92, 255, 0.42) !important; border-right-color: transparent !important; }

.about-avatar-card {
  padding: 8px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(216, 76, 255, 0.22), rgba(12, 8, 15, 0.92)) !important;
  border: 1px solid rgba(237, 167, 255, 0.24) !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5), 0 0 55px rgba(198, 28, 255, 0.11) !important;
}
.about-avatar-card img {
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: calc(var(--radius-xl) - 7px);
}

.portfolio-shell,
.folder-stage { border-color: rgba(231, 155, 255, 0.12) !important; }
.portfolio-tab,
.portfolio-back {
  background: rgba(26, 19, 33, 0.78) !important;
  border-color: rgba(231, 155, 255, 0.14) !important;
  color: var(--foreground) !important;
}
.portfolio-tab:hover,
.portfolio-back:hover { background: rgba(198, 28, 255, 0.1) !important; }
.folder-shadow { background: radial-gradient(ellipse, rgba(0, 0, 0, 0.5), transparent 67%) !important; }

input,
textarea,
select {
  color: var(--foreground) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  border-color: rgba(231, 155, 255, 0.16) !important;
}
input::placeholder,
textarea::placeholder { color: var(--muted-dim) !important; }
input:focus,
textarea:focus,
select:focus { border-color: rgba(216, 76, 255, 0.58) !important; box-shadow: 0 0 0 3px rgba(198, 28, 255, 0.1) !important; }

.sky-layer { opacity: 0.12 !important; filter: grayscale(0.35) saturate(0.7) hue-rotate(246deg); }
.sky-cloud .cloud-body,
.sky-cloud .cloud-body::before,
.sky-cloud .cloud-body::after,
.sky-cloud .cloud-puff { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18) !important; }

::-webkit-scrollbar-track { background: #08060b; }
::-webkit-scrollbar-thumb { background: rgba(210, 67, 255, 0.42); }
::selection { color: #fff; background: rgba(198, 28, 255, 0.42); }

.form-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

@media (max-width: 768px) {
  .navbar,
  .navbar.scrolled {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    transform: none !important;
    animation: none !important;
  }

  .nav-links { background: rgba(12, 8, 15, 0.96) !important; border-color: rgba(231, 155, 255, 0.14) !important; }
}

@media (max-width: 360px) {
  .nav-logo { gap: 0; padding-right: 0; }
  .nav-logo span { display: none; }
}