/* ===================================================================
   CSS VARIABLES
   =================================================================== */
:root {
  --clr-bg:           oklch(0.09 0.005 260);
  --clr-fg:           oklch(0.95 0 0);
  --clr-card:         oklch(0.12 0.005 260);
  --clr-primary:      oklch(0.75 0.18 165);
  --clr-primary-fg:   oklch(0.09 0.005 260);
  --clr-secondary:    oklch(0.16 0.005 260);
  --clr-secondary-fg: oklch(0.85 0 0);
  --clr-muted:        oklch(0.16 0.005 260);
  --clr-muted-fg:     oklch(0.55 0 0);
  --clr-border:       oklch(0.22 0.005 260);
  --clr-destructive:  oklch(0.577 0.245 27.325);
  --clr-surface:      oklch(0.13 0.005 260);

  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --r-sm:   0.25rem;
  --r-md:   0.375rem;
  --r-base: 0.5rem;
  --r-xl:   0.75rem;
  --r-2xl:  1rem;
  --r-full: 9999px;

  --glow-sm: 0 0 20px oklch(0.75 0.18 165 / 0.15);
  --glow-md: 0 0 40px oklch(0.75 0.18 165 / 0.2);
  --glow-lg: 0 0 80px oklch(0.75 0.18 165 / 0.25);
}

/* ===================================================================
   RESET & BASE
   =================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--font-sans);
  background-color: var(--clr-bg);
  color: var(--clr-fg);
  line-height: 1.5;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }
::selection {
  background: oklch(0.75 0.18 165 / 0.3);
  color: oklch(0.95 0 0);
}

/* ===================================================================
   KEYFRAMES
   =================================================================== */
@keyframes ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ===================================================================
   UTILITIES
   =================================================================== */
.text-gradient {
  background: linear-gradient(135deg, oklch(0.95 0 0), oklch(0.75 0.18 165));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.font-mono { font-family: var(--font-mono); }
.glass {
  background: oklch(0.13 0.005 260 / 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid oklch(0.25 0.01 260 / 0.3);
}
.glow-sm { box-shadow: var(--glow-sm); }
.glow-md { box-shadow: var(--glow-md); }
.glow-lg { box-shadow: var(--glow-lg); }
.grid-pattern {
  background-image:
    linear-gradient(oklch(0.25 0.005 260 / 0.3) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.25 0.005 260 / 0.3) 1px, transparent 1px);
  background-size: 60px 60px;
}
.animate-ping   { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
.animate-pulse  { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===================================================================
   CONTAINER & SHARED SECTION ELEMENTS
   =================================================================== */
.container {
  width: 100%;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.section-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.section-label__line {
  height: 1px;
  width: 2rem;
  background-color: var(--clr-primary);
  flex-shrink: 0;
}
.section-label__text {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--clr-primary);
  text-transform: uppercase;
  font-family: var(--font-mono);
}
.section-title {
  margin-top: 1.5rem;
  font-size: 1.875rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--clr-fg);
  line-height: 1.15;
}
.section-desc {
  margin-top: 1.25rem;
  font-size: 1rem;
  line-height: 1.625;
  color: var(--clr-muted-fg);
  max-width: 36rem;
  text-wrap: pretty;
}

/* ===================================================================
   BUTTONS
   =================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: var(--r-base);
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  white-space: nowrap;
}
.btn--sm {
  height: 2rem;
  padding: 0 0.75rem;
}
.btn--lg {
  height: 3.5rem;
  padding: 0 2.5rem;
  font-size: 0.875rem;
}
.btn--primary {
  background-color: var(--clr-primary);
  color: var(--clr-primary-fg);
  box-shadow: var(--glow-sm);
}
.btn--primary:hover {
  background-color: oklch(0.72 0.18 165);
  box-shadow: var(--glow-md);
}
.btn--outline {
  background: oklch(0.16 0.005 260 / 0.3);
  border: 1px solid oklch(0.22 0.005 260 / 0.5);
  color: var(--clr-fg);
  backdrop-filter: blur(4px);
}
.btn--outline:hover {
  background: oklch(0.16 0.005 260 / 0.5);
}
.btn--ghost {
  background: transparent;
  color: var(--clr-muted-fg);
}
.btn--ghost:hover {
  color: var(--clr-fg);
  background: oklch(0.16 0.005 260 / 0.3);
}
.btn--secondary {
  background: oklch(0.16 0.005 260 / 0.6);
  color: var(--clr-secondary-fg);
  border: 1px solid oklch(0.22 0.005 260 / 0.3);
}
.btn--secondary:hover {
  background: oklch(0.16 0.005 260 / 0.8);
}
.btn--w-full { width: 100%; }
.btn__icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.btn:hover .btn__icon--arrow {
  transform: translateX(0.25rem);
}

/* ===================================================================
   NAVIGATION
   =================================================================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 1rem 0;
  transition: padding 0.5s ease;
}
.nav--scrolled { padding: 0.5rem 0; }

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--r-xl);
  padding: 0.75rem 1.25rem;
  transition: all 0.5s ease;
}
.nav--scrolled .nav__inner {
  background: oklch(0.13 0.005 260 / 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid oklch(0.25 0.01 260 / 0.3);
  box-shadow: var(--glow-sm);
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.nav__logo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--r-base);
  background-color: var(--clr-primary);
  box-shadow: var(--glow-sm);
  flex-shrink: 0;
}
.nav__logo-text {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    background: linear-gradient(135deg, oklch(0.95 0 0), oklch(0.75 0.18 165));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav__links {
  display: none;
  align-items: center;
  gap: 0.25rem;
}
.nav__link {
  border-radius: var(--r-base);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--clr-muted-fg);
  transition: color 0.2s, background-color 0.2s;
}
.nav__link:hover {
  color: var(--clr-fg);
  background: oklch(0.16 0.005 260 / 0.3);
}

.nav__cta {
  display: none;
  align-items: center;
  gap: 0.75rem;
}

.nav__mobile-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--clr-fg);
}
.nav__icon-close { display: none; }
.nav__mobile-toggle[aria-expanded="true"] .nav__icon-menu { display: none; }
.nav__mobile-toggle[aria-expanded="true"] .nav__icon-close { display: block; }

.nav__mobile-menu {
  position: absolute;
  left: 1rem; right: 1rem;
  top: calc(100% + 0.5rem);
  background: oklch(0.13 0.005 260 / 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid oklch(0.25 0.01 260 / 0.3);
  border-radius: var(--r-xl);
  padding: 1.25rem;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-0.5rem);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  pointer-events: none;
}
.nav__mobile-menu--open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.nav__mobile-links {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.nav__mobile-link {
  border-radius: var(--r-base);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--clr-muted-fg);
  transition: color 0.2s, background-color 0.2s;
  display: block;
}
.nav__mobile-link:hover {
  color: var(--clr-fg);
  background: oklch(0.16 0.005 260 / 0.3);
}
.nav__mobile-cta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.75rem;
  margin-top: 0.5rem;
  border-top: 1px solid oklch(0.22 0.005 260 / 0.3);
}

@media (min-width: 768px) {
  .nav__links   { display: flex; }
  .nav__cta     { display: flex; }
  .nav__mobile-toggle { display: none; }
}

/* ===================================================================
   HERO
   =================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.hero__bg {
  position: absolute;
  inset: 0;
  background: var(--clr-bg);
}
.hero__bg-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 40%, transparent 0%, oklch(0.09 0.005 260) 100%);
    background-image: url(/../images/hero-bg.jpg);
    background-size: cover;
    background-position: center;
    opacity: .1;
}

.hero__bg::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(/../images/XPeng-Tech-Day-2023-robot.jpg);
    background-position: left 26rem center;
    background-size: 1400px;
    background-repeat: no-repeat;
}
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__top-accent {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, oklch(0.75 0.18 165 / 0.6), transparent);
}
.hero__radial-glow {
  position: absolute;
  left: 50%;
  top: 35%;
  transform: translate(-50%, -50%);
  width: 1000px;
  height: 1000px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, oklch(0.75 0.18 165 / 0.06) 0%, transparent 60%);
}
.hero__content {
  position: relative;
  z-index: 10;
  width: 100%;
  padding-top: 8rem;
  padding-bottom: 6rem;
}
.hero__grid {
  display: grid;
  align-items: center;
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: var(--r-full);
  border: 1px solid oklch(0.75 0.18 165 / 0.2);
  background: oklch(0.75 0.18 165 / 0.05);
  padding: 0.5rem 1.25rem;
  backdrop-filter: blur(4px);
}
.hero__badge-dot {
  position: relative;
  display: flex;
  width: 0.5rem;
  height: 0.5rem;
  flex-shrink: 0;
}
.hero__badge-dot-ping {
  position: absolute;
  display: inline-flex;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--clr-primary);
  opacity: 0.75;
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.hero__badge-dot-core {
  position: relative;
  display: inline-flex;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--clr-primary);
}
.hero__badge-text {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: oklch(0.75 0.18 165 / 0.8);
  text-transform: uppercase;
  font-family: var(--font-mono);
}
.hero__title {
  margin-top: 2rem;
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.hero__title-line { display: block; }
.hero__title-line + .hero__title-line { margin-top: 0.5rem; }
.hero__desc {
  margin-top: 2rem;
  max-width: 36rem;
  font-size: 1rem;
  line-height: 1.625;
  color: var(--clr-muted-fg);
  text-wrap: pretty;
}
.hero__actions {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.hero__metrics {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 32rem;
}
.hero__metric {}
.hero__metric-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--clr-fg);
  font-family: var(--font-mono);
  line-height: 1;
}
.hero__metric-value--primary { color: var(--clr-primary); }
.hero__metric-value span { font-size: 1.125rem; }
.hero__metric-label {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.65rem;
  color: var(--clr-muted-fg);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.hero__terminal-col { display: none; }
.hero__terminal-glow {
  position: absolute;
  inset: -1rem;
  border-radius: var(--r-2xl);
  pointer-events: none;
  background: radial-gradient(ellipse at center, oklch(0.75 0.18 165 / 0.08), transparent 70%);
}
.hero__bottom-fade {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 12rem;
  pointer-events: none;
  background: linear-gradient(to top, oklch(0.09 0.005 260), transparent);
}

/* Terminal component */
.terminal {
  position: relative;
  border-radius: var(--r-xl);
  border: 1px solid oklch(0.22 0.005 260 / 0.6);
  background: oklch(0.12 0.005 260 / 0.8);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  overflow: hidden;
  box-shadow: var(--glow-sm);
}
.terminal__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid oklch(0.22 0.005 260 / 0.5);
  padding: 0.75rem 1.25rem;
}
.terminal__dots { display: flex; gap: 0.5rem; }
.terminal__dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
}
.terminal__dot--red    { background: rgba(239, 68, 68, 0.5); }
.terminal__dot--yellow { background: rgba(234, 179, 8, 0.5); }
.terminal__dot--green  { background: oklch(0.75 0.18 165 / 0.5); }
.terminal__path {
  font-size: 0.6875rem;
  color: var(--clr-muted-fg);
}
.terminal__live {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.terminal__live-icon {
  width: 0.75rem;
  height: 0.75rem;
  color: var(--clr-primary);
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.terminal__live-text {
  font-size: 0.625rem;
  color: var(--clr-primary);
  font-family: var(--font-mono);
  font-weight: 700;
}
.terminal__body {
  padding: 1.25rem;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.terminal__line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  opacity: 0;
  transform: translateY(0.25rem);
  animation: fadeInLine 0.5s ease forwards;
}
@keyframes fadeInLine {
  to { opacity: 1; transform: translateY(0); }
}
.terminal__line-prompt { color: oklch(0.75 0.18 165 / 0.6); }
.terminal__line-text   { color: var(--clr-muted-fg); }
.terminal__stats {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid oklch(0.22 0.005 260 / 0.3);
}
.terminal__stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.terminal__stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--r-md);
  background: oklch(0.16 0.005 260 / 0.5);
  padding: 0.5rem 0.75rem;
}
.terminal__stat-label {
  font-size: 0.625rem;
  color: var(--clr-muted-fg);
  font-family: var(--font-mono);
  text-transform: uppercase;
}
.terminal__stat-value {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--clr-fg);
  font-family: var(--font-mono);
}

@media (min-width: 640px) {
  .hero__title { font-size: 3rem; }
  .hero__actions { flex-direction: row; }
  .hero__metric-value { font-size: 1.875rem; }
  .hero__metric-value span { font-size: 1.25rem; }
}
@media (min-width: 768px) {
  .hero__title { font-size: 3.75rem; }
}
@media (min-width: 1024px) {

  .hero__terminal-col { display: block; position: relative; }
  .hero__title { font-size: 4.25rem; }
}

/* ===================================================================
   FEATURES
   =================================================================== */
.features {
  position: relative;
  padding: 7rem 0;
}
.features__bg {
  position: absolute;
  inset: 0;
  background: oklch(0.16 0.005 260 / 0.2);
}
.features__pattern {
  position: absolute;
  inset: 0;
  opacity: 0.3;
}
.features__side-glow {
  position: absolute;
  top: 0; right: 0;
  width: 500px;
  height: 500px;
  pointer-events: none;
  background: radial-gradient(circle at 100% 0%, oklch(0.75 0.18 165 / 0.04), transparent 60%);
}
.features__header { max-width: 48rem; }
.features__grid {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.feature-card {
  position: relative;
  border-radius: var(--r-xl);
  border: 1px solid oklch(0.22 0.005 260 / 0.5);
  background: oklch(0.12 0.005 260 / 0.6);
  backdrop-filter: blur(4px);
  padding: 1.5rem;
  transition: all 0.5s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}
.feature-card:hover {
  transform: translateY(-0.25rem);
  border-color: oklch(0.75 0.18 165 / 0.2);
}
.feature-card--accent {
  border-color: oklch(0.75 0.18 165 / 0.3);
  box-shadow: var(--glow-sm);
}
.feature-card--accent:hover {
  box-shadow: var(--glow-md);
}
.feature-card__top-bar {
  position: absolute;
  top: 0; left: 1rem; right: 1rem;
  height: 2px;
  background: linear-gradient(90deg, transparent, oklch(0.75 0.18 165 / 0.6), transparent);
}
.feature-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.feature-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--r-base);
  border: 1px solid oklch(0.75 0.18 165 / 0.2);
  background: oklch(0.75 0.18 165 / 0.05);
  color: var(--clr-primary);
  transition: background-color 0.3s, border-color 0.3s;
  flex-shrink: 0;
}
.feature-card:hover .feature-card__icon {
  background: oklch(0.75 0.18 165 / 0.1);
  border-color: oklch(0.75 0.18 165 / 0.3);
}
.feature-card__stat { text-align: right; }
.feature-card__stat-value {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--clr-fg);
  font-family: var(--font-mono);
  line-height: 1;
}
.feature-card__stat-label {
  font-size: 0.625rem;
  color: var(--clr-muted-fg);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.125rem;
}
.feature-card__title {
  margin-top: 1.25rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}
.feature-card__desc {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--clr-muted-fg);
}
.feature-card__bottom-line {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, oklch(0.75 0.18 165 / 0), transparent);
  transition: background 0.5s ease;
}
.feature-card:hover .feature-card__bottom-line {
  background: linear-gradient(to right, transparent, oklch(0.75 0.18 165 / 0.3), transparent);
}

@media (min-width: 640px) {
  .features { padding: 9rem 0; }
  .features__grid { grid-template-columns: repeat(2, 1fr); }
  .section-title { font-size: 2.25rem; }
}
@media (min-width: 1024px) {
  .features__grid { grid-template-columns: repeat(3, 1fr); }
  .section-title { font-size: 3rem; }
}

/* ===================================================================
   DASHBOARD
   =================================================================== */
.dashboard {
  position: relative;
  padding: 7rem 0;
  overflow: hidden;
}
.dashboard__bg {
  position: absolute;
  inset: 0;
  background: var(--clr-bg);
  opacity: 0.8;
}
.dashboard__header {
  max-width: 48rem;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dashboard__header .section-label { justify-content: center; }

.browser-mock {
  margin-top: 4rem;
  border-radius: var(--r-2xl);
  border: 1px solid oklch(0.22 0.005 260 / 0.5);
  background: oklch(0.12 0.005 260 / 0.5);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  overflow: hidden;
  box-shadow: var(--glow-lg);
}
.browser-mock__chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid oklch(0.22 0.005 260 / 0.4);
  padding: 0.75rem 1.25rem;
  background: oklch(0.16 0.005 260 / 0.3);
}
.browser-mock__chrome-left { display: flex; align-items: center; gap: 0.75rem; }
.browser-mock__dots { display: flex; gap: 0.375rem; }
.browser-mock__dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
}
.browser-mock__dot--red    { background: #ff5f57; }
.browser-mock__dot--yellow { background: #febc2e; }
.browser-mock__dot--green  { background: #28c840; }
.browser-mock__address {
  margin-left: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--r-md);
  background: oklch(0.16 0.005 260 / 0.6);
  padding: 0.25rem 0.75rem;
}
.browser-mock__address-icon {
  width: 0.75rem;
  height: 0.75rem;
  color: var(--clr-muted-fg);
}
.browser-mock__address-text {
  font-size: 0.6875rem;
  color: var(--clr-muted-fg);
  font-family: var(--font-mono);
}
.browser-mock__live {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.browser-mock__live-icon {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--clr-primary);
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.browser-mock__live-text {
  font-size: 0.625rem;
  color: var(--clr-primary);
  font-family: var(--font-mono);
  font-weight: 700;
}

.browser-mock__body { display: flex; }

/* Dashboard Sidebar */
.db-sidebar {
  display: none;
  flex-direction: column;
  width: 14rem;
  border-right: 1px solid oklch(0.22 0.005 260 / 0.3);
  background: oklch(0.16 0.005 260 / 0.2);
  padding: 1rem;
}
.db-sidebar__logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 2rem;
}
.db-sidebar__logo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--r-base);
  background: var(--clr-primary);
  flex-shrink: 0;
}
.db-sidebar__logo-text {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}
.db-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.db-sidebar__nav-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  border-radius: var(--r-base);
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--clr-muted-fg);
  transition: color 0.2s, background-color 0.2s;
  cursor: default;
}
.db-sidebar__nav-item:hover {
  color: var(--clr-fg);
  background: oklch(0.16 0.005 260 / 0.5);
}
.db-sidebar__nav-item--active {
  background: oklch(0.75 0.18 165 / 0.1);
  color: var(--clr-primary);
}
.db-sidebar__nav-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}
.db-sidebar__balance {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid oklch(0.22 0.005 260 / 0.3);
}
.db-sidebar__balance-card {
  border-radius: var(--r-base);
  background: oklch(0.75 0.18 165 / 0.05);
  border: 1px solid oklch(0.75 0.18 165 / 0.1);
  padding: 0.75rem;
}
.db-sidebar__balance-label {
  font-size: 0.625rem;
  color: var(--clr-muted-fg);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.db-sidebar__balance-value {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--clr-fg);
  font-family: var(--font-mono);
  margin-top: 0.25rem;
}
.db-sidebar__balance-sub {
  font-size: 0.625rem;
  color: var(--clr-muted-fg);
}

/* Dashboard Main */
.db-main { flex: 1; padding: 1.25rem; min-width: 0; }
.db-main__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.db-main__title {
  font-size: 1.125rem;
  font-weight: 700;
}
.db-main__subtitle {
  font-size: 0.75rem;
  color: var(--clr-muted-fg);
  margin-top: 0.125rem;
}
.db-main__top-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.db-main__bell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.db-main__bell-icon {
  width: 1rem;
  height: 1rem;
  color: var(--clr-muted-fg);
}
.db-main__bell-dot {
  position: absolute;
  top: -0.25rem; right: -0.25rem;
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--clr-primary);
}
.db-main__avatar {
  width: 1.75rem; height: 1.75rem;
  border-radius: 50%;
  background: oklch(0.75 0.18 165 / 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.db-main__avatar-text {
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--clr-primary);
  font-family: var(--font-mono);
}

/* Metric cards */
.db-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
.db-metric {
  border-radius: var(--r-base);
  border: 1px solid oklch(0.22 0.005 260 / 0.3);
  background: oklch(0.16 0.005 260 / 0.2);
  padding: 0.75rem;
}
.db-metric__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.db-metric__label {
  font-size: 0.625rem;
  color: var(--clr-muted-fg);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.db-metric__change {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  font-size: 0.625rem;
  font-family: var(--font-mono);
  font-weight: 700;
}
.db-metric__change--up   { color: var(--clr-primary); }
.db-metric__change--down { color: var(--clr-destructive); }
.db-metric__change-icon { width: 0.625rem; height: 0.625rem; }
.db-metric__value {
  margin-top: 0.5rem;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--clr-fg);
  font-family: var(--font-mono);
}

/* Position Chart */
.db-chart {
  margin-top: 1rem;
  border-radius: var(--r-base);
  border: 1px solid oklch(0.22 0.005 260 / 0.3);
  background: oklch(0.16 0.005 260 / 0.2);
  padding: 1rem;
}
.db-chart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.db-chart__title-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.db-chart__title-icon {
  width: 1rem;
  height: 1rem;
  color: var(--clr-primary);
}
.db-chart__title {
  font-size: 0.875rem;
  font-weight: 700;
}
.db-chart__periods {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.db-chart__period {
  font-size: 0.625rem;
  font-family: var(--font-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.5rem;
  border-radius: var(--r-sm);
  color: var(--clr-muted-fg);
  cursor: pointer;
  background: none;
  border: none;
  transition: color 0.2s, background-color 0.2s;
}
.db-chart__period--active {
  background: oklch(0.75 0.18 165 / 0.1);
  color: var(--clr-primary);
}
.db-chart__svg { width: 100%; height: 120px; }
.db-chart__labels {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
}
.db-chart__label {
  font-size: 0.5625rem;
  color: var(--clr-muted-fg);
  font-family: var(--font-mono);
}

/* Projects table */
.db-projects {
  margin-top: 1rem;
  border-radius: var(--r-base);
  border: 1px solid oklch(0.22 0.005 260 / 0.3);
  background: oklch(0.16 0.005 260 / 0.2);
  overflow: hidden;
}
.db-projects__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid oklch(0.22 0.005 260 / 0.2);
}
.db-projects__title {
  font-size: 0.875rem;
  font-weight: 700;
}
.db-projects__all {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.625rem;
  color: var(--clr-primary);
  font-family: var(--font-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  background: none;
  border: none;
}
.db-projects__all:hover { color: oklch(0.72 0.18 165); }
.db-projects__all-icon { width: 0.75rem; height: 0.75rem; }

.db-projects__cols {
  display: none;
  grid-template-columns: 3fr 2fr 2fr 2fr 2fr 1fr;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.625rem;
  color: var(--clr-muted-fg);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid oklch(0.22 0.005 260 / 0.1);
}
.db-project-row {
  display: grid;
  grid-template-columns: 3fr 2fr 2fr 2fr 2fr 1fr;
  gap: 0.5rem;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid oklch(0.22 0.005 260 / 0.1);
  transition: background-color 0.2s;
}
.db-project-row:last-child { border-bottom: none; }
.db-project-row:hover { background: oklch(0.16 0.005 260 / 0.3); }

.db-project-row__domain {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
}
.db-project-row__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--r-md);
  background: oklch(0.75 0.18 165 / 0.1);
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--clr-primary);
  font-family: var(--font-mono);
  flex-shrink: 0;
}
.db-project-row__name {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--clr-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.db-project-row__cell {
  font-size: 0.75rem;
  font-family: var(--font-mono);
  color: var(--clr-muted-fg);
}
.db-project-row__cell--bold {
  font-weight: 700;
  color: var(--clr-fg);
}
.db-project-row__progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.db-project-row__progress-bar {
  flex: 1;
  height: 0.375rem;
  border-radius: var(--r-full);
  background: oklch(0.16 0.005 260 / 0.6);
  overflow: hidden;
}
.db-project-row__progress-fill {
  height: 100%;
  border-radius: var(--r-full);
  background: var(--clr-primary);
  transition: width 1s ease;
}
.db-project-row__progress-label {
  font-size: 0.625rem;
  font-family: var(--font-mono);
  color: var(--clr-muted-fg);
  width: 2rem;
  text-align: right;
}
.db-project-row__sparkline { display: flex; align-items: center; }

@media (min-width: 640px) {
  .db-projects__cols { display: grid; }
  .db-metrics { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
  .dashboard { padding: 9rem 0; }
  .db-sidebar { display: flex; }
}

/* ===================================================================
   HOW IT WORKS
   =================================================================== */
.how-it-works {
  position: relative;
  padding: 7rem 0;
}
.how-it-works__bg {
    position: absolute;
    inset: 0;
    background: oklch(0.16 0.005 260 / 0.15);
    background-image: url(/../images/dashboard-glow.jpg);
    background-size: cover;
    opacity: .1;
}
.how-it-works__center-glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 600px; height: 600px;
  pointer-events: none;
  background: radial-gradient(circle, oklch(0.75 0.18 165 / 0.03), transparent 60%);
}
.how-it-works__header {
  max-width: 48rem;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.how-it-works__header .section-label { justify-content: center; }
.how-it-works__steps {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.step-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-xl);
  border: 1px solid oklch(0.22 0.005 260 / 0.4);
  background: oklch(0.12 0.005 260 / 0.4);
  backdrop-filter: blur(4px);
  padding: 1.5rem;
  height: 100%;
  transition: border-color 0.3s;
}
.step-card:hover { border-color: oklch(0.75 0.18 165 / 0.2); }
.step-card__number {
  position: absolute;
  top: 1rem; right: 1rem;
  font-size: 3rem;
  font-weight: 900;
  color: oklch(0.22 0.005 260 / 0.3);
  font-family: var(--font-mono);
  line-height: 1;
  user-select: none;
}
.step-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--r-xl);
  border: 1px solid oklch(0.75 0.18 165 / 0.2);
  background: oklch(0.75 0.18 165 / 0.05);
  color: var(--clr-primary);
}
.step-card__icon-svg { width: 1.5rem; height: 1.5rem; }
.step-card__title {
  margin-top: 1.25rem;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}
.step-card__desc {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--clr-muted-fg);
  flex: 1;
}
.step-card__detail {
  margin-top: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--r-full);
  background: oklch(0.75 0.18 165 / 0.05);
  border: 1px solid oklch(0.75 0.18 165 / 0.1);
  padding: 0.25rem 0.75rem;
  align-self: flex-start;
}
.step-card__detail-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--clr-primary);
  flex-shrink: 0;
}
.step-card__detail-text {
  font-size: 0.625rem;
  font-weight: 700;
  color: oklch(0.75 0.18 165 / 0.8);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: var(--font-mono);
}

@media (min-width: 768px) {
  .how-it-works__steps { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .how-it-works { padding: 9rem 0; }
  .how-it-works__steps { grid-template-columns: repeat(4, 1fr); }
}

/* ===================================================================
   TRUST
   =================================================================== */
.trust {
  position: relative;
  padding: 7rem 0;
}
.trust__bg {
  position: absolute;
  inset: 0;
  background: oklch(0.16 0.005 260 / 0.25);
}
.trust__pattern {
  position: absolute;
  inset: 0;
  opacity: 0.2;
}
.trust__header {
  max-width: 48rem;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.trust__header .section-label { justify-content: center; }
.trust__stats {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.stat-card {
  border-radius: var(--r-xl);
  border: 1px solid oklch(0.22 0.005 260 / 0.4);
  background: oklch(0.12 0.005 260 / 0.4);
  backdrop-filter: blur(4px);
  padding: 1.5rem;
  text-align: center;
  transition: border-color 0.3s;
}
.stat-card:hover { border-color: oklch(0.75 0.18 165 / 0.2); }
.stat-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--r-xl);
  border: 1px solid oklch(0.75 0.18 165 / 0.15);
  background: oklch(0.75 0.18 165 / 0.05);
  color: var(--clr-primary);
  margin: 0 auto 1rem;
  transition: background-color 0.3s;
}
.stat-card:hover .stat-card__icon {
  background: oklch(0.75 0.18 165 / 0.1);
}
.stat-card__icon-svg { width: 1.25rem; height: 1.25rem; }
.stat-card__value {
  font-size: 1.875rem;
  font-weight: 800;
  color: var(--clr-fg);
  font-family: var(--font-mono);
}
.stat-card__label {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--clr-muted-fg);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.trust__log { margin-top: 4rem; max-width: 56rem; margin-left: auto; margin-right: auto; }

.live-log {
  border-radius: var(--r-xl);
  border: 1px solid oklch(0.22 0.005 260 / 0.5);
  background: oklch(0.12 0.005 260 / 0.6);
  backdrop-filter: blur(4px);
  overflow: hidden;
}
.live-log__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid oklch(0.22 0.005 260 / 0.3);
  padding: 0.75rem 1.25rem;
  background: oklch(0.16 0.005 260 / 0.2);
}
.live-log__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--clr-primary);
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.live-log__title {
  font-size: 0.75rem;
  color: var(--clr-muted-fg);
  font-family: var(--font-mono);
  font-weight: 700;
}
.live-log__feed {
  margin-left: auto;
  font-size: 0.625rem;
  color: var(--clr-muted-fg);
  font-family: var(--font-mono);
}
.live-log__body {
  padding: 1rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.live-log__entry {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--r-sm);
  transition: background-color 0.3s;
}
.live-log__entry--active { background: oklch(0.75 0.18 165 / 0.05); }
.live-log__time {
  color: oklch(0.55 0 0 / 0.6);
  width: 4rem;
  flex-shrink: 0;
}
.live-log__action {
  width: 3rem;
  flex-shrink: 0;
  font-weight: 700;
}
.live-log__action--click { color: var(--clr-primary); }
.live-log__action--surf  { color: oklch(0.65 0.15 165); }
.live-log__action--visit { color: oklch(0.55 0 0 / 0.6); }
.live-log__target {
  color: oklch(0.95 0 0 / 0.8);
  width: 9rem;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-log__query {
  color: oklch(0.55 0 0 / 0.5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  display: none;
}
.live-log__region {
  color: oklch(0.55 0 0 / 0.4);
  width: 2rem;
  flex-shrink: 0;
  display: none;
}
.live-log__status {
  color: var(--clr-primary);
  font-weight: 700;
  margin-left: auto;
  width: 1.5rem;
  flex-shrink: 0;
}
.live-log__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid oklch(0.22 0.005 260 / 0.2);
  padding: 0.5rem 1.25rem;
  background: oklch(0.16 0.005 260 / 0.1);
}
.live-log__footer-left {
  font-size: 0.625rem;
  color: var(--clr-muted-fg);
  font-family: var(--font-mono);
}
.live-log__footer-right {
  font-size: 0.625rem;
  color: var(--clr-primary);
  font-family: var(--font-mono);
  font-weight: 700;
}

@media (min-width: 640px) {
  .trust__stats { grid-template-columns: repeat(2, 1fr); }
  .live-log__query  { display: block; }
  .live-log__region { display: block; }
}
@media (min-width: 1024px) {
  .trust { padding: 9rem 0; }
  .trust__stats { grid-template-columns: repeat(3, 1fr); }
  .stat-card__value { font-size: 2.25rem; }
}

/* ===================================================================
   PRICING
   =================================================================== */
.pricing {
  position: relative;
  padding: 7rem 0;
}
.pricing__center-glow {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 800px; height: 800px;
  pointer-events: none;
  background: radial-gradient(circle, oklch(0.75 0.18 165 / 0.04), transparent 60%);
}
.pricing__header {
  max-width: 48rem;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pricing__header .section-label { justify-content: center; }
.pricing__cards {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}

.pricing-card {
  position: relative;
  border-radius: var(--r-2xl);
  border: 1px solid oklch(0.22 0.005 260 / 0.4);
  background: oklch(0.12 0.005 260 / 0.4);
  backdrop-filter: blur(4px);
  padding: 2rem;
  transition: all 0.7s ease;
  overflow: visible;
}
.pricing-card--featured {
  border-color: oklch(0.75 0.18 165 / 0.4);
  background: oklch(0.12 0.005 260 / 0.7);
  backdrop-filter: blur(24px);
  box-shadow: var(--glow-md);
}
.pricing-card__top-bar {
  position: absolute;
  top: 0; left: 1.5rem; right: 1.5rem;
  height: 2px;
  background: linear-gradient(90deg, transparent, oklch(0.75 0.18 165 / 0.6), transparent);
}
.pricing-card__badge {
  position: absolute;
  top: -0.875rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--r-full);
  background: var(--clr-primary);
  padding: 0.375rem 1rem;
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--clr-primary-fg);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  white-space: nowrap;
}
.pricing-card__badge-icon { width: 0.75rem; height: 0.75rem; }
.pricing-card__name {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}
.pricing-card__desc {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--clr-muted-fg);
}
.pricing-card__price {
  margin-top: 1.75rem;
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}
.pricing-card__amount {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--clr-fg);
  font-family: var(--font-mono);
  letter-spacing: -0.025em;
}
.pricing-card__period {
  font-size: 0.875rem;
  color: var(--clr-muted-fg);
  font-family: var(--font-mono);
}
.pricing-card__divider {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid oklch(0.22 0.005 260 / 0.2);
}
.pricing-card__features {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.pricing-card__feature {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.pricing-card__check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--r-md);
  background: oklch(0.75 0.18 165 / 0.1);
  flex-shrink: 0;
  margin-top: 0.125rem;
}
.pricing-card__check-icon { width: 0.75rem; height: 0.75rem; color: var(--clr-primary); }
.pricing-card__feature-text {
  font-size: 0.875rem;
  color: var(--clr-muted-fg);
  line-height: 1.4;
}

@media (min-width: 768px) {
  .pricing { padding: 9rem 0; }
  .pricing__cards { grid-template-columns: repeat(3, 1fr); }
}

/* ===================================================================
   FAQ
   =================================================================== */
.faq {
  position: relative;
  padding: 7rem 0;
}
.faq__bg {
  position: absolute;
  inset: 0;
  background: oklch(0.16 0.005 260 / 0.15);
}
.faq__header {
  max-width: 48rem;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.faq__header .section-label { justify-content: center; }
.faq__body { margin-top: 3rem; max-width: 48rem; margin-left: auto; margin-right: auto; }

.accordion { width: 100%; }
.accordion__item {
  border-bottom: 1px solid oklch(0.22 0.005 260 / 0.3);
}
.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.25rem 0;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--clr-fg);
  background: none;
  border: none;
  cursor: pointer;
  letter-spacing: -0.025em;
  gap: 1rem;
  transition: color 0.2s;
}
.accordion__trigger:hover { color: oklch(0.9 0 0); }
.accordion__icon {
  width: 1rem;
  height: 1rem;
  color: var(--clr-muted-fg);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.accordion__item--open .accordion__icon {
  transform: rotate(180deg);
}
.accordion__content {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease, padding 0.3s ease;
}
.accordion__item--open .accordion__content {
  max-height: 30rem;
}
.accordion__text {
  padding-bottom: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--clr-muted-fg);
}

@media (min-width: 640px) {
  .faq { padding: 9rem 0; }
}

/* ===================================================================
   CTA SECTION
   =================================================================== */
.cta-section {
  position: relative;
  padding: 7rem 0;
  overflow: hidden;
}
.cta-section__bg {
    position: absolute;
    inset: 0;
    background: var(--clr-bg);
    background-image: url(/../images/cta-bg.jpg);
    background-position: center;
    background-size: cover;
    opacity: .1;
}
.cta-section__radial-glow {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 800px; height: 800px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, oklch(0.75 0.18 165 / 0.1) 0%, transparent 60%);
}
.cta-section__top-bar {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, oklch(0.75 0.18 165 / 0.4), transparent);
}
.cta-section__content {
  position: relative;
  z-index: 10;
  max-width: 48rem;
  margin: 0 auto;
  text-align: center;
}
.cta-section__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--r-full);
  border: 1px solid oklch(0.75 0.18 165 / 0.2);
  background: oklch(0.75 0.18 165 / 0.05);
  padding: 0.375rem 1rem;
  backdrop-filter: blur(4px);
  margin-bottom: 2rem;
}
.cta-section__badge-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--clr-primary);
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.cta-section__badge-text {
  font-size: 0.625rem;
  font-weight: 700;
  color: oklch(0.75 0.18 165 / 0.8);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-family: var(--font-mono);
}
.cta-section__title {
  font-size: 1.875rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-wrap: balance;
}
.cta-section__desc {
  margin-top: 1.5rem;
  font-size: 1rem;
  line-height: 1.625;
  color: var(--clr-muted-fg);
  text-wrap: pretty;
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
}
.cta-section__actions {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.cta-section__note {
  margin-top: 2rem;
  font-size: 0.6875rem;
  color: oklch(0.55 0 0 / 0.6);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@media (min-width: 640px) {
  .cta-section { padding: 9rem 0; }
  .cta-section__actions { flex-direction: row; justify-content: center; }
  .cta-section__title { font-size: 2.25rem; }
}
@media (min-width: 1024px) {
  .cta-section__title { font-size: 3.5rem; }
}

/* ===================================================================
   FOOTER
   =================================================================== */
.footer {
  position: relative;
  border-top: 1px solid oklch(0.22 0.005 260 / 0.3);
}
.footer__top-bar {
  position: absolute;
  top: -1px; left: 50%;
  transform: translateX(-50%);
  width: 400px; height: 1px;
  background: linear-gradient(90deg, transparent, oklch(0.75 0.18 165 / 0.3), transparent);
}
.footer__inner {
  padding: 4rem 0;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
.footer__brand {}
.footer__brand-logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.footer__brand-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--r-base);
  background: var(--clr-primary);
  flex-shrink: 0;
}
.footer__brand-name {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    background: linear-gradient(135deg, oklch(0.95 0 0), oklch(0.75 0.18 165));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.footer__brand-desc {
  margin-top: 1rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--clr-muted-fg);
  max-width: 18rem;
}
.footer__brand-status {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.625rem;
  color: oklch(0.55 0 0 / 0.6);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.footer__brand-status-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--clr-primary);
}
.footer__col {}
.footer__col-title {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: oklch(0.95 0 0 / 0.6);
  text-transform: uppercase;
  font-family: var(--font-mono);
}
.footer__col-nav {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.footer__col-link {
  font-size: 0.875rem;
  color: var(--clr-muted-fg);
  transition: color 0.2s;
}
.footer__col-link:hover { color: var(--clr-fg); }
.footer__bottom {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid oklch(0.22 0.005 260 / 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.footer__copyright {
  font-size: 0.6875rem;
  color: oklch(0.55 0 0 / 0.5);
  font-family: var(--font-mono);
}
.footer__built {
  font-size: 0.625rem;
  color: oklch(0.55 0 0 / 0.3);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@media (min-width: 768px) {
  .footer__grid {
    grid-template-columns: 4fr 2fr 2fr 2fr 2fr;
    gap: 2rem;
  }
  .footer__bottom {
    flex-direction: row;
  }
}

@media (max-width: 768px) {
  .how-it-works,
  .pricing,
  .footer {
    overflow: hidden;
  }
  .stat-card {
    padding: 1rem 0;
  }
  section:not(.hero) {
    padding: 4rem 0 !important;
  }
}