@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600;700;800&family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&display=swap');

/* --- Start: base/variables.css --- */
:root {
  /* ── Brand Colors ── */
  --color-primary: #F55D2D;
  --color-primary-light: rgba(245, 93, 45, 0.08);
  --color-primary-medium: rgba(245, 93, 45, 0.15);
  --color-secondary: #D4EE36;
  --color-accent: #0700FF;

  /* ── Backgrounds ── */
  --color-bg-light: #FAFAFA;
  --color-bg-white: #FFFFFF;
  --color-bg-dark: #0D0D0D;
  --color-bg-alt: #F3F3F8;
  --color-bg-elevated: #FFFFFF;

  /* ── Text ── */
  --color-text-primary: #111111;
  --color-text-secondary: #1C1921;
  --color-text-muted: #6B7280;
  --color-text-dark: #2F2A38;
  --color-text-inverse: #FFFFFF;

  /* ── Borders & Shadows ── */
  --color-border: rgba(17, 17, 17, 0.06);
  --color-border-hover: rgba(17, 17, 17, 0.12);
  --color-border-dark: rgba(255, 255, 255, 0.08);
  --color-shadow: rgba(0, 0, 0, 0.03);
  --color-shadow-hover: rgba(0, 0, 0, 0.08);

  /* ── Status ── */
  --color-success: #10B981;
  --color-error: #EF4444;

  /* ── Typography ── */
  --font-primary: 'Bricolage Grotesque', Georgia, serif;
  --font-secondary: 'Archivo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* ── Spacing Scale (expanded for premium whitespace) ── */
  --space-4: 4px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-128: 128px;
  --space-160: 160px;

  /* ── Layout ── */
  --max-width-grid: 1200px;
  --max-width-narrow: 720px;
  --header-height: 72px;

  /* ── Motion ── */
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-fast: 150ms var(--ease-premium);
  --transition-normal: 300ms var(--ease-premium);
  --transition-slow: 500ms var(--ease-premium);

  /* ── Radius ── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* ── Shadows (refined for depth) ── */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.1);
  --shadow-primary: 0 8px 24px rgba(245, 93, 45, 0.15);
  --shadow-primary-lg: 0 16px 40px rgba(245, 93, 45, 0.2);

  /* ── Neumorphic Styling ── */
  --shadow-neumorphic-out: 6px 6px 18px rgba(163, 177, 198, 0.12), -6px -6px 18px rgba(255, 255, 255, 0.95);
  --shadow-neumorphic-out-hover: 10px 10px 24px rgba(163, 177, 198, 0.16), -10px -10px 24px rgba(255, 255, 255, 0.98);
  --shadow-neumorphic-in: inset 3px 3px 8px rgba(163, 177, 198, 0.1), inset -3px -3px 8px rgba(255, 255, 255, 0.9);
  --shadow-neumorphic-in-hover: inset 4px 4px 10px rgba(163, 177, 198, 0.15), inset -4px -4px 10px rgba(255, 255, 255, 0.95);
  --border-neumorphic: 1px solid rgba(255, 255, 255, 0.8);
  --border-neumorphic-tint: 1px solid rgba(245, 93, 45, 0.08);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 24px);
}

/* --- End: base/variables.css --- */

/* --- Start: base/reset.css --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
}

body {
  font-family: var(--font-secondary);
  background: radial-gradient(circle at 10% 15%, rgba(245, 93, 45, 0.04) 0%, transparent 50%),
    radial-gradient(circle at 90% 85%, rgba(212, 238, 54, 0.05) 0%, transparent 50%),
    var(--color-bg-white);
  background-attachment: fixed;
  color: var(--color-text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-primary);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text-primary);
}

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

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
  border: none;
  background: none;
  outline: none;
}

button {
  cursor: pointer;
  text-transform: none;
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

ul,
ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding: var(--space-16) var(--space-24);
  z-index: 99999;
  transition: top var(--transition-fast);
  font-family: var(--font-primary);
  font-weight: 600;
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
  top: 0;
}

/* --- End: base/reset.css --- */

/* --- Start: base/typography.css --- */


/* ── Display Headlines ── */
.display-text {
  font-family: var(--font-primary);
  font-size: clamp(2.75rem, 6vw, 5rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--color-text-primary);
}

/* ── Heading Scale ── */
h1,
.h1 {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

h2,
.h2 {
  font-size: clamp(1.625rem, 3.5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

h3,
.h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

h4,
.h4 {
  font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

/* ── Body Text ── */
p,
.body-text {
  font-family: var(--font-secondary);
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.75;
  color: var(--color-text-muted);
}

.body-large {
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  line-height: 1.7;
}

.body-small {
  font-size: clamp(0.8125rem, 0.9vw, 0.875rem);
  line-height: 1.6;
}

/* ── Label / Badge Text ── */
.label-text {
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-primary);
  display: inline-block;
  margin-bottom: var(--space-12);
}

/* ── Text Alignment ── */
.text-center {
  text-align: center;
}

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

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

/* ── Text Colors ── */
.text-primary-color {
  color: var(--color-primary);
}

.text-accent-color {
  color: var(--color-accent);
}

.text-secondary-color {
  color: var(--color-secondary);
}

/* --- End: base/typography.css --- */

/* --- Start: utilities/animations.css --- */

.js-enabled .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.js-enabled .reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

.delay-1 {
  transition-delay: 100ms;
}

.delay-2 {
  transition-delay: 200ms;
}

.delay-3 {
  transition-delay: 300ms;
}

.delay-4 {
  transition-delay: 400ms;
}

.delay-5 {
  transition-delay: 500ms;
}

.delay-6 {
  transition-delay: 600ms;
}

.fade-in {
  opacity: 0;
  animation: fadeIn 600ms var(--ease-premium) forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes float {
  0% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-20px) rotate(180deg);
  }

  100% {
    transform: translateY(0px) rotate(360deg);
  }
}

/* === After Effects Style Animations === */

/* Text Reveal with Overflow Clip */
.text-reveal {
  overflow: hidden;
  display: inline-block;
}

.text-reveal span {
  display: inline-block;
  animation: text-reveal 0.8s cubic-bezier(0.77, 0, 0.175, 1) forwards;
  opacity: 0;
}

@keyframes text-reveal {
  0% {
    transform: translateY(120%);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Stagger Animation */
.stagger-item {
  opacity: 0;
  transform: translateY(60px);
}

.stagger-item.animated {
  animation: stagger-slide 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes stagger-slide {
  0% {
    opacity: 0;
    transform: translateY(60px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Kinetic Typography */
.kinetic-text {
  display: inline-block;
  animation: kinetic-bounce 3s ease-in-out infinite;
}

@keyframes kinetic-bounce {

  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-8px) scale(1.02);
  }
}

/* Morphing Shape */
.morph-shape {
  animation: morph-shape 10s ease-in-out infinite;
}

@keyframes morph-shape {

  0%,
  100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }

  50% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  }
}

/* Parallax Float */
.float-parallax {
  animation: float-parallax 6s ease-in-out infinite;
}

@keyframes float-parallax {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-20px);
  }
}

/* Smooth Wipe In */
.wipe-in {
  animation: wipe-in 1.2s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

@keyframes wipe-in {
  0% {
    clip-path: inset(0 100% 0 0);
  }

  100% {
    clip-path: inset(0 0 0 0);
  }
}

/* Scale Pulse */
.scale-pulse {
  animation: scale-pulse 2s ease-in-out infinite;
}

@keyframes scale-pulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

/* Rotate Gentle */
.rotate-gentle {
  animation: rotate-gentle 20s linear infinite;
}

@keyframes rotate-gentle {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Glitch Effect */
.glitch-effect {
  position: relative;
}

.glitch-effect:hover {
  animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
}

@keyframes glitch {
  0% {
    transform: translate(0);
  }

  20% {
    transform: translate(-2px, 2px);
  }

  40% {
    transform: translate(-2px, -2px);
  }

  60% {
    transform: translate(2px, 2px);
  }

  80% {
    transform: translate(2px, -2px);
  }

  100% {
    transform: translate(0);
  }
}

/* Scroll Progress Bar */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  transform-origin: 0%;
  transform: scaleX(0);
  z-index: 9999;
}

/* Section Indicator Dots */
.section-indicator {
  position: fixed;
  right: var(--space-32);
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.section-indicator__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(245, 93, 45, 0.3);
  transition: all var(--transition-normal);
  cursor: pointer;
  position: relative;
}

.section-indicator__dot:hover {
  background-color: rgba(245, 93, 45, 0.6);
  transform: scale(1.3);
}

.section-indicator__dot.active {
  background-color: var(--color-primary);
  transform: scale(1.5);
}

.section-indicator__dot::after {
  content: attr(data-label);
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--color-bg-dark);
  color: var(--color-text-inverse);
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

.section-indicator__dot:hover::after {
  opacity: 1;
}

@media (max-width: 768px) {
  .section-indicator {
    display: none;
  }
}

/* Parallax Layers */
.parallax-layer {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Number Counter Animation */
.counter-num {
  font-variant-numeric: tabular-nums;
}


/* === Interactive Overlays & Depth === */

/* Depth Layers */
.depth-layer-1 {
  position: relative;
  z-index: 1;
}

.depth-layer-2 {
  position: relative;
  z-index: 2;
}

.depth-layer-3 {
  position: relative;
  z-index: 3;
}

/* Gradient Overlay Animation */
@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.gradient-animated {
  background-size: 200% 200%;
  animation: gradient-shift 8s ease infinite;
}

/* Shimmer Effect */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }

  100% {
    background-position: 1000px 0;
  }
}

.shimmer-effect {
  position: relative;
  overflow: hidden;
}

.shimmer-effect::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.1) 50%,
      rgba(255, 255, 255, 0) 100%);
  background-size: 1000px 100%;
  animation: shimmer 2.5s infinite;
}

/* Glow Pulse */
@keyframes glow-pulse {

  0%,
  100% {
    box-shadow: 0 0 20px rgba(245, 93, 45, 0.2);
  }

  50% {
    box-shadow: 0 0 40px rgba(245, 93, 45, 0.4);
  }
}

.glow-pulse {
  animation: glow-pulse 3s ease-in-out infinite;
}

/* Fade Slide Variants */
.fade-slide-up {
  opacity: 0;
  transform: translateY(40px);
  animation: fade-slide-up 0.8s var(--ease-premium) forwards;
}

@keyframes fade-slide-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-slide-left {
  opacity: 0;
  transform: translateX(-40px);
  animation: fade-slide-left 0.8s var(--ease-premium) forwards;
}

@keyframes fade-slide-left {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.fade-slide-right {
  opacity: 0;
  transform: translateX(40px);
  animation: fade-slide-right 0.8s var(--ease-premium) forwards;
}

@keyframes fade-slide-right {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Bounce In */
@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }

  50% {
    opacity: 1;
    transform: scale(1.05);
  }

  70% {
    transform: scale(0.9);
  }

  100% {
    transform: scale(1);
  }
}

.bounce-in {
  animation: bounce-in 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Smooth Reveal with Clip */
@keyframes clip-reveal {
  0% {
    clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  }

  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

.clip-reveal {
  animation: clip-reveal 1s var(--ease-smooth) forwards;
}

/* Typewriter Effect */
@keyframes typewriter {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

.typewriter {
  overflow: hidden;
  border-right: 2px solid var(--color-primary);
  white-space: nowrap;
  animation: typewriter 3s steps(40) 1s forwards, blink 0.75s step-end infinite;
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

/* Elastic Scale */
@keyframes elastic-scale {
  0% {
    transform: scale(0);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

.elastic-scale {
  animation: elastic-scale 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}


/* === Mouse Trail Effect === */
.mouse-trail {
  position: fixed;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  pointer-events: none;
  z-index: 9998;
  opacity: 0;
  transition: opacity 0.3s ease;
  mix-blend-mode: screen;
}

.mouse-trail.active {
  opacity: 0.6;
}

.mouse-trail::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  opacity: 0.3;
  animation: trail-pulse 1.5s ease-out infinite;
}

@keyframes trail-pulse {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.6;
  }

  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}


/* === Page Loading Sequence === */
.page-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #0D0C10 0%, #1C1921 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.page-loader.hidden {
  opacity: 0;
  visibility: hidden;
}

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

.loader-logo {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--space-24);
  animation: logo-pulse 1.5s ease-in-out infinite;
}

@keyframes logo-pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

.loader-text {
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-secondary);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  animation: text-fade 2s ease-in-out infinite;
}

@keyframes text-fade {

  0%,
  100% {
    opacity: 0.4;
  }

  50% {
    opacity: 1;
  }
}

.loader-spinner {
  width: 50px;
  height: 50px;
  margin: var(--space-24) auto 0;
  border: 3px solid rgba(245, 93, 45, 0.1);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spinner-rotate 0.8s linear infinite;
}

@keyframes spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}

/* Page entrance animations */
body.page-loaded .liquid-wrapper {
  animation: content-fade-in 0.8s ease forwards;
}

@keyframes content-fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* --- End: utilities/animations.css --- */

/* --- Start: layout/grid.css --- */
.container {
  width: 100%;
  max-width: var(--max-width-grid);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-24);
  padding-right: var(--space-24);
}

@media (max-width: 768px) {
  .container {
    padding-left: var(--space-16);
    padding-right: var(--space-16);
  }
}

.grid {
  display: grid;
  gap: var(--space-40);
}

@media (max-width: 768px) {
  .grid {
    gap: var(--space-24);
  }
}

.grid-2 {
  grid-template-columns: 1fr;
}

.grid-3 {
  grid-template-columns: 1fr;
}

.grid-4 {
  grid-template-columns: 1fr;
}

.flex {
  display: flex;
  gap: var(--space-16);
  flex-wrap: wrap;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-column {
  flex-direction: column;
}

@media (min-width: 640px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.py-xs {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.py-sm {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

.py-md {
  padding-top: var(--space-32);
  padding-bottom: var(--space-32);
}

.py-lg {
  padding-top: var(--space-64);
  padding-bottom: var(--space-64);
}

.py-xl {
  padding-top: var(--space-96);
  padding-bottom: var(--space-96);
}

.py-2xl {
  padding-top: var(--space-128);
  padding-bottom: var(--space-128);
}

@media (max-width: 768px) {
  .py-lg {
    padding-top: var(--space-48);
    padding-bottom: var(--space-48);
  }

  .py-xl {
    padding-top: var(--space-64);
    padding-bottom: var(--space-64);
  }

  .py-2xl {
    padding-top: var(--space-96);
    padding-bottom: var(--space-96);
  }
}

.my-xs {
  margin-top: var(--space-8);
  margin-bottom: var(--space-8);
}

.my-sm {
  margin-top: var(--space-16);
  margin-bottom: var(--space-16);
}

.my-md {
  margin-top: var(--space-32);
  margin-bottom: var(--space-32);
}

.my-lg {
  margin-top: var(--space-64);
  margin-bottom: var(--space-64);
}

.my-xl {
  margin-top: var(--space-96);
  margin-bottom: var(--space-96);
}

/* --- End: layout/grid.css --- */

/* --- Start: layout/sections.css --- */
/* ── Section Base ── */
section {
  position: relative;
  overflow: hidden;
}

/* ── Section Padding (generous whitespace like Thunai) ── */
.section-padding {
  padding-top: var(--space-96);
  padding-bottom: var(--space-96);
}

@media (min-width: 768px) {
  .section-padding {
    padding-top: var(--space-128);
    padding-bottom: var(--space-128);
  }
}

@media (min-width: 1200px) {
  .section-padding {
    padding-top: var(--space-160);
    padding-bottom: var(--space-160);
  }
}

/* ── Section Header ── */
.section-header {
  max-width: var(--max-width-narrow);
  margin-bottom: var(--space-64);
}

.section-header.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-header h2 {
  margin-bottom: var(--space-16);
}

.section-header .body-text {
  font-size: 1.0625rem;
  max-width: 580px;
}

.section-header.center .body-text {
  margin-left: auto;
  margin-right: auto;
}

/* ── Background Variants ── */
.bg-light {
  background-color: transparent;
}

.bg-white {
  background-color: transparent;
}

.bg-dark {
  background: linear-gradient(180deg, var(--color-bg-white) 0%, var(--color-bg-alt) 100%);
  color: var(--color-text-primary);
  position: relative;
}

.bg-dark::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(rgba(17, 17, 17, 0.02) 1px, transparent 0);
  background-size: 32px 32px;
  opacity: 0.5;
  pointer-events: none;
}

.bg-dark h1,
.bg-dark h2,
.bg-dark h3,
.bg-dark h4,
.bg-dark h5,
.bg-dark h6 {
  color: var(--color-text-primary);
}

.bg-dark p {
  color: var(--color-text-muted);
}

.bg-dark .color-border {
  border-color: var(--color-border);
}

/* ── Dividers ── */
.divider {
  height: 1px;
  background-color: var(--color-border);
  width: 100%;
}

.divider-dark {
  height: 1px;
  background-color: rgba(255, 255, 255, 0.08);
  width: 100%;
}

/* ── Border helpers ── */
.border-top {
  border-top: 1px solid var(--color-border);
}

.border-bottom {
  border-bottom: 1px solid var(--color-border);
}

/* ── Section Blend Overlays ── */
.section-blend-primary {
  position: relative;
}

.section-blend-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 140px;
  background: linear-gradient(180deg, rgba(245, 93, 45, 0.03) 0%, rgba(245, 93, 45, 0) 100%);
  pointer-events: none;
  z-index: 2;
}

.section-blend-accent {
  position: relative;
}

.section-blend-accent::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 140px;
  background: linear-gradient(180deg, rgba(7, 0, 255, 0.02) 0%, rgba(7, 0, 255, 0) 100%);
  pointer-events: none;
  z-index: 2;
}

.section-glow-orange {
  position: relative;
}

.section-glow-orange::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(245, 93, 45, 0.04) 0%, rgba(245, 93, 45, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

/* --- End: layout/sections.css --- */

/* --- Start: components/header.css --- */
/* ── Header / Navbar ── */
.header {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%) translateZ(0);
  width: calc(100% - var(--space-32));
  max-width: 1380px;
  height: var(--header-height);
  z-index: 1100;
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  border: 1px solid rgba(17, 17, 17, 0.06);
  border-radius: var(--radius-full);
  box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  padding: 0 var(--space-24);
  transition: all 0.4s var(--ease-premium);
}

/* ── Dark Hero Theme ── */
.header.header--dark-theme {
  background-color: rgba(26, 26, 26, 0.75);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.15);
}

/* ── Scrolled State ── */
.header--scrolled {
  top: 0;
  width: 100%;
  max-width: 100%;
  border-radius: 0;
  background-color: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(17, 17, 17, 0.05);
  border-top: none;
  border-left: none;
  border-right: none;
  box-shadow: 0 1px 8px -2px rgba(0, 0, 0, 0.06);
  padding: 0 var(--space-48);
}

.header--scrolled.header--dark-theme {
  background-color: rgba(26, 26, 26, 0.88);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* ── Header Layout ── */
.header__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 100% !important;
  padding: 0 !important;
}

.header__logo img {
  height: 40px;
  width: auto;
  transition: transform var(--transition-normal);
}

.header__logo:hover img {
  transform: scale(1.03);
}

/* ── Desktop Navigation ── */
.nav {
  display: none;
}

@media (min-width: 1180px) {
  .nav {
    display: block;
  }
}

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 28px);
}

/* ── Nav Item ── */
.nav__item {
  position: relative;
}

/* Invisible bridge between nav and dropdown */
.nav__item--has-dropdown::before {
  content: '';
  position: absolute;
  top: 100%;
  left: -20px;
  right: -20px;
  height: 20px;
  background: transparent;
  z-index: 999;
}

.nav__link {
  font-family: var(--font-secondary);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  color: var(--color-text-dark);
  padding: var(--space-8) 0;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: color var(--transition-fast);
  position: relative;
  z-index: 1000;
  white-space: nowrap;
}

.header--dark-theme .nav__link {
  color: var(--color-text-inverse);
}

.nav__link svg {
  transition: transform var(--transition-fast);
  opacity: 0.5;
}

.nav__item:hover .nav__link svg {
  transform: rotate(180deg);
  opacity: 1;
}

.nav__link:hover {
  color: var(--color-primary);
}

.nav__link--active {
  color: var(--color-primary) !important;
}

/* ── Dropdown Menu ── */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  transform: translateY(16px);
  width: 280px;
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  transition-delay: 0.40s;
  padding: var(--space-12);
  z-index: 1001;
  margin-top: -8px;
  padding-top: calc(var(--space-12) + 8px);
}

.nav__item:hover .dropdown-menu,
.dropdown-menu:hover {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(8px);
  transition-delay: 0s;
}

.dropdown-menu__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dropdown-menu__link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
}

.dropdown-menu__link:hover {
  background-color: var(--color-primary-light);
}

.dropdown-menu__item-title {
  font-family: var(--font-secondary);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--color-text-primary);
  transition: color var(--transition-fast);
}

.dropdown-menu__item-desc {
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.dropdown-menu__link:hover .dropdown-menu__item-title {
  color: var(--color-primary);
}

/* ── Mega Menu ── */
.mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  width: calc(100vw - var(--space-32));
  max-width: 860px;
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  transition-delay: 0.45s;
  padding: var(--space-24) var(--space-24);
  z-index: 1001;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-16);
  margin-top: -8px;
  padding-top: calc(var(--space-24) + 8px);
}

@media (max-width: 768px) {
  .mega-menu {
    display: none;
  }
}

.nav__item:hover .mega-menu,
.mega-menu:hover {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(8px);
  transition-delay: 0s;
}

/* Hoverable bridge for dropdown */
.nav__item--has-dropdown {
  position: relative;
}

.nav__item--has-dropdown::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 0;
  right: 0;
  height: 20px;
  background: transparent;
}

.nav__item--has-dropdown:hover::after {
  pointer-events: auto;
}

.mega-menu__column-title {
  font-family: var(--font-secondary);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: var(--space-12);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-border);
}

.mega-menu__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mega-menu__link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
}

.mega-menu__link:hover {
  background-color: var(--color-primary-light);
}

.mega-menu__item-title {
  font-family: var(--font-secondary);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--color-text-primary);
  transition: color var(--transition-fast);
}

.mega-menu__item-desc {
  font-family: var(--font-secondary);
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.mega-menu__link:hover .mega-menu__item-title {
  color: var(--color-primary);
}

/* ── Dark Theme Dropdowns ── */
.header--dark-theme .dropdown-menu,
.header--dark-theme .mega-menu {
  background-color: rgba(26, 26, 26, 0.95);
  border-color: rgba(255, 255, 255, 0.06);
}

.header--dark-theme .dropdown-menu__link:hover,
.header--dark-theme .mega-menu__link:hover {
  background-color: rgba(212, 238, 54, 0.06);
}

.header--dark-theme .dropdown-menu__item-title,
.header--dark-theme .mega-menu__item-title {
  color: var(--color-text-inverse);
}

.header--dark-theme .mega-menu__column-title {
  color: var(--color-secondary);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.header--dark-theme .dropdown-menu__link:hover .dropdown-menu__item-title,
.header--dark-theme .mega-menu__link:hover .mega-menu__item-title {
  color: var(--color-secondary);
}

/* ── Header Actions ── */
.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

/* ── Mobile Toggle ── */
.mobile-toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 22px;
  height: 16px;
  cursor: pointer;
  z-index: 1010;
}

@media (min-width: 1180px) {
  .mobile-toggle {
    display: none;
  }
}

.mobile-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-text-primary);
  transition: transform var(--transition-normal), opacity var(--transition-normal);
  border-radius: 2px;
}

.header--dark-theme .mobile-toggle span {
  background-color: var(--color-text-inverse);
}

.mobile-toggle--active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.mobile-toggle--active span:nth-child(2) {
  opacity: 0;
}

.mobile-toggle--active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

body.no-scroll {
  overflow: hidden !important;
}

/* ── Mobile Menu ── */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  max-width: 380px;
  height: 100vh;
  background-color: var(--color-bg-white);
  box-shadow: var(--shadow-xl);
  z-index: 1005;
  transition: right var(--transition-slow);
  padding: calc(var(--header-height) + var(--space-32)) var(--space-32) var(--space-32) var(--space-32);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.mobile-menu--open {
  right: 0;
}

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  margin-bottom: var(--space-48);
}

.mobile-menu__link {
  font-family: var(--font-primary);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-menu__submenu-toggle svg {
  transition: transform var(--transition-normal);
  opacity: 0.4;
}

.mobile-menu__submenu-toggle--active svg {
  transform: rotate(180deg);
  opacity: 1;
}

.mobile-menu__submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow) ease-out;
  padding-left: var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin-top: var(--space-12);
}

.mobile-menu__submenu--open {
  max-height: 500px;
}

.mobile-menu__sublink {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

.mobile-menu__sublink:hover {
  color: var(--color-primary);
}

/* ── Mobile Responsive Header ── */
@media (max-width: 1179px) {
  .header {
    top: var(--space-8);
    width: calc(100% - var(--space-24));
    height: 60px;
    padding: 0 var(--space-16);
  }

  .header--scrolled {
    top: 0;
    width: 100%;
    height: 60px;
    padding: 0 var(--space-16);
  }

  .dropdown-menu,
  .mega-menu {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .mobile-menu {
    max-width: 100%;
    width: 100%;
  }
}

/* --- End: components/header.css --- */

/* --- Start: components/footer.css --- */
.footer {
  background-color: var(--color-bg-light);
  color: var(--color-text-primary);
  border-top: 1px solid var(--color-border);
}

.footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
}

@media (min-width: 768px) {
  .footer__top {
    grid-template-columns: 2fr 1fr 1fr 2fr;
  }
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.footer__logo img {
  height: 70px;
  width: auto;
}

.footer__brand p {
  color: var(--color-text-muted);
  max-width: 280px;
}

.footer__socials {
  margin-top: 10px;
  display: flex;
  gap: var(--space-12);
}

.footer__social-link {
  width: 40px;
  height: 40px;
  filter: grayscale(-1);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-primary);
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.footer__social-link svg {
  width: 20px;
  height: 20px;
}

.footer__social-link:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.footer__title {
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary);
  margin-bottom: var(--space-24);
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.footer__link {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

.footer__link:hover {
  color: var(--color-primary);
}

.footer__newsletter {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}



.footer__newsletter-form:focus-within {
  border-color: var(--color-text-primary);
  box-shadow: 0 0 0 3px rgba(245, 93, 45, 0.15);
}

.footer__newsletter-form {
  display: flex;
  background: linear-gradient(135deg, #FFF6F2 0%, #FFFDFB 100%);
  border: 1px solid #D1D5DB;
  border-radius: 0;

  position: relative;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.footer__newsletter-input {
  flex: 1;
  background: none;
  border: none;
  color: var(--color-text-primary);
  padding: var(--space-4) var(--space-12);
  width: 100%;
  height: 40px;
  font-size: 0.9375rem;
  outline: none;
}

.footer__newsletter-input::placeholder {
  color: var(--color-text-muted);
}

.footer__newsletter-input--success::placeholder {
  color: var(--color-secondary);
}

.footer__newsletter-input--success {
  color: var(--color-secondary) !important;
}

.footer__newsletter-btn {
  background: var(--color-primary);
  width: auto;
  margin: 0%;
  border: none;
  color: var(--color-text-inverse);
  border-radius: 0;
  padding: 0 var(--space-20);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transition-fast), opacity var(--transition-fast);
}

.footer__newsletter-btn:hover {
  background-color: #E04314;
  color: var(--color-text-inverse);
}

.footer__bottom {
  margin-top: var(--space-32);
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

@media (min-width: 768px) {
  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.footer__copyright {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.footer__legal {
  display: flex;
  gap: var(--space-24);
}

.footer__legal-link {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.footer__legal-link:hover {
  color: var(--color-primary);
}

/* --- End: components/footer.css --- */

/* --- Start: components/buttons.css --- */
/* ── Base Button ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-secondary);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  transition: all var(--transition-normal);
  text-align: center;
  position: relative;
  overflow: hidden;
  gap: 8px;
  cursor: pointer;
  border: 1px solid transparent;
  box-shadow: none;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
  box-shadow: none;
}

.btn--primary:hover {
  background: #e24e1d;
  border-color: #e24e1d;
  box-shadow: none;
  transform: translateY(-1px);
}

.btn--primary:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn--secondary {
  background: var(--color-secondary);
  color: var(--color-text-primary);
  border-color: var(--color-secondary);
  box-shadow: none;
}

.btn--secondary:hover {
  background: #c8e22e;
  border-color: #c8e22e;
  box-shadow: none;
  transform: translateY(-1px);
}

/* ── Accent Button ── */
.btn--accent {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  border-color: var(--color-accent);
  box-shadow: none;
}

.btn--accent:hover {
  background: #0500d4;
  border-color: #0500d4;
  box-shadow: none;
  transform: translateY(-1px);
}

.btn--outline {
  border: 1px solid var(--color-border);
  background-color: transparent;
  color: var(--color-text-primary);
  box-shadow: none;
}

.btn--outline:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background-color: rgba(245, 93, 45, 0.02);
  box-shadow: none;
  transform: translateY(-1px);
}

.bg-dark .btn--outline {
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--color-text-inverse);
}

.bg-dark .btn--outline:hover {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
  background-color: rgba(212, 238, 54, 0.06);
}

/* ── Text Button ── */
.btn--text {
  padding: 0;
  background-color: transparent;
  color: var(--color-primary);
  gap: 6px;
  font-size: 0.875rem;
  box-shadow: none;
}

.btn--text:hover {
  transform: none;
  opacity: 0.8;
}

.btn--text svg {
  transition: transform var(--transition-fast);
}

.btn--text:hover svg {
  transform: translateX(4px);
}

/* ── White Outline (for dark service heroes) ── */
.btn--white {
  border-color: var(--color-border-hover);
  color: var(--color-text-primary);
}

.btn--white:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background-color: var(--color-primary-light);
}

/* ── Size Variants ── */
.btn--sm {
  padding: 8px 16px;
  font-size: 0.8125rem;
}

.btn--large {
  padding: 16px 32px;
  font-size: 0.9375rem;
  border-radius: var(--radius-md);
}

/* ── Magnetic Button ── */
.magnetic-btn {
  display: inline-flex;
  will-change: transform;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .btn {
    padding: 11px 20px;
    font-size: 0.8125rem;
  }

  .btn--large {
    padding: 14px 24px;
    font-size: 0.875rem;
    width: 100%;
  }
}

/* ── Press Effect ── */
.btn:active {
  transform: scale(0.97);
}

/* ── Ripple ── */
.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transform: translate(-50%, -50%);
  transition: width 0.5s, height 0.5s;
}

.btn:active::before {
  width: 300px;
  height: 300px;
}

/* ── Magnetic Hover ── */
.magnetic-btn {
  transition: transform 0.3s var(--ease-premium),
    box-shadow 0.3s ease;
}

/* ── Loading State ── */
.btn.loading {
  pointer-events: none;
  position: relative;
  color: transparent;
}

.btn.loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -8px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: button-spin 0.6s linear infinite;
}

@keyframes button-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Success State ── */
.btn.success {
  background-color: var(--color-success) !important;
  border-color: var(--color-success) !important;
}

.btn.success::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 1.2em;
}

/* --- End: components/buttons.css --- */

/* --- Start: components/cards.css --- */
/* ── Base Card ── */
.card {
  background-color: rgba(255, 255, 255, 0.7);
  border: var(--color-border-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-32);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;

}

.card>* {
  position: relative;
  z-index: 2;
}



.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-xs);
  border: 1.5px solid var(--color-primary);
}

/* ── Card Image ── */
.card__image-wrapper {
  margin-bottom: var(--space-24);
  height: 200px;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  position: relative;
}

.card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.card:hover .card__image {
  transform: scale(1.05);
}

/* ── Card Icon ── */
.card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background-color: var(--color-bg-white);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-24);
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-neumorphic-in);
  border: var(--border-neumorphic);
}

.card__icon svg {
  width: 22px;
  height: 22px;
}

.card:hover .card__icon {
  background-color: var(--color-bg-white);
  color: var(--color-primary);
  box-shadow: var(--shadow-neumorphic-in-hover);
  transform: scale(1.03);
}

/* ── Card Content ── */
.card__title {
  font-family: var(--font-primary);
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-12);
  letter-spacing: -0.01em;
}

.card__desc {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-24);
  flex-grow: 1;
  line-height: 1.65;
}

/* ── Card in dark sections ── */
.bg-dark .card {
  background-color: var(--color-bg-white);
  border-color: var(--color-border);
}

.bg-dark .card::before {
  background: radial-gradient(400px circle at var(--mouse-x, -9999px) var(--mouse-y, -9999px), rgba(245, 93, 45, 0.03), transparent 80%);
}

.bg-dark .card:hover {
  border-color: rgba(245, 93, 45, 0.2);
  box-shadow: var(--shadow-md);
}

.bg-dark .card__icon {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

.bg-dark .card:hover .card__icon {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

/* ── Showcase Card ── */
.card-showcase {
  height: 380px;
  justify-content: flex-end;
  color: var(--color-text-inverse);
  padding: var(--space-40) var(--space-32);
  border: none;
}

.card-showcase__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: transform var(--transition-slow);
}

.card-showcase:hover .card-showcase__bg {
  transform: scale(1.03);
}

.card-showcase::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(17, 17, 17, 0) 30%, rgba(17, 17, 17, 0.8) 100%);
  z-index: 2;
}

.card-showcase__content {
  position: relative;
  z-index: 3;
}

.card-showcase__title {
  color: var(--color-text-inverse) !important;
  margin-bottom: var(--space-8);
}

.card-showcase__desc {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9375rem;
  margin-bottom: var(--space-16);
}

/* ── Testimonial Card ── */
.card-testimonial {
  background-color: rgba(255, 255, 255, 0.7);
  border: var(--border-neumorphic);
  border-radius: var(--radius-lg);
  padding: var(--space-40);
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  box-shadow: var(--shadow-neumorphic-out);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.card-testimonial>* {
  position: relative;
  z-index: 2;
}

.card-testimonial::before {
  content: '"';
  position: absolute;
  top: 20px;
  right: 28px;
  font-family: var(--font-primary);
  font-size: 5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-primary-light);
  z-index: 1;
  pointer-events: none;
}

.card-testimonial:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-neumorphic-out-hover);
  border-color: rgba(245, 93, 45, 0.08);
}

.card-testimonial__quote {
  font-family: var(--font-primary);
  font-style: normal;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-text-dark);
  font-weight: 400;
}

.card-testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin-top: auto;
  padding-top: var(--space-20);
  border-top: 1px solid var(--color-border);
}

.card-testimonial__avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: white;
  font-size: 0.9375rem;
  flex-shrink: 0;
}

.card-testimonial__info h4 {
  font-family: var(--font-primary);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.card-testimonial__info p {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}


/* ── 3D Transform Effects ── */

.card-3d {
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-3d:hover {
  transform: translateY(-8px) rotateX(3deg) rotateY(3deg);
}

.card-3d::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(245, 93, 45, 0.08), rgba(212, 238, 54, 0.08));
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
  transform: translateZ(-50px);
}

.card-3d:hover::before {
  opacity: 1;
}

/* Flip card */
.card-flip {
  perspective: 1000px;
  height: 400px;
}

.card-flip__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
}

.card-flip:hover .card-flip__inner {
  transform: rotateY(180deg);
}

.card-flip__front,
.card-flip__back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: var(--radius-md);
  padding: var(--space-32);
}

.card-flip__back {
  transform: rotateY(180deg);
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Layered depth cards */
.card-layered {
  position: relative;
}

.card-layered::before,
.card-layered::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  z-index: -1;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.card-layered::before {
  transform: translateZ(-10px) scale(0.95);
  opacity: 0.5;
}

.card-layered::after {
  transform: translateZ(-20px) scale(0.9);
  opacity: 0.3;
}

.card-layered:hover::before {
  transform: translateZ(-15px) scale(0.95);
}

.card-layered:hover::after {
  transform: translateZ(-30px) scale(0.9);
}

/* Parallax card layers */
.card-parallax {
  position: relative;
  overflow: hidden;
}

.card-parallax__layer {
  transition: transform 0.3s ease;
}

.card-parallax:hover .card-parallax__layer--1 {
  transform: translateZ(20px);
}

.card-parallax:hover .card-parallax__layer--2 {
  transform: translateZ(40px);
}

.card-parallax:hover .card-parallax__layer--3 {
  transform: translateZ(60px);
}

/* --- End: components/cards.css --- */

/* --- Start: components/forms.css --- */
/* ── Form Group ── */
.form-group {
  margin-bottom: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  position: relative;
}

/* ── Form Labels ── */
.form-label {
  font-family: var(--font-secondary);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: 0.01em;
  transition: color 0.3s ease;
}

.bg-dark .form-label {
  color: var(--color-text-inverse);
}

/* ── Form Inputs ── */
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 14px var(--space-16);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-sm);
  background-color: rgba(245, 245, 247, 0.3);
  color: var(--color-text-primary);
  font-family: var(--font-secondary);
  font-size: 0.9375rem;
  box-shadow: var(--shadow-neumorphic-in);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.bg-dark .form-input,
.bg-dark .form-select,
.bg-dark .form-textarea {
  background-color: #1a1a1a;
  border-color: var(--color-border-dark);
  color: var(--color-text-inverse);
}

/* ── Focus State ── */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: rgba(245, 93, 45, 0.25);
  box-shadow: var(--shadow-neumorphic-in-hover);
  outline: none;
}

.bg-dark .form-input:focus,
.bg-dark .form-select:focus,
.bg-dark .form-textarea:focus {
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 3px rgba(212, 238, 54, 0.1);
}

/* ── Textarea ── */
.form-textarea {
  min-height: 130px;
  resize: vertical;
  line-height: 1.6;
}

/* ── File Upload ── */
.file-upload {
  border: var(--border-neumorphic);
  border-radius: var(--radius-md);
  padding: var(--space-32);
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: var(--shadow-neumorphic-out);
}

.file-upload:hover {
  border-color: rgba(245, 93, 45, 0.08);
  background-color: rgba(245, 93, 45, 0.02);
  box-shadow: var(--shadow-neumorphic-out-hover);
}

.file-upload:active {
  transform: scale(0.99);
}

.file-upload input[type="file"] {
  display: none;
}

.file-upload__icon {
  color: var(--color-text-muted);
}

.file-upload__text {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* ── Error State ── */
.form-input--error,
.form-textarea--error {
  border-color: var(--color-error) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.08);
}

.form-error-msg {
  font-size: 0.75rem;
  color: var(--color-error);
  font-weight: 500;
  margin-top: 4px;
}

/* ── Success Message ── */
.form-success-msg {
  background-color: rgba(16, 185, 129, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.2);
  color: var(--color-success);
  padding: var(--space-16) var(--space-24);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-24);
  font-family: var(--font-secondary);
  font-weight: 500;
  font-size: 0.875rem;
  text-align: center;
}

/* ── Valid Input ── */
.form-input.valid {
  border-color: var(--color-success);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2310B981' stroke-width='2'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
}

/* ── Error Shake ── */
.form-input.error {
  animation: input-shake 0.4s ease;
}

@keyframes input-shake {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-6px);
  }

  75% {
    transform: translateX(6px);
  }
}

/* ── Checkbox / Radio ── */
input[type="checkbox"],
input[type="radio"] {
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  animation: check-bounce 0.3s ease;
}

@keyframes check-bounce {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.15);
  }

  100% {
    transform: scale(1);
  }
}

/* --- End: components/forms.css --- */

/* --- Start: components/hero.css --- */
/* ── Hero Section ── */
.hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-height) + var(--space-80));
  padding-bottom: var(--space-96);
  z-index: 5;
  overflow: hidden;
  background-color: var(--color-bg-white);
}

.hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(rgba(17, 17, 17, 0.03) 1px, transparent 0);
  background-size: 32px 32px;
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

@media (min-width: 1024px) {
  .hero {
    min-height: 92vh;
  }
}

/* ── Hero Content ── */
.hero__container {
  position: relative;
  z-index: 2;
}

.hero__content {
  max-width: 780px;
  position: relative;
  z-index: 2;
}

.hero__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  padding: 7px 16px;
  border-radius: var(--radius-full);
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-24);
  border: 1px solid rgba(245, 93, 45, 0.12);
  transition: all var(--transition-normal);
}

.hero__label:hover {
  background-color: var(--color-primary-medium);
  border-color: rgba(245, 93, 45, 0.25);
}

.hero__label--staffing {
  background-color: rgba(7, 0, 255, 0.05) !important;
  color: var(--color-accent) !important;
  border-color: rgba(7, 0, 255, 0.15) !important;
}

.hero__label--marketing {
  background-color: var(--color-primary-light) !important;
  color: var(--color-primary) !important;
  border-color: rgba(245, 93, 45, 0.15) !important;
}

/* ── Hero Title ── */
.hero__title {
  margin-bottom: var(--space-16);
  line-height: 0.85;
}

/* ── Hero Description ── */
.hero__desc {
  font-size: clamp(1.0625rem, 1.5vw, 1.125rem);
  line-height: 1.5;
  color: var(--color-text-muted);
  margin-bottom: var(--space-28);
  max-width: 720px;
}

/* ── Hero Actions ── */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  align-items: center;
}

@media (min-width: 769px) {
  .hero__desc {
    margin-bottom: 38px;
  }
}

/* ── Service Hero Variant ── */
.hero--service {
  min-height: auto;
  padding-top: calc(var(--header-height) + var(--space-80));
  padding-bottom: var(--space-80);
  background: linear-gradient(180deg, #FFFFFF 0%, var(--color-bg-alt) 100%);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border);
}

.hero--service::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(rgba(17, 17, 17, 0.025) 1px, transparent 0);
  background-size: 32px 32px;
  opacity: 0.5;
  pointer-events: none;
}

.hero--service .hero__title {
  color: var(--color-text-primary);
}

.hero--service .hero__desc {
  color: var(--color-text-muted);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .hero {
    min-height: 100dvh;
    min-height: 100svh;
    padding-top: calc(60px + var(--space-32));
    padding-bottom: var(--space-32);
    align-items: center;
    justify-content: center;
  }

  .hero__container {
    width: 100%;
  }

  .hero__content {
    max-width: 100%;
  }

  .hero__title {
    font-size: clamp(2rem, 9vw, 2.625rem);
    line-height: 0.92;
    margin-bottom: var(--space-12);
  }

  .hero__desc {
    font-size: 0.9375rem;
    line-height: 1.55;
    margin-bottom: var(--space-24);
  }

  .hero__actions {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    gap: var(--space-8);
    width: 100%;
    max-width: 100%;
  }

  .hero__actions .btn {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding: 11px 12px;
    font-size: 0.8125rem;
  }

  .hero--service {
    min-height: auto;
    padding-top: calc(var(--header-height) + var(--space-48));
    padding-bottom: var(--space-56);
  }

  .hero__glow {
    display: none;
  }
}

/* ── Hero Glow ── */
.hero__glow {
  position: absolute;
  top: -20%;
  right: -15%;
  width: 60%;
  height: 80%;
  background: radial-gradient(circle, rgba(245, 93, 45, 0.1) 0%, rgba(212, 238, 54, 0.04) 40%, transparent 70%);
  z-index: 1;
  pointer-events: none;
  filter: blur(80px);
}

/* ── Hero Trust / Flags ── */
.hero__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  margin-top: var(--space-40);
  margin-top: 25px !important;
}

.hero__trust-label {
  font-family: var(--font-secondary);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  text-transform: lowercase;
  margin: 0;
}

.hero__flags {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__flag {
  width: 32px;
  height: 24px;
  object-fit: contain;
  position: relative;
  margin-left: -16px;
}

.hero__flag:first-child {
  margin-left: 0;
}

.hero__flag:nth-child(1) {
  z-index: 1;
}

.hero__flag:nth-child(2) {
  z-index: 2;
}

.hero__flag:nth-child(3) {
  z-index: 3;
}

.hero__flag:nth-child(4) {
  z-index: 4;
}

@media (max-width: 768px) {
  .hero__trust {
    margin-top: var(--space-28);
    gap: var(--space-10);
  }

  .hero__trust-label {
    font-size: 0.75rem;
  }

  .hero__flag {
    width: 28px;
    height: 21px;
    margin-left: -13px;
  }
}

/* ── Homepage Hero Background ── */
body[data-page="home"] .hero {
  background: linear-gradient(165deg, #FFFFFF 0%, #FFF9F5 42%, #FFF3EB 100%);
}

body[data-page="home"] .hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 75% 15%, rgba(245, 93, 45, 0.14) 0%, transparent 65%),
    radial-gradient(ellipse 55% 45% at 10% 85%, rgba(245, 93, 45, 0.07) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
  animation: hero-bg-drift 18s ease-in-out infinite;
}

body[data-page="home"] .hero::after {
  z-index: 1;
}

body[data-page="home"] .hero__glow {
  background: radial-gradient(circle, rgba(245, 93, 45, 0.16) 0%, rgba(245, 93, 45, 0.05) 45%, transparent 72%);
}

@keyframes hero-bg-drift {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.85;
  }

  50% {
    transform: translate(-1.5%, 1%) scale(1.04);
    opacity: 1;
  }
}

/* ── Homepage Hero Centering Overrides ── */
body[data-page="home"] .hero__content {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

body[data-page="home"] .hero__desc {
  margin-left: auto;
  margin-right: auto;
}

body[data-page="home"] .hero__actions {
  justify-content: center;
}

@media (max-width: 768px) {
  body[data-page="home"] .hero__actions {
    margin-left: auto;
    margin-right: auto;
  }
}

/* --- End: components/hero.css --- */

/* --- Start: components/cta.css --- */
/* ── CTA Section ── */
.cta-section {
  background: var(--color-bg-light);
  color: var(--color-text-primary);
  padding: var(--space-96) 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--color-border);
}

@media (min-width: 768px) {
  .cta-section {
    padding: var(--space-128) 0;
  }
}

@media (min-width: 1200px) {
  .cta-section {
    padding: var(--space-160) 0;
  }
}

.cta__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 5;
}

.cta__label {
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--space-16);
}

.cta__title {
  color: var(--color-text-primary) !important;
  max-width: 720px;
  margin-bottom: var(--space-24);
}

.cta__desc {
  color: var(--color-text-muted);
  max-width: 540px;
  margin-bottom: var(--space-40);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.cta__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(245, 93, 45, 0.04) 0%, transparent 70%);
  z-index: 2;
  pointer-events: none;
  filter: blur(60px);
}

/* --- End: components/cta.css --- */

/* --- Start: components/cursor.css --- */
.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(245, 93, 45, 0.04) 0%, rgba(7, 0, 255, 0.01) 50%, rgba(0, 0, 0, 0) 70%);
  border-radius: var(--radius-full);
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -50%);
  will-change: left, top;
  filter: blur(10px);
  display: none;
}

@media (pointer: fine) {
  .cursor-glow {
    display: block;
  }
}

/* --- End: components/cursor.css --- */

/* --- Start: components/liquid.css --- */
.liquid-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: -1;
  opacity: 0.85;
  filter: blur(120px);
  will-change: contents;
  transform: translateZ(0);
}

.liquid-wrapper {
  position: relative;
  z-index: 1;
}

/* --- End: components/liquid.css --- */

/* --- Start: components/hud.css --- */

/* 1. Global Viewport grid */
.ae-grid-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image:
    linear-gradient(rgba(245, 93, 45, 0.007) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 93, 45, 0.007) 1px, transparent 1px);
  background-size: 100px 100px;
  background-position: center;
  pointer-events: none;
  z-index: 0;
  opacity: 0.8;
  mix-blend-mode: screen;
  transition: opacity 0.3s ease-out;
}

/* Technical dot elements at junctions */
.ae-grid-overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(rgba(245, 93, 45, 0.05) 1px, transparent 1px);
  background-size: 100px 100px;
  background-position: center;
  pointer-events: none;
}

/* 2. HUD Screen Overlays (Camera Viewfinder & Specs) */
.ae-hud-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  /* On top of navigation but click-through */
  padding: var(--space-24);
  box-sizing: border-box;
  font-family: 'SF Mono', Monaco, Consolas, 'Courier New', monospace;
  color: rgba(28, 25, 33, 0.35);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  transition: opacity 0.3s ease-out;
}

/* Corner bracket lines */
.ae-corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(245, 93, 45, 0.3);
  opacity: 0.7;
  transition: border-color var(--transition-normal);
}

.ae-corner--tl {
  top: calc(var(--header-height) + 12px);
  left: 24px;
  border-right: none;
  border-bottom: none;
}

.ae-corner--tr {
  top: calc(var(--header-height) + 12px);
  right: 24px;
  border-left: none;
  border-bottom: none;
}

.ae-corner--bl {
  bottom: 24px;
  left: 24px;
  border-right: none;
  border-top: none;
}

.ae-corner--br {
  bottom: 24px;
  right: 24px;
  border-left: none;
  border-top: none;
}

/* HUD Text Tickers */
.ae-hud-ticker {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}

.ae-hud-ticker--top-left {
  top: calc(var(--header-height) + 16px);
  left: 56px;
}

.ae-hud-ticker--top-right {
  top: calc(var(--header-height) + 16px);
  right: 56px;
  text-align: right;
}

.ae-hud-ticker--bottom-left {
  bottom: 28px;
  left: 56px;
}

.ae-hud-ticker--bottom-right {
  bottom: 28px;
  right: 56px;
  text-align: right;
}

/* Recording dot pulsing */
.ae-rec-dot {
  width: 6px;
  height: 6px;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
  animation: pulse-red 1.2s ease-in-out infinite;
  display: inline-block;
}

@keyframes pulse-red {

  0%,
  100% {
    opacity: 0.2;
    transform: scale(0.9);
  }

  50% {
    opacity: 1;
    transform: scale(1.25);
  }
}

/* 3. Mouse Coordinate HUD trailing cursor */
.ae-mouse-coords {
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  font-family: 'SF Mono', Monaco, Consolas, 'Courier New', monospace;
  font-size: 8px;
  color: var(--color-primary);
  opacity: 0.85;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(245, 93, 45, 0.25);
  padding: 4px 6px;
  border-radius: var(--radius-xs);
  display: flex;
  flex-direction: column;
  gap: 2px;
  transform: translateZ(0);
  backdrop-filter: blur(4px);
  letter-spacing: 0.05em;
  box-shadow: 0 4px 12px rgba(28, 25, 33, 0.05);
}

.ae-mouse-coords::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 8px;
  width: 8px;
  height: 1px;
  background-color: rgba(245, 93, 45, 0.4);
}

/* 4. After Effects Tracking brackets for headings */
h1,
h2,
.h1,
.h2 {
  position: relative;
}

h1::before,
h2::before,
.h1::before,
.h2::before,
h1::after,
h2::after,
.h1::after,
.h2::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border: 1px solid var(--color-primary);
  opacity: 0;
  transition: all 0.5s var(--ease-premium);
  pointer-events: none;
}

h1::before,
h2::before,
.h1::before,
.h2::before {
  top: -6px;
  left: -12px;
  border-right: none;
  border-bottom: none;
  transform: translate(-6px, -6px);
}

h1::after,
h2::after,
.h1::after,
.h2::after {
  bottom: -6px;
  right: -12px;
  border-left: none;
  border-top: none;
  transform: translate(6px, 6px);
}

h1:hover::before,
h2:hover::before,
.h1:hover::before,
.h2:hover::before,
h1:hover::after,
h2:hover::after,
.h1:hover::after,
.h2:hover::after {
  opacity: 0.85;
  transform: translate(0, 0);
}

/* Subtle frame grid markings on top of main sections */
section {
  position: relative;
}

/* Center crosshair for section markers */
section::before {
  content: '+';
  position: absolute;
  top: var(--space-16);
  left: 50%;
  transform: translateX(-50%);
  color: rgba(245, 93, 45, 0.15);
  font-family: monospace;
  font-size: 12px;
  font-weight: 300;
  pointer-events: none;
  z-index: 2;
}

/* 5. 3D Avatars footer styling */
.footer__avatars-section {
  margin-top: var(--space-24);
  margin-bottom: var(--space-64);
  padding-bottom: var(--space-48);
  border-bottom: 1px solid var(--color-border-dark);
}

.footer__avatars-header {
  text-align: center;
  margin-bottom: var(--space-48);
}

.footer__avatars-header .label-text {
  color: var(--color-primary);
  font-size: 0.8125rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
}

.footer__avatars-title {
  font-family: var(--font-secondary);
  font-size: 2.25rem;
  color: var(--color-text-primary);
  margin-top: var(--space-12);
  margin-bottom: var(--space-12);
  font-weight: 700;
  line-height: 1.2;
}

.footer__avatars-header p {
  color: var(--color-text-muted);
  max-width: 480px;
  margin: 0 auto;
  font-size: 0.9375rem;
}

.footer__avatars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-24);
  perspective: 1000px;
}

/* 3D Avatar Card Container */
.avatar-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-32) var(--space-24);
  text-align: center;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.5s ease,
    box-shadow 0.5s ease;
  overflow: visible;
  /* Let elements pop out of card */
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

.avatar-card:hover {
  border-color: rgba(245, 93, 45, 0.25);
  box-shadow:
    0 20px 45px rgba(0, 0, 0, 0.06),
    0 0 30px rgba(245, 93, 45, 0.04);
}

/* Sphere Avatar */
.avatar-sphere {
  width: 90px;
  height: 90px;
  margin: 0 auto var(--space-24);
  border-radius: var(--radius-full);
  position: relative;
  transform-style: preserve-3d;
  animation: float-3d-avatar 5s ease-in-out infinite alternate;
}

/* Stagger avatar animations */
.avatar-card:nth-child(1) .avatar-sphere {
  animation-delay: 0s;
  animation-duration: 5s;
}

.avatar-card:nth-child(2) .avatar-sphere {
  animation-delay: -1.2s;
  animation-duration: 4.2s;
}

.avatar-card:nth-child(3) .avatar-sphere {
  animation-delay: -2.4s;
  animation-duration: 5.6s;
}

.avatar-card:nth-child(4) .avatar-sphere {
  animation-delay: -3.6s;
  animation-duration: 4.8s;
}

@keyframes float-3d-avatar {
  0% {
    transform: translateY(0) rotateY(-5deg) rotateX(-5deg);
  }

  100% {
    transform: translateY(-10px) rotateY(5deg) rotateX(5deg);
  }
}

.avatar-sphere__image {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 60%, rgba(0, 0, 0, 0.05) 100%), var(--color-bg-alt);
  border: 1px solid var(--color-border);
  box-shadow:
    inset 0 4px 8px rgba(255, 255, 255, 0.5),
    0 10px 20px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Glossy highlight line */
.avatar-sphere__image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, transparent 40%, transparent 100%);
  pointer-events: none;
}

/* Glow ring behind avatar */
.avatar-sphere__glow {
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  border-radius: var(--radius-full);
  background: radial-gradient(circle, var(--avatar-glow-color, rgba(245, 93, 45, 0.2)) 0%, transparent 70%);
  filter: blur(8px);
  z-index: -1;
  pointer-events: none;
  transform: translateZ(-10px);
}

.avatar-sphere__icon {
  width: 44px;
  height: 44px;
  z-index: 2;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
  transform: translateZ(20px);
  transition: transform 0.4s var(--ease-premium);
}

.avatar-card:hover .avatar-sphere__icon {
  transform: translateZ(35px) scale(1.1);
}

/* Floating 3D badges */
.avatar-tag {
  position: absolute;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-family: 'SF Mono', Monaco, Consolas, monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transform: translateZ(30px);
  transition: transform 0.4s var(--ease-premium);
}

.avatar-card:hover .avatar-tag {
  transform: translateZ(45px);
}

.avatar-tag--top {
  top: -6px;
  right: -10px;
  background: linear-gradient(135deg, var(--color-primary) 0%, #E04314 100%);
  color: white;
}

.avatar-tag--bottom {
  bottom: -4px;
  left: -10px;
  background: linear-gradient(135deg, var(--color-secondary) 0%, #B6CE23 100%);
  color: var(--color-text-primary);
}

.avatar-card__name {
  font-family: var(--font-primary);
  font-size: 1.0625rem;
  color: var(--color-text-primary);
  margin-bottom: 4px;
  font-weight: 600;
  transform: translateZ(15px);
}

.avatar-card__role {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  transform: translateZ(10px);
}

/* Responsive fixes */
@media (max-width: 768px) {
  .footer__avatars-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ae-hud-overlay {
    padding: var(--space-12);
  }

  .ae-corner {
    width: 10px;
    height: 10px;
  }

  .ae-hud-ticker {
    font-size: 7px;
  }

  .ae-hud-ticker--top-left,
  .ae-hud-ticker--bottom-left {
    left: 32px;
  }

  .ae-hud-ticker--top-right,
  .ae-hud-ticker--bottom-right {
    right: 32px;
  }

  .ae-mouse-coords {
    display: none !important;
    /* Hide mouse coordinator on mobile */
  }
}

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

/* --- End: components/hud.css --- */

/* --- Start: pages/home.css --- */
/* ── Trust Logos ── */
.trust-logos {
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-bg-white);
  padding: var(--space-48) 0;
  overflow: hidden;
}

.trust-logos__header {
  max-width: 1000px;
  margin: 0 auto var(--space-40);
  text-align: center;
}

.trust-logos__rows {
  display: grid;
  gap: var(--space-16);
}

.trust-logos__row {
  overflow: hidden;
  position: relative;
}

.trust-logos__track {
  display: inline-flex;
  align-items: center;
  gap: var(--space-16);
  width: max-content;
  animation: trust-logos-scroll 40s linear infinite;
}

.trust-logos__row--rtl .trust-logos__track {
  animation-direction: reverse;
}

.trust-logos__row--ltr .trust-logos__track {
  animation-direction: normal;
}

.trust-logos__row:hover .trust-logos__track {
  animation-play-state: running;
}

@keyframes trust-logos-scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.trust-logos__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
}

.trust-logos__item img {
  height: 170px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  opacity: 1;
}

.trust-logos__item:hover img {
  transform: none;
}

/* ── About Video ── */
.about-video__embed {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
  background-color: var(--color-bg-alt);
}

.about-video__embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ── Stats Section ── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-24);
}

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

.stat-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-32) var(--space-24);
  text-align: center;
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.stat-card>* {
  position: relative;
  z-index: 2;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(300px circle at var(--mouse-x, -9999px) var(--mouse-y, -9999px), rgba(245, 93, 45, 0.03), transparent 80%);
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-premium);
  opacity: 0;
}

.stat-card:hover::before {
  opacity: 1;
}

.stat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(245, 93, 45, 0.15);
  box-shadow: var(--shadow-md);
}

.stat-card__number {
  font-family: var(--font-primary);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 800;
  color: var(--color-primary);
  margin-bottom: var(--space-8);
  line-height: 1;
}

.stat-card__label {
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── Why Riverbird Features ── */
.why-riverbird__features {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  margin-top: var(--space-32);
}

@media (min-width: 1024px) {
  .why-riverbird__features {
    margin-top: 0;
  }
}

.why-feature {
  display: flex;
  gap: var(--space-20);
  align-items: flex-start;
  padding: var(--space-24);
  border-radius: var(--radius-md);
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  transition: all var(--transition-normal);
}

.why-feature:hover {
  background: var(--color-bg-white);
  border-color: rgba(245, 93, 45, 0.15);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.why-feature__num {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--font-primary);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(245, 93, 45, 0.12);
}

.why-feature__content {
  flex: 1;
}

.why-feature__content h3 {
  font-family: var(--font-primary);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-8);
}

/* ── Process Timeline ── */
.process-timeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
  max-width: 900px;
  margin: 0 auto;
}

.process-step-card {
  display: flex;
  gap: var(--space-24);
  padding: var(--space-32);
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: all var(--transition-normal);
  position: relative;
  box-shadow: var(--shadow-xs);
}

.process-step-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 0;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  transition: height 0.4s var(--ease-premium);
}

.process-step-card:hover::before {
  height: 100%;
}

.process-step-card:hover {
  transform: translateY(-4px);
  border-color: rgba(245, 93, 45, 0.15);
  box-shadow: var(--shadow-md);
}

.process-step-card__number {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 1.25rem;
  font-weight: 700;
  font-family: var(--font-primary);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(245, 93, 45, 0.12);
}

.process-step-card__content {
  flex: 1;
}

.process-step-card__content h3 {
  font-family: var(--font-primary);
  margin-bottom: var(--space-12);
}

.process-checklist {
  list-style: none;
  padding: 0;
  margin-top: var(--space-16);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
}

.process-checklist li {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.process-checklist li::before {
  content: '✓';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 0.6875rem;
  flex-shrink: 0;
}

/* ── Radial Orbital Technology Timeline Showcase ── */
.tech-stack-orbital-wrapper {
  width: 100%;
}

.orbital-system-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-64);
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  background: linear-gradient(135deg, rgba(245, 93, 45, 0.02) 0%, rgba(7, 0, 255, 0.02) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-64);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

.orbital-system {
  position: relative;
  width: 540px;
  height: 540px;
  flex-shrink: 0;
  transform-origin: center center;
}

.orbital-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 420px;
  height: 420px;
  transform: translate(-50%, -50%);
  border: 1.5px dashed rgba(17, 17, 17, 0.08);
  border-radius: 50%;
  pointer-events: none;
}

.orbital-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: var(--color-bg-white);
  border: 1.5px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.orbital-core:hover {
  border-color: rgba(245, 93, 45, 0.3);
  box-shadow: 0 0 20px rgba(245, 93, 45, 0.1);
}

.orbital-core-glow {
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 93, 45, 0.15) 0%, transparent 70%);
  animation: pulse-core-glow 3s infinite ease-in-out;
  z-index: -1;
  pointer-events: none;
}

@keyframes pulse-core-glow {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.5;
  }

  50% {
    transform: scale(1.15);
    opacity: 0.95;
  }
}

.orbital-core-text {
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--color-text-primary);
  text-align: center;
}

.orbital-nodes-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.orbital-node {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 12;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: transform 0.4s var(--ease-premium), border-color 0.4s ease, box-shadow 0.4s ease, background-color 0.4s ease;
}

.orbital-node-icon {
  width: 20px;
  height: 20px;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease, transform 0.3s ease;
}

.orbital-node-icon svg {
  width: 100%;
  height: 100%;
}

.orbital-node-label {
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-secondary);
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
  opacity: 0.8;
  pointer-events: none;
  transition: color 0.3s ease, opacity 0.3s ease, font-weight 0.3s ease;
}

.orbital-node:hover {
  transform: translate(-50%, -50%) scale(1.15) !important;
  border-color: rgba(245, 93, 45, 0.25);
  box-shadow: 0 0 15px rgba(245, 93, 45, 0.15);
  background-color: var(--color-bg-white);
}

.orbital-node:hover .orbital-node-icon {
  color: var(--color-primary);
  transform: scale(1.05);
}

.orbital-node.active {
  transform: translate(-50%, -50%) scale(1.25) !important;
  background-color: var(--color-primary-light);
  border-color: var(--color-primary);
  box-shadow: 0 0 20px rgba(245, 93, 45, 0.25);
  z-index: 15;
}

.orbital-node.active .orbital-node-icon {
  color: var(--color-primary);
}

.orbital-node.active .orbital-node-label {
  color: var(--color-primary);
  opacity: 1;
  font-weight: 700;
}

.orbital-node.related {
  animation: pulse-related-node 1.5s infinite alternate ease-in-out;
  border-color: var(--color-primary);
  box-shadow: 0 0 10px rgba(245, 93, 45, 0.12);
}

@keyframes pulse-related-node {
  0% {
    transform: translate(-50%, -50%) scale(1.05);
    box-shadow: 0 0 8px rgba(245, 93, 45, 0.1);
  }

  100% {
    transform: translate(-50%, -50%) scale(1.12);
    box-shadow: 0 0 18px rgba(245, 93, 45, 0.25);
  }
}

.orbital-connections-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

.connection-line {
  stroke: var(--color-primary);
  stroke-width: 1.5;
  stroke-dasharray: 6 4;
  animation: dash 30s linear infinite;
  opacity: 0.6;
}

.connection-line-core {
  stroke: var(--color-secondary);
  stroke-width: 1.5;
  opacity: 0.5;
}

@keyframes dash {
  to {
    stroke-dashoffset: -1000;
  }
}

/* Info Panel Styling */
.orbital-info-panel {
  flex: 1;
  min-width: 320px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-32);
  box-shadow: var(--shadow-sm);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: all var(--transition-normal);
}

.orbital-info-panel:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(245, 93, 45, 0.12);
}

.orbital-info-panel-glow {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(245, 93, 45, 0.04) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.orbital-info-placeholder {
  color: var(--color-text-muted);
  font-family: var(--font-secondary);
  font-size: 0.9375rem;
  line-height: 1.6;
  text-align: center;
}

.orbital-info-content {
  animation: fadeIn 0.4s ease;
}

.info-title {
  font-family: var(--font-primary);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

.info-category {
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: inline-block;
  margin-bottom: var(--space-16);
  padding: 2px 8px;
  background: var(--color-primary-light);
  border-radius: var(--radius-sm);
}

.info-desc {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-bottom: var(--space-20);
}

.info-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-16);
  margin-bottom: var(--space-20);
  border-top: 1px dashed var(--color-border);
  border-bottom: 1px dashed var(--color-border);
  padding: var(--space-16) 0;
}

.info-meta-item {
  font-family: var(--font-secondary);
  font-size: 0.8125rem;
  color: var(--color-text-primary);
}

.info-meta-item strong {
  color: var(--color-text-muted);
  display: block;
  font-size: 0.75rem;
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.info-related {
  font-family: var(--font-secondary);
  font-size: 0.8125rem;
}

.info-related strong {
  color: var(--color-text-muted);
  display: block;
  font-size: 0.75rem;
  margin-bottom: var(--space-8);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.info-related-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.related-tag {
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 4px 10px;
  font-size: 0.75rem;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.related-tag:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background-color: var(--color-primary-light);
}

/* Responsive constraints for Orbit */
@media (max-width: 1024px) {
  .orbital-system-container {
    gap: var(--space-32);
    padding: var(--space-48);
  }
}

@media (max-width: 900px) {
  .orbital-system-container {
    flex-direction: column;
    padding: var(--space-48) var(--space-32);
    gap: var(--space-40);
  }

  .orbital-system {
    transform: scale(0.85);
    margin: -30px 0;
  }
}

@media (max-width: 600px) {
  .orbital-system-container {
    padding: var(--space-32) var(--space-16);
    gap: var(--space-24);
  }

  .orbital-system {
    transform: scale(0.62);
    margin: -90px 0;
  }
}

@media (max-width: 400px) {
  .orbital-system {
    transform: scale(0.5);
    margin: -130px 0;
  }
}

/* ── Digital Operations Directory HUD Section ── */
.directory-dashboard {
  position: relative;
  background: var(--color-bg-white) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-48) var(--space-32) !important;
  margin-top: var(--space-48);
  box-shadow: var(--shadow-xs) !important;
  overflow: hidden;
  font-family: inherit !important;
}

.hud-panel {
  position: relative;
}

/* Bracket Corner Lines - Refined and Thin */
.hud-corners {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 10;
}

.hud-corner {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid rgba(245, 93, 45, 0.3);
}

.hud-corner.top-left {
  top: var(--space-16);
  left: var(--space-16);
  border-right: none;
  border-bottom: none;
}

.hud-corner.top-right {
  top: var(--space-16);
  right: var(--space-16);
  border-left: none;
  border-bottom: none;
}

.hud-corner.bottom-left {
  bottom: var(--space-16);
  left: var(--space-16);
  border-right: none;
  border-top: none;
}

.hud-corner.bottom-right {
  bottom: var(--space-16);
  right: var(--space-16);
  border-left: none;
  border-top: none;
}

/* Grid layout for 4 operational categories */
.directory-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
  position: relative;
  z-index: 2;
}

@media (min-width: 768px) {
  .directory-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .directory-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.directory-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.directory-column__header {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding-bottom: var(--space-12);
  border-bottom: 1.5px dashed var(--color-border);
}

.directory-column__icon {
  font-size: 1.125rem;
}

.directory-column__title {
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.directory-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.directory-link {
  display: block;
  padding: var(--space-12) var(--space-16);
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--color-bg-light);
  transition: all var(--transition-normal);
}

.directory-link:hover {
  background: var(--color-bg-white);
  border-color: rgba(245, 93, 45, 0.15);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.directory-link__title {
  display: block;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
  transition: color var(--transition-fast);
}

.directory-link:hover .directory-link__title {
  color: var(--color-primary);
}

.directory-link__desc {
  display: block;
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--color-text-muted);
}

/* HUD Footer Tickers */
.directory-hud-footer {
  margin-top: var(--space-32);
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
}

.directory-hud-coord {
  font-family: var(--font-secondary);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--color-text-muted);
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.directory-hud-grid-lines {
  flex: 1;
  height: 1px;
  background-image: linear-gradient(90deg, var(--color-border) 50%, transparent 50%);
  background-size: 8px 1px;
  margin: 0 var(--space-16);
  opacity: 0.3;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .why-feature {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .why-feature:hover {
    transform: translateY(-4px);
  }

  .process-step-card {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .process-step-card:hover {
    transform: translateY(-4px);
  }

  .process-checklist {
    grid-template-columns: 1fr;
    text-align: left;
  }
}

/* ── Personal Brand Section ── */
.personal-brand__stats {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
  .personal-brand__stats {
    gap: var(--space-12);
  }

  .personal-brand__stats .stat-card {
    padding: var(--space-16) var(--space-8);
  }

  .personal-brand__stats .stat-card__number {
    font-size: 1.5rem;
  }

  .personal-brand__stats .stat-card__label {
    font-size: 0.625rem;
    letter-spacing: 0.02em;
  }
}

@media (max-width: 480px) {
  .personal-brand__stats {
    gap: var(--space-8);
  }

  .personal-brand__stats .stat-card {
    padding: var(--space-12) var(--space-4);
  }

  .personal-brand__stats .stat-card__number {
    font-size: 1.25rem;
  }

  .personal-brand__stats .stat-card__label {
    font-size: 0.5625rem;
  }
}

.personal-brand__video {

  display: flex;
  justify-content: center;
  align-items: center;
}

.personal-brand__video video {
  width: 280px;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  transition: transform 0.4s var(--ease-premium);
}

.personal-brand__video:hover video {
  transform: translateY(-8px);
}

@media (max-width: 1024px) {
  .personal-brand__video video {
    width: 240px;
  }
}

@media (max-width: 768px) {
  .personal-brand__video {
    margin-top: var(--space-64);
  }

  .personal-brand__video video {
    width: 220px;
  }
}

@media (max-width: 480px) {
  .personal-brand__video video {
    width: 180px;
  }
}

/* ── Season Banner ── */
.season-banner {
  background-color: #d4ee36;
  color: #000000;
  font-family: var(--font-secondary);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--space-12) 0;
  overflow: hidden;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  width: 100%;
  position: relative;
  z-index: 10;
}

.season-banner__marquee {
  display: flex;
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.season-banner__marquee:hover .season-banner__track {
  animation-play-state: paused;
}

.season-banner__track {
  display: flex;
  width: max-content;
  animation: season-banner-scroll 35s linear infinite;
}

.season-banner__set {
  display: flex;
  align-items: center;
  gap: var(--space-64);
  padding-right: var(--space-64);
  flex-shrink: 0;
}

.season-banner__set span {
  white-space: nowrap;
}

@keyframes season-banner-scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* ── Stacked Cards Section ── */
.stack-section {
  position: relative;
  overflow: visible;
}

.stack-card-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
  width: 100%;
  margin: var(--space-48) auto 0;
  position: relative;
}

.stack-card {
  position: sticky;
  display: flex;
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  min-height: 460px;
  overflow: hidden;
  transform-origin: center top;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.stack-card:hover {
  box-shadow: var(--shadow-lg);
}

/* Stacking top offset and progressive z-indexing */
.stack-card:nth-child(1) {
  top: 100px;
  z-index: 1;
}

.stack-card:nth-child(2) {
  top: 120px;
  z-index: 2;
}

.stack-card:nth-child(3) {
  top: 140px;
  z-index: 3;
}

.stack-card:nth-child(4) {
  top: 160px;
  z-index: 4;
}

.stack-card__content {
  flex: 1 1 50%;
  padding: var(--space-48);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  z-index: 2;
  background-color: var(--color-bg-white);
}

.stack-card__tag {
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-12);
  padding: 4px 10px;
  background: var(--color-primary-light);
  border-radius: var(--radius-sm);
}

.stack-card__title {
  font-family: var(--font-primary);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-16);
  letter-spacing: -0.02em;
}

.stack-card__desc {
  font-family: var(--font-secondary);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-bottom: var(--space-20);
}

.stack-card__bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-32) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.stack-card__bullets li {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  color: var(--color-text-dark);
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.stack-card__bullets li::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: var(--color-primary);
  border-radius: 50%;
  flex-shrink: 0;
}

.stack-card__image-container {
  flex: 1 1 50%;
  position: relative;
  overflow: hidden;
  min-height: 100%;
}

.stack-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.stack-card:hover .stack-card__image {
  transform: scale(1.04);
}

/* Responsiveness */
@media (max-width: 768px) {
  .stack-card {
    flex-direction: column-reverse;
    min-height: auto;
  }

  .stack-card:nth-child(1) {
    top: 60px;
  }

  .stack-card:nth-child(2) {
    top: 75px;
  }

  .stack-card:nth-child(3) {
    top: 90px;
  }

  .stack-card:nth-child(4) {
    top: 105px;
  }

  .stack-card__content {
    padding: var(--space-32) var(--space-24);
  }

  .stack-card__image-container {
    height: 200px;
    /* slightly more compact image for mobile heights */
  }
}

/* Home FAQ */


.home-faq__list {
  margin-top: var(--space-48);
}

.home-faq .faq-item {
  background-color: var(--color-bg-white);
}

.home-faq .faq-question {
  list-style: none;
  gap: var(--space-16);
}

.home-faq .faq-question::-webkit-details-marker {
  display: none;
}

.home-faq .faq-question svg {
  flex: 0 0 auto;
}

.home-faq .faq-item[open] {
  border-color: rgba(245, 93, 45, 0.15);
  box-shadow: var(--shadow-sm);
}

.home-faq .faq-item[open] .faq-question {
  color: var(--color-primary);
}

.home-faq .faq-item[open] .faq-question svg {
  transform: rotate(180deg);
  color: var(--color-primary);
}

.home-faq .faq-answer {
  max-height: none;
  padding: 0 var(--space-24) var(--space-24);
}

.home-faq .faq-answer .body-text {
  max-width: 720px;
}

@media (max-width: 768px) {
  .home-faq__list {
    margin-top: var(--space-32);
  }

  .home-faq .faq-question {
    padding: var(--space-20);
    font-size: 1rem;
  }

  .home-faq .faq-answer {
    padding: 0 var(--space-20) var(--space-20);
  }
}

/* Home Contact Form */
.home-contact {

  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(245, 93, 45, 0.16) 0%, rgba(255, 143, 107, 0.1) 32%, rgba(255, 255, 255, 0.94) 58%, rgba(255, 243, 235, 0.96) 100%),
    linear-gradient(165deg, #FFFFFF 0%, #FFF7F1 38%, #FFE9DC 100%);
}

.home-contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 68% 56% at 8% 14%, rgba(245, 93, 45, 0.24) 0%, transparent 66%),
    radial-gradient(ellipse 58% 46% at 86% 86%, rgba(255, 143, 107, 0.18) 0%, transparent 64%),
    radial-gradient(ellipse 38% 34% at 42% 22%, rgba(245, 93, 45, 0.08) 0%, transparent 72%);
  pointer-events: none;
  z-index: 0;
}

.home-contact__grid {
  align-items: start;
  position: relative;
  z-index: 1;
}

.home-contact__content {
  max-width: 520px;
  position: sticky;
  top: calc(var(--header-height) + var(--space-32));
  text-align: left;
  justify-self: start;
}

.home-contact__content>* {
  text-align: left;
}

.home-contact__content h2.h1 {
  margin-top: var(--space-12);
  margin-bottom: var(--space-24);
  margin-left: 0;
  margin-right: auto;
  text-align: left !important;
}

.home-contact__actions {
  display: flex;
  align-items: stretch;
  gap: var(--space-12);
  flex-wrap: wrap;
  margin-top: var(--space-32);
}

.home-contact__whatsapp {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  padding: 12px var(--space-16);
  border: 1px solid rgba(37, 211, 102, 0.28);
  border-radius: var(--radius-sm);
  background-color: rgba(37, 211, 102, 0.08);
  color: #128c4a;
  font-family: var(--font-secondary);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  transition: transform var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

.home-contact__whatsapp:hover {
  border-color: rgba(37, 211, 102, 0.48);
  background-color: rgba(37, 211, 102, 0.12);
  transform: translateY(-2px);
}

.home-contact__whatsapp img {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
}

.home-contact__visit {
  min-height: 52px;
}

.home-contact__form {
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.home-contact__fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-24);
}

.home-contact__radio-group {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-12);
}

.home-contact__radio-option {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: 12px var(--space-12);
  border: 1.5px solid var(--color-border-hover);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-white);
  color: var(--color-text-dark);
  font-family: var(--font-secondary);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.home-contact__radio-option:hover,
.home-contact__radio-option:has(input:checked) {
  border-color: var(--color-primary);
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

.home-contact__radio-option input {
  flex: 0 0 auto;
  accent-color: var(--color-primary);
}

.home-contact__submit {
  width: 100%;
}

@media (max-width: 768px) {
  .home-contact__content {
    position: static;
    max-width: none;
  }

  .home-contact__actions {
    flex-direction: column;
  }

  .home-contact__whatsapp,
  .home-contact__visit {
    width: 100%;
    justify-content: center;
  }

  .home-contact__radio-group {
    grid-template-columns: 1fr;
  }
}

/* --- End: pages/home.css --- */

/* --- Start: pages/company.css --- */
body[data-page="company"] .section-padding {
  padding-top: var(--space-64);
  padding-bottom: var(--space-64);
}

@media (min-width: 768px) {
  body[data-page="company"] .section-padding {
    padding-top: var(--space-80);
    padding-bottom: var(--space-80);
  }
}
/* ── Company Story Timeline ── */
.story-timeline {
  position: relative;
  margin-top: var(--space-64);
  padding-left: var(--space-32);
}

.story-timeline::after {
  content: '';
  position: absolute;
  top: 0;
  left: 4px;
  width: 2px;
  height: 100%;
  background-color: var(--color-border);
}

.story-timeline__progress {
  position: absolute;
  top: 0;
  left: 4px;
  z-index: 2;
  width: 2px;
  height: 100%;
  background-color: var(--color-primary);
  transform: scaleY(var(--story-progress, 0));
  transform-origin: top;
  transition: transform 120ms linear;
}

.story-node {
  position: relative;
  margin-bottom: var(--space-48);
}

.story-node::after {
  content: '';
  position: absolute;
  top: 6px;
  left: -32px;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background-color: var(--color-bg-white);
  border: 2px solid var(--color-border);
  z-index: 5;
  box-shadow: 0 0 0 4px rgba(17, 17, 17, 0.06);
  transition: background-color var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal);
}

.story-node.story-node--active::after {
  background-color: var(--color-primary);
  border-color: var(--color-bg-white);
  box-shadow: 0 0 0 4px rgba(245, 93, 45, 0.18);
  transform: scale(1.15);
}

.story-node__year {
  font-family: var(--font-primary);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
  display: inline-block;
  transition: color var(--transition-normal);
}

.story-node.story-node--active .story-node__year {
  color: var(--color-primary);
}

.story-node__title {
  margin-bottom: var(--space-12);
  font-family: var(--font-primary);
}

/* ── Company Core Values ── */
.values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
}

@media (min-width: 768px) {
  .values-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.value-card {
  padding: var(--space-32);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-white);
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.value-card>* {
  position: relative;
  z-index: 2;
}

.value-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(400px circle at var(--mouse-x, -9999px) var(--mouse-y, -9999px), rgba(245, 93, 45, 0.03), transparent 80%);
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-premium);
  opacity: 0;
}

.value-card:hover::before {
  opacity: 1;
}

.value-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(245, 93, 45, 0.15);
}

.value-card__num {
  font-family: var(--font-primary);
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-primary);
  opacity: 0.12;
  margin-bottom: var(--space-16);
  line-height: 1;
}

.value-card__title {
  margin-bottom: var(--space-12);
  font-family: var(--font-primary);
}

/* ── Interactive Mission & Vision Section ── */
#mission-vision {
  position: relative;
  overflow: hidden;
}

#mission-vision .mission-vision__grid {
  display: none;
}

.philosophy-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  gap: var(--space-64);
  align-items: start;
  margin-bottom: var(--space-64);
}

.philosophy-intro__title {
  margin: 0;
  color: #161616;
  font-family: var(--font-primary);
  font-size: clamp(2.25rem, 4vw, 3.4rem);
  font-weight: 800;
  line-height: 1.2;
}

.philosophy-intro__title em {
  font-weight: 400;
}

.philosophy-intro__copy {
  max-width: 720px;
  margin: 0;
  color: #3E527A;
  font-family: var(--font-secondary);
  font-size: 1rem;
  line-height: 1.9;
}

.philosophy-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-20);
}

.philosophy-panel {
  position: relative;
  min-height: 360px;
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(0, 1fr);
  gap: var(--space-24);
  align-items: center;
  overflow: hidden;
  padding: var(--space-40);
  border-radius: var(--radius-lg);
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  color: #111111;
}

.philosophy-panel__image {
  width: 100%;
  max-width: 220px;
  max-height: 220px;
  justify-self: center;
  object-fit: contain;
}

.philosophy-panel__eyebrow {
  display: block;
  margin-bottom: var(--space-16);
  font-family: var(--font-secondary);
  font-size: 0.9rem;
  font-weight: 600;
}

.philosophy-panel h3 {
  margin: 0 0 var(--space-20);
  font-family: var(--font-primary);
  font-size: clamp(1.4rem, 2vw, 2rem);
  font-weight: 800;
  line-height: 1.2;
}

.philosophy-panel p {
  margin: 0;
  font-family: var(--font-secondary);
  font-size: 0.95rem;
  line-height: 1.7;
}

@media (max-width: 768px) {
  .philosophy-intro,
  .philosophy-panels {
    grid-template-columns: 1fr;
  }

  .philosophy-intro {
    gap: var(--space-24);
    margin-bottom: var(--space-40);
  }

  .philosophy-panel {
    min-height: 0;
    grid-template-columns: 92px minmax(0, 1fr);
    padding: var(--space-28);
  }

  .philosophy-panel__image {
    max-width: 80px;
    max-height: 80px;
  }
}

.mission-vision__grid {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 20px;
  align-items: center;
  max-width: var(--max-width-grid);
  margin: 0 auto;
}

.founder-profile {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.founder-profile__image {
  display: block;
  width: min(156px, 100%);
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: center;
  background: #F4F5F7;
  margin: var(--space-28) auto 0;
  border: 4px solid #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(17, 17, 17, 0.12);
}

.founder-profile__content {
  padding: var(--space-28);
  text-align: center;
}

.founder-profile__label {
  display: block;
  margin-bottom: var(--space-8);
  color: var(--color-primary);
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.founder-profile__name {
  margin: 0 0 var(--space-12);
  color: var(--color-text-primary);
  font-family: var(--font-primary);
  font-size: 1.65rem;
  font-weight: 800;
}

.founder-profile__bio {
  margin: 0;
  color: var(--color-text-muted);
  font-family: var(--font-secondary);
  font-size: 0.95rem;
  line-height: 1.7;
}

.founder-profile__bio strong {
  color: var(--color-text-primary);
  font-weight: 700;
}

.founder-profile__socials {
  display: flex;
  justify-content: center;
  gap: var(--space-12);
  margin-top: var(--space-24);
}

.founder-profile__socials a {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text-primary);
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.founder-profile__socials a:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.founder-profile__socials svg {
  width: 19px;
  height: 19px;
}

.founder-profile__cofounder {
  border-top: 1px solid var(--color-border);
}

@media (max-width: 992px) {
  .mission-vision__grid {
    grid-template-columns: 1fr;
    gap: var(--space-40);
  }

  .founder-profile {
    max-width: 680px;
    margin: 0 auto;
  }
}

/* Values Wheel Container */
.card-values-wheel {
  position: relative;
  background: linear-gradient(145deg, #070709 0%, #101014 100%);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-xl);
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 530px;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.02);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-32) var(--space-32) var(--space-24) var(--space-32);
}

@media (max-width: 576px) {
  .card-values-wheel {
    aspect-ratio: auto;
    height: auto;
    min-height: 520px;
    padding: var(--space-20) var(--space-20) var(--space-16) var(--space-20);
  }
}

/* Orbits and pentagons background graphic */
.values-wheel__connections {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}

.orbit-line-outer {
  fill: none;
  stroke: rgba(245, 93, 45, 0.04);
  stroke-width: 1.5;
}

.orbit-line-mid {
  fill: none;
  stroke: rgba(245, 93, 45, 0.03);
  stroke-width: 1.5;
  stroke-dasharray: 4 8;
}

.orbit-line-inner {
  fill: none;
  stroke: rgba(245, 93, 45, 0.08);
  stroke-width: 1.5;
}

.pentagon-line {
  fill: none;
  stroke: rgba(245, 93, 45, 0.06);
  stroke-width: 1.25;
}

.connector-line {
  fill: none;
  stroke: rgba(245, 93, 45, 0.12);
  stroke-width: 1.5;
  transition: stroke var(--transition-normal), stroke-width var(--transition-normal), filter var(--transition-normal);
}

.connector-line.is-active {
  stroke: var(--color-primary);
  stroke-width: 2.2px;
  filter: drop-shadow(0 0 5px rgba(245, 93, 45, 0.7));
}

/* Center Logo Area */
.values-wheel__center {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: #060608;
  border: 1.5px solid rgba(245, 93, 45, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  box-shadow: 0 0 35px rgba(245, 93, 45, 0.12), inset 0 0 15px rgba(245, 93, 45, 0.06);
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.values-wheel__center:hover {
  border-color: rgba(245, 93, 45, 0.5);
  box-shadow: 0 0 45px rgba(245, 93, 45, 0.25), inset 0 0 20px rgba(245, 93, 45, 0.1);
}

.values-wheel__center-glow {
  position: absolute;
  top: -16px;
  left: -16px;
  right: -16px;
  bottom: -16px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 93, 45, 0.18) 0%, transparent 70%);
  z-index: -1;
  pointer-events: none;
  animation: pulse-wheel-glow 4s infinite ease-in-out;
}

@keyframes pulse-wheel-glow {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.75;
  }

  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

.values-wheel__logo-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Individual Interactive Nodes */
.values-node {
  position: absolute;
  width: 0;
  height: 0;
  z-index: 5;
  cursor: pointer;
}

.values-node__circle {
  position: absolute;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #0B0A0E;
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.65);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  z-index: 6;
  transition: all var(--transition-normal);
}

.values-node__circle svg {
  transition: transform var(--transition-normal);
}

.values-node__content {
  opacity: 0.5;
  transition: opacity var(--transition-normal), transform var(--transition-normal);
  pointer-events: none;
}

.values-node__title {
  font-family: var(--font-primary);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-bg-white);
  margin-bottom: 2px;
  letter-spacing: 0.3px;
}

.values-node__desc {
  font-family: var(--font-secondary);
  font-size: 0.72rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 400;
}

/* Node layout alignments based on angular position */
.node-innovation .values-node__content {
  position: absolute;
  left: 28px;
  top: 50%;
  transform: translateY(-50%);
  width: 155px;
  text-align: left;
}

.node-creativity .values-node__content {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: 125px;
  text-align: center;
}

.node-growth .values-node__content {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: 135px;
  text-align: center;
}

.node-transparency .values-node__content {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: 135px;
  text-align: center;
}

.node-strategy .values-node__content {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: 125px;
  text-align: center;
}

/* Responsive Node content shifts for mobile viewports */
@media (max-width: 576px) {
  .node-innovation .values-node__content {
    left: 24px;
    width: 120px;
  }

  .node-creativity .values-node__content,
  .node-growth .values-node__content,
  .node-transparency .values-node__content,
  .node-strategy .values-node__content {
    width: 110px;
  }
}

/* Hover and active glow states for nodes */
.values-node:hover .values-node__circle,
.values-node.is-active .values-node__circle {
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: 0 0 25px rgba(245, 93, 45, 0.45);
  transform: translate(-50%, -50%) scale(1.1);
}

.values-node:hover .values-node__circle svg,
.values-node.is-active .values-node__circle svg {
  transform: scale(1.15);
}

.values-node:hover .values-node__content,
.values-node.is-active .values-node__content {
  opacity: 1;
}

.values-node:hover .values-node__content .values-node__title,
.values-node.is-active .values-node__content .values-node__title {
  color: var(--color-primary);
}

.values-node:hover .values-node__content .values-node__desc,
.values-node.is-active .values-node__content .values-node__desc {
  color: rgba(255, 255, 255, 0.9);
}

/* Skyline silhouette layout */
.values-wheel__skyline {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 90px;
  pointer-events: none;
  z-index: 2;
  opacity: 0.65;
}

/* Bottom values motto */
.values-wheel__motto {
  position: relative;
  z-index: 3;
  width: 100%;
  text-align: center;
  font-family: var(--font-secondary);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.8px;
  color: rgba(255, 255, 255, 0.35);
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: var(--space-16);
}

/* Hide desktop line breaks on mobile */
@media (max-width: 768px) {
  .hide-mobile {
    display: none;
  }
}

/* ── Right Column: Stacked Cards ── */
.mission-vision__cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
}

@media (min-width: 993px) {
  .mission-vision__cards {
    align-self: stretch;
    height: 100%;
  }

  .mission-vision__cards .vision-mission-card {
    flex: 1 1 0;
  }
}

.vision-mission-card {
  padding: 20px;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
  border: 1px solid;
}

.vision-mission-card:hover {
  transform: translateY(-4px);
}

.vision-mission-card--vision {
  background-color: #FDF7F5;
  /* Warm light peach/orange tint */
  border-color: rgba(245, 93, 45, 0.06);
  box-shadow: var(--shadow-sm);
}

.vision-mission-card--vision:hover {
  border-color: rgba(245, 93, 45, 0.16);
  box-shadow: var(--shadow-md), 0 10px 30px rgba(245, 93, 45, 0.04);
}

.vision-mission-card--vision .vision-mission-card__icon-box {
  background-color: #FDE8DE;
  color: var(--color-primary);
}

.vision-mission-card--mission {
  background-color: #F4F5F7;
  /* Cool light grey tint */
  border-color: rgba(17, 17, 17, 0.03);
  box-shadow: var(--shadow-sm);
}

.vision-mission-card--mission:hover {
  border-color: rgba(17, 17, 17, 0.08);
  box-shadow: var(--shadow-md), 0 10px 30px rgba(17, 17, 17, 0.02);
}

.vision-mission-card--mission .vision-mission-card__icon-box {
  background-color: #E5E7EB;
  color: #4B5563;
}

.vision-mission-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.vision-mission-card__icon-box {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.vision-mission-card__title {
  font-family: var(--font-primary);
  font-size: 1.65rem;
  font-weight: 800;
  color: #111111;
  letter-spacing: -0.3px;
}

.vision-mission-card--vision .vision-mission-card__title {
  color: #EB4F1C;
}

.vision-mission-card--mission .vision-mission-card__title {
  color: #EB4F1C;
  /* Matches Vision color style */
}

.vision-mission-card__desc {
  font-family: var(--font-secondary);
  font-size: 0.96rem;
  line-height: 1.7;
  color: #2F2A38;
  font-weight: 400;
}

.vision-mission-card__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  margin-top: var(--space-8);
  border-top: 1.5px solid rgba(17, 17, 17, 0.04);
  padding-top: var(--space-20);
}

.vision-mission-card__tagline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-12);
  font-family: var(--font-secondary);
  font-size: 0.85rem;
  color: #4B5563;
  font-weight: 600;
}

.vision-mission-card__tagline span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
}

.vision-mission-card__tagline span svg {
  color: #F55D2D;
}

.vision-mission-card__tagline .divider {
  width: 1px;
  height: 14px;
  background-color: rgba(17, 17, 17, 0.1);
}

.vision-mission-card__pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-full);
  font-family: var(--font-secondary);
  font-size: 0.85rem;
  font-weight: 700;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.vision-mission-card--vision .vision-mission-card__pill {
  background-color: #FDE8DE;
  color: var(--color-primary);
}

.vision-mission-card--mission .vision-mission-card__pill {
  background-color: #E5E7EB;
  color: #4B5563;
}

@media (max-width: 576px) {
  .vision-mission-card {
    padding: var(--space-24);
  }

  .vision-mission-card__tagline {
    font-size: 0.8rem;
    gap: var(--space-8);
  }

  .vision-mission-card__title {
    font-size: 1.4rem;
  }
}

/* --- End: pages/company.css --- */

/* --- Start: pages/development.css --- */
/* ── Development Process Steps - Bento Grid ── */
.process-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
  margin-top: var(--space-48);
}

@media (min-width: 768px) {
  .process-steps {
    grid-template-columns: repeat(6, 1fr);
  }

  .bento-process-card:nth-child(1) {
    grid-column: span 4;
  }

  .bento-process-card:nth-child(2) {
    grid-column: span 2;
  }

  .bento-process-card:nth-child(3) {
    grid-column: span 3;
  }

  .bento-process-card:nth-child(4) {
    grid-column: span 3;
  }
}

.bento-process-card {
  position: relative;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: var(--border-neumorphic);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-neumorphic-out);
}

.bento-process-card__inner {
  position: relative;
  padding: var(--space-32) var(--space-28);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  z-index: 2;
}

.bento-process-card__dot-grid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(rgba(245, 93, 45, 0.05) 1px, transparent 0);
  background-size: 16px 16px;
  pointer-events: none;
  opacity: 0.8;
  transition: opacity 0.4s ease;
  z-index: 1;
}

.bento-process-card--featured {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(253, 245, 242, 0.4) 100%);
  border: 1px solid rgba(245, 93, 45, 0.08);
}

.bento-process-card--featured .bento-process-card__dot-grid {
  background-image: radial-gradient(rgba(245, 93, 45, 0.09) 1px, transparent 0);
}

.bento-process-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
}

.bento-process-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--color-bg-white);
  border: var(--border-neumorphic);
  box-shadow: var(--shadow-neumorphic-in);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.bento-process-card__step {
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(245, 93, 45, 0.4);
  letter-spacing: 0.15em;
  background: rgba(245, 93, 45, 0.04);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(245, 93, 45, 0.05);
}

.bento-process-card__title {
  font-family: var(--font-primary);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin: 0;
  line-height: 1.25;
  z-index: 2;
}

.bento-process-card__desc {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
  z-index: 2;
}

.bento-process-card:hover {
  transform: translateY(-3px);
  border-color: rgba(245, 93, 45, 0.08);
  box-shadow: var(--shadow-neumorphic-out-hover);
}

.bento-process-card:hover .bento-process-card__icon {
  background: var(--color-bg-white);
  color: var(--color-primary);
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow: var(--shadow-neumorphic-in-hover);
  transform: scale(1.03);
}

.bento-process-card:hover .bento-process-card__step {
  color: var(--color-primary);
  background: rgba(245, 93, 45, 0.08);
  border-color: rgba(245, 93, 45, 0.15);
}

.bento-process-card:hover .bento-process-card__dot-grid {
  opacity: 0.4;
}

/* ── Tech Stack Grid ── */
.tech-stack-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-24);
}

@media (min-width: 768px) {
  .tech-stack-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.tech-item {
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-24);
  text-align: center;
  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: var(--shadow-xs);
}

.tech-item:hover {
  border-color: rgba(245, 93, 45, 0.15);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.tech-item__icon {
  font-size: 2rem;
  margin-bottom: var(--space-12);
  display: inline-block;
  color: var(--color-primary);
}

.tech-item__name {
  font-family: var(--font-secondary);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-text-primary);
}

/* ── FAQ Section ── */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-white);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.faq-item:hover {
  border-color: rgba(245, 93, 45, 0.12);
  box-shadow: var(--shadow-sm);
}

.faq-question {
  width: 100%;
  padding: var(--space-24);
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--color-text-primary);
  cursor: pointer;
  background: none;
  border: none;
  transition: color var(--transition-fast);
}

.faq-question:hover {
  color: var(--color-primary);
}

.faq-question svg {
  transition: transform var(--transition-normal);
  color: var(--color-text-muted);
}

.faq-item--open {
  border-color: rgba(245, 93, 45, 0.15);
  box-shadow: var(--shadow-sm);
}

.faq-item--open .faq-question {
  color: var(--color-primary);
}

.faq-item--open .faq-question svg {
  transform: rotate(180deg);
  color: var(--color-primary);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-normal) ease-out, padding var(--transition-normal);
}

.faq-item--open .faq-answer {
  max-height: 300px;
  padding: 0 var(--space-24) var(--space-24) var(--space-24);
}

/* ── Telemetry Dashboard & Performance Sections ── */
.telemetry-dashboard {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
  margin-top: var(--space-48);
}

@media (min-width: 992px) {
  .telemetry-dashboard {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
  }
}

.telemetry-media-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
  align-items: stretch;
}

@media (min-width: 600px) {
  .telemetry-media-group {
    grid-template-columns: repeat(2, 1fr);
  }
}

.telemetry-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-40);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.telemetry-card:hover {
  border-color: rgba(245, 93, 45, 0.2);
  box-shadow: var(--shadow-md);
}

.telemetry-title {
  font-family: var(--font-primary);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: var(--space-8);
  color: var(--color-text-primary);
}

.telemetry-desc {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  margin-bottom: var(--space-32);
}

/* Metrics Grid */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-24);
}

.metric-item {
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-24);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color var(--transition-normal), transform var(--transition-normal);
}

.metric-item:hover {
  border-color: rgba(245, 93, 45, 0.15);
  transform: translateY(-2px);
}

.metric-val {
  font-family: var(--font-primary);
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: var(--space-8);
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
}

.metric-label {
  font-family: var(--font-secondary);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-4);
}

.metric-details {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* Graphic/Schematic Panel */
.schematic-panel {
  background: linear-gradient(135deg, var(--color-bg-white) 0%, var(--color-bg-alt) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-40);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 380px;
  overflow: hidden;
}

.schematic-panel::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(rgba(17, 17, 17, 0.02) 1px, transparent 0);
  background-size: 20px 20px;
  pointer-events: none;
}

.schematic-container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* Animated SVG path styles */
.schematic-svg {
  width: 100%;
  height: auto;
}

.schematic-pulse-node {
  animation: svg-pulse 3s infinite ease-in-out;
}

.schematic-dash-line {
  stroke-dasharray: 6, 6;
  animation: svg-dash 20s infinite linear;
}

@keyframes svg-pulse {

  0%,
  100% {
    r: 5px;
    fill-opacity: 0.4;
  }

  50% {
    r: 9px;
    fill-opacity: 0.9;
  }
}

@keyframes svg-dash {
  to {
    stroke-dashoffset: -1000;
  }
}

/* ── Pathway / Roadmap Steps ── */
.timeline-pathway {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  position: relative;
  margin-top: var(--space-48);
}

.timeline-pathway::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20px;
  width: 2px;
  height: 100%;
  background: var(--color-border);
  z-index: 1;
}

@media (min-width: 768px) {
  .timeline-pathway {
    flex-direction: row;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-20);
  }

  .timeline-pathway::before {
    top: 36px;
    left: 0;
    width: 100%;
    height: 2px;
  }
}

.timeline-node {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-24);
  position: relative;
  z-index: 2;
  transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
  display: flex;
  flex-direction: column;
}

.timeline-node:hover {
  transform: translateY(-6px);
  border-color: rgba(245, 93, 45, 0.25);
  box-shadow: var(--shadow-md);
}

.timeline-badge {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-primary);
  font-weight: 700;
  margin-bottom: var(--space-16);
  border: 1px solid rgba(245, 93, 45, 0.15);
  font-size: 0.8125rem;
  transition: background var(--transition-normal), color var(--transition-normal);
}

.timeline-node:hover .timeline-badge {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.timeline-title {
  font-family: var(--font-primary);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-8);
  line-height: 1.3;
}

.timeline-desc {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* ── Media Animations ── */
@keyframes scroll-logs {
  0% {
    transform: translateY(0);
  }

  90% {
    transform: translateY(-160px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes scan-sweep {
  0% {
    top: 0%;
    opacity: 0.1;
  }

  50% {
    top: 100%;
    opacity: 1;
  }

  100% {
    top: 0%;
    opacity: 0.1;
  }
}

@keyframes sync-pulse {

  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.9);
  }

  50% {
    opacity: 1;
    transform: scale(1.3);
  }
}

.terminal-scroller {
  animation: scroll-logs 12s infinite linear;
}

.web-scanner-line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, rgba(245, 93, 45, 0), var(--color-primary), rgba(245, 93, 45, 0));
  animation: scan-sweep 4s infinite ease-in-out;
  pointer-events: none;
  z-index: 3;
}

.sync-ping {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--color-secondary);
  border-radius: 50%;
  animation: sync-pulse 1.5s infinite ease-in-out;
}

/* ── Animated Background Visuals for CTA Sections ── */
.cta-section {
  position: relative;
  overflow: hidden;
}

.cta-bg-visual {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.cta-orb {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.12;
  pointer-events: none;
}

.cta-orb--1 {
  background: var(--color-primary);
  top: -10%;
  left: 10%;
  animation: float-slow 15s infinite ease-in-out alternate;
}

.cta-orb--2 {
  background: var(--color-secondary);
  bottom: -15%;
  right: 15%;
  animation: float-slow 20s infinite ease-in-out alternate-reverse;
}

.cta-grid-panning {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-image:
    linear-gradient(rgba(245, 93, 45, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 93, 45, 0.04) 1px, transparent 1px);
  background-size: 50px 50px;
  background-position: center center;
  transform: perspective(600px) rotateX(60deg) translateY(-40px);
  opacity: 0.7;
  mask-image: radial-gradient(circle, black, transparent 70%);
  -webkit-mask-image: radial-gradient(circle, black, transparent 70%);
  animation: grid-panning 35s infinite linear;
}

@keyframes float-slow {
  0% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(-30px, 45px) scale(1.08);
  }

  100% {
    transform: translate(30px, -25px) scale(0.94);
  }
}

@keyframes grid-panning {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 0 500px;
  }
}

/* Floating wireframe code elements */
.cta-code-bubble {
  position: absolute;
  font-family: monospace;
  font-size: 10px;
  color: rgba(245, 93, 45, 0.25);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(245, 93, 45, 0.08);
  padding: 6px 12px;
  border-radius: var(--radius-xs);
  pointer-events: none;
  animation: float-slow 14s infinite ease-in-out alternate;
}

/* ── Bento Grid Layout for Development Services ── */
.bento-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-20);
  margin-top: var(--space-48);
}

@media (min-width: 768px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
  }

  .bento-grid .bento-card--featured {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .bento-grid {
    grid-template-columns: 1.2fr 0.8fr 1fr;
    grid-template-rows: auto auto;
  }

  .bento-grid .bento-card--featured {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
  }
}

.bento-card {
  position: relative;
  background: rgba(255, 255, 255, 0.75);
  border: var(--border-neumorphic);
  border-radius: var(--radius-lg);
  padding: var(--space-32);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transition: all 0.45s var(--ease-premium);
  box-shadow: var(--shadow-neumorphic-out);
}

.bento-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  opacity: 0;
  transition: opacity 0.4s var(--ease-premium);
}

.bento-card:hover {
  transform: translateY(-3px);
  border-color: rgba(245, 93, 45, 0.08);
  box-shadow: var(--shadow-neumorphic-out-hover);
}

.bento-card:hover::before {
  opacity: 1;
}

.bento-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-bg-white);
  border: var(--border-neumorphic);
  box-shadow: var(--shadow-neumorphic-in);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  margin-bottom: var(--space-20);
  transition: all 0.4s var(--ease-premium);
}

.bento-card:hover .bento-card__icon {
  background: var(--color-bg-white);
  color: var(--color-primary);
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow: var(--shadow-neumorphic-in-hover);
  transform: scale(1.03);
}

.bento-card__title {
  font-family: var(--font-primary);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-12);
  line-height: 1.25;
}

.bento-card--featured .bento-card__title {
  font-size: 1.75rem;
}

.bento-card__desc {
  font-family: var(--font-secondary);
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-20);
}

.bento-card__bullets {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  margin-bottom: var(--space-24);
}

.bento-card__bullet {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  color: var(--color-text-dark);
  font-weight: 500;
}

.bento-card__bullet-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-bg-white);
  color: var(--color-primary);
  border: var(--border-neumorphic);
  box-shadow: var(--shadow-neumorphic-in);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}

.bento-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-secondary);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-top: auto;
  transition: gap 0.3s var(--ease-premium);
}

.bento-card__link:hover {
  gap: 10px;
}

.bento-card__link svg {
  transition: transform 0.3s var(--ease-premium);
}

.bento-card__link:hover svg {
  transform: translateX(3px);
}

/* ── Clean Metrics Section (no side images) ── */
.metrics-clean {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-20);
  margin-top: var(--space-32);
}

@media (min-width: 768px) {
  .metrics-clean {
    grid-template-columns: repeat(4, 1fr);
  }
}

.metric-clean-card {
  background: linear-gradient(145deg, #FFFFFF 0%, #FAFBFE 100%);
  border: 1px solid rgba(17, 17, 17, 0.06);
  border-radius: var(--radius-md);
  padding: var(--space-24);
  text-align: center;
  transition: all 0.4s var(--ease-premium);
  position: relative;
  overflow: hidden;
}

.metric-clean-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  opacity: 0;
  transition: opacity 0.4s var(--ease-premium);
}

.metric-clean-card:hover {
  transform: translateY(-4px);
  border-color: rgba(245, 93, 45, 0.15);
  box-shadow: 0 12px 32px rgba(245, 93, 45, 0.08);
}

.metric-clean-card:hover::after {
  opacity: 1;
}

.metric-clean-card__value {
  font-family: var(--font-primary);
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: var(--space-8);
}

.metric-clean-card__value span {
  font-size: 1rem;
  font-weight: 600;
}

.metric-clean-card__label {
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-dark);
  margin-bottom: var(--space-8);
}

.metric-clean-card__details {
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* ── Development Solutions Hero Section ── */
.development-hero {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--header-height) + var(--space-24));
  padding-bottom: var(--space-48);
}

@media (min-width: 769px) {
  .development-hero {
    padding-top: calc(var(--header-height) + var(--space-48));
    padding-bottom: var(--space-64);
  }
}

.development-hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.dev-hero-element {
  position: relative;
  width: 100%;
  max-width: 480px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  background: var(--color-bg-white);
  padding: var(--space-8);
  transition: transform 0.8s var(--ease-premium);
  z-index: 2;
}

.dev-hero-element:hover {
  transform: scale(1.02);
}

.dev-hero-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  filter: contrast(1.05) brightness(0.95);
  object-fit: cover;
}

.dev-hero-badge {
  position: absolute;
  bottom: var(--space-20);
  left: var(--space-20);
  font-family: monospace;
  font-size: 8px;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(17, 17, 17, 0.75);
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-xs);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 2;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}

.dev-hero-orb {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  background: radial-gradient(circle, rgba(245, 93, 45, 0.1) 0%, transparent 70%);
  filter: blur(30px);
  pointer-events: none;
  z-index: 0;
}

/* ── Responsive Styling ── */
@media (max-width: 768px) {
  .development-hero-visual {
    margin-top: var(--space-24);
  }

  .dev-hero-element {
    max-width: 100%;
  }

  .dev-hero-badge {
    font-size: 7px;
    padding: var(--space-6) var(--space-10);
    bottom: var(--space-16);
    left: var(--space-16);
  }
}

/* ── Rich Colors & Mesh Gradients Overrides for Development Pages ── */

body[data-page="development"],
body[data-page="development-sub"] {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF9F5 30%, #FFF3EB 70%, #FFF9F5 100%) !important;
  position: relative;
}

body[data-page="development"]::before,
body[data-page="development-sub"]::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 75% 15%, rgba(245, 93, 45, 0.12) 0%, transparent 65%),
    radial-gradient(ellipse 55% 45% at 10% 85%, rgba(245, 93, 45, 0.06) 0%, transparent 60%);
  pointer-events: none;
  z-index: -1;
  animation: hero-bg-drift-sub 18s ease-in-out infinite;
}

@keyframes hero-bg-drift-sub {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.85;
  }

  50% {
    transform: translate(-1.5%, 1%) scale(1.04);
    opacity: 1;
  }
}

/* Make all sections transparent so the unified background shows through */
body[data-page="development"] .development-hero,
body[data-page="development-sub"] .development-hero {
  background: transparent !important;
}

body[data-page="development"] .development-hero::before,
body[data-page="development-sub"] .development-hero::before {
  display: none !important;
}

body[data-page="development"] section.bg-white,
body[data-page="development-sub"] section.bg-white,
body[data-page="development"] section.bg-light,
body[data-page="development-sub"] section.bg-light {
  background: transparent !important;
}

body[data-page="development"] section.bg-white::before,
body[data-page="development-sub"] section.bg-white::before,
body[data-page="development"] section.bg-light::before,
body[data-page="development-sub"] section.bg-light::before {
  display: none !important;
}

body[data-page="development"] .cta-section,
body[data-page="development-sub"] .cta-section {
  background: transparent !important;
  border-top: 1px solid var(--color-border) !important;
}


/* 4. Development Solutions Service Cards gradient borders & color effects */
body[data-page="development"] .card {
  position: relative;
  border-color: rgba(17, 17, 17, 0.05);
  background: linear-gradient(145deg, #FFFFFF 0%, #FAF9FB 100%);
  transition: all 0.45s var(--ease-premium);
  overflow: hidden;
}

body[data-page="development"] .card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  opacity: 0;
  transition: opacity 0.45s var(--ease-premium);
}

body[data-page="development"] .card:hover {
  transform: translateY(-8px);
  border-color: rgba(245, 93, 45, 0.2);
  box-shadow: 0 20px 48px rgba(245, 93, 45, 0.08);
}

body[data-page="development"] .card:hover::before {
  opacity: 1;
}

/* 5. Process Step Hover Gradient Cards */
body[data-page="development"] .process-step,
body[data-page="development-sub"] .process-step {
  transition: all 0.4s var(--ease-premium);
}

body[data-page="development"] .process-step:hover,
body[data-page="development-sub"] .process-step:hover {
  background: #FFFFFF !important;
  border-color: rgba(245, 93, 45, 0.3) !important;
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(245, 93, 45, 0.07) !important;
}

/* 6. Technology Stack Gradients */
body[data-page="development"] .tech-item,
body[data-page="development-sub"] .tech-item {
  transition: all 0.4s var(--ease-premium);
  background: linear-gradient(145deg, #FFFFFF 0%, #FBFBFC 100%);
}

body[data-page="development"] .tech-item:hover,
body[data-page="development-sub"] .tech-item:hover {
  border-color: rgba(245, 93, 45, 0.25);
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(245, 93, 45, 0.1);
  background: linear-gradient(145deg, #FFFFFF 0%, #FFF7F4 100%);
}

/* 7. FAQ Item Gradients */
body[data-page="development"] .faq-item,
body[data-page="development-sub"] .faq-item {
  transition: all 0.4s var(--ease-premium);
  background: linear-gradient(145deg, #FFFFFF 0%, #FAFAFC 100%);
}

body[data-page="development"] .faq-item:hover,
body[data-page="development-sub"] .faq-item:hover {
  border-color: rgba(245, 93, 45, 0.15);
  box-shadow: var(--shadow-sm);
}

body[data-page="development"] .faq-item[open],
body[data-page="development-sub"] .faq-item[open] {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF8F5 100%);
  border-color: rgba(245, 93, 45, 0.25);
  box-shadow: var(--shadow-md);
}

/* 8. Telemetry Dashboard Card enhancements */
body[data-page="development-sub"] .telemetry-card {
  background: linear-gradient(145deg, #FFFFFF 0%, #F8F9FD 100%);
  position: relative;
  box-shadow: var(--shadow-md);
}

body[data-page="development-sub"] .telemetry-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  z-index: 1;
}

body[data-page="development-sub"] .metric-item {
  transition: all 0.4s var(--ease-premium);
  background: linear-gradient(145deg, #FFFFFF 0%, #F5F6FA 100%);
}

body[data-page="development-sub"] .metric-item:hover {
  border-color: rgba(245, 93, 45, 0.2);
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(245, 93, 45, 0.08);
  background: linear-gradient(145deg, #FFFFFF 0%, #FFF5F1 100%);
}

/* 9. Timeline pathway node enhancements */
body[data-page="development-sub"] .timeline-node {
  background: linear-gradient(145deg, #FFFFFF 0%, #FAFBFD 100%);
  transition: all 0.4s var(--ease-premium);
}

body[data-page="development-sub"] .timeline-node:hover {
  transform: translateY(-8px);
  border-color: rgba(212, 238, 54, 0.4);
  box-shadow: 0 16px 40px rgba(212, 238, 54, 0.15);
  background: linear-gradient(145deg, #FFFFFF 0%, #FCFDF4 100%);
}

body[data-page="development-sub"] .timeline-node:hover .timeline-badge {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: var(--color-text-inverse);
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(245, 93, 45, 0.2);
}

/* 10. CTA Section background gradients & typography overrides */
body[data-page="development"] .cta-section,
body[data-page="development-sub"] .cta-section {
  background: linear-gradient(135deg, #0A0A0E 0%, #15121B 50%, #080A0E 100%) !important;
  color: #FFFFFF !important;
}

body[data-page="development"] .cta-section .cta__title,
body[data-page="development-sub"] .cta-section .cta__title {
  color: #FFFFFF !important;
}

body[data-page="development"] .cta-section .cta__desc,
body[data-page="development-sub"] .cta-section .cta__desc {
  color: rgba(255, 255, 255, 0.7) !important;
}

body[data-page="development"] .cta-section .cta__label,
body[data-page="development-sub"] .cta-section .cta__label {
  color: var(--color-secondary) !important;
}

body[data-page="development"] .cta-orb--1,
body[data-page="development-sub"] .cta-orb--1 {
  background: var(--color-primary);
  opacity: 0.18;
  filter: blur(100px);
}

body[data-page="development"] .cta-orb--2,
body[data-page="development-sub"] .cta-orb--2 {
  background: var(--color-secondary);
  opacity: 0.18;
  filter: blur(100px);
}

/* 11. Hero Outline Buttons Contrast Override */
body[data-page="development"] .hero__actions .btn--white,
body[data-page="development-sub"] .hero__actions .btn--white {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
  background-color: transparent !important;
}

body[data-page="development"] .hero__actions .btn--white:hover,
body[data-page="development-sub"] .hero__actions .btn--white:hover {
  background-color: var(--color-primary) !important;
  color: var(--color-text-inverse) !important;
}

/* ── Boxed Hero Banner for Primary Page ── */
.dev-hero-banner {
  position: relative;
  /* Premium high-definition CSS gradient replicating the first image with vibrant cyan/blue layers and custom flares */
  background:
    radial-gradient(circle at 20% 25%, rgba(0, 242, 254, 0.32) 0%, transparent 60%),
    radial-gradient(circle at 80% 75%, rgba(245, 93, 45, 0.16) 0%, transparent 50%),
    linear-gradient(110deg, #ff6f00 0%, #ff0000 55%, #7a2100 100%);
  border-radius: 24px;
  padding: var(--space-32) var(--space-24);
  box-shadow: 0 25px 50px rgba(0, 44, 159, 0.22), 0 1px 2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  z-index: 2;
}

@media (min-width: 992px) {
  .dev-hero-banner {
    padding: var(--space-64) var(--space-64);
  }
}

.dev-hero-banner__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
  align-items: center;
}

@media (min-width: 992px) {
  .dev-hero-banner__grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--space-48);
  }
}

.dev-hero-banner__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.dev-hero-banner .hero__title {
  color: #FFFFFF !important;
  margin-bottom: var(--space-16);
  font-size: clamp(2rem, 3.5vw, 3.25rem);
  line-height: 1.05;
}

.dev-hero-banner .hero__title .text-primary-color-alt {
  color: orange !important;
  /* Maintained primary orange color as requested */
}

.dev-hero-banner .hero__desc {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: clamp(0.95rem, 1.2vw, 1.0625rem);
  line-height: 1.6;
  margin-bottom: var(--space-28);
  max-width: 640px;
}

.dev-hero-banner .hero__label {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  margin-bottom: var(--space-20);
}

/* Badges section inspired by the reference image */
.dev-banner-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12) var(--space-20);
  margin-bottom: var(--space-32);
  width: 100%;
}

.dev-banner-badge-item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-secondary);
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: all var(--transition-fast);
}

.dev-banner-badge-item:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.22);
}

.dev-banner-badge-item .badge-icon {
  color: orange !important;
  /* Maintained primary orange color as requested */
  flex-shrink: 0;
}

.dev-hero-banner__visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* Float high-quality sde.png laptops transparent visual directly on the high-res gradient background */
.dev-hero-banner .dev-hero-element {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: 100%;
  transform: none !important;
}

.dev-hero-banner .dev-hero-image {
  filter: drop-shadow(0 15px 35px rgba(0, 44, 159, 0.35)) contrast(1.05) brightness(0.95);
  border-radius: 0;
}

/* Make sure the buttons look amazing */
.dev-hero-banner .hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
  width: 100%;
}

.dev-hero-banner .hero__actions .btn--white {
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: #FFFFFF !important;
  background-color: transparent !important;
}

.dev-hero-banner .hero__actions .btn--white:hover {
  background-color: #FFFFFF !important;
  color: #0A0A0E !important;
  border-color: #FFFFFF !important;
}



/* ═══════════════════════════════════════════════
   REDESIGNED DEVELOPMENT PAGE — V2 Styles
   ═══════════════════════════════════════════════ */

/* ── V2 Hero Grid Layout ── */
.dev-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-40);
  align-items: center;
  position: relative;
  z-index: 2;
}

@media (min-width: 992px) {
  .dev-hero-grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-48);
  }
}

.dev-hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.dev-hero-content .hero__label {
  margin-bottom: var(--space-20);
}

.dev-hero-content .hero__title {
  font-size: clamp(2.25rem, 4.5vw, 3.75rem);
  line-height: 1.05;
  margin-bottom: var(--space-20);
}

.dev-hero-content .hero__desc {
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  margin-bottom: var(--space-32);
  max-width: 540px;
}

/* Hero feature pills */
.dev-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-10);
  margin-top: var(--space-32);
}

.dev-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-secondary);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
}

.dev-hero-pill:hover {
  border-color: rgba(245, 93, 45, 0.2);
  background: rgba(245, 93, 45, 0.04);
  color: var(--color-primary);
}

.dev-hero-pill svg {
  color: var(--color-primary);
  flex-shrink: 0;
}

/* Hero visual composition */
.dev-hero-visual-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dev-hero-glow-orb {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110%;
  height: 110%;
  background: radial-gradient(circle, rgba(245, 93, 45, 0.12) 0%, transparent 65%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

.dev-hero-image-frame {
  position: relative;
  width: 100%;
  max-width: 520px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(17, 17, 17, 0.08);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
  background: var(--color-bg-white);
  padding: var(--space-8);
  z-index: 2;
  transition: transform 0.6s var(--ease-premium), box-shadow 0.6s var(--ease-premium);
}

.dev-hero-image-frame:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.04);
}

.dev-hero-image-frame .dev-hero-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: calc(var(--radius-xl) - 6px);
  object-fit: cover;
}

.dev-hero-image-frame .dev-hero-badge {
  position: absolute;
  bottom: var(--space-20);
  left: var(--space-20);
  z-index: 3;
}

/* Floating stat cards */
.dev-floating-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--space-10);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(17, 17, 17, 0.06);
  border-radius: var(--radius-md);
  padding: var(--space-10) var(--space-16);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  z-index: 5;
  animation: float-card 5s ease-in-out infinite;
}

.dev-floating-card--top {
  top: 8%;
  right: -5%;
  animation-delay: 0s;
}

.dev-floating-card--bottom {
  bottom: 12%;
  left: -5%;
  animation-delay: 1.5s;
}

@keyframes float-card {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

.dev-floating-card__icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: rgba(245, 93, 45, 0.08);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dev-floating-card__icon--green {
  background: rgba(16, 185, 129, 0.08);
  color: var(--color-success);
}

.dev-floating-card__val {
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  display: block;
  line-height: 1.2;
}

.dev-floating-card__label {
  font-family: var(--font-secondary);
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  display: block;
}

@media (max-width: 991px) {
  .dev-floating-card {
    display: none;
  }

  .dev-hero-image-frame {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .dev-hero-visual-wrap {
    margin-top: var(--space-16);
  }

  .dev-hero-content .hero__title {
    font-size: clamp(1.75rem, 7vw, 2.5rem);
  }

  .dev-hero-pills {
    margin-top: var(--space-24);
  }
}

/* ── V2 IDE Editor Window ── */
.dev-ide-window {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
  background: #1e1e2e;
  max-width: 960px;
  margin: 0 auto;
}

.dev-ide-titlebar {
  display: flex;
  align-items: center;
  padding: 10px var(--space-16);
  background: #181825;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.dev-ide-dots {
  display: flex;
  gap: 6px;
  margin-right: var(--space-16);
}

.dev-ide-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.dev-ide-dot--red {
  background: #ff5f56;
}

.dev-ide-dot--yellow {
  background: #ffbd2e;
}

.dev-ide-dot--green {
  background: #27c93f;
}

.dev-ide-title {
  flex: 1;
  text-align: center;
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.02em;
}

.dev-ide-actions {
  color: rgba(255, 255, 255, 0.3);
}

.dev-ide-body {
  display: grid;
  grid-template-columns: 160px 1fr;
  min-height: 380px;
}

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

  .dev-ide-sidebar {
    display: none;
  }
}

/* Sidebar */
.dev-ide-sidebar {
  background: #181825;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  padding: var(--space-12) 0;
  overflow-y: auto;
}

.dev-ide-sidebar-title {
  font-family: var(--font-secondary);
  font-size: 0.625rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0 var(--space-12) var(--space-8);
}

.dev-ide-file {
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  padding: 3px var(--space-12);
  cursor: default;
  transition: background 0.15s;
  white-space: nowrap;
}

.dev-ide-file:hover {
  background: rgba(255, 255, 255, 0.04);
}

.dev-ide-file--active {
  background: rgba(245, 93, 45, 0.1);
  color: var(--color-primary);
}

.dev-ide-file--folder {
  color: rgba(255, 255, 255, 0.65);
  font-weight: 600;
}

/* Editor pane */
.dev-ide-editor {
  display: flex;
  flex-direction: column;
  background: #1e1e2e;
}

.dev-ide-code {
  flex: 1;
  padding: var(--space-16) var(--space-20);
  overflow-x: auto;
  font-family: 'Menlo', 'Consolas', 'Courier New', monospace;
  font-size: 0.8125rem;
  line-height: 1.7;
}

.dev-ide-line {
  white-space: nowrap;
}

.dev-ide-ln {
  display: inline-block;
  width: 28px;
  text-align: right;
  margin-right: 16px;
  color: rgba(255, 255, 255, 0.2);
  user-select: none;
  font-size: 0.75rem;
}

.code-keyword {
  color: #c678dd;
}

.code-string {
  color: #98c379;
}

.code-func {
  color: #61afef;
}

.code-param {
  color: #e5c07b;
}

.code-comment {
  color: rgba(255, 255, 255, 0.3);
  font-style: italic;
}

.code-bool {
  color: #d19a66;
}

.code-num {
  color: #d19a66;
}

.dev-ide-code,
.dev-ide-line {
  color: #abb2bf;
}

/* Terminal */
.dev-ide-terminal {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: #151521;
}

.dev-ide-terminal-header {
  display: flex;
  gap: 0;
  padding: 0 var(--space-12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.dev-ide-terminal-tab {
  font-family: var(--font-secondary);
  font-size: 0.6875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.3);
  padding: 8px 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  cursor: default;
}

.dev-ide-terminal-tab--active {
  color: rgba(255, 255, 255, 0.7);
  border-bottom-color: var(--color-primary);
}

.dev-ide-terminal-body {
  padding: var(--space-12) var(--space-16);
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 0.75rem;
  line-height: 1.8;
}

.dev-terminal-line {
  color: rgba(255, 255, 255, 0.5);
}

.dev-terminal-prompt {
  color: var(--color-primary);
  margin-right: 8px;
  font-weight: 700;
}

.dev-terminal-success {
  color: #98c379;
}

.dev-terminal-info {
  color: #e5c07b;
}

.dev-terminal-cursor {
  display: inline-block;
  width: 7px;
  height: 14px;
  background: var(--color-primary);
  animation: blink-cursor 1s step-end infinite;
  vertical-align: middle;
}

@keyframes blink-cursor {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

/* Tech strip */
.dev-tech-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  justify-content: center;
  margin-top: var(--space-48);
}

.dev-tech-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-secondary);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  padding: 10px 18px;
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-xs);
}

.dev-tech-pill:hover {
  border-color: rgba(245, 93, 45, 0.2);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.dev-tech-pill svg {
  color: var(--color-primary);
}

/* ── V2 Bento Grid ── */
.bento-grid-v2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
  margin-top: var(--space-48);
}

@media (min-width: 768px) {
  .bento-grid-v2 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }

  .bento-grid-v2 .bento-v2-card--featured {
    grid-column: 1;
    grid-row: 1 / 3;
  }
}

.bento-v2-card {
  position: relative;
  background: linear-gradient(145deg, #FFFFFF 0%, #FAFBFD 100%);
  border: 1px solid rgba(17, 17, 17, 0.06);
  border-radius: var(--radius-xl);
  padding: var(--space-32);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.45s var(--ease-premium);
  box-shadow: var(--shadow-sm);
}

.bento-v2-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  opacity: 0;
  transition: opacity 0.4s var(--ease-premium);
}

.bento-v2-card:hover {
  transform: translateY(-6px);
  border-color: rgba(245, 93, 45, 0.15);
  box-shadow: 0 20px 50px rgba(245, 93, 45, 0.08);
}

.bento-v2-card:hover::before {
  opacity: 1;
}

.bento-v2-card__content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.bento-v2-card__title {
  font-family: var(--font-primary);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-12);
  line-height: 1.25;
}

.bento-v2-card--featured .bento-v2-card__title {
  font-size: 1.75rem;
}

.bento-v2-card__desc {
  font-family: var(--font-secondary);
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-20);
}

.bento-v2-card__bullets {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  margin-bottom: var(--space-24);
}

/* ── Tech Stats Strip (Featured card filler) ── */
.tech-stats-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: var(--space-24);
  padding: 16px;
  background: rgba(245, 93, 45, 0.02);
  border: 1px solid rgba(245, 93, 45, 0.06);
  border-radius: var(--radius-md);
}

.tech-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

.tech-stat__value {
  font-family: var(--font-primary);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-text-primary);
  line-height: 1;
  letter-spacing: -0.02em;
}

.tech-stat__value span {
  color: #f55d2d;
}

.tech-stat__label {
  font-family: var(--font-secondary);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.tech-stat+.tech-stat {
  border-left: 1px solid rgba(17, 17, 17, 0.06);
}

/* Card visuals */
.bento-v2-card__visual {
  margin-top: var(--space-24);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-light);
}

.bento-v2-card__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  object-fit: cover;
  transition: transform 0.6s var(--ease-premium);
}

.bento-v2-card:hover .bento-v2-card__img {
  transform: scale(1.03);
}

.bento-v2-card__visual--sm {
  max-height: 200px;
  overflow: hidden;
}

/* Featured card — visual fills remaining height */
.bento-v2-card--featured .bento-v2-card__visual {
  flex: 1;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 767px) {
  .bento-v2-card {
    padding: var(--space-24);
  }

  .bento-v2-card__visual--sm {
    max-height: 160px;
  }

  .bento-v2-card--featured .bento-v2-card__visual {
    max-height: 320px;
    flex: unset;
  }

  .tech-stats-strip {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 12px;
  }

  .tech-stat__value {
    font-size: 1.25rem;
  }

  .tech-stat+.tech-stat {
    border-left: 1px solid rgba(17, 17, 17, 0.06);
  }
}


/* ── Bento Process Grid Overrides ── */
#dev-process-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 24px !important;
  margin-top: 48px !important;
  flex-direction: unset !important;
  flex-wrap: unset !important;
  align-items: unset !important;
  justify-content: unset !important;
}

@media (min-width: 768px) {
  #dev-process-grid {
    grid-template-columns: repeat(6, 1fr) !important;
  }

  #dev-process-grid .bento-process-card:nth-child(1) {
    grid-column: span 4 !important;
  }

  #dev-process-grid .bento-process-card:nth-child(2) {
    grid-column: span 2 !important;
  }

  #dev-process-grid .bento-process-card:nth-child(3) {
    grid-column: span 3 !important;
  }

  #dev-process-grid .bento-process-card:nth-child(4) {
    grid-column: span 3 !important;
  }
}

.bento-process-card {
  position: relative;
  border-radius: 16px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow: hidden;
  display: flex !important;
  flex-direction: column !important;
  flex: unset !important;
  min-height: 240px;
}

.bento-process-card__inner {
  position: relative;
  padding: 32px 28px !important;
  height: 100%;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  z-index: 2;
}

.bento-process-card__dot-grid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(rgba(245, 93, 45, 0.05) 1px, transparent 0) !important;
  background-size: 16px 16px !important;
  pointer-events: none;
  opacity: 0.8 !important;
  transition: opacity 0.4s ease !important;
  z-index: 1;
}

.bento-process-card--featured {
  background: linear-gradient(135deg, #ffffff 0%, rgba(253, 245, 242, 0.4) 100%) !important;
  border: 1px solid rgba(245, 93, 45, 0.12) !important;
}

.bento-process-card--featured .bento-process-card__dot-grid {
  background-image: radial-gradient(rgba(245, 93, 45, 0.09) 1px, transparent 0) !important;
}

.bento-process-card__header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  z-index: 2;
}

.bento-process-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(245, 93, 45, 0.05) !important;
  border: 1px solid rgba(245, 93, 45, 0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #f55d2d !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.bento-process-card__step {
  font-family: inherit;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: rgba(245, 93, 45, 0.6) !important;
  letter-spacing: 0.15em !important;
  background: rgba(245, 93, 45, 0.04) !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(245, 93, 45, 0.05) !important;
}

.bento-process-card__title {
  font-family: inherit;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #0a0912 !important;
  margin: 0 !important;
  line-height: 1.25 !important;
  z-index: 2;
}

.bento-process-card__desc {
  font-family: inherit;
  font-size: 0.875rem !important;
  color: #666666 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  z-index: 2;
}

.bento-process-card__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  height: 150%;
  transform: translate(-50%, -50%) scale(0.5);
  background: radial-gradient(circle, rgba(245, 93, 45, 0.06) 0%, transparent 60%) !important;
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
  pointer-events: none;
  z-index: 1;
}

.bento-process-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(245, 93, 45, 0.3) !important;
  box-shadow: 0 20px 40px rgba(245, 93, 45, 0.08), inset 0 0 20px rgba(255, 255, 255, 0.8) !important;
}

.bento-process-card:hover .bento-process-card__icon {
  background: #f55d2d !important;
  color: #FFFFFF !important;
  border-color: #f55d2d !important;
  box-shadow: 0 4px 12px rgba(245, 93, 45, 0.2) !important;
  transform: scale(1.05) !important;
}

.bento-process-card:hover .bento-process-card__step {
  color: #f55d2d !important;
  background: rgba(245, 93, 45, 0.08) !important;
  border-color: rgba(245, 93, 45, 0.15) !important;
}

.bento-process-card:hover .bento-process-card__glow {
  transform: translate(-50%, -50%) scale(1) !important;
  opacity: 1 !important;
}

.bento-process-card:hover .bento-process-card__dot-grid {
  opacity: 0.4 !important;
}

/* ── Telemetry Console (Software Card) ── */
.bento-v2-card__visual--telemetry {
  background: #0f141c !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 200px !important;
}

.telemetry-console {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family: 'Courier New', Courier, monospace;
}

.telemetry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 8px;
  margin-bottom: 12px;
}

.telemetry-dots {
  display: flex;
  gap: 4px;
}

.telemetry-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}

.telemetry-dots span:nth-child(1) {
  background: #ff5555;
}

.telemetry-dots span:nth-child(2) {
  background: #ffb86c;
}

.telemetry-dots span:nth-child(3) {
  background: #50fa7b;
}

.telemetry-title {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
}

.telemetry-status {
  font-size: 0.65rem;
  background: rgba(80, 250, 123, 0.15);
  color: #50fa7b;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.telemetry-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
}

.telemetry-row {
  display: flex;
  gap: 6px;
}

.telemetry-prompt {
  color: #f55d2d;
  font-weight: 700;
}

.telemetry-cmd {
  color: #50fa7b;
}

.telemetry-log {
  color: #a9b1d6;
}

.telemetry-metrics {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(255, 255, 255, 0.03);
  padding: 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.telemetry-metric-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 4px 0 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
}

.telemetry-metric-item:hover {
  border: none !important;
  transform: none !important;
  box-shadow: none !important;
}

.telemetry-metric-name {
  width: 36px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  font-family: 'Courier New', Courier, monospace !important;
}

.telemetry-metric-bar {
  flex: 1 !important;
  height: 6px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 3px !important;
  overflow: hidden !important;
  display: block !important;
}

.telemetry-metric-fill {
  height: 100% !important;
  border-radius: 3px !important;
  display: block !important;
}

.telemetry-metric-fill--cpu {
  background: #f55d2d !important;
}

.telemetry-metric-fill--mem {
  background: #00e5ff !important;
}

.telemetry-metric-val {
  font-size: 0.65rem !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-weight: 700 !important;
  text-align: right !important;
  width: 28px !important;
  font-family: 'Courier New', Courier, monospace !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-block !important;
}


/* ── Web Audit Dashboard (Web Card) ── */
.bento-v2-card__visual--web-audit {
  background: #fbfbfc !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  padding: 14px !important;
  height: 200px !important;
  max-height: 200px !important;
  display: flex !important;
  align-items: center !important;
}

.web-audit-container {
  display: flex;
  width: 100%;
  height: 100%;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
  overflow: hidden;
}

.web-audit-sidebar {
  width: 48px;
  background: #f7f8fa;
  border-right: 1px solid rgba(0, 0, 0, 0.05);
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.sidebar-dot {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: rgba(245, 93, 45, 0.1);
  border: 1px solid rgba(245, 93, 45, 0.2);
}

.sidebar-line {
  width: 20px;
  height: 3px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 1.5px;
}

.web-audit-main {
  flex: 1;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.web-audit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.web-audit-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: #1a1b25;
}

.web-audit-badge {
  font-size: 0.6rem;
  color: #10b981;
  background: rgba(16, 185, 129, 0.08);
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 600;
}

.web-audit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  flex: 1;
}

.web-audit-metric-card,
.web-audit-chart-card {
  border: 1px solid rgba(0, 0, 0, 0.05);
  background: #fdfdfd;
  border-radius: 8px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.metric-card-label {
  font-size: 0.6rem;
  color: #8f92a1;
  font-weight: 600;
  margin-bottom: 4px;
  align-self: flex-start;
}

.score-circle {
  position: relative;
  width: 48px;
  height: 48px;
}

.score-svg {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
}

.circle-bg {
  fill: none;
  stroke: #f1f2f4;
  stroke-width: 2.8;
}

.circle {
  fill: none;
  stroke: #10b981;
  stroke-width: 2.8;
  stroke-linecap: round;
}

.score-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.75rem;
  font-weight: 800;
  color: #10b981;
}

.mini-chart {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.chart-svg {
  width: 100%;
  height: 28px;
}

.response-time-val {
  font-size: 0.75rem;
  font-weight: 800;
  color: #f55d2d;
  margin-top: 2px;
}

/* ── App Sync & Mobile Mockup (App Card) ── */
.bento-v2-card__visual--app-sync {
  background: #fafbfc !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  padding: 12px !important;
  height: 200px !important;
  max-height: 200px !important;
  display: flex !important;
  align-items: center !important;
}

.app-sync-container {
  display: flex;
  width: 100%;
  height: 100%;
  gap: 12px;
  justify-content: center;
  align-items: center;
}

.phone-mockup {

  position: relative;
  overflow: hidden;

  flex-shrink: 0;
}

.phone-notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 8px;
  background: #1a1b25;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  z-index: 10;
}

.phone-screen {
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #f4f5f8;
}

.phone-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.5rem;
  color: #1a1b25;
  font-weight: 700;
  margin-bottom: 12px;
  margin-top: 4px;
}

.phone-status-icons {
  font-size: 0.45rem;
}

.phone-widget {
  background: #ffffff;
  border-radius: 8px;
  padding: 6px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.widget-title {
  font-size: 0.5rem;
  color: #8f92a1;
  font-weight: 700;
  margin-bottom: 4px;
}

.widget-user {
  display: flex;
  align-items: center;
  gap: 4px;
}

.user-avatar {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #f55d2d;
}

.user-info {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 0.45rem;
  font-weight: 700;
  color: #1a1b25;
}

.user-status {
  font-size: 0.35rem;
  color: #10b981;
}

.sync-console {
  flex: 1;
  background: #0f141c;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 10px;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sync-console-title {
  font-family: monospace;
  font-size: 0.58rem;
  color: #f55d2d;
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 4px;
  margin-bottom: 6px;
}

.sync-console-code {
  font-family: monospace;
  font-size: 0.58rem;
  color: #a9b1d6;
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.35;
}

/* ── Camera Viewport & HUD Layouts ── */
.camera-viewport {
  position: relative;
  border: 1px solid rgba(17, 17, 17, 0.04);
  background: var(--color-bg-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.camera-hud-frame {
  pointer-events: none;
  position: absolute;
  inset: var(--space-12);
  border: 1px solid rgba(245, 93, 45, 0.08);
  border-radius: var(--radius-sm);
  z-index: 2;
}

.hud-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid var(--color-primary);
}

.hud-corner.top-left {
  top: -2px;
  left: -2px;
  border-right: none;
  border-bottom: none;
}

.hud-corner.top-right {
  top: -2px;
  right: -2px;
  border-left: none;
  border-bottom: none;
}

.hud-corner.bottom-left {
  bottom: -2px;
  left: -2px;
  border-right: none;
  border-top: none;
}

.hud-corner.bottom-right {
  bottom: -2px;
  right: -2px;
  border-left: none;
  border-top: none;
}

.hud-metadata-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px var(--space-20);
  font-family: var(--font-secondary);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgba(17, 17, 17, 0.4);
  border-top: 1px solid rgba(17, 17, 17, 0.04);
  background: rgba(17, 17, 17, 0.01);
}

.hud-metadata-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hud-ping-dot {
  width: 6px;
  height: 6px;
  background: var(--color-primary);
  border-radius: 50%;
  animation: hudPulse 2s infinite;
}

@keyframes hudPulse {
  0% {
    opacity: 0.3;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.3;
  }
}

/* ── Pill Label Badge ── */
.hero__label-pill {
  display: inline-flex;
  align-items: center;
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary-medium);
  color: var(--color-primary);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: var(--space-24);
}

/* ── Capabilities grid & cards ── */
.capabilities-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-24);
  margin-top: var(--space-40);
}

.cap-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-32);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.cap-card:hover {
  transform: translateY(-4px);
  border-color: rgba(245, 93, 45, 0.2);
  box-shadow: var(--shadow-md);
}

.cap-card--full {
  grid-column: span 2;
}

.cap-card--half {
  grid-column: span 1;
}

.cap-card__content {
  flex: 1;
}

.cap-card__icon-box {
  width: 48px;
  height: 48px;
  background: var(--color-primary-light);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  margin-bottom: var(--space-20);
  flex-shrink: 0;
}

.cap-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: var(--space-8);
  color: var(--color-text-primary);
}

.cap-card__desc {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.cap-card__visual {
  width: 140px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

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

  .cap-card--half,
  .cap-card--full {
    grid-column: span 1;
  }

  .cap-card {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-24);
  }

  .cap-card__visual {
    width: 100%;
    margin-top: var(--space-16);
    height: 120px;
  }
}

/* ── Bottom Features Strip ── */
.bottom-features-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-24);
  padding: var(--space-28) 0;
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-48);
}

.feature-strip-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
}

.feature-strip-icon {
  color: var(--color-primary);
  flex-shrink: 0;
  margin-top: 2px;
}

.feature-strip-content {
  display: flex;
  flex-direction: column;
}

.feature-strip-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

.feature-strip-desc {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

@media (max-width: 992px) {
  .bottom-features-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .bottom-features-strip {
    grid-template-columns: 1fr;
    gap: var(--space-16);
  }
}

/* ── Development Engine Diagram ── */
.dev-engine-diagram {
  display: grid;
  grid-template-columns: 280px 1fr 340px;
  align-items: center;
  gap: var(--space-24);
  background: var(--color-bg-white);
  background-image:
    radial-gradient(var(--color-border) 1px, transparent 1px),
    linear-gradient(rgba(17, 17, 17, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 17, 17, 0.015) 1px, transparent 1px);
  background-size: 20px 20px, 40px 40px, 40px 40px;
  background-position: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-40) var(--space-32);
  margin-top: var(--space-48);
  position: relative;
  overflow: hidden;
}

/* Technical Corner Brackets */
.dev-engine-diagram-bracket-tl {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 10px;
  height: 10px;
  border-top: 1.5px solid rgba(245, 93, 45, 0.25);
  border-left: 1.5px solid rgba(245, 93, 45, 0.25);
  pointer-events: none;
}

.dev-engine-diagram-bracket-tr {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 10px;
  height: 10px;
  border-top: 1.5px solid rgba(245, 93, 45, 0.25);
  border-right: 1.5px solid rgba(245, 93, 45, 0.25);
  pointer-events: none;
}

.dev-engine-diagram-bracket-bl {
  position: absolute;
  bottom: 12px;
  left: 12px;
  width: 10px;
  height: 10px;
  border-bottom: 1.5px solid rgba(245, 93, 45, 0.25);
  border-left: 1.5px solid rgba(245, 93, 45, 0.25);
  pointer-events: none;
}

.dev-engine-diagram-bracket-br {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 10px;
  height: 10px;
  border-bottom: 1.5px solid rgba(245, 93, 45, 0.25);
  border-right: 1.5px solid rgba(245, 93, 45, 0.25);
  pointer-events: none;
}

@keyframes spinCounter {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}

.engine-left-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.engine-item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: all var(--transition-normal);
  cursor: pointer;
}

.engine-item:hover,
.engine-item.active {
  border-color: rgba(245, 93, 45, 0.2);
  background: rgba(245, 93, 45, 0.02);
  transform: translateX(4px);
}

.engine-item-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-xs);
  background: var(--color-bg-white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
  flex-shrink: 0;
}

.engine-item-text {
  display: flex;
  flex-direction: column;
}

.engine-item-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

.engine-item-desc {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
}

.engine-center-core {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 100%;
}

.core-hub {
  position: relative;
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.core-ring {
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(245, 93, 45, 0.15);
  border-radius: 50%;
  animation: spinClockwise 25s linear infinite;
}

.core-ring-label {
  position: absolute;
  width: 100%;
  height: 100%;
  font-size: 0.55rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-primary);
  letter-spacing: 0.18em;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-family: var(--font-secondary);
}

.core-center-orb {
  width: 90px;
  height: 90px;
  background: radial-gradient(circle, #F55D2D 0%, #E04E20 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(245, 93, 45, 0.4), 0 0 0 8px rgba(245, 93, 45, 0.08);
  color: var(--color-text-inverse);
  z-index: 1;
}

.core-center-orb svg {
  animation: floatOrb 4s ease-in-out infinite;
}

@keyframes floatOrb {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-4px);
  }

  100% {
    transform: translateY(0px);
  }
}

.core-hub-connector {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(245, 93, 45, 0.15), transparent);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.core-hub-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--space-20);
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  padding: 6px 12px;
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-sm);
}

.core-hub-badge-icon {
  color: var(--color-primary);
  font-size: 0.9rem;
  font-weight: 700;
}

.core-hub-badge-text {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-top: 2px;
}

@keyframes spinClockwise {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.engine-right-widgets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
}

#widget-impact {
  grid-column: span 2;
}

@media (max-width: 576px) {
  .engine-right-widgets {
    grid-template-columns: 1fr;
  }

  #widget-impact {
    grid-column: span 1;
  }
}

.right-widget-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-16) var(--space-20);
  box-shadow: var(--shadow-xs);
}

.widget-impact-value {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--color-text-primary);
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.widget-impact-trend {
  color: var(--color-success);
  font-size: 0.6875rem;
  font-weight: 700;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
}

.widget-label-sub {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 4px;
}

.widget-chart-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-10);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-container-mini {
  height: 60px;
  width: 100%;
}

.circular-progress-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.circular-progress-svg {
  width: 48px;
  height: 48px;
  transform: rotate(-90deg);
}

.circle-bg {
  fill: none;
  stroke: rgba(17, 17, 17, 0.04);
  stroke-width: 4px;
}

.circle-val {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 4px;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 2;
  /* 98% */
}

.radial-pct {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--color-primary);
}

.checkbox-list-mini {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: var(--space-8);
}

.checkbox-item-mini {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

.checkbox-item-mini-check {
  color: var(--color-success);
  font-size: 0.75rem;
}

@media (max-width: 992px) {
  .dev-engine-diagram {
    grid-template-columns: 1fr;
    gap: var(--space-32);
    padding: var(--space-24);
  }

  .engine-center-core {
    order: -1;
    margin: var(--space-16) 0;
  }
}

/* ── Mobile Benchmarks Grid ── */
.benchmarks-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-24);
  margin-top: var(--space-40);
}

.benchmark-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-32);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all var(--transition-normal);
}

.benchmark-card:hover {
  transform: translateY(-4px);
  border-color: rgba(245, 93, 45, 0.2);
  box-shadow: var(--shadow-md);
}

.benchmark-card-content {
  flex: 1;
  padding-right: var(--space-16);
}

.benchmark-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-12);
}

.benchmark-card-meta-icon {
  color: var(--color-primary);
}

.benchmark-card-value {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: var(--space-8);
  display: flex;
  align-items: baseline;
}

.benchmark-card-value span {
  font-size: 1rem;
  margin-left: 2px;
  font-weight: 700;
}

.benchmark-card-desc {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.benchmark-card-visual {
  width: 120px;
  height: 80px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

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



.dual-phone-container {
  display: flex;
  position: relative;
  width: 200px;
  height: 200px;
  align-items: center;
  justify-content: center;
}

.phone-mock-body {
  position: absolute;
  width: 110px;
  height: 190px;
  background: #111111;
  border-radius: 20px;
  border: 4px solid #2F2A38;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.phone-mock-body--left {
  left: 0;
  top: 0;
  z-index: 1;
}

.phone-mock-body--right {
  right: 0;
  top: 20px;
  z-index: 2;
}

.phone-mock-notch {
  width: 44px;
  height: 9px;
  background: #111111;
  margin: 0 auto;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  flex-shrink: 0;
}

.phone-mock-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: #111111;
  padding: var(--space-8);
  font-family: var(--font-secondary);
}

.phone-mock-screen--dark {
  background: #1a1a24;
  color: #ffffff;
}

.phone-mock-logo {
  font-size: 1.8rem;
  line-height: 1;
  margin-bottom: var(--space-12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-mock-sysname {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

.phone-mock-screen--dark .phone-mock-sysname {
  color: rgba(255, 255, 255, 0.6);
}

.phone-mock-badge {
  position: absolute;
  bottom: var(--space-16);
  background: rgba(17, 17, 17, 0.85);
  color: #ffffff;
  font-family: monospace;
  font-size: 0.55rem;
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  z-index: 3;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.phone-mock-badge span {
  width: 5px;
  height: 5px;
  background: var(--color-primary);
  border-radius: 50%;
}

/* ── Web Audit Scorecard (Visual) ── */
.web-scorecard-wrapper {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-40) var(--space-20);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  min-height: 180px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-top: var(--space-24);
}

.web-scorecard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-16);
  width: 100%;
}

.score-circle-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
}

.score-circle-inner {
  position: relative;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.score-circle-inner.success .circle-val {
  stroke: var(--color-success);
}

.score-circle-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.score-circle-svg .circle-bg {
  fill: none;
  stroke: rgba(16, 185, 129, 0.08);
  stroke-width: 3px;
}

.score-circle-svg .circle-val {
  fill: none;
  stroke: var(--color-success);
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}

.score-number {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-success);
  font-family: var(--font-secondary);
}

.score-label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
}

.scorecard-badge {
  position: absolute;
  bottom: var(--space-12);
  background: rgba(17, 17, 17, 0.85);
  color: #ffffff;
  font-family: monospace;
  font-size: 0.55rem;
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  z-index: 3;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.scorecard-badge span {
  width: 5px;
  height: 5px;
  background: var(--color-success);
  border-radius: 50%;
}

@media (max-width: 768px) {
  .web-scorecard {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-20);
  }
}

/* ── Engine Diagram Custom Connection Lines & Dots (Desktop Only) ── */
@media (min-width: 993px) {
  .engine-left-list {
    position: relative;
  }

  .engine-item {
    position: relative;
  }

  .engine-item::after {
    content: '';
    position: absolute;
    right: -24px;
    top: 50%;
    width: 24px;
    height: 1px;
    border-top: 1.5px dashed rgba(245, 93, 45, 0.22);
    pointer-events: none;
    transition: all var(--transition-normal);
  }

  .engine-item::before {
    content: '';
    position: absolute;
    right: -26px;
    top: calc(50% - 2.5px);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-primary);
    pointer-events: none;
    z-index: 3;
    transition: all var(--transition-normal);
  }

  .engine-item.active::after {
    border-top-color: var(--color-primary);
  }

  .engine-item.active::before {
    background: var(--color-primary);
    box-shadow: 0 0 8px var(--color-primary);
  }
}

/* ── New subpages additional sections layout and visuals ── */
.cdn-telemetry-panel {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-24);
  font-family: monospace;
  position: relative;
  overflow: hidden;
}

.cdn-telemetry-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-primary);
}

.ping-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin-top: var(--space-16);
}

.ping-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-8) var(--space-12);
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  font-size: 0.75rem;
}

.ping-city {
  font-weight: 700;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.pulse-green {
  width: 6px;
  height: 6px;
  background: var(--color-success, #10B981);
  border-radius: 50%;
  position: relative;
  display: inline-block;
}

.pulse-green::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid var(--color-success, #10B981);
  animation: pulseLight 1.5s infinite;
}

.ping-time {
  color: var(--color-primary);
  font-weight: 700;
}

/* CI/CD Console styles */
.pipeline-console {
  background: #0f141c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: var(--space-20);
  font-family: monospace;
  color: #a5b4fc;
  box-shadow: var(--shadow-lg);
  font-size: 0.725rem;
  line-height: 1.6;
}

.console-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 12px;
}

.console-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.console-dot.red {
  background: #ef4444;
}

.console-dot.yellow {
  background: #f59e0b;
}

.console-dot.green {
  background: #10b981;
}

.console-line {
  margin-bottom: 4px;
}

.console-line.success {
  color: #34d399;
}

.console-line.info {
  color: #38bdf8;
}

.console-line.warning {
  color: #fbbf24;
}

/* Blue-Green Deployment */
.blue-green-container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-24);
  margin-top: var(--space-24);
  position: relative;
}

.router-node {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  position: relative;
  z-index: 2;
}

.bg-server-node {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-20);
  position: relative;
  transition: all var(--transition-normal);
}

.bg-server-node.active {
  border-color: var(--color-success);
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.08);
}

.bg-server-node.inactive {
  opacity: 0.65;
  border-style: dashed;
}

.bg-server-status {
  font-family: monospace;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  display: inline-block;
  margin-bottom: var(--space-8);
}

.bg-server-status.green {
  background: rgba(16, 185, 129, 0.08);
  color: #10B981;
}

.bg-server-status.blue {
  background: rgba(17, 17, 17, 0.04);
  color: var(--color-text-muted);
}

/* Security permission matrix */
.security-shield-matrix {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
}

.security-matrix-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-16);
  display: flex;
  align-items: center;
  gap: var(--space-12);
  transition: all var(--transition-normal);
}

.security-matrix-card:hover {
  transform: translateY(-2px);
  border-color: rgba(245, 93, 45, 0.3);
}

.security-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(245, 93, 45, 0.08);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Animations keyframes */
@keyframes pulseLight {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

@media (max-width: 768px) {
  .security-shield-matrix {
    grid-template-columns: 1fr;
  }

  .blue-green-container {
    grid-template-columns: 1fr;
    gap: var(--space-16);
  }

  .router-node {
    margin: 0 auto;
  }
}

/* ── Section Spacing overrides to reduce gaps between sections ── */
body[data-page="development"] .section-padding,
body[data-page="development-sub"] .section-padding {
  padding-top: var(--space-32) !important;
  padding-bottom: var(--space-32) !important;
}

body[data-page="development"] .cta-section,
body[data-page="development-sub"] .cta-section {
  padding-top: var(--space-32) !important;
  padding-bottom: var(--space-32) !important;
}

body[data-page="development"] .hero--service,
body[data-page="development-sub"] .hero--service {
  padding-bottom: var(--space-32) !important;
}

@media (min-width: 768px) {

  body[data-page="development"] .section-padding,
  body[data-page="development-sub"] .section-padding {
    padding-top: var(--space-48) !important;
    padding-bottom: var(--space-48) !important;
  }

  body[data-page="development"] .cta-section,
  body[data-page="development-sub"] .cta-section {
    padding-top: var(--space-48) !important;
    padding-bottom: var(--space-48) !important;
  }

  body[data-page="development"] .hero--service,
  body[data-page="development-sub"] .hero--service {
    padding-bottom: var(--space-48) !important;
  }
}

@media (min-width: 1200px) {

  body[data-page="development"] .section-padding,
  body[data-page="development-sub"] .section-padding {
    padding-top: var(--space-56) !important;
    padding-bottom: var(--space-56) !important;
  }

  body[data-page="development"] .cta-section,
  body[data-page="development-sub"] .cta-section {
    padding-top: var(--space-56) !important;
    padding-bottom: var(--space-56) !important;
  }

  body[data-page="development"] .hero--service,
  body[data-page="development-sub"] .hero--service {
    padding-bottom: var(--space-56) !important;
  }
}

/* ── Architecture Console Responsive Fixes on Mobile ── */
@media (max-width: 576px) {
  .dev-engine-diagram {
    padding: var(--space-20) var(--space-12) !important;
  }

  .flow-row {
    flex-direction: column !important;
    gap: var(--space-16) !important;
  }

  .flow-arrow-line {
    display: none !important;
  }

  .core-hub {
    width: 120px !important;
    height: 120px !important;
  }

  .core-hub svg {
    width: 120px !important;
    height: 120px !important;
  }

  .core-center-orb {
    width: 60px !important;
    height: 60px !important;
  }

  .core-center-orb svg {
    width: 32px !important;
    height: 32px !important;
  }

  .flow-badge {
    min-width: 100% !important;
    max-width: 180px;
    padding: 8px 12px !important;
  }

  .orbiting-nodes {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: var(--space-12) !important;
  }

  .orbit-node-item {
    flex: 1 1 70px;
    max-width: 90px;
  }
}






/* --- End: pages/development.css --- */

/* --- Start: pages/digital-marketing.css --- */
/* ── Digital Marketing Layout ── */

/* ── Hero / Header Section (5th Image) ── */
.marketing-hero {
  background: linear-gradient(165deg, #FFFFFF 0%, #FFF9F5 42%, #FFF3EB 100%);
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--header-height) + var(--space-16));
  padding-bottom: var(--space-32);
}

.marketing-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 75% 15%, rgba(245, 93, 45, 0.12) 0%, transparent 65%),
    radial-gradient(ellipse 55% 45% at 10% 85%, rgba(245, 93, 45, 0.05) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.marketing-hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.15) 15%, rgba(0, 0, 0, 0.7) 40%, black 60%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.15) 15%, rgba(0, 0, 0, 0.7) 40%, black 60%);
}

.marketing-hero-visual img {
  mix-blend-mode: multiply;
  filter: contrast(1.05) saturate(1.1);
}

.rocket-path-container {
  position: relative;
  width: 100%;
  max-width: 420px;
  height: 100%;
}

.rocket-path-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.rocket-icon-wrapper {
  position: absolute;
  bottom: 0;
  left: 45%;
  font-size: 2.2rem;
  z-index: 10;
  animation: rocket-float 4s ease-in-out infinite;
}

@keyframes rocket-float {

  0%,
  100% {
    transform: translateY(0) rotate(5deg);
  }

  50% {
    transform: translateY(-15px) rotate(-5deg);
  }
}

.path-nodes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.path-node {
  position: absolute;
  display: flex;
  align-items: center;
  width: 100%;
  left: 40px;
}

/* Adjust horizontal offsets to match curved path roughly */
.path-node:nth-child(1) {
  left: 52px;
}

/* top: 5% */
.path-node:nth-child(2) {
  left: 74px;
}

/* top: 28% */
.path-node:nth-child(3) {
  left: 62px;
}

/* top: 50% */
.path-node:nth-child(4) {
  left: 46px;
}

/* top: 72% */
.path-node:nth-child(5) {
  left: 35px;
}

/* top: 93% */

.node-dot {
  width: 12px;
  height: 12px;
  background-color: var(--color-primary);
  border: 2px solid var(--color-bg-white);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(245, 93, 45, 0.4);
  flex-shrink: 0;
  position: relative;
  z-index: 5;
}

.node-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(245, 93, 45, 0.3);
  animation: ripple 2s infinite ease-out;
}

@keyframes ripple {
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

.node-card {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-8) var(--space-16);
  margin-left: var(--space-16);
  box-shadow: var(--shadow-sm);
  width: 250px;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.node-card:hover {
  transform: translateX(4px);
  border-color: rgba(245, 93, 45, 0.2);
  box-shadow: var(--shadow-md);
}

.node-icon {
  font-size: 1.25rem;
}

.node-text h4 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-text-primary);
  margin: 0 0 2px 0;
}

.node-text p {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin: 0;
}

/* ── Why Choose Us Section (3rd Image) ── */
.why-choose-visual {
  position: relative;
  padding: var(--space-16);
}

.dashboard-mockup {
  background-color: var(--color-bg-alt);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-24);
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-20);
  min-height: 480px;
}

@media (min-width: 640px) {
  .dashboard-mockup {
    grid-template-columns: 1.2fr 1fr;
    grid-template-rows: auto auto;
  }
}

.mockup-chat {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  z-index: 2;
}

.chat-bubble {
  display: flex;
  gap: var(--space-10);
  background-color: var(--color-bg-white);
  border: 1.2px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-10) var(--space-12);
  max-width: 90%;
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition-fast);
}

.chat-bubble:hover {
  transform: translateY(-1px);
}

.chat-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.team-avatar {
  background-color: #0700FF;
  color: #FFF;
}

.chat-message {
  flex: 1;
}

.chat-message strong {
  font-size: 0.8125rem;
  color: var(--color-text-primary);
}

.chat-time {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  float: right;
  margin-top: 2px;
}

.chat-message p {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 4px 0 0 0;
  line-height: 1.4;
}

.chat-team {
  align-self: flex-end;
  background-color: rgba(7, 0, 255, 0.03);
  border-color: rgba(7, 0, 255, 0.1);
  margin-left: 10%;
}

.mockup-center-hub {
  display: none;
  grid-column: 2;
  grid-row: 1;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

@media (min-width: 640px) {
  .mockup-center-hub {
    display: flex;
  }
}

.hub-circle {
  width: 72px;
  height: 72px;
  background-color: var(--color-bg-white);
  border: 1.5px solid var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 0 20px rgba(245, 93, 45, 0.15);
}

.hub-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.hub-radar {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px dashed rgba(245, 93, 45, 0.25);
  animation: hub-rotate 15s linear infinite;
}

@keyframes hub-rotate {
  100% {
    transform: rotate(360deg);
  }
}

.mockup-deliverables {
  background-color: var(--color-bg-white);
  border: 1.2px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-16);
  box-shadow: var(--shadow-xs);
  z-index: 2;
}

@media (min-width: 640px) {
  .mockup-deliverables {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }
}

.mockup-deliverables h4 {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-12) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.deliv-sub {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

.deliverable-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.deliverable-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8125rem;
}

.deliv-name {
  color: var(--color-text-primary);
  font-weight: 500;
}

.deliv-status {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
}

.status-done {
  background-color: rgba(40, 167, 69, 0.08);
  color: #28a745;
}

.status-progress {
  background-color: rgba(245, 93, 45, 0.08);
  color: var(--color-primary);
}

.mockup-social-stats {
  grid-column: 1 / -1;
  background-color: var(--color-bg-white);
  border: 1.2px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-16);
  box-shadow: var(--shadow-xs);
  z-index: 2;
}

.stats-header {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-12);
}

.stats-sub {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-left: 6px;
}

.stats-grid-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
}

@media (min-width: 480px) {
  .stats-grid-row {
    grid-template-columns: repeat(5, 1fr);
  }
}

.stat-pill {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-6) var(--space-10);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-light);
  border: 1px solid var(--color-border);
}

.stat-icon {
  font-size: 1rem;
}

.stat-info {
  display: flex;
  flex-direction: column;
}

.stat-val {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.1;
}

.stat-lbl {
  font-size: 0.625rem;
  color: var(--color-text-muted);
  line-height: 1.1;
  margin-top: 1px;
}

.lbl-up {
  color: #28a745;
  font-weight: 600;
}

.why-choose-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
}

@media (min-width: 640px) {
  .why-choose-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.why-choose-list li {
  font-family: var(--font-secondary);
  font-size: 0.9375rem;
  color: var(--color-text-primary);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: var(--space-10);
}

.why-choose-list li::before {
  content: '✓';
  color: var(--color-primary);
  background-color: var(--color-primary-light);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.75rem;
  flex-shrink: 0;
}

/* Browser Mockup search engine */
.search-engine-mockup {
  background-color: var(--color-bg-white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-top: var(--space-32);
}

.browser-header {
  background-color: var(--color-bg-light);
  border-bottom: 1px solid var(--color-border);
  padding: 8px var(--space-12);
  display: flex;
  align-items: center;
  gap: 6px;
}

.browser-header .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.browser-header .dot.red {
  background-color: #ff5f56;
}

.browser-header .dot.yellow {
  background-color: #ffbd2e;
}

.browser-header .dot.green {
  background-color: #27c93f;
}

.search-bar {
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 2px var(--space-16);
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  margin-left: var(--space-12);
  width: 140px;
  font-family: var(--font-secondary);
}

.search-result {
  padding: var(--space-16);
}

.result-url {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}

.result-title {
  font-size: 1rem;
  color: var(--color-primary);
  font-weight: 600;
  margin: 0 0 6px 0;
}

.result-desc {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.4;
  margin: 0 0 var(--space-16) 0;
}

.result-sublinks {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-12);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
}

@media (min-width: 480px) {
  .result-sublinks {
    grid-template-columns: repeat(3, 1fr);
  }
}

.sublink-item .sublink-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-primary);
  display: block;
  margin-bottom: 4px;
}

.sublink-item .sublink-desc {
  font-size: 0.625rem;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.3;
}

/* ── Services Grid Section (4th Image) ── */
.services-masonry {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
  margin-top: var(--space-48);
}

@media (min-width: 640px) {
  .services-masonry {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-32);
  }
}

@media (min-width: 1024px) {
  .services-masonry {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-32);
  }
}

.marketing-service-card {
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.marketing-service-card:hover {
  transform: translateY(-4px);
  border-color: rgba(245, 93, 45, 0.15);
  box-shadow: var(--shadow-md);
}

.card-thumb {
  height: 200px;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-color: var(--color-bg-light);
  border-bottom: 1.2px solid var(--color-border);
}

.placeholder-thumb {
  background: linear-gradient(135deg, rgba(245, 93, 45, 0.05) 0%, rgba(7, 0, 255, 0.05) 100%);
  position: relative;
}

.placeholder-thumb::after {
  content: 'R';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-primary);
  font-size: 3rem;
  font-weight: 800;
  color: rgba(245, 93, 45, 0.08);
}

.card-body {
  padding: var(--space-20);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-body h3 {
  font-family: var(--font-primary);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.card-arrow-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-light);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.marketing-service-card:hover .card-arrow-btn {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #FFF;
}

/* ── Testimonials Masonry Section (1st Image) ── */
.testimonials-masonry {
  column-count: 1;
  column-gap: var(--space-24);
  margin-top: var(--space-48);
}

@media (min-width: 640px) {
  .testimonials-masonry {
    column-count: 2;
  }
}

@media (min-width: 1024px) {
  .testimonials-masonry {
    column-count: 3;
  }
}

.testimonial-card {
  break-inside: avoid;
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-24);
  margin-bottom: var(--space-24);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
  opacity: 0;
  transform: translateY(20px);
  animation: revealCard 0.6s ease forwards;
}

.testimonial-card:hover {
  transform: translateY(-2px);
  border-color: rgba(245, 93, 45, 0.15);
  box-shadow: var(--shadow-md);
}

/* Custom fade slide-in animation Delays */
.testimonial-card:nth-child(1) {
  animation-delay: 0.1s;
}

.testimonial-card:nth-child(2) {
  animation-delay: 0.2s;
}

.testimonial-card:nth-child(3) {
  animation-delay: 0.3s;
}

.testimonial-card:nth-child(4) {
  animation-delay: 0.15s;
}

.testimonial-card:nth-child(5) {
  animation-delay: 0.25s;
}

.testimonial-card:nth-child(6) {
  animation-delay: 0.35s;
}

.testimonial-card:nth-child(7) {
  animation-delay: 0.2s;
}

.testimonial-card:nth-child(8) {
  animation-delay: 0.3s;
}

@keyframes revealCard {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.testimonial-user {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin-bottom: var(--space-16);
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
}

.placeholder-avatar {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 0.875rem;
}

.user-meta h4 {
  font-family: var(--font-primary);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.user-meta span {
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.testimonial-text {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}

/* ── Marketing CTA Section (2nd Image) ── */
.marketing-cta-card {
  border-radius: var(--radius-lg);
  padding: var(--space-48) var(--space-32);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-lg);
  min-height: 400px;
  background-size: cover;
  background-position: center;
}

@media (min-width: 768px) {
  .marketing-cta-card {
    padding: var(--space-64) var(--space-48);
    min-height: 360px;
  }
}

.cta-card-content {
  z-index: 2;
}

.cta-card-label {
  display: inline-block;
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  color: #FFA500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-16);
}

.cta-card-title {
  color: #FFF;
  font-family: var(--font-primary);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: var(--space-16);
}

.cta-card-desc {
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--font-secondary);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 600px;
  margin-bottom: var(--space-32);
}

.btn--marketing-cta {
  background-color: #D4EE36;
  /* Bright neon green */
  color: #111111;
  font-weight: 700;
  border-radius: var(--radius-sm);
  padding: 14px 28px;
  font-size: 0.9375rem;
  border: none;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.btn--marketing-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(212, 238, 54, 0.35);
  background-color: #e5ff47;
  color: #111111;
}

.cta-card-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.origami-bird-svg {
  width: 100%;
  max-width: 320px;
  height: auto;
}

.pulse-glow-path {
  animation: pulsePath 3s ease-in-out infinite alternate;
}

@keyframes pulsePath {
  0% {
    stroke-opacity: 0.7;
    filter: drop-shadow(0 0 5px rgba(245, 93, 45, 0.4));
  }

  100% {
    stroke-opacity: 1;
    filter: drop-shadow(0 0 15px rgba(245, 93, 45, 0.8));
  }
}

/* ══════════════════════════════════════════════
   RESPONSIVE — Digital Marketing Page
   ══════════════════════════════════════════════ */

/* ── Tablet (max 768px) ── */
@media (max-width: 768px) {

  /* Hero */
  .marketing-hero {
    min-height: 70vh;
  }

  .marketing-hero .hero__title {
    font-size: clamp(2rem, 6vw, 3rem);
  }

  .marketing-hero-visual {
    margin-left: 0 !important;
    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  }

  .marketing-hero-visual img {
    max-width: 320px;
    margin: 0 auto;
  }

  /* Why Choose Us */
  .why-choose-grid {
    gap: var(--space-32) !important;
  }

  .dashboard-mockup {
    padding: var(--space-16);
    min-height: auto;
  }

  .why-choose-list {
    grid-template-columns: 1fr !important;
  }

  /* Services Grid */
  .services-masonry {
    gap: var(--space-20);
  }

  .card-thumb {
    height: 160px;
  }

  /* Testimonials */
  .testimonials-masonry {
    column-count: 2;
  }

  .testimonial-card {
    padding: var(--space-16);
  }

  /* CTA */
  .marketing-cta-card {
    padding: var(--space-32) var(--space-24);
    min-height: 300px;
  }

  .cta-card-title {
    font-size: clamp(1.5rem, 5vw, 2.5rem);
  }

  .cta-card-desc {
    font-size: 0.875rem;
  }

  /* Search Mockup */
  .result-sublinks {
    grid-template-columns: 1fr;
  }
}

/* ── Mobile (max 480px) ── */
@media (max-width: 480px) {

  /* Hero */
  .marketing-hero {
    min-height: auto;
    padding-bottom: var(--space-32);
  }

  .marketing-hero .hero__title {
    font-size: 1.75rem;
  }

  .marketing-hero .hero__desc {
    font-size: 0.875rem;
  }

  .marketing-hero-visual img {
    max-width: 260px;
  }

  /* Why Choose Us */
  .why-choose-grid {
    gap: var(--space-24) !important;
  }

  .dashboard-mockup {
    padding: var(--space-12);
  }

  .chat-bubble {
    padding: var(--space-8);
    max-width: 100%;
  }

  .chat-avatar {
    width: 24px;
    height: 24px;
    font-size: 0.625rem;
  }

  .chat-message strong {
    font-size: 0.75rem;
  }

  .chat-message p {
    font-size: 0.75rem;
  }

  .mockup-deliverables {
    padding: var(--space-12);
  }

  .deliverable-list li {
    font-size: 0.75rem;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
  }

  .stats-grid-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-pill {
    padding: var(--space-4) var(--space-8);
  }

  .stat-val {
    font-size: 0.75rem;
  }

  .stat-lbl {
    font-size: 0.5625rem;
  }

  /* Services Grid */
  .services-masonry {
    grid-template-columns: 1fr;
    gap: var(--space-16);
  }

  .card-thumb {
    height: 140px;
  }

  .card-body {
    padding: var(--space-16);
  }

  .card-body h3 {
    font-size: 0.9375rem;
  }

  /* Testimonials */
  .testimonials-masonry {
    column-count: 1;
  }

  .testimonial-card {
    padding: var(--space-16);
    margin-bottom: var(--space-16);
  }

  .user-avatar {
    width: 32px;
    height: 32px;
  }

  .user-meta h4 {
    font-size: 0.8125rem;
  }

  .testimonial-text {
    font-size: 0.8125rem;
  }

  /* CTA */
  .marketing-cta-card {
    padding: var(--space-24) var(--space-16);
    min-height: 260px;
    background-position: right center;
  }

  .cta-card-title {
    font-size: 1.5rem;
  }

  .cta-card-desc {
    font-size: 0.8125rem;
    margin-bottom: var(--space-20);
  }

  .btn--marketing-cta {
    padding: 12px 20px;
    font-size: 0.8125rem;
  }

  /* Search Mockup */
  .search-engine-mockup {
    margin-top: var(--space-24);
  }

  .search-bar {
    width: 100px;
    font-size: 0.625rem;
  }

  .result-title {
    font-size: 0.875rem;
  }

  .result-desc {
    font-size: 0.6875rem;
  }

  .sublink-title {
    font-size: 0.6875rem;
  }

  .sublink-desc {
    font-size: 0.5625rem;
  }
}

/* --- End: pages/digital-marketing.css --- */

/* --- Start: pages/graphic-design.css --- */
/* =========================
   Graphic design page css
========================= */

/* ==========================================================
   HERO — SPLIT LAYOUT (Before/After Visual)
   ========================================================== */

.hero__container--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

/* Right visual area */
.hero__visual {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
}

/* ── BA IMAGE PANELS ──────────────────────────────────────── */
.ba-img-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.ba-card-img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  display: block;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ba-card-img:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.15);
}

.ba-card-img--after {
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.28);
  transform: scale(1.03);
}

.ba-card-img--after:hover {
  transform: scale(1.03) translateY(-4px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.ba-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 5px 14px;
  border-radius: 20px;
}

.ba-label--before {
  background: #1a1a1a;
  color: #fff;
}

.ba-label--after {
  background: #f55d2d;
  color: #fff;
}

/* ── BEFORE CARD ──────────────────────────────────────────── */
.ba-card--before {
  background: #fff;
  border: 1.5px solid #e0e0e0;
  border-radius: 16px;
  padding: 16px;
  width: 100%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.ba-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.ba-logo-placeholder {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: #aaa;
  border: 1px solid #ddd;
  padding: 3px 8px;
  border-radius: 4px;
}

.ba-url {
  font-size: 0.6rem;
  color: #bbb;
}

.ba-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ba-sale-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: #111;
  line-height: 1;
  letter-spacing: -0.5px;
}

.ba-offer-tag {
  font-size: 0.65rem;
  font-weight: 600;
  color: #888;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.ba-img-wrap--before {
  background: #f0f0f0;
  border-radius: 10px;
  overflow: hidden;
  height: 110px;
  margin: 4px 0;
  filter: grayscale(1);
}

.ba-img-wrap--before img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ba-percent {
  font-size: 1.2rem;
  font-weight: 800;
  color: #111;
}

.ba-lorem {
  font-size: 0.62rem;
  line-height: 1.5;
  color: #999;
}

.ba-btn-before {
  background: #222;
  color: #fff;
  border: none;
  padding: 7px 14px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  border-radius: 6px;
  cursor: pointer;
  align-self: flex-start;
  margin-top: 4px;
}

/* ── ARROW BUTTON ─────────────────────────────────────────── */
.ba-arrow {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: #f55d2d;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(245, 93, 45, 0.4);
  z-index: 2;
}

/* ── AFTER CARD ───────────────────────────────────────────── */
.ba-card--after {
  background: #0e0e0e;
  border-radius: 18px;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
  position: relative;
}

.ba-after-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 0;
}

.ba-brand {
  display: flex;
  align-items: center;
  gap: 7px;
}

.ba-brand-name {
  font-size: 0.65rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 1.5px;
}

.ba-brand-sub {
  font-size: 0.5rem;
  color: #888;
  letter-spacing: 1px;
}

.ba-dots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  opacity: 0.5;
}

.ba-dots span {
  width: 4px;
  height: 4px;
  background: #f55d2d;
  border-radius: 50%;
  display: block;
}

.ba-after-body {
  padding: 10px 14px 10px;
  position: relative;
  z-index: 1;
}

.ba-after-tag {
  font-size: 0.55rem;
  color: #f55d2d;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.ba-after-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.3px;
  line-height: 1;
}

.ba-after-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 4px 0;
}

.ba-up-to {
  font-size: 0.55rem;
  color: #fff;
  font-weight: 600;
  letter-spacing: 1px;
  align-self: flex-start;
  margin-top: 6px;
}

.ba-pct {
  font-size: 2.6rem;
  font-weight: 900;
  color: #f55d2d;
  line-height: 1;
  letter-spacing: -2px;
}

.ba-pct sup {
  font-size: 1rem;
}

.ba-off {
  font-size: 1.1rem;
  font-weight: 800;
  color: #f55d2d;
  align-self: flex-end;
  margin-bottom: 6px;
}

.ba-after-desc {
  font-size: 0.6rem;
  line-height: 1.55;
  color: #aaa;
  margin-bottom: 8px;
}

.ba-btn-after {
  background: #f55d2d;
  color: #fff;
  border: none;
  padding: 7px 14px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 1px;
  border-radius: 6px;
  cursor: pointer;
}

/* After card image — positioned to the right of the text */
.ba-after-img {
  position: absolute;
  right: 0;
  top: 30px;
  bottom: 44px;
  width: 48%;
  overflow: hidden;
}

.ba-after-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

/* After footer bar */
.ba-after-footer {
  display: flex;
  justify-content: space-around;
  border-top: 1px solid #222;
  padding: 10px 14px;
  position: relative;
  z-index: 2;
  background: #0e0e0e;
}

.ba-feat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.ba-feat span {
  font-size: 0.5rem;
  color: #777;
  font-weight: 600;
  letter-spacing: 0.5px;
  line-height: 1.3;
}

/* ==========================================================
   PROCESS STEPS BAR
   ========================================================== */

.process-steps-bar {
  background: #fff;
  padding: 10px;
  border-top: 1px solid #eee;
}

.process-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.process-step {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1.5px solid #eee;
  border-radius: 12px;
  padding: 14px 20px;
  flex: 1;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.process-step:hover {
  box-shadow: 0 4px 16px rgba(245, 93, 45, 0.1);
  border: 0.5px solid #f55d2d;
}

.process-step {
  position: relative;
}

.process-step::before,
.process-step::after {
  display: none !important;
  content: none !important;
}

.process-step__icon {
  width: 42px;
  height: 42px;
  background: #fff8f5;
  border: 1.5px solid #fde0d4;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.process-step__title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #0a0912;
  line-height: 1.2;
}

.process-step__sub {
  font-size: 0.78rem;
  color: #888;
  line-height: 1.3;
}

.process-step__arrow {
  padding: 0 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1200px) {
  .hero__container--split {
    grid-template-columns: 1fr;
  }

  .hero__visual {
    justify-content: center;
    max-width: 600px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .hero__visual {
    flex-direction: column;
    gap: 20px;
  }

  .ba-arrow {
    transform: rotate(90deg);
  }

  .process-steps {
    flex-wrap: wrap;
    gap: 12px;
  }

  .process-step__arrow {
    display: none;
  }

  .process-step {
    flex: 0 0 calc(50% - 6px);
  }
}



/* PORTFOLIO SHOWCASE */

.portfolio-showcase {
  padding-top: 88px;
  padding-bottom: 88px;
  background: #fff;
  align-items: center;
}

.portfolio-showcase__header {
  margin-bottom: 40px;
}

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

.portfolio-card {
  cursor: pointer;
}

.portfolio-card img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  transition: .5s;
}

.portfolio-card:hover img {
  transform: scale(1.05);
}

.portfolio-card h3 {
  font-size: 2rem;
  margin-top: 20px;
  margin-bottom: 8px;
}

.portfolio-card p {
  color: #666;
}

.portfolio-btn-wrap {
  text-align: center;
  margin-top: 70px;
}




/* =========================
   PORTFOLIO MODAL
========================= */

.portfolio-modal {
  position: fixed;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(0px);

  opacity: 0;
  visibility: hidden;

  transition: .4s ease;
  z-index: 1200;
}

.portfolio-modal.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.portfolio-close {
  position: absolute;
  top: 10px;
  right: 40px;
  width: 50px;
  height: 50px;

  border: none;
  background: none;

  color: #000;
  font-size: 40px;
  cursor: pointer;

  z-index: 10000;
}

/* =========================
   Popup
========================= */

.portfolio-popup {

  width: min(1500px, 92vw);
  height: 85vh;

  border-radius: 26px;

  background:
    linear-gradient(120deg,
      #ffffff 0%,
      #fff7ef 55%,
      #ffb15f 100%);

  position: relative;

  overflow: hidden;

  box-shadow:
    0 40px 100px rgba(0, 0, 0, .25);
}

.portfolio-popup-header {
  position: absolute;
  top: 30px;
  left: 70px;

}

.portfolio-popup-header .label-text {
  color: #ff5b1f;
}



/* =========================
   CURSOR
========================= */

.drag-cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 110px;
  height: 110px;
  border-radius: 50%;

  background: #FBEC53;
  color: #000;

  display: flex;
  align-items: center;
  justify-content: center;

  font-weight: 700;
  letter-spacing: 4px;

  pointer-events: none;

  z-index: 999999;

  opacity: 0;
  transform: translate(-9999px, -9999px);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.drag-cursor.active {
  opacity: 1;
}

/* =========================
   3D ARC GALLERY
   ========================= */

.portfolio-carousel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  perspective: 1800px;
  perspective-origin: center 50%;
  touch-action: none;

}

.portfolio-track {
  position: absolute;
  top: 30%;
  width: 260px;
  height: 320px;

  transform-style: preserve-3d;

  transform: translate(-50%, -50%);
}

.portfolio-item {
  position: absolute;
  inset: 0;
  width: 260px;
  height: 300px;

  border-radius: 12px;
  border: 2px solid rgba(245, 93, 45, 0.3);
  background: rgba(10, 9, 18, 0.85);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);

  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  transform: rotateY(var(--ry, 0deg)) translateZ(var(--tz, 0px)) scale(var(--scale, 1));
  backface-visibility: hidden;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.portfolio-item::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;

  bottom: -130px;

  height: 120px;

  background: inherit;

  transform: scaleY(-1);

  opacity: .12;

  filter: blur(10px);

  mask-image:
    linear-gradient(to bottom,
      rgba(0, 0, 0, .5),
      transparent);
}

.portfolio-item:hover {
  border-color: rgba(245, 93, 45, 1);
  box-shadow: 0 20px 50px rgba(245, 93, 45, 0.35);
  --scale: 1.03;
  z-index: 999;
}

.portfolio-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  user-select: none;
  pointer-events: none;
}

.portfolio-item.active {
  border-color: rgba(251, 236, 83, .8);
  box-shadow: 0 20px 50px rgba(251, 236, 83, .2);
}

.portfolio-item.center {
  left: 50%;

  transform:
    translateX(-50%) scale(1);

  z-index: 5;

  border: 2px solid #FBEC53;

  box-shadow:
    0 0 60px rgba(251, 236, 83, .25);
}

.portfolio-item.left-1 {
  left: 50%;

  transform:
    translateX(-130%) rotateY(18deg) scale(.92);

  z-index: 4;

  opacity: .95;
}

.portfolio-item.left-2 {
  left: 50%;

  transform:
    translateX(-210%) rotateY(30deg) scale(.82);

  opacity: .65;

  z-index: 3;
}

.portfolio-item.right-1 {
  left: 50%;

  transform:
    translateX(30%) rotateY(-18deg) scale(.92);

  z-index: 4;

  opacity: .95;
}

.portfolio-item.right-2 {
  left: 50%;

  transform:
    translateX(110%) rotateY(-30deg) scale(.82);

  opacity: .65;

  z-index: 3;
}

.portfolio-item.hidden {
  opacity: 0;
  pointer-events: none;
}



/*   left: 50%;

    transform:
        translateX(-50%) scale(1);

    z-index: 5; */

/* =========================
   DRAG TO EXPLORE 
========================= */

.portfolio-drag-indicator {
  position: absolute;

  bottom: 20px;
  left: 50%;

  transform: translateX(-50%);

  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 100;
}

.portfolio-drag-indicator svg {
  width: 22px;
  height: 22px;
  color: #666;
  animation: dragHand 2s ease-in-out infinite;
}

.portfolio-drag-indicator span {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #666;
}


/* ==========================================================
   ELEGANCE IN EVERY PIXEL — BENTO SECTION
   ========================================================== */

.eip-section {
  background: #f7f7f7;
  padding-top: 88px;
  padding-bottom: 88px;
}

/* ── TOP ROW ──────────────────────────────────────────────── */
.eip-top-row {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
  align-items: start;
  margin-bottom: 20px;
}

/* ── LEFT NARROW COLUMN ───────────────────────────────────── */
.eip-left-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: #fff;
  border: 1.5px solid #e8e8e8;
  border-radius: 18px;
  padding: 32px 32px;

}

/* Icon box */
.eip-icon-box {
  width: 52px;
  height: 52px;
  background: #fff;
  border: 1.5px solid #e8e8e8;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

/* Heading */
.eip-heading {
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  font-weight: 800;
  line-height: 1.18;
  color: #0a0912;
  letter-spacing: -0.5px;
}

.eip-heading-orange {
  color: #f55d2d;
}

.eip-subtext {
  font-size: 0.875rem;
  line-height: 1.65;
  color: #666;
}

/* 3D image card */
.eip-img-card {
  border-radius: 20px;
  overflow: hidden;
  flex: 1;
  min-height: 200px;
  background: linear-gradient(160deg, #fff5f0 0%, #fdd5be 45%, #f97c45 80%, #f55d2d 100%);
}

.eip-img-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  mix-blend-mode: multiply;
}

/* ── RIGHT WIDE COLUMN ────────────────────────────────────── */
.eip-right-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Quote row: text + mockup image */
.eip-quote-row {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 20px;
  background: #fff;
  border: 1.5px solid #e8e8e8;
  border-radius: 18px;
  padding: 32px 28px;
  align-items: center;
}

.eip-quote-text {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.eip-quote-icon {
  font-size: 3rem;
  line-height: 1;
  color: #f55d2d;
  font-family: Georgia, serif;
  font-weight: 900;
}

.eip-quote-heading {
  font-size: clamp(1.1rem, 1.8vw, 1.45rem);
  font-weight: 800;
  line-height: 1.3;
  color: #0a0912;
  letter-spacing: -0.3px;
}

.eip-quote-orange {
  color: #f55d2d;
}

.eip-quote-body {
  font-size: 0.875rem;
  line-height: 1.72;
  color: #666;
}

/* Mockup image */
.eip-mockup-wrap {
  border-radius: 14px;
  overflow: hidden;
  background: #f0f0f0;
  height: 100%;
  min-height: 180px;
}

.eip-mockup-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 14px;
}

/* ── 6 SERVICE CARDS ──────────────────────────────────────── */
.eip-service-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.eip-service-card {
  background: #fff;
  border: 1.5px solid #e8e8e8;
  border-radius: 14px;
  padding: 20px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}

.eip-service-card:hover {
  border-color: #f55d2d;
  box-shadow: 0 8px 28px rgba(245, 93, 45, 0.12);
  transform: translateY(-2px);
}

.eip-svc-icon {
  width: 38px;
  height: 38px;
  border: 1.5px solid #f0e4de;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff8f5;
  margin-bottom: 6px;
}

.eip-service-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #0a0912;
  line-height: 1.25;
}

.eip-service-desc {
  font-size: 0.78rem;
  line-height: 1.55;
  color: #777;
  flex: 1;
}

/* Tools section */
.eip-tools-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #aaa;
  text-transform: uppercase;
  margin-top: 8px;
}

.eip-tools-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

/* Tool badge base */
.eip-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #fff;
}

.eip-tool--ai {
  background: #ff7c00;
}

.eip-tool--ps {
  background: #001e36;
  color: #31a8ff;
}

.eip-tool--ae {
  background: #00005b;
  color: #9999ff;
}

.eip-tool--pr {
  background: #2d004e;
  color: #ea77ff;
}

.eip-tool--id {
  background: #491226;
  color: #ff3399;
}

.eip-tool--canva {
  background: #00c4cc;
}

.eip-tool--figma {
  background: #1e1e1e;
  padding: 4px;
}

/* ── BOTTOM ROW ───────────────────────────────────────────── */
.eip-bottom-row {
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  gap: 20px;
  margin-top: 0;
}

/* Dark CTA card */
.eip-dark-card {
  background: #0f0f0f;
  border-radius: 18px;
  padding: 40px 44px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 10px;
  align-items: center;
  overflow: hidden;
}

.eip-dark-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.eip-dark-card-title-white {
  font-size: clamp(1.1rem, 8vw, 1rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
  letter-spacing: -0.3px;
}

.eip-dark-card-title-orange {
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  font-weight: 800;
  color: #f55d2d;
  line-height: 1.3;
  letter-spacing: -0.3px;
  margin-top: 4px;
}

.eip-dark-divider {
  width: 150px;
  height: 3px;
  background: #f55d2d;
  border-radius: 2px;
  margin: 16px 0;
}

.eip-dark-card-body {
  font-size: 0.85rem;
  line-height: 1.75;
  color: #999;
}

/* Circular diagram */
.eip-diagram-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.eip-diagram-wrap img {
  width: 100%;
}

.eip-diagram-svg {
  width: 100%;
  max-width: 380px;
  height: auto;
}

/* Why card */
.eip-why-card {
  background: #fff;
  border: 1.5px solid #e8e8e8;
  border-radius: 18px;
  padding: 36px 32px;
}

.eip-why-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: #0a0912;
  margin-bottom: 28px;
  letter-spacing: -0.2px;
}

.eip-why-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.eip-why-item {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.9rem;
  color: #333;
  font-weight: 500;
}

.eip-why-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1.5px solid #fde4d9;
  background: #fff9f7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 1280px) {
  .eip-service-cards {
    grid-template-columns: repeat(3, 1fr);
  }

  .eip-dark-card {
    grid-template-columns: 1fr;
  }

  .eip-diagram-wrap {
    justify-content: flex-start;
  }

  .eip-diagram-svg {
    max-width: 300px;
  }
}

@media (max-width: 1024px) {
  .eip-top-row {
    grid-template-columns: 200px 1fr;
  }

  .eip-quote-row {
    grid-template-columns: 1fr;
  }

  .eip-mockup-wrap {
    min-height: 160px;
  }

  .eip-bottom-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .eip-top-row {
    grid-template-columns: 1fr;
  }

  .eip-img-card {
    min-height: 200px;
  }

  .eip-service-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .eip-dark-card {
    padding: 28px 24px;
  }
}



/* ==========================================================
   GSC — GRAPHIC SHOWCASE SECTION
   ========================================================== */

.gsc-section {
  background: #fdf8f4;
  padding-top: 88px;
  padding-bottom: 88px;
  overflow: hidden;
}

/* ── HEADER ── */
.gsc-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: flex-start;
  padding-bottom: 56px;
}

/* Left col */
.gsc-header-left {
  display: flex;
  flex-direction: column;
}

.gsc-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid #f55d2d;
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 2px;
  color: #f55d2d;
  text-transform: uppercase;
  align-self: flex-start;
  margin-bottom: 24px;
}

.gsc-label-dot {
  width: 8px;
  height: 8px;
  background: #f55d2d;
  border-radius: 50%;
  flex-shrink: 0;
}

.gsc-heading {
  font-size: clamp(2.8rem, 5vw, 4.5rem);
  font-weight: 900;
  line-height: 1.05;
  color: #0a0912;
  letter-spacing: -1.5px;
  margin-bottom: 20px;
}

.gsc-heading-orange {
  color: #f55d2d;
}

.gsc-hr {
  width: 48px;
  height: 4px;
  background: #f55d2d;
  border-radius: 2px;
  margin-bottom: 18px;
}

.gsc-tagline {
  font-size: 1rem;
  line-height: 1.7;
  color: #555;
  margin-bottom: 36px;
}

/* Feature badges row */
.gsc-features {
  display: flex;
  gap: 12px;
}

.gsc-feat {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1.5px solid #eee;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #222;
  line-height: 1.4;
  flex: 1;
}

.gsc-feat-icon {
  width: 36px;
  height: 36px;
  border: 1.5px solid #fde0d4;
  border-radius: 9px;
  background: #fff9f7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Right col */
.gsc-header-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  padding-top: 80px;
  gap: 30px;
}

.gsc-intro-text {
  font-size: 1.15rem;
  line-height: 1.7;
  color: #333;
  max-width: 550px;
}


/* ── CAROUSEL ── */
.gsc-carousel-outer {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 56px;
  margin-bottom: 0;
}

.gsc-carousel-inner {
  flex: 1;
  background: #fff;
  border: 1px solid #ede8e3;
  border-radius: 20px;
  padding: 28px 20px;
  overflow: hidden;
}

.gsc-track {
  display: flex;
  gap: 30px;
  padding: 0 20px;
  width: max-content;
  will-change: transform;
  transition: transform 0.05s linear;
}

.gsc-slide {
  width: 190px;
  height: 250px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}

.gsc-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
  pointer-events: none;
}

.gsc-slide:hover img {
  transform: scale(1.06);
}

/* Nav buttons */
.gsc-btn-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #111;
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 10;
  transition: background 0.2s, transform 0.2s;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.gsc-btn-nav:hover {
  background: #f55d2d;
  transform: translateY(-50%) scale(1.08);
}

.gsc-btn-prev {
  left: 4px;
}

.gsc-btn-next {
  right: 4px;
}

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .gsc-header {
    gap: 40px;
  }
}

@media (max-width: 768px) {
  .gsc-section {
    padding: 64px 0 0;
  }

  .gsc-header {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 40px;
  }

  .gsc-header-right {
    padding-top: 0;
  }

  .gsc-dot-pattern {
    display: none;
  }

  .gsc-features {
    flex-wrap: wrap;
  }

  .gsc-feat {
    flex: 0 0 calc(50% - 6px);
  }

  .gsc-carousel-outer {
    padding: 0 40px;
  }

  .gsc-slide {
    width: 160px;
    height: 210px;
  }

  .gsc-btn-nav {
    width: 38px;
    height: 38px;
  }
}


.graphic-showcase__header {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
  align-items: start;
  margin-bottom: var(--space-80);
}



.graphic-showcase__rail-wrap {
  position: relative;
  width: 100%;
}

.graphic-showcase__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 452px);
  gap: var(--space-32);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 0 max(var(--space-24), calc((100vw - var(--max-width-grid)) / 2)) var(--space-12);
}

.graphic-showcase__rail::-webkit-scrollbar {
  display: none;
}

.graphic-showcase-card {
  position: relative;
  min-height: 452px;
  overflow: hidden;
  scroll-snap-align: start;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--color-bg-white);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.24);
}

.graphic-showcase-card--image {
  min-height: auto;
  aspect-ratio: 1 / 1;
  background: var(--color-bg-white);
}

.graphic-showcase-card--image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.graphic-showcase-card--image:hover img {
  transform: scale(1.025);
}

.graphic-showcase-card__content {
  position: relative;
  z-index: 3;
  padding: var(--space-32);
}

.graphic-showcase-card__eyebrow {
  margin-bottom: var(--space-12);
  color: var(--color-primary);
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.graphic-showcase-card h3 {
  max-width: 360px;
  color: var(--color-text-primary);
  font-family: var(--font-primary);
  font-size: clamp(2rem, 3vw, 3.25rem);
  line-height: 0.98;
}

.graphic-showcase-card p {
  max-width: 300px;
  margin-top: var(--space-12);
  color: var(--color-text-secondary);
  font-family: var(--font-secondary);
  font-size: 1rem;
  line-height: 1.45;
}

.graphic-showcase-card .graphic-showcase-card__eyebrow {
  max-width: none;
  margin-top: 0;
  margin-bottom: var(--space-12);
  color: var(--color-primary);
  font-size: 0.75rem;
  line-height: 1.2;
}

.graphic-showcase-card__content span {
  display: inline-flex;
  margin-top: var(--space-16);
  padding: var(--space-8) var(--space-16);
  background: var(--color-accent);
  color: var(--color-text-inverse);
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  font-weight: 800;
}

.graphic-showcase-card--salon {
  background:
    linear-gradient(180deg, #ffffff 0 50%, transparent 50%),
    linear-gradient(135deg, rgba(245, 93, 45, 0.2), rgba(7, 0, 255, 0.08));
}

.graphic-showcase-card--salon h3 {
  color: #4b2ca1;
}

.graphic-showcase-card__scene {
  position: absolute;
  inset: 50% 0 0;
  background:
    linear-gradient(90deg, rgba(17, 17, 17, 0.22), transparent 34%, rgba(245, 93, 45, 0.2)),
    linear-gradient(135deg, #ffe1bd, #f8f0e9 52%, #c89b6e);
}

.graphic-showcase-card__person {
  position: absolute;
  bottom: 0;
  width: 116px;
  height: 166px;
  border-radius: 60px 60px 10px 10px;
  background: linear-gradient(180deg, #f9d5a7 0 26%, #11151d 26% 100%);
}

.graphic-showcase-card__person--left {
  left: 58px;
  transform: rotate(-5deg);
}

.graphic-showcase-card__person--right {
  right: 80px;
  background: linear-gradient(180deg, #f0c08e 0 25%, var(--color-primary) 25% 100%);
  transform: rotate(4deg);
}

.graphic-showcase-card__logo {
  position: absolute;
  left: var(--space-32);
  bottom: var(--space-24);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-white);
  color: var(--color-text-primary);
  font-family: var(--font-primary);
  font-weight: 800;
}

.graphic-showcase-card--watch {
  background:
    radial-gradient(circle at 30% 44%, transparent 0 70px, rgba(245, 93, 45, 0.42) 72px, transparent 74px),
    linear-gradient(180deg, #ffe6d7 0 84%, #ffffff 84% 100%);
}

.graphic-showcase-card--watch h3 {
  max-width: 250px;
  color: #7a3a22;
}

.graphic-showcase-card__watch {
  position: absolute;
  z-index: 2;
  width: 74px;
  height: 210px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, #ffffff 0 28px, #7a3a22 29px 40px, #f6d8b8 41px 47px, transparent 48px),
    linear-gradient(90deg, #d9b981, #fff7df 45%, #a97136);
  box-shadow: var(--shadow-lg);
}

.graphic-showcase-card__watch--one {
  top: 34px;
  right: 130px;
  transform: rotate(-8deg);
}

.graphic-showcase-card__watch--two {
  right: 70px;
  bottom: 86px;
  transform: rotate(14deg);
}

.graphic-showcase-card__signature {
  position: absolute;
  left: var(--space-32);
  right: var(--space-32);
  bottom: var(--space-20);
  z-index: 3;
  border-top: 1px solid rgba(17, 17, 17, 0.12);
  padding-top: var(--space-12);
  color: var(--color-text-primary);
  font-family: var(--font-primary);
  font-size: 1.375rem;
  font-weight: 800;
}

.graphic-showcase-card--product {
  background:
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(255, 255, 255, 0.08) 38px 40px),
    linear-gradient(135deg, #244d8d, #102f61);
}

.graphic-showcase-card--product h3,
.graphic-showcase-card--product p {
  color: var(--color-text-inverse);
}

.graphic-showcase-card--product .graphic-showcase-card__eyebrow {
  color: var(--color-secondary);
}

.graphic-showcase-card__halo {
  position: absolute;
  right: 98px;
  top: 102px;
  width: 150px;
  height: 150px;
  border: 10px solid rgba(255, 255, 255, 0.92);
  border-radius: 34px 34px 0 0;
  border-bottom: 0;
  transform: rotate(45deg);
  filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.55));
}

.graphic-showcase-card__product {
  position: absolute;
  right: 145px;
  bottom: 145px;
  width: 86px;
  height: 116px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0 45%, #d9e7f5 46% 62%, #f55d2d 63% 70%, transparent 71%);
  box-shadow: var(--shadow-lg);
}

.graphic-showcase-card__hand {
  position: absolute;
  right: 55px;
  bottom: 62px;
  width: 250px;
  height: 82px;
  border-radius: 80px 80px 20px 20px;
  background: linear-gradient(180deg, #bec7d1, #606c79);
  transform: rotate(-8deg);
  opacity: 0.9;
}

.graphic-showcase-card--platform {
  background:
    radial-gradient(circle at 76% 60%, rgba(7, 0, 255, 0.16) 0 34%, transparent 35%),
    linear-gradient(135deg, #ffffff, #eaf4ff);
}

.graphic-showcase-card--platform h3 {
  color: #131821;
}

.graphic-showcase-card__phone {
  position: absolute;
  right: 66px;
  bottom: 42px;
  z-index: 2;
  width: 130px;
  height: 248px;
  padding: 24px 12px;
  border: 8px solid #131821;
  border-radius: 30px;
  background: var(--color-bg-white);
  box-shadow: var(--shadow-xl);
  transform: rotate(-13deg);
}

.graphic-showcase-card__phone div {
  height: 74px;
  margin-bottom: var(--space-16);
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
}

.graphic-showcase-card__phone span {
  display: block;
  height: 10px;
  margin-bottom: var(--space-8);
  border-radius: var(--radius-full);
  background: var(--color-bg-alt);
}

.graphic-showcase-card__bubble {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  box-shadow: var(--shadow-md);
}

.graphic-showcase-card__bubble--one {
  right: 48px;
  top: 156px;
  width: 58px;
  height: 58px;
}

.graphic-showcase-card__bubble--two {
  right: 220px;
  bottom: 118px;
  width: 72px;
  height: 72px;
}

.graphic-showcase__nav {
  position: absolute;
  top: 50%;
  z-index: 10;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-bg-dark);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-lg);
  transform: translateY(-50%);
  cursor: pointer;
}

.graphic-showcase__nav span {
  display: block;
  margin-top: -3px;
  font-size: 3rem;
  line-height: 1;
}

.graphic-showcase__nav--prev {
  left: var(--space-16);
}

.graphic-showcase__nav--next {
  right: var(--space-16);
}

@media (min-width: 900px) {
  .graphic-showcase__header {
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.75fr);
  }
}

@media (max-width: 767px) {
  .graphic-showcase-section {
    padding: var(--space-80) 0 var(--space-64);
  }

  .graphic-showcase__header {
    margin-bottom: var(--space-48);
  }

  .graphic-showcase__rail {
    grid-auto-columns: minmax(280px, 84vw);
    gap: var(--space-20);
  }

  .graphic-showcase-card {
    min-height: 410px;
  }

  .graphic-showcase-card--image {
    min-height: auto;
  }

  .graphic-showcase-card__content {
    padding: var(--space-24);
  }

  .graphic-showcase__nav {
    display: none;
  }
}

.cta-section {
  position: relative;
  overflow: hidden;
  min-height: 700px;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Video */
.cta-video-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.cta-video-bg iframe {
  position: absolute;
  top: 50%;
  left: 50%;

  width: 120vw;
  height: 67.5vw;

  min-width: 100%;
  min-height: 100%;

  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Overlay */
.cta-overlay {
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.65);
  z-index: 1;
}

/* Content */
.cta__container {
  position: relative;
  z-index: 2;

  text-align: center;
  max-width: 900px;
}

.cta__title,
.cta__desc {
  color: #fff !important;
}

.cta__desc {
  color: rgba(255, 255, 255, .8);
  margin: 20px auto 40px;
}


/* ==========================================================
   CDS — COLLATERAL DESIGN SECTION
   ========================================================== */

.cds-section {
  background: #FDF9F6;
  padding: 88px 0 80px;
  border-top: 1px solid rgba(245, 93, 45, 0.06);
}

/* ── TWO-COLUMN BODY ── */
.cds-body {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: flex-start;
  margin-bottom: 64px;
}

/* ── LEFT COLUMN ── */
.cds-left {
  display: flex;
  flex-direction: column;
  padding-top: 8px;
}

.cds-heading {
  font-family: var(--font-primary);
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  font-weight: 900;
  line-height: 1.08;
  color: var(--color-text-primary);
  letter-spacing: -1px;
  margin-bottom: var(--space-20);
}

.cds-heading--orange {
  color: var(--color-primary);
}

.cds-desc {
  font-family: var(--font-secondary);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  max-width: 380px;
  margin-bottom: var(--space-32);
}

/* Checklist */
.cds-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-40);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.cds-checklist li {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  font-family: var(--font-secondary);
  font-size: 0.925rem;
  font-weight: 500;
  color: var(--color-text-primary);
}

.cds-check-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid rgba(245, 93, 45, 0.3);
  background: rgba(245, 93, 45, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* CTA button */
.cds-cta {
  align-self: flex-start;
  border-radius: var(--radius-sm) !important;
  padding: 13px 28px !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  gap: var(--space-8);
  border-color: rgba(17, 17, 17, 0.2) !important;
}

.cds-cta:hover {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

/* ── RIGHT COLUMN ── */
.cds-right {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

/* Hero image */
.cds-hero-img-wrap {
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  flex-shrink: 0;
}

.cds-hero-img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

.cds-hero-img-wrap:hover .cds-hero-img {
  transform: scale(1.03);
}

/* Thumbnail 4-column grid */
.cds-thumb-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
}

.cds-thumb {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cds-thumb-img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #e8e8e8;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

.cds-thumb-img-wrap:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.cds-thumb-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

.cds-thumb-img-wrap:hover img {
  transform: scale(1.06);
}

.cds-thumb-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: var(--font-secondary);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-align: center;
  padding: 4px 0;
}

/* ── BOTTOM STATS ROW ── */
.cds-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-20);
  border-top: 1px solid rgba(17, 17, 17, 0.06);
  padding-top: var(--space-40);
}

.cds-stat {
  display: flex;
  align-items: flex-start;
  gap: var(--space-16);
}

.cds-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: rgba(245, 93, 45, 0.07);
  border: 1.5px solid rgba(245, 93, 45, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition-normal), border-color var(--transition-normal);
}

.cds-stat:hover .cds-stat-icon {
  background: rgba(245, 93, 45, 0.12);
  border-color: rgba(245, 93, 45, 0.25);
}

.cds-stat strong {
  display: block;
  font-family: var(--font-primary);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.cds-stat p {
  font-family: var(--font-secondary);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  line-height: 1.4;
  margin: 0;
}

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .cds-body {
    gap: 40px;
  }

  .cds-thumb-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 900px) {
  .cds-body {
    grid-template-columns: 1fr;
    gap: var(--space-40);
  }

  .cds-desc {
    max-width: 100%;
  }

  .cds-stats-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .cds-hero-img {
    height: 260px;
  }
}

@media (max-width: 576px) {
  .cds-section {
    padding: 56px 0 56px;
  }

  .cds-thumb-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cds-stats-row {
    grid-template-columns: 1fr;
  }

  .cds-hero-img {
    height: 220px;
  }
}

/* --- End: pages/graphic-design.css --- */

/* --- Start: pages/video-production.css --- */
/* ── Video Production Hero Section overrides ── */
/* =========================
   Video production page css
========================= */

/* ── Video Production Hero Section overrides ── */

.hero--video-production {
  position: relative;
  overflow: hidden;
  min-height: 98vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-top: calc(var(--header-height) + var(--space-48));
  padding-bottom: var(--space-64);
  background: #070709;
  color: white;
}

@media (max-width: 768px) {
  .hero--video-production {
    min-height: auto;
    padding-top: calc(var(--header-height) + var(--space-32));
    padding-bottom: var(--space-96);
  }
}

/* Background YouTube Video */
.video-bg-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.video-bg-wrapper iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 115vw;
  height: 64.69vw;
  /* 16:9 Aspect Ratio */
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0.75;
}

/* Graded Dark Overlay */
.hero-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to right, rgba(7, 7, 9, 0.95) 0%, rgba(7, 7, 9, 0.8) 45%, rgba(7, 7, 9, 0.3) 100%),
    linear-gradient(to top, rgba(7, 7, 9, 0.9) 0%, rgba(7, 7, 9, 0) 40%);
  pointer-events: none;
}

/* Viewfinder Monospace HUD */
.viewfinder-indicator {
  position: absolute;
  z-index: 3;
  font-family: monospace;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 1px;
  pointer-events: none;
}

.viewfinder-indicator--left {
  top: calc(var(--header-height) + var(--space-20));
  left: var(--space-32);
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.rec-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #EF4444;
  box-shadow: 0 0 8px #EF4444;
  animation: blink-rec 1.2s infinite alternate ease-in-out;
}

@keyframes blink-rec {
  from {
    opacity: 0.2;
  }

  to {
    opacity: 1;
  }
}

.viewfinder-indicator--right {
  top: calc(var(--header-height) + var(--space-20));
  right: var(--space-32);
}

@media (max-width: 768px) {
  .viewfinder-indicator {
    font-size: 0.65rem;
  }

  .viewfinder-indicator--left {
    left: var(--space-16);
  }

  .viewfinder-indicator--right {
    right: var(--space-16);
  }
}

.hero__container .hero__title-vp {
  color: #fff !important;
}

.hero__actions .btn--vp {
  color: #fff !important;
  border-color: #fff !important;
  background: transparent !important;
}

.hero__actions .btn--outline:hover {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}


/* Category Pill Override */
.hero__label--marketing {
  display: inline-flex;
  align-items: center;
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-full);
  border: 1.5px solid rgba(245, 93, 45, 0.4);
  background: rgba(245, 93, 45, 0.08);
  color: var(--color-primary) !important;
  font-family: var(--font-secondary);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: var(--space-24);
  line-height: 1;
}

.hero--video-production .hero__desc {
  max-width: 580px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: var(--space-32);
}

/* Bottom Features Row */
.hero__features-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
  max-width: 600px;
}

.hero__feature-col {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.feature-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  flex-shrink: 0;
  transition: border-color var(--transition-normal), background-color var(--transition-normal);
}

.hero__feature-col:hover .feature-icon {
  border-color: rgba(245, 93, 45, 0.35);
  background: rgba(245, 93, 45, 0.08);
}

.feature-info h4 {
  font-family: var(--font-primary);
  font-size: 0.85rem;
  font-weight: 700;
  color: white;
  margin-bottom: 2px;
  line-height: 1.2;
}

.feature-info p {
  font-family: var(--font-secondary);
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 400;
  margin: 0;
  line-height: 1.2;
}

@media (max-width: 992px) {
  .hero__features-row {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-20);
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .hero__features-row {
    grid-template-columns: 1fr;
    gap: var(--space-16);
  }
}

/* Bottom-Center Play Button */
.play-btn-wrapper {
  position: absolute;
  margin-top: 500px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  cursor: pointer;
}

.play-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  transition: all var(--transition-normal);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  padding: 0;
  outline: none;
}

.play-btn svg {
  transform: translateX(2px);
  transition: transform var(--transition-normal);
}

.play-btn-label {
  font-family: var(--font-secondary);
  font-size: 0.85rem;
  font-weight: 700;
  color: white;
  letter-spacing: 0.5px;
  opacity: 0.8;
  transition: opacity var(--transition-normal), color var(--transition-normal);
}

.play-btn-wrapper:hover .play-btn {
  border-color: var(--color-primary);
  background: var(--color-primary);
  box-shadow: 0 0 30px rgba(245, 93, 45, 0.55);
  transform: scale(1.08);
}

.play-btn-wrapper:hover .play-btn svg {
  transform: translateX(2px) scale(1.05);
}

.play-btn-wrapper:hover .play-btn-label {
  opacity: 1;
  color: var(--color-primary);
}

@media (max-width: 768px) {
  .play-btn-wrapper {
    bottom: var(--space-24);
  }

  .play-btn {
    width: 58px;
    height: 58px;
  }
}

/* ── Lightbox Video Modal ── */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}

.video-modal.is-active {
  opacity: 1;
  pointer-events: auto;
}

.video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 7, 9, 0.93);
  backdrop-filter: blur(10px);
}

.video-modal__content {
  position: relative;
  z-index: 2;
  width: 90%;
  max-width: 960px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.85);
  background: black;
  transform: scale(0.94);
  transition: transform var(--transition-normal);
}

.video-modal.is-active .video-modal__content {
  transform: scale(1);
}

.video-modal__close {
  position: absolute;
  top: -44px;
  right: 0;
  background: none;
  border: none;
  color: white;
  font-size: 2.2rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--transition-normal);
  padding: 0;
  outline: none;
}

.video-modal__close:hover {
  opacity: 1;
}

.video-modal__video-wrapper {
  width: 100%;
  height: 100%;
}

.video-modal__video-wrapper iframe {
  width: 100%;
  height: 100%;
}

@media (max-width: 576px) {
  .video-modal__close {
    top: -36px;
    right: var(--space-8);
    font-size: 1.8rem;
  }
}

/* ── Video Marketing Section Styles ── */

.video-marketing-sec {
  background-color: #F8F9FA;
  padding-top: var(--space-80);
  padding-bottom: var(--space-80);
  gap: var(--space-8);
}

.video-marketing-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-32);
  align-items: stretch;
}

@media (max-width: 1024px) {
  .video-marketing-grid {
    grid-template-columns: 1fr;
  }
}

/* Left Large Card styling */
.video-card-large {
  background: var(--color-bg-white);
  border: 1px solid rgba(17, 17, 17, 0.05);
  border-radius: var(--radius-lg);
  padding: var(--space-48);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.video-card-large:hover {
  box-shadow: var(--shadow-md);
}

.video-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  background: rgba(245, 93, 45, 0.06);
  border: 1px solid rgba(245, 93, 45, 0.15);
  border-radius: var(--radius-full);
  padding: var(--space-8) var(--space-16);
  color: var(--color-primary);
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  width: fit-content;
  margin-bottom: var(--space-24);
}

.video-badge-pill svg {
  color: var(--color-primary);
}

.video-card-large__title {
  font-family: var(--font-primary);
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--color-text-primary);
  margin-bottom: var(--space-20);
}

.text-orange {
  color: var(--color-primary);
}

.orange-line-divider {
  width: 48px;
  height: 4px;
  background-color: var(--color-primary);
  margin-bottom: var(--space-24);
  border-radius: var(--radius-full);
}

.video-card-large__desc {
  font-family: var(--font-secondary);
  color: var(--color-text-muted);
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: var(--space-40);
  max-width: 600px;
}

.video-features-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-20);
  margin-bottom: var(--space-48);
  border-top: 1px solid rgba(17, 17, 17, 0.05);
  padding-top: var(--space-32);
}

@media (max-width: 640px) {
  .video-features-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

.video-feature-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.video-feature-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: rgba(245, 93, 45, 0.05);
  border: 1.5px solid rgba(245, 93, 45, 0.1);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-12);
}

.video-feature-col h5 {
  font-family: var(--font-primary);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

.video-feature-col p {
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.35;
  margin: 0;
}

.video-card-large__actions {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  flex-wrap: wrap;
}

.video-btn-see-work {
  background: var(--color-bg-white) !important;
  border: 1px solid rgba(17, 17, 17, 0.1) !important;
  color: var(--color-text-primary) !important;
  box-shadow: var(--shadow-sm) !important;
}

.video-btn-see-work:hover {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
  background: rgba(245, 93, 45, 0.02) !important;
}

/* Category Grid (2x2) */
/* =========================================
   VIDEO CATEGORY GRID
========================================= */

.video-grid-categories {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-20);
}


/* =========================================
   CATEGORY CARD
========================================= */

.category-card {
  position: relative;
  height: 330px;

  border-radius: var(--radius-lg);
  overflow: hidden;

  padding: 0;

  border: 1px solid rgba(255, 255, 255, 1);

  box-shadow: var(--shadow-sm);

  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal);
}


.category-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}


/* =========================================
   FULL BACKGROUND IMAGE
========================================= */

.category-card__image-wrapper {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  margin: 0;

  overflow: hidden;

  z-index: 1;
}


.category-card__image-wrapper img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform var(--transition-slow);
}


.category-card:hover .category-card__image-wrapper img {
  transform: scale(1.07);
}


/* =========================================
   WHITE BOTTOM GRADIENT
========================================= */

.category-card::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 65%;

  background: linear-gradient(to top,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0.96) 25%,
      rgba(255, 255, 255, 0.75) 48%,
      rgba(255, 255, 255, 0.25) 72%,
      rgba(255, 255, 255, 0) 100%);

  z-index: 2;

  pointer-events: none;
}


/* =========================================
   CARD CONTENT
========================================= */

.category-card__header {
  position: absolute;

  left: 24px;
  right: 24px;
  bottom: 24px;

  z-index: 3;

  margin: 0;
}


/* =========================================
   CATEGORY NUMBER
========================================= */

.category-number {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  border-radius: 6px;

  background: var(--color-primary);

  color: #ffffff;

  font-family: var(--font-secondary);

  font-size: 0.75rem;
  font-weight: 700;

  margin-bottom: 12px;
}


/* =========================================
   CARD TITLE
========================================= */

.category-card h3 {
  font-family: var(--font-primary);

  font-size: 1.45rem;
  font-weight: 700;

  line-height: 1.2;

  color: var(--color-text-primary);

  margin: 0;

  max-width: 230px;
}


/* =========================================
   ARROW
========================================= */

.category-card__arrow {
  position: absolute;

  top: 22px;
  right: 22px;

  left: auto;
  bottom: auto;

  width: 38px;
  height: 38px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.9);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  color: var(--color-primary);

  z-index: 4;

  transition:
    transform var(--transition-normal),
    background var(--transition-normal);
}


.category-card:hover .category-card__arrow {
  transform: translateX(4px);

  background: #ffffff;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 640px) {

  .video-grid-categories {
    grid-template-columns: 1fr;
  }


  .category-card {
    height: 320px;
  }


  .category-card h3 {
    font-size: 1.35rem;
  }

}







.category-card--reels .phone-screen {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 50%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='200' viewBox='0 0 100 200'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23F55D2D'/%3E%3Cstop offset='100%25' stop-color='%23ff9a9e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='100' height='200' fill='url(%23g)'/%3E%3Ccircle cx='50' cy='90' r='25' fill='%23fff' fill-opacity='0.15'/%3E%3Cpath d='M47 80 L57 90 L47 100 Z' fill='%23fff'/%3E%3C/svg%3E");
  background-size: cover;
}

.phone-stats {
  position: absolute;
  right: 8px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  z-index: 3;
}

.phone-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
}

.phone-stat-item svg {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.phone-stat-item span {
  font-size: 0.55rem;
  font-weight: 700;
  margin-top: 1px;
  font-family: var(--font-secondary);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* Tablet Mockup */
.tablet-mockup {
  width: 170px;
  height: 150px;
  background: #18191c;
  border: 8px solid #28292e;
  border-bottom: none;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  position: relative;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  transition: transform var(--transition-normal);
}

.category-card:hover .tablet-mockup {
  transform: translateY(-8px);
}

.tablet-screen {
  width: 100%;
  height: 100%;
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  background: #0f1012;
}

.tablet-title {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.6rem;
  font-family: var(--font-secondary);
  font-weight: 700;
  margin-bottom: var(--space-8);
}

.tablet-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.tablet-metric-item {
  background: #18191c;
  border-radius: var(--radius-xs);
  padding: var(--space-4);
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.03);
}

.metric-label {
  display: block;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.45rem;
  font-family: var(--font-secondary);
  margin-bottom: 2px;
}

.metric-val {
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  font-family: var(--font-secondary);
}

.metric-val.text-success {
  color: var(--color-success);
}

.tablet-chart-svg {
  flex-grow: 1;
  display: flex;
  align-items: flex-end;
}

.tablet-chart-svg svg {
  display: block;
  width: 100%;
}

/* Category card custom alignments */
.category-card__arrow {
  bottom: unset;
  top: var(--space-24);
  left: unset;
  right: var(--space-24);
}

/* ── Middle Section: Process & Stats ── */

.process-stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
}

@media (max-width: 1024px) {
  .process-stats-grid {
    grid-template-columns: 1fr;
  }
}

.section-label {
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-16);
  display: flex;
  align-items: center;
}

/* Dark Process Card */
.process-card-dark {
  background: #0f1013;
  border-radius: var(--radius-lg);
  padding: var(--space-40) var(--space-48);
  color: white;
  position: relative;
  overflow: hidden;
}

.process-card-dark__title {
  font-family: var(--font-primary);
  font-size: 1.85rem;
  color: var(--color-text-inverse);
  font-weight: 700;
  margin-bottom: var(--space-56);
}

.process-flow-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-16);
  position: relative;
}

@media (max-width: 768px) {
  .process-flow-row {
    grid-template-columns: 1fr;
    gap: var(--space-32);
  }
}

.process-flow-connector {
  position: absolute;
  top: 24px;
  left: 40px;
  right: 40px;
  height: 1px;
  border-top: 1px dashed rgba(255, 255, 255, 0.15);
  z-index: 1;
}

@media (max-width: 768px) {
  .process-flow-connector {
    display: none;
  }
}

.process-flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 2;
}

@media (max-width: 768px) {
  .process-flow-step {
    align-items: flex-start;
    text-align: left;
    padding-left: 64px;
  }
}

.step-icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #1d1e22;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  margin-bottom: var(--space-16);
  position: relative;
  transition: background-color var(--transition-normal), border-color var(--transition-normal);
}

.process-flow-step:hover .step-icon-wrapper {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

@media (max-width: 768px) {
  .step-icon-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    margin-bottom: 0;
  }
}

.step-num {
  position: absolute;
  bottom: -18px;
  background: #0f1013;
  padding: 0 4px;
  font-size: 0.65rem;
  font-family: var(--font-secondary);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 768px) {
  .step-num {
    bottom: unset;
    right: -8px;
    top: -8px;
    background: var(--color-primary);
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    padding: 0;
  }
}

.process-flow-step h5 {
  font-family: var(--font-primary);
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: var(--space-8);
  color: white;
}

.process-flow-step p {
  font-family: var(--font-secondary);
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.4;
  margin: 0;
}

/* Light Stats Card */
.stats-card-light {
  background: var(--color-bg-white);
  border: 1px solid rgba(17, 17, 17, 0.05);
  border-radius: var(--radius-lg);
  padding: var(--space-40) var(--space-48);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.stats-flow-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-12);
  align-items: flex-start;
  flex-grow: 1;
  margin-top: var(--space-20);
}

@media (max-width: 768px) {
  .stats-flow-row {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-24);
  }
}

@media (max-width: 480px) {
  .stats-flow-row {
    grid-template-columns: 1fr;
  }
}

.stat-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-right: 1px solid rgba(17, 17, 17, 0.06);
  padding-right: var(--space-8);
}

.stat-col:last-child {
  border-right: none;
  padding-right: 0;
}

@media (max-width: 768px) {
  .stat-col {
    border-right: none;
    padding-right: 0;
    align-items: flex-start;
    text-align: left;
  }
}

.stat-icon-wrapper {
  color: var(--color-primary);
  margin-bottom: var(--space-12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-col h4 {
  font-family: var(--font-primary);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--color-text-primary);
  margin-bottom: var(--space-8);
  line-height: 1.1;
}

.stat-label {
  font-family: var(--font-secondary);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 2px 0 !important;
}

.stat-sub {
  font-family: var(--font-secondary);
  font-size: 0.65rem;
  color: var(--color-text-muted);
  margin: 0 !important;
}

/* ── Bottom CTA Banner Horizontal ── */
.cta-banner-horizontal {
  background: var(--color-bg-white);
  border: 1px solid rgba(17, 17, 17, 0.05);
  border-radius: var(--radius-lg);
  padding: var(--space-20) var(--space-32);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
}

@media (max-width: 1024px) {
  .cta-banner-horizontal {
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-32);
  }
}

.cta-left-content {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

@media (max-width: 640px) {
  .cta-left-content {
    flex-direction: column;
    align-items: flex-start;
  }
}

.cta-rocket-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(245, 93, 45, 0.08);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cta-banner-text {
  font-family: var(--font-primary);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 !important;
}

.cta-social-links {
  display: flex;
  align-items: center;
  gap: var(--space-20);
  flex-wrap: wrap;
}

@media (max-width: 1024px) {
  .cta-social-links {
    justify-content: center;
    padding: var(--space-12) 0;
    border-top: 1px solid rgba(17, 17, 17, 0.05);
    border-bottom: 1px solid rgba(17, 17, 17, 0.05);
  }
}

.social-link-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  text-decoration: none;
  color: var(--color-text-primary);
  font-family: var(--font-secondary);
  font-size: 1rem;
  font-weight: 600;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.social-link-item:hover {
  opacity: 0.8;
  transform: translateY(-1px);
}

.cta-right-btn {
  flex-shrink: 0;
}

@media (max-width: 1024px) {
  .cta-right-btn .btn {
    width: 100%;
  }
}

/*=================
Rb Video Expand 
=================*/

.rb-video-expand {
  padding: 10px 5%;
  background: #f4f4f4;
  overflow: hidden;
}

.rb-title {
  text-align: center;
  font-size: clamp(2.5rem, 5vw, 5rem);
  font-weight: 800;
  margin-bottom: 60px;
  color: #111;
  letter-spacing: -2px;
}

.rb-video-grid {
  display: flex;
  gap: 18px;
  height: 420px;
}

.rb-panel {
  position: relative;
  flex: 1;
  overflow: hidden;
  border-radius: 26px;
  cursor: pointer;
  transition: all .65s cubic-bezier(.16, 1, .3, 1);
  background: #000;
}

/* EXPAND EFFECT */

.rb-panel:hover {
  flex: 3;
}

/* IMAGE */

.rb-panel img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: translate(-50%, -50%) scale(1.05);
  transition: all .6s ease;
}

.rb-panel:hover img {
  transform: translate(-50%, -50%) scale(1.12);
}


.rb-panel video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: 100%;
  min-width: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%) scale(1.25);
  opacity: .7;
  transition: all .6s ease;
  pointer-events: none;
}

.rb-panel:hover video {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.35);
}

/* IFRAME (YOUTUBE) */

.rb-panel iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220%;
  height: 120%;
  transform: translate(-50%, -50%) scale(1.15);
  border: none;
  pointer-events: none;
}

/* OVERLAY */

.rb-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(0, 0, 0, .65),
      rgba(0, 0, 0, .1));
  z-index: 1;
  transition: all .5s ease;
}

.rb-panel:hover .rb-overlay {
  background: linear-gradient(to top,
      rgba(0, 0, 0, .4),
      rgba(0, 0, 0, .05));
}

/* CONTENT */

.rb-content {
  position: absolute;
  left: 30px;
  bottom: 30px;
  z-index: 2;
  color: #fff;
  opacity: 0;
  transform: translateY(20px);
  transition: all .45s ease;
}

.rb-panel:hover .rb-content {
  opacity: 1;
  transform: translateY(0);
}

.rb-content span {
  display: block;
  margin-bottom: 10px;
  opacity: .7;
  letter-spacing: 2px;
  font-size: .85rem;
}

.rb-content h3 {
  font-size: 2rem;
  color: #fff;
  font-weight: 700;
  margin: 0;
  line-height: 1.1;
}

/* MOBILE */

@media(max-width:991px) {

  .rb-video-grid {
    flex-direction: column;
    height: auto;
  }

  .rb-panel {
    height: 100px;
    flex: none;
  }

  .rb-panel:hover {
    height: 320px;
  }

  .rb-content {
    opacity: 1;
    transform: none;
  }

}

/* --- End: pages/video-production.css --- */

/* --- Start: pages/brand-identity.css --- */
/* ==========================================================
   Brand Identity page styles
   ========================================================== */

.hero--brand-identity {
  min-height: 100vh;
  padding-top: calc(var(--header-height) + 118px);
  padding-bottom: 92px;
  background:
    radial-gradient(circle at 67% 44%, rgba(245, 93, 45, 0.1), transparent 31%),
    radial-gradient(circle at 42% 72%, rgba(255, 255, 255, 0.92), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #fbfcff 58%, #ffffff 100%);
  border-bottom: 0;
}

.hero--brand-identity::after {
  background-image:
    radial-gradient(rgba(17, 17, 17, 0.08) 1px, transparent 1px),
    radial-gradient(rgba(245, 93, 45, 0.98) 1.5px, transparent 1.5px);
  background-position: 46.5% 29%, 37.5% 79%;
  background-size: 18px 18px, 240px 240px;
  opacity: 0.28;
  mask-image: linear-gradient(90deg, transparent 0 42%, #000 46% 55%, transparent 60%);
}



.hero__trusted {
  margin-top: 92px;
  display: grid;
  gap: 20px;
}

.hero__trusted-title {
  color: #232936;
  font-family: var(--font-secondary);
  font-size: 0.94rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.hero__trusted-list {
  display: grid;
  grid-template-columns: 1.28fr 1.2fr 0.76fr 0.86fr 1fr;
  align-items: center;
  max-width: 705px;
  color: #9aa0aa;
}

.trusted-logo {
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border-right: 1px solid rgba(30, 36, 48, 0.14);
  color: #959ba5;
  font-family: var(--font-secondary);
  font-weight: 800;
  line-height: 0.86;
  text-align: center;
  text-transform: uppercase;
}

.trusted-logo:last-child {
  border-right: 0;
}


.bi_hero__visual {
  display: grid;
  place-items: center;
  min-width: 0;
}

.brand-hero-mockup {
  position: relative;
  width: min(100%, 600px);
  aspect-ratio: 1 / 1;
  isolation: isolate;
}

.brand-hero-mockup::before {
  content: '';
  position: absolute;
  inset: 7% 3% 7% 4%;
  z-index: -2;
  border-radius: 16px;
  background:
    radial-gradient(circle at 92% 11%, rgba(255, 114, 69, 0.16), transparent 20%),
    linear-gradient(160deg, #fffdfa 0%, #f7f3ef 50%, #ffffff 100%);
  box-shadow: 0 36px 90px rgba(32, 38, 51, 0.1);
}

.brand-hero-mockup::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 4%;
  bottom: 7%;
  height: 35%;
  z-index: -1;
  border-radius: 0 0 18px 18px;
  background: linear-gradient(180deg, rgba(222, 211, 202, 0.8), rgba(245, 243, 241, 0.7));
}

.mockup-corner {
  position: absolute;
  right: -2.5%;
  width: 13px;
  height: 13px;
  border-color: #ff5b2a;
  opacity: 0.95;
}

.mockup-corner--top {
  top: 4%;
  border-top: 2px solid;
  border-right: 2px solid;
}

.mockup-corner--bottom {
  bottom: 1%;
  border-right: 2px solid;
  border-bottom: 2px solid;
}

.brand-board {
  position: absolute;
  top: 12.5%;
  left: 14%;
  width: 71%;
  height: 55%;
  border: 1px solid rgba(196, 200, 204, 0.72);
  border-radius: 10px;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.75), rgba(244, 246, 247, 0.95)),
    #f7f8f8;
  box-shadow: 0 26px 70px rgba(35, 40, 48, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transform: perspective(900px) rotateX(1deg) rotateY(-1deg);
}

.brand-board__chrome {
  position: absolute;
  top: 35px;
  right: 31px;
  display: flex;
  gap: 7px;
}

.brand-board__chrome span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d2d2d2;
}

.brand-board__chrome span:nth-child(n + 2) {
  background: #f46b3e;
}

.brand-board__caption,
.brand-palette__title {
  position: absolute;
  color: #8b9098;
  font-family: var(--font-secondary);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brand-board__caption {
  top: 36px;
  left: 28px;
}

.brand-board__grid {
  position: absolute;
  top: 29%;
  width: 38%;
  height: 42%;
  opacity: 0.42;
  background-image:
    linear-gradient(rgba(178, 188, 196, 0.45) 1px, transparent 1px),
    linear-gradient(90deg, rgba(178, 188, 196, 0.45) 1px, transparent 1px);
  background-size: 100% 45%, 32% 100%;
}

.brand-board__grid--left {
  left: 12%;
}

.brand-board__grid--right {
  right: 12%;
}

.brand-board__logo-lockup {
  position: absolute;
  top: 39%;
  left: 18%;
  right: 13%;
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid #fb4f23;
}

.brand-board__mark {
  width: 104px;
  height: 84px;
  object-fit: contain;
}

.brand-board__logo {
  width: min(68%, 340px);
  height: auto;
}

.brand-guide {
  position: absolute;
  left: 0;
  bottom: 20%;
  width: 26%;
  height: 42%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 16.5%;
  border: 1px solid rgba(215, 215, 215, 0.9);
  border-radius: 2px 2px 5px 5px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(245, 244, 242, 0.92)),
    #fff;
  box-shadow: 0 22px 40px rgba(31, 33, 38, 0.18);
  transform: rotate(-5deg);
}

.brand-guide::after {
  content: '';
  position: absolute;
  right: 10%;
  bottom: 8%;
  width: 34%;
  height: 18%;
  opacity: 0.08;
  background: url("../../img/RiverBird_Ore_logo.png") center / contain no-repeat;
}

.brand-guide__spine {
  position: absolute;
  left: 7%;
  top: 5%;
  bottom: 0;
  width: 18px;
  background: linear-gradient(90deg, #ff4f1d 0 62%, #e43813 62% 76%, #ffffff 76% 100%);
}

.brand-guide span:last-child {
  color: #080808;
  font-family: var(--font-secondary);
  font-size: clamp(0.72rem, 1vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.12;
  text-transform: uppercase;
}

.brand-guide span:last-child::after {
  content: '';
  display: block;
  width: 92px;
  max-width: 100%;
  height: 1px;
  margin-top: 10px;
  background: #fb4f23;
}

.brand-palette {
  position: absolute;
  right: 0;
  bottom: 25%;
  width: 34%;
  height: 18%;
  padding: 24px 20px 18px;
  border: 1px solid rgba(220, 220, 220, 0.94);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 42px rgba(34, 38, 47, 0.16);
  transform: rotate(6deg);
}

.brand-palette__title {
  top: 17px;
  left: 22px;
}

.brand-palette__swatches {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  height: 100%;
  padding-top: 21px;
}

.brand-palette__swatches span {
  border-radius: 5px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 2px 7px rgba(15, 18, 24, 0.08);
}

.brand-palette__swatches span:nth-child(1) {
  background: linear-gradient(145deg, #ff5f2d, #f23b12);
}

.brand-palette__swatches span:nth-child(2) {
  background: linear-gradient(145deg, #ff9166, #ff7042);
}

.brand-palette__swatches span:nth-child(3) {
  background: linear-gradient(145deg, #eeeeec, #dadad8);
}

.brand-palette__swatches span:nth-child(4) {
  background: linear-gradient(145deg, #2d2d2d, #0d0d0d);
}

.brand-card-mini {
  position: absolute;
  left: 30%;
  bottom: 12.5%;
  width: 30%;
  height: 15%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(220, 220, 220, 0.88);
  border-bottom: 3px solid #fb4f23;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 20px 34px rgba(34, 38, 47, 0.12);
  transform: rotate(4deg);
}

.brand-card-mini img {
  width: 58%;
}

.brand-token {
  position: absolute;
  right: 24%;
  bottom: 11.5%;
  width: 12%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #ff6835 0%, #f13e14 100%);
  box-shadow: 0 16px 28px rgba(245, 93, 45, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.38);
}

.brand-token img {
  width: 62%;
  filter: brightness(0) invert(1);
  opacity: 0.96;
}

.brand-pen {
  position: absolute;
  right: 3%;
  bottom: 9%;
  width: 31%;
  height: 5.5%;
  transform: rotate(-13deg);
  filter: drop-shadow(0 12px 8px rgba(40, 42, 48, 0.17));
}

.brand-pen__body,
.brand-pen__cap,
.brand-pen__tip {
  position: absolute;
  top: 28%;
  height: 44%;
  border-radius: 999px;
}

.brand-pen__body {
  left: 12%;
  right: 10%;
  background: linear-gradient(180deg, #ffffff, #d9dcdf 52%, #ffffff);
  border: 1px solid rgba(175, 177, 180, 0.72);
}

.brand-pen__cap {
  right: 4%;
  width: 13%;
  background: linear-gradient(90deg, #cdd1d5, #ffffff 35%, #f45b29 36% 54%, #c9cdd0 55%);
  border: 1px solid rgba(175, 177, 180, 0.62);
}

.brand-pen__tip {
  left: 0;
  width: 17%;
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  background: linear-gradient(90deg, #8e9298, #f9f9f8);
  border-radius: 0;
}

/* ─── Fruitbell Brand Showcase ─────────────────────────────────────────── */
.fruitbell-brand-showcase {
  --fruitbell-blue: #0c46c4;
  --fruitbell-pink: #f03576;
  --fruitbell-orange: #ff8b24;
  --fruitbell-cream: #fff9f2;
  --fruitbell-green: #51a94b;
  --fb-poppins: 'Poppins', sans-serif;
  --fb-quicksand: 'Quicksand', sans-serif;

  display: grid;
  grid-template-columns: 1.15fr 1fr 1.3fr;
  grid-template-rows: auto auto auto auto;
  grid-template-areas:
    "intro  elements  mockup"
    "intro  blueprint details"
    "type   product   guidelines"
    "strip  strip     strip";
  gap: 18px;

  color: #10233f;
}

/* ─── Shared Panel Base ─── */
.fruitbell-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(12, 70, 196, 0.07);
  border-radius: 20px;
  background: var(--fruitbell-cream);
  box-shadow: 0 12px 40px rgba(28, 38, 65, 0.07);
  display: flex;
  flex-direction: column;
}

.fruitbell-panel h3 {
  margin: 0;
  color: var(--fruitbell-blue);
  font-family: var(--fb-poppins);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ─── CARD 1 · Intro ─── */
.fruitbell-panel--intro {
  grid-area: intro;
  padding: 40px;
  background: #fffdfb;
}

.fruitbell-intro__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid rgba(12, 70, 196, 0.1);
  border-radius: 999px;
  padding: 5px 14px 5px 5px;
  margin-bottom: 22px;
  width: fit-content;
}

.fruitbell-badge-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff4f8;
  border: 1px solid rgba(240, 53, 118, 0.18);
  overflow: hidden;
  flex-shrink: 0;
}

.fruitbell-badge-logo img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.fruitbell-intro__badge>span {
  font-family: var(--fb-poppins);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fruitbell-blue);
}

.fruitbell-panel--intro h3 {
  font-size: clamp(2rem, 3vw, 3.2rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: none;
  margin-bottom: 16px;
  color: var(--fruitbell-blue);
}

.fruitbell-panel--intro h3 span {
  color: var(--fruitbell-pink);
}

.fruitbell-panel--intro>p {
  font-family: var(--fb-quicksand);
  font-size: 0.9rem;
  font-weight: 600;
  color: #5a6578;
  line-height: 1.6;
  margin-bottom: 28px;
  position: relative;
}



/* Values list */
.fruitbell-values {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 32px;
}

.fruitbell-value-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.fruitbell-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: #fff4f8;
  border: 1px solid rgba(240, 53, 118, 0.12);
  flex-shrink: 0;
}

.fruitbell-value-item:nth-child(4) .fruitbell-icon-wrapper {
  background: #f2fcf0;
  border-color: rgba(81, 169, 75, 0.15);
}

.fruitbell-value-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.fruitbell-value-text strong {
  font-family: var(--fb-poppins);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--fruitbell-blue);
}

.fruitbell-value-text small {
  font-family: var(--fb-quicksand);
  font-size: 0.77rem;
  font-weight: 600;
  color: #647084;
  line-height: 1.45;
}

/* CTA Button */
.fruitbell-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--fruitbell-blue);
  color: #fff;
  border-radius: 999px;
  padding: 12px 22px;
  font-family: var(--fb-poppins);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  width: fit-content;
  transition: background 0.25s, transform 0.2s, box-shadow 0.25s;
  box-shadow: 0 4px 14px rgba(12, 70, 196, 0.18);
}

.fruitbell-button:hover {
  background: #093aac;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(12, 70, 196, 0.28);
  color: #fff;
}

.fruitbell-button svg {
  transition: transform 0.2s;
}

.fruitbell-button:hover svg {
  transform: translateX(4px);
}

/* Dot patterns */
.fruitbell-dots-pattern {
  position: absolute;
  pointer-events: none;
  opacity: 0.65;
  z-index: 0;
}

.fruitbell-dots-pattern--intro {
  bottom: 20px;
  right: 20px;
}

.fruitbell-dots-pattern--type {
  bottom: 16px;
  left: 16px;
}

/* ─── CARD 2 · Brand Elements ─── */
.fruitbell-panel--elements {
  grid-area: elements;
  width: 100%;
  padding: 32px 28px;
  background: #fffdfb;
  text-align: center;
}

.fruitbell-elements {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 24px;
  margin-bottom: 28px;
}

.fruitbell-element-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
  border-right: 1px solid rgba(12, 70, 196, 0.08);
}

.fruitbell-element-col:last-child {
  border-right: none;
}

.element-icon-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 1.5px solid rgba(12, 70, 196, 0.13);
  background: #fff;
  padding: 10px;
}

.element-icon-circle img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.element-icon-text {
  font-family: var(--fb-poppins);
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--fruitbell-pink);
  line-height: 72px;
  height: 72px;
}

.element-icon-orange {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
}

.fruitbell-element-col strong {
  font-family: var(--fb-poppins);
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--fruitbell-blue);
}

.fruitbell-element-col small {
  font-family: var(--fb-quicksand);
  font-size: 0.7rem;
  font-weight: 600;
  color: #647084;
  line-height: 1.45;
}

/* Script tagline */
.fruitbell-script-tagline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: auto;
  padding-top: 16px;
}

.script-row-blue {
  font-family: "Brush Script MT", "Segoe Script", cursive;
  font-size: clamp(1.6rem, 2.2vw, 2.4rem);
  color: var(--fruitbell-blue);
  line-height: 1.1;
}

.script-row-pink {
  font-family: "Brush Script MT", "Segoe Script", cursive;
  font-size: clamp(1.7rem, 2.4vw, 2.6rem);
  color: var(--fruitbell-pink);
  line-height: 1.05;
  margin-left: 16px;
  position: relative;
}

.script-row-pink::after {
  content: '✦';
  position: absolute;
  right: -22px;
  top: 2px;
  font-size: 0.7rem;
  color: var(--fruitbell-pink);
  opacity: 0.7;
}

/* ─── CARD 3 · Mockup ─── */
.fruitbell-panel--mockup {
  grid-area: mockup;
  padding: 0;
  background: #ffd8e0;
  min-height: 300px;
  max-width: 100%;
}

.fruitbell-mockup-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ─── CARD 4 · Blueprint ─── */
.fruitbell-panel--blueprint {
  grid-area: blueprint;
  background: var(--fruitbell-blue);
  padding: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  position: relative;
}

/* Blueprint grid overlay */
.fruitbell-panel--blueprint::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: 44px 44px;
  pointer-events: none;
}

/* Concentric circles */
.fruitbell-panel--blueprint::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 240px;
  height: 240px;
  border: 1px dashed rgba(255, 255, 255, 1);
  border-radius: 50%;
  box-shadow: 0 0 0 60px rgba(255, 255, 255, 0);
  pointer-events: none;
}

.blueprint-logo {
  width: min(42%, 190px);
  filter: brightness(0) invert(1);
  z-index: 2;
  position: relative;
  drop-shadow: none;
}

.fruitbell-blueprint__labels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  z-index: 2;
  position: relative;
}

.bp-label-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--fb-poppins);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ─── CARD 5 · Details ─── */
.fruitbell-panel--details {
  grid-area: details;
  padding: 20px;
  background: var(--fruitbell-cream);
}

.fruitbell-panel--details h3::after {
  content: '';
  display: block;
  width: 52px;
  height: 2px;
  background: var(--fruitbell-pink);
  margin-top: 14px;
}

.fruitbell-panel--details>p {
  font-family: var(--fb-quicksand);
  font-size: 0.82rem;
  font-weight: 600;
  color: #5a6578;
  margin: 8px 0 10px;
  line-height: 1.6;
  max-width: 90%;
  position: relative;
  z-index: 2;
}

.details-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  position: relative;
  z-index: 2;
}

.details-checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fb-poppins);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--fruitbell-blue);
}

.checklist-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--fruitbell-pink);
  flex-shrink: 0;
}

.checklist-check svg {
  color: #fff;
}

.details-orange-vector {
  position: absolute;
  bottom: -48px;
  right: -48px;
  z-index: 1;
  opacity: 0.8;
  pointer-events: none;
  transform: rotate(-20deg);
}

.details-seeds-vector {
  position: absolute;
  top: 50%;
  right: 14px;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
}

/* ─── CARD 6 · Typefaces ─── */
.fruitbell-panel--type {
  grid-area: type;
  padding: 30px 32px;
  background: #fffdfb;
}

.typeface-display {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  margin-top: 18px;
}

.typeface-display__large {
  font-family: var(--fb-poppins);
  font-size: clamp(3.8rem, 5vw, 5.5rem);
  font-weight: 900;
  color: var(--fruitbell-blue);
  line-height: 1;
  flex-shrink: 0;
}

.typeface-display__specimens {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex-grow: 1;
}

.specimen {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.specimen--secondary {
  padding-top: 12px;
  border-top: 1px solid rgba(12, 70, 196, 0.08);
}

.specimen--secondary>small {
  font-family: var(--fb-poppins);
  font-size: 0.6rem;
  font-weight: 800;
  color: var(--fruitbell-blue);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.6;
}

.specimen strong {
  font-family: var(--fb-poppins);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--fruitbell-blue);
}

.specimen--secondary strong {
  font-family: var(--fb-quicksand);
}

.specimen-chars {
  font-family: var(--fb-poppins);
  font-size: 0.6rem;
  font-weight: 500;
  color: #6b7a8d;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.specimen--secondary .specimen-chars {
  font-family: var(--fb-quicksand);
  font-weight: 600;
}

/* ─── CARD 7 · Product ─── */
.fruitbell-panel--product {
  grid-area: product;
  padding: 0;
  background: linear-gradient(160deg, #daf2ff 0%, #eef9ff 100%);
  min-height: 300px;
}

.fruitbell-product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ─── CARD 8 · Guidelines ─── */
.fruitbell-panel--guidelines {
  grid-area: guidelines;
  background: var(--fruitbell-blue);
  padding: 38px 36px;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: 28px;
}

.guidelines-text h3 {
  color: #fff;
  margin-bottom: 14px;
}

.guidelines-text h3::after {
  content: '';
  display: block;
  width: 44px;
  height: 2px;
  background: var(--fruitbell-pink);
  margin-top: 10px;
}

.guidelines-text p {
  font-family: var(--fb-quicksand);
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.6;
  margin-bottom: 22px;
}

.guidelines-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 999px;
  padding: 9px 20px;
  font-family: var(--fb-poppins);
  font-size: 0.77rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}

.guidelines-button:hover {
  background: #fff;
  color: var(--fruitbell-blue);
  border-color: #fff;
}

.guidelines-button svg {
  transition: transform 0.2s;
}

.guidelines-button:hover svg {
  transform: translateX(4px);
}

/* 3‑D Book container */
.fruitbell-book-container {
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 900px;
}

.fruitbell-book {
  width: 300px;
  height: 200px;
  display: flex;
  border-radius: 4px 6px 6px 4px;
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.32),
    0 4px 10px rgba(0, 0, 0, 0.2);
  transform: rotateX(14deg) rotateY(-6deg) rotateZ(2deg);
  transform-style: preserve-3d;
  position: relative;
}

.fruitbell-book__spine {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  background: rgba(0, 0, 0, 0.18);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.22);
  transform: translateX(-50%);
  z-index: 10;
}

.fruitbell-book__page {
  flex: 1;
  padding: 14px 14px 14px 16px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.fruitbell-book__page--left {
  background: linear-gradient(to right, #fff 0%, #fffcf7 85%, #ede7d8 100%);
  border-radius: 4px 0 0 4px;
}

.fruitbell-book__page--right {
  background: linear-gradient(to left, #fff 0%, #fffcf7 85%, #ede7d8 100%);
  border-radius: 0 6px 6px 0;
  padding: 14px 16px 14px 14px;
}

.page-header {
  font-family: var(--fb-poppins);
  font-size: 0.5rem;
  font-weight: 800;
  color: var(--fruitbell-blue);
  opacity: 0.45;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(12, 70, 196, 0.07);
  margin-bottom: 10px;
}

.page-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.logo-grid-box {
  width: 70px;
  height: 70px;
  border: 1px dashed rgba(12, 70, 196, 0.14);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: rgba(12, 70, 196, 0.02);
  overflow: hidden;
}

.logo-grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(12, 70, 196, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12, 70, 196, 0.07) 1px, transparent 1px);
  background-size: 11px 11px;
  pointer-events: none;
}

.logo-grid-box img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  position: relative;
  z-index: 2;
}

.page-content--palette {
  align-items: flex-start;
  justify-content: flex-start;
}

.palette-swatches {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
}

.palette-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.palette-dot--pink {
  background: var(--fruitbell-pink);
}

.palette-dot--orange {
  background: var(--fruitbell-orange);
}

.palette-dot--blue {
  background: var(--fruitbell-blue);
}

.palette-dot--green {
  background: var(--fruitbell-green);
}

.palette-dot--lightgreen {
  background: #a0e87c;
}

.page-section-title {
  font-family: var(--fb-poppins);
  font-size: 0.46rem;
  font-weight: 800;
  color: var(--fruitbell-blue);
  opacity: 0.45;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  width: 100%;
  margin-bottom: 6px;
}

.book-specimen-box {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
}

.book-specimen-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.book-specimen-aa {
  font-family: var(--fb-poppins);
  font-size: 1.1rem;
  color: var(--fruitbell-blue);
  line-height: 1;
}

.book-specimen-aa--bold {
  font-weight: 900;
}

.book-specimen-aa--regular {
  font-family: var(--fb-quicksand);
  font-weight: 500;
  font-size: 0.95rem;
}

.book-specimen-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.book-specimen-info strong {
  font-family: var(--fb-poppins);
  font-size: 0.45rem;
  font-weight: 800;
  color: var(--fruitbell-blue);
}

.book-specimen-info span {
  font-family: var(--fb-poppins);
  font-size: 0.38rem;
  color: #8a9aaf;
}

/* ─── CARD 9 · Strip ─── */
.fruitbell-strip {
  grid-area: strip;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--fruitbell-pink);
  border-radius: 18px;
  padding: 16px 36px;
  gap: 0;
  min-height: 64px;
}

.strip-item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  justify-content: center;
  border-right: 1px solid rgba(255, 255, 255, 0.28);
  padding: 0 12px;
}

.strip-item:last-child {
  border-right: none;
}

.strip-item svg {
  color: #fff;
  opacity: 0.9;
  flex-shrink: 0;
}

.strip-item span {
  font-family: var(--fb-poppins);
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}

/* ─── Responsive: 1280px ─── */
@media (max-width: 1280px) {
  .hero--brand-identity .hero__container {
    width: min(100% - 48px, 1180px);
  }

  .hero__container--split {
    grid-template-columns: minmax(360px, 0.8fr) minmax(520px, 1fr);
    gap: 48px;
  }

  .hero--brand-identity .hero__content {
    padding-left: 0;
  }

  .hero--brand-identity .hero__title {
    font-size: clamp(4.1rem, 6vw, 5.4rem);
  }

  .fruitbell-brand-showcase {
    grid-template-columns: 1.1fr 1.1fr;
    grid-template-rows: repeat(5, auto);
    grid-template-areas:
      "intro    mockup"
      "elements blueprint"
      "details  guidelines"
      "type     product"
      "strip    strip";
  }

  .fruitbell-panel--mockup {
    min-height: 420px;
  }
}

/* ─── Responsive: 1024px ─── */
@media (max-width: 1024px) {
  .hero--brand-identity {
    padding-top: calc(var(--header-height) + 72px);
  }

  .hero--brand-identity .hero__container {
    width: 100%;
    max-width: var(--max-width-grid);
    padding-left: var(--space-24);
    padding-right: var(--space-24);
  }

  .hero__container--split {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .hero--brand-identity .hero__content {
    max-width: 720px;
  }

  .hero--brand-identity .hero__title {
    max-width: 11ch;
  }

  .hero__trusted {
    margin-top: 56px;
  }

  .hero__trusted-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  .trusted-logo:nth-child(3) {
    border-right: 0;
  }

  .brand-hero-mockup {
    max-width: 760px;
  }

  .fruitbell-brand-showcase {
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "elements"
      "mockup"
      "blueprint"
      "details"
      "type"
      "product"
      "guidelines"
      "strip";
  }

  .fruitbell-panel--mockup,
  .fruitbell-panel--product {
    min-height: 360px;
  }

  .fruitbell-panel--guidelines {
    grid-template-columns: 1fr;
  }

  .fruitbell-strip {
    flex-wrap: wrap;
    gap: 12px;
    padding: 20px 24px;
  }

  .strip-item {
    border-right: none;
    flex-basis: calc(50% - 12px);
    justify-content: flex-start;
  }
}

/* ─── Responsive: 768px ─── */
@media (max-width: 768px) {
  .hero--brand-identity {
    min-height: auto;
    padding-top: calc(var(--header-height) + 52px);
    padding-bottom: var(--space-56);
  }

  .hero--brand-identity .hero__container {
    padding-left: var(--space-16);
    padding-right: var(--space-16);
  }

  .hero--brand-identity .hero__label {
    font-size: 0.76rem;
  }

  .hero--brand-identity .hero__title {
    font-size: clamp(3rem, 15vw, 4.35rem);
  }

  .hero--brand-identity .hero__desc {
    font-size: 1.06rem;
  }

  .hero--brand-identity .hero__actions {
    margin-top: 30px;
    gap: 14px;
  }

  .hero--brand-identity .btn {
    min-width: 0;
    min-height: 50px;
    padding: 13px 18px;
  }

  .hero__trusted-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trusted-logo {
    padding: 12px;
    border-right: 0;
    border-bottom: 1px solid rgba(30, 36, 48, 0.12);
  }

  .trusted-logo:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .brand-hero-mockup {
    width: min(100%, 560px);
  }

  .brand-board__logo-lockup {
    gap: 9px;
  }

  .brand-board__mark {
    width: 64px;
  }

  .brand-guide span:last-child {
    font-size: 0.58rem;
  }

  .brand-palette {
    padding: 18px 14px 12px;
  }

  .brand-palette__swatches {
    gap: 6px;
  }

  .fruitbell-brand-showcase {
    gap: 12px;
    margin-top: 40px;
  }

  .fruitbell-panel {
    border-radius: 14px;
  }

  .fruitbell-panel--intro,
  .fruitbell-panel--elements,
  .fruitbell-panel--details,
  .fruitbell-panel--type {
    padding: 24px;
  }

  .fruitbell-panel--guidelines {
    padding: 24px;
    grid-template-columns: 1fr;
  }

  .fruitbell-elements {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .fruitbell-element-col {
    border-right: none;
    border-bottom: 1px solid rgba(12, 70, 196, 0.08);
    padding-bottom: 16px;
    margin-bottom: 16px;
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
  }

  .fruitbell-element-col:last-child {
    border-bottom: none;
    margin-bottom: 0;
  }

  .typeface-display {
    flex-direction: column;
    gap: 16px;
  }

  .fruitbell-book {
    transform: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    width: 100%;
    max-width: 360px;
    height: 180px;
  }

  .strip-item {
    flex-basis: 100%;
    justify-content: flex-start;
  }

  .fruitbell-blueprint__labels {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

/* ==========================================================
   Performance Creative Section & CTA Banner Styles
   ========================================================== */
.perf-creative-section {
  background-color: #FAF8F5;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(0, 0, 0, 0.02);
  border-bottom: 1px solid rgba(0, 0, 0, 0.02);
}

.perf-creative-section .badge-capsule {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px dashed rgba(245, 93, 45, 0.4);
  border-radius: 999px;
  color: #F55D2D;
  font-family: var(--font-secondary);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  background: rgba(245, 93, 45, 0.03);
  width: fit-content;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.perf-creative-section .badge-dot {
  width: 6px;
  height: 6px;
  background-color: #F55D2D;
  border-radius: 50%;
  display: inline-block;
}

.perf-header {
  display: grid;
  grid-template-columns: 1.1fr 1.3fr;
  gap: clamp(40px, 5vw, 80px);
  margin-bottom: 60px;
  align-items: flex-start;
}

.perf-title {
  font-size: clamp(2.8rem, 4.2vw, 4.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #111111;
  margin-bottom: 18px;
  font-family: var(--font-primary);
}

.perf-subtitle {
  font-size: 1.0625rem;
  color: var(--color-text-muted);
  max-width: 480px;
  line-height: 1.5;
}

.perf-intro-text {
  font-size: 1.0625rem;
  color: #4A4A4A;
  line-height: 1.6;
  max-width: 600px;
  margin-bottom: 30px;
  margin-top: 10px;
}

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

.perf-badge {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.03);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.015);
  transition: transform 0.3s var(--ease-premium), box-shadow 0.3s var(--ease-premium);
}

.perf-badge:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(245, 93, 45, 0.05);
}

.perf-badge__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(245, 93, 45, 0.05);
  color: #F55D2D;
  flex-shrink: 0;
}

.perf-badge__text {
  font-family: var(--font-secondary);
  font-size: 0.85rem;
  font-weight: 700;
  color: #111111;
  line-height: 1.25;
}

/* Portfolio Grid */
.perf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 80px;
}

.perf-card {
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.02);
  transition: transform 0.4s var(--ease-premium), box-shadow 0.4s var(--ease-premium);
  display: flex;
  flex-direction: column;
}

.perf-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(245, 93, 45, 0.08);
}

.perf-card__image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1.35 / 1;
  overflow: hidden;
  background: #fdfdfd;
}

.perf-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-premium);
}

.perf-card:hover .perf-card__image {
  transform: scale(1.04);
}

.perf-card__content {
  padding: 28px 30px 32px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.perf-card__category {
  font-family: var(--font-secondary);
  font-size: 0.72rem;
  font-weight: 800;
  color: #F55D2D;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  display: block;
}

.perf-card__title {
  font-family: var(--font-secondary);
  font-size: 1.375rem;
  font-weight: 700;
  color: #111111;
  margin-bottom: 24px;
  line-height: 1.25;
}

.perf-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.perf-card__link {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  font-weight: 700;
  color: #F55D2D;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.3s var(--ease-smooth);
}

.perf-card__link .arrow {
  transition: transform 0.3s var(--ease-premium);
}

.perf-card:hover .perf-card__link {
  color: #fb4f23;
}

.perf-card:hover .perf-card__link .arrow {
  transform: translateX(4px);
}

.perf-card__circle-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(245, 93, 45, 0.05);
  color: #F55D2D;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s var(--ease-smooth), color 0.3s var(--ease-smooth), transform 0.3s var(--ease-premium);
}

.perf-card:hover .perf-card__circle-btn {
  background: #F55D2D;
  color: #ffffff;
  transform: rotate(-45deg) scale(1.05);
}

/* CTA Banner */
.perf-cta-banner {
  position: relative;
  background: linear-gradient(135deg, #FFF4EE 0%, #FFFBF9 100%);
  border: 1px solid rgba(245, 93, 45, 0.06);
  border-radius: 20px;
  padding: 10px 10px;
  display: flex;
  align-items: center;
  gap: 32px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(245, 93, 45, 0.03);
}



.perf-cta-banner__left {
  position: relative;
  z-index: 2;
  margin-left: 24px;
}

.perf-cta-bell-card {
  width: 64px;
  height: 64px;
  background: #ffffff;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(245, 93, 45, 0.05);
  border: 1px solid rgba(245, 93, 45, 0.04);
}

.perf-cta-banner__middle {
  flex-grow: 1;
  position: relative;
  z-index: 2;
}

.perf-cta-title {
  font-family: var(--font-secondary);
  font-size: 1.2rem;
  font-weight: 800;
  color: #111111;
  margin-bottom: 6px;
  letter-spacing: -0.015em;
  margin-top: 0;
}

.perf-cta-text {
  font-family: var(--font-secondary);
  font-size: 1rem;
  color: #555555;
  line-height: 1.5;
  margin: 0;
}

.perf-cta-banner__right {
  position: relative;
  z-index: 2;
  margin-right: 20px;
}

.perf-cta-btn {
  min-width: 190px !important;
  min-height: 52px !important;
  font-size: 0.9375rem !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  border-radius: 9px !important;
  background: linear-gradient(180deg, #ff5e2e 0%, #f34217 100%);
  box-shadow: 0 10px 20px rgba(245, 93, 45, 0.2) !important;
}

/* ==========================================================
   Responsive Rules
   ========================================================== */
@media (max-width: 1280px) {
  .perf-header {
    gap: 40px;
  }
}

@media (max-width: 1024px) {
  .perf-header {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-bottom: 40px;
  }

  .perf-intro-text {
    margin-top: 0;
  }

  .perf-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 60px;
  }
}

@media (max-width: 768px) {
  .perf-title {
    font-size: 2.5rem;
  }

  .perf-badges {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .perf-badge {
    padding: 14px 18px;
  }

  .perf-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .perf-card__content {
    padding: 24px;
  }

  .perf-cta-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 24px;
    gap: 24px;
  }

  .perf-cta-banner__left {
    margin-left: 0;
  }

  .perf-cta-banner__right {
    margin-right: 0;
    width: 100%;
  }

  .perf-cta-btn {
    width: 100% !important;
  }

  .perf-cta-banner__dots-left,
  .perf-cta-banner__dots-right {
    display: none;
  }
}

/* --- End: pages/brand-identity.css --- */

/* --- Start: pages/social-media.css --- */
/* ══════════════════════════════════════════════════════════════
   social-media.css  –  Instagram Audit Section
   ══════════════════════════════════════════════════════════════ */

/* ── Outer section ── */
.ig-audit-section {
  background: var(--color-bg-alt);
  padding: var(--space-64) 0 var(--space-56);
}

/* ══════════════════════════════════════════════════════════════
   TOP HERO CARD
   ══════════════════════════════════════════════════════════════ */
.ig-audit-hero-card {
  position: relative;
  background: #FFF7F4;
  border: 1px solid rgba(245, 93, 45, 0.08);
  border-radius: var(--radius-xl);
  overflow: hidden;
  padding: var(--space-48) var(--space-48) var(--space-40);
  margin-bottom: var(--space-24);
  box-shadow: var(--shadow-sm);
}

/* Corner bracket decorations */
.ig-corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: rgba(245, 93, 45, 0.45);
  border-style: solid;
  border-width: 0;
}

.ig-corner--tl {
  top: 18px;
  left: 18px;
  border-top-width: 2px;
  border-left-width: 2px;
  border-top-left-radius: 3px;
}

.ig-corner--br {
  bottom: 18px;
  right: 18px;
  border-bottom-width: 2px;
  border-right-width: 2px;
  border-bottom-right-radius: 3px;
}

/* Dot grid decoration */
.ig-dot-grid {
  position: absolute;
  top: 0;
  right: 0;
  width: 220px;
  height: 220px;
  background-image: radial-gradient(circle, rgba(245, 93, 45, 0.12) 1px, transparent 1px);
  background-size: 18px 18px;
  pointer-events: none;
  opacity: 0.7;
}

/* ── Card body ── */
.ig-audit-hero-card__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ── Title ── */
.ig-audit-title {
  font-family: var(--font-primary);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 800;
  color: var(--color-text-primary);
  line-height: 1.1;
  margin-bottom: var(--space-12);
}

.ig-audit-title--orange {
  color: var(--color-primary);
}

.ig-audit-subtitle {
  font-family: var(--font-secondary);
  font-size: 1rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-32);
  max-width: 500px;
}

/* ══════════════════════════════════════════════════════════════
   SEARCH BAR
   ══════════════════════════════════════════════════════════════ */
.ig-search-wrap {
  width: 100%;
  max-width: 700px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-bottom: var(--space-32);
}

.ig-search-bar {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-12);
  background: #FFFFFF;
  border: 1.5px solid rgba(245, 93, 45, 0.25);
  border-radius: var(--radius-full);
  padding: var(--space-12) var(--space-12) var(--space-12) var(--space-20);
  box-shadow: var(--shadow-sm), 0 0 0 4px rgba(245, 93, 45, 0.05);
  transition: box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.ig-search-bar:focus-within,
.ig-search-bar.has-value {
  border-color: rgba(245, 93, 45, 0.5);
  box-shadow: var(--shadow-md), 0 0 0 4px rgba(245, 93, 45, 0.08);
}

/* Instagram icon */
.ig-search-bar__icon {
  flex-shrink: 0;
  color: var(--color-primary);
  display: flex;
  align-items: center;
}

/* @ + input wrapper */
.ig-search-bar__input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.ig-search-bar__at {
  font-family: var(--font-secondary);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1;
  flex-shrink: 0;
  user-select: none;
}

.ig-search-bar__input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-secondary);
  font-size: 0.98rem;
  color: var(--color-text-primary);
  min-width: 0;
}

.ig-search-bar__input::placeholder {
  color: var(--color-text-muted);
  font-weight: 400;
}

/* Green checkmark — hidden by default */
.ig-search-bar__check {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--transition-normal), transform var(--transition-normal);
  pointer-events: none;
}

.ig-search-bar__check.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Orange arrow button */
.ig-search-bar__btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal);
  box-shadow: var(--shadow-primary);
}

.ig-search-bar__btn:hover {
  background: #e24e1d;
  box-shadow: var(--shadow-primary-lg);
  transform: scale(1.07);
}

/* ══════════════════════════════════════════════════════════════
   CALLBACK ROW (slides in when username is typed)
   ══════════════════════════════════════════════════════════════ */
.ig-callback-row {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    max-height 0.45s var(--ease-premium),
    opacity 0.35s var(--ease-premium),
    transform 0.35s var(--ease-premium);
  pointer-events: none;
  margin-top: 0;
}

.ig-callback-row.is-visible {
  max-height: 160px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  margin-top: var(--space-12);
}

/* Curved label row */
.ig-callback-label-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}

.ig-callback-curve {
  width: 80px;
  height: 20px;
  flex-shrink: 0;
  opacity: 0.6;
}

.ig-callback-curve--flip {
  transform: scaleX(-1);
}

.ig-callback-label {
  font-family: var(--font-secondary);
  font-size: 0.78rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  font-style: italic;
}

/* Three-item fields row */
.ig-callback-fields {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  width: 100%;
}

/* Individual input field */
.ig-callback-field {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #FFFFFF;
  border: 1.5px solid rgba(17, 17, 17, 0.1);
  border-radius: var(--radius-full);
  padding: var(--space-12) var(--space-20);
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.ig-callback-field:focus-within {
  border-color: rgba(245, 93, 45, 0.4);
  box-shadow: 0 0 0 3px rgba(245, 93, 45, 0.06);
}

.ig-callback-field__icon {
  flex-shrink: 0;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  opacity: 0.7;
}

.ig-callback-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-secondary);
  font-size: 0.9rem;
  color: var(--color-text-primary);
  min-width: 0;
}

.ig-callback-input::placeholder {
  color: var(--color-text-muted);
}

/* Request Audit button */
.ig-request-btn {
  flex-shrink: 0;
  border-radius: var(--radius-full) !important;
  padding: var(--space-12) var(--space-24) !important;
  font-size: 0.875rem !important;
  gap: var(--space-8);
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════
   FEATURE PILLS ROW
   ══════════════════════════════════════════════════════════════ */
.ig-features-row {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-12);
  border-top: 1px solid rgba(17, 17, 17, 0.06);
  padding-top: var(--space-24);
}

.ig-feature-pill {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  background: #FFFFFF;
  border: 1px solid rgba(17, 17, 17, 0.06);
  border-radius: var(--radius-md);
  padding: var(--space-16);
  text-align: left;
  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

.ig-feature-pill:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.ig-feature-pill__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: rgba(245, 93, 45, 0.07);
  border: 1px solid rgba(245, 93, 45, 0.12);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ig-feature-pill strong {
  display: block;
  font-family: var(--font-primary);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 3px;
  line-height: 1.2;
}

.ig-feature-pill p {
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.35;
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════
   THREE-COLUMN CARDS GRID
   ══════════════════════════════════════════════════════════════ */
.ig-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: var(--space-20);
  align-items: stretch;
}

/* ── Shared card base ── */
.ig-card {
  border-radius: var(--radius-xl);
  padding: var(--space-32);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.ig-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* ── Card 1: Orange ── */
.ig-card--orange {
  background: radial-gradient(circle at 92% 78%,
      rgba(255, 118, 55, 0.30) 0%,
      rgba(255, 118, 55, 0.80) 50%,
      rgba(255, 118, 55, 1) 100%);

  color: white;
  display: flex;
  flex-direction: column;
  min-height: 340px;
}

.ig-card-orange__icon-badge {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-24);
  flex-shrink: 0;
}

.ig-card-orange__icon-badge svg {
  fill: white;
}

.ig-card-orange__headline {
  font-family: var(--font-primary);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  color: white;
  line-height: 1.15;
  margin-bottom: var(--space-8);
}

.ig-card-orange__highlight {
  color: #FFDDD1;
  display: inline-block;
  position: relative;
}

.ig-card-orange__highlight::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-full);
}

.ig-card-orange__divider {
  width: 40px;
  height: 3px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-full);
  margin: var(--space-20) 0;
}

.ig-card-orange__list {
  list-style: none;
  padding: 0;
  margin: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ig-card-orange__list li {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-secondary);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
}

/* Ghost people illustration */
.ig-card-orange__people {
  position: absolute;
  bottom: 0;
  right: -10px;
  opacity: 0.9;
  pointer-events: none;
}

/* ── Card 2: White (What we provide) ── */
.ig-card--white {
  background: #FFFFFF;
  border: 1px solid rgba(17, 17, 17, 0.06);
  box-shadow: var(--shadow-sm);
  display: block;
  flex-direction: row;
  gap: var(--space-20);
  align-items: flex-start;
  padding: var(--space-24) var(--space-24);
}

.ig-card-badge {
  display: inline-block;
  font-family: var(--font-secondary);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  background: rgba(245, 93, 45, 0.08);
  border: 1px solid rgba(245, 93, 45, 0.18);
  border-radius: var(--radius-full);
  padding: 5px 14px;
  margin-bottom: var(--space-16);
  white-space: nowrap;
}

.ig-card-white__content {
  flex: 1;
  min-width: 0;
}

.ig-card-white__title {
  font-family: var(--font-primary);
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 800;
  color: var(--color-text-primary);
  line-height: 1.2;
  margin-bottom: var(--space-20);
}

.ig-text-orange {
  color: var(--color-primary);
}

.ig-card-white__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ig-card-white__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

/* ── Audit illustration ── */
.ig-audit-illustration {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
  flex-shrink: 0;
}

.ig-clipboard {
  width: 90px;
  position: relative;
}

.ig-clipboard__clip {
  width: 36px;
  height: 14px;
  background: #F55D2D;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.ig-clipboard__body {
  background: #FFFFFF;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(245, 93, 45, 0.2);
  padding: var(--space-12);
  box-shadow: var(--shadow-md), 4px 4px 0 rgba(245, 93, 45, 0.1);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-top: -4px;
}

.ig-clipboard__ig-icon {
  display: flex;
  justify-content: center;
}

.ig-clipboard__bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 28px;
  padding: 0 var(--space-4);
}

.ig-bar {
  flex: 1;
  border-radius: 2px 2px 0 0;
  background: var(--color-primary);
}

.ig-bar--1 {
  height: 60%;
  opacity: 0.5;
}

.ig-bar--2 {
  height: 100%;
}

.ig-bar--3 {
  height: 75%;
  opacity: 0.7;
}

.ig-clipboard__lines {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ig-line {
  height: 5px;
  background: rgba(17, 17, 17, 0.08);
  border-radius: var(--radius-full);
}

.ig-line--short {
  width: 65%;
}

.ig-pie-chart {
  margin-top: var(--space-4);
  filter: drop-shadow(0 4px 8px rgba(245, 93, 45, 0.15));
}

/* ── Card 3: Blush (From insights to impact) ── */
.ig-card--blush {
  background: #FFF0EB;
  border: 1px solid rgba(245, 93, 45, 0.1);
  display: flex;
  flex-direction: column;
  position: relative;
}

.ig-card-blush__arrow-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-12);
  flex-shrink: 0;
}

.ig-card-blush__expand {
  position: absolute;
  top: var(--space-24);
  right: var(--space-24);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ig-card-blush__title {
  font-family: var(--font-primary);
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin-bottom: var(--space-12);
}

.ig-card-blush__desc {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: var(--space-24);
}

.ig-card-blush__perks {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-32);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  flex: 1;
}

.ig-card-blush__perks li {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
}

.ig-perk-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ig-card-blush__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-24);
  border-radius: var(--radius-full);
  border: 1.5px solid rgba(17, 17, 17, 0.15);
  background: #FFFFFF;
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
  text-decoration: none;
  transition: border-color var(--transition-normal), color var(--transition-normal), background var(--transition-normal), box-shadow var(--transition-normal);
  width: fit-content;
}

.ig-card-blush__cta:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgba(245, 93, 45, 0.02);
  box-shadow: var(--shadow-sm);
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .ig-cards-grid {
    grid-template-columns: 1fr 1fr;
  }

  .ig-card--orange {
    grid-column: 1 / -1;
    min-height: 240px;
    flex-direction: row;
    gap: var(--space-32);
  }

  .ig-card-orange__people {
    position: relative;
    bottom: auto;
    right: auto;
    flex-shrink: 0;
  }
}

@media (max-width: 768px) {
  .ig-audit-hero-card {
    padding: var(--space-32) var(--space-24) var(--space-32);
  }

  .ig-features-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .ig-cards-grid {
    grid-template-columns: 1fr;
  }

  .ig-card--orange {
    flex-direction: column;
  }

  .ig-card--white {
    flex-direction: column;
  }

  .ig-callback-fields {
    flex-direction: column;
    gap: var(--space-10);
  }

  .ig-request-btn {
    width: 100%;
  }

  .ig-callback-label-row {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
  }

  .ig-callback-curve {
    display: none;
  }
}

@media (max-width: 480px) {
  .ig-features-row {
    grid-template-columns: 1fr;
  }

  .ig-search-bar {
    padding: var(--space-10) var(--space-10) var(--space-10) var(--space-16);
  }

  .ig-search-bar__btn {
    width: 38px;
    height: 38px;
  }
}

/* ══════════════════════════════════════════════════════════════
   SMM SOLUTIONS SECTION & SMM RESULTS SECTION
   ══════════════════════════════════════════════════════════════ */

/* ── SMM Solutions Section ── */
.smm-solutions-section {
  background: var(--color-bg-white);
  padding: var(--space-80) 0;
  position: relative;
  overflow: hidden;
}

/* Centered Header */
.smm-header-block--center {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 48px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.smm-tagline {
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-16);
}

.smm-tagline::before {
  content: '';
  width: 18px;
  height: 2px;
  background: var(--color-primary);
  display: inline-block;
}

.smm-title {
  font-family: var(--font-primary);
  font-size: clamp(2.2rem, 3.8vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--color-text-primary);
  margin-bottom: var(--space-16);
  text-align: center;
}

.smm-desc {
  font-family: var(--font-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-bottom: 0;
  text-align: center;
}

/* Slider Wrapper & Navigation Arrows */
.smm-slider-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 0;
}

.smm-arrow-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(17, 17, 17, 0.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.3s ease;
}

.smm-arrow-btn--prev {
  left: -20px;
}

.smm-arrow-btn--next {
  right: -20px;
}

@media (max-width: 768px) {
  .smm-arrow-btn--prev {
    left: 0px;
  }

  .smm-arrow-btn--next {
    right: 0px;
  }
}

.smm-arrow-btn:hover {
  background: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
  box-shadow: 0 6px 20px rgba(245, 93, 45, 0.35);
  transform: translateY(-50%) scale(1.08);
}

/* Cards Marquee Container */
.smm-cards-scroll-container {
  width: 100%;
  overflow: hidden;
  padding: 20px 0;
  mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
}

.smm-marquee-track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: smmMarqueeScroll 35s linear infinite;
  will-change: transform;
}

.smm-cards-scroll-container:hover .smm-marquee-track {
  animation-play-state: paused;
}

@keyframes smmMarqueeScroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-50% - 12px));
  }
}

/* Solution Card */
.smm-card {
  background: #ffffff;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 20px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  width: 320px;
  height: 380px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  flex-shrink: 0;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.smm-card--featured {
  border: 1.5px solid var(--color-primary);
  box-shadow: 0 8px 30px rgba(245, 93, 45, 0.12);
}

.smm-card:hover {
  transform: translateY(-6px);
  border-color: rgba(245, 93, 45, 0.4);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

/* Pagination Dots */
.smm-pagination-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 32px;
}

.smm-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #E2E8F0;
  transition: all 0.3s ease;
  cursor: pointer;
}

.smm-dot.active {
  background: var(--color-primary);
  width: 11px;
  height: 11px;
}

/* Bottom CTA Button */
.smm-bottom-cta {
  text-align: center;
  margin-top: 32px;
}

.smm-bottom-cta .smm-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--color-primary);
  color: #ffffff;
  padding: 14px 32px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 6px 20px rgba(245, 93, 45, 0.3);
  transition: all 0.3s ease;
  border: none;
}

.smm-bottom-cta .smm-cta-btn:hover {
  background: var(--color-primary-dark, #e04a1d);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(245, 93, 45, 0.45);
}

/* Top Icon Circle */
.smm-card-icon-badge {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  background: rgba(245, 93, 45, 0.06);
  border: 1px solid rgba(245, 93, 45, 0.1);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-16);
  flex-shrink: 0;
}

.smm-card-title {
  font-family: var(--font-primary);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-8);
  line-height: 1.25;
}

.smm-card-desc {
  font-family: var(--font-secondary);
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.4;
  margin-bottom: auto;
}

/* Cards Bottom Visuals */
.smm-card-graphic {
  border-radius: 10px;
  background: rgba(245, 93, 45, 0.20);
  height: 150px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-16);
  width: 100%;
}

/* Card 1: Strategy Target */
.smm-graphic-target {
  width: 100%;
  height: 100%;
}

.smm-target-circle {
  transform-origin: center;
  transition: transform 0.6s var(--ease-premium);
}

.smm-card:hover .smm-target-circle {
  transform: scale(1.05);
}

.smm-target-dart {
  transform-origin: center;
  transition: transform 0.5s var(--ease-premium);
}

.smm-card .smm-target-dart {
  animation: smm-dart-wiggle 0.5s infinite alternate;
}

@keyframes smm-dart-wiggle {
  0% {
    transform: rotate(-3deg) translate(-2px, 2px);
  }

  100% {
    transform: rotate(3deg) translate(2px, -2px);
  }
}

/* Card 2: Content Creation (Insta screen mockup) */
.smm-graphic-phone {
  width: 80px;
  height: 110px;
  background: #ffffff;
  border: 3px solid #222;
  border-radius: 8px 8px 0 0;
  border-bottom: none;
  position: relative;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--transition-normal);
}

.smm-card:hover .smm-graphic-phone {
  transform: translateY(-4px) scale(1.03);
}

.smm-phone-insta-header {
  height: 14px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  padding: 0 4px;
  font-size: 5px;
  font-weight: bold;
  color: #333;
}

.smm-phone-insta-post {
  padding: 4px;
}

.smm-phone-insta-img {
  height: 48px;
  background: linear-gradient(135deg, rgba(245, 93, 45, 0.07), rgba(255, 139, 100, 0.14));
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.smm-phone-insta-img svg {
  color: var(--color-primary);
  opacity: 0.6;
}

.smm-phone-insta-actions {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}

.smm-phone-insta-dot {
  width: 4px;
  height: 4px;
  background: #e0e0e0;
  border-radius: 50%;
}

.smm-phone-insta-dot--active {
  background: #f55d2d;
}

/* Floating Hearts */
.smm-phone-hearts {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.smm-heart-float {
  position: absolute;
  color: #ff3366;
  opacity: 0;
  font-size: 14px;
  transform: scale(0);
}

.smm-card .smm-heart-float-1 {
  animation: smm-heart-drift-1 1.4s infinite ease-out;
}

.smm-card .smm-heart-float-2 {
  animation: smm-heart-drift-2 1.4s 0.4s infinite ease-out;
}

.smm-card .smm-heart-float-3 {
  animation: smm-heart-drift-3 1.4s 0.8s infinite ease-out;
}

@keyframes smm-heart-drift-1 {
  0% {
    bottom: 10px;
    left: 20%;
    opacity: 0;
    transform: scale(0.3);
  }

  30% {
    opacity: 0.9;
    transform: scale(1);
  }

  100% {
    bottom: 80px;
    left: 10%;
    opacity: 0;
    transform: scale(0.6) rotate(-15deg);
  }
}

@keyframes smm-heart-drift-2 {
  0% {
    bottom: 10px;
    right: 20%;
    opacity: 0;
    transform: scale(0.3);
  }

  30% {
    opacity: 0.9;
    transform: scale(1.1);
  }

  100% {
    bottom: 90px;
    right: 10%;
    opacity: 0;
    transform: scale(0.6) rotate(15deg);
  }
}

@keyframes smm-heart-drift-3 {
  0% {
    bottom: 20px;
    left: 50%;
    opacity: 0;
    transform: scale(0.3);
  }

  30% {
    opacity: 0.9;
    transform: scale(0.9);
  }

  100% {
    bottom: 95px;
    left: 45%;
    opacity: 0;
    transform: scale(0.5) rotate(-5deg);
  }
}

/* Card 3: Community Management (Chat bubbles) */
.smm-graphic-chats {
  position: relative;
  width: 100px;
  height: 80px;
}

.smm-chat-bubble {
  position: absolute;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.06));
  transition: transform 0.6s var(--ease-premium);
}

.smm-chat-bubble--orange {
  bottom: 20px;
  left: 0;
  z-index: 2;
  transform-origin: bottom left;
}

.smm-chat-bubble--white {
  top: 5px;
  right: 0;
  z-index: 1;
  transform-origin: top right;
}

.smm-chat-user-badge {
  position: absolute;
  bottom: -5px;
  right: 15px;
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 20px;
  padding: 2px 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 7px;
  font-weight: 600;
  color: #333;
  z-index: 3;
  box-shadow: var(--shadow-sm);
  transition: transform 0.6s var(--ease-premium);
}

.smm-user-avatar {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #F55D2D;
}

.smm-user-status {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #10B981;
}

.smm-card:hover .smm-chat-bubble--orange {
  transform: translateY(-4px) scale(1.05);
}

.smm-card:hover .smm-chat-bubble--white {
  transform: translateY(3px) scale(0.98);
}

.smm-card:hover .smm-chat-user-badge {
  transform: scale(1.1) translate(-2px, -2px);
}

/* Card 4: Paid Ads (Popup box) */
.smm-graphic-ads {
  position: relative;
  width: 110px;
  height: 70px;
}

.smm-ads-box {
  width: 100px;
  height: 60px;
  background: #ffffff;
  border: 1.5px solid rgba(17, 17, 17, 0.08);
  border-radius: 6px;
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  position: relative;
  z-index: 1;
  transition: transform var(--transition-normal);
}

.smm-ads-btn {
  width: 50px;
  height: 20px;
  background: #f55d2d;
  color: #fff;
  font-family: var(--font-secondary);
  font-size: 8px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  margin-top: 14px;
  box-shadow: 0 2px 4px rgba(245, 93, 45, 0.2);
  transition: background 0.2s, transform 0.15s;
}

.smm-ads-lines {
  position: absolute;
  top: var(--space-8);
  right: var(--space-8);
  width: 30px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.smm-ads-line {
  height: 3px;
  background: #e0e0e0;
  border-radius: 1px;
}

.smm-ads-line--short {
  width: 60%;
}

.smm-ads-cursor {
  position: absolute;
  bottom: -5px;
  right: 25px;
  z-index: 2;
  transition: transform 0.4s var(--ease-premium);
}

/* Click Animation ripple */
.smm-ads-ripple {
  position: absolute;
  bottom: 12px;
  right: 32px;
  width: 20px;
  height: 20px;
  border: 1.5px solid rgba(245, 93, 45, 0.4);
  border-radius: 50%;
  transform: scale(0);
  opacity: 0;
  z-index: 0;
}

.smm-card .smm-ads-box {
  transform: translateY(-2px);
}

.smm-card .smm-ads-btn {
  animation: smm-ad-click 0.8s infinite alternate;
}

.smm-card .smm-ads-cursor {

  animation: smm-cursor-click 1s infinite alternate;
}

.smm-card:hover .smm-ads-ripple {
  animation: smm-ripple-fade 0.8s infinite;
}

@keyframes smm-ad-click {
  0% {
    transform: scale(1);
  }

  80% {
    transform: scale(1);
  }

  90% {
    transform: scale(0.92);
    background: #d4491c;
  }

  100% {
    transform: scale(1);
  }
}

@keyframes smm-cursor-click {
  0% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(-4px, -4px);
  }

  90% {
    transform: translate(-4px, -4px) scale(0.9);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes smm-ripple-fade {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  75% {
    transform: scale(0);
    opacity: 0;
  }

  85% {
    transform: scale(0.5);
    opacity: 1;
  }

  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

/* Card 5: Analytics & Reporting */
.smm-graphic-analytics {
  width: 120px;
  height: 70px;
  position: relative;
}

.smm-analytics-chart {
  width: 100%;
  height: 100%;
}

.smm-chart-path {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 1.5s ease-in-out;
}

.smm-card:hover .smm-chart-path {
  stroke-dashoffset: 0;
}

.smm-chart-bar {
  transform-origin: bottom;
  transform: scaleY(0.4);
  transition: transform 0.8s var(--ease-premium);
}

.smm-chart-bar--1 {
  transition-delay: 0.1s;
}

.smm-chart-bar--2 {
  transition-delay: 0.2s;
}

.smm-chart-bar--3 {
  transition-delay: 0.3s;
}

.smm-card:hover .smm-chart-bar {
  transform: scaleY(1);
}

.smm-chart-point {
  transform: scale(0);
  transform-origin: center;
  transition: transform 0.4s var(--ease-premium);
}

.smm-chart-point--1 {
  transition-delay: 0.4s;
}

.smm-chart-point--2 {
  transition-delay: 0.7s;
}

.smm-chart-point--3 {
  transition-delay: 1.0s;
}

.smm-card:hover .smm-chart-point {
  transform: scale(1);
}

/* Card 6: Trend & Hashtag */
.smm-graphic-hashtag {
  position: relative;
  width: 100px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.smm-hashtag-bg {
  font-family: var(--font-primary);
  font-size: 54px;
  font-weight: 900;
  color: rgba(245, 93, 45, 0.08);
  line-height: 1;
  user-select: none;
  transition: transform 0.6s var(--ease-premium), color 0.6s var(--ease-premium);
}

.smm-hashtag-lens {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 2;
  transition: transform 0.8s var(--ease-premium);
  transform-origin: 30px 30px;
}

.smm-hashtag-sparkle {
  position: absolute;
  color: var(--color-primary);
  opacity: 0;
  transform: scale(0);
  transition: transform 0.4s var(--ease-premium), opacity 0.4s var(--ease-premium);
}

.smm-hashtag-sparkle--1 {
  top: 10px;
  right: 20px;
}

.smm-hashtag-sparkle--2 {
  bottom: 15px;
  left: 15px;
}

.smm-card:hover .smm-hashtag-bg {
  transform: scale(1.08) rotate(5deg);
  color: rgba(245, 93, 45, 0.15);
}

.smm-card:hover .smm-hashtag-lens {
  transform: translate(15px, 8px) scale(1.1);
}

.smm-card:hover .smm-hashtag-sparkle {
  opacity: 1;
  transform: scale(1);
}

.smm-card:hover .smm-hashtag-sparkle--1 {
  transition-delay: 0.1s;
}

.smm-card:hover .smm-hashtag-sparkle--2 {
  transition-delay: 0.3s;
}

/* ── SMM Results Section ── */
.smm-results-section {
  padding: var(--space-80) 0;
  background: #ffffff;
}

.smm-results-card {
  background: radial-gradient(circle at 82% 78%,
      rgba(255, 118, 55, 0.28) 0%,
      rgba(255, 118, 55, 0.12) 22%,
      rgba(255, 118, 55, 0) 48%),
    radial-gradient(circle at 12% 18%,
      rgba(255, 239, 232, 0.95) 0%,
      rgba(255, 245, 240, 0.55) 35%,
      rgba(255, 255, 255, 0) 60%),
    linear-gradient(120deg,
      #fffaf7 0%,
      #ffffff 45%,
      #fff7f2 72%,
      #ffe4d5 100%);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(245, 93, 45, 0.18);

  padding: var(--space-64) var(--space-48);

  position: relative;
  overflow: hidden;

  box-shadow:
    0 30px 80px rgba(245, 93, 45, 0.08),
    0 8px 25px rgba(0, 0, 0, 0.04);
}

.smm-results-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--space-48);
  align-items: center;
  position: relative;
  z-index: 2;
}

@media (max-width: 1024px) {
  .smm-results-grid {
    grid-template-columns: 1fr;
    gap: var(--space-56);
  }

  .smm-results-card {
    padding: var(--space-48) var(--space-24);
  }
}

/* Left Content */
.smm-results-tagline {
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-16);
}

.smm-results-tagline::before {
  content: '';
  width: 20px;
  height: 2px;
  background: var(--color-primary);
}

.smm-results-title {
  font-family: var(--font-primary);
  font-size: clamp(1.85rem, 3.2vw, 2.6rem);
  font-weight: 800;
  line-height: 1.15;
  color: #0d0d0d;
  margin-bottom: var(--space-16);
}

.smm-results-desc {
  font-family: var(--font-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
  color: #667085;
  margin-bottom: var(--space-48);
  max-width: 580px;
}

/* Stats Row */
.smm-stats-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-16);
  border-top: 1px solid rgba(255, 255, 255, 0);
  padding-top: var(--space-32);
}

.smm-stat-col {
  position: relative;
  padding-right: var(--space-8);
}

.smm-stat-col:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 15%;
  height: 70%;
  width: 1px;
  background-image: linear-gradient(to bottom,
      rgba(13, 13, 13, 0) 0%,
      rgba(13, 13, 13, 0.10) 30%,
      rgba(13, 13, 13, 0.10) 70%,
      rgba(13, 13, 13, 0) 100%);
}

@media (max-width: 900px) {
  .smm-stats-row {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-24);
  }

  .smm-stat-col:nth-child(3)::after {
    display: none;
  }
}

@media (max-width: 600px) {
  .smm-stats-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .smm-stat-col::after {
    display: none;
  }
}

.smm-stat-icon {
  color: var(--color-primary);
  margin-bottom: var(--space-12);
  display: flex;
  align-items: center;
}

.smm-stat-number {
  font-family: var(--font-primary);
  font-size: clamp(1.8rem, 3.5vw, 2.3rem);
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: 6px;
}

.smm-stat-name {
  font-family: var(--font-primary);
  font-size: 0.85rem;
  font-weight: 700;
  color: #111111;
  margin-bottom: 6px;
  line-height: 1.2;
}

.smm-stat-desc {
  font-family: var(--font-secondary);
  font-size: 0.72rem;
  color: #667085;
  line-height: 1.35;
}

/* Right Mockup */
.smm-mockup-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 480px;
}

/* Cosmic orbits background */
.smm-orbits {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 1;
}

.smm-orbit-ring {
  position: absolute;
  border: 1px dashed rgba(245, 93, 45, 0.12);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.smm-orbit-ring--1 {
  width: 320px;
  height: 320px;
  animation: smm-rotate-clockwise 25s infinite linear;
}

.smm-orbit-ring--2 {
  width: 440px;
  height: 440px;
  animation: smm-rotate-counter 35s infinite linear;
}

@keyframes smm-rotate-clockwise {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes smm-rotate-counter {
  0% {
    transform: translate(-50%, -50%) rotate(360deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
}

/* Glowing background spot */
.smm-mockup-glow {
  position: absolute;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle,
      rgba(245, 93, 45, 0.22) 0%,
      rgba(255, 149, 102, 0.12) 35%,
      rgba(245, 93, 45, 0) 72%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

/* Phone Mockup */
.smm-phone-container {
  width: 250px;
  height: 510px;

  position: relative;
  z-index: 2;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Notch */
.smm-phone-notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 18px;
  background: #1c1c1e;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  z-index: 10;
}

/* Screen */
.smm-phone-screen {
  flex: 1;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  padding-top: 14px;
  overflow: hidden;
  user-select: none;
  color: #111111;
}

/* Instagram Header */
.smm-insta-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid #efefef;
}

.smm-insta-header__title {
  font-family: var(--font-secondary);
  font-size: 11px;
  font-weight: 700;
}

.smm-insta-header__icons {
  display: flex;
  gap: 12px;
  color: #111;
}

/* Profile Row */
.smm-insta-profile {
  padding: 12px 12px 6px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.smm-insta-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(45deg, #f55d2d, #ffc0a8);
  padding: 2.5px;
}

.smm-insta-avatar-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #111;
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.smm-insta-stats {
  flex: 1;
  display: flex;
  justify-content: space-between;
  padding-right: 6px;
}

.smm-insta-stat-item {
  text-align: center;
}

.smm-insta-stat-val {
  font-size: 11px;
  font-weight: 700;
  color: #111;
  line-height: 1.1;
}

.smm-insta-stat-lbl {
  font-size: 7px;
  color: #8e8e8e;
  line-height: 1.1;
}

/* Bio */
.smm-insta-bio {
  padding: 0 12px;
  font-size: 8px;
  line-height: 1.3;
}

.smm-insta-bio__name {
  font-weight: 700;
  margin-bottom: 1px;
}

.smm-insta-bio__category {
  color: #8e8e8e;
  margin-bottom: 2px;
}

.smm-insta-bio__link {
  color: #00376b;
  text-decoration: none;
  font-weight: 500;
}

/* Buttons */
.smm-insta-actions {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr;
  gap: 4px;
  padding: 10px 12px 6px;
}

.smm-insta-btn {
  height: 22px;
  border-radius: 4px;
  font-size: 8px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
}

.smm-insta-btn--primary {
  background: #0095f6;
  color: #ffffff;
}

.smm-insta-btn--secondary {
  background: #efefef;
  color: #111111;
}

/* Grid Tabs */
.smm-insta-tabs {
  display: flex;
  border-top: 1px solid #efefef;
  margin-top: 8px;
}

.smm-insta-tab {
  flex: 1;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8e8e8e;
  border-bottom: 1.5px solid transparent;
}

.smm-insta-tab--active {
  color: #111111;
  border-bottom-color: #111111;
}

/* Feed Grid */
.smm-insta-feed {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
  background: #efefef;
  padding: 1.5px 0 0;
  flex: 1;
  overflow-y: auto;
}

.smm-insta-feed-item {
  aspect-ratio: 1;
  background: #fff;
  position: relative;
  overflow: hidden;
}

.smm-insta-feed-inner {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #111 0%, #333 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px;
  color: #fff;
}

.smm-insta-feed-lbl {
  font-size: 4px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-primary);
}

.smm-insta-feed-graphic {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.smm-insta-feed-title {
  font-size: 5px;
  line-height: 1.1;
  font-weight: 700;
  color: #fff;
}

/* Floating 3D Elements */
.smm-floating-badge {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.18));
}

.smm-floating-badge--heart {
  top: 90px;
  left: -20px;
  animation: smm-float-slow 6s infinite ease-in-out;
}

.smm-floating-badge--plane {
  bottom: 60px;
  left: -25px;
  animation: smm-float-plane 7s infinite ease-in-out;
}

.smm-floating-badge--user {
  top: 150px;
  right: -25px;
  animation: smm-float-user 8s infinite ease-in-out;
}

@keyframes smm-float-slow {
  0% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-12px) rotate(4deg);
  }

  100% {
    transform: translateY(0) rotate(0deg);
  }
}

@keyframes smm-float-plane {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
  }

  50% {
    transform: translateY(-15px) translateX(6px) rotate(-6deg);
  }

  100% {
    transform: translateY(0) translateX(0) rotate(0deg);
  }
}

@keyframes smm-float-user {
  0% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(10px) rotate(-4deg);
  }

  100% {
    transform: translateY(0) rotate(0deg);
  }
}

/* ══════════════════════════════════════════════════════════════
   SMM HERO SECTION DEVELOPMENTS
   ══════════════════════════════════════════════════════════════ */
.hero--smm {
  overflow: visible;
  /* allows floating badges to overlap naturally */
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFDFB 50%, var(--color-bg-alt) 100%);
}

/* Marketing channel tag orange dot */
.hero__label-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-primary);
  display: inline-block;
  flex-shrink: 0;
}

/* Button SVG Icon Alignments */
.hero__actions .btn-icon {
  margin-left: 8px;
  display: inline-block;
  vertical-align: middle;
  transition: transform var(--transition-normal);
}

.hero__actions .btn:hover .btn-icon {
  transform: translateX(3px);
}

.hero__actions .btn-icon--left {
  margin-left: 0;
  margin-right: 8px;
  transition: transform var(--transition-normal);
}

.hero__actions .btn:hover .btn-icon--left {
  transform: scale(1.1);
}

/* Hero Columns Grid Layout */
@media (min-width: 1024px) {
  .hero__grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--space-64);
    align-items: center;
  }
}

@media (max-width: 1023px) {
  .hero__grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-48);
  }
}

/* Bottom Features Row below actions */
.hero__features {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  margin-top: var(--space-48);
  border-top: 1px solid rgba(17, 17, 17, 0.08);
  padding-top: var(--space-32);
  gap: var(--space-16);
  flex-wrap: wrap;
}

.hero__feature-item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex: 1;
  min-width: 160px;
}

.hero__feature-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(245, 93, 45, 0.07);
  border: 1px solid rgba(245, 93, 45, 0.12);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition-normal);
}

.hero__feature-item:hover .hero__feature-icon-wrap {
  background-color: var(--color-primary);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(245, 93, 45, 0.2);
}

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

.hero__feature-title {
  font-family: var(--font-primary);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.2;
}

.hero__feature-desc {
  font-family: var(--font-secondary);
  font-size: 0.72rem;
  color: var(--color-text-muted);
  line-height: 1.35;
}

.hero__feature-divider {
  width: 1px;
  height: 36px;
  background-color: rgba(17, 17, 17, 0.08);
  align-self: center;
}

@media (max-width: 768px) {
  .hero__features {
    grid-template-columns: 1fr 1fr;
    display: grid;
    gap: var(--space-20);
  }

  .hero__feature-divider {
    display: none;
  }
}

/* Right Column Visual Mockup & Elements */
.hero__visual {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Orbits backgrounds */
.hero__orbits {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  pointer-events: none;
  z-index: 1;
}

.hero__orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px dashed rgba(245, 93, 45, 0.08);
  border-radius: 50%;
}

.hero__orbit--1 {
  width: 280px;
  height: 280px;
}

.hero__orbit--2 {
  width: 440px;
  height: 440px;
}

.hero__orbit--3 {
  width: 580px;
  height: 580px;
}

.hero__glow-sphere {
  position: absolute;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(245, 93, 45, 0.12) 0%, rgba(245, 93, 45, 0) 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: blur(25px);
  z-index: 1;
}

/* Phone Mockup */
.phone-mockup {
  position: relative;
  z-index: 2;
  width: 270px;
  height: 570px;
  border-radius: 40px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}



.phone-mockup__screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  border-radius: 32px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Instagram Header */
.ig-header {
  background: #FFFFFF;
  border-bottom: 1px solid rgba(17, 17, 17, 0.05);
  padding: 6px 14px 6px;
  flex-shrink: 0;
}

.ig-header__status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 16px;
  margin-bottom: 4px;
}

.ig-header__time {
  font-size: 0.72rem;
  font-weight: 700;
  color: #111;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.ig-header__status-icons {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #111;
  opacity: 0.85;
}

.ig-header__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ig-header__back,
.ig-header__dm {
  color: #111;
  cursor: pointer;
  transition: transform var(--transition-normal);
}

.ig-header__back:hover {
  transform: translateX(-2px);
}

.ig-header__dm:hover {
  transform: scale(1.1);
}

.ig-header__title {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 0.95rem;
  font-style: italic;
  color: #111;
  letter-spacing: -0.01em;
}

/* Post Scroll Area */
.ig-post {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: none;
}

.ig-post::-webkit-scrollbar {
  display: none;
}

.ig-post__user {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  gap: 8px;
}

.ig-post__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(17, 17, 17, 0.08);
  object-fit: cover;
}

.ig-post__user-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.ig-post__username {
  font-size: 0.7rem;
  font-weight: 700;
  color: #111;
}

.ig-post__location {
  font-size: 0.56rem;
  color: #888;
}

.ig-post__more {
  color: #333;
}

/* Inner post card */
.ig-post__image-container {
  width: 100%;
  padding: 0 10px;
}

.ig-post__card {
  background: linear-gradient(135deg, #F55D2D 0%, #e24e1d 100%);
  border-radius: var(--radius-lg);
  width: 100%;
  height: 220px;
  position: relative;
  overflow: hidden;
  display: flex;
  box-shadow: 0 8px 20px rgba(245, 93, 45, 0.15);
}

.ig-post__card-content {
  position: relative;
  z-index: 2;
  width: 58%;
  padding: var(--space-16) 0 var(--space-16) var(--space-16);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.ig-post__card-brand {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}

.ig-post__card-headline {
  color: white;
  font-family: var(--font-primary);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.15;
  margin: var(--space-8) 0;
  letter-spacing: -0.01em;
}

.ig-post__card-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.08);
  color: white;
  font-family: var(--font-secondary);
  font-size: 0.6rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: all var(--transition-normal);
}

.ig-post__card-btn:hover {
  background: #ffffff;
  color: var(--color-primary);
  border-color: #ffffff;
}

.ig-post__card-img {
  position: absolute;
  right: -5px;
  bottom: 0;
  width: 50%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
  pointer-events: none;
}

/* Post action bar */
.ig-post__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px 4px;
}

.ig-post__actions-left {
  display: flex;
  gap: 12px;
}

.ig-post-action-icon {
  color: #111;
  cursor: pointer;
  transition: transform var(--transition-normal);
}

.ig-post-action-icon:hover {
  transform: scale(1.15);
}

.ig-post-action-icon--heart:hover {
  color: #FF3B30;
  fill: #FF3B30;
}

/* Text details */
.ig-post__details {
  padding: 0 12px 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.ig-post__likes {
  font-size: 0.7rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 2px;
}

.ig-post__caption {
  font-size: 0.65rem;
  line-height: 1.35;
  color: #333;
  margin-bottom: 3px;
}

.ig-post__caption strong {
  color: #111;
  font-weight: 700;
  margin-right: 4px;
}

.ig-hashtag {
  color: #00376B;
  cursor: pointer;
  font-weight: 500;
}

.ig-post__comments-link {
  font-size: 0.62rem;
  color: #888;
  cursor: pointer;
}

/* Bottom Tab bar */
.ig-tabbar {
  background: #FFFFFF;
  border-top: 1px solid rgba(17, 17, 17, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px var(--space-12);
  flex-shrink: 0;
}

.ig-tabbar-icon {
  color: #111;
  opacity: 0.75;
  cursor: pointer;
}

.ig-tabbar__avatar-placeholder {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #f5f5f5;
  border: 1px solid rgba(17, 17, 17, 0.1);
}

/* Floating widgets */
.floating-card {
  position: absolute;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 10px var(--space-12);
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.06),
    0 2px 5px rgba(0, 0, 0, 0.03);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid rgba(245, 93, 45, 0.06);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.floating-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow:
    0 15px 30px rgba(245, 93, 45, 0.12),
    0 4px 10px rgba(0, 0, 0, 0.03);
}

.floating-card--audience {
  bottom: 50px;
  left: -40px;
  width: 100px;
  align-items: center;
}

.floating-card__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.2;
}

.floating-card__title {
  font-size: 0.56rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.floating-card__value {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--color-text-primary);
}

.floating-card__donut-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.donut-chart {
  transform: rotate(-90deg);
}

.donut-ring {
  stroke: #FFF1EC;
}

.donut-segment {
  stroke-dashoffset: 0;
  animation: donut-draw 1.5s var(--ease-premium) forwards;
}

.donut-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-primary);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.floating-card--engagement {
  top: 50px;
  right: -40px;
  width: 105px;
}

.floating-card--engagement .floating-card__header {
  align-items: flex-start;
  text-align: left;
}

.floating-card__graph-wrap {
  width: 100%;
  display: flex;
  align-items: flex-end;
}

/* Floating Tiny Bubbles */
.bubble {
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  z-index: 3;
  animation: bubble-float-anim 6s ease-in-out infinite;
}

@keyframes bubble-float-anim {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

.bubble--heart {
  background: #FF3B30;
  color: white;
  left: -48px;
  top: 36%;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  animation-delay: 0.5s;
}

.bubble--heart svg {
  width: 20px;
  height: 20px;
}

.bubble--like {
  background: #1877F2;
  color: white;
  right: -32px;
  top: 50%;
  width: 38px;
  height: 38px;
  animation-delay: 1.5s;
}

.bubble--like svg {
  width: 18px;
  height: 18px;
}

.bubble--user {
  background: #FFF1EC;
  color: var(--color-primary);
  right: -24px;
  bottom: 22%;
  width: 32px;
  height: 32px;
  animation-delay: 2.2s;
  border: 1px solid rgba(245, 93, 45, 0.1);
}

.bubble--user svg {
  width: 14px;
  height: 14px;
}

.bubble--plane {
  background: white;
  color: #888;
  left: -32px;
  top: 15%;
  width: 32px;
  height: 32px;
  animation-delay: 3s;
  border: 1px solid rgba(17, 17, 17, 0.04);
}

.bubble--plane svg {
  width: 14px;
  height: 14px;
  transform: rotate(-15deg) translate(1px, -1px);
}

/* Responsive adjustments */
@media (max-width: 1023px) {
  .hero__visual {
    margin: var(--space-32) auto 0;
    max-width: 400px;
  }

  .floating-card--audience {
    left: -15px;
  }

  .floating-card--engagement {
    right: -15px;
  }

  .bubble--heart {
    left: -20px;
  }

  .bubble--like {
    right: -10px;
  }
}

@media (max-width: 480px) {
  .floating-card--audience {
    left: -5px;
    transform: scale(0.9);
  }

  .floating-card--engagement {
    right: -5px;
    transform: scale(0.9);
  }

  .bubble--heart,
  .bubble--like,
  .bubble--user,
  .bubble--plane {
    display: none;
  }
}

/* --- End: pages/social-media.css --- */

/* --- Start: pages/personal-branding.css --- */
/* ==========================================================
   Personal Branding page styles
   ========================================================== */

/* ── Section Showcase Layout ── */
.pb-showcase {
  background-color: var(--color-bg-white);
  overflow: hidden;
}

.pb-authority-card {
  position: relative;
  background: radial-gradient(circle at 10% 20%, rgba(245, 93, 45, 0.03) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(245, 93, 45, 0.06) 0%, transparent 45%),
    linear-gradient(135deg, #FFF9F6 0%, #FFFFFF 100%);
  border: 1px solid rgba(245, 93, 45, 0.08);
  border-radius: var(--radius-xl);
  padding: 64px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(245, 93, 45, 0.03), 0 4px 20px rgba(0, 0, 0, 0.01);
}

/* Dotted background overlay in the middle/top */
.pb-authority-card::before {
  content: "";
  position: absolute;
  top: 10%;
  left: 45%;
  width: 140px;
  height: 140px;
  background-image: radial-gradient(rgba(245, 93, 45, 0.1) 1.5px, transparent 1.5px);
  background-size: 14px 14px;
  opacity: 0.8;
  pointer-events: none;
  z-index: 1;
}

/* Concentric circle lines wave pattern in the bottom-right corner */
.pb-authority-card::after {
  content: "";
  position: absolute;
  bottom: -60px;
  right: -60px;
  width: 320px;
  height: 320px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320' fill='none'%3E%3Ccircle cx='320' cy='320' r='80' stroke='rgba(245, 93, 45, 0.05)' stroke-width='1.5'/%3E%3Ccircle cx='320' cy='320' r='110' stroke='rgba(245, 93, 45, 0.05)' stroke-width='1.5'/%3E%3Ccircle cx='320' cy='320' r='140' stroke='rgba(245, 93, 45, 0.05)' stroke-width='1.5'/%3E%3Ccircle cx='320' cy='320' r='170' stroke='rgba(245, 93, 45, 0.05)' stroke-width='1.5'/%3E%3Ccircle cx='320' cy='320' r='200' stroke='rgba(245, 93, 45, 0.05)' stroke-width='1.5'/%3E%3Ccircle cx='320' cy='320' r='230' stroke='rgba(245, 93, 45, 0.05)' stroke-width='1.5'/%3E%3Ccircle cx='320' cy='320' r='260' stroke='rgba(245, 93, 45, 0.05)' stroke-width='1.5'/%3E%3Ccircle cx='320' cy='320' r='290' stroke='rgba(245, 93, 45, 0.05)' stroke-width='1.5'/%3E%3Ccircle cx='320' cy='320' r='320' stroke='rgba(245, 93, 45, 0.05)' stroke-width='1.5'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
}

.pb-showcase__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--space-48);
  position: relative;
  z-index: 2;
}

/* ── Left Column ── */
.pb-showcase__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.pb-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(245, 93, 45, 0.05);
  border: 1px solid rgba(245, 93, 45, 0.15);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  margin-bottom: 28px;
}

.pb-badge__dot {
  width: 6px;
  height: 6px;
  background-color: var(--color-primary);
  border-radius: 50%;
}

.pb-badge__text {
  color: var(--color-primary);
  font-family: var(--font-secondary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pb-showcase__title {
  font-family: var(--font-primary);
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 800;
  line-height: 1.05;
  color: var(--color-text-primary);
  margin-bottom: 28px;
  letter-spacing: -0.025em;
}

.pb-showcase__desc {
  font-family: var(--font-secondary);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-bottom: 18px;
  max-width: 520px;
}

.pb-showcase__desc:last-of-type {
  margin-bottom: 36px;
}

/* Stats Cards Grid */
.pb-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  width: 100%;
}

.pb-stat-card {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(245, 93, 45, 0.06);
  border-radius: var(--radius-md);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  transition: all var(--transition-normal);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.015);
}

.pb-stat-card:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(245, 93, 45, 0.2);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.pb-stat-card__icon-wrapper {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(245, 93, 45, 0.12) 0%, rgba(245, 93, 45, 0.03) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  margin-bottom: 14px;
  transition: all var(--transition-normal);
}

.pb-stat-card:hover .pb-stat-card__icon-wrapper {
  background: linear-gradient(135deg, rgba(245, 93, 45, 0.22) 0%, rgba(245, 93, 45, 0.08) 100%);
}

.pb-stat-card__value {
  font-family: var(--font-primary);
  font-size: 24px;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1.1;
  margin-bottom: 4px;
}

.pb-stat-card__label {
  font-family: var(--font-secondary);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.25;
  margin-bottom: 6px;
}

.pb-stat-card__desc {
  font-family: var(--font-secondary);
  font-size: 11px;
  font-weight: 400;
  color: var(--color-text-muted);
  line-height: 1.3;
}

/* ── Right Column (Deliverables Card) ── */
.pb-showcase__right {
  display: flex;
  align-items: center;
}

.pb-deliverables-card {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: 0 20px 50px rgba(245, 93, 45, 0.02), 0 4px 24px rgba(0, 0, 0, 0.01);
  width: 100%;
}

.pb-deliverables-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 32px;
  position: relative;
}

.pb-deliverables-header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -12px;
  width: 24px;
  height: 3px;
  background-color: var(--color-primary);
  border-radius: 2px;
}

.pb-deliverables-header__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(245, 93, 45, 0.12) 0%, rgba(245, 93, 45, 0.03) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

.pb-deliverables-header__title {
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
  letter-spacing: -0.01em;
}

.pb-deliverables-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pb-deliverable-item {
  background: var(--color-bg-white);
  border: 1px solid rgba(245, 93, 45, 0.04);
  border-radius: var(--radius-md);
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: all var(--transition-normal);
  box-shadow: 0 4px 12px rgba(245, 93, 45, 0.01);
}

.pb-deliverable-item:hover {
  transform: translateY(-2px);
  border-color: rgba(245, 93, 45, 0.15);
  box-shadow: 0 12px 30px rgba(245, 93, 45, 0.06), 0 4px 12px rgba(0, 0, 0, 0.02);
}

.pb-deliverable-item__icon-wrapper {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(245, 93, 45, 0.1) 0%, rgba(245, 93, 45, 0.02) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  flex-shrink: 0;
  transition: all var(--transition-normal);
}

.pb-deliverable-item:hover .pb-deliverable-item__icon-wrapper {
  background: linear-gradient(135deg, rgba(245, 93, 45, 0.2) 0%, rgba(245, 93, 45, 0.06) 100%);
}

.pb-deliverable-item__content {
  flex-grow: 1;
}

.pb-deliverable-item__title {
  font-family: var(--font-secondary);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 4px 0;
  letter-spacing: -0.01em;
}

.pb-deliverable-item__desc {
  font-family: var(--font-secondary);
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-muted);
  line-height: 1.4;
  margin: 0;
}

.pb-deliverable-item__number {
  font-family: var(--font-secondary);
  font-size: 24px;
  font-weight: 700;
  color: rgba(245, 93, 45, 0.15);
  transition: all var(--transition-normal);
  flex-shrink: 0;
}

.pb-deliverable-item:hover .pb-deliverable-item__number {
  color: var(--color-primary);
}


/* ── Responsive Styling ── */
@media (max-width: 1024px) {
  .pb-authority-card {
    padding: 48px;
  }

  .pb-showcase__grid {
    grid-template-columns: 1fr;
    gap: var(--space-48);
  }

  .pb-authority-card::before {
    left: 70%;
  }

  .pb-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .pb-authority-card {
    padding: 32px 20px;
    border-radius: var(--radius-lg);
  }

  .pb-badge {
    margin-bottom: 20px;
  }

  .pb-showcase__title {
    margin-bottom: 20px;
  }

  .pb-showcase__desc:last-of-type {
    margin-bottom: 28px;
  }

  .pb-deliverables-card {
    padding: 24px 16px;
  }

  .pb-deliverable-item {
    padding: 16px 14px;
    gap: 14px;
  }

  .pb-deliverable-item__icon-wrapper {
    width: 38px;
    height: 38px;
  }
}

@media (max-width: 480px) {
  .pb-stats-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ==========================================================
   Hero Section Custom Styles (Visual & Trusted Logos)
   ========================================================== */

/* ── Hero Split Layout ── */
.pb-hero {
  min-height: 90vh;
  display: flex;
  align-items: center;
  background: radial-gradient(circle at 80% 20%, rgba(245, 93, 45, 0.04) 0%, transparent 50%),
    linear-gradient(180deg, #FFFFFF 0%, #FFFDFD 50%, #FFFDFD 100%);
  border-bottom: 1px solid var(--color-border);
}

.pb-hero__container {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-48);
  align-items: center;
  width: 100%;
}

/* ── Left Column: Trusted Logos ── */
.pb-hero__trusted {
  margin-top: 56px;
  border-top: 1px solid rgba(245, 93, 45, 0.08);
  padding-top: 28px;
}

.pb-hero__trusted-title {
  font-family: var(--font-secondary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}

.pb-hero__trusted-logos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}

.pb-hero__logo-item {
  display: inline-flex;
  align-items: center;
  color: var(--color-text-muted);
  opacity: 0.85;
  transition: all var(--transition-normal);
}

.pb-hero__logo-item:hover {
  opacity: 1;
  transform: translateY(-1px);
}

/* Specific Brand Colors on Hover */
.pb-hero__logo-item:nth-child(1):hover {
  color: #4285F4;
}

/* Google Blue */
.pb-hero__logo-item:nth-child(2):hover {
  color: #F25022;
}

/* Microsoft Red */
.pb-hero__logo-item:nth-child(3):hover {
  color: #635BFF;
}

/* Stripe Purple */
.pb-hero__logo-item:nth-child(4):hover {
  color: #000000;
}

/* Notion Black */
.pb-hero__logo-item:nth-child(5):hover {
  color: #4353FF;
}

/* Webflow Blue */

.pb-hero__logo-text {
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.02em;
}

/* ── Right Column: Visual Composition ── */
.pb-hero__visual {
  position: relative;
  width: 100%;
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  perspective: 1200px;
}

/* Circle Backdrop Sphere */
.pb-hero__backdrop {
  position: absolute;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 93, 45, 0.08) 0%, rgba(245, 93, 45, 0.01) 70%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

/* Dashed Circular Arc Path */
.pb-hero__dashed-path {
  position: absolute;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  border: 1.5px dashed rgba(245, 93, 45, 0.15);
  z-index: 2;
  pointer-events: none;
}

/* Floating Badges styling */
.pb-hero__badge {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-bg-white);
  border: 1px solid rgba(245, 93, 45, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  box-shadow: 0 10px 25px rgba(245, 93, 45, 0.08);
  z-index: 15;
  transition: all var(--transition-normal);
}

.pb-hero__badge:hover {
  transform: scale(1.1) translateY(-2px);
  color: var(--color-primary);
  border-color: rgba(245, 93, 45, 0.3);
  box-shadow: 0 12px 30px rgba(245, 93, 45, 0.15);
}

/* Badges positions on the circular dashed path */
.pb-hero__badge--chart {
  bottom: 30%;
  left: 2%;
  animation: pbFloatBadge 6s ease-in-out infinite alternate;
}

.pb-hero__badge--pencil {
  top: 10%;
  left: 20%;
  animation: pbFloatBadge 6s ease-in-out infinite alternate 1.5s;
}

.pb-hero__badge--user {
  top: 10%;
  right: 18%;
  animation: pbFloatBadge 6s ease-in-out infinite alternate 3s;
}

/* ── standing 3D Book Mockup ── */
.pb-hero__book {
  position: relative;
  width: 250px;
  height: 360px;
  background: var(--color-bg-white);
  border-radius: 4px 16px 16px 4px;
  box-shadow: 20px 25px 50px rgba(30, 20, 10, 0.12),
    1px 5px 10px rgba(0, 0, 0, 0.02);
  transform: rotateY(-18deg) rotateX(4deg) rotateZ(-3deg);
  transform-style: preserve-3d;
  border-left: 6px solid #F3ECE8;
  padding: 40px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 10;
  border: 1px solid rgba(245, 93, 45, 0.04);
  animation: pbFloat 8s ease-in-out infinite;
}

@keyframes pbFloat {
  0% {
    transform: rotateY(-18deg) rotateX(4deg) rotateZ(-3deg) translateY(0px);
  }

  50% {
    transform: rotateY(-18deg) rotateX(4deg) rotateZ(-3deg) translateY(-8px);
  }

  100% {
    transform: rotateY(-18deg) rotateX(4deg) rotateZ(-3deg) translateY(0px);
  }
}

@keyframes pbFloatBadge {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-8px);
  }
}

/* Book Cover Typography & Layout */
.pb-hero__book-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.pb-hero__book-title {
  font-family: var(--font-primary);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--color-text-primary);
  margin: 0 0 10px 0;
  letter-spacing: -0.02em;
}

.pb-hero__book-subtitle {
  font-family: var(--font-secondary);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-muted);
  margin: 0 0 12px 0;
}

.pb-hero__book-line {
  width: 24px;
  height: 3px;
  background-color: var(--color-primary);
  border-radius: 2px;
}

.pb-hero__book-bullets {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pb-hero__book-bullet {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pb-hero__book-bullet svg {
  color: var(--color-primary);
  flex-shrink: 0;
}

.pb-hero__book-bullet span {
  font-family: var(--font-secondary);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
}

/* ── Coffee Mug ── */
.pb-hero__mug {
  position: absolute;
  bottom: 30px;
  left: 20px;
  width: 76px;
  height: 86px;
  background: linear-gradient(135deg, #FFFFFF 0%, #F6F6F6 40%, #E8E8EC 100%);
  border-radius: 4px 4px 28px 28px;
  box-shadow: -8px 12px 25px rgba(0, 0, 0, 0.08),
    inset 0 -4px 12px rgba(0, 0, 0, 0.04);
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.02);
  transition: all var(--transition-normal);
}

.pb-hero__mug:hover {
  transform: translateY(-2px) rotate(-3deg);
}

/* Mug Handle */
.pb-hero__mug::before {
  content: "";
  position: absolute;
  top: 15px;
  left: -16px;
  width: 24px;
  height: 48px;
  border: 7px solid #EAEAEF;
  border-right: none;
  border-radius: 18px 0 0 18px;
}

.pb-hero__mug-logo {
  width: 28px;
  height: auto;
  opacity: 0.85;
}

/* ── Desk Notebook & Pen ── */
.pb-hero__notebook {
  position: absolute;
  bottom: 0;
  left: 80px;
  width: 220px;
  height: 140px;
  background: #FFF1EA;
  border: 1px solid rgba(245, 93, 45, 0.08);
  border-radius: 8px 16px 16px 8px;
  box-shadow: 4px 12px 28px rgba(30, 20, 10, 0.06);
  transform: rotateX(55deg) rotateY(-4deg) rotateZ(-18deg);
  transform-style: preserve-3d;
  z-index: 11;
  transition: all var(--transition-normal);
}

.pb-hero__notebook:hover {
  transform: rotateX(55deg) rotateY(-4deg) rotateZ(-18deg) translateY(-3px);
  box-shadow: 6px 16px 36px rgba(30, 20, 10, 0.09);
}

/* Notebook White Pages highlight */
.pb-hero__notebook::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  bottom: 2px;
  width: 10px;
  background: #FFFFFF;
  border-radius: 0 14px 14px 0;
  border-left: 1px solid #EAEAEA;
}

/* Pen lying on notebook */
.pb-hero__pen {
  position: absolute;
  top: 45px;
  left: 50px;
  width: 100px;
  height: 7px;
  background: linear-gradient(to bottom, #FF784E, #F55D2D, #C43B10);
  border-radius: 4px;
  box-shadow: 1px 4px 8px rgba(0, 0, 0, 0.15);
  transform: rotateZ(-22deg) translateZ(8px);
  z-index: 15;
}

.pb-hero__pen::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 14px;
  height: 7px;
  background: #333333;
  border-radius: 4px 0 0 4px;
}

.pb-hero__pen::after {
  content: "";
  position: absolute;
  right: 0;
  top: 2px;
  width: 0;
  height: 0;
  border-top: 1.5px solid transparent;
  border-bottom: 1.5px solid transparent;
  border-left: 5px solid #FFD54F;
}

/* ── Green Potted Plant ── */
.pb-hero__plant {
  position: absolute;
  right: 10px;
  bottom: 40px;
  width: 90px;
  height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 13;
}

.pb-hero__pot {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #F3F3F5 0%, #E2E2E6 100%);
  border-radius: 6px 6px 26px 26px;
  box-shadow: 6px 10px 20px rgba(0, 0, 0, 0.08),
    inset 0 -4px 10px rgba(0, 0, 0, 0.04);
}

.pb-hero__leaves {
  width: 100px;
  height: 110px;
  margin-bottom: -12px;
}

.pb-hero__leaves-svg {
  width: 100%;
  height: 100%;
}


/* ── Responsive Hero Modifications ── */
@media (max-width: 1024px) {
  .pb-hero__container {
    grid-template-columns: 1fr;
    gap: var(--space-48);
    text-align: center;
  }

  .hero__content {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .pb-hero__trusted {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .pb-hero__trusted-logos {
    justify-content: center;
  }

  .pb-hero__visual {
    margin: 20px auto 0 auto;
    transform: scale(0.9);
    max-width: 500px;
  }
}

@media (max-width: 768px) {
  .pb-hero {
    padding-top: calc(var(--header-height) + var(--space-40));
    padding-bottom: var(--space-56);
  }

  .pb-hero__visual {
    transform: scale(0.8);
    height: 420px;
  }
}

@media (max-width: 520px) {
  .pb-hero__visual {
    transform: scale(0.68);
    height: 380px;
    margin-left: -20px;
  }

  .pb-hero__trusted-logos {
    gap: 16px;
  }
}


/* ==========================================================
   Our Work — Portfolio Section
   ========================================================== */

.pb-work {
  background-color: var(--color-bg-light);
}

/* ── Top Row: Intro + Stats ── */
.pb-work__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-48);
  align-items: flex-start;
  margin-bottom: var(--space-48);
}

.pb-work__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.pb-work__heading {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--color-text-primary);
  margin-bottom: 16px;
}

.pb-work__heading-line {
  width: 40px;
  height: 3px;
  background-color: var(--color-primary);
  border-radius: 2px;
  margin-bottom: 20px;
}

.pb-work__desc {
  font-family: var(--font-secondary);
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-text-muted);
  margin: 0;
}

/* Stats Row (right side of top row) */
.pb-work__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-self: center;
}

.pb-work__stat-card {
  background: var(--color-bg-white);
  border: 1px solid rgba(17, 17, 17, 0.05);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  box-shadow: var(--shadow-xs);
  transition: all var(--transition-normal);
}

.pb-work__stat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(245, 93, 45, 0.15);
  box-shadow: var(--shadow-md);
}

.pb-work__stat-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(245, 93, 45, 0.1) 0%, rgba(245, 93, 45, 0.03) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  margin-bottom: 10px;
  flex-shrink: 0;
  transition: background var(--transition-normal);
}

.pb-work__stat-card:hover .pb-work__stat-icon {
  background: linear-gradient(135deg, rgba(245, 93, 45, 0.18) 0%, rgba(245, 93, 45, 0.06) 100%);
}

.pb-work__stat-value {
  font-family: var(--font-primary);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
  letter-spacing: -0.03em;
}

.pb-work__stat-label {
  font-family: var(--font-secondary);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.3;
  margin-top: 2px;
}

.pb-work__stat-sub {
  font-family: var(--font-secondary);
  font-size: 11px;
  font-weight: 400;
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* ── Filter Tabs Row ── */
.pb-work__filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  margin-bottom: var(--space-32);
  flex-wrap: wrap;
}

.pb-work__filter-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.pb-work__filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-bg-white);
  font-family: var(--font-secondary);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-normal);
  white-space: nowrap;
}

.pb-work__filter-btn:hover {
  border-color: rgba(245, 93, 45, 0.25);
  color: var(--color-primary);
  background: rgba(245, 93, 45, 0.04);
}

.pb-work__filter-btn--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(245, 93, 45, 0.28);
}

.pb-work__filter-btn--active:hover {
  background: var(--color-primary);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(245, 93, 45, 0.35);
}

.pb-work__view-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-secondary);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.pb-work__view-all:hover {
  gap: 10px;
}

/* ── Portfolio Grid (3 columns, 2 rows) ── */
.pb-work__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: var(--space-40);
}

/* ── Project Cards ── */
.pb-work__card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
  transition: all var(--transition-normal);
  display: flex;
  flex-direction: column;
}

.pb-work__card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(245, 93, 45, 0.12);
}

.pb-work__card--dark {
  background: #1A1A1F;
  border-color: rgba(255, 255, 255, 0.05);
}

.pb-work__card--dark:hover {
  border-color: rgba(245, 93, 45, 0.2);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

/* Card Image Area */
.pb-work__card-image {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pb-work__card-image--light {
  background: linear-gradient(135deg, #F8F8FA 0%, #F0EFF5 100%);
}

.pb-work__card-image--dark {
  background: linear-gradient(135deg, #22222A 0%, #1A1820 100%);
}

/* Card Body */
.pb-work__card-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-grow: 1;
}

.pb-work__card-category {
  font-family: var(--font-secondary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pb-work__card-category--tl {
  color: var(--color-primary);
}

.pb-work__card-category--cs {
  color: var(--color-primary);
}

.pb-work__card-category--ep {
  color: var(--color-primary);
}

.pb-work__card-category--pm {
  color: var(--color-primary);
}

.pb-work__card-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.pb-work__card-title {
  font-family: var(--font-secondary);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.3;
  margin: 0 0 4px 0;
  letter-spacing: -0.01em;
}

.pb-work__card--dark .pb-work__card-title {
  color: #F0EFF5;
}

.pb-work__card-desc {
  font-family: var(--font-secondary);
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.4;
}

.pb-work__card--dark .pb-work__card-desc {
  color: rgba(255, 255, 255, 0.45);
}

/* Arrow CTA Button */
.pb-work__card-arrow {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(245, 93, 45, 0.2);
  background: rgba(245, 93, 45, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  text-decoration: none;
  transition: all var(--transition-normal);
}

.pb-work__card-arrow:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  transform: scale(1.1);
}


/* ─────────────────────────────────────
   CARD MOCKUP ILLUSTRATIONS
   ───────────────────────────────────── */

.pb-work__card-mockup {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;
}

/* ── Book Mockup (Card 1) ── */
.pb-work__card-mockup--book {
  gap: 16px;
  justify-content: center;
}

.pb-work__mock-book {
  background: #ffffff;
  border-radius: 4px 10px 10px 4px;
  border-left: 5px solid #EEE4DF;
  padding: 18px 14px;
  width: 130px;
  height: 155px;
  box-shadow: 8px 10px 24px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: rotateY(-12deg) rotateZ(-3deg);
  flex-shrink: 0;
}

.pb-work__mock-title {
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-text-primary);
  margin: 0;
}

.pb-work__mock-line {
  width: 20px;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
}

.pb-work__mock-sig {
  width: 60%;
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 1px;
}

.pb-work__mock-figure {
  width: 55px;
  height: 120px;
  border-radius: 6px;
  background: linear-gradient(180deg, #E8E2DE 0%, #C8BEB8 100%);
  flex-shrink: 0;
  align-self: flex-end;
}

/* ── Pitch Deck Mockup (Card 2) ── */
.pb-work__card-mockup--deck {
  position: relative;
  overflow: hidden;
}

.pb-work__mock-deck {
  background: #ffffff;
  border-radius: var(--radius-md);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  padding: 14px 16px;
  width: 155px;
  z-index: 2;
  position: relative;
}

.pb-work__mock-deck-header {
  margin-bottom: 10px;
}

.pb-work__mock-deck-dots {
  display: flex;
  gap: 4px;
}

.pb-work__mock-deck-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #E5E5E5;
}

.pb-work__mock-deck-dots span:first-child {
  background: #FF5F57;
}

.pb-work__mock-deck-dots span:nth-child(2) {
  background: #FEBC2E;
}

.pb-work__mock-deck-dots span:last-child {
  background: #28C840;
}

.pb-work__mock-deck-title {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 800;
  color: var(--color-text-primary);
  line-height: 1.2;
  margin: 0 0 6px 0;
}

.pb-work__mock-deck-sub {
  font-family: var(--font-secondary);
  font-size: 10px;
  color: var(--color-text-muted);
  margin: 0;
}

/* Building silhouette behind the card */
.pb-work__mock-building {
  position: absolute;
  right: 12px;
  bottom: 0;
  width: 75px;
  height: 130px;
  background: linear-gradient(180deg, #D8D6E0 0%, #BFBDCA 100%);
  clip-path: polygon(10% 100%, 10% 30%, 20% 30%, 20% 10%, 30% 10%, 30% 30%, 40% 30%, 40% 0%, 50% 0%, 50% 30%, 60% 30%, 60% 20%, 70% 20%, 70% 30%, 80% 30%, 80% 50%, 90% 50%, 90% 100%);
  opacity: 0.5;
}

/* ── Spread Book Mockup (Card 3 – dark) ── */
.pb-work__card-mockup--bio {
  padding: 16px;
}

.pb-work__mock-spread {
  display: flex;
  gap: 4px;
  width: 100%;
  height: 100%;
  max-width: 240px;
}

.pb-work__mock-page {
  flex: 1;
  border-radius: 4px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.pb-work__mock-page--left {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.pb-work__mock-page--left h4 {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.25;
  margin: 0;
}

.pb-work__mock-page--left p {
  font-family: var(--font-secondary);
  font-size: 9px;
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
}

.pb-work__mock-page--right {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  align-items: flex-start;
}

.pb-work__mock-page-label {
  font-family: var(--font-secondary);
  font-size: 9px;
  color: rgba(255, 255, 255, 0.35);
  line-height: 1.4;
  margin: 0 0 8px 0;
}

.pb-work__mock-figure--small {
  width: 35px;
  height: 65px;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(245, 93, 45, 0.3) 0%, rgba(245, 93, 45, 0.15) 100%);
  align-self: flex-end;
}

/* ── Analytics Mockup (Card 4 – dark) ── */
.pb-work__card-mockup--analytics {
  justify-content: flex-start;
  align-items: flex-start;
  padding: 16px 14px;
}

.pb-work__mock-analytics {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.pb-work__mock-analytics-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pb-work__mock-analytics-label {
  font-family: var(--font-secondary);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
}

.pb-work__mock-analytics-badge {
  font-family: var(--font-secondary);
  font-size: 9px;
  font-weight: 700;
  color: #10B981;
  background: rgba(16, 185, 129, 0.12);
  border-radius: var(--radius-full);
  padding: 2px 7px;
}

.pb-work__mock-analytics-num {
  font-family: var(--font-primary);
  font-size: 22px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1;
}

.pb-work__mock-analytics-sub {
  font-family: var(--font-secondary);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
}

.pb-work__mock-bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 60px;
  margin-top: 6px;
}

.pb-work__mock-bar {
  flex: 1;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px 3px 0 0;
  min-height: 8px;
}

.pb-work__mock-bar--accent {
  background: var(--color-primary);
}

.pb-work__mock-donut {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* ── Press Mockup (Card 5 – light) ── */
.pb-work__card-mockup--press {
  align-items: center;
  justify-content: center;
  position: relative;
}

.pb-work__mock-press {
  background: #ffffff;
  border-radius: var(--radius-md);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  padding: 20px 22px;
  width: 185px;
  position: relative;
  z-index: 2;
}

.pb-work__mock-press-label {
  font-family: var(--font-secondary);
  font-size: 10px;
  color: var(--color-text-muted);
  margin: 0 0 10px 0;
}

.pb-work__mock-press-logos {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pb-work__mock-press-logo {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
}

/* Little potted plant decorating the press card */
.pb-work__mock-plant {
  position: absolute;
  right: -28px;
  bottom: -8px;
  width: 50px;
  height: 60px;
  background: linear-gradient(180deg, #4CAF50 0%, #388E3C 50%, #D5D1CE 50%, #C8C4C1 100%);
  clip-path: polygon(20% 100%, 20% 55%, 0% 20%, 50% 40%, 50% 0%, 100% 30%, 55% 50%, 80% 55%, 80% 100%);
  opacity: 0.7;
  z-index: 1;
}

/* ── Keynote Mockup (Card 6 – dark) ── */
.pb-work__card-mockup--keynote {
  flex-direction: column;
  padding: 14px;
  gap: 0;
}

.pb-work__mock-keynote {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.pb-work__mock-keynote-screen {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  width: 100%;
}

.pb-work__mock-keynote-screen p {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.25;
  margin: 0 0 4px 0;
}

.pb-work__mock-keynote-screen small {
  font-family: var(--font-secondary);
  font-size: 9px;
  color: rgba(255, 255, 255, 0.35);
}

/* Silhouette audience */
.pb-work__mock-audience {
  width: 100%;
  height: 44px;
  margin-top: 8px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.pb-work__mock-audience::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30px;
  background:
    radial-gradient(ellipse 14px 20px at 12% 100%, rgba(255, 255, 255, 0.12) 100%, transparent 100%),
    radial-gradient(ellipse 14px 20px at 28% 100%, rgba(255, 255, 255, 0.1) 100%, transparent 100%),
    radial-gradient(ellipse 14px 20px at 45% 100%, rgba(255, 255, 255, 0.12) 100%, transparent 100%),
    radial-gradient(ellipse 14px 20px at 62% 100%, rgba(255, 255, 255, 0.1) 100%, transparent 100%),
    radial-gradient(ellipse 14px 20px at 78% 100%, rgba(255, 255, 255, 0.12) 100%, transparent 100%),
    radial-gradient(ellipse 14px 20px at 92% 100%, rgba(255, 255, 255, 0.08) 100%, transparent 100%);
}

/* Speaker silhouette */
.pb-work__mock-speaker {
  position: absolute;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 28px;
  background: rgba(245, 93, 45, 0.7);
  border-radius: 6px 6px 2px 2px;
}

.pb-work__mock-speaker::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(245, 93, 45, 0.7);
}


/* ── Mini CTA Banner (bottom of section) ── */
.pb-work__mini-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  background: var(--color-bg-white);
  border: 1px solid rgba(17, 17, 17, 0.06);
  border-radius: var(--radius-lg);
  padding: 24px 32px;
  box-shadow: var(--shadow-sm);
}

.pb-work__mini-cta-left {
  display: flex;
  align-items: center;
  gap: 18px;
}

.pb-work__mini-cta-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(245, 93, 45, 0.1) 0%, rgba(245, 93, 45, 0.03) 100%);
  border: 1px solid rgba(245, 93, 45, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  flex-shrink: 0;
}

.pb-work__mini-cta-title {
  font-family: var(--font-secondary);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 2px 0;
  line-height: 1.3;
}

.pb-work__mini-cta-desc {
  font-family: var(--font-secondary);
  color: var(--color-text-muted);
  margin: 0;
}


/* ── Responsive: Our Work ── */
@media (max-width: 1024px) {
  .pb-work__top {
    grid-template-columns: 1fr;
    gap: var(--space-32);
  }

  .pb-work__stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .pb-work__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .pb-work__stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .pb-work__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .pb-work__filter-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }

  .pb-work__filters {
    flex-direction: column;
    align-items: flex-start;
  }

  .pb-work__mini-cta {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 20px;
  }

  .pb-work__card-image {
    height: 180px;
  }
}

@media (max-width: 480px) {
  .pb-work__stats {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .pb-work__mini-cta-left {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --- End: pages/personal-branding.css --- */

/* --- Start: pages/seo.css --- */
/* ==========================================================
   SEO (Google Ranking) — Hero Section Styles
   ========================================================== */

/* ── Hero Override: vertical flex layout and custom bg ── */
.seo-hero {
  padding-bottom: 0;
  overflow: hidden;
  min-height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: radial-gradient(circle at 75% 50%, rgba(245, 93, 45, 0.04) 0%, rgba(245, 93, 45, 0.01) 45%, #FFFFFF 100%);
}

/* Hero title underline & marketing label styling */
.seo-hero .hero__title {
  position: relative;
  margin-bottom: var(--space-28);
}

.seo-hero .hero__title::after {
  content: '';
  display: block;
  width: 50px;
  height: 3px;
  background-color: var(--color-primary);
  margin-top: 16px;
  border-radius: var(--radius-full);
}

.seo-hero .hero__label--marketing {
  background-color: rgba(245, 93, 45, 0.08) !important;
  border-color: rgba(245, 93, 45, 0.12) !important;
  color: var(--color-primary) !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 6px 14px;
}

.seo-hero .hero__label--marketing::before {
  content: '•';
  color: var(--color-primary);
  font-size: 14px;
  margin-right: 4px;
  line-height: 1;
}

/* ── Two-column grid container ── */
.seo-hero__container {
  display: grid;
  grid-template-columns: 48% 52%;
  gap: var(--space-48);
  align-items: center;
  padding-bottom: var(--space-64);
  position: relative;
  z-index: 2;
  /* prevent columns from overflowing */
  min-width: 0;
}

/* ── Left Column ── */
.seo-hero__left {
  /* fill the column, don't over-constrain */
  min-width: 0;
  width: 100%;
}

/* override the base hero__content max-width only for SEO page */
.seo-hero .hero__content {
  max-width: 100%;
}

/* ── 4 Feature Pills (horizontal columns below buttons) ── */
.seo-hero__features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-24);
  margin-top: var(--space-48);

  width: 100%;
}

.seo-hero__feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-right: var(--space-24);
}

.seo-hero__feature-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: rgba(245, 93, 45, 0.06);
  border: 1px solid rgba(245, 93, 45, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  flex-shrink: 0;
  transition: all var(--transition-normal);
  box-shadow: 0 4px 10px rgba(245, 93, 45, 0.04);
}

.seo-hero__feature:hover .seo-hero__feature-icon {
  background: rgba(245, 93, 45, 0.1);
  transform: translateY(-2px);
}

.seo-hero__feature-title {
  font-family: var(--font-secondary);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.3;
}

.seo-hero__feature-desc {
  font-family: var(--font-secondary);
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
}

/* ── Right Column ── */
.seo-hero__right {
  position: relative;
  min-width: 0;
  width: 100%;
  /* add top padding so the floating card doesn't clip the header */
  padding-top: 36px;
}

/* Orbits dotted concentric circles backdrop */
.seo-hero__orbits {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 800px;
  pointer-events: none;
  z-index: 0;
}

.seo-hero__orbits svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Floating "Top Rankings" vertical card ── */
.seo-hero__rankings-card {
  position: absolute;
  top: 22%;
  right: -56px;
  background: var(--color-bg-white);
  border: 1px solid rgba(245, 93, 45, 0.1);
  border-radius: var(--radius-lg);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  box-shadow: 0 15px 35px rgba(245, 93, 45, 0.08), 0 5px 15px rgba(0, 0, 0, 0.04);
  z-index: 20;
  width: 130px;
  animation: seoFloatCard 5s ease-in-out infinite;
}

@keyframes seoFloatCard {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

.seo-hero__rankings-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(245, 93, 45, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  flex-shrink: 0;
}

.seo-hero__rankings-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
}

.seo-hero__rankings-title {
  font-family: var(--font-secondary);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
}

.seo-hero__rankings-sub {
  font-family: var(--font-secondary);
  font-size: 10.5px;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.3;
}

.seo-hero__rankings-trend {
  width: 100%;
  margin-top: 4px;
}

.seo-hero__rankings-trend svg {
  width: 100%;
  display: block;
}

/* ── Main Dashboard Card ── */
.seo-hero__dashboard {
  background: var(--color-bg-white);
  border: 1px solid rgba(17, 17, 17, 0.07);
  border-radius: var(--radius-xl);
  padding: 22px;
  box-shadow:
    0 32px 80px rgba(245, 93, 45, 0.04),
    0 8px 32px rgba(0, 0, 0, 0.06);
  width: 100%;
  position: relative;
  z-index: 10;
  /* CRITICAL: prevent dashboard from growing wider than its column */
  box-sizing: border-box;
  overflow: hidden;
}

/* ── Search Bar Row ── */
.seo-hero__searchbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.seo-hero__google-logo {
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
  flex-shrink: 0;
}

.seo-hero__searchfield {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #F8F8FA;
  border: 1px solid rgba(17, 17, 17, 0.07);
  border-radius: var(--radius-full);
  padding: 7px 14px;
  gap: 8px;
  overflow: hidden;
}

.seo-hero__searchfield-text {
  font-family: var(--font-secondary);
  font-size: 13px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Stats Grid 2×2 ── */
.seo-hero__stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.seo-hero__stat-panel {
  background: #FAFAFA;
  border: 1px solid rgba(17, 17, 17, 0.05);
  border-radius: var(--radius-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;
  min-width: 0;
}

.seo-hero__stat-panel-label {
  font-family: var(--font-secondary);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin: 0;
}

.seo-hero__stat-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.seo-hero__stat-value {
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: -0.03em;
  line-height: 1;
}

.seo-hero__stat-badge {
  font-family: var(--font-secondary);
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--radius-full);
  padding: 2px 6px;
  white-space: nowrap;
}

.seo-hero__stat-badge--up {
  color: #16A34A;
  background: rgba(22, 163, 74, 0.1);
}

/* Sparkline charts */
.seo-hero__sparkline {
  width: 100%;
  height: 32px;
  display: block;
  margin-top: 2px;
}

/* Keyword Rankings donut + legend layout */
.seo-hero__kw-layout {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.seo-hero__donut-wrap {
  flex-shrink: 0;
}

.seo-hero__kw-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.seo-hero__kw-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

.seo-hero__kw-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.seo-hero__kw-lbl {
  font-family: var(--font-secondary);
  font-size: 10px;
  color: var(--color-text-muted);
  flex: 1;
}

.seo-hero__kw-num {
  font-family: var(--font-secondary);
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text-primary);
}

/* Bar chart (Clicks panel) */
.seo-hero__bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 46px;
  flex: 1;
}

.seo-hero__bar {
  flex: 1;
  background: rgba(245, 93, 45, 0.18);
  border-radius: 3px 3px 0 0;
  min-height: 5px;
}

.seo-hero__bar--accent {
  background: var(--color-primary);
}

/* ── Vitals Strip ── */
.seo-hero__vitals {
  display: flex;
  align-items: center;
  background: #FAFAFA;
  border: 1px solid rgba(17, 17, 17, 0.05);
  border-radius: var(--radius-md);
  padding: 14px 20px;
  justify-content: space-between;
  gap: var(--space-8);
}

.seo-hero__vital {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  justify-content: center;
}

.seo-hero__vital:first-child {
  justify-content: flex-start;
}

.seo-hero__vital:last-child {
  justify-content: flex-end;
}

.seo-hero__vital-divider {
  width: 1px;
  height: 24px;
  background: rgba(17, 17, 17, 0.07);
  flex-shrink: 0;
  margin: 0 var(--space-8);
}

.seo-hero__vital-label {
  font-family: var(--font-secondary);
  font-size: 11px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.seo-hero__vital-score {
  font-family: var(--font-secondary);
  font-size: 13px;
  font-weight: 800;
  color: #16A34A;
  background: rgba(22, 163, 74, 0.1);
  border-radius: var(--radius-full);
  padding: 2px 8px;
  white-space: nowrap;
}

.seo-hero__vital-tag {
  font-family: var(--font-secondary);
  font-size: 11px;
  font-weight: 600;
  color: #16A34A;
  white-space: nowrap;
}

.seo-hero__vital-passed {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #16A34A;
}

.seo-hero__vital-passed span {
  font-family: var(--font-secondary);
  font-size: 12px;
  font-weight: 700;
  color: #16A34A;
  white-space: nowrap;
}

/* ──────────────────────────────────────────────────
   Trusted-by Logo Strip
   Full-width, sits flush below the hero two-column area
   ────────────────────────────────────────────────── */
.seo-hero__trusted-wrap {
  width: 100%;
  padding: var(--space-48) 0;
  position: relative;
  z-index: 3;
  background: transparent;
  border-top: none;
}

.seo-hero__trusted {
  background: var(--color-bg-white);
  border: 1px solid rgba(17, 17, 17, 0.05);
  border-radius: var(--radius-xl);
  padding: var(--space-28) var(--space-32);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-20);
  width: 100%;
  text-align: center;
}

.seo-hero__trusted-label {
  font-family: var(--font-secondary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin: 0;
}

.seo-hero__logo-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-40);
  flex-wrap: wrap;
  width: 100%;
}

.seo-hero__logo-item {
  display: flex;
  align-items: center;
  color: var(--color-text-muted);
  opacity: 0.60;
  transition: all var(--transition-normal);
}

.seo-hero__logo-item:hover {
  opacity: 1;
  transform: translateY(-1px);
  color: var(--color-text-primary);
}

.seo-hero__logo-item--text {
  display: inline-flex;
  align-items: center;
}

.seo-hero__logo-item--text span {
  font-family: var(--font-secondary);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .seo-hero__container {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-40);
  }

  .seo-hero__features {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-24);
  }
}

@media (max-width: 900px) {
  .seo-hero__container {
    grid-template-columns: 1fr;
    gap: var(--space-40);
    padding-bottom: var(--space-48);
  }

  .seo-hero__right {
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
  }

  .seo-hero__rankings-card {
    right: 0px;
  }
}

@media (max-width: 640px) {
  .seo-hero__features {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-20);
  }

  .seo-hero__trusted {
    padding: var(--space-20) var(--space-16);
  }

  .seo-hero__logo-strip {
    gap: var(--space-24);
  }

  .seo-hero__vital-divider {
    margin: 0 6px;
  }

  .seo-hero__vitals {
    padding: 10px 12px;
    gap: 4px;
  }
}

@media (max-width: 480px) {
  .seo-hero__features {
    grid-template-columns: 1fr;
    gap: var(--space-16);
  }

  .seo-hero__stats-grid {
    grid-template-columns: 1fr;
  }

  .seo-hero__dashboard {
    padding: 16px;
  }

  .seo-hero__vitals {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px;
  }

  .seo-hero__vital-divider {
    display: none;
  }

  .seo-hero__rankings-card {
    position: static;
    margin: 0 auto var(--space-24) auto;
    width: 100%;
    max-width: 200px;
  }
}

/* ==========================================================
   SEO SERVICES SECTION
   ========================================================== */

/* ── Section wrapper ── */
.seo-services {
  padding: var(--space-64) 0 var(--space-80);
  background: var(--color-bg-white);
}

/* ══════════════════════════════════════════════
   DARK BANNER
   ══════════════════════════════════════════════ */
.seo-banner {
  display: grid;
  grid-template-columns: 42% 58%;
  align-items: center;
  background: #0b0b0d;
  border-radius: 24px;
  overflow: hidden;
  min-height: 380px;
  position: relative;
  margin-bottom: var(--space-32);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

/* Subtle dot grid on banner */
.seo-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 0);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

.seo-banner__left {
  padding: var(--space-48) var(--space-48) var(--space-48) var(--space-48);
  position: relative;
  z-index: 2;
}

.seo-banner__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-secondary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  margin-bottom: var(--space-16);
}

.seo-banner__label::before {
  content: '•';
  color: var(--color-primary);
  font-size: 14px;
}

.seo-banner__title {
  font-family: var(--font-primary);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 900;
  line-height: 1.1;
  color: #FFFFFF;
  margin-bottom: var(--space-16);
}

.seo-banner__desc {
  font-family: var(--font-secondary);
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.6);
  max-width: 380px;
  margin-bottom: var(--space-28);
}

.seo-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}

/* Ghost button for dark banner */
.btn--ghost {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 22px;
  border-radius: var(--radius-full);
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: all var(--transition-normal);
  text-decoration: none;
}

.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
  color: #FFFFFF;
}

/* Right side of banner (Orbit Container) */
.seo-banner__right {
  position: relative;
  height: 100%;
  min-height: 380px;
  z-index: 2;
  overflow: hidden;
  background: radial-gradient(circle at 90% 85%, rgba(245, 93, 45, 0.22) 0%, rgba(245, 93, 45, 0.04) 45%, transparent 70%);
}

/* Ambient glow bottom right */
.seo-banner__ambient-glow {
  position: absolute;
  bottom: -40px;
  right: -40px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(245, 93, 45, 0.38) 0%, rgba(245, 93, 45, 0.1) 50%, transparent 75%);
  filter: blur(35px);
  pointer-events: none;
  z-index: 1;
}

/* Dot Matrix top right */
.seo-banner__dot-matrix {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 90px;
  height: 90px;
  background-image: radial-gradient(rgba(245, 93, 45, 0.35) 1.5px, transparent 1.5px);
  background-size: 14px 14px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.75;
}

.seo-banner__orbit-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.seo-banner__orbit-bg svg {
  width: 100%;
  height: 100%;
}

/* Floating pills container */
.seo-banner__pills {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 30px 24px 30px 10px;
  z-index: 5;
}

.seo-banner__pill-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Offset rows for staggered orbit positioning */
.seo-banner__pill-row--1 {
  padding-left: 90px;
}

.seo-banner__pill-row--2 {
  padding-left: 10px;
}

.seo-banner__pill-row--3 {
  padding-left: 50px;
}

.seo-banner__pill-row--4 {
  padding-left: 70px;
}

/* Individual Pill Styling */
.seo-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(22, 22, 26, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-full);
  padding: 8px 18px 8px 10px;
  font-family: var(--font-secondary);
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
  white-space: nowrap;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  user-select: none;
}

/* Icon Box inside Dark Pill */
.seo-pill__icon-box {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(245, 93, 45, 0.14);
  border: 1px solid rgba(245, 93, 45, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.seo-pill:hover:not(.seo-pill--active) {
  background: rgba(30, 30, 36, 0.95);
  border-color: rgba(245, 93, 45, 0.4);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(245, 93, 45, 0.2);
}

.seo-pill:hover:not(.seo-pill--active) .seo-pill__icon-box {
  background: rgba(245, 93, 45, 0.25);
  transform: scale(1.05);
}

/* Active Glowing Pill (Link Building Center Highlight) */
.seo-pill--active {
  background: linear-gradient(135deg, #FF6B35 0%, #F55D2D 100%);
  border-color: #FF8C5E;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 24px 10px 14px;
  box-shadow:
    0 0 30px rgba(245, 93, 45, 0.6),
    0 0 60px rgba(245, 93, 45, 0.3),
    0 10px 20px rgba(0, 0, 0, 0.4);
  z-index: 10;
  animation: seoActivePulse 3s ease-in-out infinite alternate;
}

@keyframes seoActivePulse {
  0% {
    box-shadow:
      0 0 25px rgba(245, 93, 45, 0.5),
      0 0 50px rgba(245, 93, 45, 0.25),
      0 10px 20px rgba(0, 0, 0, 0.4);
  }

  100% {
    box-shadow:
      0 0 35px rgba(245, 93, 45, 0.8),
      0 0 70px rgba(245, 93, 45, 0.4),
      0 12px 25px rgba(0, 0, 0, 0.5);
  }
}

.seo-pill__icon-box--white {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
}

/* Spark lines top left of active pill */
.seo-pill__spark {
  position: absolute;
  top: -12px;
  left: -10px;
  pointer-events: none;
  animation: sparkPulse 2s ease-in-out infinite;
}

@keyframes sparkPulse {

  0%,
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.15) rotate(5deg);
    opacity: 1;
  }
}

/* Mouse cursor pointer overlapping active pill */
.seo-pill__cursor {
  position: absolute;
  bottom: -16px;
  right: 18px;
  pointer-events: none;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
  z-index: 12;
  animation: cursorFloat 2.5s ease-in-out infinite;
}

@keyframes cursorFloat {

  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(-3px, -3px);
  }
}

/* ══════════════════════════════════════════════
   THREE SERVICE CARDS
   ══════════════════════════════════════════════ */
.seo-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-24);
  margin-bottom: var(--space-24);
}

.seo-card {
  background: var(--color-bg-white);
  border: 1px solid rgba(17, 17, 17, 0.07);
  border-radius: 16px;
  padding: var(--space-24) var(--space-24) var(--space-24);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

.seo-card:hover {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.07);
  transform: translateY(-3px);
}

/* Subtle light-orange tint bg */
.seo-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(245, 93, 45, 0.05) 0%, transparent 70%);
  pointer-events: none;
}

.seo-card__tag {
  display: inline-block;
  font-family: var(--font-secondary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  margin-bottom: var(--space-12);
}

.seo-card__title {
  font-family: var(--font-primary);
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-text-primary);
  margin-bottom: var(--space-12);
}

.seo-card__desc {
  font-family: var(--font-secondary);
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-bottom: var(--space-20);
  flex: 1;
}

/* Arrow link at bottom */
.seo-card__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(245, 93, 45, 0.08);
  color: var(--color-primary);
  border: 1px solid rgba(245, 93, 45, 0.15);
  transition: all var(--transition-normal);
  text-decoration: none;
  margin-top: auto;
}

.seo-card__link:hover {
  background: var(--color-primary);
  color: #FFFFFF;
  transform: translateX(3px);
}

/* ── Visual areas ── */
.seo-card__visual {
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: var(--space-16);
  background: rgba(245, 93, 45, 0.03);
  border: 1px solid rgba(245, 93, 45, 0.07);
  position: relative;
}

/* ECOMMERCE card visual */
.seo-card__visual--ecom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 16px;
  min-height: 130px;
}

.seo-card__stat-chip {
  background: #FFFFFF;
  border: 1px solid rgba(17, 17, 17, 0.06);
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  min-width: 130px;
}

.seo-card__stat-chip-label {
  font-family: var(--font-secondary);
  font-size: 10px;
  color: var(--color-text-muted);
  margin: 0 0 4px 0;
}

.seo-card__stat-chip-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.seo-card__stat-chip-value {
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 800;
  color: var(--color-text-primary);
}

.seo-card__stat-chip-badge {
  font-family: var(--font-secondary);
  font-size: 10px;
  font-weight: 700;
  color: #16A34A;
  background: rgba(22, 163, 74, 0.1);
  border-radius: var(--radius-full);
  padding: 2px 6px;
}

.seo-card__mini-spark {
  width: 100%;
  height: 28px;
  display: block;
}

.seo-card__cart-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-shrink: 0;
}

.seo-card__cart {
  filter: drop-shadow(0 8px 20px rgba(245, 93, 45, 0.25));
}

/* TECHNICAL SEO card visual */
.seo-card__visual--tech {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 16px;
  min-height: 130px;
  gap: 12px;
}

.seo-card__gauge-wrap {
  flex-shrink: 0;
}

.seo-card__checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.seo-card__check-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  background: #FFFFFF;
  border-radius: 8px;
  border: 1px solid rgba(17, 17, 17, 0.05);
}

.seo-card__check-label {
  font-family: var(--font-secondary);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--color-text-primary);
}

.seo-card__check-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* CONTENT card visual */
.seo-card__visual--content {
  min-height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.seo-card__doc-wrap {
  position: relative;
  width: 100%;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.seo-card__doc {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: absolute;
  left: 16px;
  top: 10px;
  width: 100px;
}

.seo-card__doc-line {
  height: 6px;
  border-radius: 3px;
  background: rgba(17, 17, 17, 0.1);
  width: 100%;
}

.seo-card__doc-line--title {
  height: 8px;
  background: rgba(17, 17, 17, 0.18);
  width: 70%;
}

.seo-card__doc-line--short {
  width: 55%;
}

.seo-card__doc-line--med {
  width: 80%;
}

.seo-card__big-letter {
  font-family: var(--font-primary);
  font-size: 42px;
  font-weight: 900;
  color: rgba(17, 17, 17, 0.08);
  position: absolute;
  right: 30px;
  top: -2px;
  line-height: 1;
  user-select: none;
}

.seo-card__pencil {
  position: absolute;
  right: 16px;
  top: 8px;
  filter: drop-shadow(0 6px 14px rgba(245, 93, 45, 0.3));
  transform: rotate(-15deg);
}

.seo-card__trend-arrow {
  position: absolute;
  bottom: 6px;
  left: 20px;
}

/* ══════════════════════════════════════════════
   BOTTOM FEATURE STRIP
   ══════════════════════════════════════════════ */
.seo-strip {
  background: var(--color-bg-white);
  border: 1px solid rgba(17, 17, 17, 0.06);
  border-radius: 16px;
  padding: var(--space-28) var(--space-32);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-32);
}

.seo-strip__features {
  display: flex;
  align-items: flex-start;
  gap: var(--space-32);
  flex: 1;
  min-width: 140px;
  flex-wrap: wrap;
}

.seo-strip__feature {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex: 1;
  min-width: 140px;
}

.seo-strip__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(245, 93, 45, 0.07);
  border: 1px solid rgba(245, 93, 45, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  flex-shrink: 0;
}

.seo-strip__title {
  font-family: var(--font-secondary);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 3px 0;
}

.seo-strip__desc {
  font-family: var(--font-secondary);
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
}

/* CTA box on the right side of the strip */
.seo-strip__cta {
  text-align: right;
  flex-shrink: 0;
  border-left: 1px solid rgba(17, 17, 17, 0.06);
  padding: var(--space-24);
}

.seo-strip__cta-heading {
  font-family: var(--font-secondary);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 4px 0;
}

.seo-strip__cta-sub {
  font-family: var(--font-secondary);
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0 0 14px 0;
}

.seo-strip__cta-btn {
  align-items: center;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .seo-banner {
    grid-template-columns: 1fr 1fr;
  }

  .seo-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .seo-banner {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .seo-banner__right {
    min-height: 220px;
  }

  .seo-banner__left {
    padding: var(--space-32) var(--space-28);
  }

  .seo-banner__pill-row--1 {
    padding-left: 20px;
  }

  .seo-banner__pill-row--2 {
    padding-left: 0;
  }

  .seo-banner__pill-row--3 {
    padding-left: 10px;
  }

  .seo-banner__pill-row--4 {
    padding-left: 20px;
  }

  .seo-cards {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }

  .seo-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-24);
  }

  .seo-strip__cta {
    border-left: none;
    border-top: 1px solid rgba(17, 17, 17, 0.06);
    padding-left: 0;
    padding-top: var(--space-20);
    text-align: left;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .seo-services {
    padding: var(--space-40) 0;
  }

  .seo-banner__title {
    font-size: clamp(1.6rem, 5vw, 2.2rem);
  }

  .seo-strip__features {
    gap: var(--space-20);
  }

  .seo-strip__feature {
    min-width: 100%;
  }

  .seo-banner__pill-row {
    flex-wrap: wrap;
  }
}

/* ==========================================================
   SEO WEBSITES OPTIMIZED (PORTFOLIO) & STATS BAR
   ========================================================== */

.seo-results {
  background: var(--color-bg-white);
  border-top: 1px solid rgba(17, 17, 17, 0.05);
}

.seo-results__header {
  margin-bottom: var(--space-48);
}

.seo-results__subtitle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-secondary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-primary);
  margin-bottom: var(--space-16);
}

.seo-results__subtitle::before {
  content: '• •';
  margin-right: 4px;
}

.seo-results__subtitle::after {
  content: '• •';
  margin-left: 4px;
}

.seo-results__title {
  font-family: var(--font-primary);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 900;
  line-height: 1.15;
  color: var(--color-text-primary);
  margin-bottom: var(--space-16);
}

.seo-results__desc {
  font-family: var(--font-secondary);
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-text-muted);
  max-width: 520px;
  margin: 0 auto;
}

.seo-results__header-line {
  width: 50px;
  height: 3px;
  background-color: var(--color-primary);
  margin: var(--space-20) auto 0 auto;
  border-radius: var(--radius-full);
}

.seo-results__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-32);
  margin-top: var(--space-56);
  margin-bottom: var(--space-56);
}

.seo-results__card {
  background: var(--color-bg-white);
  border: 1px solid rgba(17, 17, 17, 0.07);
  border-radius: var(--radius-xl);
  padding: var(--space-32) var(--space-28) var(--space-28);
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.015);
  transition: all var(--transition-normal);
}

.seo-results__card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 30px 60px -15px rgba(245, 93, 45, 0.08),
    0 10px 25px -5px rgba(0, 0, 0, 0.03);
  border-color: rgba(245, 93, 45, 0.18);
}

/* Laptop Mockup Styles */
.laptop-mockup {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin: 0 auto var(--space-24) auto;
}

.laptop-screen {
  position: relative;
  width: 100%;
  padding-top: 62.5%;
  /* 16:10 Aspect Ratio */
  background: #000;
  border-radius: 8px 8px 0 0;
  border: 4px solid #1e293b;
  border-bottom: none;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.04);
}

.laptop-bezel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #0f172a;
  padding: 4px;
  display: flex;
  flex-direction: column;
}

.laptop-camera {
  position: absolute;
  top: 1.5px;
  left: 50%;
  transform: translateX(-50%);
  width: 2.5px;
  height: 2.5px;
  background: #475569;
  border-radius: 50%;
  z-index: 5;
}

.laptop-display {
  flex: 1;
  background: #f8fafc;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.laptop-screen-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.laptop-keyboard {
  position: relative;
  width: 106%;
  left: -3%;
  height: 8px;
  background: linear-gradient(to bottom, #cbd5e1 0%, #94a3b8 50%, #64748b 100%);
  border-radius: 1px 1px 6px 6px;
  border-bottom: 2px solid #475569;
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.04),
    0 10px 15px -3px rgba(0, 0, 0, 0.08);
}

.laptop-keyboard::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 18%;
  height: 2.5px;
  background: #334155;
  border-radius: 0 0 3px 3px;
}

/* Card content */
.seo-results__details {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: var(--space-24);
}

.seo-results__tag {
  display: inline-block;
  font-family: var(--font-secondary);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-12);
  width: fit-content;
  background: rgba(245, 93, 45, 0.07);
  color: var(--color-primary);
}

.seo-results__name {
  font-family: var(--font-primary);
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--color-text-primary);
  margin: 0 0 4px 0;
  line-height: 1.25;
}

.seo-results__industry {
  font-family: var(--font-secondary);
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-16) 0;
}

.seo-results__divider {
  width: 100%;
  height: 1px;
  background: rgba(17, 17, 17, 0.06);
  margin-bottom: var(--space-16);
}

/* Metrics */
.seo-results__metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  margin-bottom: var(--space-20);
}

.seo-results__metric {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.seo-results__metric-top {
  display: flex;
  align-items: center;
  gap: 5px;
}

.seo-results__metric-arrow {
  color: var(--color-primary);
  font-size: 11px;
  line-height: 1;
}

.seo-results__metric-val {
  font-family: var(--font-primary);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.seo-results__metric-lbl {
  font-family: var(--font-secondary);
  font-size: 11px;
  color: var(--color-text-muted);
}

.seo-results__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  font-family: var(--font-secondary);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-primary);
  text-decoration: none;
  margin-top: auto;
  align-self: center;
  transition: color var(--transition-normal);
}

.seo-results__link svg {
  transition: transform var(--transition-normal);
  color: var(--color-primary);
}

.seo-results__link:hover {
  color: var(--color-primary);
}

.seo-results__link:hover svg {
  transform: translateX(4px);
}

/* Trust Bar */
.seo-results__trust-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-primary);
  border: 1px solid rgba(17, 17, 17, 0.06);
  border-radius: var(--radius-xl);
  padding: var(--space-24) var(--space-32);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.015);
  margin-top: var(--space-48);
  gap: var(--space-20);
}

.seo-results__trust-item {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
}

.seo-results__trust-item--title {
  flex: 1.25;
}

.seo-results__trust-icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #FFDDD1;
  border: 1px solid #FFDDD1;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition-normal);
}

.seo-results__trust-item:hover .seo-results__trust-icon-circle {
  background: rgba(245, 93, 45, 0.1);
  color: var(--color-bg-light);
  transform: translateY(-2px);
}

.seo-results__trust-text {
  display: flex;
  flex-direction: column;
}

.seo-results__trust-main-title {
  font-family: var(--font-secondary);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text-primary);
  letter-spacing: 0.06em;
  line-height: 1.2;
}

.seo-results__trust-main-subtitle {
  font-family: var(--font-secondary);
  font-size: 14px;
  font-weight: 800;
  color: var(--color-text-inverse);
  line-height: 1.2;
}

.seo-results__trust-stats {
  display: flex;
  flex-direction: column;
}

.seo-results__trust-val {
  font-family: var(--font-primary);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-text-primary);
  line-height: 1.2;
}

.seo-results__trust-lbl {
  font-family: var(--font-secondary);
  font-size: 11px;
  color: var(--color-text-muted);
  line-height: 1.2;
}

/* Responsive breakdowns */
@media (max-width: 1100px) {
  .seo-results__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-24);
  }
}

@media (max-width: 900px) {
  .seo-results__grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: var(--space-40) auto;
  }

  .seo-results__trust-bar {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-28) var(--space-24);
    gap: var(--space-20);
  }

  .seo-results__trust-item {
    width: 100%;
    border-bottom: 1px solid rgba(17, 17, 17, 0.05);
    padding-bottom: var(--space-16);
  }

  .seo-results__trust-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
}

/* --- End: pages/seo.css --- */

/* --- Start: pages/paid-ads.css --- */
/* ══════════════════════════════════════════════
   PAID ADS — PAGE STYLES
   Hero, Deliverables & Portfolio Section
   ══════════════════════════════════════════════ */

/* ── Hero Container ── */
.paid-ads-hero {
  position: relative;
  background: #FAFAFC;
  padding-top: calc(var(--header-height) + 32px);
  padding-bottom: 48px;
  overflow: hidden;
  min-height: auto;
}

/* Orange circle arc background (top right) */
.paid-ads-hero__blob {
  position: absolute;
  top: -20px;
  right: -50px;
  width: 440px;
  height: 440px;
  background: var(--color-primary, #F55D2D);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.95;
}

/* Dot pattern (top right background) */
.paid-ads-hero__dots {
  position: absolute;
  top: 36px;
  right: 450px;
  width: 72px;
  height: 72px;
  background-image: radial-gradient(rgba(17, 17, 17, 0.16) 1.5px, transparent 1.5px);
  background-size: 11px 11px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}

/* ── Grid Layout (Left & Right columns) ── */
.paid-ads-hero__grid {
  display: grid;
  grid-template-columns: 46% 54%;
  align-items: center;
  gap: 20px;
  position: relative;
  z-index: 2;
  margin-bottom: 32px;
}

/* ── Left Column Styling ── */
.paid-ads-hero__left {
  padding-right: 16px;
}

.paid-ads-hero__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(245, 93, 45, 0.08);
  border: 1px solid rgba(245, 93, 45, 0.2);
  border-radius: 9999px;
  padding: 6px 14px;
  font-family: var(--font-secondary);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-primary, #F55D2D);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.paid-ads-hero__label-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary, #F55D2D);
  display: inline-block;
}

.paid-ads-hero__title {
  font-family: var(--font-primary);
  font-size: clamp(2.5rem, 4vw, 3.6rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #111111;
  margin-bottom: 20px;
}

.paid-ads-hero__title-accent {
  color: var(--color-primary, #F55D2D);
  display: block;
}

.paid-ads-hero__desc {
  font-family: var(--font-secondary);
  font-size: 15px;
  line-height: 1.6;
  color: #6B7280;
  max-width: 460px;
  margin-bottom: 28px;
}

.paid-ads-hero__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.paid-ads-btn--primary {
  background: var(--color-primary, #F55D2D);
  color: #FFFFFF;
  font-family: var(--font-secondary);
  font-size: 14px;
  font-weight: 700;
  padding: 12px 26px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 6px 20px rgba(245, 93, 45, 0.3);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.paid-ads-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(245, 93, 45, 0.4);
  color: #FFFFFF;
}

.paid-ads-btn--outline {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  color: #111111;
  font-family: var(--font-secondary);
  font-size: 14px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.paid-ads-btn--outline:hover {
  transform: translateY(-2px);
  border-color: #D1D5DB;
  color: #111111;
}

/* ── Right Column (Monitor Frame & Floating Cards) ── */
.paid-ads-hero__right {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 380px;
  padding: 10px 0;
}

/* Desktop Monitor Frame */
.paid-ads-monitor {
  position: relative;
  width: 90%;
  max-width: 440px;
  z-index: 2;
  margin: 0 auto;
}

.paid-ads-monitor__screen {
  background: #111111;
  border: 8px solid #1A1A1E;
  border-radius: 16px 16px 4px 4px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);
}

.paid-ads-monitor__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.paid-ads-monitor__stand {
  width: 80px;
  height: 18px;
  background: linear-gradient(180deg, #222226 0%, #151518 100%);
  margin: 0 auto;
}

.paid-ads-monitor__base {
  width: 180px;
  height: 16px;
  background: linear-gradient(180deg, #1A1A1E 0%, #0D0D0F 100%);
  border-radius: 50px / 12px;
  margin: 0 auto;
  box-shadow: 0 6px 16px rgba(245, 93, 45, 0.25);
  position: relative;
}

.paid-ads-monitor__base::before {
  content: '';
  position: absolute;
  inset: 2px 20px;
  border-radius: 50%;
  border-top: 1px solid rgba(245, 93, 45, 0.5);
  pointer-events: none;
}

/* ── Floating Cards ── */
.paid-ads-card {
  position: absolute;
  background: #FFFFFF;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid #F0F0F4;
  z-index: 4;
  width: 155px;
  transition: transform 0.3s ease;
}

.paid-ads-card:hover {
  transform: translateY(-4px);
}

.paid-ads-card--meta {
  left: -15px;
  bottom: 40px;
  animation: cardFloatA 4s ease-in-out infinite;
}

.paid-ads-card--google {
  right: -15px;
  bottom: 60px;
  animation: cardFloatB 4.5s ease-in-out infinite;
}

@keyframes cardFloatA {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

@keyframes cardFloatB {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

.paid-ads-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.paid-ads-card__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.paid-ads-card__icon--meta {
  background: rgba(0, 104, 255, 0.08);
}

.paid-ads-card__icon--google {
  background: rgba(234, 67, 53, 0.06);
}

.paid-ads-card__name {
  font-family: var(--font-secondary);
  font-size: 11px;
  font-weight: 700;
  color: #111111;
  margin: 0 0 1px;
  line-height: 1.2;
}

.paid-ads-card__badge {
  font-family: var(--font-secondary);
  font-size: 9px;
  font-weight: 600;
  color: #10B981;
  background: rgba(16, 185, 129, 0.1);
  padding: 1px 6px;
  border-radius: 10px;
  display: inline-block;
}

.paid-ads-card__bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 24px;
  margin: 6px 0 8px;
}

.paid-ads-card__bars span {
  flex: 1;
  background: var(--color-primary, #F55D2D);
  border-radius: 2px 2px 0 0;
  opacity: 0.85;
}

.paid-ads-card__metrics {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  border-top: 1px solid #F3F4F6;
  padding-top: 6px;
  margin-bottom: 4px;
}

.paid-ads-card__label {
  font-family: var(--font-secondary);
  font-size: 9px;
  color: #9CA3AF;
  display: block;
}

.paid-ads-card__val {
  font-family: var(--font-secondary);
  font-size: 11px;
  font-weight: 700;
  color: #111111;
  display: block;
}

.paid-ads-card__growth {
  font-family: var(--font-secondary);
  font-size: 10px;
  font-weight: 700;
  color: #10B981;
  display: flex;
  align-items: center;
  gap: 2px;
}

/* ── Middle Feature Pills Bar ── */
.paid-ads-features {
  background: #FFFFFF;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 16px;
  padding: 20px 32px;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 0;
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  position: relative;
  z-index: 2;
}

.paid-ads-feature-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
}

.paid-ads-feature-item:first-child {
  padding-left: 0;
}

.paid-ads-feature-item:last-child {
  padding-right: 0;
}

.paid-ads-feature-item__icon-circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(245, 93, 45, 0.08);
  border: 1px solid rgba(245, 93, 45, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary, #F55D2D);
  flex-shrink: 0;
}

.paid-ads-feature-item__title {
  font-family: var(--font-secondary);
  font-size: 14px;
  font-weight: 700;
  color: #111111;
  margin: 0 0 2px;
}

.paid-ads-feature-item__desc {
  font-family: var(--font-secondary);
  font-size: 12px;
  color: #6B7280;
  margin: 0;
  line-height: 1.4;
}

.paid-ads-feature-item__sep {
  width: 1px;
  height: 40px;
  background: #E5E7EB;
}

/* ── Dark Stats Bar ── */
.paid-ads-stats {
  background: #0D0D0F;
  border-radius: 18px;
  padding: 22px 36px;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 0;
  margin-bottom: 24px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  position: relative;
  z-index: 2;
}

.paid-ads-stat-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 12px;
}

.paid-ads-stat-item:first-child {
  padding-left: 0;
}

.paid-ads-stat-item:last-child {
  padding-right: 0;
}

.paid-ads-stat-item__icon-box {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--color-primary, #F55D2D);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(245, 93, 45, 0.35);
}

.paid-ads-stat-item__value {
  font-family: var(--font-primary);
  font-size: 1.5rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 2px;
  line-height: 1;
}

.paid-ads-stat-item__label {
  font-family: var(--font-secondary);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  line-height: 1.3;
}

.paid-ads-stat-item__sep {
  width: 1px;
  height: 36px;
  background: rgba(255, 255, 255, 0.12);
}


/* ══════════════════════════════════════════════
   DELIVERABLES SECTION (Data-Driven & 2x2 Grid)
   ══════════════════════════════════════════════ */
.paid-ads-deliverables {
  background: #FAFAFC;
  padding-top: 48px;
  padding-bottom: 64px;
  position: relative;
}

.paid-ads-deliverables__grid {
  display: grid;
  grid-template-columns: 44% 56%;
  gap: 28px;
  align-items: stretch;
  margin-bottom: 32px;
}

/* ── Featured Orange Card (Left Column) ── */
.paid-ads-hero-card {
  background: linear-gradient(145deg, #FF6633 0%, #F55D2D 45%, #D94415 100%);
  border-radius: 24px;
  padding: 38px 36px 32px;
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 16px 40px rgba(245, 93, 45, 0.25);
}

.paid-ads-hero-card__glow {
  position: absolute;
  top: -90px;
  right: -90px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.05) 50%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.paid-ads-hero-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 9999px;
  padding: 6px 14px;
  font-family: var(--font-secondary);
  font-size: 11px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 24px;
  width: fit-content;
  backdrop-filter: blur(8px);
}

.paid-ads-hero-card__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FFFFFF;
  display: inline-block;
}

.paid-ads-hero-card__title {
  font-family: var(--font-primary);
  font-size: clamp(2.2rem, 3.5vw, 2.75rem);
  font-weight: 900;
  line-height: 1.1;
  color: #FFFFFF;
  margin-bottom: 12px;
}

.paid-ads-hero-card__underline {
  width: 36px;
  height: 3px;
  background: #FFFFFF;
  border-radius: 2px;
  margin-bottom: 20px;
}

.paid-ads-hero-card__text {
  font-family: var(--font-secondary);
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 14px;
  max-width: 440px;
}

/* Embedded Graph Widget */
.paid-ads-hero-card__widget {
  position: relative;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 18px;
  padding: 20px 22px 18px;
  backdrop-filter: blur(12px);
  margin-top: 24px;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.paid-ads-widget-glass {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  padding: 8px 14px;
  width: fit-content;
  z-index: 2;
  position: relative;
}

.paid-ads-widget-glass__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  flex-shrink: 0;
}

.paid-ads-widget-glass__label {
  font-family: var(--font-secondary);
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  display: block;
}

.paid-ads-widget-glass__val {
  font-family: var(--font-primary);
  font-size: 18px;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.1;
}

.paid-ads-widget-glass__sub {
  font-family: var(--font-secondary);
  font-size: 9px;
  color: rgba(255, 255, 255, 0.75);
  display: block;
}

/* SVG Line Graph */
.paid-ads-widget-graph {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 90px;
  z-index: 1;
  pointer-events: none;
}

.paid-ads-widget-graph svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Conversions Pill (Bottom Right) */
.paid-ads-widget-conversions {
  position: absolute;
  bottom: 14px;
  right: 14px;
  background: #FFFFFF;
  border-radius: 14px;
  padding: 8px 14px;
  color: #111111;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  z-index: 3;
}

.paid-ads-widget-conversions__label {
  font-family: var(--font-secondary);
  font-size: 10px;
  font-weight: 600;
  color: #6B7280;
  display: block;
  margin-bottom: 2px;
}

.paid-ads-widget-conversions__val-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.paid-ads-widget-conversions__val {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 800;
  color: #111111;
}

.paid-ads-widget-conversions__growth {
  font-family: var(--font-secondary);
  font-size: 11px;
  font-weight: 700;
  color: #10B981;
}

.paid-ads-widget-conversions__arrow {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(245, 93, 45, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary, #F55D2D);
  flex-shrink: 0;
}

.paid-ads-widget-dots {
  position: absolute;
  bottom: 12px;
  left: 14px;
  width: 48px;
  height: 36px;
  background-image: radial-gradient(rgba(255, 255, 255, 0.4) 1.5px, transparent 1.5px);
  background-size: 8px 8px;
  z-index: 1;
  opacity: 0.7;
}

/* ── Deliverables Right Column ── */
.paid-ads-deliverables__right {
  display: flex;
  flex-direction: column;
}

.paid-ads-deliverables__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  position: relative;
}

.paid-ads-deliverables__title {
  font-family: var(--font-primary);
  font-size: clamp(1.8rem, 2.5vw, 2.25rem);
  font-weight: 800;
  color: #111111;
  margin: 0 0 6px;
}

.paid-ads-deliverables__title-line {
  width: 32px;
  height: 3px;
  background: var(--color-primary, #F55D2D);
  border-radius: 2px;
}

.paid-ads-deliverables__dots {
  width: 60px;
  height: 40px;
  background-image: radial-gradient(#F55D2D 2px, transparent 2px);
  background-size: 10px 10px;
  opacity: 0.65;
}

/* 2x2 Grid of Deliverable Cards */
.paid-ads-deliverables__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  flex-grow: 1;
}

.paid-ads-dcard {
  background: #FFFFFF;
  border: 1px solid rgba(17, 17, 17, 0.07);
  border-radius: 18px;
  padding: 24px 22px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  display: flex;
  flex-direction: column;
}

.paid-ads-dcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  border-color: rgba(245, 93, 45, 0.3);
}

.paid-ads-dcard__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}

.paid-ads-dcard__icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(245, 93, 45, 0.08);
  border: 1px solid rgba(245, 93, 45, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary, #F55D2D);
}

.paid-ads-dcard__num {
  font-family: var(--font-primary);
  font-size: 18px;
  font-weight: 800;
  color: var(--color-primary, #F55D2D);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1;
}

.paid-ads-dcard__num-line {
  width: 16px;
  height: 2px;
  background: var(--color-primary, #F55D2D);
  margin-top: 3px;
}

.paid-ads-dcard__title {
  font-family: var(--font-secondary);
  font-size: 16px;
  font-weight: 700;
  color: #111111;
  margin: 0 0 6px;
}

.paid-ads-dcard__line {
  width: 24px;
  height: 2px;
  background: var(--color-primary, #F55D2D);
  margin-bottom: 10px;
  opacity: 0.8;
}

.paid-ads-dcard__desc {
  font-family: var(--font-secondary);
  font-size: 13px;
  line-height: 1.55;
  color: #6B7280;
  margin: 0;
}

/* ── Bottom Row Advantage Bar ── */
.paid-ads-advantages {
  background: #FFFFFF;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 18px;
  padding: 22px 32px;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  margin-top: 28px;
}

.paid-ads-adv-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 14px;
}

.paid-ads-adv-item:first-child {
  padding-left: 0;
}

.paid-ads-adv-item:last-child {
  padding-right: 0;
}

.paid-ads-adv-item__icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(245, 93, 45, 0.08);
  border: 1px solid rgba(245, 93, 45, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary, #F55D2D);
  flex-shrink: 0;
}

.paid-ads-adv-item__title {
  font-family: var(--font-secondary);
  font-size: 14px;
  font-weight: 700;
  color: #111111;
  margin: 0 0 2px;
}

.paid-ads-adv-item__desc {
  font-family: var(--font-secondary);
  font-size: 12px;
  color: #6B7280;
  margin: 0;
  line-height: 1.4;
}

.paid-ads-adv-item__sep {
  width: 1px;
  height: 40px;
  background: #E5E7EB;
}


/* ══════════════════════════════════════════════
   PORTFOLIO SHOWCASE SECTION (Work That Drives Results)
   ══════════════════════════════════════════════ */
.paid-ads-work {
  background: #FAFAFC;
  padding-top: 64px;
  padding-bottom: 80px;
  position: relative;
  overflow: hidden;
}

.paid-ads-work__header {
  margin-bottom: 40px;
}

.paid-ads-work__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-secondary);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-primary, #F55D2D);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.paid-ads-work__label-line {
  width: 18px;
  height: 2px;
  background: var(--color-primary, #F55D2D);
  display: inline-block;
  opacity: 0.8;
}

.paid-ads-work__title {
  font-family: var(--font-primary);
  font-size: clamp(2.2rem, 3.8vw, 3.25rem);
  font-weight: 900;
  color: #111111;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.paid-ads-work__title-accent {
  color: var(--color-primary, #F55D2D);
}

.paid-ads-work__desc {
  font-family: var(--font-secondary);
  font-size: 15px;
  color: #6B7280;
  max-width: 580px;
  margin: 0 auto 28px;
  line-height: 1.6;
}

/* 3 Stats Pills Badge Bar */
.paid-ads-work__stats {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: #FFFFFF;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 9999px;
  padding: 10px 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  margin-bottom: 32px;
}

.paid-ads-work__stat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
}

.paid-ads-work__stat-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(245, 93, 45, 0.08);
  border: 1px solid rgba(245, 93, 45, 0.18);
  color: var(--color-primary, #F55D2D);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.paid-ads-work__stat-num {
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 800;
  color: #111111;
  display: inline-block;
  margin-right: 4px;
}

.paid-ads-work__stat-text {
  font-family: var(--font-secondary);
  font-size: 12px;
  font-weight: 600;
  color: #6B7280;
}

.paid-ads-work__stat-sep {
  width: 1px;
  height: 24px;
  background: #E5E7EB;
}

/* ── 3D Device Showcase Display Stage ── */
.paid-ads-showcase {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1060px;
  margin: 0 auto 48px;
  padding: 20px 0;
  perspective: 1200px;
}

/* 3D Angled Side Cards */
.paid-ads-showcase__card {
  position: absolute;
  top: 50%;
  width: 340px;
  background: #FFFFFF;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1), 0 4px 16px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(17, 17, 17, 0.08);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  z-index: 2;
}

.paid-ads-showcase__card img {
  width: 100%;
  height: auto;
  display: block;
}

.paid-ads-showcase__browser-bar {
  height: 24px;
  background: #F3F4F6;
  border-bottom: 1px solid #E5E7EB;
  display: flex;
  align-items: center;
  gap: 5px;
  padding-left: 12px;
}

.paid-ads-showcase__browser-bar span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #D1D5DB;
  display: inline-block;
}

.paid-ads-showcase__card--left {
  left: 0;
  transform: translateY(-50%) rotateY(18deg) rotateX(4deg) scale(0.88);
  transform-origin: center right;
}

.paid-ads-showcase__card--right {
  right: 0;
  transform: translateY(-50%) rotateY(-18deg) rotateX(4deg) scale(0.88);
  transform-origin: center left;
}

.paid-ads-showcase__card:hover {
  z-index: 10;
}

.paid-ads-showcase__card--left:hover {
  transform: translateY(-50%) rotateY(8deg) rotateX(2deg) scale(0.95);
}

.paid-ads-showcase__card--right:hover {
  transform: translateY(-50%) rotateY(-8deg) rotateX(2deg) scale(0.95);
}

/* Center Laptop Device */
.paid-ads-showcase__center {
  position: relative;
  z-index: 5;
  width: 580px;
  max-width: 90%;
  margin: 0 auto;
}

.paid-ads-showcase__laptop {
  position: relative;
  background: #111111;
  border-radius: 18px 18px 0 0;
  padding: 10px 10px 0;
  border: 2px solid #222226;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.22);
}

.paid-ads-showcase__laptop-screen {
  background: #0D0D0F;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}

.paid-ads-showcase__laptop-screen img {
  width: 100%;
  height: auto;
  display: block;
}

.paid-ads-showcase__laptop-keyboard {
  height: 16px;
  background: linear-gradient(180deg, #2A2A30 0%, #151518 100%);
  border-radius: 0 0 16px 16px;
  position: relative;
  width: 106%;
  left: -3%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.paid-ads-showcase__laptop-notch {
  width: 60px;
  height: 5px;
  background: #0A0A0C;
  border-radius: 0 0 4px 4px;
  position: absolute;
  bottom: -21px;
  left: 50%;
  transform: translateX(-50%);
}

.paid-ads-showcase__laptop-glow {
  position: absolute;
  bottom: -22px;
  left: 10%;
  right: 10%;
  height: 28px;
  background: radial-gradient(ellipse at center, rgba(245, 93, 45, 0.45) 0%, transparent 70%);
  filter: blur(14px);
  pointer-events: none;
}

/* Overlapping Phone Device */
.paid-ads-showcase__phone {
  position: absolute;
  bottom: -15px;
  right: -32px;
  width: 160px;
  background: #0D0D0F;
  border: 6px solid #1A1A1E;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.38);
  z-index: 8;
  transform: rotate(-3deg);
  transition: transform 0.3s ease;
}

.paid-ads-showcase__phone:hover {
  transform: rotate(0deg) scale(1.05);
}

.paid-ads-showcase__phone-screen img {
  width: 100%;
  height: auto;
  display: block;
}

.paid-ads-showcase__phone-notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 12px;
  background: #1A1A1E;
  border-radius: 0 0 8px 8px;
}

/* ── Bottom Quote & Brands Bar ── */
.paid-ads-brands {
  background: #FFFFFF;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 18px;
  padding: 22px 32px;
  display: grid;
  grid-template-columns: 38% auto 58%;
  align-items: center;
  gap: 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  margin-bottom: 32px;
}

.paid-ads-brands__quote {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: 20px;
}

.paid-ads-brands__quote-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-primary, #F55D2D);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(245, 93, 45, 0.35);
}

.paid-ads-brands__quote-text {
  font-family: var(--font-secondary);
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  line-height: 1.5;
  margin: 0;
}

.paid-ads-brands__sep {
  width: 1px;
  height: 44px;
  background: #E5E7EB;
}

.paid-ads-brands__logos {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 16px;
  padding-left: 20px;
}

.paid-ads-brand-logo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-secondary);
  font-size: 15px;
  font-weight: 800;
  color: #111111;
  opacity: 0.85;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.paid-ads-brand-logo:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.paid-ads-brand-logo--glowe {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 18px;
  font-weight: 700;
}

.paid-ads-work__action {
  margin-top: 16px;
}

/* ── Responsive Breakpoints ── */
@media (max-width: 1024px) {

  .paid-ads-hero__grid,
  .paid-ads-deliverables__grid {
    grid-template-columns: 50% 50%;
  }

  .paid-ads-showcase__card--left {
    left: -30px;
  }

  .paid-ads-showcase__card--right {
    right: -30px;
  }

  .paid-ads-brands {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px;
  }

  .paid-ads-brands__quote {
    padding-right: 0;
  }

  .paid-ads-brands__sep {
    display: none;
  }

  .paid-ads-brands__logos {
    padding-left: 0;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .paid-ads-hero {
    padding-top: calc(var(--header-height) + 24px);
    padding-bottom: 32px;
  }

  .paid-ads-hero__blob {
    width: 260px;
    height: 260px;
    top: -20px;
    right: -30px;
  }

  .paid-ads-hero__grid,
  .paid-ads-deliverables__grid {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 24px;
  }

  .paid-ads-deliverables__cards {
    grid-template-columns: 1fr;
  }

  .paid-ads-hero__left {
    padding-right: 0;
  }

  .paid-ads-hero__title,
  .paid-ads-work__title {
    font-size: clamp(2rem, 8vw, 2.75rem);
  }

  .paid-ads-features,
  .paid-ads-advantages {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 20px;
  }

  .paid-ads-feature-item,
  .paid-ads-adv-item {
    padding: 0;
  }

  .paid-ads-feature-item__sep,
  .paid-ads-adv-item__sep {
    display: none;
  }

  .paid-ads-stats {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 20px;
  }

  .paid-ads-stat-item {
    padding: 0;
  }

  .paid-ads-stat-item__sep {
    display: none;
  }

  .paid-ads-work__stats {
    flex-direction: column;
    border-radius: 20px;
    padding: 16px;
    gap: 12px;
  }

  .paid-ads-work__stat-sep {
    display: none;
  }

  .paid-ads-showcase {
    flex-direction: column;
    padding: 0;
    gap: 20px;
  }

  .paid-ads-showcase__card {
    position: relative;
    top: 0;
    transform: none !important;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }

  .paid-ads-showcase__phone {
    right: -10px;
    bottom: -10px;
    width: 120px;
  }
}


/* --- End: pages/paid-ads.css --- */

/* --- Start: pages/influencer-marketing.css --- */
/* ══════════════════════════════════════════════
   INFLUENCER MARKETING — PAGE STYLES
   ══════════════════════════════════════════════ */

/* ── Hero Container ── */
.influencer-hero {
  position: relative;
  background: #FBF9F7;
  padding-top: calc(var(--header-height) + 28px);
  padding-bottom: 44px;
  overflow: hidden;
  min-height: auto;
}

/* Flight Path & Paper Plane Decorative Elements */
.influencer-hero__flight-path {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.influencer-hero__flight-path svg {
  width: 100%;
  height: 100%;
}

.influencer-hero__plane {
  position: absolute;
  top: 70px;
  right: 60px;
  transform: rotate(15deg);
  filter: drop-shadow(0 4px 12px rgba(245, 93, 45, 0.35));
  animation: planeFloat 3.5s ease-in-out infinite alternate;
}

@keyframes planeFloat {
  0% {
    transform: translateY(0) rotate(15deg);
  }

  100% {
    transform: translateY(-8px) rotate(18deg);
  }
}

/* ── Two-Column Grid Layout ── */
.influencer-hero__grid {
  display: grid;
  grid-template-columns: 42% 58%;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 2;
  margin-bottom: 36px;
}

/* ── Left Column Styling ── */
.influencer-hero__left {
  padding-right: 16px;
}

.influencer-hero__title {
  font-family: var(--font-primary);
  font-size: clamp(2.5rem, 4vw, 3.6rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #111111;
  margin-bottom: 20px;
}

.influencer-hero__desc {
  font-family: var(--font-secondary);
  font-size: 15px;
  line-height: 1.6;
  color: #6B7280;
  max-width: 460px;
  margin-bottom: 28px;
}

.influencer-hero__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.influencer-btn--primary {
  background: var(--color-primary, #F55D2D);
  color: #FFFFFF;
  font-family: var(--font-secondary);
  font-size: 14px;
  font-weight: 700;
  padding: 12px 26px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 6px 20px rgba(245, 93, 45, 0.3);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.influencer-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(245, 93, 45, 0.4);
  color: #FFFFFF;
}

.influencer-btn--outline {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  color: #111111;
  font-family: var(--font-secondary);
  font-size: 14px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.influencer-btn--outline:hover {
  transform: translateY(-2px);
  border-color: #D1D5DB;
  color: #111111;
}

/* 3 Feature Pills Row (under buttons) */
.influencer-hero__features {
  background: #FFFFFF;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 16px;
  padding: 20px 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 0;
  margin-top: 36px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.influencer-hero__feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0 12px;
}

.influencer-hero__feature:first-child {
  padding-left: 0;
}

.influencer-hero__feature:last-child {
  padding-right: 0;
}

.influencer-hero__feature-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(245, 93, 45, 0.08);
  border: 1px solid rgba(245, 93, 45, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary, #F55D2D);
  flex-shrink: 0;
}

.influencer-hero__feature-title {
  font-family: var(--font-secondary);
  font-size: 13px;
  font-weight: 700;
  color: #111111;
  margin: 0 0 2px;
}

.influencer-hero__feature-desc {
  font-family: var(--font-secondary);
  font-size: 11px;
  color: #6B7280;
  margin: 0;
  line-height: 1.45;
}

.influencer-hero__feature-sep {
  width: 1px;
  height: 38px;
  background: #E5E7EB;
}

/* ── Right Column (Smartphone Mockup & 5 Floating Cards) ── */
.influencer-hero__right {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 560px;
  padding: 30px 10px;
}

/* Smartphone Device */
.influencer-phone {
  position: relative;
  width: 270px;
  background: #E8E8E8;
  border: 9px solid #D4D4D4;
  border-radius: 42px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.8) inset,
    0 30px 80px rgba(0, 0, 0, 0.18),
    0 8px 24px rgba(0, 0, 0, 0.1);
  z-index: 5;
  transform: perspective(1200px) rotateY(4deg) rotateX(2deg);
  transition: transform 0.4s ease;
}

.influencer-phone:hover {
  transform: perspective(1200px) rotateY(0deg) rotateX(0deg);
}

/* Dynamic Island / Notch */
.influencer-phone__notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 22px;
  background: #1A1A1A;
  border-radius: 12px;
  z-index: 10;
}

.influencer-phone__screen {
  position: relative;
  background: #000000;
  border-radius: 32px;
  overflow: hidden;
}

.influencer-phone__header {
  position: absolute;
  top: 44px;
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 4;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  padding: 6px 10px;
  border-radius: 20px;
}

.influencer-phone__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #FFFFFF;
}

.influencer-phone__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.influencer-phone__handle {
  font-family: var(--font-secondary);
  font-size: 10px;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 3px;
}

.influencer-phone__sponsored {
  font-family: var(--font-secondary);
  font-size: 8px;
  color: rgba(255, 255, 255, 0.7);
  display: block;
}

.influencer-phone__reel-img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.influencer-phone__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 14px 12px;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.85) 100%);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 4;
}

.influencer-phone__caption {
  color: #FFFFFF;
  font-family: var(--font-secondary);
  font-size: 10px;
  line-height: 1.35;
  max-width: 140px;
}

.influencer-phone__caption p {
  margin: 0;
  color: #FFFFFF;
}

.influencer-phone__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.influencer-phone__act-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-secondary);
  font-size: 9px;
  font-weight: 700;
  color: #FFFFFF;
  gap: 2px;
}

/* ── 5 Floating Analytics Cards ── */
.influencer-card {
  position: absolute;
  background: #FFFFFF;
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(17, 17, 17, 0.06);
  z-index: 6;
  transition: transform 0.3s ease;
}

.influencer-card:hover {
  transform: translateY(-4px);
}

.influencer-card__title {
  font-family: var(--font-secondary);
  font-size: 10px;
  font-weight: 600;
  color: #6B7280;
  margin: 0 0 4px;
}

.influencer-card__stat {
  font-family: var(--font-primary);
  font-size: 18px;
  font-weight: 800;
  color: var(--color-primary, #F55D2D);
  margin: 0 0 6px;
  line-height: 1;
}

/* Card Arrows & Flight Path */
.influencer-hero__card-arrows {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.influencer-hero__arrow-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.influencer-hero__top-plane {
  position: absolute;
  top: -15px;
  right: -25px;
  transform: rotate(15deg);
  animation: planeFloat 4s ease-in-out infinite alternate;
}

/* Card 1: Audience Reach (Top Left) */
.influencer-card--reach {
  left: -20px;
  top: 15px;
  width: 160px;
  z-index: 6;
  animation: floatCard1 4.2s ease-in-out infinite alternate;
}

.influencer-card__avatars {
  display: flex;
  align-items: center;
  margin-top: 6px;
}

.influencer-card__avatars img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid #FFFFFF;
  margin-left: -6px;
  object-fit: cover;
}

.influencer-card__avatars img:first-child {
  margin-left: 0;
}

.influencer-card__avatar-badge {
  font-family: var(--font-secondary);
  font-size: 8px;
  font-weight: 700;
  color: var(--color-primary, #F55D2D);
  background: rgba(245, 93, 45, 0.12);
  padding: 1px 5px;
  border-radius: 10px;
  margin-left: 2px;
}

/* Card 2: Engagement Rate (Middle Left) */
.influencer-card--engagement {
  left: -45px;
  top: 175px;
  width: 150px;
  z-index: 6;
  animation: floatCard2 4.8s ease-in-out infinite alternate;
}

.influencer-card__mini-chart {
  height: 24px;
  margin-top: 4px;
}

.influencer-card__mini-chart svg {
  width: 100%;
  height: 100%;
}

/* Card 3: Post Preview (Bottom Center Left) */
.influencer-card--post {
  left: -15px;
  bottom: 0px;
  width: 175px;
  padding: 8px;
  z-index: 7;
  animation: floatCard3 4s ease-in-out infinite alternate;
}

.influencer-card__post-img {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  height: 90px;
}

.influencer-card__post-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.influencer-card__post-info {
  position: absolute;
  bottom: 4px;
  left: 6px;
  right: 6px;
  color: #FFFFFF;
  font-family: var(--font-secondary);
  font-size: 8px;
  line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.influencer-card__post-info p {
  margin: 0;
  font-weight: 700;
  color: #FFFFFF;
}

.influencer-card__post-info span {
  opacity: 0.8;
}

.influencer-card__post-stats {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-secondary);
  font-size: 9px;
  font-weight: 700;
  color: #374151;
  padding: 4px 4px 0;
}

/* Card 4: Campaign Performance Donut (Top Right) */
.influencer-card--perf {
  right: -30px;
  top: 25px;
  width: 155px;
  text-align: center;
  z-index: 6;
  animation: floatCard4 4.5s ease-in-out infinite alternate;
}

.influencer-card__donut {
  position: relative;
  width: 60px;
  height: 60px;
  margin: 6px auto 0;
}

.influencer-card__donut svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.influencer-card__donut-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.influencer-card__donut-text strong {
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 800;
  color: #111111;
}

.influencer-card__donut-text span {
  font-family: var(--font-secondary);
  font-size: 8px;
  color: #6B7280;
  margin-top: 1px;
}

/* Card 5: Conversions (Bottom Right) */
.influencer-card--conv {
  right: -35px;
  bottom: 75px;
  width: 155px;
  z-index: 6;
  animation: floatCard5 3.8s ease-in-out infinite alternate;
}

.influencer-card__conv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.influencer-card__badge {
  font-family: var(--font-secondary);
  font-size: 9px;
  font-weight: 700;
  color: #10B981;
  background: rgba(16, 185, 129, 0.12);
  padding: 1px 5px;
  border-radius: 10px;
}

@keyframes floatCard1 {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-6px);
  }
}

@keyframes floatCard2 {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-8px);
  }
}

@keyframes floatCard3 {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-5px);
  }
}

@keyframes floatCard4 {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-7px);
  }
}

@keyframes floatCard5 {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-6px);
  }
}

/* ── TRUSTED BRANDS LOGO BAR ── */
.influencer-brands {
  background: #FFFFFF;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 18px;
  padding: 20px 32px;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  position: relative;
  z-index: 2;
}

.influencer-brands__label {
  font-family: var(--font-secondary);
  font-size: 11px;
  font-weight: 800;
  color: #111111;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  padding-right: 24px;
}

.influencer-brands__sep {
  width: 1px;
  height: 36px;
  background: #E5E7EB;
}

.influencer-brands__logos {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 20px;
  padding-left: 24px;
}

.influencer-brand-logo {
  font-family: var(--font-secondary);
  font-size: 16px;
  font-weight: 800;
  color: #111111;
  opacity: 0.85;
  transition: opacity 0.2s ease, transform 0.2s ease;
  user-select: none;
}

.influencer-brand-logo:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.influencer-brand-logo--boat {
  font-size: 18px;
  letter-spacing: -0.02em;
}

.influencer-brand-logo--boat span {
  color: #F55D2D;
  display: inline-block;
  transform: skewX(-10deg);
}

.influencer-brand-logo--mamaearth {
  color: #00B2A9;
  font-weight: 700;
}

.influencer-brand-logo--mamaearth span {
  color: #2D3748;
}

.influencer-brand-logo--wow {
  font-size: 14px;
  letter-spacing: 0.04em;
}

.influencer-brand-logo--wow span {
  font-size: 10px;
  color: #6B7280;
  display: block;
}

.influencer-brand-logo--derma {
  font-size: 13px;
  color: #00B4D8;
}

.influencer-brand-logo--sugar {
  font-size: 14px;
  letter-spacing: 0.12em;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .influencer-hero__grid {
    grid-template-columns: 50% 50%;
  }

  .influencer-card--reach {
    left: -10px;
  }

  .influencer-card--perf {
    right: -10px;
  }
}

@media (max-width: 768px) {
  .influencer-hero {
    padding-top: calc(var(--header-height) + 24px);
    padding-bottom: 32px;
  }

  .influencer-hero__grid {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 24px;
  }

  .influencer-hero__left {
    padding-right: 0;
  }

  .influencer-hero__title {
    font-size: clamp(2rem, 8vw, 2.75rem);
  }

  .influencer-hero__features {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 20px;
  }

  .influencer-hero__feature {
    padding: 0;
  }

  .influencer-hero__feature-sep {
    display: none;
  }

  .influencer-brands {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 20px;
  }

  .influencer-brands__label {
    padding-right: 0;
    text-align: center;
  }

  .influencer-brands__sep {
    display: none;
  }

  .influencer-brands__logos {
    padding-left: 0;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
  }
}

/* ══════════════════════════════════════════════
   TARGETED CREATOR NETWORKS — BENTO SECTION
   ══════════════════════════════════════════════ */

.infl-network {
  background: #F8F7F5;
  padding: 56px 0 60px;
}

/* Bento Grid */
.infl-network__grid {
  display: grid;
  grid-template-columns: 220px 1fr 255px;
  grid-template-rows: auto auto auto;
  gap: 14px;
  margin-bottom: 14px;
}

/* Common Card Base */
.infl-network__card {
  background: #FFFFFF;
  border-radius: 20px;
  padding: 24px;
  border: 1px solid rgba(17, 17, 17, 0.07);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  position: relative;
}

.infl-network__card-icon {
  margin-bottom: 14px;
}

.infl-network__card-title {
  font-family: var(--font-primary);
  font-size: 17px;
  font-weight: 800;
  color: #111111;
  margin: 0 0 8px;
  line-height: 1.2;
}

.infl-network__card-divider {
  width: 32px;
  height: 3px;
  background: #F55D2D;
  border-radius: 2px;
  margin-bottom: 10px;
}

.infl-network__card-desc {
  font-family: var(--font-secondary);
  font-size: 12.5px;
  line-height: 1.55;
  color: #6B7280;
  margin: 0;
}

/* 1. Orange Left Card */
.infl-network__card--orange {
  grid-column: 1;
  grid-row: 1 / 4;
  background: linear-gradient(155deg, #F55D2D 0%, #E04820 100%);
  border-color: transparent;
  box-shadow: 0 12px 40px rgba(245, 93, 45, 0.3);
  display: flex;
  flex-direction: column;
  padding: 26px 20px 20px;
}

.infl-network__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-secondary);
  font-size: 10px;
  font-weight: 700;
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 4px 10px;
  border-radius: 9999px;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
  width: fit-content;
}

.infl-network__orange-title {
  font-family: var(--font-primary);
  font-size: clamp(1.45rem, 1.9vw, 2rem);
  font-weight: 900;
  color: #FFFFFF;
  line-height: 1.12;
  margin: 0 0 12px;
}

.infl-network__orange-divider {
  width: 28px;
  height: 2px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 1px;
  margin-bottom: 14px;
}

.infl-network__orange-desc {
  font-family: var(--font-secondary);
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 10px;
}

.infl-network__orange-ring {
  position: absolute;
  right: -22px;
  top: 50%;
  transform: translateY(-50%);
  width: 110px;
  height: 110px;
  opacity: 0.6;
  pointer-events: none;
}

.infl-network__analyst {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  padding: 10px 12px;
  margin-top: auto;
}

.infl-network__analyst-img-wrap {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.6);
  flex-shrink: 0;
}

.infl-network__analyst-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.infl-network__analyst-name {
  font-family: var(--font-secondary);
  font-size: 12px;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0;
}

.infl-network__analyst-co {
  font-family: var(--font-secondary);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.75);
  margin: 1px 0 0;
}

/* 2. Search & Vetting Card */
.infl-network__card--search {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto auto;
  column-gap: 16px;
}

.infl-network__card--search .infl-network__card-icon {
  grid-column: 1;
  grid-row: 1;
}

.infl-network__card--search .infl-network__card-title {
  grid-column: 1;
  grid-row: 2;
}

.infl-network__card--search .infl-network__card-divider {
  grid-column: 1;
  grid-row: 3;
}

.infl-network__card--search .infl-network__card-desc {
  grid-column: 1;
  grid-row: 4;
}

.infl-network__avatar-list {
  grid-column: 2;
  grid-row: 1 / 5;
  display: flex;
  flex-direction: column;
  gap: 7px;
  justify-content: center;
  align-self: center;
}

.infl-network__avatar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.infl-network__avatar-row img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #F0F0F4;
}

.infl-network__avatar-initials {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #F0F0F4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.infl-network__check {
  flex-shrink: 0;
}

/* 3. Contract Management Card */
.infl-network__card--contract {
  grid-column: 3;
  grid-row: 1;
}

.infl-network__contract-3d {
  position: absolute;
  top: 0;
  right: 0;
  pointer-events: none;
  width: 120px;
  height: 110px;
}

.infl-network__3d-megaphone {
  width: 50px;
  height: 50px;
  object-fit: contain;
  transform: rotate(-15deg);
  position: absolute;
  top: 12px;
  right: 70px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.12));
}

.infl-network__3d-target {
  width: 86px;
  height: 86px;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.1));
  position: absolute;
  right: 0;
  top: 0;
}

.infl-network__creator-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-primary, #F55D2D);
  color: #FFFFFF;
  border-radius: 10px;
  padding: 6px 12px;
  margin-bottom: 56px;
  margin-top: 4px;
}

.infl-network__creator-badge strong {
  font-family: var(--font-primary);
  font-size: 18px;
  font-weight: 900;
}

.infl-network__creator-badge span {
  font-family: var(--font-secondary);
  font-size: 10px;
  font-weight: 600;
  opacity: 0.9;
}

/* 4. RiverBird Brand Banner Card */
.infl-network__card--brand {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px 28px;
}

.infl-network__brand-plane {
  position: absolute;
  top: 16px;
  left: 20px;
  opacity: 0.9;
  animation: planeFloat 3.5s ease-in-out infinite alternate;
}

.infl-network__brand-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.infl-network__brand-name {
  font-family: var(--font-primary);
  font-size: 26px;
  font-weight: 900;
  color: #111111;
  letter-spacing: -0.03em;
}

.infl-network__brand-dot {
  color: #F55D2D;
}

.infl-network__brand-tagline {
  font-family: var(--font-secondary);
  font-size: 12.5px;
  color: #6B7280;
  margin: 7px 0 0;
}

/* 5. Campaign Impact Card */
.infl-network__card--impact {
  grid-column: 3;
  grid-row: 2 / 4;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.infl-network__impact-header {
  background: var(--color-primary, #F55D2D);
  color: #FFFFFF;
  font-family: var(--font-secondary);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 16px;
}

.infl-network__impact-rows {
  padding: 4px 16px 8px;
  display: flex;
  flex-direction: column;
}

.infl-network__impact-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #F3F4F6;
}

.infl-network__impact-row:last-child {
  border-bottom: none;
}

.infl-network__impact-label {
  font-family: var(--font-secondary);
  font-size: 11.5px;
  color: #6B7280;
}

.infl-network__impact-val {
  font-family: var(--font-secondary);
  font-size: 12.5px;
  font-weight: 700;
  color: #111111;
}

.infl-network__impact-val--roi {
  color: var(--color-primary, #F55D2D);
  font-size: 14px;
}

.infl-network__roi-chart {
  margin-top: auto;
  padding: 10px 16px 14px;
  border-top: 1px solid #F3F4F6;
}

.infl-network__roi-label {
  font-family: var(--font-secondary);
  font-size: 8.5px;
  font-weight: 700;
  color: #9CA3AF;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 5px;
}

.infl-network__roi-svg {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 8px;
}

.infl-network__roi-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.infl-network__roi-stat {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 800;
  color: #111111;
  margin: 2px 0 0;
}

.infl-network__roi-up {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 6. Bottom Center sub-grid */
.infl-network__bottom-center {
  grid-column: 2;
  grid-row: 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.infl-network__card--creative {
  padding: 20px;
}

.infl-network__brand-board {
  margin-top: 10px;
}

.infl-network__bb-label {
  font-family: var(--font-secondary);
  font-size: 8.5px;
  font-weight: 700;
  color: #9CA3AF;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 6px;
}

.infl-network__color-swatches {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}

.infl-network__swatch {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.infl-network__bb-content {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6px;
}

.infl-network__bb-type {
  display: flex;
  align-items: center;
  gap: 8px;
}

.infl-network__bb-aa {
  font-family: var(--font-primary);
  font-size: 26px;
  font-weight: 900;
  color: #111111;
  line-height: 1;
}

.infl-network__bb-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.infl-network__bb-lines div {
  height: 3px;
  border-radius: 2px;
  background: #E5E7EB;
}

.infl-network__bb-lines div:nth-child(1) {
  width: 34px;
}

.infl-network__bb-lines div:nth-child(2) {
  width: 26px;
}

.infl-network__bb-lines div:nth-child(3) {
  width: 18px;
}

.infl-network__product-img {
  width: 48px;
  height: 64px;
  object-fit: contain;
}

.infl-network__card--conversion {
  padding: 20px;
  display: flex;
  flex-direction: column;
}

/* STATS ROW */
.infl-network__stats-row {
  background: #FFFFFF;
  border: 1px solid rgba(17, 17, 17, 0.07);
  border-radius: 20px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.infl-network__stats-grid {
  flex: 1;
  display: flex;
  align-items: center;
}

.infl-network__stat-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
}

.infl-network__stat-item:first-child {
  padding-left: 0;
}

.infl-network__stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(245, 93, 45, 0.07);
  border: 1px solid rgba(245, 93, 45, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.infl-network__stat-num {
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: 900;
  color: #111111;
  margin: 0 0 1px;
  line-height: 1;
}

.infl-network__stat-name {
  font-family: var(--font-secondary);
  font-size: 11.5px;
  font-weight: 700;
  color: #111111;
  margin: 0 0 1px;
}

.infl-network__stat-sub {
  font-family: var(--font-secondary);
  font-size: 10px;
  color: #9CA3AF;
  margin: 0;
}

.infl-network__stat-sep {
  width: 1px;
  height: 42px;
  background: #E5E7EB;
  flex-shrink: 0;
}

.infl-network__stat-cta {
  background: var(--color-primary, #F55D2D);
  border-radius: 16px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 200px;
  text-decoration: none;
  flex-shrink: 0;
  margin-left: 18px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 6px 20px rgba(245, 93, 45, 0.3);
}

.infl-network__stat-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(245, 93, 45, 0.4);
}

.infl-network__stat-cta-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  flex-shrink: 0;
}

.infl-network__stat-cta p {
  font-family: var(--font-secondary);
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  line-height: 1.45;
}

.infl-network__stat-cta strong {
  color: #FFFFFF;
  font-weight: 700;
}

/* Responsive */
@media (max-width: 1024px) {
  .infl-network__grid {
    grid-template-columns: 195px 1fr 225px;
  }

  .infl-network__stat-cta {
    min-width: 175px;
  }
}

@media (max-width: 768px) {
  .infl-network {
    padding: 36px 0;
  }

  .infl-network__grid {
    grid-template-columns: 1fr;
  }

  .infl-network__card--orange,
  .infl-network__card--search,
  .infl-network__card--contract,
  .infl-network__card--brand,
  .infl-network__card--impact,
  .infl-network__bottom-center {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  .infl-network__bottom-center {
    grid-template-columns: 1fr;
  }

  .infl-network__card--search {
    grid-template-columns: 1fr;
  }

  .infl-network__avatar-list {
    grid-column: 1;
    grid-row: auto;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .infl-network__stats-row {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .infl-network__stats-grid {
    flex-direction: column;
  }

  .infl-network__stat-sep {
    width: 100%;
    height: 1px;
  }

  .infl-network__stat-item {
    padding: 10px 0;
  }

  .infl-network__stat-cta {
    margin-left: 0;
  }
}

/* ══════════════════════════════════════════════
   INFLUENCER PROCESS & PLATFORMS SECTION
   ══════════════════════════════════════════════ */

.infl-process {
  background: #F8F7F5;
  padding-top: 60px;
  padding: 60px 0 60px;
}

.infl-process__container {
  max-width: 1200px;
}

.infl-process__top-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.infl-process__card {
  background: #FFFFFF;
  border-radius: 20px;
  border: 1px solid rgba(17, 17, 17, 0.07);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  padding: 28px 30px;
  position: relative;
  overflow: hidden;
}

.infl-process__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-secondary);
  font-size: 10px;
  font-weight: 700;
  color: #F55D2D;
  background: rgba(245, 93, 45, 0.08);
  border: 1px solid rgba(245, 93, 45, 0.2);
  padding: 5px 11px;
  border-radius: 9999px;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}

.infl-process__badge-icon {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: #F55D2D;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.infl-process__title {
  font-family: var(--font-primary);
  font-size: clamp(1.4rem, 1.8vw, 1.85rem);
  font-weight: 900;
  color: #111111;
  line-height: 1.18;
  margin: 0;
}

/* --- Card 1: Process --- */
.infl-process__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 30px;
}

.infl-process__callout-wrap {
  position: relative;
  max-width: 250px;
}

.infl-process__plane-trail {
  position: absolute;
  top: -24px;
  left: -40px;
  width: 90px;
  height: 40px;
  pointer-events: none;
}

.infl-process__plane-icon {
  position: absolute;
  top: 10px;
  right: 0;
  transform: rotate(-10deg);
}

.infl-process__callout {
  background: #FBF9F7;
  border: 1px solid rgba(245, 93, 45, 0.12);
  border-radius: 14px;
  padding: 14px 16px;
}

.infl-process__callout p {
  font-family: var(--font-secondary);
  font-size: 11.5px;
  line-height: 1.5;
  color: #6B7280;
  margin: 0;
}

/* Stepper */
.infl-process__stepper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}

.infl-process__step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}

.infl-process__step-num {
  display: inline-block;
  font-family: var(--font-secondary);
  font-size: 10px;
  font-weight: 800;
  color: #F55D2D;
  border: 1.5px solid rgba(245, 93, 45, 0.4);
  background: #FFF5F2;
  border-radius: 9999px;
  padding: 2px 8px;
  margin-bottom: 12px;
}

.infl-process__step-icon-wrap {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(245, 93, 45, 0.06);
  border: 1px solid rgba(245, 93, 45, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  transition: transform 0.3s ease;
}

.infl-process__step:hover .infl-process__step-icon-wrap {
  transform: translateY(-4px);
  background: rgba(245, 93, 45, 0.12);
}

.infl-process__step-title {
  font-family: var(--font-secondary);
  font-size: 11px;
  font-weight: 700;
  color: #111111;
  line-height: 1.35;
  margin: 0;
}

.infl-process__step-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 36px;
  opacity: 0.6;
}

/* Bottom Timeline bar */
.infl-process__timeline-bar {
  position: relative;
  padding: 0 40px;
  margin-top: 10px;
}

.infl-process__timeline-line {
  height: 2px;
  background: rgba(245, 93, 45, 0.25);
  width: 100%;
}

.infl-process__timeline-dots {
  position: absolute;
  top: 50%;
  left: 40px;
  right: 40px;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
}

.infl-process__timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid #F55D2D;
}

/* --- Card 2: Impact --- */
.infl-process__card--impact {
  display: flex;
  flex-direction: column;
}

.infl-process__impact-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.infl-process__divider {
  width: 28px;
  height: 2px;
  background: #F55D2D;
  margin-top: 10px;
  border-radius: 1px;
}

.infl-process__impact-3d-wrap {
  position: relative;
  width: 90px;
  height: 90px;
  flex-shrink: 0;
}

.infl-process__target-3d {
  width: 90px;
  height: 90px;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.12));
}

.infl-process__floating-avatars {
  position: absolute;
  top: 10px;
  left: -24px;
}

.infl-process__fav-badge {
  font-size: 9px;
  background: #FFFFFF;
  border-radius: 10px;
  padding: 2px 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 4px;
}

.infl-process__fav-img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid #FFFFFF;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  display: block;
}

.infl-process__fav-img--2 {
  margin-top: -6px;
  margin-left: 8px;
}

.infl-process__metrics-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
}

.infl-process__metric-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.06);
}

.infl-process__metric-item:last-child {
  border-bottom: none;
}

.infl-process__metric-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(245, 93, 45, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.infl-process__rupee-symbol {
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: 17px;
  color: #F55D2D;
}

.infl-process__metric-num {
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: 900;
  color: #F55D2D;
  min-width: 75px;
  line-height: 1;
}

.infl-process__metric-info {
  display: flex;
  flex-direction: column;
}

.infl-process__metric-info strong {
  font-family: var(--font-secondary);
  font-size: 11.5px;
  font-weight: 700;
  color: #111111;
}

.infl-process__metric-info span {
  font-family: var(--font-secondary);
  font-size: 10px;
  color: #9CA3AF;
}

/* --- Card 3: Playground --- */
.infl-process__card--playground {
  padding: 30px;
}

.infl-process__pg-main {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.infl-process__pg-left {
  position: relative;
}

.infl-process__pg-plane-wrap {
  position: relative;
  margin-top: 20px;
  width: 120px;
  height: 50px;
}

.infl-process__pg-plane {
  position: absolute;
  top: 5px;
  right: 15px;
  transform: rotate(-15deg);
}

/* Platforms Grid */
.infl-process__platforms-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.infl-process__platform-card {
  background: #FBF9F7;
  border: 1px solid rgba(17, 17, 17, 0.05);
  border-radius: 16px;
  padding: 16px 10px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.35s ease,
    border-color 0.35s ease,
    background 0.35s ease;
}

.infl-process__platform-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 14px 30px rgba(245, 93, 45, 0.13);
  border-color: rgba(245, 93, 45, 0.28);
  background: #FFFFFF;
}

.infl-process__platform-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.infl-process__platform-card:hover .infl-process__platform-icon {
  transform: scale(1.12) rotate(4deg);
}

.infl-process__platform-icon--insta {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.infl-process__platform-icon--yt {
  background: #FFF0F0;
}

.infl-process__platform-icon--tiktok {
  background: #F0F0F0;
}

.infl-process__platform-icon--fb {
  background: #EAF2FE;
}

.infl-process__platform-icon--li {
  background: #E8F2FA;
}

.infl-process__platform-icon--x {
  background: #F0F0F0;
}

.infl-process__platform-name {
  font-family: var(--font-secondary);
  font-size: 12px;
  font-weight: 800;
  color: #111111;
  margin: 0 0 2px;
}

.infl-process__platform-sub {
  font-family: var(--font-secondary);
  font-size: 9.5px;
  color: #9CA3AF;
  margin: 0 0 10px;
  white-space: nowrap;
}

/* ─── Shared UI Card Shell ──────────────────────────── */
.infl-process__platform-ui {
  width: 100%;
  margin-top: auto;
  perspective: 600px;
}

.infl-process__ui-card {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 10px;
  padding: 8px 7px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.infl-process__platform-card:hover .infl-process__ui-card {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  border-color: rgba(245, 93, 45, 0.18);
}

/* ═══════════════════════════════════════════════════════
   1) INSTAGRAM — Story Rings + Like Counter
   ═══════════════════════════════════════════════════════ */
.infl-ui-story-row {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-bottom: 4px;
}

.infl-ui-story-ring {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #D1D5DB;
  background: #F3F4F6;
  transition: transform 0.3s ease;
}

.infl-ui-story-ring--active {
  border-color: transparent;
  background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  animation: storyPulse 2s infinite ease-in-out;
}

@keyframes storyPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(220, 39, 67, 0);
  }

  50% {
    box-shadow: 0 0 0 3px rgba(220, 39, 67, 0.25);
  }
}

.infl-process__platform-card:hover .infl-ui-story-ring--active {
  animation: storyPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes storyPop {
  to {
    transform: scale(1.18);
  }
}

.infl-ui-insta-post {
  width: 100%;
  height: 28px;
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}

.infl-ui-insta-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.35) 0%, transparent 60%);
}

.infl-ui-insta-actions {
  position: absolute;
  bottom: 3px;
  right: 5px;
  display: flex;
  align-items: center;
  gap: 2px;
}

.infl-ui-heart-icon {
  font-size: 8px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: heartPulse 2.5s infinite ease-in-out;
}

.infl-process__platform-card:hover .infl-ui-heart-icon {
  animation: heartPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite alternate;
}

@keyframes heartPulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.18);
  }
}

@keyframes heartPop {
  0% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1.45);
  }
}

.infl-ui-like-count {
  font-size: 7px;
  font-weight: 700;
  color: #FFFFFF;
  font-family: var(--font-secondary);
}

/* ═══════════════════════════════════════════════════════
   2) YOUTUBE — Thumbnail + Progress Bar
   ═══════════════════════════════════════════════════════ */
.infl-process__ui-card--yt {
  padding: 6px 6px 8px;
}

.infl-ui-yt-thumb {
  width: 100%;
  height: 32px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 6px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.infl-ui-yt-play-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: ytPlayPulse 2s infinite ease-in-out;
}

@keyframes ytPlayPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
  }

  50% {
    box-shadow: 0 0 0 4px rgba(255, 0, 0, 0.25);
  }
}

.infl-process__platform-card:hover .infl-ui-yt-play-btn {
  transform: scale(1.2);
  animation: none;
  box-shadow: 0 0 0 5px rgba(255, 0, 0, 0.3);
}

.infl-ui-yt-duration {
  position: absolute;
  bottom: 3px;
  right: 4px;
  font-size: 7px;
  font-weight: 700;
  color: #FFFFFF;
  font-family: var(--font-secondary);
  background: rgba(0, 0, 0, 0.7);
  padding: 1px 3px;
  border-radius: 3px;
}

.infl-ui-yt-progress-wrap {
  width: 100%;
  padding: 0 2px;
}

.infl-ui-yt-progress-bar {
  height: 3px;
  width: 100%;
  background: #E5E7EB;
  border-radius: 2px;
  position: relative;
  overflow: visible;
}

.infl-ui-yt-progress-fill {
  height: 100%;
  width: 38%;
  background: #FF0000;
  border-radius: 2px;
  transition: width 0.5s ease;
  animation: ytFillLoop 3s infinite ease-in-out;
}

@keyframes ytFillLoop {
  0% {
    width: 20%;
  }

  50% {
    width: 60%;
  }

  100% {
    width: 20%;
  }
}

.infl-process__platform-card:hover .infl-ui-yt-progress-fill {
  width: 85%;
  animation: none;
}

.infl-ui-yt-progress-dot {
  position: absolute;
  top: 50%;
  left: 38%;
  transform: translate(-50%, -50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FF0000;
  transition: left 0.5s ease;
}

.infl-process__platform-card:hover .infl-ui-yt-progress-dot {
  left: 85%;
}

/* ═══════════════════════════════════════════════════════
   3) TIKTOK — Video Screen + Floating Music Notes
   ═══════════════════════════════════════════════════════ */
.infl-process__ui-card--tiktok {
  padding: 6px;
  gap: 4px;
}

.infl-ui-tiktok-screen {
  width: 100%;
  height: 38px;
  background: linear-gradient(160deg, #1a1a1a 0%, #2d2d2d 100%);
  border-radius: 7px;
  position: relative;
  overflow: hidden;
}

.infl-ui-tiktok-note {
  position: absolute;
  font-size: 9px;
  color: #FFFFFF;
  animation: noteFloat 2.5s infinite ease-in-out;
  opacity: 0.85;
}

.infl-ui-tiktok-note--1 {
  top: 6px;
  left: 6px;
  animation-delay: 0s;
}

.infl-ui-tiktok-note--2 {
  top: 14px;
  left: 14px;
  animation-delay: 0.6s;
  font-size: 7px;
}

@keyframes noteFloat {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.8;
  }

  50% {
    transform: translate(4px, -6px) scale(1.1);
    opacity: 1;
  }

  100% {
    transform: translate(8px, -12px) scale(0.8);
    opacity: 0;
  }
}

.infl-process__platform-card:hover .infl-ui-tiktok-note {
  animation-duration: 1s;
}

.infl-ui-tiktok-sidebar {
  position: absolute;
  right: 4px;
  bottom: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.infl-ui-tiktok-heart,
.infl-ui-tiktok-comment {
  font-size: 8px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.infl-process__platform-card:hover .infl-ui-tiktok-heart {
  animation: heartPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite alternate;
}

.infl-ui-tiktok-bar {
  height: 3px;
  width: 100%;
  background: #E5E7EB;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.infl-ui-tiktok-bar::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 50%;
  background: linear-gradient(90deg, #69C9D0, #EE1D52);
  border-radius: 2px;
  animation: tiktokBar 2s infinite alternate ease-in-out;
}

@keyframes tiktokBar {
  0% {
    width: 20%;
  }

  100% {
    width: 80%;
  }
}

.infl-process__platform-card:hover .infl-ui-tiktok-bar::after {
  animation-duration: 0.5s;
}

/* ═══════════════════════════════════════════════════════
   4) FACEBOOK — Post Header + Emoji Reactions
   ═══════════════════════════════════════════════════════ */
.infl-process__ui-card--fb {
  padding: 7px 6px;
  gap: 5px;
}

.infl-ui-fb-header {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
}

.infl-ui-fb-avatar {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #1877F2;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.infl-process__platform-card:hover .infl-ui-fb-avatar {
  transform: scale(1.2);
  background: #F55D2D;
}

.infl-ui-fb-meta {
  flex: 1;
}

.infl-ui-fb-name {
  height: 3px;
  width: 70%;
  background: #E5E7EB;
  border-radius: 2px;
  animation: lineShimmer 2.5s infinite linear;
  background-size: 200% 100%;
}

.infl-ui-fb-reactions {
  display: flex;
  gap: 2px;
  justify-content: center;
}

.infl-ui-fb-react {
  font-size: 10px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: fbReactPulse 3s infinite ease-in-out;
}

.infl-ui-fb-react--heart {
  animation-delay: 0.4s;
}

.infl-ui-fb-react--wow {
  animation-delay: 0.8s;
}

@keyframes fbReactPulse {

  0%,
  90%,
  100% {
    transform: scale(1);
  }

  95% {
    transform: scale(1.3);
  }
}

.infl-process__platform-card:hover .infl-ui-fb-react {
  animation: fbReactBounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite alternate;
}

.infl-process__platform-card:hover .infl-ui-fb-react--heart {
  animation-delay: 0.1s;
}

.infl-process__platform-card:hover .infl-ui-fb-react--wow {
  animation-delay: 0.2s;
}

@keyframes fbReactBounce {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.4) translateY(-2px);
  }
}

/* ═══════════════════════════════════════════════════════
   5) LINKEDIN — Post Banner + Lines + Connect Button
   ═══════════════════════════════════════════════════════ */
.infl-process__ui-card--li {
  padding: 6px;
  gap: 4px;
}

.infl-ui-li-banner {
  width: 100%;
  height: 14px;
  border-radius: 5px;
  background: linear-gradient(90deg, #0A66C2 0%, #0077B5 100%);
  transition: transform 0.3s ease, filter 0.3s ease;
}

.infl-process__platform-card:hover .infl-ui-li-banner {
  transform: scaleX(1.03);
  filter: brightness(1.1);
}

.infl-ui-li-lines {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
}

.infl-ui-li-line {
  height: 3px;
  border-radius: 2px;
  background: #E5E7EB;
  animation: lineShimmer 2.5s infinite linear;
  background-size: 200% 100%;
}

.infl-ui-li-line--wide {
  width: 100%;
}

.infl-ui-li-line--medium {
  width: 70%;
}

.infl-process__platform-card:hover .infl-ui-li-line {
  background: linear-gradient(90deg, #C5DEFF 0%, #0A66C2 50%, #C5DEFF 100%);
  background-size: 200% 100%;
}

.infl-ui-li-cta {
  font-size: 7px;
  font-weight: 700;
  color: #0A66C2;
  border: 1px solid #0A66C2;
  border-radius: 20px;
  padding: 2px 7px;
  font-family: var(--font-secondary);
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.infl-process__platform-card:hover .infl-ui-li-cta {
  background: #0A66C2;
  color: #FFFFFF;
  transform: scale(1.05);
}

/* ═══════════════════════════════════════════════════════
   6) X (TWITTER) — Tweet Card + Retweet / Like
   ═══════════════════════════════════════════════════════ */
.infl-process__ui-card--x {
  padding: 7px 6px;
  gap: 5px;
}

.infl-ui-x-tweet {
  display: flex;
  gap: 4px;
  align-items: flex-start;
  width: 100%;
}

.infl-ui-x-avatar {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #000000;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.infl-process__platform-card:hover .infl-ui-x-avatar {
  transform: scale(1.2);
  background: #F55D2D;
}

.infl-ui-x-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.infl-ui-x-line {
  height: 3px;
  border-radius: 2px;
  background: #E5E7EB;
  animation: lineShimmer 2s infinite linear;
  background-size: 200% 100%;
}

.infl-ui-x-line--wide {
  width: 100%;
}

.infl-ui-x-line--short {
  width: 60%;
}

.infl-process__platform-card:hover .infl-ui-x-line {
  background: linear-gradient(90deg, #D0D0D0 0%, #000000 50%, #D0D0D0 100%);
  background-size: 200% 100%;
}

.infl-ui-x-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  width: 100%;
}

.infl-ui-x-action {
  font-size: 9px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.infl-process__platform-card:hover .infl-ui-x-action {
  animation: xActionBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite alternate;
}

.infl-process__platform-card:hover .infl-ui-x-action:last-child {
  animation-delay: 0.15s;
}

@keyframes xActionBounce {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.35) translateY(-1px);
  }
}

/* ─── Shared Shimmer Keyframe ───────────────────────── */
@keyframes lineShimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* Bottom CTA Ribbon */
.infl-process__cta-ribbon {
  background: #FFF5F0;
  border: 1px solid rgba(245, 93, 45, 0.15);
  border-radius: 14px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.infl-process__cta-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.infl-process__cta-plane-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #F55D2D;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(245, 93, 45, 0.25);
}

.infl-process__cta-text {
  font-family: var(--font-secondary);
  font-size: 12.5px;
  font-weight: 600;
  color: #111111;
  margin: 0;
}

.infl-process__cta-btn {
  padding: 10px 20px;
  font-size: 12.5px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* Responsive */
@media (max-width: 1024px) {
  .infl-process__top-row {
    grid-template-columns: 1fr;
  }

  .infl-process__pg-main {
    grid-template-columns: 1fr;
  }

  .infl-process__platforms-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .infl-process__stepper {
    flex-direction: column;
    gap: 20px;
  }

  .infl-process__step-arrow {
    display: none;
  }

  .infl-process__timeline-bar {
    display: none;
  }

  .infl-process__platforms-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .infl-process__cta-ribbon {
    flex-direction: column;
    text-align: center;
  }
}

/* --- End: pages/influencer-marketing.css --- */

/* --- Start: pages/influencer-marketing.css --- */

/* --- End: pages/influencer-marketing.css --- */

/* --- Start: pages/influencer-marketing.css --- */

/* --- End: pages/influencer-marketing.css --- */
/* --- Start: pages/staffing.css --- */
/* ── Industry Solutions Grid ── */
.industry-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-24);
}

@media (min-width: 768px) {
  .industry-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.industry-card {
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-32) var(--space-24);
  text-align: center;
  transition: border-color var(--transition-normal), transform var(--transition-normal), box-shadow var(--transition-normal);
  box-shadow: var(--shadow-xs);
}

.industry-card:hover {
  border-color: rgba(245, 93, 45, 0.15);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.industry-card__icon {
  font-size: 2.25rem;
  margin-bottom: var(--space-16);
  display: inline-block;
  transition: transform var(--transition-normal);
}

.industry-card:hover .industry-card__icon {
  transform: scale(1.1);
}

.industry-card__title {
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

/* --- End: pages/staffing.css --- */

/* --- Start: pages/product.css --- */
/* ── Product Dashboard Mockup ── */
.product-dashboard-container {
  position: relative;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl), 0 20px 40px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background-color: #0b0b0e;
  font-family: var(--font-secondary);
  transition: all var(--transition-normal);
}

.dashboard-mockup {
  display: flex;
  flex-direction: column;
  height: 520px;
  color: #f3f3f3;
}

.dashboard-mockup__window-bar {
  display: flex;
  align-items: center;
  padding: var(--space-12) var(--space-16);
  background-color: #050507;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.dashboard-mockup__dots {
  display: flex;
  gap: 6px;
  margin-right: var(--space-16);
}

.dashboard-mockup__dots .dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  display: inline-block;
}

.dashboard-mockup__dots .dot.red {
  background-color: #ff5f56;
}

.dashboard-mockup__dots .dot.yellow {
  background-color: #ffbd2e;
}

.dashboard-mockup__dots .dot.green {
  background-color: #27c93f;
}

.dashboard-mockup__title {
  font-size: 0.72rem;
  color: #8a8a93;
  letter-spacing: 0.5px;
  margin-left: auto;
  margin-right: auto;
  font-family: var(--font-secondary);
}

.dashboard-mockup__layout {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Sidebar */
.dashboard-mockup__sidebar {
  width: 190px;
  background-color: #050507;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  padding: var(--space-16) 0;
  transition: width 0.3s var(--ease-premium);
  flex-shrink: 0;
}

.sidebar__brand {
  display: flex;
  align-items: center;
  padding: 0 var(--space-16) var(--space-16) var(--space-16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: var(--space-12);
}

.sidebar__brand-logo {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  background-color: #e53e3e;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  margin-right: var(--space-12);
  box-shadow: 0 0 10px rgba(229, 62, 62, 0.4);
}

.sidebar__brand-info {
  display: flex;
  flex-direction: column;
}

.sidebar__brand-name {
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  color: #fff;
  line-height: 1.1;
}

.sidebar__brand-role {
  font-size: 0.62rem;
  color: #8a8a93;
  margin-top: 1px;
}

.sidebar__nav {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--space-8);
}

.sidebar__nav-header {
  font-size: 0.62rem;
  font-weight: 700;
  color: #4a4a4f;
  padding: var(--space-8) var(--space-12);
  display: block;
  letter-spacing: 1px;
}

.sidebar__nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar__nav-item {
  display: flex;
  align-items: center;
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-sm);
  color: #8a8a93;
  cursor: pointer;
  font-size: 0.78rem;
  margin-bottom: 2px;
  transition: all 0.2s ease;
}

.sidebar__nav-item:hover {
  background-color: rgba(255, 255, 255, 0.04);
  color: #fff;
}

.sidebar__nav-item.active {
  background-color: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-weight: 500;
}

.sidebar__nav-icon {
  margin-right: var(--space-12);
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
}

.sidebar__nav-text {
  flex: 1;
}

.sidebar__nav-arrow {
  font-size: 0.58rem;
  opacity: 0.4;
}

.sidebar__footer {
  display: flex;
  justify-content: space-between;
  padding: var(--space-8) var(--space-16) 0 var(--space-16);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.sidebar__footer-icon {
  color: #8a8a93;
  cursor: pointer;
  font-size: 0.85rem;
  transition: color 0.2s;
}

.sidebar__footer-icon:hover {
  color: #fff;
}

/* Main Dashboard Panel */
.dashboard-mockup__main {
  flex: 1;
  background-color: #0b0b0e;
  padding: var(--space-16);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.dashboard-tab-content {
  display: none;
  flex-direction: column;
  gap: var(--space-12);
  height: 100%;
}

.dashboard-tab-content.active {
  display: flex;
}

.dashboard-tab-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: var(--space-8);
}

.dashboard-tab-header__title h2 {
  font-size: 1.15rem;
  margin: 0;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.2px;
}

.dashboard-tab-header__title p {
  font-size: 0.7rem;
  color: #8a8a93;
  margin: 1px 0 0 0;
}

.dashboard-select {
  background-color: #121216;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  padding: 4px 8px;
  font-size: 0.7rem;
  border-radius: var(--radius-xs);
  cursor: pointer;
}

/* Metrics Cards */
.dashboard-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
}

.dashboard-metric-card {
  background-color: #121216;
  border: 1px solid rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-sm);
  padding: var(--space-10) var(--space-12);
  display: flex;
  align-items: center;
  gap: var(--space-10);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s;
}

.dashboard-metric-card:hover {
  transform: translateY(-2px);
}

.dashboard-metric-card__icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}

.dashboard-metric-card__info {
  display: flex;
  flex-direction: column;
}

.dashboard-metric-card__value {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
}

.dashboard-metric-card__label {
  font-size: 0.58rem;
  color: #8a8a93;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 1px;
}

/* Borders & BG Accent variants */
.border-red {
  border-left: 3px solid #ff4d4d;
}

.bg-red {
  background-color: rgba(255, 77, 77, 0.15);
  color: #ff4d4d;
}

.border-green {
  border-left: 3px solid #00c853;
}

.bg-green {
  background-color: rgba(0, 200, 83, 0.15);
  color: #00c853;
}

.border-yellow {
  border-left: 3px solid #ffd600;
}

.bg-yellow {
  background-color: rgba(255, 214, 0, 0.15);
  color: #ffd600;
}

.border-red-mute {
  border-left: 3px solid #e53e3e;
  opacity: 0.7;
}

.bg-red-mute {
  background-color: rgba(229, 62, 62, 0.1);
  color: #e53e3e;
}

.border-blue {
  border-left: 3px solid #33b5e5;
}

.bg-blue {
  background-color: rgba(51, 181, 229, 0.15);
  color: #33b5e5;
}

.border-purple {
  border-left: 3px solid #aa66cc;
}

.bg-purple {
  background-color: rgba(170, 102, 204, 0.15);
  color: #aa66cc;
}

.border-orange {
  border-left: 3px solid #ffbb33;
}

.bg-orange {
  background-color: rgba(255, 187, 51, 0.15);
  color: #ffbb33;
}

/* Table Cards */
.dashboard-table-card {
  background-color: #121216;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.dashboard-table-card__header {
  padding: var(--space-10) var(--space-12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background-color: rgba(255, 255, 255, 0.01);
}

.dashboard-table-card__header h3 {
  font-size: 0.78rem;
  margin: 0;
  color: #fff;
  font-weight: 600;
}

.dashboard-table-wrapper {
  overflow-x: auto;
}

.dashboard-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.72rem;
  white-space: nowrap;
}

.dashboard-table th {
  padding: var(--space-10) var(--space-12);
  color: #8a8a93;
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  text-transform: uppercase;
  font-size: 0.6rem;
  letter-spacing: 0.3px;
}

.dashboard-table td {
  padding: var(--space-10) var(--space-12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  color: #d1d1d6;
}

.dashboard-table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.01);
}

.font-code {
  font-family: monospace;
  color: #b0b0b8;
}

.badge {
  display: inline-block;
  padding: 2px 6px;
  font-size: 0.6rem;
  font-weight: 600;
  border-radius: var(--radius-full);
}

.badge--success {
  background-color: rgba(0, 200, 83, 0.12);
  color: #00c853;
  border: 1px solid rgba(0, 200, 83, 0.18);
}

.badge--warning {
  background-color: rgba(255, 214, 0, 0.08);
  color: #ffd600;
  border: 1px solid rgba(255, 214, 0, 0.12);
}

.action-buttons {
  display: flex;
  gap: var(--space-4);
}

.action-btn {
  background-color: rgba(255, 255, 255, 0.04);
  border: none;
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.65rem;
  transition: background-color 0.2s;
}

.action-btn:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

.action-btn--danger:hover {
  background-color: rgba(229, 62, 62, 0.7);
}

/* Charts Card */
.dashboard-charts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-12);
}

.dashboard-chart-card {
  background-color: #121216;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm);
  padding: var(--space-12);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.dashboard-chart-card h3 {
  font-size: 0.78rem;
  margin: 0 0 var(--space-8) 0;
  color: #fff;
  font-weight: 600;
}

.chart-container {
  position: relative;
  width: 100%;
  height: 110px;
}

.chart-svg {
  width: 100%;
  height: 100%;
}

.chart-labels text {
  fill: #8a8a93;
  font-size: 7px;
  text-anchor: middle;
}

/* Wallet Card Styles */
.dashboard-wallet-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-12);
}

.dashboard-wallet-card {
  background-color: #121216;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm);
  padding: var(--space-12) var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.wallet-label {
  font-size: 0.65rem;
  color: #8a8a93;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.wallet-amount-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wallet-amount {
  font-size: 1.45rem;
  font-weight: 700;
  color: #fff;
}

.btn-withdraw {
  background-color: #2e7d32;
  color: #fff;
  border: none;
  padding: 5px 10px;
  border-radius: var(--radius-xs);
  font-size: 0.65rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-withdraw:hover {
  background-color: #388e3c;
}

.kyc-status-card {
  background-color: #121216;
  border-left: 4px solid #f57c00;
  border-radius: var(--radius-sm);
  padding: var(--space-12) var(--space-16);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.kyc-status-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-6);
}

.kyc-status-header h3 {
  font-size: 0.78rem;
  margin: 0;
  color: #fff;
}

.kyc-badge {
  font-size: 0.58rem;
  font-weight: 600;
  padding: 3px 6px;
  border-radius: var(--radius-xs);
}

.kyc-badge--pending {
  background-color: rgba(245, 124, 0, 0.12);
  color: #ffb74d;
  border: 1px solid rgba(245, 124, 0, 0.18);
}

.kyc-status-card p {
  font-size: 0.7rem;
  color: #8a8a93;
  margin: 0;
  line-height: 1.3;
}

.details-form-card {
  background-color: #121216;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm);
  padding: var(--space-12) var(--space-16);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.details-form-card h3 {
  font-size: 0.78rem;
  margin: 0 0 var(--space-12) 0;
  color: #fff;
  font-weight: 600;
}

.details-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-12);
}

.form-group-mock {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-group-mock label {
  font-size: 0.6rem;
  color: #8a8a93;
  text-transform: uppercase;
}

.form-group-mock input {
  background-color: #0b0b0e;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-xs);
  padding: 6px 10px;
  color: #d1d1d6;
  font-size: 0.7rem;
  font-family: monospace;
}

/* ── Product Features Grid ── */
.product-features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
}

@media (min-width: 992px) {
  .product-features-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .product-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.product-feature-card {
  padding: var(--space-32);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-white);
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.product-feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(245, 93, 45, 0.15);
  box-shadow: var(--shadow-md);
}

.product-feature-card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-24);
  font-size: 1.125rem;
  transition: all var(--transition-normal);
}

.product-feature-card:hover .product-feature-card__icon {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

/* Responsive Dashboard Styles */
@media (max-width: 991px) {
  .dashboard-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .dashboard-mockup__sidebar {
    width: 50px;
  }

  .sidebar__brand-logo {
    margin-right: 0;
  }

  .sidebar__brand-info,
  .sidebar__nav-header,
  .sidebar__nav-text,
  .sidebar__nav-arrow,
  .sidebar__footer {
    display: none;
  }

  .sidebar__brand {
    padding: 0;
    justify-content: center;
    border-bottom: none;
    margin-bottom: var(--space-8);
  }

  .sidebar__nav {
    padding: 0 var(--space-4);
  }

  .sidebar__nav-item {
    justify-content: center;
    padding: var(--space-10) 0;
  }

  .sidebar__nav-icon {
    margin-right: 0;
    font-size: 1.05rem;
  }

  .dashboard-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard-charts-grid,
  .dashboard-wallet-grid,
  .details-form-grid {
    grid-template-columns: 1fr;
  }
}

/* --- End: pages/product.css --- */

/* --- Start: pages/careers.css --- */
/* ── Careers Filtering ── */
.careers-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-bottom: var(--space-48);
  justify-content: center;
}

.careers-filter__btn {
  padding: 10px 20px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border-hover);
  background: var(--color-bg-white);
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.careers-filter__btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background-color: var(--color-primary-light);
}

.careers-filter__btn--active {
  border-color: var(--color-primary) !important;
  background-color: var(--color-primary) !important;
  color: var(--color-text-inverse) !important;
  box-shadow: var(--shadow-primary);
}

/* ── Job Card ── */
.job-card {
  background-color: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-32);
  margin-bottom: var(--space-20);
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
  box-shadow: var(--shadow-xs);
}

@media (min-width: 768px) {
  .job-card {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.job-card:hover {
  transform: translateY(-3px);
  border-color: rgba(245, 93, 45, 0.15);
  box-shadow: var(--shadow-md);
}

.job-card__main h3 {
  font-family: var(--font-primary);
  margin-bottom: var(--space-8);
  font-size: 1.25rem;
  color: var(--color-text-primary);
}

.job-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
}

.job-card__meta-item {
  font-family: var(--font-secondary);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.job-card__meta-item svg {
  color: var(--color-primary);
  opacity: 0.8;
}

/* --- End: pages/careers.css --- */

/* --- Start: pages/contact.css --- */
/* ── Contact Layout Grid ── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-48);
}

@media (min-width: 1024px) {
  .contact-grid {
    grid-template-columns: 1.5fr 1fr;
    gap: var(--space-64);
  }
}

.contact-info-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}

.contact-block h3 {
  font-family: var(--font-primary);
  margin-bottom: var(--space-16);
  font-size: 1.25rem;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.contact-detail-item {
  display: flex;
  gap: var(--space-16);
  align-items: flex-start;
  padding: var(--space-16);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-light);
  border: 1px solid var(--color-border);
  transition: all var(--transition-normal);
}

.contact-detail-item:hover {
  background-color: var(--color-bg-white);
  border-color: rgba(245, 93, 45, 0.15);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.contact-detail-item__icon {
  color: var(--color-primary);
  flex-shrink: 0;
  margin-top: 2px;
}

.contact-detail-item__content h4 {
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.contact-detail-item__content p {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* ── Contact Map Canvas ── */
.contact-map {
  width: 100%;
  height: 320px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  position: relative;
  box-shadow: var(--shadow-xs);
}

.contact-map iframe {
  width: 100%;
  height: 100%;
  border: none;
  filter: grayscale(1) contrast(1.1) invert(0);
}

/* ── HUD Terminal Status ── */
.hud-panel {
  position: relative;
  background: rgba(17, 17, 17, 0.95);
  border: 1px solid rgba(245, 93, 45, 0.25);
  border-radius: var(--radius-sm);
  padding: var(--space-20);
  box-shadow: 0 8px 32px rgba(245, 93, 45, 0.08);
  font-family: monospace;
  overflow: hidden;
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
  margin-bottom: var(--space-32);
}

.hud-panel:hover {
  border-color: rgba(245, 93, 45, 0.6);
  box-shadow: 0 8px 32px rgba(245, 93, 45, 0.15);
}

.hud-corners .hud-corner {
  position: absolute;
  width: 8px;
  height: 8px;
  border-color: var(--color-primary);
  border-style: solid;
  opacity: 0.8;
}

.hud-corner.top-left {
  top: 6px;
  left: 6px;
  border-width: 1.5px 0 0 1.5px;
}

.hud-corner.top-right {
  top: 6px;
  right: 6px;
  border-width: 1.5px 1.5px 0 0;
}

.hud-corner.bottom-left {
  bottom: 6px;
  left: 6px;
  border-width: 0 0 1.5px 1.5px;
}

.hud-corner.bottom-right {
  bottom: 6px;
  right: 6px;
  border-width: 0 1.5px 1.5px 0;
}

.ae-rec-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: var(--color-primary);
  border-radius: 50%;
  margin-right: 6px;
  animation: recPulse 1.5s infinite alternate;
}

@keyframes recPulse {
  0% {
    opacity: 0.3;
  }

  100% {
    opacity: 1;
  }
}

/* ── Interactive Inquiry Selector ── */
.interactive-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-12);
  margin-bottom: var(--space-24);
}

.service-card-btn {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-16) var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  cursor: pointer;
  transition: all var(--transition-normal);
  text-align: center;
  user-select: none;
}

.service-card-btn:hover {
  border-color: rgba(245, 93, 45, 0.3);
  background-color: var(--color-primary-light);
  transform: translateY(-2px);
}

.service-card-btn--active {
  border-color: var(--color-primary) !important;
  background-color: rgba(245, 93, 45, 0.08) !important;
  box-shadow: 0 4px 12px rgba(245, 93, 45, 0.05);
}

.service-card-btn__icon {
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

.service-card-btn--active .service-card-btn__icon {
  color: var(--color-primary);
}

.service-card-btn__label {
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-dark);
}

/* ── HUD Budget Slider ── */
.budget-slider-container {
  background-color: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-20);
  margin-bottom: var(--space-24);
}

.budget-slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-12);
}

.budget-slider-title {
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.budget-estimate-badge {
  font-family: monospace;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-primary);
  background: rgba(245, 93, 45, 0.08);
  padding: 4px var(--space-12);
  border-radius: var(--radius-full);
  border: 1px solid rgba(245, 93, 45, 0.15);
}

/* Custom Input Range Styling */
.budget-range-input {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  outline: none;
  margin: var(--space-12) 0;
}

.budget-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  border: 2px solid var(--color-bg-white);
  box-shadow: 0 0 10px rgba(245, 93, 45, 0.4);
  transition: transform var(--transition-fast);
}

.budget-range-input::-webkit-slider-thumb:hover {
  transform: scale(1.25);
}

.budget-range-labels {
  display: flex;
  justify-content: space-between;
  padding: 0 4px;
}

.budget-range-labels span {
  font-family: monospace;
  font-size: 0.6875rem;
  color: var(--color-text-muted);
}

/* --- End: pages/contact.css --- */

/* ── Global Hover Background Gradient Isolation & Anti-Overlapping Layering ── */

/* 1. Isolate card stacking contexts so hover gradients & radial spotlights do not bleed into neighboring elements */
.card,
.card-3d,
.card-showcase,
.card-testimonial,
.card-flip,
.bento-card,
.bento-v2-card,
.stat-card,
.process-step-card,
.process-step,
.value-card,
.metric-clean-card,
.perf-card,
.seo-results__card,
.infl-process__platform-card,
.software-core-card,
.feature-card,
.service-card,
.blog-card,
.pricing-card,
.service-hero,
.hero,
.cta {
  isolation: isolate;
  position: relative;
}

/* 2. Enforce that card hover pseudo-elements (gradients, glows, spotlight backgrounds) stay strictly behind card content */
.card::before,
.card::after,
.card-3d::before,
.card-3d::after,
.card-showcase::before,
.card-showcase::after,
.card-testimonial::before,
.card-testimonial::after,
.bento-card::before,
.bento-card::after,
.bento-v2-card::before,
.bento-v2-card::after,
.stat-card::before,
.stat-card::after,
.process-step-card::before,
.process-step-card::after,
.process-step::before,
.process-step::after,
.value-card::before,
.value-card::after,
.metric-clean-card::before,
.metric-clean-card::after,
.perf-card::before,
.perf-card::after,
.seo-results__card::before,
.seo-results__card::after,
.infl-process__platform-card::before,
.infl-process__platform-card::after,
.software-core-card::before,
.software-core-card::after,
.feature-card::before,
.feature-card::after,
.service-card::before,
.service-card::after,
.blog-card::before,
.blog-card::after {
  z-index: 0 !important;
  pointer-events: none !important;
}

/* 3. Elevate all inner card content (text, icons, images, animations) above background hover gradients */
.card>*,
.card-3d>*,
.card-showcase>*,
.card-testimonial>*,
.bento-card>*,
.bento-v2-card>*,
.stat-card>*,
.process-step-card>*,
.process-step>*,
.value-card>*,
.metric-clean-card>*,
.perf-card>*,
.seo-results__card>*,
.infl-process__platform-card>*,
.software-core-card>*,
.feature-card>*,
.service-card>*,
.blog-card>* {
  position: relative;
  z-index: 2;
}

/* 4. Prevent background radial glows & mouse spotlight overlays from trapping pointer events or obscuring text */
.hero__glow,
.cta__glow,
.avatar-sphere__glow,
.orbital-core-glow,
.orbital-info-panel-glow,
.cursor-glow,
.ae-grid-overlay {
  pointer-events: none !important;
  z-index: 0;
}

/* 5. Ensure heading & section decorative corner accents never block mouse hover or cover title text */
h1::before,
h1::after,
h2::before,
h2::after,
.h1::before,
.h1::after,
.h2::before,
.h2::after,
section::before,
section::after {
  pointer-events: none !important;
}


/* ---------------------------------------------------------------------------------------------------------------
  Index page CTA Section v2
   --------------------------------------------------------------------------------------------------------------- */

/* Outer section — just adds vertical rhythm */
.leadgen-cta {
  position: relative;
  overflow: hidden;
  padding: 60px 0 72px;
  background: var(--color-bg-light);
}

/* The rounded gradient card that wraps everything */
.leadgen-cta__container {
  position: relative;
  background: linear-gradient(120deg, #F55D2D 0%, #FF8C42 38%, #FFB97A 65%, #FFE3C8 100%);
  padding: 52px 52px 52px 52px;
  border-radius: 28px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 44px;
  overflow: hidden;
  min-height: 380px;
}

/* Subtle wave / arc decoration on the left */
.leadgen-cta__container::before {
  content: '';
  position: absolute;
  bottom: -60px;
  left: -60px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  border: 48px solid rgba(255, 255, 255, 0.10);
  pointer-events: none;
}



/* Dot pattern on the right-hand side only */
.leadgen-cta__dots {
  position: absolute;
  top: 0;
  right: 0;
  width: 55%;
  height: 100%;
  background-image: radial-gradient(circle, rgba(255, 120, 40, 0.18) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
  z-index: 0;
  border-radius: 0 28px 28px 0;
}

/* ── Left Column ── */
.leadgen-cta__left {
  flex: 0 0 460px;
  max-width: 480px;
  position: relative;
  z-index: 2;
}

.leadgen-cta__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 9999px;
  padding: 6px 14px;
  font-family: var(--font-secondary);
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 22px;
  backdrop-filter: blur(6px);
}

.leadgen-cta__title {
  font-family: var(--font-primary);
  font-size: clamp(2rem, 3.8vw, 2.85rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.13;
  margin-bottom: 18px;
}

.leadgen-cta__title--accent {
  color: #3D1500;
}

.leadgen-cta__desc {
  font-family: var(--font-secondary);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.90);
  line-height: 1.65;
  margin-bottom: 30px;
  max-width: 320px;
}

/* Buttons row */
.leadgen-cta__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.leadgen-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 20px;
  border-radius: 10px;
  font-family: var(--font-secondary);
  font-size: 0.855rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 200ms var(--ease-premium), box-shadow 200ms var(--ease-premium);
  cursor: pointer;
  white-space: nowrap;
}

.leadgen-btn--primary {
  background: #fff;
  color: #F55D2D;
  border: 2px solid transparent;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.leadgen-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.leadgen-btn--outline {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(4px);
}

.leadgen-btn--outline:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.90);
  transform: translateY(-2px);
}

/* ── Right Column ── */
.leadgen-cta__right {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  z-index: 2;
}

/* ── Feature icons card ── */
.leadgen-cta__features {
  display: flex;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.88);
  border-radius: 18px;
  padding: 26px 22px;
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.70);
  box-shadow: 0 4px 24px rgba(180, 60, 0, 0.08);
}

.leadgen-feature {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 10px;
}

.leadgen-feature__icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(245, 93, 45, 0.10);
  border: 1px solid rgba(245, 93, 45, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  color: #F55D2D;
  transition: background 200ms, transform 200ms;
}

.leadgen-feature:hover .leadgen-feature__icon {
  background: rgba(245, 93, 45, 0.18);
  transform: translateY(-2px);
}

.leadgen-feature__title {
  font-family: var(--font-secondary);
  font-size: 0.8rem;
  font-weight: 700;
  color: #111;
  margin: 0 0 5px 0;
  line-height: 1.2;
}

.leadgen-feature__desc {
  font-family: var(--font-secondary);
  font-size: 0.71rem;
  color: #6B7280;
  margin: 0;
  line-height: 1.45;
}

.leadgen-feature__divider {
  width: 1px;
  height: 60px;
  background: rgba(17, 17, 17, 0.08);
  align-self: center;
  flex: 0 0 auto;
}

/* ── Social proof strip ── */
.leadgen-cta__social-proof {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255, 255, 255, 0.88);
  border-radius: 16px;
  padding: 16px 20px;
  border: 1px solid rgba(255, 255, 255, 0.70);
  backdrop-filter: blur(16px);
  box-shadow: 0 4px 24px rgba(180, 60, 0, 0.08);
}

/* Flag row */
.leadgen-avatars {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 0;
}

.leadgen-flag-wrap {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #fff;
  overflow: hidden;
  margin-left: -8px;
  flex: 0 0 36px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  background: #eee;
}

.leadgen-flag-wrap:first-child {
  margin-left: 0;
}

.leadgen-flag {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.leadgen-flag-more {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #F55D2D;
  color: #fff;
  font-family: var(--font-secondary);
  font-size: 0.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -8px;
  flex: 0 0 36px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  letter-spacing: -0.01em;
}

/* Text */
.leadgen-social-proof__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.leadgen-social-proof__text strong {
  font-family: var(--font-secondary);
  font-size: 0.84rem;
  font-weight: 700;
  color: #111;
}

.leadgen-social-proof__text span {
  font-family: var(--font-secondary);
  font-size: 0.74rem;
  color: #6B7280;
  line-height: 1.4;
}

/* Arrow CTA button */
.leadgen-social-proof__arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #F55D2D;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  text-decoration: none;
  transition: transform 200ms var(--ease-premium), box-shadow 200ms var(--ease-premium);
  box-shadow: 0 4px 12px rgba(245, 93, 45, 0.30);
}

.leadgen-social-proof__arrow:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(245, 93, 45, 0.45);
}

/* ── Responsive ── */
@media (max-width: 1050px) {
  .leadgen-cta__container {
    gap: 28px;
    padding: 40px 36px;
  }

  .leadgen-cta__left {
    flex: 0 0 300px;
    max-width: 320px;
  }
}

@media (max-width: 860px) {
  .leadgen-cta__container {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    min-height: unset;
  }

  .leadgen-cta__left {
    flex: none;
    max-width: 100%;
  }

  .leadgen-cta__right {
    width: 100%;
  }

  .leadgen-cta__dots {
    width: 100%;
    border-radius: 0 0 28px 28px;
    top: 50%;
    height: 50%;
  }
}

@media (max-width: 600px) {
  .leadgen-cta {
    padding: 40px 0 56px;
  }

  .leadgen-cta__container {
    padding: 32px 24px;
    border-radius: 20px;
  }

  .leadgen-cta__title {
    font-size: 1.85rem;
  }

  .leadgen-cta__features {
    flex-wrap: wrap;
    gap: 16px;
    padding: 20px 16px;
  }

  .leadgen-feature__divider {
    display: none;
  }

  .leadgen-feature {
    flex: 0 0 calc(50% - 8px);
  }

  .leadgen-cta__social-proof {
    display: block;
    flex-wrap: wrap;
    gap: 12px;
  }

  .leadgen-cta__actions {
    flex-direction: column;
  }

  .leadgen-btn {
    justify-content: center;
  }
}

/* --- End: components/cta.css --- */

/* --- Start: components/thank_you.css --- */
.thank-you-section {
  position: relative;
  width: 100%;
  padding: 200px 20px 60px;
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
}

.thank-bg-grid {
  position: absolute;
  width: 150px;
  height: 160px;
  background-image: radial-gradient(#FDBA74 2px, transparent 2px);
  background-size: 18px 18px;
  opacity: 0.55;
  pointer-events: none;
  z-index: 1;
}

.thank-bg-grid-top-left {
  top: 30px;
  left: 30px;
}

.thank-bg-grid-bottom-right {
  bottom: 30px;
  right: 30px;
}

.thank-bg-waves {
  position: absolute;
  top: 0;
  right: 0;
  pointer-events: none;
  z-index: 1;
}

.thank-bg-glow {
  position: absolute;
  bottom: -80px;
  left: -80px;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(245, 93, 45, 0.14) 0%, rgba(245, 93, 45, 0.02) 60%, transparent 80%);
  filter: blur(40px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

.thank-container {
  position: relative;
  z-index: 2;
  max-width: 780px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

/* Hero Animated Icon */
.thank-hero-icon-wrapper {
  position: relative;
  width: 130px;
  height: 130px;
  margin: 0 auto 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.thank-check-circle {
  width: 86px;
  height: 86px;
  min-width: 86px;
  min-height: 86px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(245, 93, 45, 0.22), 0 2px 8px rgba(0, 0, 0, 0.04);
  position: relative;
  z-index: 3;
  flex-shrink: 0;
  animation: checkCirclePop 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, pulseCheckGlow 3s ease-in-out infinite 0.65s;
}

.thank-check-svg {
  width: 44px;
  height: 44px;
  display: block;
}

.thank-check-path {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: lineDrawCheck 0.85s cubic-bezier(0.65, 0, 0.35, 1) 0.3s forwards;
}

@keyframes lineDrawCheck {
  0% {
    stroke-dashoffset: 60;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes checkCirclePop {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  70% {
    transform: scale(1.12);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes pulseCheckGlow {

  0%,
  100% {
    box-shadow: 0 10px 30px rgba(245, 93, 45, 0.22), 0 2px 8px rgba(0, 0, 0, 0.04);
  }

  50% {
    box-shadow: 0 14px 40px rgba(245, 93, 45, 0.42), 0 4px 14px rgba(245, 93, 45, 0.18);
  }
}

/* Decorative Particles */
.particle-ray {
  position: absolute;
  width: 13px;
  height: 4.5px;
  background-color: #F55D2D;
  border-radius: 4px;
  opacity: 0;
  z-index: 2;
  animation: rayPopOut 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.55s forwards;
}

.ray-tl {
  top: 22px;
  left: 22px;
  transform: rotate(-45deg);
  --tx: -7px;
  --ty: -7px;
}

.ray-tr {
  top: 22px;
  right: 22px;
  transform: rotate(45deg);
  --tx: 7px;
  --ty: -7px;
}

.ray-bl {
  bottom: 22px;
  left: 22px;
  transform: rotate(45deg);
  --tx: -7px;
  --ty: 7px;
}

.ray-br {
  bottom: 22px;
  right: 22px;
  transform: rotate(-45deg);
  --tx: 7px;
  --ty: 7px;
}

@keyframes rayPopOut {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0);
  }

  100% {
    opacity: 1;
    transform: translate(var(--tx), var(--ty)) scale(1);
  }
}

.particle-dot {
  position: absolute;
  border-radius: 50%;
  z-index: 2;
  opacity: 0;
  animation: dotFadeIn 0.5s ease 0.6s forwards, floatDot 3s ease-in-out infinite 1s;
}

.dot-green-1 {
  width: 7px;
  height: 7px;
  background-color: #72C087;
  top: 30px;
  left: 10px;
}

.dot-green-2 {
  width: 7px;
  height: 7px;
  background-color: #72C087;
  top: 30px;
  right: 10px;
}

.dot-orange-1 {
  width: 6.5px;
  height: 6.5px;
  background-color: #F55D2D;
  bottom: 18px;
  left: 30px;
}

.dot-orange-2 {
  width: 6.5px;
  height: 6.5px;
  background-color: #F55D2D;
  bottom: 18px;
  right: 30px;
}

@keyframes dotFadeIn {
  to {
    opacity: 1;
  }
}

@keyframes floatDot {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

/* Headings */
.thank-title {
  font-family: var(--font-primary, 'Bricolage Grotesque', sans-serif);
  font-size: 2.85rem;
  font-weight: 800;
  color: #0D0D0D;
  margin-bottom: 8px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.thank-title .text-orange {
  color: #F55D2D;
}

.thank-subtitle {
  font-family: var(--font-secondary, 'Archivo', sans-serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 10px;
}

.thank-description {
  font-family: var(--font-secondary, 'Archivo', sans-serif);
  font-size: 0.95rem;
  color: #6B7280;
  max-width: 500px;
  margin: 0 auto 30px;
  line-height: 1.55;
}

/* Submission Details Card */
.submission-card {
  max-width: 620px;
  width: 100%;
  margin: 0 auto 36px;
  background: #FFFFFF;
  border: 1px solid #EEF0F2;
  border-radius: 16px;
  padding: 14px 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.025);
  display: flex;
  align-items: center;
  justify-content: space-around;
  text-align: left;
  box-sizing: border-box;
}

.submission-card-col {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 2px 6px;
}

.submission-card-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #FFF2ED;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.submission-card-info {
  display: flex;
  flex-direction: column;
}

.submission-label {
  font-family: var(--font-secondary, 'Archivo', sans-serif);
  font-size: 0.78rem;
  color: #6B7280;
  font-weight: 500;
  margin-bottom: 2px;
}

.submission-value {
  font-family: var(--font-secondary, 'Archivo', sans-serif);
  font-size: 0.98rem;
  font-weight: 700;
}

.submission-value.submitted-name {
  color: #F55D2D;
}

.submission-value.submitted-datetime {
  color: #111827;
}

.submission-card-divider {
  width: 1px;
  height: 40px;
  background: #E5E7EB;
  flex-shrink: 0;
}

/* "What happens next?" Flow */
.next-steps-wrapper {
  max-width: 720px;
  width: 100%;
  margin: 0 auto 36px;
}

.next-steps-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 28px;
}

.next-steps-divider .divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245, 93, 45, 0.4), rgba(245, 93, 45, 0.4), transparent);
}

.next-steps-divider .divider-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-text-inverse);
  flex-shrink: 0;
}

.next-steps-title {
  font-family: var(--font-secondary, 'Archivo', sans-serif);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--color-text-inverse);
  white-space: nowrap;
  padding: 0 4px;
}

.next-steps-grid {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.step-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 195px;
}

.step-icon-wrapper {
  position: relative;
  width: 74px;
  height: 74px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step-number {
  position: absolute;
  top: -2px;
  left: -2px;
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #F55D2D;
  color: #FFFFFF;
  font-family: var(--font-secondary, 'Archivo', sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #FFFFFF;
  box-shadow: 0 2px 6px rgba(245, 93, 45, 0.35);
  z-index: 2;
  flex-shrink: 0;
}

.step-icon-circle {
  width: 74px;
  height: 74px;
  min-width: 74px;
  min-height: 74px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #FFF2ED;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.step-card:hover .step-icon-circle {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(245, 93, 45, 0.15);
}

.step-title {
  font-family: var(--font-secondary, 'Archivo', sans-serif);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text-inverse);
  margin-bottom: 4px;
}

.step-desc {
  font-family: var(--font-secondary, 'Archivo', sans-serif);
  font-size: 0.82rem;
  color: var(--color-text-dark);
  line-height: 1.45;
  margin: 0;
}

.step-connector {
  display: flex;
  align-items: center;
  padding-top: 28px;
  flex-shrink: 0;
}

/* Help Card */
.help-card {
  max-width: 720px;
  width: 100%;
  margin: 0 auto 30px;
  background: #FFF8F5;
  border: 1px solid #FFECE3;
  border-radius: 16px;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  text-align: left;
  box-sizing: border-box;
}

.help-card-col {
  display: flex;
  align-items: center;
  gap: 12px;
}

.help-card-main {
  padding: 2px;
}

.help-icon-circle {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #F55D2D;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(245, 93, 45, 0.28);
}

.help-info {
  display: flex;
  flex-direction: column;
}

.help-title {
  font-family: var(--font-secondary, 'Archivo', sans-serif);
  font-size: 0.9rem;
  font-weight: 700;
  color: #111827;
}

.help-subtitle {
  font-family: var(--font-secondary, 'Archivo', sans-serif);
  font-size: 0.8rem;
  color: #6B7280;
}

.help-card-divider {
  width: 1px;
  height: 34px;
  background: #FEE5D9;
  flex-shrink: 0;
}

.help-contact-link {
  text-decoration: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.help-contact-link:hover {
  transform: translateY(-2px);
  opacity: 0.85;
}

.help-link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.help-contact-text {
  font-family: var(--font-secondary, 'Archivo', sans-serif);
  font-size: 0.9rem;
  font-weight: 600;
  color: #111827;
}

/* Return Home Button */
.return-home-wrapper {
  margin-top: 10px;
}

.btn-return-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 28px;
  background: #FFFFFF;
  border: 1.5px solid #F55D2D;
  border-radius: 10px;
  color: #F55D2D;
  font-family: var(--font-secondary, 'Archivo', sans-serif);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(245, 93, 45, 0.08);
}

.btn-return-home:hover {
  background: #F55D2D;
  border-color: #FFF;
  color: #FFFFFF;
  box-shadow: 0 6px 20px rgba(245, 93, 45, 0.3);
  transform: translateY(-2px);
}

.arrow-left-icon {
  transition: transform 0.3s ease;
}

.btn-return-home:hover .arrow-left-icon {
  transform: translateX(-4px);
}

.thank_bottom_bigbox {
  border-radius: 20px;
  background-color: var(--color-primary);
  padding: 50px;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .thank-you-section {
    padding: 35px 16px 45px;
  }

  .thank-title {
    font-size: 2.2rem;
  }

  .thank-subtitle {
    font-size: 1.1rem;
  }

  .submission-card {
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
    padding: 16px;
  }

  .submission-card-divider {
    width: 100%;
    height: 1px;
  }

  .next-steps-grid {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .step-connector {
    transform: rotate(90deg);
    padding-top: 0;
    margin: -10px 0;
  }

  .help-card {
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
    padding: 16px;
  }

  .help-card-divider {
    width: 100%;
    height: 1px;
  }

  .thank-bg-grid {
    display: none;
  }
}

/* --- End: components/thank_you.css --- */

/* ══════════════════════════════════════════════════════════════
   INDUSTRIES WE SERVE SECTION
   ══════════════════════════════════════════════════════════════ */

.industries-section {
  background: var(--color-bg-white, #ffffff);
  padding: 90px 0;
  position: relative;
  overflow: hidden;
}

/* Centered Section Header */
.industries-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 48px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.industries-tagline {
  font-family: var(--font-secondary);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-primary, #FF5722);
  margin-bottom: 16px;
  display: inline-block;
}

.industries-title {
  font-family: var(--font-primary);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--color-text-primary, #111111);
  margin-bottom: 16px;
  text-align: center;
}

.industries-desc {
  font-family: var(--font-secondary);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-muted, #666666);
  margin-bottom: 0;
  text-align: center;
}

/* 3D Carousel Wrapper & Arrows */
.industries-carousel-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 20px 0;
}

.industries-arrow-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(17, 17, 17, 0.08);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  color: var(--color-primary, #FF5722);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 30;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.industries-arrow-btn--prev {
  left: 10px;
}

.industries-arrow-btn--next {
  right: 10px;
}

@media (max-width: 1200px) {
  .industries-arrow-btn--prev {
    left: 0px;
  }

  .industries-arrow-btn--next {
    right: 0px;
  }
}

.industries-arrow-btn:hover {
  background: var(--color-primary, #FF5722);
  color: #ffffff;
  border-color: var(--color-primary, #FF5722);
  box-shadow: 0 8px 24px rgba(245, 93, 45, 0.35);
  transform: translateY(-50%) scale(1.08);
}

/* 3D Stage & Card Container */
.industries-carousel-stage {
  width: 100%;
  max-width: 1100px;
  height: 400px;
  position: relative;
  margin: 0 auto;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.industries-cards-container {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Individual Card Styling */
.ind-card {
  position: absolute;
  width: 620px;
  height: 350px;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.07);
  border: 1px solid rgba(17, 17, 17, 0.07);
  overflow: hidden;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease, box-shadow 0.6s ease, border-color 0.4s ease;
  user-select: none;
}

@media (max-width: 768px) {
  .ind-card {
    width: 90%;
    height: 380px;
  }
}

.ind-card-body {
  display: flex;
  height: 100%;
  width: 100%;
}

/* Card Content Area */
.ind-card-content {
  flex: 1.1;
  padding: 36px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
  background: #ffffff;
}

.ind-icon-badge {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #FFF1EC;
  color: var(--color-primary, #FF5722);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.ind-card-title {
  font-family: var(--font-primary);
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.2;
  color: #111111;
  margin-bottom: 0;
}

.ind-card-dash {
  width: 26px;
  height: 2px;
  background: var(--color-primary, #FF5722);
  margin: 14px 0;
  border-radius: 2px;
}

.ind-card-desc {
  font-family: var(--font-secondary);
  font-size: 0.88rem;
  line-height: 1.5;
  color: #666666;
  margin-bottom: 20px;
}

.ind-card-link {
  font-family: var(--font-secondary);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-primary, #FF5722);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: gap 0.3s ease;
}

.ind-card-link:hover {
  gap: 12px;
}

/* Visual Image Area */
.ind-card-visual {
  flex: 0.9;
  position: relative;
  overflow: hidden;
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
}

.ind-visual-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0.2) 40%, transparent 100%);
  z-index: 2;
}

.ind-visual-overlay--orange {
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.2) 0%, rgba(255, 87, 34, 0.35) 100%), linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0.1) 40%, transparent 100%);
}

.ind-visual-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.ind-card:hover .ind-visual-img {
  transform: scale(1.06);
}

/* 3D State Positions */
/* Center Card */
.ind-card.state-center {
  transform: translateX(0) scale(1) rotateY(0deg);
  z-index: 10;
  opacity: 1;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
  pointer-events: auto;
  border-color: rgba(245, 93, 45, 0.25);
}

/* Left Card */
.ind-card.state-left {
  transform: translateX(-340px) scale(0.86) rotateY(10deg);
  z-index: 5;
  opacity: 0.75;
  pointer-events: auto;
  cursor: pointer;
}

/* Right Card */
.ind-card.state-right {
  transform: translateX(340px) scale(0.86) rotateY(-10deg);
  z-index: 5;
  opacity: 0.75;
  pointer-events: auto;
  cursor: pointer;
}

/* Hidden States */
.ind-card.state-hidden-left {
  transform: translateX(-600px) scale(0.7) rotateY(15deg);
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}

.ind-card.state-hidden-right {
  transform: translateX(600px) scale(0.7) rotateY(-15deg);
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}

/* Responsive adjust */
@media (max-width: 1024px) {
  .ind-card.state-left {
    transform: translateX(-240px) scale(0.82);
    opacity: 0.5;
  }

  .ind-card.state-right {
    transform: translateX(240px) scale(0.82);
    opacity: 0.5;
  }
}

@media (max-width: 640px) {
  .ind-card-body {
    flex-direction: column;
  }

  .ind-card-visual {
    height: 140px;
    border-radius: 0 0 24px 24px;
  }

  .ind-card.state-left,
  .ind-card.state-right {
    opacity: 0;
    pointer-events: none;
  }
}

/* Pagination Dots */
.industries-pagination-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 32px;
}

.ind-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #E2E8F0;
  transition: all 0.3s ease;
  cursor: pointer;
}

.ind-dot.active {
  background: var(--color-primary, #FF5722);
  width: 11px;
  height: 11px;
}

/* Bottom CTA Outline Button */
.industries-bottom-cta {
  text-align: center;
  margin-top: 32px;
}

.btn--outline-orange {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  color: var(--color-primary, #FF5722);
  border: 1.5px solid var(--color-primary, #FF5722);
  padding: 12px 32px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 14px rgba(245, 93, 45, 0.08);
}

.btn--outline-orange:hover {
  background: var(--color-primary, #FF5722);
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(245, 93, 45, 0.35);
  transform: translateY(-2px);
}