html, body {
  overflow-x: hidden;
}


/* ------------------------------------------------------ */
/* GLOBAL VARIABLES                                        */
/* ------------------------------------------------------ */

:root {
  --blue: #00d4ff;
  --pink: #ff3dfc;

  --bg-dark: #050814;

  --gradient-primary: linear-gradient(90deg, var(--blue), var(--pink));
  --gradient-heading: linear-gradient(120deg, #c3f4ff, #ffb8ff);

  --font-main: system-ui, -apple-system, BlinkMacSystemFont, "Inter", sans-serif;

  --space-hero: 180px;
  --space-big: 120px;
  --space-medium: 80px;
  --space-tight: 50px;

  --transition: 0.25s ease;
}

/* ------------------------------------------------------ */
/* RESET + BASE                                            */
/* ------------------------------------------------------ */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--bg-dark);
  color: white;
  font-family: var(--font-main);
  line-height: 1.6;
  overflow-x: hidden;

  background-image:
    radial-gradient(circle at top, rgba(0,212,255,0.18), transparent 70%),
    radial-gradient(circle at bottom, rgba(255,0,255,0.14), transparent 80%);
  background-repeat: no-repeat;
  background-size: cover;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
}

img {
  max-width: 100%;
  display: block;
}

/* ------------------------------------------------------ */
/* HEADER                                                  */
/* ------------------------------------------------------ */

.header {
  position: sticky;
  top: 0;
  width: 100%;
  background: rgba(5, 8, 20, 0.9);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  z-index: 1400;
}

.header-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-list {
  display: flex;
  gap: 28px;
  list-style: none;
  font-size: 0.95rem;
}

/* Header Typography System */
.nav-list a {
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  opacity: 0.85;
  transition: opacity 0.25s ease, color 0.25s ease;
}

.nav-list a:hover,
.nav-list a.active {
  opacity: 1;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ------------------------------------------------------ */
/* DROPDOWN                                                */
/* ------------------------------------------------------ */

.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: rgba(5, 8, 20, 0.95);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 10px 0;
  border-radius: 8px;
  display: none;
  min-width: 180px;
}

/* Remove bullets from dropdown items */
.dropdown-menu,
.dropdown-menu li {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

.dropdown-menu a {
  display: block;
  padding: 10px 16px;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.85;
}

.dropdown-menu a:hover {
  opacity: 1;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

/* ------------------------------------------------------ */
/* LOGO BEHAVIOR                                           */
/* ------------------------------------------------------ */

.logo-desktop {
  display: block;
  height: 48px;
}

.logo-mobile {
  display: none;
}

@media (max-width: 900px) {
  .logo-desktop { display: none; }
  .logo-mobile { display: block; height: 48px; margin-left: -6px; margin-top: 1px; }
}

/* ------------------------------------------------------ */
/* MOBILE NAV + DRAWER — FlowNova Clean Rebuild           */
/* ------------------------------------------------------ */

/* MOBILE NAV — PREMIUM  */
.mobile-nav-toggle {
  display: none;
  cursor: pointer;
  width: 32px;
  height: 24px;
  position: relative;
  z-index: 1001;
}

.mobile-nav-toggle span {
  position: absolute;
  height: 3px;
  width: 100%;
  background: var(--gradient-primary);
  border-radius: 3px;
  transition: 0.3s ease;
  box-shadow: 0 0 10px rgba(0,212,255,0.6);
}

.mobile-nav-toggle span:nth-child(1) { top: 0; }
.mobile-nav-toggle span:nth-child(2) { top: 10px; }
.mobile-nav-toggle span:nth-child(3) { top: 20px; }

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  z-index: 1500;
}

/* When drawer opens */
#mobile-menu-checkbox:checked ~ .drawer-backdrop {
  opacity: 1;
  pointer-events: auto;
}

    
/* Checkbox hack */
#mobile-menu-checkbox {
  display: none;
}

/* Backdrop */
#mobile-menu-checkbox:checked ~ .drawer-backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* Hamburger animation */
#mobile-menu-checkbox:checked ~ .mobile-nav-toggle span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}

#mobile-menu-checkbox:checked ~ .mobile-nav-toggle span:nth-child(2) {
  opacity: 0;
}

#mobile-menu-checkbox:checked ~ .mobile-nav-toggle span:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}

/* Logo soften */
#mobile-menu-checkbox:checked ~ .header-inner .logo img {
  opacity: 0.4;
  filter: blur(1px);
  transition: 0.35s ease;
}

/* Drawer open */
#mobile-menu-checkbox:checked ~ .mobile-menu {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

/* Staggered link reveal */
#mobile-menu-checkbox:checked ~ .mobile-menu a {
  opacity: 1;
  transform: translateY(0);
}

#mobile-menu-checkbox:checked ~ .mobile-menu a:nth-child(1) { transition-delay: 0.05s; }
#mobile-menu-checkbox:checked ~ .mobile-menu a:nth-child(2) { transition-delay: 0.10s; }
#mobile-menu-checkbox:checked ~ .mobile-menu a:nth-child(3) { transition-delay: 0.15s; }
#mobile-menu-checkbox:checked ~ .mobile-menu a:nth-child(4) { transition-delay: 0.20s; }
#mobile-menu-checkbox:checked ~ .mobile-menu a:nth-child(5) { transition-delay: 0.25s; }
#mobile-menu-checkbox:checked ~ .mobile-menu a:nth-child(6) { transition-delay: 0.30s; }


/*  — Final Glass Drawer */
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 60%;
  height: 100vh;

  /* Dark structural base */
  background-color: rgba(5, 8, 20, 0.15);

  /* Translucent neon gradient */
  background-image: linear-gradient(
    to bottom,
    rgba(0,212,255,0.20),
    rgba(255,61,252,0.20)
  );

  /* Stronger, cleaner blur */
  backdrop-filter: blur(24px);

  /* Engineered neon edge */
  border-left: 1px solid rgba(255,255,255,0.28);

  /* Soft directional glow */
  box-shadow:
    -8px 0 22px rgba(0,212,255,0.25),
    -12px 0 32px rgba(255,61,252,0.20);

  /* Inner shadow for structure */
  box-shadow:
    inset -6px 0 12px rgba(0,0,0,0.25),
    -8px 0 22px rgba(0,212,255,0.25),
    -12px 0 32px rgba(255,61,252,0.20);

  /* ⭐ Add this line */
  z-index: 2000;

  display: flex;
  flex-direction: column;

  padding-top: 110px;
  padding-bottom: 40px;

  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;

  transition:
    transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1),
    opacity 0.35s ease;
}

/* Menu links —  typography */
.mobile-menu a {
  padding: 18px 28px;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Gradient hover — subtle, premium */
.mobile-menu a:hover {
  background: linear-gradient(90deg, var(--blue), var(--pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* RESPONSIVE BEHAVIOR */
@media (max-width: 900px) {
  .nav-list {
    display: none;
  }

  .mobile-nav-toggle {
    display: block;
    z-index: 3000;
    position: fixed;
    top: 28px;
    right: 24px;
    width: 32px;
    height: 24px;
    cursor: pointer;
  }
}



/* ------------------------------------------------------ */
/* BUTTONS                                                 */
/* ------------------------------------------------------ */

.cta-button,
.button {
  display: inline-block;
  padding: 13px 26px;
  background: var(--gradient-primary);
  color: white;
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 0 24px rgba(0,212,255,0.35);
  transition: var(--transition);
  font-size: 0.98rem;
}

.button.secondary {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow: none;
}

.cta-button:hover,
.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 30px rgba(255,0,255,0.4);
}

/* Learn More CTA — FlowNova Outline Button */
.learn-more {
  display: inline-block;
  margin-top: auto;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(6px);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: 0.25s ease;
  width: 160px; /* or 160px if you want more presence */
  text-align: center;
}

.section .learn-more {
  margin-top: 28px;
}

.card .learn-more {
  margin-top: auto; /* pushes button to bottom of card */
}

.learn-more:hover {
  border-color: rgba(255,255,255,0.45);
  box-shadow:
    0 0 12px rgba(0,212,255,0.35),
    0 0 18px rgba(255,61,252,0.25);
}


/* MOBILE BACK BUTTON */
.mobile-back {
  position: fixed;
  bottom: 18px;
  left: 18px;
  z-index: 3000;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(5, 8, 20, 0.55);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.18);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  display: none;
}

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

@media (max-width: 900px) {
  .mobile-back {
    display: inline-block;
  }
}


/* ------------------------------------------------------ */
/* CARDS + GRIDS                                           */
/* ------------------------------------------------------ */

.card-grid {
  display: grid;
  gap: 34px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 34px;
}

.card-body {
  margin-bottom: 14px; /* consistent breathing room */
}

.card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 32px 28px;
  border-radius: 18px;
  box-shadow:
    0 0 20px rgba(0,212,255,0.15),
    0 0 28px rgba(255,0,255,0.12);
  transition: var(--transition);
  min-height: 210px;
    display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-bottom: 40px;
  position: relative;
  display: flex;
  flex-direction: column;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 0 40px rgba(0,212,255,0.35),
    0 0 50px rgba(255,0,255,0.30);
}

.services-grid {
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 34px;
}

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


/* ------------------------------------------------------ */
/* FLOWNOVA — GLOBAL GRID SYSTEM (UPGRADE)                */
/* ------------------------------------------------------ */

/* 1) Global grid engine — shared defaults */
.grid {
  display: grid;
  gap: 34px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 34px;
}

/* 2) Semantic aliases — all inherit the global engine */
.card-grid,
.ai-grid {
  display: grid;
  gap: 34px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 34px;
}

/* 3) Page-specific overrides — only where needed */

/* Homepage — 4-wide cinematic grid (keep your existing breakpoints) */
.homepage-services-grid {
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1100px) {
  .homepage-services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .homepage-services-grid {
    grid-template-columns: 1fr;
  }
}

/* AI Page — 2-wide capability grid */
.ai-grid {
  grid-template-columns: repeat(2, 1fr);
}

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

/* Pricing Page — editorial 2-column layout */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 32px;
}

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

.card h3 {
  margin-bottom: 12px;
  line-height: 1.3;
}

.card ul {
  margin-top: 13px;
  padding-left: 20px; /* aligns bullets with text */
  margin-bottom: 20px; /* adds cushion before the button */
}

.card li {
  position: relative;
  padding-left: 12px; /* space between bullet and text */
}

.three-up {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

@media (max-width: 900px) {
  .three-up {
    grid-template-columns: 1fr;
  }
}



/* ------------------------------------------------------ */
/* FOOTER                                                  */
/* ------------------------------------------------------ */

.footer {
  text-align: center;
  padding-top: 60px;
  padding-bottom: 50px;
}

.footer-logo {
  height: 70px;
  margin: 0 auto 14px;
  display: block;
}

.footer p {
  margin: 12px auto 0; /* centers the block */
  opacity: 0.7;
  text-align: center;
}



/* ------------------------------------------------------ */
/* UTILITIES                                               */
/* ------------------------------------------------------ */

.section {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-medium) 20px;
}

.section.big {
  padding: var(--space-big) 20px;
}

.section.tight {
  padding: var(--space-tight) 20px;
}

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



/* ------------------------------------------------------ */
/* FLOWNOVA — GLOBAL DIVIDER SYSTEM (UPGRADED)            */
/* ------------------------------------------------------ */

/* Base full‑bleed behavior */
.section-divider {
  position: relative;
  width: 100%;
  margin:0;
  overflow: hidden;
  display: block;
}

.section-divider svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ------------------------------------------------------ */
/* HEIGHTS — unchanged                                     */
/* ------------------------------------------------------ */

.divider-short { height: 55px; }
.divider-medium { height: 70px; }
.divider-tall { height: 90px; }

/* ------------------------------------------------------ */
/* COLOR FAMILIES                                          */
/* ------------------------------------------------------ */

/* TIER 1 — CINEMATIC (Homepage only) */
.divider-cinematic svg polygon {
  fill: url(#flownova-cinematic-gradient);
  opacity: 1;
}

/* TIER 2 — GRADIENT-LITE (Services, AI, Approach, About) */
.divider-gradient-lite svg polygon {
  fill: url(#flownova-gradient-lite);
  opacity: 0.75; /* medium saturation */
}

/* TIER 3 — WHITE OPACITY (Pricing) */
.divider-white svg polygon {
  fill: white;
}

/* ------------------------------------------------------ */
/* INTENSITY — applies to all color families               */
/* ------------------------------------------------------ */

.divider-subtle svg polygon { opacity: 0.18; }
.divider-regular svg polygon { opacity: 0.28; }
.divider-strong svg polygon { opacity: 0.40; }

/* ------------------------------------------------------ */
/* DIRECTION — unchanged                                   */
/* ------------------------------------------------------ */

/* Downward left → right */
.divider-down svg polygon {
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

/* Upward left → right */
.divider-up svg polygon {
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

/* ------------------------------------------------------ */
/* OPTIONAL GLOW — unchanged                               */
/* ------------------------------------------------------ */

.divider-glow svg polygon {
  filter:
    drop-shadow(0 0 18px rgba(0,212,255,0.25))
    drop-shadow(0 0 28px rgba(255,61,252,0.20));
}

/* ------------------------------------------------------ */
/* OPTIONAL LIFT — unchanged                               */
/* ------------------------------------------------------ */

.divider-lift {
  margin-top: -50px;
}

/* ------------------------------------------------------ */
/* SVG GRADIENT DEFINITIONS                                */
/* (Place once at bottom of <body> or inside a defs block) */
/* ------------------------------------------------------ */

svg defs {
  /* TIER 1 — CINEMATIC (Homepage) */
  /* Full neon, multi-stop, dramatic */
}

#flownova-cinematic-gradient {
  /* Example: teal → cyan → pink → violet */
}

/* TIER 2 — GRADIENT-LITE (Services, AI, Approach, About) */
/* Diagonal: top-left → bottom-right */
#flownova-gradient-lite {
  /* 3-color palette: teal → cyan → pink */
}


/* ------------------------------------------------------ */
/* FLOWNOVA GLOBAL TYPOGRAPHY SYSTEM                      */
/* ------------------------------------------------------ */

/* Eyebrows / Kickers */
.eyebrow,
.section-eyebrow,
.hero-eyebrow,
.pricing-hero-kicker {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* H1 — Signature FlowNova Headline */
h1,
.heading-xl,
.hero h1,
.pricing-hero-title {
  font-size: 3.4rem;
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 600;
  background: var(--gradient-heading);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* H2 — Section Headers */
h2,
.heading-lg,
.section h2 {
  font-size: 2.4rem;
  letter-spacing: -0.02em;
  font-weight: 600;
  line-height: 1.30;
  margin-bottom: 18px;
  background: var(--gradient-heading);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section-eyebrow{
  margin-bottom: 12px;
}

@media (max-width: 900px) {

  /* Eyebrow spacing */
  .section-header .section-eyebrow {
    margin-bottom: 10px;
  }

  /* H2 mobile rhythm */
  .section-header h2 {
    line-height: 1.15;
    margin-bottom: 16px;
  }

  /* Paragraph spacing after headers */
  .section-header + p,
  .section-header + .body-text {
    margin-top: 4px;
  }
}


/* Hero Titles - Non-Homepage*/
h2.hero-title {
  font-size: 2.9rem !important;
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 600;
  background: var(--gradient-heading);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
  margin-top: 14px;
  margin-bottom: 18px;
}

/* Body Text */
p,
.body-text {
  font-size: 0.98rem;
  line-height: 1.6;
  opacity: 0.9;
  max-width: 720px;
}

/*RANDOM STUFF */
.hero-subtext,
.cta-subtext {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.hero-subtext {
  margin-top: 0;       /* remove default spacing */
  margin-bottom: 5px; /* breathing room before divider */
}

.cta-button-wrapper {
  margin-top: 36px;
}

.hero-spacing {
  padding-top: 140px;
  padding-bottom: 100px;
  /*position: relative;
  z-index: 1;*/
}

.hero-inner {
  max-width: 100%;
}

@media (max-width: 768px) {
  .hero-inner {
    padding-left: 10px;
    padding-right: 10px;
  }
}


/* ------------------------------------------------------ */
/* APPROACH HERO VISUAL SYSTEM — FlowNova Energy v7       */
/* ------------------------------------------------------ */

.approach-hero-visual {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 0;

  /* Light, inviting gradient */
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 20, 0) 0%,
    rgba(10, 10, 20, 0.08) 55%,
    rgba(10, 10, 20, 0.16) 100%
  );
}

/* ------------------------------------------------------ */
/* ENERGY RIBBON — bright, cosmic, FlowNova signature     */
/* ------------------------------------------------------ */

.approach-ribbon {
  position: absolute;
  width: 130%;
  height: 260px;
  top: 16%; /* lifted into bright zone */
  left: -12%;

  background: linear-gradient(
    90deg,
    rgba(0,212,255,0.28),
    rgba(255,61,252,0.28)
  );

  filter: blur(44px); /* tighter = brighter */
  transform: rotate(-14deg); /* more motion */
  opacity: 0.26; /* vivid but not overpowering */
}

/* ------------------------------------------------------ */
/* MAIN VIVID CIRCLE — anchor of the composition          */
/* ------------------------------------------------------ */

.approach-arc {
  position: absolute;
  width: 420px;
  height: 420px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 50%;

  top: 38%;  /* lifted */
  left: 55%;
  transform: translate(-50%, -50%) rotate(8deg);

  opacity: 0.22;
  filter: blur(1px);
}

/* ------------------------------------------------------ */
/* SUPPORTING CIRCLES — depth, motion, system energy      */
/* ------------------------------------------------------ */

.approach-arc-small {
  position: absolute;
  width: 260px; /* reduced for hierarchy */
  height: 260px;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 50%;

  top: 20%;  /* higher lift */
  left: 42%; /* further left */
  transform: translate(-50%, -50%) rotate(4deg);

  opacity: 0.18; /* softer than main */
  filter: blur(2px);
  box-shadow: 0 0 12px rgba(255,255,255,0.12); /* subtle glow */
}

.approach-arc-tiny {
  position: absolute;
  width: 150px; /* reduced for hierarchy */
  height: 150px;
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 50%;

  top: 50%;  /* dropped lower */
  left: 68%; /* pushed right */
  transform: translate(-50%, -50%) rotate(12deg);

  opacity: 0.14; /* softer than main */
  filter: blur(3px);
  box-shadow: 0 0 10px rgba(255,255,255,0.10);
}

/* ------------------------------------------------------ */
/* MOBILE REFINEMENTS — same vibe, scaled down            */
/* ------------------------------------------------------ */

@media (max-width: 900px) {
  .approach-ribbon {
    width: 160%;
    height: 200px;
    top: 24%;
    left: -20%;
    transform: rotate(-6deg);
    filter: blur(36px);
    opacity: 0.22;
  }

  .approach-arc {
    width: 260px;
    height: 260px;
    top: 50%;
    left: 50%;
    opacity: 0.20;
  }

  .approach-arc-small {
    width: 200px;
    height: 200px;
    top: 38%;
    left: 44%;
    opacity: 0.18;
  }

  .approach-arc-tiny {
    width: 130px;
    height: 130px;
    top: 58%;
    left: 62%;
    opacity: 0.16;
  }
}

/* ------------------------------------------------------ */
/* PRICING HERO — Subtle Gradient Field (FlowNova v1)     */
/* ------------------------------------------------------ */

.pricing-hero {
  position: relative;
  overflow: visible; /* allow bleed */
  padding-top: 140px;
  padding-bottom: 90px;
  text-align: center;
}

.pricing-hero-visual {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 110%; /* independent height */
  pointer-events: none;
  z-index: 0;

  background: linear-gradient(
    to bottom,
    rgba(10, 10, 20, 0.0) 0%,
    rgba(10, 10, 20, 0.10) 45%,
    rgba(10, 10, 20, 0.18) 100%
  );

  background-image:
    radial-gradient(circle at 40% 20%, rgba(0,212,255,0.06), transparent 70%),
    radial-gradient(circle at 70% 80%, rgba(255,61,252,0.05), transparent 75%);
  background-blend-mode: screen;

  mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}

.pricing-hero .section,
.contact-hero .section-eyebrow,
.contact-hero .hero-subtext {
  text-align: center; /* content only */
  position: relative;
  z-index: 2;
}


/* Mobile refinement */
@media (max-width: 900px) {
  .pricing-hero-visual {
    background-image:
      radial-gradient(circle at 50% 20%, rgba(0,212,255,0.05), transparent 70%),
      radial-gradient(circle at 60% 80%, rgba(255,61,252,0.04), transparent 75%);
  }
}


/* ------------------------------------------------------ */
/* PRICING PAGE — Editorial, Left-Anchored                */
/* ------------------------------------------------------ */

/* Main pricing grid (used inside .section) */
.pricing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px 32px;
  margin-top: 40px;
}

.pricing-card {
  border-radius: 16px;
  padding: 20px 20px 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.pricing-card.highlight {
  border-color: rgba(124, 255, 178, 0.4);
  background: radial-gradient(circle at top left,
    rgba(124, 255, 178, 0.08),
    rgba(10, 10, 20, 0.95));
}

.pricing-label {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 6px;
}

.pricing-name {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.pricing-price {
  font-size: 0.98rem;
  opacity: 0.9;
  margin-bottom: 10px;
}

.pricing-price span {
  font-weight: 600;
}

.pricing-description {
  font-size: 0.95rem;
  opacity: 0.85;
  margin-bottom: 10px;
}

.pricing-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  font-size: 0.9rem;
  opacity: 0.9;
}

.pricing-list li {
  margin-bottom: 4px;
  position: relative;
  padding-left: 16px;
}

.pricing-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.7;
}

@media (max-width: 800px) {
  .pricing-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------ */
/* RETAINERS                                              */
/* ------------------------------------------------------ */

.retainer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
  margin-top: 40px;
}

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

.retainer-card {
  padding: 24px 24px 26px;
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
}

.retainer-card h3 {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.retainer-price {
  font-size: 1rem;
  opacity: 0.9;
  margin-bottom: 8px;
}

.retainer-note {
  font-size: 0.9rem;
  opacity: 0.8;
}

.retainer-includes {
  margin-top: 40px;
}

.retainer-includes ul {
  list-style: none;
  padding: 0;
  margin-top: 10px;
  line-height: 1.6;
}

.retainer-includes li {
  padding-left: 16px;
  position: relative;
  margin-bottom: 4px;
}

.retainer-includes li::before {
  content: "•";
  position: absolute;
  left: 0;
  opacity: 0.7;
}

/* ------------------------------------------------------ */
/* PRICING CARD HEADERS — restore compact hierarchy        */
/* ------------------------------------------------------ */

.pricing-card h2,
.retainer-card h3 {
  background: none;          /* remove gradient */
  -webkit-background-clip: initial;
  background-clip: initial;
  color: white;              /* solid white text */
  font-size: 1.25rem;        /* matches old cards */
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  line-height: 1.35;
  opacity: 0.95;             /* softer, premium */
}

/* ------------------------------------------------------ */
/* PRICING CARD HEADERS — compact + gradient restored      */
/* ------------------------------------------------------ */

.pricing-card h2 {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  line-height: 1.32;

  /* Restore FlowNova gradient */
  background: var(--gradient-heading);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  opacity: 1; /* ensure full clarity */
}



/* ------------------------------------------------------ */
/* CONTACT HERO — Soft Glow Field (FlowNova v1)           */
/* ------------------------------------------------------ */

.contact-hero {
  position: relative;
  overflow: visible;
  padding-top: 140px;
  padding-bottom: 90px;
  text-align: center;
}

.contact-hero-visual {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;

  background: linear-gradient(
    to bottom,
    rgba(10,10,20,0.0) 0%,
    rgba(10,10,20,0.10) 50%,
    rgba(10,10,20,0.18) 100%
  );

  background-image:
    radial-gradient(circle at 50% 20%, rgba(0,212,255,0.06), transparent 70%),
    radial-gradient(circle at 70% 80%, rgba(255,61,252,0.05), transparent 75%);
  background-blend-mode: screen;
}

.contact-hero .section-eyebrow,
.contact-hero h1,
.contact-hero .hero-subtext {
  position: relative;
  z-index: 2;
}



/* ------------------------------------------------------ */
/* CONTACT FORM — FlowNova Premium Form System            */
/* ------------------------------------------------------ */

.contact-form-wrapper {
  max-width: 700px;
  margin: 0 auto;
  margin-top: 40px;
}

.contact-form-wrapper label {
  display: block;
  margin-bottom: 22px;
  font-weight: 500;
  letter-spacing: 0.02em;
  font-size: 0.95rem;
}

.contact-form-wrapper input,
.contact-form-wrapper textarea {
  width: 100%;
  padding: 14px 16px;
  margin-top: 6px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: white;
  font-size: 1rem;
  transition: border 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.contact-form-wrapper input:focus,
.contact-form-wrapper textarea:focus {
  border-color: var(--blue);
  background: rgba(255,255,255,0.08);
  box-shadow: 0 0 12px rgba(0,212,255,0.25);
  outline: none;
}

.contact-form-wrapper textarea {
  min-height: 150px;
  resize: vertical;
}

/* Checkboxes */
.project-type-group {
  margin-bottom: 32px;
}

.project-type-group > span {
  display: block;
  margin-bottom: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  font-size: 0.95rem;
}

.checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
  cursor: pointer;
  font-size: 0.95rem;
  opacity: 0.9;
}

.checkbox input {
  width: auto;
  margin: 0;
}

/* Submit Button */
.contact-submit {
  margin-top: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--gradient-primary);
  border: none;
  color: white;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.contact-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 24px rgba(0,212,255,0.35);
}

/* Success + Error */
.form-success {
  margin-top: 20px;
  color: #7CFFB2;
  font-size: 0.95rem;
}

.form-error {
  margin-top: 20px;
  color: #FF7C7C;
  font-size: 0.95rem;
}

.hidden {
  display: none;
}



/* ------------------------------------------------------ */
/* ABOUT HERO — Cinematic Lite (Independent Height)       */
/* ------------------------------------------------------ */

.about-hero {
  position: relative;
  overflow: visible; 
  padding-top: 140px;
  padding-bottom: 100px;
  text-align: center;
}


.about-hero-visual {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  
  /* Independent height — NOT tied to content */
  height: 160%;

  pointer-events: none;
  z-index: 0;

  /* Soft diagonal gradient */
  background: linear-gradient(
    135deg,
    rgba(0,212,255,0.06) 0%,
    rgba(255,61,252,0.05) 100%
  );

  /* Faint geometric anchor */
  background-image:
    radial-gradient(circle at 60% 40%, rgba(255,255,255,0.10), transparent 70%);
  background-blend-mode: screen;

  /* Soft fade-out so it never ends abruptly */
  mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}

.about-hero .section-eyebrow,
.about-hero h1,
.about-hero .hero-subtext {
  position: relative;
  z-index: 2;
}



/* ------------------------------------------------------ */
/* SERVICES HERO — Structured Grid Field (FlowNova v3)    */
/* ------------------------------------------------------ */

.services-hero {
  position: relative;
  overflow: visible;
  padding-top: 140px;
  padding-bottom: 100px;
  text-align: center;
}


/* Main visual layer */
.services-hero-visual {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;


  height: 130%; /* slight bleed like pricing */
  
  pointer-events: none;
  z-index: 0;

  /* Base gradient */
  background:
    linear-gradient(
      to bottom,
      rgba(10,10,20,0.00) 0%,
      rgba(10,10,20,0.08) 40%,
      rgba(10,10,20,0.14) 70%,
      rgba(10,10,20,0.00) 100%
    );

  /* Grid + glow */
  background-image:
    repeating-linear-gradient(
      to right,
      rgba(255,255,255,0.01) 0px,
      rgba(255,255,255,0.01) 1px,
      transparent 1px,
      transparent 40px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.01) 0px,
      rgba(255,255,255,0.01) 1px,
      transparent 1px,
      transparent 40px
    ),
    radial-gradient(circle at 55% 35%, rgba(0,212,255,0.10), transparent 70%),
    radial-gradient(circle at 70% 75%, rgba(255,61,252,0.08), transparent 75%);

  background-blend-mode: screen;
  mask-image: linear-gradient(to bottom, black 65%, transparent 100%);
}


/* Supporting arc */
.services-arc {
  position: absolute;
  width: 380px;
  height: 380px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(6deg);
  opacity: 0.22;
  filter: blur(1px);
}

.services-hero .section-eyebrow,
.services-hero .hero-title,
.services-hero .hero-subtext {
  position: relative;
  z-index: 2;
}



/* ------------------------------------------------------ */
/* AI HERO — Signal Field (FlowNova v1)                   */
/* ------------------------------------------------------ */

.ai-hero {
  position: relative;
  overflow: visible; /* allow vertical bleed */
  padding-top: 140px;
  padding-bottom: 100px;
  text-align: center;
}

/* Main visual layer */
.ai-hero-visual {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 130%; /* vertical bleed */
  pointer-events: none;
  z-index: 0;

  /* Base gradient field */
  background: linear-gradient(
    to bottom,
    rgba(10,10,20,0.0) 0%,
    rgba(10,10,20,0.10) 45%,
    rgba(10,10,20,0.18) 100%
  );

  /* AI signal glow */
  background-image:
    radial-gradient(circle at 40% 22%, rgba(0,212,255,0.10), transparent 70%),
    radial-gradient(circle at 68% 78%, rgba(255,61,252,0.08), transparent 75%);
  background-blend-mode: screen;

  /* soften bottom edge */
  mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}

/* AI arcs — more “signal / network” than approach */
.ai-arc {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.22);
  top: 40%;
  left: 55%;
  transform: translate(-50%, -50%) rotate(10deg);
  opacity: 0.22;
  filter: blur(1px);
}

.ai-arc-small {
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.24);
  top: 22%;
  left: 42%;
  transform: translate(-50%, -50%) rotate(4deg);
  opacity: 0.18;
  filter: blur(2px);
}

.ai-arc-tiny {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.20);
  top: 52%;
  left: 70%;
  transform: translate(-50%, -50%) rotate(14deg);
  opacity: 0.16;
  filter: blur(3px);
}

/* AI ribbon — more directional, “signal band” */
.ai-ribbon {
  position: absolute;
  width: 140%;
  height: 230px;
  top: 18%;
  left: -15%;
  background: linear-gradient(
    90deg,
    rgba(0,212,255,0.30),
    rgba(124,255,178,0.26),
    rgba(255,61,252,0.28)
  );
  filter: blur(40px);
  transform: rotate(-12deg);
  opacity: 0.26;
}

/* Content above visuals */
.ai-hero .section-eyebrow,
.ai-hero .hero-title,
.ai-hero .hero-subtext {
  position: relative;
  z-index: 2;
}

/* Mobile refinement */
@media (max-width: 900px) {
  .ai-hero-visual {
    height: 140%;
    background-image:
      radial-gradient(circle at 50% 20%, rgba(0,212,255,0.09), transparent 70%),
      radial-gradient(circle at 60% 80%, rgba(255,61,252,0.07), transparent 75%);
  }

  .ai-arc {
    width: 260px;
    height: 260px;
    top: 50%;
    left: 50%;
    opacity: 0.20;
  }

  .ai-arc-small {
    width: 200px;
    height: 200px;
    top: 36%;
    left: 44%;
    opacity: 0.18;
  }

  .ai-arc-tiny {
    width: 130px;
    height: 130px;
    top: 60%;
    left: 62%;
    opacity: 0.16;
  }

  .ai-ribbon {
    width: 170%;
    height: 200px;
    top: 24%;
    left: -22%;
    transform: rotate(-6deg);
    filter: blur(34px);
    opacity: 0.24;
  }
}



/* ------------------------------------------------------ */
/* APP DESIGN HERO — FlowNova Interface Energy v1         */
/* ------------------------------------------------------ */

.apps-hero {
  position: relative;
  overflow: visible;
}

/* Main visual layer */
.apps-hero-visual {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 135%; /* vertical bleed like Approach */
  pointer-events: none;
  z-index: 0;
  overflow: hidden;

  background: linear-gradient(
    to bottom,
    rgba(10,10,20,0.00) 0%,
    rgba(10,10,20,0.10) 45%,
    rgba(10,10,20,0.16) 100%
  );

  background-blend-mode: screen;
  mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}

/* Subtle interface gridlines */
.apps-gridlines {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      to right,
      rgba(255,255,255,0.03) 0px,
      rgba(255,255,255,0.03) 1px,
      transparent 1px,
      transparent 42px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.03) 0px,
      rgba(255,255,255,0.03) 1px,
      transparent 1px,
      transparent 42px
    );
  opacity: 0.35;
  mix-blend-mode: screen;
}

/* Main geometric arc */
.apps-arc {
  position: absolute;
  width: 420px;
  height: 420px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 50%;
  top: 40%;
  left: 52%;
  transform: translate(-50%, -50%) rotate(4deg);
  opacity: 0.22;
  filter: blur(1px);
}

/* Supporting arc */
.apps-arc-small {
  position: absolute;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  top: 22%;
  left: 40%;
  transform: translate(-50%, -50%) rotate(2deg);
  opacity: 0.18;
  filter: blur(2px);
}

/* Content above visuals */
.apps-hero .section-eyebrow,
.apps-hero .hero-title,
.apps-hero .hero-subtext {
  position: relative;
  z-index: 2;
}

/* Mobile refinement */
@media (max-width: 900px) {
  .apps-arc {
    width: 260px;
    height: 260px;
    top: 48%;
    left: 50%;
  }

  .apps-arc-small {
    width: 180px;
    height: 180px;
    top: 32%;
    left: 46%;
  }
}



/* ------------------------------------------------------ */
/* PROCESS IMPROVEMENT HERO — Clarity Field               */
/* ------------------------------------------------------ */

.process-hero {
  position: relative;
  overflow: visible; /* allow vertical bleed */
  padding-top: 140px;
  padding-bottom: 100px;
  text-align: center;
}

/* Full-bleed visual layer */
.process-hero-visual {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 120%; /* vertical bleed */
  pointer-events: none;
  z-index: 0;
  overflow: hidden;

  /* Soft clarity gradient */
  background: linear-gradient(
    to bottom,
    rgba(10,10,20,0.00) 0%,
    rgba(10,10,20,0.10) 45%,
    rgba(10,10,20,0.18) 100%
  );

  /* Subtle grid + focus glow */
  background-image:
    repeating-linear-gradient(
      to right,
      rgba(255,255,255,0.015) 0px,
      rgba(255,255,255,0.015) 1px,
      transparent 1px,
      transparent 40px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.015) 0px,
      rgba(255,255,255,0.015) 1px,
      transparent 1px,
      transparent 40px
    ),
    radial-gradient(circle at 50% 28%, rgba(0,212,255,0.12), transparent 70%),
    radial-gradient(circle at 65% 70%, rgba(255,61,252,0.08), transparent 75%);
  background-blend-mode: screen;

  /* Fade out at bottom */
  mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}

/* Concentric clarity arcs */
.process-arc-main,
.process-arc-inner {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.22);
  opacity: 0.22;
  filter: blur(1px);
}

.process-arc-main {
  width: 420px;
  height: 420px;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(6deg);
}

.process-arc-inner {
  width: 280px;
  height: 280px;
  top: 32%;
  left: 46%;
  opacity: 0.20;
  filter: blur(2px);
}

/* Small anchor nodes */
.process-node {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.9), rgba(255,255,255,0));
  box-shadow:
    0 0 10px rgba(0,212,255,0.6),
    0 0 18px rgba(255,61,252,0.4);
  opacity: 0.85;
}

.process-node.node-1 { top: 22%; left: 38%; }
.process-node.node-2 { top: 30%; left: 63%; }
.process-node.node-3 { top: 52%; left: 44%; }

/* Ensure text sits above visual */
.process-hero .section-eyebrow,
.process-hero .hero-title,
.process-hero .hero-subtext {
  position: relative;
  z-index: 2;
}

/* Mobile refinement */
@media (max-width: 900px) {
  .process-arc-main {
    width: 280px;
    height: 280px;
    top: 46%;
  }

  .process-arc-inner {
    width: 200px;
    height: 200px;
    top: 34%;
    left: 50%;
  }

  .process-node.node-1 { top: 24%; left: 30%; }
  .process-node.node-2 { top: 32%; left: 70%; }
  .process-node.node-3 { top: 56%; left: 48%; }
}




/* ------------------------------------------------------ */
/* AUTOMATION HERO — Flow Field                           */
/* ------------------------------------------------------ */

.automation-hero {
  position: relative;
  overflow: visible;
  padding-top: 140px;
  padding-bottom: 100px;
  text-align: center;
}

/* Full-bleed visual layer */
.automation-hero-visual {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 125%; /* a bit more vertical bleed */
  pointer-events: none;
  z-index: 0;
  overflow: hidden;

  /* Slightly stronger gradient than process */
  background: linear-gradient(
    to bottom,
    rgba(10,10,20,0.00) 0%,
    rgba(10,10,20,0.12) 45%,
    rgba(10,10,20,0.20) 100%
  );

  /* Motion band + subtle grid */
  background-image:
    linear-gradient(
      115deg,
      rgba(0,212,255,0.26) 0%,
      rgba(255,61,252,0.22) 40%,
      rgba(0,212,255,0.18) 80%,
      transparent 100%
    ),
    repeating-linear-gradient(
      to right,
      rgba(255,255,255,0.012) 0px,
      rgba(255,255,255,0.012) 1px,
      transparent 1px,
      transparent 38px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.012) 0px,
      rgba(255,255,255,0.012) 1px,
      transparent 1px,
      transparent 38px
    );
  background-blend-mode: screen;

  mask-image: linear-gradient(to bottom, black 68%, transparent 100%);
}

/* Diagonal automation band (extra depth) */
.automation-band {
  position: absolute;
  width: 150%;
  height: 260px;
  top: 26%;
  left: -20%;
  background: linear-gradient(
    100deg,
    rgba(0,212,255,0.40),
    rgba(255,61,252,0.34)
  );
  filter: blur(46px);
  transform: rotate(-18deg);
  opacity: 0.32;
}

/* Automation nodes along the band */
.automation-node {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(255,255,255,0));
  box-shadow:
    0 0 12px rgba(0,212,255,0.7),
    0 0 20px rgba(255,61,252,0.5);
  opacity: 0.9;
}

.automation-node.node-a { top: 30%; left: 24%; }
.automation-node.node-b { top: 38%; left: 48%; }
.automation-node.node-c { top: 46%; left: 70%; }

/* Light framing arc */
.automation-arc {
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.20);
  top: 44%;
  left: 52%;
  transform: translate(-50%, -50%) rotate(10deg);
  opacity: 0.20;
  filter: blur(1px);
}

/* Ensure text sits above visual */
.automation-hero .section-eyebrow,
.automation-hero .hero-title,
.automation-hero .hero-subtext {
  position: relative;
  z-index: 2;
}

/* Mobile refinement */
@media (max-width: 900px) {
  .automation-band {
    width: 180%;
    height: 220px;
    top: 30%;
    left: -30%;
    transform: rotate(-10deg);
    filter: blur(40px);
    opacity: 0.30;
  }

  .automation-arc {
    width: 260px;
    height: 260px;
    top: 50%;
    left: 50%;
  }

  .automation-node.node-a { top: 32%; left: 20%; }
  .automation-node.node-b { top: 40%; left: 50%; }
  .automation-node.node-c { top: 50%; left: 78%; }
}



/* ------------------------------------------------------ */
/* BRAND HERO — Clean Transition + FlowNova Identity      */
/* ------------------------------------------------------ */

.brand-hero {
  position: relative;
  overflow: visible;
  padding-top: 140px;
  padding-bottom: 100px;/*gives room for fade */
  text-align: center;
}

.brand-hero-visual {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 130%; /* matches Automation/Pricing behavior */
  pointer-events: none;
  overflow: visible;
  z-index: 0;

  /* Stronger bottom fade for clean transition */
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 20, 0.00) 0%,
    rgba(10, 10, 20, 0.10) 40%,
    rgba(10, 10, 20, 0.22) 70%,
    rgba(10, 10, 20, 0.32) 100%
  );

  /* Cinematic fade into divider */
  mask-image: linear-gradient(
    to bottom,
    black 70%,
    transparent 100%
  );
}

/* ------------------------------------------------------ */
/* BRAND VISUAL ELEMENTS                                  */
/* ------------------------------------------------------ */

.brand-gridlines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: 0.12;
  filter: blur(0.5px);
}

.brand-arc {
  position: absolute;
  width: 420px;
  height: 420px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 50%;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(6deg);
  opacity: 0.22;
  filter: blur(1px);
}

.brand-arc-small {
  position: absolute;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 50%;
  top: 24%;
  left: 58%;
  transform: translate(-50%, -50%) rotate(10deg);
  opacity: 0.18;
  filter: blur(2px);
}

.brand-glow {
  position: absolute;
  width: 150%;
  height: 260px;
  top: 16%;
  left: -20%;
  background: linear-gradient(
    90deg,
    rgba(0,212,255,0.22),
    rgba(255,61,252,0.22)
  );
  filter: blur(48px);
  transform: rotate(-10deg);
  opacity: 0.22;
}

.brand-radial {
  position: absolute;
  width: 600px;
  height: 600px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(255,255,255,0.06) 0%,
    rgba(255,255,255,0.00) 70%
  );
  opacity: 0.18;
  filter: blur(2px);
}

/* ------------------------------------------------------ */
/* MOBILE REFINEMENTS                                     */
/* ------------------------------------------------------ */

@media (max-width: 900px) {
  .brand-hero-visual {
    height: 150%; /* extra room for fade on mobile */
    mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  }

  .brand-arc {
    width: 260px;
    height: 260px;
    top: 48%;
  }

  .brand-arc-small {
    width: 180px;
    height: 180px;
    top: 32%;
    left: 56%;
  }

  .brand-glow {
    width: 180%;
    height: 200px;
    top: 22%;
    left: -30%;
    filter: blur(40px);
  }

  .brand-radial {
    width: 420px;
    height: 420px;
    opacity: 0.14;
  }
}



/* ------------------------------------------------------ */
/* HERO — Correct Layering + Original Cinematic Overlay   */
/* ------------------------------------------------------ */

.hero {
  position: relative;
  padding: var(--space-hero) 20px var(--space-big);
  text-align: center;
  min-height: 600px;

  /* Your hero image — root folder */
  background-image: url("/images/hero-background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Establish stacking context */
  z-index: 0;
  isolation: isolate;
}

.hero.home-hero {
  overflow: hidden;
}

/* Original neon atmospheric overlay — BELOW content */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top, rgba(0,212,255,0.35), transparent 60%),
    radial-gradient(circle at bottom, rgba(255,0,255,0.35), transparent 65%),
    rgba(5, 8, 20, 0.6);

  z-index: 1; /* BELOW content */
}

/* Clean bottom fade into divider — BELOW content */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 160px;

  background: linear-gradient(
    to bottom,
    rgba(5,8,20,0) 0%,
    rgba(5,8,20,1) 100%
  );

  z-index: 1; /* BELOW content */
}

/* Content ALWAYS above overlays */
.hero-content {
  position: relative;
  z-index: 5; /* ABOVE everything */
}

/* OVERLAY WRAPPER — must be subtle */
.home-hero-visual {
  position: absolute;
  inset: 0;
  z-index: 2; /* BELOW text, ABOVE image */
  pointer-events: none;
  overflow: hidden;
  opacity: 1; /* THIS is the magic — subtle, not blocking */
}

/* GRIDLINES — ultra subtle */
.home-gridlines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 90px 90px;
  opacity: 0.08;
  filter: blur(0.5px);
}

/* RADIAL ANCHOR — soft center glow */
.home-radial {
  position: absolute;
  width: 480px;
  height: 480px;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(255,255,255,0.05) 0%,
    rgba(255,255,255,0.00) 70%
  );
  opacity: 0.14;
  filter: blur(2px);
}

/* DIAGONAL GLOW — gentle neon sweep */
.home-glow {
  position: absolute;
  width: 140%;
  height: 200px;
  top: 18%;
  left: -20%;
  background: linear-gradient(
    90deg,
    rgba(0,212,255,0.14),
    rgba(255,61,252,0.14)
  );
  filter: blur(40px);
  transform: rotate(-10deg);
  opacity: 0.14;
  overflow: hidden;
}

/* BOTTOM FADE — cinematic transition */
.home-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 160px;
  background: linear-gradient(
    to bottom,
    rgba(5,8,20,0) 0%,
    rgba(5,8,20,1) 100%
  );
  opacity: 0.85;
}

/* MOBILE REFINEMENTS */
@media (max-width: 900px) {
  .home-gridlines {
    background-size: 70px 70px;
    opacity: 0.06;
  }

  .home-radial {
    width: 360px;
    height: 360px;
    opacity: 0.12;
  }

  .home-glow {
    width: 180%;
    height: 160px;
    top: 24%;
    left: -30%;
    filter: blur(36px);
    opacity: 0.12;
  }

  .home-fade {
    height: 140px;
  }
}

/* Desktop H1 spacing */
.hero .heading-xl {
  margin-bottom: 28px; /* or 32px for more breathing room */
}

.capabilities-list {
  padding-left: 22px; /* pulls bullets inward */
  margin-top: 18px;   /* optional: adds breathing room under the paragraph */
}

.capabilities-list li {
  margin-bottom: 6px; /* optional: improves vertical rhythm */
}

/* Philosophy section spacing */
.section.big .three-up {
  margin-top: 34px; /* adds breathing room under the intro paragraph */
  gap: 32px;        /* consistent spacing between the three items */
}

.section.big .three-up h3 {
  margin-bottom: 10px; /* tighten header → paragraph spacing */
}


/* MOBILE HERO TUNING — FINAL */

@media (max-width: 600px) {
  /* Hero padding (top + bottom) */
  .hero {
    padding-top: 120px;
    padding-bottom: 80px;
  }

  /* Handle both plain h1 and heading-xl */
  .hero h1,
  .hero .heading-xl {
    font-size: 2rem;
    line-height: 1.2;
    letter-spacing: -0.5px;
    margin-bottom: 18px; /* tighten under headline */
  }

  .hero p {
    font-size: 0.95rem;
    margin-top: 8px;
    margin-bottom: 18px;
  }

  .hero-eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    margin-bottom: 10px;
  }

  /* Buttons stack nicely with controlled space */
  .hero-actions {
    margin-top: 22px;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .hero-actions a {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* ------------------------------------------------------ */
/* HERO — Subtext → Button Spacing (Desktop + Mobile)     */
/* ------------------------------------------------------ */

/* Desktop: keep everything the same except tighten the gap */
.hero-actions {
  margin-top: 26px; /* was 32px — slightly tighter, more intentional */
}

/* Mobile tuning */
@media (max-width: 600px) {

  /* Subtext → Buttons spacing */
  .hero-actions {
    margin-top: 18px;  /* tighter, cleaner, matches your new mobile rhythm */
    gap: 14px;         /* good breathing room between buttons */
  }

  /* Buttons fill width cleanly */
  .hero-actions a {
    width: 100%;
    text-align: center;
    padding: 14px 20px;
  }

  /* Optional: reduce hero bottom padding ONLY if needed */
  .hero {
    padding-bottom: 70px; /* keeps mobile hero from feeling too tall */
  }
}

/* Desktop + default */
.hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px; /* was tighter before — this increases space between buttons */
}

/* Mobile */
@media (max-width: 600px) {
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 16px; /* vertical space between the two buttons */
  }

  .hero-actions a {
    width: 100%;
    text-align: center;
  }
}



/* ------------------------------------------------------ */
/* FLOWNOVA PRICING PAGE — v3 Trust Ladder System          */
/* Additive CSS — append to global stylesheet              */
/* ------------------------------------------------------ */


/* ------------------------------------------------------ */
/* TRUST LADDER — Inline Typographic Strip                 */
/* ------------------------------------------------------ */

.trust-ladder {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 24px 56px;
}

.trust-ladder-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;

  /* No card. No glass. No border. Just content. */
  background: none;
  border: none;
  backdrop-filter: none;
  padding: 0;
  border-radius: 0;
}

.trust-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 28px;
  border-radius: 12px;
  transition: background 0.25s ease, transform 0.25s ease;
  text-decoration: none;
  flex: 1;
  max-width: 200px;
}

.trust-step:hover {
  background: rgba(255,255,255,0.04);
  transform: translateY(-2px);
}

.trust-step-num {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.35;
  font-weight: 600;
}

.trust-step-name {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--gradient-heading);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.trust-step-range {
  font-size: 0.78rem;
  opacity: 0.45;
  font-weight: 500;
}

.trust-arrow {
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  position: relative;
}

.trust-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  width: 7px;
  height: 7px;
  border-right: 1px solid rgba(255,255,255,0.2);
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

/* Mobile */
@media (max-width: 900px) {
  .trust-ladder {
    padding: 32px 16px 40px;
  }

  .trust-ladder-inner {
    flex-wrap: wrap;
    gap: 6px;
  }

  .trust-step {
    padding: 8px 12px;
    flex: 0 0 calc(50% - 20px);
    max-width: none;
  }

  .trust-arrow {
    display: none;
  }

  .trust-step-name {
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  .trust-step {
    flex: 0 0 calc(50% - 6px);
    padding: 8px 6px;
  }
}



/* ------------------------------------------------------ */
/* DISCOVER SECTION — Side-by-Side Cards                   */
/* ------------------------------------------------------ */

.discover-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 32px;
  margin-top: 40px;
}

.card-discover {
  display: flex;
  flex-direction: column;
  position: relative;
}

.card-discover .cta-button,
.card-discover .learn-more {
  margin-top: auto;
  align-self: flex-start;
  padding-top: 12px;
}

.card-discover .cta-button {
  margin-top: auto;
  font-size: 0.92rem;
  padding: 11px 22px;
}

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


/* ------------------------------------------------------ */
/* MAP SECTION — Single Featured Card                      */
/* ------------------------------------------------------ */

.map-feature {
  margin-top: 40px;
  max-width: 720px;
}

.card-map {
  position: relative;
}

.pricing-scope-note {
  margin-top: 16px;
  font-size: 0.88rem;
  opacity: 0.65;
  font-style: italic;
  line-height: 1.55;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
}


/* ------------------------------------------------------ */
/* BUILD SECTION — 4-Tier Grid                             */
/* ------------------------------------------------------ */

.build-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 32px;
  margin-top: 40px;
}

.card-build {
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Timeline badge under price */
.pricing-timeline {
  font-size: 0.85rem;
  opacity: 0.55;
  margin-bottom: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* "This is for you if" qualifier */
.pricing-qualifier-label {
  margin-top: 16px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 4px;
}

.pricing-qualifier {
  font-size: 0.88rem;
  opacity: 0.7;
  line-height: 1.55;
  font-style: italic;
}

/* Most Popular card */
.card-popular {
  border-color: rgba(0,212,255,0.35);
  background: radial-gradient(
    circle at top left,
    rgba(0,212,255,0.08),
    rgba(10,10,20,0.95)
  );
}

/* Enterprise / Custom Scoped card */
.card-enterprise {
  border-color: rgba(255,61,252,0.30);
  background: radial-gradient(
    circle at top right,
    rgba(255,61,252,0.06),
    rgba(10,10,20,0.95)
  );
}

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


/* ------------------------------------------------------ */
/* CARD BADGES — Free, Most Popular, Custom Scoped         */
/* ------------------------------------------------------ */

.card-badge {
  position: absolute;
  top: -1px;
  right: 20px;
  padding: 5px 14px;
  border-radius: 0 0 10px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.badge-free {
  background: rgba(124,255,178,0.18);
  color: #7CFFB2;
  border: 1px solid rgba(124,255,178,0.25);
  border-top: none;
}

.badge-popular {
  background: rgba(0,212,255,0.15);
  color: var(--blue);
  border: 1px solid rgba(0,212,255,0.30);
  border-top: none;
}

.badge-enterprise {
  background: rgba(255,61,252,0.12);
  color: var(--pink);
  border: 1px solid rgba(255,61,252,0.25);
  border-top: none;
}


/* ------------------------------------------------------ */
/* ARCHITECTURE NOTE — Callout Box                         */
/* ------------------------------------------------------ */

.architecture-note {
  margin-top: 48px;
  padding: 28px 32px;
  border-radius: 16px;
  background: rgba(255,255,255,0.02);
  border-left: 3px solid;
  border-image: var(--gradient-primary) 1;
  position: relative;
}

.architecture-note h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 12px;
  opacity: 0.9;
  background: var(--gradient-heading);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

.architecture-note p {
  font-size: 0.92rem;
  opacity: 0.75;
  line-height: 1.65;
  max-width: 720px;
}

.architecture-note p + p {
  margin-top: 10px;
}

.architecture-note strong {
  opacity: 1;
  font-weight: 600;
}


/* ------------------------------------------------------ */
/* COMPONENT ADD-ONS                                       */
/* ------------------------------------------------------ */

.addons-section {
  margin-top: 48px;
  padding: 28px 0 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.addons-title {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 8px;
  background: var(--gradient-heading);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

.addons-intro {
  font-size: 0.92rem;
  opacity: 0.7;
  margin-bottom: 24px;
  max-width: 600px;
}

.addons-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 32px;
}

.addon-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  transition: border-color 0.25s ease;
}

.addon-item:hover {
  border-color: rgba(255,255,255,0.12);
}

.addon-name {
  font-size: 0.9rem;
  opacity: 0.85;
  font-weight: 500;
}

.addon-price {
  font-size: 0.85rem;
  opacity: 0.65;
  font-weight: 600;
  white-space: nowrap;
  margin-left: 16px;
}

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


/* ------------------------------------------------------ */
/* SUSTAIN — Updated Retainer Cards                        */
/* ------------------------------------------------------ */

.retainer-meta {
  font-size: 0.88rem;
  opacity: 0.6;
  margin-bottom: 6px;
  font-weight: 500;
}

.retainer-rec {
  font-size: 0.82rem;
  opacity: 0.5;
  font-style: italic;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.retainer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.88rem;
  opacity: 0.85;
}

.retainer-list li {
  margin-bottom: 6px;
  position: relative;
  padding-left: 16px;
}

.retainer-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.7;
}

.retainer-list li:first-child {
  font-weight: 600;
  opacity: 0.7;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}

.retainer-list li:first-child::before {
  content: none;
}

/* Featured retainer (Momentum) */
.retainer-featured {
  border-color: rgba(0,212,255,0.30);
  background: radial-gradient(
    circle at top left,
    rgba(0,212,255,0.06),
    rgba(10,10,20,0.95)
  );
}

/* Retainer price styling — /mo unit */
.retainer-price span {
  font-size: 0.85rem;
  font-weight: 400;
  opacity: 0.65;
}

/* Portfolio scaling note */
.portfolio-scale {
  margin-top: 40px;
  padding: 22px 28px;
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
}

.portfolio-scale p {
  font-size: 0.92rem;
  opacity: 0.7;
  line-height: 1.6;
  max-width: none;
}

.portfolio-scale strong {
  opacity: 1;
}


/* ------------------------------------------------------ */
/* MOBILE TYPOGRAPHY — Pricing-Specific Overrides          */
/* ------------------------------------------------------ */

@media (max-width: 600px) {
  .pricing-hero h2.hero-title {
    font-size: 2rem;
    line-height: 1.18;
  }

  .pricing-name {
    font-size: 1.12rem;
  }

  .architecture-note {
    padding: 22px 20px;
  }

  .addons-section {
    padding-top: 20px;
  }

  .addon-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .addon-price {
    margin-left: 0;
  }

  .trust-ladder {
    margin-top: -20px;
  }
}