/* ============================================================

   POPPY SEED COMMUNICATION — CREATIVE + TECHNOLOGY AGENCY

   MAIN STYLESHEET

   ============================================================ */



@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700;800&display=swap');

@import url('variables.css');



/* ------------------------------------------------------------

   Reset & Base Styles

   ------------------------------------------------------------ */

*, *::before, *::after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



html {

  font-size: 16px;

  scroll-behavior: smooth;

  -webkit-text-size-adjust: 100%;

}



body {

  font-family: var(--font-primary);

  background-color: var(--bg-color);

  color: var(--text-color);

  line-height: 1.65;

  overflow-x: hidden;

  position: relative;

  background-image: 

    radial-gradient(circle at 15% 15%, rgba(74, 145, 87, 0.08) 0%, transparent 40%),

    radial-gradient(circle at 85% 85%, rgba(116, 242, 152, 0.05) 0%, transparent 45%);

  background-attachment: fixed;

}



a {

  color: inherit;

  text-decoration: none;

  transition: color var(--transition-fast);

}



img, video {

  max-width: 100%;

  height: auto;

  display: block;

}



button, input, textarea, select {

  font-family: inherit;

  font-size: inherit;

}



/* ------------------------------------------------------------

   Typography & Utilities

   ------------------------------------------------------------ */

h1, h2, h3, h4, h5, h6 {

  font-family: var(--font-display);

  color: var(--text-heading);

  font-weight: 700;

  line-height: 1.15;

  letter-spacing: -0.02em;

}



/* Logo Switching by Theme */

.brand-logo .logo-dark,

.footer-brand .logo-dark {

  display: none !important;

}

.brand-logo .logo-light,

.footer-brand .logo-light {

  display: block !important;

}



[data-theme="dark"] .brand-logo .logo-light,

[data-theme="dark"] .footer-brand .logo-light {

  display: none !important;

}

[data-theme="dark"] .brand-logo .logo-dark,

[data-theme="dark"] .footer-brand .logo-dark {

  display: block !important;

}



.text-gradient {

  color: #000000;

  -webkit-text-fill-color: #000000;

  background: none;

  display: inline-block;

}



[data-theme="dark"] .text-gradient {

  background: linear-gradient(135deg, #FFFFFF 0%, #E2E8F0 40%, var(--brand-accent) 100%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  color: #FFFFFF;

}



.text-gradient-green {

  color: var(--brand-green-dark);

  -webkit-text-fill-color: var(--brand-green-dark);

  background: none;

  display: inline-block;

}



[data-theme="dark"] .text-gradient-green {

  background: linear-gradient(135deg, var(--brand-accent) 0%, var(--brand-green) 100%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  color: var(--brand-accent);

}



.container {

  width: 100%;

  max-width: var(--max-width);

  margin-left: auto;

  margin-right: auto;

  padding-left: clamp(1.25rem, 4vw, 3rem);

  padding-right: clamp(1.25rem, 4vw, 3rem);

}



.container-wide {

  max-width: 1650px !important;

  width: 95% !important;

}



.text-center {

  text-align: center !important;

}



.section-tag {

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  padding: 0.4rem 1rem;

  border-radius: var(--radius-full);

  background: rgba(74, 145, 87, 0.12);

  border: 1px solid rgba(74, 145, 87, 0.3);

  color: var(--brand-accent);

  font-size: 0.825rem;

  font-weight: 600;

  letter-spacing: 0.05em;

  text-transform: uppercase;

  margin-bottom: 1.25rem;

  backdrop-filter: blur(8px);

}



.section-spacing {

  padding-top: clamp(2.5rem, 4.5vw, 4.25rem);

  padding-bottom: clamp(2.5rem, 4.5vw, 4.25rem);

  position: relative;

}



.badge {

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  padding: 0.4rem 1rem;

  border-radius: var(--radius-full);

  background: rgba(74, 145, 87, 0.12);

  border: 1px solid rgba(74, 145, 87, 0.3);

  color: var(--brand-accent);

  font-size: 0.825rem;

  font-weight: 600;

  letter-spacing: 0.05em;

  text-transform: uppercase;

  margin-bottom: 1.25rem;

  backdrop-filter: blur(8px);

}



.badge-dot {

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background-color: var(--brand-accent);

  box-shadow: 0 0 8px var(--brand-accent);

  animation: pulse-dot 2s infinite;

}



@keyframes pulse-dot {

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

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

}



.section-title {

  font-size: clamp(2rem, 4.5vw, 3.75rem);

  margin-bottom: 1rem;

}



.section-subtitle {

  font-size: clamp(1rem, 1.5vw, 1.25rem);

  color: var(--muted-color);

  max-width: 680px;

  line-height: 1.6;

}



/* ------------------------------------------------------------

   Buttons & CTAs

   ------------------------------------------------------------ */

.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 0.75rem;

  padding: 0.9rem 1.85rem;

  border-radius: var(--radius-full);

  font-weight: 600;

  font-size: 0.95rem;

  cursor: pointer;

  transition: all var(--transition-normal);

  border: none;

  text-decoration: none;

  position: relative;

  overflow: hidden;

}



.btn-primary {

  background: linear-gradient(135deg, var(--brand-green) 0%, #3e844e 100%);

  color: #FFFFFF;

  box-shadow: 0 4px 20px rgba(74, 145, 87, 0.4);

}



.btn-primary:hover {

  background: linear-gradient(135deg, var(--brand-green-light) 0%, var(--brand-green) 100%);

  box-shadow: 0 6px 28px rgba(116, 242, 152, 0.5);

  transform: translateY(-2px);

  color: #FFFFFF;

}



.btn-accent {

  background: var(--brand-accent);

  color: #FFFFFF;

  font-weight: 700;

  box-shadow: 0 4px 20px rgba(74, 145, 87, 0.35);

}



[data-theme="dark"] .btn-accent {

  background: var(--brand-accent);

  color: #060907;

  box-shadow: 0 4px 20px rgba(116, 242, 152, 0.35);

}



.btn-accent:hover {

  filter: brightness(1.1);

  transform: translateY(-2px);

}



.btn-outline {

  background: var(--surface-card);

  color: var(--text-color);

  border: 1px solid var(--border-color);

  backdrop-filter: blur(10px);

}



.btn-outline:hover {

  background: rgba(74, 145, 87, 0.12);

  border-color: var(--brand-green);

  color: var(--brand-green-dark);

  transform: translateY(-2px);

}



[data-theme="dark"] .btn-outline:hover {

  color: #FFFFFF;

  border-color: var(--brand-accent);

}



.btn-icon {

  width: 20px;

  height: 20px;

  transition: transform var(--transition-fast);

}



.btn:hover .btn-icon {

  transform: translateX(4px);

}



/* ------------------------------------------------------------

   Artistic Preloader

   ------------------------------------------------------------ */

#ps-preloader {

  position: fixed;

  inset: 0;

  z-index: 99999;

  background-color: var(--preloader-bg);

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  transition: opacity 0.6s ease, visibility 0.6s ease;

}



#ps-preloader.loaded {

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

}



.preloader-emblem-wrap {

  position: relative;

  width: 110px;

  height: 110px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 1.5rem;

}



.preloader-emblem {

  width: 75px;

  height: 75px;

  object-fit: contain;

  filter: drop-shadow(0 0 20px rgba(116, 242, 152, 0.6));

  animation: seed-pulse 1.8s ease-in-out infinite;

}



.preloader-ring {

  position: absolute;

  inset: 0;

  border-radius: 50%;

  border: 2px dashed rgba(74, 145, 87, 0.4);

  animation: preloader-spin 8s linear infinite;

}



.preloader-ring-outer {

  position: absolute;

  inset: -12px;

  border-radius: 50%;

  border: 1px solid rgba(116, 242, 152, 0.2);

  animation: preloader-spin 12s linear infinite reverse;

}



.preloader-tagline {

  font-family: var(--font-display);

  font-size: 1.5rem;

  font-weight: 800;

  letter-spacing: 0.25em;

  color: var(--preloader-text);

  text-transform: uppercase;

  background: linear-gradient(90deg, var(--text-heading), var(--brand-accent), var(--text-heading));

  background-size: 200% 100%;

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  animation: shimmer 2s linear infinite;

}



.preloader-progress-bar {

  width: 160px;

  height: 3px;

  background: var(--border-color);

  border-radius: 3px;

  margin-top: 1.5rem;

  overflow: hidden;

}



.preloader-progress-fill {

  height: 100%;

  width: 0%;

  background: linear-gradient(90deg, var(--brand-green), var(--brand-accent));

  transition: width 0.3s ease;

}



@keyframes seed-pulse {

  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 15px rgba(116, 242, 152, 0.4)); }

  50% { transform: scale(1.08); filter: drop-shadow(0 0 30px rgba(116, 242, 152, 0.8)); }

}



@keyframes preloader-spin {

  to { transform: rotate(360deg); }

}



@keyframes shimmer {

  0% { background-position: -200% 0; }

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

}



/* ------------------------------------------------------------

   Custom Cursor (Desktop Only)

   ------------------------------------------------------------ */

.ps-cursor, .ps-cursor-follower {

  position: fixed;

  pointer-events: none;

  border-radius: 50%;

  z-index: 9999;

  transform: translate(-50%, -50%);

  transition: opacity 0.3s ease, transform 0.15s ease-out;

  display: none;

}



@media (pointer: fine) {

  .ps-cursor, .ps-cursor-follower {

    display: block;

  }

}



.ps-cursor {

  width: 8px;

  height: 8px;

  background-color: var(--brand-accent);

  box-shadow: 0 0 10px var(--brand-accent);

}



.ps-cursor-follower {

  width: 36px;

  height: 36px;

  border: 1.5px solid rgba(116, 242, 152, 0.45);

  background: rgba(74, 145, 87, 0.05);

  transition: width 0.25s ease, height 0.25s ease, border-color 0.25s ease, background 0.25s ease;

}



.ps-cursor-follower.hover-link {

  width: 54px;

  height: 54px;

  border-color: var(--brand-accent);

  background: rgba(116, 242, 152, 0.12);

}



.ps-cursor-follower.hover-portfolio {

  width: 72px;

  height: 72px;

  border-color: var(--brand-green);

  background: rgba(74, 145, 87, 0.3);

}



/* ------------------------------------------------------------

   Header & Navigation

   ------------------------------------------------------------ */

.site-header {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: var(--nav-height);

  z-index: 1000;

  transition: background-color var(--transition-normal), backdrop-filter var(--transition-normal), border-color var(--transition-normal);

  display: flex;

  align-items: center;

  border-bottom: 1px solid transparent;

}



.site-header.scrolled {

  background-color: var(--header-bg);

  backdrop-filter: blur(16px);

  -webkit-backdrop-filter: blur(16px);

  border-bottom-color: var(--border-color);

  box-shadow: var(--card-shadow);

}



.nav-container {

  display: flex;

  align-items: center;

  justify-content: space-between;

  width: 100%;

}



.brand-logo {

  display: flex;

  align-items: center;

  gap: 0.75rem;

  z-index: 1001;

}



.brand-logo img {

  height: 38px;

  width: auto;

  object-fit: contain;

  transition: transform var(--transition-fast);

}



.brand-logo:hover img {

  transform: scale(1.03);

}



.nav-links {

  display: flex;

  align-items: center;

  gap: 2.25rem;

  list-style: none;

}



.nav-link {

  font-family: var(--font-display);

  font-size: 0.925rem;

  font-weight: 500;

  color: var(--muted-color);

  position: relative;

  padding: 0.4rem 0;

  transition: color var(--transition-fast);

}



.nav-link::after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 0;

  width: 0;

  height: 2px;

  background: var(--brand-accent);

  transition: width var(--transition-fast);

  border-radius: 2px;

}



.nav-link:hover, .nav-link.active {

  color: var(--text-heading);

}



.nav-link:hover::after, .nav-link.active::after {

  width: 100%;

}



/* ------------------------------------------------------------

   Navigation Dropdown Menu (9 Service Pillars)

   ------------------------------------------------------------ */

.nav-item-has-dropdown {

  position: relative;

}



.nav-item-has-dropdown .nav-link {

  display: inline-flex;

  align-items: center;

  gap: 0.35rem;

  cursor: pointer;

}



.nav-chevron {

  transition: transform var(--transition-fast);

}



.nav-item-has-dropdown:hover .nav-chevron,

.nav-item-has-dropdown:focus-within .nav-chevron {

  transform: rotate(180deg);

}



.nav-dropdown-menu {

  position: absolute;

  top: calc(100% + 0.5rem);

  left: -1rem;

  min-width: 295px;

  background: var(--surface-card);

  backdrop-filter: blur(20px);

  -webkit-backdrop-filter: blur(20px);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-lg);

  padding: 0.65rem;

  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);

  opacity: 0;

  visibility: hidden;

  transform: translateY(10px);

  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;

  z-index: 1000;

  list-style: none;

  display: flex;

  flex-direction: column;

  gap: 0.2rem;

}



.nav-item-has-dropdown:hover .nav-dropdown-menu,

.nav-item-has-dropdown:focus-within .nav-dropdown-menu {

  opacity: 1;

  visibility: visible;

  transform: translateY(0);

}



.nav-dropdown-menu li {

  width: 100%;

}



.nav-dropdown-menu li a {

  display: flex;

  align-items: center;

  gap: 0.75rem;

  padding: 0.6rem 0.85rem;

  border-radius: var(--radius-md);

  color: var(--text-color);

  font-family: var(--font-display);

  font-size: 0.875rem;

  font-weight: 500;

  text-decoration: none;

  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);

}



.nav-dropdown-menu li a:hover {

  background: rgba(74, 145, 87, 0.14);

  color: var(--text-heading);

  transform: translateX(4px);

}



.nav-dropdown-menu li a .drop-icon {

  font-size: 1.1rem;

  line-height: 1;

}



.nav-actions {

  display: flex;

  align-items: center;

  gap: 1.25rem;

}



/* ------------------------------------------------------------

   Theme Switcher Button

   ------------------------------------------------------------ */

.theme-toggle {

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-full);

  cursor: pointer;

  padding: 3px;

  display: inline-flex;

  align-items: center;

  position: relative;

  transition: all var(--transition-normal);

  outline: none;

}



.theme-toggle:hover {

  border-color: var(--brand-green);

  box-shadow: 0 0 14px rgba(74, 145, 87, 0.25);

  transform: translateY(-1px);

}



.theme-toggle:focus-visible {

  outline: 2px solid var(--brand-green);

  outline-offset: 2px;

}



.theme-toggle-track {

  width: 48px;

  height: 26px;

  background: var(--bg-darker);

  border-radius: var(--radius-full);

  position: relative;

  display: flex;

  align-items: center;

  padding: 2px;

  transition: background 0.3s ease;

}



.theme-toggle-thumb {

  width: 22px;

  height: 22px;

  border-radius: 50%;

  background: var(--brand-green);

  display: flex;

  align-items: center;

  justify-content: center;

  color: #FFFFFF;

  transform: translateX(0);

  transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.27, 1.55), background 0.3s ease, color 0.3s ease;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);

}



.theme-toggle-thumb svg {

  width: 13px;

  height: 13px;

}



.sun-icon {

  display: block;

}

.moon-icon {

  display: none;

}



[data-theme="dark"] .theme-toggle-thumb {

  transform: translateX(22px);

  background: var(--brand-accent);

  color: #060907;

}



[data-theme="dark"] .sun-icon {

  display: none;

}



[data-theme="dark"] .moon-icon {

  display: block;

}



/* Mobile Drawer Extra Elements (Hidden on Desktop) */

.mobile-menu-extra {

  display: none;

  width: 100%;

}



.mobile-theme-item {

  display: none;

  width: 100%;

}



/* Mobile Toggle */

.mobile-toggle {

  display: none;

  background: none;

  border: none;

  outline: none;

  cursor: pointer;

  padding: 0.5rem;

  z-index: 1001;

  color: var(--text-heading);

  -webkit-tap-highlight-color: transparent;

}



.mobile-toggle:focus,

.mobile-toggle:focus-visible {

  outline: none;

}



.mobile-toggle span {

  display: block;

  width: 26px;

  height: 2px;

  background-color: var(--text-heading);

  margin: 5px 0;

  transition: transform 0.3s ease, opacity 0.3s ease;

  border-radius: 2px;

}



.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);

}



/* ------------------------------------------------------------

   Interactive Hero Section & Three.js Canvas

   ------------------------------------------------------------ */

.hero-section {

  position: relative;

  min-height: 100vh;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: space-between;

  padding-top: calc(var(--nav-height) + 1.25rem);

  padding-bottom: 2.25rem;

  overflow: hidden;

}



.hero-section > .container {

  margin-top: auto;

  margin-bottom: auto;

  position: relative;

  z-index: 3;

  width: 100%;

}



#three-hero-canvas {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 1;

  pointer-events: auto;

}



.hero-overlay-grid {

  position: absolute;

  inset: 0;

  background-image: 

    linear-gradient(rgba(74, 145, 87, 0.04) 1px, transparent 1px),

    linear-gradient(90deg, rgba(74, 145, 87, 0.04) 1px, transparent 1px);

  background-size: 60px 60px;

  z-index: 2;

  pointer-events: none;

  mask-image: radial-gradient(circle at center, black 40%, transparent 80%);

}



.hero-content {

  position: relative;

  z-index: 3;

  text-align: center;

  max-width: 1280px;

  margin: 0 auto;

  pointer-events: none;

}



.hero-content > * {

  pointer-events: auto;

}



.hero-title {

  font-size: clamp(2.35rem, 5.2vw, 4.85rem);

  font-weight: 800;

  letter-spacing: -0.03em;

  line-height: 1.1;

  margin-bottom: 1.5rem;

  color: #000000;

}



.hero-title-nowrap {

  display: inline-block;

  white-space: nowrap;

}



@media (max-width: 680px) {

  .hero-title-nowrap {

    white-space: normal;

    display: inline;

  }

}



[data-theme="dark"] .hero-title {

  color: #FFFFFF;

}



.hero-description {

  font-size: clamp(1.1rem, 2vw, 1.4rem);

  color: #2D3748;

  max-width: 720px;

  margin: 0 auto 2.5rem;

  line-height: 1.6;

  font-weight: 500;

}



[data-theme="dark"] .hero-description {

  color: var(--muted-color);

  font-weight: 400;

}



.hero-actions {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 1.25rem;

  flex-wrap: wrap;

}



.hero-scroll-indicator {

  position: relative;

  z-index: 10;

  margin: 1.75rem auto 0;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 0.65rem;

  padding: 0.6rem 1.35rem 0.6rem 1.05rem;

  background: rgba(255, 255, 255, 0.94);

  border: 1.5px solid rgba(46, 113, 66, 0.32);

  border-radius: 9999px;

  box-shadow: 0 10px 25px -4px rgba(46, 113, 66, 0.2), 0 2px 6px rgba(0, 0, 0, 0.04);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  color: #1b4329;

  font-size: 0.78rem;

  font-weight: 700;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  cursor: pointer;

  pointer-events: auto;

  user-select: none;

  transition: all 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);

  text-decoration: none;

}



[data-theme="dark"] .hero-scroll-indicator {

  background: rgba(14, 44, 26, 0.92);

  border: 1.5px solid rgba(116, 242, 152, 0.4);

  box-shadow: 0 10px 25px -4px rgba(0, 0, 0, 0.5), 0 0 18px rgba(116, 242, 152, 0.2);

  color: #cbfadb;

}



.hero-scroll-indicator:hover {

  background: #2e7142;

  color: #ffffff;

  border-color: #2e7142;

  transform: translateY(-3px);

  box-shadow: 0 14px 30px -4px rgba(46, 113, 66, 0.38);

}



[data-theme="dark"] .hero-scroll-indicator:hover {

  background: #74f298;

  color: #091f12;

  border-color: #74f298;

  box-shadow: 0 14px 30px -4px rgba(116, 242, 152, 0.45);

}



.hero-scroll-indicator:focus-visible {

  outline: 2px solid #2e7142;

  outline-offset: 3px;

  border-radius: 9999px;

}



/* Mouse icon outline */

.scroll-mouse-pill {

  width: 16px;

  height: 24px;

  border: 2px solid currentColor;

  border-radius: 9px;

  position: relative;

  display: flex;

  align-items: flex-start;

  justify-content: center;

  padding-top: 3px;

  flex-shrink: 0;

  opacity: 0.9;

}



.scroll-wheel-dot {

  width: 3px;

  height: 5px;

  background: currentColor;

  border-radius: 2px;

  animation: scrollWheelRoll 1.6s ease-in-out infinite;

}



@keyframes scrollWheelRoll {

  0% {

    transform: translateY(0);

    opacity: 1;

  }

  60% {

    transform: translateY(7px);

    opacity: 0.2;

  }

  100% {

    transform: translateY(0);

    opacity: 0;

  }

}



/* Bouncing chevron icon */

.scroll-indicator-chevron {

  flex-shrink: 0;

  animation: scrollChevronBounce 1.6s ease-in-out infinite;

  transition: transform 0.2s ease;

}



@keyframes scrollChevronBounce {

  0%, 100% {

    transform: translateY(0);

  }

  50% {

    transform: translateY(3px);

  }

}



/* ------------------------------------------------------------

   Creative Statement Section

   ------------------------------------------------------------ */

.statement-card {

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-lg);

  padding: clamp(2.5rem, 5vw, 4.5rem);

  backdrop-filter: blur(12px);

  position: relative;

  overflow: hidden;

}



.statement-card::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 2px;

  background: linear-gradient(90deg, transparent, var(--brand-accent), transparent);

}



.statement-lead {

  font-family: var(--font-display);

  font-size: clamp(1.35rem, 2.8vw, 2.25rem);

  line-height: 1.4;

  color: var(--text-heading);

  margin-bottom: 2rem;

}



.statement-pills {

  display: flex;

  flex-wrap: wrap;

  gap: 0.75rem;

}



.statement-pill {

  padding: 0.5rem 1.25rem;

  border-radius: var(--radius-full);

  background: var(--surface-color);

  border: 1px solid var(--border-color);

  font-size: 0.9rem;

  color: var(--muted-color);

  transition: all var(--transition-fast);

}



.statement-pill:hover {

  background: rgba(74, 145, 87, 0.15);

  border-color: var(--brand-accent);

  color: var(--text-heading);

}



/* ------------------------------------------------------------

   Creative + Technology Combined Section

   ------------------------------------------------------------ */

.creative-tech-wrapper {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 3rem;

  align-items: center;

}



.creative-tech-visual {

  position: relative;

  border-radius: var(--radius-lg);

  overflow: hidden;

  border: 2px solid var(--brand-green);

  box-shadow: 0 0 0 5px rgba(74, 145, 87, 0.16), 0 18px 40px -10px rgba(0, 0, 0, 0.15);

  background: var(--surface-card);

  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);

}



.creative-tech-visual:hover {

  border-color: var(--brand-green-light);

  box-shadow: 0 0 0 6px rgba(74, 145, 87, 0.25), 0 22px 48px -8px rgba(74, 145, 87, 0.22);

}



.creative-tech-visual img {

  width: 100%;

  height: 100%;

  aspect-ratio: 4 / 3;

  object-fit: cover;

  display: block;

  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);

}



.creative-tech-visual:hover img {

  transform: scale(1.04);

}



.formula-heading {

  font-size: clamp(1.8rem, 3.5vw, 2.75rem);

  margin-bottom: 1.5rem;

  line-height: 1.2;

}



.fusion-card {

  background: var(--surface-card);

  border-left: 3px solid var(--brand-green-dark);

  border-top: 1px solid var(--border-color);

  border-right: 1px solid var(--border-color);

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

  padding: 1.25rem 1.5rem;

  border-radius: 0 var(--radius-md) var(--radius-md) 0;

  margin-bottom: 1.25rem;

  backdrop-filter: blur(10px);

}



[data-theme="dark"] .fusion-card {

  border-left-color: var(--brand-accent);

}



.fusion-card h4 {

  font-size: 1.15rem;

  color: var(--brand-green-dark);

  margin-bottom: 0.35rem;

}



[data-theme="dark"] .fusion-card h4 {

  color: var(--brand-accent);

}



.fusion-card p {

  font-size: 0.95rem;

  color: var(--muted-color);

  line-height: 1.5;

}



/* ------------------------------------------------------------

   Service Cards Grid

   ------------------------------------------------------------ */

.services-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1.75rem;

  margin-top: 3rem;

}



@media (max-width: 992px) {

  .services-grid {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (max-width: 640px) {

  .services-grid {

    grid-template-columns: 1fr;

  }

}



.service-card {

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-md, 16px);

  padding: 0.85rem;

  position: relative;

  overflow: hidden;

  transition: all var(--transition-normal);

  display: flex;

  flex-direction: column;

  backdrop-filter: blur(10px);

}



.service-card::after {

  content: '';

  position: absolute;

  inset: 0;

  background: radial-gradient(circle at top right, rgba(116, 242, 152, 0.12), transparent 70%);

  opacity: 0;

  transition: opacity var(--transition-normal);

  pointer-events: none;

}



.service-card:hover {

  transform: translateY(-6px);

  border-color: var(--border-hover);

  box-shadow: var(--card-glow);

}



.service-card:hover::after {

  opacity: 1;

}



.service-media-wrap {

  position: relative;

  width: 100%;

  aspect-ratio: 3 / 2;

  border-radius: calc(var(--radius-md, 16px) - 4px);

  overflow: hidden;

  background: rgba(74, 145, 87, 0.08);

  margin-bottom: 0.85rem;

}



@supports not (aspect-ratio: 3 / 2) {

  .service-media-wrap {

    height: 220px;

  }

}



.service-card-img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center center;

  display: block;

  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);

}



.service-card:hover .service-card-img {

  transform: scale(1.06);

}



.service-card-body {

  padding: 0.25rem 0.35rem 0.35rem;

  display: flex;

  flex-direction: column;

  flex: 1;

}



.service-icon-wrap {

  display: none !important;

}



.service-title {

  font-size: 1.15rem;

  font-weight: 700;

  margin-bottom: 0.4rem;

  color: var(--text-heading);

  line-height: 1.3;

}



.service-desc {

  font-size: 0.85rem;

  color: var(--muted-color);

  line-height: 1.5;

  flex-grow: 1;

  margin-bottom: 0.5rem;

}



.service-category-tag {

  font-size: 0.76rem;

  color: var(--brand-accent);

  text-transform: uppercase;

  letter-spacing: 0.06em;

  font-weight: 700;

  margin-top: auto;

  padding-top: 0.4rem;

  display: inline-flex;

  align-items: center;

  gap: 0.35rem;

  transition: gap var(--transition-fast), color var(--transition-fast);

}



.service-card:hover .service-category-tag {

  color: var(--brand-green);

  gap: 0.55rem;

}



/* ------------------------------------------------------------

   Brand Philosophy: The Seed -> The Growth -> The Echo

   ------------------------------------------------------------ */

.philosophy-grid {

  display: grid;

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

  gap: 1.5rem;

  margin-top: 3.5rem;

  position: relative;

}



@media (max-width: 1080px) {

  .philosophy-grid {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (max-width: 600px) {

  .philosophy-grid {

    grid-template-columns: 1fr;

  }

}



.philosophy-card {

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-md);

  padding: 2.5rem 2rem;

  position: relative;

}



.philosophy-number {

  font-family: var(--font-display);

  font-size: 3.5rem;

  font-weight: 800;

  line-height: 1;

  color: rgba(74, 145, 87, 0.2);

  margin-bottom: 1rem;

  transition: color var(--transition-normal);

}



.philosophy-card:hover .philosophy-number {

  color: var(--brand-accent);

}



.philosophy-title {

  font-size: 1.45rem;

  color: var(--text-heading);

  margin-bottom: 0.75rem;

}



.philosophy-desc {

  font-size: 0.95rem;

  color: var(--muted-color);

  line-height: 1.6;

}



/* ------------------------------------------------------------

   Portfolio & Case Studies Grid

   ------------------------------------------------------------ */

.portfolio-filters, .portfolio-filter-bar {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0.65rem;

  flex-wrap: wrap;

  margin-top: 1rem;

  margin-bottom: 3rem;

}



.portfolio-filter-btn, .filter-btn {

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  padding: 0.6rem 1.35rem;

  border-radius: var(--radius-full);

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  color: var(--muted-color);

  font-size: 0.875rem;

  font-weight: 600;

  cursor: pointer;

  transition: all var(--transition-fast);

  text-decoration: none;

}



.portfolio-filter-btn:hover, .filter-btn:hover {

  border-color: var(--brand-accent);

  color: var(--text-heading);

  transform: translateY(-2px);

}



.portfolio-filter-btn.active, .filter-btn.active {

  background: var(--brand-green);

  border-color: var(--brand-green);

  color: #FFFFFF;

  box-shadow: 0 4px 16px rgba(74, 145, 87, 0.4);

}



.portfolio-filter-btn .filter-count {

  display: inline-block;

  padding: 0.15rem 0.5rem;

  border-radius: var(--radius-full);

  background: rgba(0, 0, 0, 0.1);

  font-size: 0.75rem;

  font-weight: 700;

}



[data-theme="dark"] .portfolio-filter-btn .filter-count {

  background: rgba(255, 255, 255, 0.2);

}



.portfolio-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));

  gap: 2.25rem;

}



.portfolio-card {

  border-radius: var(--radius-lg);

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  overflow: hidden;

  position: relative;

  transition: all var(--transition-normal);

  display: flex;

  flex-direction: column;

}



.portfolio-card:hover {

  transform: translateY(-8px);

  border-color: var(--border-hover);

  box-shadow: var(--card-glow);

}



.portfolio-thumb-wrap {

  position: relative;

  aspect-ratio: 16 / 10;

  overflow: hidden;

  background: #000;

}



.portfolio-thumb {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);

}



.portfolio-card:hover .portfolio-thumb {

  transform: scale(1.08);

}



.portfolio-category-badge {

  position: absolute;

  top: 1rem;

  left: 1rem;

  z-index: 2;

  padding: 0.35rem 0.85rem;

  border-radius: var(--radius-full);

  background: var(--surface-card);

  backdrop-filter: blur(8px);

  border: 1px solid var(--border-color);

  font-size: 0.75rem;

  font-weight: 700;

  color: var(--brand-accent);

  text-transform: uppercase;

}



.portfolio-info {

  padding: 2rem;

  display: flex;

  flex-direction: column;

  flex-grow: 1;

}



.portfolio-brand {

  font-size: 1.65rem;

  color: var(--text-heading);

  margin-bottom: 0.35rem;

}



.portfolio-campaign {

  font-size: 1.05rem;

  color: var(--brand-accent);

  font-weight: 600;

  margin-bottom: 0.85rem;

}



.portfolio-objective {

  font-size: 0.9rem;

  color: var(--muted-color);

  line-height: 1.5;

  margin-bottom: 1.5rem;

  flex-grow: 1;

}



.portfolio-meta-footer {

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-top: 1px solid var(--border-color);

  padding-top: 1.25rem;

  font-size: 0.85rem;

  color: var(--muted-color);

}



/* ------------------------------------------------------------

   Case Study Detail & Dynamic Media Blocks

   ------------------------------------------------------------ */

.case-study-hero {

  padding-top: calc(var(--nav-height) + 4rem);

  padding-bottom: 4rem;

  position: relative;

  background: linear-gradient(180deg, rgba(74, 145, 87, 0.08) 0%, transparent 100%);

}



.case-study-title {

  font-size: clamp(2.5rem, 5vw, 4.5rem);

  margin-bottom: 1rem;

}



.case-study-campaign {

  font-size: clamp(1.2rem, 2vw, 1.75rem);

  color: var(--brand-accent);

  margin-bottom: 1.5rem;

}



.case-study-meta-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  gap: 1.5rem;

  padding: 2rem;

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-md);

  margin-top: 2.5rem;

}



.case-study-meta-item h5 {

  font-size: 0.8rem;

  color: var(--muted-color);

  text-transform: uppercase;

  letter-spacing: 0.08em;

  margin-bottom: 0.25rem;

}



.case-study-meta-item p {

  font-size: 1.1rem;

  font-weight: 600;

  color: var(--text-heading);

}



.media-blocks-stream {

  display: flex;

  flex-direction: column;

  gap: 3.5rem;

  margin-top: 4rem;

}



.media-block {

  border-radius: var(--radius-lg);

  overflow: hidden;

  border: 1px solid var(--border-color);

  background: var(--surface-card);

  box-shadow: var(--card-shadow);

}



.media-block-video, .media-block-embed {

  aspect-ratio: 16 / 9;

  width: 100%;

}



.media-block-video iframe, .media-block-video video {

  width: 100%;

  height: 100%;

  border: none;

}



.media-block-instagram {

  display: flex;

  justify-content: center;

  padding: 2rem;

  background: var(--bg-darker);

}



.media-block-image img {

  width: 100%;

  height: auto;

  object-fit: cover;

}



.media-block-caption {

  padding: 1.25rem 2rem;

  font-size: 0.95rem;

  color: var(--muted-color);

  border-top: 1px solid var(--border-color);

  background: var(--surface-card);

}



.embed-fallback-card {

  padding: 3rem 2rem;

  text-align: center;

  background: var(--surface-card);

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 1rem;

}



/* ------------------------------------------------------------

   Brand Portfolio Showcase & Side-by-Side Media Stream

   ------------------------------------------------------------ */

.brand-showcase-section {

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-lg);

  padding: clamp(1.75rem, 3.5vw, 2.75rem);

  margin-bottom: 3.5rem;

  position: relative;

  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);

  box-shadow: var(--card-shadow);

}



.brand-showcase-section:hover {

  border-color: var(--border-hover);

  box-shadow: var(--card-glow);

}



/* ------------------------------------------------------------

   Brand Showcase Section & Container

   ------------------------------------------------------------ */

.brand-showcase-section {

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-lg);

  padding: 2.25rem;

  margin-bottom: 3.5rem;

  box-shadow: var(--card-shadow);

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

  position: relative;

  overflow: hidden;

}



[data-theme="dark"] .brand-showcase-section {

  background: rgba(20, 26, 22, 0.7);

  backdrop-filter: blur(12px);

  border-color: rgba(74, 145, 87, 0.25);

  box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.7);

}



.brand-showcase-header {

  margin-bottom: 1.75rem;

  padding-bottom: 1.5rem;

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

}



.brand-meta-top {

  display: flex;

  align-items: center;

  gap: 0.75rem;

  flex-wrap: wrap;

  margin-bottom: 0.75rem;

}



.brand-meta-top .badge {

  margin-bottom: 0;

}



.brand-year-pill {

  font-size: 0.8rem;

  font-weight: 700;

  color: var(--muted-color);

  background: var(--surface-hover);

  padding: 0.3rem 0.75rem;

  border-radius: var(--radius-full);

  border: 1px solid var(--border-color);

}



.brand-main-title {

  font-size: clamp(1.85rem, 3.5vw, 2.6rem);

  font-weight: 800;

  color: var(--text-heading);

  letter-spacing: -0.02em;

  line-height: 1.15;

  margin-bottom: 0.35rem;

}



.brand-campaign-title {

  font-size: clamp(1.05rem, 1.8vw, 1.35rem);

  color: var(--brand-accent);

  font-weight: 600;

  margin-bottom: 0.85rem;

}



.brand-objective-box {

  background: var(--surface-hover);

  border-left: 3.5px solid var(--brand-green);

  padding: 0.9rem 1.25rem;

  border-radius: var(--radius-sm);

  font-size: 0.95rem;

  color: var(--text-color);

  line-height: 1.55;

  margin-top: 0.75rem;

  margin-bottom: 0.85rem;

}



.brand-objective-box strong {

  color: var(--brand-accent);

  margin-right: 0.35rem;

}



.brand-description-text {

  font-size: 0.95rem;

  color: var(--muted-color);

  line-height: 1.6;

  margin-bottom: 0.85rem;

}



.brand-tags-list {

  display: flex;

  align-items: center;

  gap: 0.5rem;

  flex-wrap: wrap;

  margin-top: 0.75rem;

}



.tags-label {

  font-size: 0.75rem;

  text-transform: uppercase;

  letter-spacing: 0.06em;

  font-weight: 700;

  color: var(--muted-color);

}



.tag-chip {

  font-size: 0.75rem;

  font-weight: 600;

  padding: 0.2rem 0.65rem;

  border-radius: var(--radius-full);

  background: rgba(74, 145, 87, 0.12);

  color: var(--brand-accent);

  border: 1px solid rgba(74, 145, 87, 0.25);

}



/* ------------------------------------------------------------

   Horizontal Side-by-Side Media Feed (Pixel-Perfect Uniform Cards)

   ------------------------------------------------------------ */

.brand-media-feed-wrapper {

  position: relative;

  width: 100%;

}



.brand-media-feed {

  display: flex;

  gap: 1.5rem;

  overflow-x: auto;

  overflow-y: hidden;

  padding-bottom: 1.25rem;

  padding-top: 0.35rem;

  scroll-behavior: smooth;

  -webkit-overflow-scrolling: touch;

  align-items: stretch;

}



/* Custom Scrollbar */

.brand-media-feed::-webkit-scrollbar {

  height: 8px;

}

.brand-media-feed::-webkit-scrollbar-track {

  background: var(--surface-hover);

  border-radius: var(--radius-full);

}

.brand-media-feed::-webkit-scrollbar-thumb {

  background: linear-gradient(90deg, #4A9157, #74F298);

  border-radius: var(--radius-full);

}



.brand-media-card {

  flex: 0 0 380px;

  width: 380px;

  max-width: 86vw;

  height: 480px;

  background: var(--surface-card-solid);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-md);

  overflow: hidden;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);

  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);

}



[data-theme="dark"] .brand-media-card {

  background: #111713;

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);

}



.brand-media-card:hover {

  transform: translateY(-4px);

  border-color: var(--brand-accent);

  box-shadow: 0 12px 30px rgba(74, 145, 87, 0.25);

}



.media-card-topbar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0.85rem 1.15rem;

  background: var(--surface-hover);

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

  font-size: 0.8rem;

  flex-shrink: 0;

}



.media-type-badge {

  font-weight: 700;

  font-size: 0.78rem;

  letter-spacing: 0.02em;

  display: inline-flex;

  align-items: center;

  gap: 0.4rem;

}



.badge-instagram { color: #E1306C; }

.badge-youtube { color: #FF0000; }

.badge-facebook { color: #1877F2; }

.badge-linkedin { color: #0A66C2; }

.badge-image { color: var(--brand-accent); }

.badge-video { color: var(--brand-green); }

.badge-generic { color: var(--muted-color); }



.media-card-caption-snippet {

  color: var(--muted-color);

  font-size: 0.75rem;

  max-width: 160px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



/* Media Card Content Area (Uniform Height Container) */

.media-card-content {

  flex: 1 1 auto;

  height: 360px;

  max-height: 360px;

  overflow: hidden;

  background: #080a08;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  position: relative;

}



/* Video Containers */

.media-video-container {

  width: 100%;

  height: 100%;

  background: #000;

  display: flex;

  align-items: center;

  justify-content: center;

}



.media-video-container iframe,

.media-video-container video {

  width: 100%;

  height: 100%;

  border: none;

  display: block;

}



/* Instagram Container */

.media-instagram-container {

  width: 100%;

  height: 100%;

  padding: 0.5rem;

  background: var(--surface-color);

  overflow-y: auto;

  overflow-x: hidden;

  display: flex;

  justify-content: center;

  align-items: flex-start;

}



.media-instagram-container .instagram-media {

  min-width: 100% !important;

  max-width: 100% !important;

  margin: 0 !important;

}



/* Image Container */

.media-image-container {

  width: 100%;

  height: 100%;

  overflow: hidden;

  background: #050806;

}



.media-image-container img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);

}



.brand-media-card:hover .media-image-container img {

  transform: scale(1.05);

}



/* Fallback Social Media Cards */

.fallback-embed-box {

  width: 100%;

  height: 100%;

  padding: 2rem 1.5rem;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  gap: 0.85rem;

  background: linear-gradient(180deg, var(--surface-card) 0%, var(--surface-hover) 100%);

}



.fallback-embed-box h4 {

  font-size: 1.05rem;

  font-weight: 700;

  color: var(--text-heading);

  margin: 0;

}



.fallback-embed-box p {

  color: var(--muted-color);

  font-size: 0.85rem;

  line-height: 1.45;

  margin: 0;

  max-width: 280px;

}



.media-card-footer-caption {

  padding: 0.75rem 1.15rem;

  font-size: 0.825rem;

  color: var(--muted-color);

  border-top: 1px solid var(--border-color);

  background: var(--surface-hover);

  line-height: 1.4;

  flex-shrink: 0;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



/* ------------------------------------------------------------

   Structured Multi-Section Portfolio (No Slider, Pure Responsive Grids)

   ------------------------------------------------------------ */

.portfolio-jump-bar {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0.85rem;

  flex-wrap: wrap;

  margin-top: 1rem;

  margin-bottom: 2rem;

}



.portfolio-jump-pill {

  display: inline-flex;

  align-items: center;

  gap: 0.65rem;

  padding: 0.7rem 1.4rem;

  border-radius: var(--radius-full);

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  color: var(--text-heading);

  font-weight: 700;

  font-size: 0.925rem;

  text-decoration: none;

  transition: all var(--transition-fast);

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);

}



.portfolio-jump-pill:hover {

  background: var(--surface-hover);

  border-color: var(--brand-accent);

  color: var(--brand-accent);

  transform: translateY(-2px);

  box-shadow: 0 8px 20px rgba(74, 145, 87, 0.18);

}



.portfolio-jump-pill .jump-count {

  font-size: 0.75rem;

  padding: 0.15rem 0.6rem;

  border-radius: var(--radius-full);

  background: rgba(74, 145, 87, 0.15);

  color: var(--brand-accent);

  font-weight: 800;

}



.portfolio-section-block {

  margin-bottom: 5.5rem;

  padding-top: 2rem;

  scroll-margin-top: calc(var(--nav-height) + 2rem);

  position: relative;

}



.portfolio-section-block:not(:first-of-type) {

  border-top: 1px solid var(--border-color);

  padding-top: 4.5rem;

}



.portfolio-section-header {

  display: block;

  width: 100%;

  margin-bottom: 2.5rem;

}



.portfolio-section-header .section-info {

  width: 100%;

  max-width: 100% !important;

}



.portfolio-section-header .section-title {

  margin-top: 0.5rem;

  margin-bottom: 0.75rem;

  font-size: clamp(1.85rem, 3.2vw, 2.6rem);

  width: 100%;

  max-width: 100%;

  line-height: 1.25;

}



.portfolio-section-desc-row {

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 1.5rem;

  width: 100%;

  flex-wrap: wrap;

}



.portfolio-section-header .section-desc {

  flex: 1 1 auto;

  max-width: 680px;

  font-size: 1.05rem;

  color: var(--muted-color);

  line-height: 1.6;

  margin: 0;

}



@media (max-width: 768px) {

  .portfolio-section-block {

    margin-bottom: 2.75rem !important;

    padding-top: 1.5rem !important;

  }

  .portfolio-section-block:not(:first-of-type) {

    padding-top: 2rem !important;

  }

  .portfolio-section-header {

    margin-bottom: 1.25rem !important;

  }

  .portfolio-section-desc-row {

    flex-direction: column !important;

    align-items: flex-start !important;

    gap: 0.75rem !important;

  }

  .portfolio-section-header .section-desc {

    flex: none !important;

    width: 100% !important;

    max-width: 100% !important;

  }

  .portfolio-section-count-badge {

    margin-left: 0 !important;

    margin-top: 0.25rem !important;

  }

}



.portfolio-section-count-badge {

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  padding: 0.55rem 1.15rem;

  border-radius: var(--radius-full);

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  color: var(--brand-accent);

  font-size: 0.85rem;

  font-weight: 700;

  white-space: nowrap;

  flex-shrink: 0;

  margin-left: auto;

}



/* Grids (Zero Sliders) */

.portfolio-media-grid {

  display: grid;

  gap: 1.75rem;

  width: 100%;

}



.portfolio-photo-grid {

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

  align-items: start;

}



.portfolio-video-grid {

  grid-template-columns: repeat(2, 1fr);

  gap: 2rem;

}



.portfolio-social-grid,

.portfolio-facebook-grid {

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

  align-items: start;

}



.portfolio-carousel-grid {

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

  align-items: start;

}



@media (max-width: 1200px) {

  .portfolio-photo-grid,

  .portfolio-carousel-grid,

  .portfolio-social-grid,

  .portfolio-facebook-grid {

    grid-template-columns: repeat(3, 1fr);

  }

}



@media (max-width: 900px) {

  .portfolio-photo-grid,

  .portfolio-carousel-grid,

  .portfolio-social-grid,

  .portfolio-facebook-grid {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (max-width: 600px) {

  .portfolio-photo-grid,

  .portfolio-carousel-grid,

  .portfolio-social-grid,

  .portfolio-facebook-grid,

  .portfolio-video-grid {

    grid-template-columns: 1fr;

  }

}



/* Base Card */

.portfolio-item-card {

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-lg);

  overflow: hidden;

  display: flex;

  flex-direction: column;

  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);

}



[data-theme="dark"] .portfolio-item-card {

  background: #111713;

  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);

}



.portfolio-item-card:hover {

  transform: translateY(-4px);

  border-color: var(--brand-accent);

  box-shadow: 0 14px 32px rgba(74, 145, 87, 0.22);

}



/* Photo Card */

.portfolio-photo-card .photo-visual-wrap {

  position: relative;

  width: 100%;

  aspect-ratio: 4 / 5; /* 4:5 Vertical Portrait Dimension */

  overflow: hidden;

  background: var(--surface-card, #f4f6f4);

  cursor: default;

}



.portfolio-photo-card .photo-visual-wrap img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);

}



.portfolio-photo-card:hover .photo-visual-wrap img {

  transform: scale(1.03);

}



.photo-overlay-action {

  display: none !important;

}



.photo-zoom-btn {

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  padding: 0.65rem 1.2rem;

  border-radius: var(--radius-full);

  background: #FFFFFF;

  color: #111111;

  font-weight: 700;

  font-size: 0.85rem;

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);

  transform: translateY(8px);

  transition: transform var(--transition-fast);

  border: none;

  cursor: pointer;

}



.portfolio-photo-card:hover .photo-zoom-btn {

  transform: translateY(0);

}



.portfolio-card-content {

  padding: 1.5rem;

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

  gap: 0.65rem;

}



.card-brand-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 0.75rem;

  margin-bottom: 0.75rem;

}



.card-brand-pill {

  font-weight: 700;

  font-size: 0.95rem;

  color: var(--text-heading);

  display: inline-flex;

  align-items: center;

  gap: 0.45rem;

}



.card-brand-pill::before {

  content: "";

  display: inline-block;

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: var(--brand-accent);

}



.card-category-pill {

  font-size: 0.75rem;

  color: var(--muted-color);

  background: var(--surface-hover);

  padding: 0.25rem 0.65rem;

  border-radius: var(--radius-full);

  border: 1px solid var(--border-color);

  font-weight: 600;

}



.card-item-title {

  font-size: 1.15rem;

  font-weight: 700;

  color: var(--text-heading);

  margin-bottom: 0.35rem;

  line-height: 1.35;

}



.card-campaign-subtitle {

  font-size: 0.9rem;

  color: var(--brand-accent);

  font-weight: 600;

  margin-bottom: 0.25rem;

}



.card-tags-row {

  display: flex;

  flex-wrap: wrap;

  gap: 0.4rem;

  margin-top: 0.35rem;

}



.card-mini-tag {

  font-size: 0.72rem;

  padding: 0.2rem 0.55rem;

  border-radius: var(--radius-full);

  background: rgba(74, 145, 87, 0.1);

  color: var(--brand-accent);

  border: 1px solid rgba(74, 145, 87, 0.2);

  font-weight: 600;

}



/* ------------------------------------------------------------

   Instagram Carousel Cards (4:5 Dimension, Multi-Slide Interactive)

   ------------------------------------------------------------ */

.portfolio-carousel-card {

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-lg);

  overflow: hidden;

  display: flex;

  flex-direction: column;

  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);

}



[data-theme="dark"] .portfolio-carousel-card {

  background: #111713;

  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);

}



.portfolio-carousel-card:hover {

  transform: translateY(-4px);

  border-color: var(--brand-accent);

  box-shadow: 0 14px 32px rgba(74, 145, 87, 0.22);

}



.carousel-insta-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0.85rem 1.15rem;

  background: var(--surface-hover);

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

}



.carousel-avatar-info {

  display: flex;

  align-items: center;

  gap: 0.65rem;

}



.carousel-insta-ring {

  width: 36px;

  height: 36px;

  border-radius: 50%;

  padding: 2px;

  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}



.carousel-avatar-img {

  width: 100%;

  height: 100%;

  border-radius: 50%;

  object-fit: cover;

  background: #1a1a1a;

  border: 2px solid var(--surface-card);

}



.carousel-handle-name {

  font-size: 0.85rem;

  font-weight: 700;

  color: var(--text-heading);

  line-height: 1.2;

}



.carousel-category-tag {

  font-size: 0.72rem;

  color: var(--muted-color);

  font-weight: 500;

}



.carousel-post-pill {

  font-size: 0.72rem;

  font-weight: 700;

  color: #E1306C;

  background: rgba(225, 48, 108, 0.1);

  padding: 0.2rem 0.55rem;

  border-radius: var(--radius-full);

  border: 1px solid rgba(225, 48, 108, 0.25);

  display: inline-flex;

  align-items: center;

  gap: 0.35rem;

}



/* Carousel Slide Viewer (Strict 4:5 Dimension) */

.carousel-viewer {

  position: relative;

  width: 100%;

  aspect-ratio: 4 / 5; /* 4:5 Portrait Dimension */

  overflow: hidden;

  background: #080c09;

  user-select: none;

}



.carousel-track {

  display: flex;

  width: 100%;

  height: 100%;

  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);

}



.carousel-slide {

  flex: 0 0 100%;

  width: 100%;

  height: 100%;

  position: relative;

  overflow: hidden;

}



.carousel-slide-bg {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  filter: none;

  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);

}



.carousel-slide:hover .carousel-slide-bg {

  transform: scale(1.03);

}



.carousel-slide-overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, transparent 35%);

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  padding: 1.25rem;

  box-sizing: border-box;

  pointer-events: none;

}



.carousel-slide-topbar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  width: 100%;

}



.carousel-slide-step {

  font-size: 0.72rem;

  font-weight: 800;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: #74F298;

  background: rgba(0, 0, 0, 0.6);

  padding: 0.25rem 0.65rem;

  border-radius: var(--radius-full);

  border: 1px solid rgba(116, 242, 152, 0.35);

  backdrop-filter: blur(4px);

}



.carousel-slide-counter {

  font-size: 0.75rem;

  font-weight: 800;

  color: #FFFFFF;

  background: rgba(0, 0, 0, 0.65);

  padding: 0.25rem 0.6rem;

  border-radius: var(--radius-full);

  backdrop-filter: blur(4px);

  border: 1px solid rgba(255, 255, 255, 0.2);

}



.carousel-slide-body {

  width: 100%;

}



.carousel-slide-title {

  color: #FFFFFF;

  font-size: clamp(1.15rem, 2vw, 1.4rem);

  font-weight: 800;

  line-height: 1.25;

  margin: 0 0 0.6rem 0;

  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75);

}



.carousel-slide-desc {

  color: rgba(255, 255, 255, 0.88);

  font-size: 0.86rem;

  line-height: 1.5;

  margin: 0 0 0.9rem 0;

  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);

}



.carousel-swipe-hint {

  display: inline-flex;

  align-items: center;

  gap: 0.45rem;

  font-size: 0.75rem;

  font-weight: 700;

  color: var(--brand-accent);

  background: rgba(0, 0, 0, 0.7);

  padding: 0.3rem 0.75rem;

  border-radius: var(--radius-full);

  border: 1px solid rgba(74, 145, 87, 0.4);

  backdrop-filter: blur(4px);

  pointer-events: auto;

}



/* Arrow Navigation */

.carousel-nav-btn {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  width: 36px;

  height: 36px;

  border-radius: 50%;

  background: rgba(0, 0, 0, 0.65);

  border: 1px solid rgba(255, 255, 255, 0.3);

  color: #FFFFFF;

  font-size: 1.25rem;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  z-index: 10;

  transition: all var(--transition-fast);

  backdrop-filter: blur(4px);

  line-height: 1;

}



.carousel-nav-btn:hover {

  background: var(--brand-accent);

  border-color: var(--brand-accent);

  color: #FFFFFF;

  transform: translateY(-50%) scale(1.1);

}



.carousel-nav-prev {

  left: 0.65rem;

}



.carousel-nav-next {

  right: 0.65rem;

}



.carousel-nav-btn.is-disabled {

  opacity: 0;

  pointer-events: none;

}



/* Dots Indicator */

.carousel-dots-wrap {

  position: absolute;

  bottom: 0.75rem;

  left: 0;

  right: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0.4rem;

  z-index: 10;

}



.carousel-dot {

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.4);

  cursor: pointer;

  transition: all 0.25s ease;

}



.carousel-dot.active {

  width: 18px;

  border-radius: var(--radius-full);

  background: var(--brand-accent);

  box-shadow: 0 0 8px rgba(116, 242, 152, 0.6);

}



/* Instagram Actions Bar */

.carousel-insta-actions {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0.75rem 1.15rem 0.4rem;

  background: var(--surface-card);

}



.carousel-left-icons {

  display: flex;

  align-items: center;

  gap: 1rem;

}



.insta-icon-btn {

  background: none;

  border: none;

  padding: 0;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--text-heading);

  transition: transform 0.2s ease, color 0.2s ease;

}



.insta-icon-btn:hover {

  transform: scale(1.15);

  color: var(--brand-accent);

}



.insta-heart-btn.is-liked {

  color: #E1306C;

}



.insta-heart-btn.is-liked svg {

  fill: #E1306C;

  stroke: #E1306C;

}



.carousel-meta-box {

  padding: 0.85rem 1.15rem;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 0.5rem;

  border-top: 1px solid var(--border-color);

  background: var(--surface-card);

}



.carousel-insta-link {

  font-size: 0.8rem;

  font-weight: 700;

  color: var(--brand-accent);

  text-decoration: none;

  display: inline-flex;

  align-items: center;

  gap: 0.35rem;

  margin-top: 0;

  transition: color var(--transition-fast);

}



.carousel-insta-link:hover {

  color: #fff;

  text-decoration: underline;

}



/* Video Card */

.portfolio-video-card .video-player-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  position: relative;
  overflow: hidden;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}



.portfolio-video-card .video-player-wrap iframe,

.portfolio-video-card .video-player-wrap video {

  width: 100%;

  height: 100%;

  border: none;

  display: block;

}



.video-card-topbar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0.85rem 1.35rem;

  background: var(--surface-hover);

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

  font-size: 0.85rem;

}



.video-motion-badge {

  display: inline-flex;

  align-items: center;

  gap: 0.45rem;

  font-weight: 700;

  color: #FF0000;

  font-size: 0.8rem;

}



.video-action-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1rem;

  margin-top: 1rem;

  padding-top: 0.9rem;

  border-top: 1px solid var(--border-color);

}



.video-watch-btn {

  display: inline-flex;

  align-items: center;

  gap: 0.4rem;

  font-size: 0.85rem;

  font-weight: 700;

  color: var(--brand-accent);

  text-decoration: none;

  transition: color var(--transition-fast);

}



.video-watch-btn:hover {

  color: var(--brand-green);

  text-decoration: underline;

}



/* Social Card */

.portfolio-social-card .social-card-topbar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0.85rem 1.25rem;

  background: var(--surface-hover);

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

}



.social-platform-badge {

  display: inline-flex;

  align-items: center;

  gap: 0.45rem;

  font-weight: 700;

  font-size: 0.8rem;

}



.social-embed-wrap {

  padding: 1rem;

  min-height: 380px;

  max-height: 520px;

  overflow-y: auto;

  overflow-x: hidden;

  background: var(--surface-color);

  display: flex;

  justify-content: center;

  align-items: flex-start;

}



.social-embed-wrap .instagram-media {

  min-width: 100% !important;

  max-width: 100% !important;

  margin: 0 !important;

}



.social-card-footer {

  padding: 0.85rem 1.25rem;

  background: var(--surface-hover);

  border-top: 1px solid var(--border-color);

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 0.75rem;

}



.social-footer-caption {

  font-size: 0.825rem;

  color: var(--muted-color);

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}



.social-footer-btn {

  font-size: 0.8rem;

  font-weight: 700;

  color: var(--brand-accent);

  text-decoration: none;

  display: inline-flex;

  align-items: center;

  gap: 0.3rem;

  white-space: nowrap;

}



/* ------------------------------------------------------------

   Instagram Reels Cards (9:16 Vertical Video Motion UI)

   ------------------------------------------------------------ */

.portfolio-reels-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr) !important;

  gap: 1.25rem !important;

  align-items: start;

}



@media (max-width: 1024px) {

  .portfolio-reels-grid {

    grid-template-columns: repeat(2, 1fr) !important;

    gap: 1rem !important;

  }

}



@media (max-width: 600px) {

  .portfolio-reels-grid {

    grid-template-columns: 1fr !important;

    gap: 1.25rem !important;

  }

}



.portfolio-reel-card {

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-lg);

  overflow: hidden;

  display: flex;

  flex-direction: column;

  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);

  position: relative;

}



[data-theme="dark"] .portfolio-reel-card {

  background: #101412;

  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);

}



.portfolio-reel-card:hover {

  transform: translateY(-5px);

  border-color: #E1306C;

  box-shadow: 0 16px 36px rgba(225, 48, 108, 0.22);

}



.reel-top-bar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0.75rem 1rem;

  background: var(--surface-hover);

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

  z-index: 2;

}



.reel-gradient-badge {

  display: inline-flex;

  align-items: center;

  gap: 0.4rem;

  font-weight: 700;

  font-size: 0.8rem;

  color: #fff;

  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);

  padding: 0.25rem 0.65rem;

  border-radius: 999px;

  box-shadow: 0 2px 8px rgba(225, 48, 108, 0.3);

}



.reel-media-wrap {
  width: 100%;
  aspect-ratio: 1 / 1.15;
  background: var(--surface-card);
  overflow: hidden !important;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  transition: min-height 0.2s ease, height 0.2s ease;
}

.reel-embed-frame {
  width: 100% !important;
  min-height: 100% !important;
  border: none !important;
  background: transparent !important;
  display: block !important;
}



.reel-cover-img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);

}



.portfolio-reel-card:hover .reel-cover-img {

  transform: scale(1.05);

}



.reel-overlay-gradient {

  position: absolute;

  inset: 0;

  background: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.2) 100%);

  pointer-events: none;

}



.reel-play-btn {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 58px;

  height: 58px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.22);

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

  border: 1.5px solid rgba(255, 255, 255, 0.6);

  color: #fff;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);

  z-index: 3;

}



.reel-play-btn svg {

  margin-left: 3px;

}



.portfolio-reel-card:hover .reel-play-btn {

  transform: translate(-50%, -50%) scale(1.15);

  background: linear-gradient(45deg, #f09433, #dc2743, #bc1888);

  border-color: transparent;

  box-shadow: 0 0 20px rgba(225, 48, 108, 0.6);

}



.reel-video-bottom-info {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  padding: 1rem;

  color: #fff;

  z-index: 2;

  display: flex;

  flex-direction: column;

  gap: 0.35rem;

}



.reel-creator-handle {

  display: flex;

  align-items: center;

  gap: 0.4rem;

  font-weight: 700;

  font-size: 0.825rem;

  text-shadow: 0 1px 3px rgba(0,0,0,0.8);

}



.reel-avatar-dot {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: #E1306C;

  display: inline-block;

}



.reel-verified {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 14px;

  height: 14px;

  border-radius: 50%;

  background: #1877F2;

  color: #fff;

  font-size: 0.6rem;

  font-weight: bold;

}



.reel-caption-line {

  font-size: 0.85rem;

  line-height: 1.4;

  color: #f3f4f6;

  text-shadow: 0 1px 3px rgba(0,0,0,0.8);

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

}



.reel-audio-tag {

  display: flex;

  align-items: center;

  gap: 0.35rem;

  font-size: 0.725rem;

  color: rgba(255, 255, 255, 0.85);

  margin-top: 0.2rem;

}



.reel-card-footer {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0.85rem 1rem;

  background: var(--surface-card);

  border-top: 1px solid var(--border-color);

}



.reel-metrics {

  display: flex;

  align-items: center;

  gap: 0.75rem;

  font-size: 0.8rem;

  font-weight: 600;

  color: var(--muted-color);

}



.reel-launch-btn {

  display: inline-flex;

  align-items: center;

  gap: 0.35rem;

  font-size: 0.8rem;

  font-weight: 700;

  color: #E1306C;

  text-decoration: none;

  transition: color var(--transition-fast), transform var(--transition-fast);

}



.reel-launch-btn:hover {

  color: #f09433;

  transform: translateX(2px);

}



/* ------------------------------------------------------------

   Facebook Post Cards (Authentic Social UI)

   ------------------------------------------------------------ */

.portfolio-facebook-card {

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-lg);

  overflow: hidden;

  display: flex;

  flex-direction: column;

  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);

}



[data-theme="dark"] .portfolio-facebook-card {

  background: #111713;

  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);

}



.portfolio-facebook-card:hover {

  transform: translateY(-4px);

  border-color: #1877F2;

  box-shadow: 0 14px 32px rgba(24, 119, 242, 0.22);

}



.fb-card-topbar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0.85rem 1.25rem;

  background: var(--surface-hover);

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

}



.fb-badge {

  display: inline-flex;

  align-items: center;

  gap: 0.45rem;

  font-weight: 700;

  font-size: 0.825rem;

  color: #1877F2;

}



.fb-card-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 1rem 1.25rem 0.75rem;

  gap: 0.75rem;

}



.fb-author-info {

  display: flex;

  align-items: center;

  gap: 0.75rem;

}



.fb-avatar {

  width: 42px;

  height: 42px;

  border-radius: 50%;

  background: #1877F2;

  color: #FFFFFF;

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: 800;

  font-size: 1.1rem;

  box-shadow: 0 2px 8px rgba(24, 119, 242, 0.3);

  overflow: hidden;

  flex-shrink: 0;

}



.fb-avatar img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.fb-author-name {

  font-size: 0.95rem;

  font-weight: 700;

  color: var(--text-heading);

  display: flex;

  align-items: center;

  gap: 0.35rem;

  line-height: 1.2;

}



.fb-verified-badge {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 14px;

  height: 14px;

  border-radius: 50%;

  background: #1877F2;

  color: #FFFFFF;

  font-size: 0.65rem;

  font-weight: 900;

}



.fb-meta-sub {

  font-size: 0.75rem;

  color: var(--muted-color);

  margin-top: 0.15rem;

}



.fb-post-caption-box {

  padding: 0 1.25rem 0.85rem;

  font-size: 0.925rem;

  color: var(--text-color);

  line-height: 1.5;

}



.fb-post-caption-box .fb-hashtags {

  font-size: 0.825rem;

  color: #1877F2;

  font-weight: 600;

  margin-top: 0.35rem;

}



.fb-media-wrap {

  width: 100%;

  background: #080a08;

  overflow: hidden;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

}



.fb-media-wrap img {

  width: 100%;

  height: auto;

  max-height: 480px;

  object-fit: cover;

  display: block;

  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);

}



.portfolio-facebook-card:hover .fb-media-wrap img {

  transform: scale(1.03);

}



.fb-reactions-bar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0.75rem 1.25rem;

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

  font-size: 0.8rem;

  color: var(--muted-color);

}



.fb-reactions-left {

  display: flex;

  align-items: center;

  gap: 0.35rem;

}



.fb-reaction-icons {

  display: inline-flex;

  align-items: center;

}



.fb-icon-circle {

  width: 18px;

  height: 18px;

  border-radius: 50%;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  font-size: 0.65rem;

  color: #FFFFFF;

  border: 1.5px solid var(--surface-card);

}



.fb-icon-like { background: #1877F2; margin-right: -4px; z-index: 2; }

.fb-icon-heart { background: #FA3E3E; z-index: 1; }



.fb-actions-row {

  display: flex;

  align-items: center;

  justify-content: space-around;

  padding: 0.65rem 1rem;

  background: var(--surface-hover);

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

}



.fb-action-btn {

  background: none;

  border: none;

  padding: 0.35rem 0.65rem;

  font-size: 0.85rem;

  font-weight: 600;

  color: var(--muted-color);

  cursor: pointer;

  display: inline-flex;

  align-items: center;

  gap: 0.4rem;

  border-radius: var(--radius-sm);

  transition: all var(--transition-fast);

}



.fb-action-btn:hover {

  background: var(--surface-card);

  color: #1877F2;

}



.fb-action-btn.is-active {

  color: #1877F2;

}



.fb-card-footer {

  padding: 0.85rem 1.25rem;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 0.75rem;

  background: var(--surface-card);

}



.fb-direct-link {

  font-size: 0.85rem;

  font-weight: 700;

  color: #1877F2;

  text-decoration: none;

  display: inline-flex;

  align-items: center;

  gap: 0.4rem;

  transition: text-decoration 0.2s ease;

}



.fb-direct-link:hover {

  text-decoration: underline;

}



/* Lightbox Modal */

.portfolio-lightbox-backdrop {

  position: fixed;

  inset: 0;

  background: rgba(0, 0, 0, 0.88);

  backdrop-filter: blur(8px);

  z-index: 99999;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 2rem;

  animation: fadeIn 0.25s ease-out;

}



.portfolio-lightbox-dialog {

  position: relative;

  max-width: 90vw;

  max-height: 90vh;

  display: flex;

  flex-direction: column;

  align-items: center;

  background: #0e120f;

  border: 1px solid rgba(74, 145, 87, 0.35);

  border-radius: var(--radius-lg);

  overflow: hidden;

  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8);

}



.portfolio-lightbox-close {

  position: absolute;

  top: 1rem;

  right: 1.25rem;

  width: 40px;

  height: 40px;

  border-radius: 50%;

  background: rgba(0, 0, 0, 0.65);

  border: 1px solid rgba(255, 255, 255, 0.25);

  color: #FFFFFF;

  font-size: 1.6rem;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  z-index: 10;

  line-height: 1;

  transition: all var(--transition-fast);

}



.portfolio-lightbox-close:hover {

  background: var(--brand-accent);

  color: #FFFFFF;

  border-color: var(--brand-accent);

}



.portfolio-lightbox-dialog img {

  max-width: 85vw;

  max-height: 70vh;

  object-fit: contain;

  display: block;

}



.portfolio-lightbox-caption {

  padding: 1.25rem 1.75rem;

  width: 100%;

  background: #141a16;

  border-top: 1px solid rgba(255, 255, 255, 0.08);

}



.portfolio-lightbox-caption h4 {

  color: #FFFFFF;

  font-size: 1.15rem;

  margin: 0.35rem 0 0.2rem;

}



.portfolio-lightbox-caption p {

  color: rgba(255, 255, 255, 0.7);

  font-size: 0.9rem;

  margin: 0;

}



/* ------------------------------------------------------------

   Social Platform Cards (Echoes Across Platforms)

   ------------------------------------------------------------ */

.social-platform-card {

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-md);

  padding: 1.75rem 1.5rem;

  text-decoration: none;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  gap: 1.25rem;

  box-shadow: var(--card-shadow);

  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);

  position: relative;

  overflow: hidden;

}



[data-theme="dark"] .social-platform-card {

  background: rgba(20, 26, 22, 0.75);

  backdrop-filter: blur(10px);

}



.social-platform-card:hover {

  transform: translateY(-4px);

  border-color: var(--brand-accent);

  box-shadow: 0 12px 28px rgba(74, 145, 87, 0.2);

  background: var(--surface-hover);

}



.social-platform-header {

  display: flex;

  align-items: center;

  gap: 0.85rem;

}



.social-icon-wrapper {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 46px;

  height: 46px;

  border-radius: var(--radius-sm);

  background: var(--surface-hover);

  border: 1px solid var(--border-color);

  flex-shrink: 0;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

}



.social-platform-name {

  font-size: 1.15rem;

  font-weight: 700;

  color: var(--text-heading);

  flex-grow: 1;

}



.social-arrow-icon {

  font-size: 1.1rem;

  color: var(--muted-color);

  transition: transform var(--transition-fast), color var(--transition-fast);

}



.social-platform-card:hover .social-arrow-icon {

  transform: translate(2px, -2px);

  color: var(--brand-accent);

}



.social-display-handle {

  font-size: 0.95rem;

  font-weight: 600;

  color: var(--text-color);

  line-height: 1.4;

  word-break: break-all;

}



.social-action-cta {

  display: flex;

  align-items: center;

  justify-content: space-between;

  font-size: 0.825rem;

  font-weight: 700;

  color: var(--brand-accent);

  border-top: 1px solid var(--border-color);

  padding-top: 0.85rem;

}



.social-dot-live {

  width: 8px;

  height: 8px;

  background: #22c55e;

  border-radius: 50%;

  box-shadow: 0 0 8px #22c55e;

}



/* ------------------------------------------------------------

   Contact Page & Form

   ------------------------------------------------------------ */

.contact-hero-grid {

  display: grid;

  grid-template-columns: 1.35fr 0.9fr;

  gap: 3rem;

  align-items: center;

  margin-bottom: 3.5rem;

}



.contact-hero-visual-stage {

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

  padding: 1rem 0;

}



.contact-card-stage-wrap {

  position: relative;

  max-width: 460px;

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

}



.contact-aura-glow {

  position: absolute;

  width: 340px;

  height: 340px;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(116, 242, 152, 0.28) 0%, rgba(74, 145, 87, 0.12) 45%, transparent 70%);

  filter: blur(35px);

  z-index: 0;

  pointer-events: none;

}



/* Contact Character Stage (Black & White Animated Sticker Icon) */

.contact-character-stage {

  position: relative;

  z-index: 2;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  width: 100%;

}



.contact-character-gif {

  width: 100%;

  max-width: 440px;

  height: auto;

  object-fit: contain;

  display: block;

  filter: drop-shadow(0 20px 35px rgba(0, 0, 0, 0.16));

  user-select: none;

}



[data-theme="dark"] .contact-character-gif {

  filter: drop-shadow(0 22px 42px rgba(0, 0, 0, 0.65));

}



.contact-quick-actions-bar {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0.85rem;

  margin-top: 0.5rem;

  z-index: 3;

  width: 100%;

}



.contact-quick-actions-bar .contact-quick-btn {

  padding: 0.65rem 1.35rem;

  font-size: 0.875rem;

  font-weight: 700;

  border-radius: 999px;

  display: inline-flex;

  align-items: center;

  gap: 0.45rem;

  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);

}



.contact-image-card {

  position: relative;

  z-index: 1;

  width: 100%;

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  border-radius: 20px;

  overflow: hidden;

  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.1);

  transition: transform var(--transition-normal), box-shadow var(--transition-normal);

}



.contact-image-card:hover {

  transform: translateY(-4px);

  box-shadow: 0 28px 55px rgba(74, 145, 87, 0.2);

}



[data-theme="dark"] .contact-image-card {

  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.55), 0 0 30px rgba(116, 242, 152, 0.1);

}



.contact-card-topbar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0.75rem 1.25rem;

  background: var(--surface-color);

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

}



.contact-status-indicator {

  display: flex;

  align-items: center;

  gap: 0.5rem;

  font-size: 0.8rem;

  font-weight: 700;

  color: var(--text-heading);

  letter-spacing: 0.02em;

}



.contact-live-dot {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: #22c55e;

  box-shadow: 0 0 8px rgba(34, 197, 94, 0.7);

  display: inline-block;

  animation: pulseDot 2s infinite;

}



.contact-live-status {

  font-size: 0.75rem;

  font-weight: 600;

  color: var(--brand-accent);

}



.contact-card-img-wrap {

  position: relative;

  width: 100%;

  overflow: hidden;

  line-height: 0;

  background: #F4F6F4;

}



[data-theme="dark"] .contact-card-img-wrap {

  background: #141A16;

}



.contact-hero-3d-img {

  width: 100%;

  height: auto;

  display: block;

  object-fit: cover;

  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);

}



.contact-image-card:hover .contact-hero-3d-img {

  transform: scale(1.03);

}



.contact-card-actions-bar {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 0.75rem;

  padding: 0.85rem 1.15rem;

  background: var(--surface-card);

  border-top: 1px solid var(--border-color);

}



.contact-quick-btn {

  padding: 0.5rem 0.85rem !important;

  font-size: 0.85rem !important;

  border-radius: 10px !important;

  justify-content: center !important;

  text-decoration: none !important;

  gap: 0.45rem !important;

}



@media (max-width: 992px) {

  .contact-hero-grid {

    grid-template-columns: 1fr;

    gap: 2.5rem;

    text-align: center;

  }

  .contact-hero-content {

    display: flex;

    flex-direction: column;

    align-items: center;

  }

  .contact-trust-chips {

    justify-content: center;

  }

  .contact-card-stage-wrap {

    max-width: 380px;

  }

  .contact-aura-glow {

    width: 260px;

    height: 260px;

  }

}



.contact-wrapper {

  display: grid;

  grid-template-columns: 1fr 1.35fr;

  gap: 3rem;

  align-items: start;

}



.contact-info-card {

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-lg);

  padding: 2.75rem 2.25rem;

  display: flex;

  flex-direction: column;

  gap: 1.75rem;

  box-shadow: var(--card-shadow);

}



.contact-detail-item {

  display: flex;

  gap: 1.25rem;

  align-items: flex-start;

}



.contact-detail-icon {

  width: 48px;

  height: 48px;

  border-radius: 14px;

  background: rgba(74, 145, 87, 0.12);

  border: 1px solid rgba(74, 145, 87, 0.3);

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--brand-green-dark);

  flex-shrink: 0;

  transition: transform 0.3s ease;

}



[data-theme="dark"] .contact-detail-icon {

  color: var(--brand-accent);

  background: rgba(116, 242, 152, 0.12);

  border: 1px solid rgba(116, 242, 152, 0.25);

}



.contact-detail-icon svg {

  width: 22px;

  height: 22px;

}



.global-presence-badges {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 0.75rem;

  margin-top: 0.75rem;

}



.presence-badge {

  background: var(--surface-color);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-sm);

  padding: 0.75rem 0.5rem;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  gap: 0.25rem;

  transition: transform 0.3s ease, border-color 0.3s ease;

}



.presence-badge:hover {

  border-color: var(--brand-green);

  transform: translateY(-3px);

}



.presence-flag {

  font-size: 1.5rem;

  line-height: 1;

}



.presence-info strong {

  display: block;

  font-size: 0.85rem;

  color: var(--text-heading);

  font-weight: 700;

}



.presence-info span {

  display: block;

  font-size: 0.725rem;

  color: var(--muted-color);

  text-transform: uppercase;

  letter-spacing: 0.05em;

}



.contact-form-card {

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-lg);

  padding: 2.75rem 2.25rem;

  box-shadow: var(--card-shadow);

}



.form-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 1.25rem;

}



.form-group.full {

  grid-column: span 2;

}



.form-group {

  display: flex;

  flex-direction: column;

  gap: 0.45rem;

}



.form-label {

  font-size: 0.875rem;

  font-weight: 600;

  color: var(--text-heading);

}



.form-control {

  background: var(--surface-color);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-sm);

  padding: 0.85rem 1.15rem;

  color: var(--text-color);

  font-family: inherit;

  font-size: 0.95rem;

  width: 100%;

  transition: all var(--transition-fast);

}



select.form-control {

  appearance: none;

  -webkit-appearance: none;

  -moz-appearance: none;

  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='%232E7142' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

  background-repeat: no-repeat;

  background-position: right 1.15rem center;

  background-size: 1.1rem;

  padding-right: 2.75rem;

  cursor: pointer;

}



.form-control option {

  background: var(--surface-card);

  color: var(--text-color);

  padding: 0.5rem;

}



[data-theme="dark"] .form-control {

  background-color: rgba(13, 18, 15, 0.9);

  color: #FFFFFF;

  border-color: rgba(255, 255, 255, 0.12);

}



[data-theme="dark"] select.form-control {

  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='%2374F298' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

}



[data-theme="dark"] .form-control option {

  background-color: #0d120f;

  color: #FFFFFF;

}



.form-control:focus {

  outline: none;

  border-color: var(--brand-accent);

  box-shadow: 0 0 12px rgba(74, 145, 87, 0.25);

}



/* ------------------------------------------------------------

   About Page - Culture Section ("Think. Create. Deliver.")

   ------------------------------------------------------------ */

.culture-banner {

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-lg);

  padding: clamp(2rem, 4vw, 3.5rem);

  margin-bottom: 4rem;

  position: relative;

  overflow: hidden;

  box-shadow: var(--card-shadow);

}



.culture-banner::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 3px;

  background: linear-gradient(90deg, var(--brand-green-dark), var(--brand-accent), var(--brand-green));

}



.culture-headline {

  font-family: var(--font-display);

  font-size: clamp(2rem, 4.5vw, 3.5rem);

  font-weight: 800;

  letter-spacing: -0.02em;

  line-height: 1.15;

  margin-bottom: 1.5rem;

}



.culture-triad {

  display: inline-block;

  font-family: var(--font-mono);

  font-size: clamp(0.95rem, 2vw, 1.25rem);

  font-weight: 700;

  letter-spacing: 0.12em;

  padding: 0.5rem 1.25rem;

  border-radius: var(--radius-full);

  background: rgba(74, 145, 87, 0.12);

  border: 1px solid rgba(74, 145, 87, 0.35);

  color: var(--brand-accent);

  margin-bottom: 1.5rem;

}



.culture-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 2rem;

  margin-top: 2.5rem;

}



.culture-card {

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-md);

  padding: 2.25rem 2rem;

  transition: all var(--transition-normal);

  position: relative;

  overflow: hidden;

}



.culture-card:hover {

  transform: translateY(-6px);

  border-color: var(--border-hover);

  box-shadow: var(--card-glow);

}



.culture-card-icon {

  width: 56px;

  height: 56px;

  border-radius: 14px;

  background: rgba(74, 145, 87, 0.12);

  border: 1px solid rgba(74, 145, 87, 0.25);

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 1.25rem;

  color: var(--brand-green-dark);

  transition: transform 0.3s ease, background 0.3s ease;

}



[data-theme="dark"] .culture-card-icon {

  color: var(--brand-accent);

  background: rgba(116, 242, 152, 0.12);

  border: 1px solid rgba(116, 242, 152, 0.25);

}



.culture-card:hover .culture-card-icon {

  transform: scale(1.1);

  background: rgba(74, 145, 87, 0.2);

}



[data-theme="dark"] .culture-card:hover .culture-card-icon {

  background: rgba(116, 242, 152, 0.2);

}



.culture-card-icon svg,

.culture-card-icon img {

  width: 28px;

  height: 28px;

  object-fit: contain;

}



.culture-card-title {

  font-size: 1.35rem;

  color: var(--text-heading);

  margin-bottom: 0.75rem;

}



.culture-card-desc {

  font-size: 0.95rem;

  color: var(--muted-color);

  line-height: 1.6;

}



/* ------------------------------------------------------------

   About Page - Vision & Mission 360 Ecosystem

   ------------------------------------------------------------ */

.vision-mission-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 2.5rem;

  align-items: stretch;

}



.vision-card, .mission-card {

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-lg);

  padding: clamp(2.25rem, 4vw, 3.5rem);

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  box-shadow: var(--card-shadow);

  position: relative;

  overflow: hidden;

}



.vision-formula-badge {

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  font-family: var(--font-mono);

  font-size: 0.85rem;

  font-weight: 700;

  padding: 0.75rem 1.25rem;

  border-radius: var(--radius-md);

  background: rgba(74, 145, 87, 0.12);

  border: 1px solid rgba(74, 145, 87, 0.35);

  color: var(--brand-accent);

  margin-top: 2rem;

  letter-spacing: 0.05em;

  flex-wrap: wrap;

}



.ecosystem-360-wrap {

  margin-top: 2rem;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 1.5rem;

  background: var(--bg-darker);

  border-radius: var(--radius-md);

  border: 1px dashed var(--border-color);

}



.ecosystem-wheel {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 0.75rem;

  width: 100%;

}



.ecosystem-node {

  background: var(--surface-color);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-sm);

  padding: 0.65rem 0.6rem;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0.45rem;

  text-align: center;

  font-size: 0.825rem;

  font-weight: 700;

  color: var(--text-heading);

  transition: all var(--transition-fast);

}



.ecosystem-node svg {

  width: 16px;

  height: 16px;

  color: var(--brand-green-dark);

  flex-shrink: 0;

}



[data-theme="dark"] .ecosystem-node svg {

  color: var(--brand-accent);

}



.ecosystem-node:hover {

  border-color: var(--brand-green);

  background: var(--surface-hover);

  color: var(--brand-green-dark);

  transform: translateY(-2px);

}



[data-theme="dark"] .ecosystem-node:hover {

  color: var(--brand-accent);

}



/* ------------------------------------------------------------

   Board of Directors (Leadership Section)

   ------------------------------------------------------------ */

.board-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 2rem;

  margin-top: 3.5rem;

}



.board-card {

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-lg);

  overflow: hidden;

  display: flex;

  flex-direction: column;

  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), 

              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), 

              border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1);

  box-shadow: var(--card-shadow);

  position: relative;

  text-align: center;

}



.board-card::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 4px;

  background: linear-gradient(90deg, var(--brand-green), var(--brand-accent));

  opacity: 0.6;

  transition: opacity 0.3s ease;

}



.board-card:hover {

  transform: translateY(-8px);

  border-color: rgba(74, 145, 87, 0.45);

  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.25), 

              0 0 0 1px rgba(116, 242, 152, 0.2);

}



.board-card:hover::before {

  opacity: 1;

}



.board-photo-wrap {

  position: relative;

  width: 140px;

  height: 140px;

  margin: 2.25rem auto 1.25rem;

  border-radius: 50%;

  padding: 4px;

  background: linear-gradient(135deg, rgba(74, 145, 87, 0.5), rgba(116, 242, 152, 0.35));

  box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.3),

              0 0 0 1px rgba(255, 255, 255, 0.08);

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 

              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}



.board-photo {

  width: 100%;

  height: 100%;

  border-radius: 50%;

  object-fit: cover;

  object-position: center;

  display: block;

  background: var(--bg-darker);

}



.board-card:hover .board-photo-wrap {

  transform: scale(1.06);

  box-shadow: 0 16px 32px -4px rgba(74, 145, 87, 0.35),

              0 0 0 2px var(--brand-accent);

}



.board-photo-overlay {

  display: none;

}



.board-content {

  padding: 0 1.75rem 2rem;

  display: flex;

  flex-direction: column;

  align-items: center;

  flex-grow: 1;

}



.board-role-badge {

  display: inline-block;

  font-family: var(--font-mono);

  font-size: 0.775rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  color: var(--brand-accent);

  background: rgba(74, 145, 87, 0.12);

  border: 1px solid rgba(74, 145, 87, 0.3);

  padding: 0.35rem 0.95rem;

  border-radius: var(--radius-full);

  margin-bottom: 0.85rem;

}



.board-name {

  font-family: var(--font-display);

  font-size: 1.4rem;

  font-weight: 700;

  color: var(--text-heading);

  margin-bottom: 0.85rem;

  line-height: 1.25;

}



.board-bio {

  font-size: 0.925rem;

  color: var(--muted-color);

  line-height: 1.65;

  margin-bottom: 1.75rem;

  flex-grow: 1;

  text-align: center;

}



.board-footer {

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-top: 1px solid var(--border-color);

  padding-top: 1.15rem;

  margin-top: auto;

}



.board-social-links {

  display: flex;

  align-items: center;

  gap: 0.5rem;

  flex-wrap: wrap;

}



.board-social-btn {

  display: inline-flex;

  align-items: center;

  gap: 0.4rem;

  font-size: 0.8rem;

  font-weight: 600;

  padding: 0.35rem 0.8rem;

  border-radius: var(--radius-full);

  text-decoration: none;

  transition: all var(--transition-fast);

}



.board-social-linkedin {

  color: #0A66C2;

  background: rgba(10, 102, 194, 0.08);

  border: 1px solid rgba(10, 102, 194, 0.22);

}



.board-social-linkedin:hover {

  background: #0A66C2;

  color: #FFFFFF;

  border-color: #0A66C2;

  transform: translateY(-2px);

  box-shadow: 0 4px 12px rgba(10, 102, 194, 0.3);

}



.board-social-instagram {

  color: #E1306C;

  background: rgba(225, 48, 108, 0.08);

  border: 1px solid rgba(225, 48, 108, 0.22);

}



.board-social-instagram:hover {

  background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF);

  color: #FFFFFF;

  border-color: transparent;

  transform: translateY(-2px);

  box-shadow: 0 4px 12px rgba(221, 42, 123, 0.35);

}



.board-social-facebook {

  color: #1877F2;

  background: rgba(24, 119, 242, 0.08);

  border: 1px solid rgba(24, 119, 242, 0.22);

}



.board-social-facebook:hover {

  background: #1877F2;

  color: #FFFFFF;

  border-color: #1877F2;

  transform: translateY(-2px);

  box-shadow: 0 4px 12px rgba(24, 119, 242, 0.35);

}



.board-social-telegram {

  color: #24A1DE;

  background: rgba(36, 161, 222, 0.08);

  border: 1px solid rgba(36, 161, 222, 0.22);

}



.board-social-telegram:hover {

  background: #24A1DE;

  color: #FFFFFF;

  border-color: #24A1DE;

  transform: translateY(-2px);

  box-shadow: 0 4px 12px rgba(36, 161, 222, 0.35);

}



.board-social-snapchat {

  color: #B59300;

  background: rgba(255, 252, 0, 0.15);

  border: 1px solid rgba(220, 190, 0, 0.3);

}



.board-social-snapchat:hover {

  background: #FFFC00;

  color: #000000;

  border-color: #E6CE00;

  transform: translateY(-2px);

  box-shadow: 0 4px 12px rgba(255, 252, 0, 0.4);

}



.board-social-twitter {

  color: #0F1419;

  background: rgba(15, 20, 25, 0.06);

  border: 1px solid rgba(15, 20, 25, 0.18);

}



.board-social-twitter:hover {

  background: #000000;

  color: #FFFFFF;

  border-color: #000000;

  transform: translateY(-2px);

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);

}



[data-theme="dark"] .board-social-linkedin {

  color: #70B5F9;

  background: rgba(112, 181, 249, 0.12);

  border-color: rgba(112, 181, 249, 0.28);

}



[data-theme="dark"] .board-social-linkedin:hover {

  background: #0A66C2;

  color: #FFFFFF;

}



[data-theme="dark"] .board-social-instagram {

  color: #FA7EAA;

  background: rgba(250, 126, 170, 0.12);

  border-color: rgba(250, 126, 170, 0.28);

}



[data-theme="dark"] .board-social-instagram:hover {

  background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF);

  color: #FFFFFF;

}



[data-theme="dark"] .board-social-facebook {

  color: #79A7F5;

  background: rgba(121, 167, 245, 0.12);

  border-color: rgba(121, 167, 245, 0.28);

}



[data-theme="dark"] .board-social-facebook:hover {

  background: #1877F2;

  color: #FFFFFF;

}



[data-theme="dark"] .board-social-telegram {

  color: #6CD2FC;

  background: rgba(108, 210, 252, 0.12);

  border-color: rgba(108, 210, 252, 0.28);

}



[data-theme="dark"] .board-social-telegram:hover {

  background: #24A1DE;

  color: #FFFFFF;

}



[data-theme="dark"] .board-social-snapchat {

  color: #FFFC00;

  background: rgba(255, 252, 0, 0.12);

  border-color: rgba(255, 252, 0, 0.28);

}



[data-theme="dark"] .board-social-snapchat:hover {

  background: #FFFC00;

  color: #000000;

}



[data-theme="dark"] .board-social-twitter {

  color: #E7E9EA;

  background: rgba(231, 233, 234, 0.1);

  border-color: rgba(231, 233, 234, 0.22);

}



[data-theme="dark"] .board-social-twitter:hover {

  background: #FFFFFF;

  color: #000000;

}



.board-social-youtube {

  color: #FF0000;

  background: rgba(255, 0, 0, 0.08);

  border: 1px solid rgba(255, 0, 0, 0.22);

}

.board-social-youtube:hover {

  background: #FF0000;

  color: #FFFFFF;

  border-color: #FF0000;

  transform: translateY(-2px);

  box-shadow: 0 4px 12px rgba(255, 0, 0, 0.35);

}



.board-social-whatsapp {

  color: #25D366;

  background: rgba(37, 211, 102, 0.08);

  border: 1px solid rgba(37, 211, 102, 0.22);

}

.board-social-whatsapp:hover {

  background: #25D366;

  color: #FFFFFF;

  border-color: #25D366;

  transform: translateY(-2px);

  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.35);

}



.board-social-threads {

  color: #000000;

  background: rgba(0, 0, 0, 0.06);

  border: 1px solid rgba(0, 0, 0, 0.18);

}

.board-social-threads:hover {

  background: #000000;

  color: #FFFFFF;

  border-color: #000000;

  transform: translateY(-2px);

}



.board-social-pinterest {

  color: #E60023;

  background: rgba(230, 0, 35, 0.08);

  border: 1px solid rgba(230, 0, 35, 0.22);

}

.board-social-pinterest:hover {

  background: #E60023;

  color: #FFFFFF;

  border-color: #E60023;

  transform: translateY(-2px);

}



.board-social-behance {

  color: #1769FF;

  background: rgba(23, 105, 255, 0.08);

  border: 1px solid rgba(23, 105, 255, 0.22);

}

.board-social-behance:hover {

  background: #1769FF;

  color: #FFFFFF;

  border-color: #1769FF;

  transform: translateY(-2px);

}



.board-social-dribbble {

  color: #EA4C89;

  background: rgba(234, 76, 137, 0.08);

  border: 1px solid rgba(234, 76, 137, 0.22);

}

.board-social-dribbble:hover {

  background: #EA4C89;

  color: #FFFFFF;

  border-color: #EA4C89;

  transform: translateY(-2px);

}



.board-social-tiktok {

  color: #000000;

  background: rgba(0, 0, 0, 0.06);

  border: 1px solid rgba(0, 0, 0, 0.18);

}

.board-social-tiktok:hover {

  background: #000000;

  color: #00f2fe;

  border-color: #fe2c55;

  transform: translateY(-2px);

}



.board-social-website,

.board-social-custom {

  color: var(--brand-accent, #367A48);

  background: rgba(54, 122, 72, 0.08);

  border: 1px solid rgba(54, 122, 72, 0.22);

}

.board-social-website:hover,

.board-social-custom:hover {

  background: var(--brand-accent, #367A48);

  color: #FFFFFF;

  border-color: var(--brand-accent, #367A48);

  transform: translateY(-2px);

}



[data-theme="dark"] .board-social-youtube {

  color: #FF4D4D;

  background: rgba(255, 77, 77, 0.12);

  border-color: rgba(255, 77, 77, 0.28);

}

[data-theme="dark"] .board-social-youtube:hover {

  background: #FF0000;

  color: #FFFFFF;

}



[data-theme="dark"] .board-social-whatsapp {

  color: #4EFA8B;

  background: rgba(78, 250, 139, 0.12);

  border-color: rgba(78, 250, 139, 0.28);

}

[data-theme="dark"] .board-social-whatsapp:hover {

  background: #25D366;

  color: #FFFFFF;

}



[data-theme="dark"] .board-social-threads {

  color: #FFFFFF;

  background: rgba(255, 255, 255, 0.1);

  border-color: rgba(255, 255, 255, 0.25);

}

[data-theme="dark"] .board-social-threads:hover {

  background: #FFFFFF;

  color: #000000;

}



[data-theme="dark"] .board-social-website,

[data-theme="dark"] .board-social-custom {

  color: #74F298;

  background: rgba(116, 242, 152, 0.12);

  border-color: rgba(116, 242, 152, 0.28);

}

[data-theme="dark"] .board-social-website:hover,

[data-theme="dark"] .board-social-custom:hover {

  background: #367A48;

  color: #FFFFFF;

}



/* ------------------------------------------------------------

   5-Step Approach ("Our Proven Methodology")

   ------------------------------------------------------------ */

.approach-steps-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

  gap: 1.5rem;

  margin-top: 3rem;

}



.approach-step-card {

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-md);

  padding: 2rem 1.5rem;

  position: relative;

  transition: all var(--transition-normal);

  overflow: hidden;

}



.approach-step-card:hover {

  transform: translateY(-5px);

  border-color: var(--brand-green);

  box-shadow: var(--card-glow);

}



.approach-step-number {

  font-family: var(--font-display);

  font-size: 2.75rem;

  font-weight: 800;

  color: rgba(74, 145, 87, 0.25);

  line-height: 1;

  margin-bottom: 1rem;

  transition: color var(--transition-fast);

}



.approach-step-card:hover .approach-step-number {

  color: var(--brand-accent);

}



.approach-step-title {

  font-size: 1.2rem;

  color: var(--text-heading);

  margin-bottom: 0.5rem;

}



.approach-step-desc {

  font-size: 0.9rem;

  color: var(--muted-color);

  line-height: 1.55;

}



/* ------------------------------------------------------------

   The Seed Journey Flow (Horizontal / Responsive Chain)

   ------------------------------------------------------------ */

.seed-journey-chain {

  display: flex;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

  gap: 0.75rem 0.5rem;

  margin-top: 2.5rem;

  padding: 2rem;

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-lg);

}



.seed-step-node {

  font-family: var(--font-mono);

  font-size: 0.825rem;

  font-weight: 700;

  padding: 0.5rem 1rem;

  border-radius: var(--radius-full);

  background: var(--surface-hover);

  border: 1px solid var(--border-color);

  color: var(--text-heading);

  letter-spacing: 0.05em;

  display: inline-flex;

  align-items: center;

  gap: 0.45rem;

  transition: all var(--transition-fast);

}



.seed-step-node svg {

  width: 15px;

  height: 15px;

  color: var(--brand-green-dark);

}



[data-theme="dark"] .seed-step-node svg {

  color: var(--brand-accent);

}



.seed-step-node:hover {

  background: var(--brand-green);

  color: #FFFFFF;

  border-color: var(--brand-green);

  transform: scale(1.06);

}



.seed-step-node:hover svg {

  color: #FFFFFF;

}



.seed-step-arrow {

  color: var(--brand-accent);

  font-weight: 800;

  font-size: 1.1rem;

}



/* ------------------------------------------------------------

   Capabilities Grid

   ------------------------------------------------------------ */

.capabilities-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

  gap: 1.75rem;

  margin-top: 2.25rem;

}



.capability-card {

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-md);

  padding: 2.25rem 1.75rem;

  transition: all var(--transition-normal);

  display: flex;

  flex-direction: column;

}



.capability-card:hover {

  transform: translateY(-5px);

  border-color: var(--brand-green);

  box-shadow: var(--card-glow);

}



.capability-icon {

  width: 54px;

  height: 54px;

  border-radius: 14px;

  background: rgba(74, 145, 87, 0.12);

  border: 1px solid rgba(74, 145, 87, 0.25);

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 1.25rem;

  color: var(--brand-green-dark);

  transition: transform 0.3s ease, background 0.3s ease;

}



[data-theme="dark"] .capability-icon {

  color: var(--brand-accent);

  background: rgba(116, 242, 152, 0.12);

  border: 1px solid rgba(116, 242, 152, 0.25);

}



.capability-card:hover .capability-icon {

  transform: scale(1.1);

  background: rgba(74, 145, 87, 0.2);

}



[data-theme="dark"] .capability-card:hover .capability-icon {

  background: rgba(116, 242, 152, 0.2);

}



.capability-icon svg {

  width: 28px;

  height: 28px;

}



.capability-title {

  font-size: 1.25rem;

  color: var(--text-heading);

  margin-bottom: 0.5rem;

}



.capability-desc {

  font-size: 0.925rem;

  color: var(--muted-color);

  line-height: 1.55;

}



/* ------------------------------------------------------------

   Client Logos Infinite Interactive & Draggable Slider

   ------------------------------------------------------------ */

.clients-slider-section {

  padding: 4.5rem 0 3.5rem;

  position: relative;

  overflow: hidden;

  background: radial-gradient(circle at 50% 50%, rgba(74, 145, 87, 0.05) 0%, transparent 70%);

}



.clients-slider-header {

  text-align: center;

  max-width: 720px;

  margin: 0 auto 2rem;

}



.clients-slider-title {

  font-size: clamp(1.6rem, 3.2vw, 2.4rem);

  line-height: 1.25;

  margin-top: 0.75rem;

  margin-bottom: 0.5rem;

  letter-spacing: -0.01em;

}



.clients-slider-sub {

  color: var(--muted-color);

  font-size: 0.95rem;

  margin: 0;

}



.clients-interactive-slider {

  position: relative;

  width: 100%;

  max-width: 1400px;

  margin: 0 auto;

}



.clients-slider-nav-wrap {

  display: flex;

  align-items: center;

  position: relative;

  gap: 0.75rem;

  padding: 0 1rem;

}



.clients-nav-btn {

  width: 44px;

  height: 44px;

  border-radius: 50%;

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  color: var(--text-heading);

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  flex-shrink: 0;

  transition: all var(--transition-fast);

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

  z-index: 10;

}



.clients-nav-btn:hover {

  background: var(--brand-green);

  border-color: var(--brand-accent);

  color: #FFFFFF;

  transform: scale(1.1);

  box-shadow: 0 6px 18px rgba(74, 145, 87, 0.35);

}



.clients-marquee-container {

  width: 100%;

  overflow-x: auto;

  overflow-y: hidden;

  position: relative;

  padding: 1rem 0;

  cursor: grab;

  scroll-behavior: auto;

  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;

  -ms-overflow-style: none;

  mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);

  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);

}



.clients-marquee-container::-webkit-scrollbar {

  display: none;

}



.clients-marquee-container.is-dragging {

  cursor: grabbing;

  user-select: none;

}



.clients-marquee-track {

  display: flex;

  align-items: center;

  gap: 1.75rem;

  width: max-content;

  padding: 0.5rem 0;

}



.client-logo-card {

  height: 96px;

  min-width: 220px;

  max-width: 250px;

  padding: 0.85rem 1.6rem;

  border-radius: var(--radius-md);

  background: #ffffff;

  border: 1px solid rgba(0, 0, 0, 0.08);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);

  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);

  text-decoration: none;

  flex-shrink: 0;

  user-select: none;

  -webkit-user-drag: none;

}



[data-theme="dark"] .client-logo-card {

  background: rgba(255, 255, 255, 0.95);

  border: 1px solid rgba(255, 255, 255, 0.25);

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);

}



.client-logo-card:hover {

  transform: translateY(-4px) scale(1.04);

  border-color: var(--brand-accent);

  box-shadow: 0 12px 30px rgba(74, 145, 87, 0.25);

}



.client-logo-card img {

  max-height: 64px;

  max-width: 175px;

  width: auto;

  height: auto;

  object-fit: contain;

  filter: grayscale(0%);

  transition: transform var(--transition-fast);

  pointer-events: none;

  user-select: none;

  -webkit-user-drag: none;

}



.client-logo-card:hover img {

  transform: scale(1.06);

}



@media (max-width: 768px) {

  .clients-slider-section {

    padding: 3rem 0 2rem;

  }

  .clients-slider-header {

    margin-bottom: 1.5rem;

  }

  .clients-slider-nav-wrap {

    padding: 0;

  }

  .clients-nav-btn {

    display: none; /* Mobile visitors swipe directly with their finger */

  }

  .clients-marquee-track {

    gap: 1.15rem;

  }

  .client-logo-card {

    height: 80px;

    min-width: 175px;

    padding: 0.65rem 1.25rem;

  }

  .client-logo-card img {

    max-height: 52px;

    max-width: 140px;

  }

}



/* ------------------------------------------------------------

   Footer (#367a48 Green Theme)

   ------------------------------------------------------------ */

.site-footer {

  background: #367a48 !important;

  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;

  padding-top: 5rem;

  padding-bottom: 2.5rem;

  position: relative;

  color: #FFFFFF !important;

}



[data-theme="dark"] .site-footer {

  background: #367a48 !important;

  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;

}



/* Ensure white logo on #367a48 footer in both light and dark themes */

.site-footer .footer-brand .logo-light,

[data-theme="dark"] .site-footer .footer-brand .logo-light {

  display: none !important;

}



.site-footer .footer-brand .logo-dark,

[data-theme="dark"] .site-footer .footer-brand .logo-dark {

  display: block !important;

}



.footer-grid {

  display: grid;

  grid-template-columns: 2fr 1fr 1fr 1.5fr;

  gap: 3.5rem;

  margin-bottom: 4rem;

}



.footer-links-group {

  display: contents;

}



.footer-brand p {

  color: rgba(255, 255, 255, 0.9) !important;

  font-size: 0.95rem;

  margin-top: 1.25rem;

  max-width: 320px;

  line-height: 1.6;

}



.footer-social-links {

  margin-top: 1.5rem;

  display: flex;

  align-items: center;

  gap: 0.75rem;

  flex-wrap: wrap;

}



.footer-social-btn {

  width: 42px;

  height: 42px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.18) !important;

  border: 1px solid rgba(255, 255, 255, 0.3) !important;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  color: #FFFFFF !important;

  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);

  text-decoration: none;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

}



.footer-social-btn svg {

  width: 20px;

  height: 20px;

  transition: transform var(--transition-fast);

}



.footer-social-btn:hover {

  transform: translateY(-3px) scale(1.08);

  border-color: #FFFFFF !important;

  color: #367a48 !important;

  background: #FFFFFF !important;

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);

}



.footer-social-btn.footer-social-instagram:hover {

  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;

  border-color: #d6249f !important;

  color: #FFFFFF !important;

  box-shadow: 0 6px 18px rgba(225, 48, 108, 0.4);

}



.footer-social-btn.footer-social-linkedin:hover {

  background: #0A66C2 !important;

  border-color: #0A66C2 !important;

  color: #FFFFFF !important;

  box-shadow: 0 6px 18px rgba(10, 102, 194, 0.4);

}



.footer-social-btn.footer-social-facebook:hover {

  background: #1877F2 !important;

  border-color: #1877F2 !important;

  color: #FFFFFF !important;

  box-shadow: 0 6px 18px rgba(24, 119, 242, 0.4);

}



.footer-social-btn.footer-social-youtube:hover {

  background: #FF0000 !important;

  border-color: #FF0000 !important;

  color: #FFFFFF !important;

  box-shadow: 0 6px 18px rgba(255, 0, 0, 0.4);

}



.footer-social-btn.footer-social-xtwitter:hover,

.footer-social-btn.footer-social-twitter:hover,

.footer-social-btn.footer-social-x:hover,

.footer-social-btn.footer-social-threads:hover {

  background: #000000 !important;

  border-color: #ffffff !important;

  color: #FFFFFF !important;

  box-shadow: 0 6px 18px rgba(255, 255, 255, 0.25);

}



.footer-social-btn.footer-social-pinterest:hover {

  background: #E60023 !important;

  border-color: #E60023 !important;

  color: #FFFFFF !important;

  box-shadow: 0 6px 18px rgba(230, 0, 35, 0.4);

}



.footer-social-btn.footer-social-whatsapp:hover {

  background: #25D366 !important;

  border-color: #25D366 !important;

  color: #FFFFFF !important;

  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.4);

}



.footer-social-btn.footer-social-behance:hover {

  background: #1769FF !important;

  border-color: #1769FF !important;

  color: #FFFFFF !important;

  box-shadow: 0 6px 18px rgba(23, 105, 255, 0.4);

}



.footer-social-btn.footer-social-dribbble:hover {

  background: #EA4C89 !important;

  border-color: #EA4C89 !important;

  color: #FFFFFF !important;

  box-shadow: 0 6px 18px rgba(234, 76, 137, 0.4);

}



.footer-social-btn.footer-social-tiktok:hover {

  background: #000000 !important;

  border-color: #00f2fe !important;

  color: #FFFFFF !important;

  box-shadow: 0 6px 18px rgba(0, 242, 254, 0.35);

}



.footer-social-btn.footer-social-telegram:hover {

  background: #229ED9 !important;

  border-color: #229ED9 !important;

  color: #FFFFFF !important;

  box-shadow: 0 6px 18px rgba(34, 158, 217, 0.4);

}



.footer-social-btn.footer-social-snapchat:hover {

  background: #FFFC00 !important;

  border-color: #FFFC00 !important;

  color: #000000 !important;

  box-shadow: 0 6px 18px rgba(255, 252, 0, 0.4);

}



.footer-social-btn.footer-social-website:hover {

  background: #25D366 !important;

  border-color: #FFFFFF !important;

  color: #FFFFFF !important;

  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.4);

}



.footer-social-btn.footer-social-designrush:hover {

  background: #3D00EC !important;

  border-color: #3D00EC !important;

  color: #FFFFFF !important;

  box-shadow: 0 6px 18px rgba(61, 0, 236, 0.45);

}



.footer-heading {

  font-size: 1.1rem;

  color: #FFFFFF !important;

  margin-bottom: 1.5rem;

  font-weight: 700;

  letter-spacing: 0.02em;

}



.footer-links {

  list-style: none;

  display: flex;

  flex-direction: column;

  gap: 0.75rem;

}



.footer-links a {

  color: rgba(255, 255, 255, 0.85) !important;

  font-size: 0.925rem;

  transition: color var(--transition-fast), padding-left var(--transition-fast);

  text-decoration: none;

}



.footer-links a:hover {

  color: #FFFFFF !important;

  padding-left: 4px;

  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);

}



.footer-studio-card {

  display: flex;

  flex-direction: column;

}



.footer-studio-card p,

.footer-studio-card .footer-address,

.footer-studio-card .footer-email {

  color: rgba(255, 255, 255, 0.88) !important;

  font-size: 0.9rem;

  line-height: 1.6;

}



.footer-studio-card .footer-phone {

  color: #FFFFFF !important;

  font-weight: 700;

  font-size: 0.95rem;

  margin: 0.65rem 0;

}



.footer-bottom {

  border-top: 1px solid rgba(255, 255, 255, 0.2) !important;

  padding-top: 2rem;

  display: flex;

  align-items: center;

  justify-content: space-between;

  color: rgba(255, 255, 255, 0.82) !important;

  font-size: 0.875rem;

  flex-wrap: wrap;

  gap: 1rem;

}



.footer-bottom span {

  color: rgba(255, 255, 255, 0.85) !important;

}



/* ------------------------------------------------------------

   Sticky WhatsApp Floating Action Button

   ------------------------------------------------------------ */

.poppy-sticky-whatsapp {

  position: fixed;

  bottom: 24px;

  right: 24px;

  z-index: 9999;

}



.whatsapp-float-btn {

  display: flex;

  align-items: center;

  gap: 10px;

  text-decoration: none;

  position: relative;

}



.whatsapp-badge-pill {

  background: var(--surface-card);

  color: var(--text-heading);

  border: 1px solid var(--border-color);

  padding: 8px 14px;

  border-radius: 999px;

  font-size: 0.85rem;

  font-weight: 600;

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);

  white-space: nowrap;

  pointer-events: none;

  transition: opacity 0.3s ease, transform 0.3s ease;

  animation: floatTooltip 3s ease-in-out infinite alternate;

}



.whatsapp-icon-circle {

  width: 58px;

  height: 58px;

  border-radius: 50%;

  background: linear-gradient(135deg, #25D366 0%, #1da851 100%);

  border: 2px solid rgba(255, 255, 255, 0.3);

  color: #FFFFFF;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);

  position: relative;

  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;

}



.whatsapp-float-btn:hover .whatsapp-icon-circle {

  transform: scale(1.1);

  box-shadow: 0 12px 32px rgba(37, 211, 102, 0.65);

}



.whatsapp-pulse-ring {

  position: absolute;

  right: 0;

  top: 0;

  width: 58px;

  height: 58px;

  border-radius: 50%;

  background: rgba(37, 211, 102, 0.4);

  animation: waPulse 2.4s ease-out infinite;

  pointer-events: none;

}



@keyframes waPulse {

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

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

}



@keyframes floatTooltip {

  0% { transform: translateY(0); }

  100% { transform: translateY(-4px); }

}



@media (max-width: 768px) {

  .poppy-sticky-whatsapp {

    bottom: 18px;

    right: 18px;

  }

  .whatsapp-badge-pill {

    display: none;

  }

  .whatsapp-icon-circle {

    width: 52px;

    height: 52px;

  }

  .whatsapp-pulse-ring {

    width: 52px;

    height: 52px;

  }

}



/* ------------------------------------------------------------

   "Why No.1 Digital Marketing Agency" Section (Base Desktop)

   ------------------------------------------------------------ */

.why-no1-section {

  position: relative;

}



.why-no1-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1.75rem;

  margin-top: 2.25rem;

}



.why-no1-card {

  background: #ffffff;

  border: 1px solid rgba(0, 0, 0, 0.06);

  border-radius: 24px 24px 24px 75px; /* Signature leaf/curved bottom-left scoop */

  padding: 2.5rem 1.75rem 2rem;

  text-align: center;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.05);

  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;

  position: relative;

  overflow: hidden;

}



[data-theme="dark"] .why-no1-card {

  background: rgba(20, 26, 22, 0.75);

  border: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);

  backdrop-filter: blur(12px);

}



.why-no1-card::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 4px;

  background: linear-gradient(90deg, transparent, var(--brand-accent), transparent);

  opacity: 0;

  transition: opacity 0.3s ease;

}



.why-no1-card:hover {

  transform: translateY(-8px);

  border-color: var(--brand-accent);

  box-shadow: 0 24px 50px rgba(74, 145, 87, 0.18);

}



.why-no1-card:hover::before {

  opacity: 1;

}



.why-no1-icon-wrap {

  width: 60px;

  height: 60px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 1.25rem;

  color: var(--brand-green-dark);

  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

}



[data-theme="dark"] .why-no1-icon-wrap {

  color: var(--brand-accent);

}



.why-no1-card:hover .why-no1-icon-wrap {

  transform: scale(1.15);

}



.why-no1-icon-wrap svg {

  width: 40px;

  height: 40px;

}



.why-no1-card-title {

  font-size: 1.2rem;

  font-weight: 700;

  color: var(--text-heading);

  margin-bottom: 0.5rem;

  letter-spacing: -0.01em;

}



.why-no1-card-desc {

  font-size: 0.9rem;

  color: var(--muted-color);

  line-height: 1.5;

  margin: 0;

}



/* ------------------------------------------------------------

   "Build Brands, Fuel Success" (Why Choose Us) Split Section

   ------------------------------------------------------------ */

.why-choose-section {

  position: relative;

  background: radial-gradient(circle at 85% 30%, rgba(74, 145, 87, 0.08) 0%, transparent 60%),

              radial-gradient(circle at 15% 75%, rgba(53, 115, 68, 0.05) 0%, transparent 55%);

}



[data-theme="dark"] .why-choose-section {

  background: radial-gradient(circle at 85% 30%, rgba(74, 145, 87, 0.12) 0%, transparent 60%),

              radial-gradient(circle at 15% 75%, rgba(53, 115, 68, 0.08) 0%, transparent 55%);

}



.why-choose-grid {

  display: grid;

  grid-template-columns: 1fr 1.15fr;

  gap: clamp(2rem, 4vw, 3.5rem);

  align-items: center;

}



.why-choose-tag {

  display: inline-block;

  font-size: 0.825rem;

  font-weight: 800;

  letter-spacing: 2px;

  text-transform: uppercase;

  color: var(--brand-green-dark);

  margin-bottom: 0.75rem;

}



[data-theme="dark"] .why-choose-tag {

  color: var(--brand-accent);

}



.why-choose-title {

  font-size: clamp(1.85rem, 3.6vw, 2.75rem);

  font-weight: 800;

  color: var(--text-heading);

  line-height: 1.2;

  margin-bottom: 1.25rem;

  letter-spacing: -0.02em;

}



.why-choose-p {

  font-size: 0.95rem;

  color: var(--muted-color);

  line-height: 1.68;

  margin-bottom: 1rem;

}



.why-choose-partnership {

  margin-top: 1.35rem;

  padding: 0.9rem 1.25rem;

  border-radius: var(--radius-md);

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  border-left: 4px solid #3D00EC;

  font-size: 0.925rem;

  line-height: 1.6;

  color: var(--text-heading);

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);

}



.why-choose-dr-link {

  color: #3D00EC;

  font-weight: 700;

  text-decoration: none;

  transition: color var(--transition-fast);

}



.why-choose-dr-link:hover {

  text-decoration: underline;

  color: #5516fc;

}



[data-theme="dark"] .why-choose-dr-link {

  color: #8c66ff;

}



/* 2x2 Grid for Feature Cards */

.why-choose-cards-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 1.25rem;

}



.why-choose-card {

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  border-radius: 20px;

  padding: 1.75rem 1.4rem;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);

  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);

  display: flex;

  flex-direction: column;

}



.why-choose-card:hover {

  transform: translateY(-4px);

  border-color: var(--brand-accent);

  box-shadow: 0 12px 28px rgba(74, 145, 87, 0.15);

}



[data-theme="dark"] .why-choose-card:hover {

  box-shadow: 0 12px 28px rgba(116, 242, 152, 0.15);

}



.why-choose-card-icon {

  width: 48px;

  height: 48px;

  border-radius: 12px;

  background: rgba(74, 145, 87, 0.12);

  border: 1px solid rgba(74, 145, 87, 0.25);

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--brand-green-dark);

  margin-bottom: 1.25rem;

  transition: transform var(--transition-fast), background var(--transition-fast);

}



[data-theme="dark"] .why-choose-card-icon {

  color: var(--brand-accent);

  background: rgba(116, 242, 152, 0.12);

  border-color: rgba(116, 242, 152, 0.25);

}



.why-choose-card:hover .why-choose-card-icon {

  transform: scale(1.08);

}



.why-choose-card-title {

  font-size: 1.15rem;

  font-weight: 700;

  color: var(--text-heading);

  margin-bottom: 0.65rem;

  line-height: 1.3;

  letter-spacing: -0.01em;

}



.why-choose-card-desc {

  font-size: 0.885rem;

  line-height: 1.6;

  color: var(--muted-color);

  margin: 0;

}



@media (max-width: 992px) {

  .why-choose-grid {

    grid-template-columns: 1fr;

    gap: 2.5rem;

  }

}



@media (max-width: 580px) {

  .why-choose-cards-grid {

    grid-template-columns: 1fr;

  }

}



/* ------------------------------------------------------------

   Responsive Breakpoints

   ------------------------------------------------------------ */

@media (max-width: 1024px) {

  .creative-tech-wrapper {

    grid-template-columns: 1fr;

  }

  .philosophy-grid {

    grid-template-columns: repeat(2, 1fr);

  }

  .culture-grid {

    grid-template-columns: 1fr;

  }

  .vision-mission-grid {

    grid-template-columns: 1fr;

  }

  .board-grid {

    grid-template-columns: repeat(2, 1fr);

  }

  .contact-wrapper {

    grid-template-columns: 1fr;

  }

  .why-no1-grid {

    grid-template-columns: repeat(2, 1fr);

    gap: 1.25rem;

  }

  .why-choose-grid {

    grid-template-columns: 1fr;

    gap: 2.25rem;

  }

  .footer-grid {

    grid-template-columns: 1fr 1fr;

    gap: 2.5rem;

  }

  .footer-links-group {

    display: contents;

  }

}



@media (max-width: 768px) {

  .nav-links {

    position: fixed;

    top: var(--nav-height);

    left: 0;

    width: 100%;

    height: calc(100vh - var(--nav-height));

    background: var(--surface-color);

    backdrop-filter: blur(24px);

    -webkit-backdrop-filter: blur(24px);

    flex-direction: column;

    padding: 1.75rem 1.5rem 2.5rem;

    gap: 0.6rem;

    transform: translateX(100%);

    transition: transform var(--transition-normal);

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

    overflow-y: auto;

    align-items: stretch;

    justify-content: flex-start;

  }



  .nav-links.active {

    transform: translateX(0);

  }



  .nav-links li {

    width: 100%;

  }



  .nav-link {

    font-size: 1.2rem !important;

    font-weight: 700 !important;

    color: var(--text-heading) !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    padding: 0.75rem 1rem !important;

    border-radius: var(--radius-md) !important;

    background: transparent !important;

    transition: all var(--transition-fast) !important;

    width: 100%;

    letter-spacing: -0.01em;

  }



  .nav-link::after {

    display: none !important;

  }



  .nav-link:hover, .nav-link.active {

    background: rgba(74, 145, 87, 0.1) !important;

    color: var(--brand-green-dark) !important;

  }



  [data-theme="dark"] .nav-link:hover,

  [data-theme="dark"] .nav-link.active {

    background: rgba(116, 242, 152, 0.1) !important;

    color: var(--brand-accent) !important;

  }



  .nav-item-has-dropdown .nav-dropdown-menu {

    position: static;

    opacity: 1;

    visibility: visible;

    transform: none;

    box-shadow: none;

    background: rgba(74, 145, 87, 0.05);

    border: 1px solid var(--border-color);

    border-radius: var(--radius-md);

    padding: 0.5rem;

    margin-top: 0.25rem;

    display: none;

    max-height: 280px;

    overflow-y: auto;

  }



  .nav-item-has-dropdown.is-mobile-open .nav-dropdown-menu {

    display: flex;

  }



  .nav-dropdown-menu li a {

    font-size: 0.95rem !important;

    padding: 0.5rem 0.75rem !important;

  }



  .mobile-menu-extra {

    display: block !important;

    width: 100%;

  }



  .mobile-cta-item {

    margin-top: 0.75rem;

  }



  .mobile-menu-cta {

    width: 100% !important;

    justify-content: center !important;

    padding: 0.85rem !important;

    font-size: 1rem !important;

    border-radius: var(--radius-full) !important;

  }



  .mobile-theme-item {

    margin-top: 0.35rem;

  }



  .mobile-theme-row {

    background: var(--surface-card);

    border: 1px solid var(--border-color);

    border-radius: var(--radius-md);

    padding: 0.75rem 1rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

  }



  .mobile-theme-label {

    font-size: 0.95rem;

    font-weight: 600;

    color: var(--text-color);

  }



  .mobile-contact-item {

    margin-top: 0.25rem;

  }



  .mobile-contact-card {

    background: var(--surface-card);

    border: 1px solid var(--border-color);

    border-radius: var(--radius-md);

    padding: 0.85rem 1rem;

    display: flex;

    flex-direction: column;

    gap: 0.5rem;

    width: 100%;

  }



  .mobile-contact-link {

    color: var(--muted-color);

    font-size: 0.85rem;

    display: flex;

    align-items: center;

    gap: 0.5rem;

    text-decoration: none;

    transition: color var(--transition-fast);

  }



  .mobile-contact-link:hover {

    color: var(--brand-accent);

  }



  /* Hide floating chatbot when mobile navigation drawer is open */

  body.nav-open .poppy-chatbot-launcher {

    opacity: 0 !important;

    pointer-events: none !important;

  }



  .mobile-toggle {

    display: block;

  }



  .nav-actions {

    display: none;

  }



  .board-grid {

    grid-template-columns: 1fr;

  }



  /* 2 in a row on mobile for Why No.1 Grid */

  .why-no1-grid {

    grid-template-columns: repeat(2, 1fr) !important;

    gap: 0.85rem !important;

    margin-top: 1.5rem !important;

  }



  .why-no1-card {

    padding: 1.35rem 0.85rem 1.15rem !important;

    border-radius: 16px 16px 16px 36px !important;

    width: 100% !important;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04) !important;

  }



  .why-no1-icon-wrap {

    width: 40px !important;

    height: 40px !important;

    margin-bottom: 0.6rem !important;

  }



  .why-no1-icon-wrap svg {

    width: 26px !important;

    height: 26px !important;

  }



  .why-no1-card-title {

    font-size: 0.95rem !important;

    margin-bottom: 0.35rem !important;

    line-height: 1.25 !important;

  }



  .why-no1-card-desc {

    font-size: 0.775rem !important;

    line-height: 1.45 !important;

  }



  /* Why Choose Us Mobile View */

  .why-choose-grid {

    grid-template-columns: 1fr !important;

    gap: 2rem !important;

  }



  .why-choose-visual {

    width: 100% !important;

    border-radius: 18px !important;

    aspect-ratio: 16 / 10 !important;

    max-height: 260px !important;

  }



  .why-choose-visual img {

    width: 100% !important;

    height: 100% !important;

    object-fit: cover !important;

  }



  .why-choose-badge-floating {

    bottom: 0.75rem !important;

    left: 0.75rem !important;

    padding: 0.5rem 0.85rem !important;

    font-size: 0.775rem !important;

    border-radius: 10px !important;

  }



  .why-choose-title {

    font-size: clamp(1.65rem, 5.5vw, 2.25rem) !important;

    line-height: 1.2 !important;

  }



  .why-choose-lead {

    font-size: 0.925rem !important;

    margin-bottom: 1.25rem !important;

  }



  .why-choose-feature {

    gap: 0.85rem !important;

  }



  .why-choose-icon-box {

    width: 42px !important;

    height: 42px !important;

    border-radius: 10px !important;

  }



  .why-choose-icon-box svg {

    width: 22px !important;

    height: 22px !important;

  }



  .why-choose-feature-text h4 {

    font-size: 1.05rem !important;

  }



  .why-choose-feature-text p {

    font-size: 0.85rem !important;

  }



  .form-grid {

    grid-template-columns: 1fr;

  }



  .form-group.full {

    grid-column: span 1;

  }



  /* Footer Mobile View */

  .site-footer {

    padding-top: 3.5rem !important;

    padding-bottom: 2rem !important;

  }



  .footer-grid {

    display: flex !important;

    flex-direction: column !important;

    gap: 2rem !important;

    margin-bottom: 2.5rem !important;

  }



  .footer-brand p {

    max-width: 100% !important;

    font-size: 0.875rem !important;

    margin-top: 0.85rem !important;

  }



  .footer-links-group {

    display: grid !important;

    grid-template-columns: 1fr 1fr !important;

    gap: 1.5rem !important;

  }



  .footer-heading {

    font-size: 1rem !important;

    margin-bottom: 0.85rem !important;

  }



  .footer-links {

    gap: 0.6rem !important;

  }



  .footer-links a {

    font-size: 0.875rem !important;

  }



  .footer-studio-card {

    background: rgba(255, 255, 255, 0.08) !important;

    border: 1px solid rgba(255, 255, 255, 0.16) !important;

    border-radius: var(--radius-lg) !important;

    padding: 1.35rem 1.25rem !important;

    backdrop-filter: blur(10px) !important;

    -webkit-backdrop-filter: blur(10px) !important;

  }



  .footer-studio-card .footer-heading {

    color: #FFFFFF !important;

    font-size: 1.05rem !important;

    font-weight: 700 !important;

    margin-bottom: 0.65rem !important;

  }



  .footer-studio-card p,

  .footer-studio-card .footer-address,

  .footer-studio-card .footer-email {

    color: rgba(255, 255, 255, 0.92) !important;

    font-size: 0.88rem !important;

    line-height: 1.6 !important;

  }



  .footer-studio-card .footer-phone {

    color: #FFFFFF !important;

    font-size: 0.92rem !important;

    font-weight: 600 !important;

    margin: 0.5rem 0 !important;

  }



  .footer-studio-card .footer-phone a,

  .footer-studio-card .footer-email a {

    color: #FFFFFF !important;

    text-decoration: none !important;

  }



  .footer-bottom {

    flex-direction: column !important;

    align-items: center !important;

    text-align: center !important;

    gap: 0.75rem !important;

    padding-top: 1.5rem !important;

  }

}



@media (max-width: 480px) {

  .global-presence-badges {

    grid-template-columns: 1fr;

    gap: 0.6rem;

  }



  .why-no1-grid {

    grid-template-columns: repeat(2, 1fr) !important;

    gap: 0.65rem !important;

  }



  .why-no1-card {

    padding: 1.15rem 0.65rem 1rem !important;

    border-radius: 14px 14px 14px 30px !important;

  }



  .why-no1-icon-wrap {

    width: 36px !important;

    height: 36px !important;

    margin-bottom: 0.45rem !important;

  }



  .why-no1-icon-wrap svg {

    width: 22px !important;

    height: 22px !important;

  }



  .why-no1-card-title {

    font-size: 0.875rem !important;

    line-height: 1.2 !important;

  }



  .why-no1-card-desc {

    font-size: 0.725rem !important;

    line-height: 1.35 !important;

  }



  .footer-links-group {

    grid-template-columns: 1fr 1fr !important;

    gap: 1rem !important;

  }

}



/* ------------------------------------------------------------

   Client Testimonials & AI Visibility Audit Section

   ------------------------------------------------------------ */

.testimonials-ai-section {

  padding-top: 3.5rem;

  padding-bottom: 3.5rem;

}



.testimonials-ai-grid {

  display: grid;

  grid-template-columns: 1.85fr 1fr;

  gap: 1.75rem;

  align-items: stretch;

}



/* Left Card: Main Testimonials Card */

.testimonials-card-main {

  background: linear-gradient(125deg, #05668D 0%, #028090 32%, #00A896 65%, #2CB155 100%);

  border-radius: 24px;

  padding: 2.25rem 2.25rem 2rem;

  position: relative;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  min-height: 420px;

  box-shadow: 0 16px 36px -8px rgba(0, 120, 90, 0.28);

  color: #FFFFFF;

}



.testimonials-main-title {

  font-size: clamp(1.6rem, 2.2vw, 2.1rem);

  font-weight: 700;

  color: #FFFFFF;

  margin: 0 0 1.25rem 0;

  letter-spacing: -0.02em;

}



/* Slider Box & Controls */

.testimonials-slider-box {

  position: relative;

  width: 100%;

  display: flex;

  align-items: center;

  margin: auto 0;

}



.testimonial-arrow-btn {

  width: 38px;

  height: 38px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: all 0.22s ease;

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  z-index: 10;

  user-select: none;

  flex-shrink: 0;

}



.testimonial-prev-btn {

  left: -0.5rem;

  background: rgba(255, 255, 255, 0.25);

  border: 1px solid rgba(255, 255, 255, 0.4);

  color: #FFFFFF;

  backdrop-filter: blur(8px);

}



.testimonial-prev-btn:hover {

  background: rgba(255, 255, 255, 0.45);

  transform: translateY(-50%) scale(1.08);

}



.testimonial-next-btn {

  right: -0.5rem;

  background: #FFFFFF;

  border: none;

  color: #111827;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);

}



.testimonial-next-btn:hover {

  background: #F3F4F6;

  transform: translateY(-50%) scale(1.08);

}



.testimonials-viewport {

  width: 100%;

  overflow: hidden;

  padding: 0 2.25rem;

  cursor: grab;

  user-select: none;

  touch-action: pan-y;

}



.testimonials-viewport.is-dragging {

  cursor: grabbing;

}



.testimonials-track {

  display: flex;

  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);

  width: 100%;

}



.testimonial-slide {

  flex: 0 0 100%;

  min-width: 100%;

  opacity: 0.25;

  transition: opacity 0.4s ease;

  padding: 0.5rem 0;

}



.testimonial-slide.is-active {

  opacity: 1;

}



.testimonial-slide-inner {

  display: flex;

  align-items: center;

  gap: 1.75rem;

}



.testimonial-logo-circle {

  width: 135px;

  height: 135px;

  min-width: 135px;

  border-radius: 50%;

  background: #FFFFFF;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 1.25rem;

  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);

  flex-shrink: 0;

}



.testimonial-logo-circle img {

  max-width: 100%;

  max-height: 70px;

  object-fit: contain;

  pointer-events: none;

}



.testimonial-text-block {

  flex: 1;

  color: #FFFFFF;

  min-width: 0;

}



.testimonial-quote-wrap {

  position: relative;

  margin-bottom: 0.75rem;

}



.testimonial-quote-mark {

  display: none;

}



.testimonial-quote-body {

  margin-bottom: 0.35rem;

}



.testimonial-excerpt-text,

.testimonial-full-text {

  font-size: 0.98rem;

  line-height: 1.55;

  color: rgba(255, 255, 255, 0.95);

  margin: 0;

}



.testimonial-read-toggle {

  background: none;

  border: none;

  padding: 0;

  color: #FFFFFF;

  font-weight: 600;

  text-decoration: underline;

  cursor: pointer;

  font-size: 0.88rem;

  margin-top: 0.35rem;

  display: inline-block;

  font-family: inherit;

  transition: opacity 0.2s;

}



.testimonial-read-toggle:hover {

  opacity: 0.8;

}



.testimonial-author-box {

  margin-top: 0.75rem;

}



.testimonial-author-name {

  display: block;

  font-size: 1.05rem;

  font-weight: 700;

  color: #FFFFFF;

  line-height: 1.3;

}



.testimonial-author-role {

  display: block;

  font-size: 0.88rem;

  color: rgba(255, 255, 255, 0.88);

  margin-top: 0.15rem;

  line-height: 1.4;

}



/* Dots Indicator */

.testimonials-dots-wrap {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0.5rem;

  margin-top: 1.25rem;

}



.testimonial-dot {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.35);

  border: none;

  padding: 0;

  cursor: pointer;

  transition: all 0.3s ease;

}



.testimonial-dot.is-active {

  width: 22px;

  border-radius: 10px;

  background: #FFFFFF;

}



/* Bottom Action: View All */

.testimonials-bottom-action {

  text-align: center;

  margin-top: 1.25rem;

}



.testimonials-view-all-btn {

  background: #FF5A00;

  color: #FFFFFF;

  font-weight: 700;

  font-size: 0.95rem;

  border-radius: 50px;

  padding: 0.65rem 1.85rem;

  text-decoration: none;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 0.5rem;

  box-shadow: 0 6px 18px rgba(255, 90, 0, 0.38);

  transition: all 0.22s ease;

}



.testimonials-view-all-btn:hover {

  background: #E65100;

  transform: translateY(-2px);

  box-shadow: 0 8px 24px rgba(255, 90, 0, 0.55);

  color: #FFFFFF;

}



/* Right Card: AI Visibility Audit */

.ai-audit-card {

  border-radius: 24px;

  background: linear-gradient(175deg, #F2F8FD 0%, #E8F4FA 55%, #DCEDF6 100%);

  border: 1px solid rgba(170, 205, 230, 0.4);

  padding: 2.25rem 2.25rem;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  position: relative;

  overflow: hidden;

  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05);

  min-height: 420px;

}



.ai-audit-title {

  font-size: clamp(1.45rem, 2vw, 1.95rem);

  font-weight: 800;

  line-height: 1.25;

  color: #111827;

  margin: 0 0 1.25rem 0;

  letter-spacing: -0.02em;

  z-index: 2;

  position: relative;

}



.ai-audit-text-group {

  z-index: 2;

  position: relative;

}



.ai-audit-p1 {

  font-size: 0.98rem;

  line-height: 1.6;

  color: #374151;

  margin-bottom: 0.75rem;

}



.ai-audit-p2 {

  font-size: 0.92rem;

  line-height: 1.5;

  color: #4B5563;

  margin-bottom: 1.5rem;

}



.ai-audit-card-footer {

  z-index: 2;

  position: relative;

  margin-top: auto;

}



.ai-audit-cta-btn {

  background: #FF5A00;

  color: #FFFFFF;

  font-weight: 700;

  font-size: 0.95rem;

  border-radius: 50px;

  padding: 0.85rem 1.65rem;

  text-decoration: none;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 0.5rem;

  box-shadow: 0 6px 20px rgba(255, 90, 0, 0.35);

  transition: all 0.22s ease;

  width: fit-content;

  max-width: 100%;

}



.ai-audit-cta-btn:hover {

  background: #E65100;

  transform: translateY(-2px);

  box-shadow: 0 8px 26px rgba(255, 90, 0, 0.55);

  color: #FFFFFF;

}



.ai-audit-bg-waves {

  position: absolute;

  right: -10px;

  bottom: -10px;

  width: 300px;

  height: 160px;

  pointer-events: none;

  z-index: 1;

  color: #0EA5E9;

  opacity: 0.85;

}



[data-theme="dark"] .ai-audit-card {

  background: linear-gradient(175deg, #111A1E 0%, #0D1E24 55%, #0A1B20 100%);

  border-color: rgba(255, 255, 255, 0.09);

  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);

}



[data-theme="dark"] .ai-audit-title {

  color: #F3F4F6;

}



[data-theme="dark"] .ai-audit-p1 {

  color: #CBD5E1;

}



[data-theme="dark"] .ai-audit-p2 {

  color: #94A3B8;

}



/* Responsiveness for Testimonials Section */

@media (max-width: 992px) {

  .testimonials-ai-grid {

    grid-template-columns: 1fr;

    gap: 1.5rem;

  }



  .testimonials-card-main,

  .ai-audit-card {

    min-height: auto;

    padding: 2rem 1.5rem;

    border-radius: 20px;

  }

}



@media (max-width: 640px) {

  .testimonials-ai-section {

    padding-top: 2.5rem;

    padding-bottom: 2.5rem;

  }



  .testimonials-card-main {

    padding: 1.75rem 1.15rem 1.5rem;

  }



  .testimonials-viewport {

    padding: 0 1.6rem;

  }



  .testimonial-arrow-btn {

    width: 34px;

    height: 34px;

  }



  .testimonial-prev-btn {

    left: -0.35rem;

  }



  .testimonial-next-btn {

    right: -0.35rem;

  }



  .testimonial-slide-inner {

    flex-direction: column;

    text-align: center;

    gap: 1.25rem;

  }



  .testimonial-logo-circle {

    width: 110px;

    height: 110px;

    min-width: 110px;

    margin: 0 auto;

    padding: 1rem;

  }



  .testimonial-logo-circle img {

    max-height: 55px;

  }



  .ai-audit-card {

    padding: 1.75rem 1.25rem;

  }



  .ai-audit-cta-btn {

    width: 100%;

    text-align: center;

  }

}



/* ------------------------------------------------------------

   Frequently Asked Questions (FAQ) Section

   ------------------------------------------------------------ */

.faq-main-section {

  padding-top: 4.5rem;

  padding-bottom: 4.5rem;

}



.faq-header-center {

  text-align: center;

  margin-bottom: 2.25rem;

}



.faq-main-title {

  font-size: clamp(2rem, 3.5vw, 2.75rem);

  font-weight: 800;

  color: #111827;

  margin: 0;

  letter-spacing: -0.025em;

}



/* Category Filter Tabs Slider */

.faq-categories-slider-wrapper {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0.75rem;

  margin-bottom: 2.5rem;

  position: relative;

  max-width: 1000px;

  margin-left: auto;

  margin-right: auto;

}



.faq-slider-nav-btn {

  width: 38px;

  height: 38px;

  min-width: 38px;

  border-radius: 50%;

  background: #FFFFFF;

  border: 1px solid rgba(226, 232, 240, 0.9);

  color: #4B5563;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: all 0.2s ease;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

  flex-shrink: 0;

  user-select: none;

}



.faq-slider-nav-btn:hover:not(:disabled) {

  background: #F3F4F6;

  color: #111827;

  border-color: #CBD5E1;

  transform: scale(1.05);

}



.faq-slider-nav-btn:disabled,

.faq-slider-nav-btn.is-hidden {

  opacity: 0.3;

  cursor: not-allowed;

  pointer-events: none;

}



.faq-categories-track-container {

  overflow-x: auto;

  scrollbar-width: none;

  -ms-overflow-style: none;

  scroll-behavior: smooth;

  cursor: grab;

  user-select: none;

  width: 100%;

  touch-action: pan-y;

}



.faq-categories-track-container::-webkit-scrollbar {

  display: none;

}



.faq-categories-track-container.is-dragging {

  cursor: grabbing;

}



.faq-categories-list {

  display: flex;

  align-items: center;

  gap: 0.65rem;

  width: max-content;

  padding: 4px 2px;

}



.faq-category-pill {

  background: #FFFFFF;

  border: 1px solid rgba(226, 232, 240, 0.95);

  border-radius: 50px;

  padding: 0.55rem 1.35rem;

  color: #4B5563;

  font-size: 0.9rem;

  font-weight: 600;

  white-space: nowrap;

  cursor: pointer;

  transition: all 0.22s ease;

  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);

  font-family: inherit;

}



.faq-category-pill:hover {

  border-color: #028090;

  color: #028090;

  background: rgba(2, 128, 144, 0.04);

}



.faq-category-pill.is-active {

  background: #028090;

  color: #FFFFFF;

  border-color: #028090;

  box-shadow: 0 4px 14px rgba(2, 128, 144, 0.3);

}



/* FAQ Accordion List */

.faq-accordion-container {

  max-width: 960px;

  margin: 0 auto;

  display: flex;

  flex-direction: column;

  gap: 1rem;

}



.faq-accordion-item {

  border-radius: 16px;

  background: #FFFFFF;

  border: 1px solid rgba(226, 232, 240, 0.85);

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.025);

  overflow: hidden;

  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;

}



.faq-accordion-item:hover {

  border-color: rgba(2, 128, 144, 0.3);

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.045);

}



.faq-accordion-item.is-open {

  border-color: rgba(2, 128, 144, 0.4);

  box-shadow: 0 10px 30px rgba(2, 128, 144, 0.08);

}



.faq-question-btn {

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1.25rem;

  padding: 1.35rem 1.75rem;

  background: none;

  border: none;

  text-align: left;

  cursor: pointer;

  color: inherit;

  font-family: inherit;

  user-select: none;

}



.faq-question-text {

  font-size: 1.05rem;

  font-weight: 700;

  color: #111827;

  line-height: 1.4;

  transition: color 0.2s ease;

}



.faq-icon-wrapper {

  display: flex;

  align-items: center;

  justify-content: center;

  color: #028090;

  flex-shrink: 0;

  width: 26px;

  height: 26px;

  transition: transform 0.25s ease;

}



.faq-icon-close {

  display: none;

}



.faq-icon-plus {

  display: block;

}



.faq-accordion-item.is-open .faq-icon-close {

  display: block;

}



.faq-accordion-item.is-open .faq-icon-plus {

  display: none;

}



.faq-answer-panel {

  overflow: hidden;

  transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;

}



.faq-answer-inner {

  padding: 0 1.75rem 1.5rem;

  color: #4B5563;

  font-size: 0.98rem;

  line-height: 1.7;

}



.faq-answer-inner p {

  margin-top: 0;

  margin-bottom: 0.85rem;

}



.faq-answer-inner p:last-child {

  margin-bottom: 0;

}



/* Bottom CTA */

.faq-bottom-action {

  text-align: center;

  margin-top: 2.25rem;

}



.faq-view-all-btn {

  background: #FF5A00;

  color: #FFFFFF;

  font-weight: 700;

  font-size: 0.95rem;

  border-radius: 50px;

  padding: 0.75rem 2.2rem;

  text-decoration: none;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 0.5rem;

  box-shadow: 0 6px 18px rgba(255, 90, 0, 0.35);

  transition: all 0.22s ease;

}



.faq-view-all-btn:hover {

  background: #E65100;

  transform: translateY(-2px);

  box-shadow: 0 8px 24px rgba(255, 90, 0, 0.55);

  color: #FFFFFF;

}



/* Dark Mode Adaptation for FAQ */

[data-theme="dark"] .faq-main-title {

  color: #F9FAFB;

}



[data-theme="dark"] .faq-category-pill {

  background: rgba(255, 255, 255, 0.05);

  border-color: rgba(255, 255, 255, 0.1);

  color: #D1D5DB;

}



[data-theme="dark"] .faq-category-pill:hover {

  background: rgba(2, 128, 144, 0.15);

  border-color: #028090;

  color: #5EEAD4;

}



[data-theme="dark"] .faq-category-pill.is-active {

  background: #028090;

  color: #FFFFFF;

  border-color: #028090;

}



[data-theme="dark"] .faq-slider-nav-btn {

  background: rgba(255, 255, 255, 0.06);

  border-color: rgba(255, 255, 255, 0.12);

  color: #D1D5DB;

}



[data-theme="dark"] .faq-slider-nav-btn:hover:not(:disabled) {

  background: rgba(255, 255, 255, 0.12);

  color: #FFFFFF;

}



[data-theme="dark"] .faq-accordion-item {

  background: rgba(20, 26, 22, 0.75);

  border-color: rgba(255, 255, 255, 0.08);

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);

}



[data-theme="dark"] .faq-accordion-item.is-open {

  border-color: rgba(2, 128, 144, 0.45);

}



[data-theme="dark"] .faq-question-text {

  color: #F3F4F6;

}



[data-theme="dark"] .faq-answer-inner {

  color: #9CA3AF;

}



/* Responsive FAQ for Mobile */

@media (max-width: 640px) {

  .faq-main-section {

    padding-top: 3rem;

    padding-bottom: 3rem;

  }



  .faq-categories-slider-wrapper {

    gap: 0.4rem;

    margin-bottom: 1.75rem;

  }



  .faq-slider-nav-btn {

    width: 32px;

    height: 32px;

    min-width: 32px;

  }



  .faq-category-pill {

    font-size: 0.85rem;

    padding: 0.45rem 1.1rem;

  }



  .faq-question-btn {

    padding: 1.15rem 1.25rem;

    gap: 0.85rem;

  }



  .faq-question-text {

    font-size: 0.98rem;

  }



  .faq-answer-inner {

    padding: 0 1.25rem 1.25rem;

    font-size: 0.92rem;

  }

}



/* Reduced Motion */

@media (prefers-reduced-motion: reduce) {

  *, *::before, *::after {

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

    scroll-behavior: auto !important;

  }

}



/* ------------------------------------------------------------

   Header Action Buttons (Brochure & Request Call)

   ------------------------------------------------------------ */

.nav-btn-brochure {

  padding: 0.55rem 1.15rem;

  font-size: 0.825rem;

  font-weight: 600;

  gap: 0.45rem;

  border-radius: var(--radius-full);

}



.nav-btn-call {

  background: rgba(74, 145, 87, 0.12);

  border: 1px solid rgba(74, 145, 87, 0.35);

  color: var(--brand-green-dark);

  padding: 0.55rem 1.15rem;

  font-size: 0.825rem;

  font-weight: 600;

  border-radius: var(--radius-full);

  display: inline-flex;

  align-items: center;

  gap: 0.45rem;

  cursor: pointer;

  transition: all var(--transition-fast);

}



[data-theme="dark"] .nav-btn-call {

  background: rgba(116, 242, 152, 0.12);

  border-color: rgba(116, 242, 152, 0.3);

  color: var(--brand-accent);

}



.nav-btn-call:hover {

  background: var(--brand-green);

  border-color: var(--brand-green);

  color: #FFFFFF;

  transform: translateY(-2px);

  box-shadow: 0 4px 16px rgba(74, 145, 87, 0.35);

}



[data-theme="dark"] .nav-btn-call:hover {

  background: var(--brand-accent);

  border-color: var(--brand-accent);

  color: #060907;

  box-shadow: 0 4px 16px rgba(116, 242, 152, 0.4);

}



@media (max-width: 1080px) and (min-width: 992px) {

  .nav-btn-text {

    display: none;

  }

  .nav-btn-brochure, .nav-btn-call {

    padding: 0.55rem;

  }

}



/* ------------------------------------------------------------

   Request Call Interactive Modal

   ------------------------------------------------------------ */

.ps-modal-backdrop {

  position: fixed;

  inset: 0;

  background: rgba(10, 15, 12, 0.7);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  z-index: 99999;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 1.25rem;

  opacity: 0;

  visibility: hidden;

  transition: opacity 0.28s ease, visibility 0.28s ease;

}



.ps-modal-backdrop.is-active {

  opacity: 1;

  visibility: visible;

}



.ps-modal-dialog {

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  border-radius: 20px;

  max-width: 540px;

  width: 100%;

  padding: 2.25rem;

  position: relative;

  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);

  transform: translateY(20px) scale(0.96);

  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);

}



.ps-modal-backdrop.is-active .ps-modal-dialog {

  transform: translateY(0) scale(1);

}



.ps-modal-close {

  position: absolute;

  top: 1.25rem;

  right: 1.25rem;

  width: 36px;

  height: 36px;

  border-radius: 50%;

  border: 1px solid var(--border-color);

  background: var(--surface-color);

  color: var(--muted-color);

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: all var(--transition-fast);

}



.ps-modal-close:hover {

  background: rgba(239, 68, 68, 0.12);

  border-color: rgba(239, 68, 68, 0.4);

  color: #EF4444;

  transform: rotate(90deg);

}



.ps-modal-header {

  margin-bottom: 1.5rem;

}



.ps-modal-title {

  font-family: var(--font-display);

  font-size: 1.5rem;

  font-weight: 700;

  color: var(--text-heading);

  margin-bottom: 0.4rem;

  line-height: 1.25;

}



.ps-modal-subtitle {

  color: var(--muted-color);

  font-size: 0.9rem;

  line-height: 1.5;

}



.modal-form-group {

  margin-bottom: 1.15rem;

}



.modal-form-group label {

  display: block;

  font-size: 0.825rem;

  font-weight: 600;

  margin-bottom: 0.45rem;

  color: var(--text-heading);

}



.modal-input {

  width: 100%;

  padding: 0.8rem 1rem;

  background: var(--surface-color);

  border: 1px solid var(--border-color);

  border-radius: 10px;

  color: var(--text-color);

  font-size: 0.925rem;

  font-family: inherit;

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

  outline: none;

}



.modal-input:focus {

  border-color: var(--brand-accent);

  box-shadow: 0 0 0 3px rgba(116, 242, 152, 0.2);

}



.modal-form-row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 1rem;

}



@media (max-width: 560px) {

  .modal-form-row {

    grid-template-columns: 1fr;

    gap: 0;

  }

  .ps-modal-dialog {

    padding: 1.5rem;

  }

}



.modal-form-alert {

  padding: 0.75rem 1rem;

  border-radius: 8px;

  font-size: 0.875rem;

  margin-bottom: 1.25rem;

  line-height: 1.5;

}



.modal-form-alert.alert-success {

  background: rgba(34, 197, 94, 0.12);

  border: 1px solid rgba(34, 197, 94, 0.3);

  color: #16A34A;

}



[data-theme="dark"] .modal-form-alert.alert-success {

  color: #4ADE80;

}



.modal-form-alert.alert-error {

  background: rgba(239, 68, 68, 0.12);

  border: 1px solid rgba(239, 68, 68, 0.3);

  color: #EF4444;

}



/* ------------------------------------------------------------

   Industries We Serve Section

   ------------------------------------------------------------ */

.industries-showcase-section {

  padding-top: 5rem;

  padding-bottom: 5rem;

  background: radial-gradient(circle at 50% 50%, rgba(74, 145, 87, 0.04) 0%, transparent 65%);

}



.industries-showcase-section .container,

.global-locations-section .container {

  max-width: 1650px !important;

  width: 95% !important;

}



.industry-title-nowrap {

  display: inline-block;

  white-space: nowrap;

}



@media (max-width: 768px) {

  .industry-title-nowrap {

    white-space: normal;

    display: inline;

  }

}



.industries-grid {

  display: grid;

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

  gap: 1.5rem;

}



@media (max-width: 1100px) {

  .industries-grid {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (max-width: 600px) {

  .industries-grid {

    grid-template-columns: 1fr;

  }

}



.industry-card {

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  border-radius: 16px;

  padding: 1.85rem 1.65rem;

  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

  display: flex;

  flex-direction: column;

  position: relative;

  overflow: hidden;

}



.industry-card::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 3px;

  background: linear-gradient(90deg, var(--brand-green), var(--brand-accent));

  opacity: 0;

  transition: opacity 0.3s ease;

}



.industry-card:hover {

  transform: translateY(-6px);

  border-color: rgba(74, 145, 87, 0.4);

  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);

}



[data-theme="dark"] .industry-card:hover {

  border-color: rgba(116, 242, 152, 0.35);

  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);

}



.industry-card:hover::before {

  opacity: 1;

}



.industry-header-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 1.25rem;

}



.industry-icon-box {

  width: 48px;

  height: 48px;

  border-radius: 12px;

  background: rgba(74, 145, 87, 0.1);

  color: var(--brand-accent);

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all 0.3s ease;

}



.industry-icon-box svg {

  width: 24px;

  height: 24px;

}



.industry-card:hover .industry-icon-box {

  background: var(--brand-green);

  color: #FFFFFF;

  transform: scale(1.08);

}



.industry-badge {

  font-size: 0.725rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.06em;

  padding: 0.25rem 0.65rem;

  border-radius: var(--radius-full);

  background: var(--surface-color);

  color: var(--muted-color);

  border: 1px solid var(--border-color);

}



.industry-title {

  font-family: var(--font-display);

  font-size: 1.25rem;

  font-weight: 700;

  color: var(--text-heading);

  margin-bottom: 0.65rem;

  line-height: 1.3;

}



.industry-desc {

  color: var(--muted-color);

  font-size: 0.915rem;

  line-height: 1.6;

  flex-grow: 1;

  margin-bottom: 1.25rem;

}



.industry-footer-link {

  display: inline-flex;

  align-items: center;

  gap: 0.45rem;

  font-size: 0.85rem;

  font-weight: 600;

  color: var(--brand-accent);

  transition: transform var(--transition-fast);

}



.industry-card:hover .industry-footer-link {

  transform: translateX(4px);

}



/* ------------------------------------------------------------

   Global Agency Collaborations

   ------------------------------------------------------------ */

.agency-collab-section {

  padding-top: 5rem;

  padding-bottom: 5rem;

  background: var(--bg-darker);

  border-top: 1px solid var(--border-color);

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

}



.collab-cards-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 2rem;

}



@media (max-width: 900px) {

  .collab-cards-grid {

    grid-template-columns: 1fr;

    max-width: 500px;

    margin: 0 auto;

  }

}



.collab-card {

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  border-radius: 18px;

  padding: 2.25rem 1.85rem;

  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

  display: flex;

  flex-direction: column;

}



.collab-card:hover {

  transform: translateY(-6px);

  border-color: var(--brand-accent);

  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);

}



[data-theme="dark"] .collab-card:hover {

  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);

}



.collab-badge-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 1.75rem;

}



.collab-country-badge {

  display: inline-flex;

  align-items: center;

  gap: 0.4rem;

  font-size: 0.8rem;

  font-weight: 700;

  color: var(--text-heading);

  background: var(--surface-color);

  padding: 0.3rem 0.75rem;

  border-radius: var(--radius-full);

  border: 1px solid var(--border-color);

}



.collab-type-tag {

  font-size: 0.75rem;

  color: var(--brand-accent);

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.05em;

}



.collab-logo-container {

  height: 90px;

  background: var(--surface-color);

  border: 1px solid var(--border-color);

  border-radius: 12px;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 1rem 1.5rem;

  margin-bottom: 1.5rem;

}



.collab-agency-logo {

  max-height: 58px;

  max-width: 100%;

  object-fit: contain;

  filter: contrast(1.05);

}



.collab-info {

  margin-bottom: 1.5rem;

  flex-grow: 1;

}



.collab-agency-name {

  font-family: var(--font-display);

  font-size: 1.35rem;

  font-weight: 700;

  color: var(--text-heading);

  margin-bottom: 0.4rem;

}



.collab-agency-country {

  color: var(--muted-color);

  font-size: 0.9rem;

  line-height: 1.5;

}



.collab-visit-btn {

  display: inline-flex;

  align-items: center;

  justify-content: space-between;

  width: 100%;

  padding: 0.75rem 1.15rem;

  border-radius: 10px;

  background: var(--surface-color);

  border: 1px solid var(--border-color);

  color: var(--text-heading);

  font-size: 0.875rem;

  font-weight: 600;

  text-decoration: none;

  transition: all var(--transition-fast);

}



.collab-visit-btn:hover {

  background: var(--brand-accent);

  color: #060907;

  border-color: var(--brand-accent);

  transform: translateY(-2px);

}



/* ------------------------------------------------------------

   Three Global Locations (Above Footer)

   ------------------------------------------------------------ */

.global-locations-section {

  padding-top: 5rem;

  padding-bottom: 5.5rem;

  background: radial-gradient(circle at 50% 50%, rgba(74, 145, 87, 0.06) 0%, transparent 70%);

}



.locations-cards-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 2rem;

}



@media (max-width: 960px) {

  .locations-cards-grid {

    grid-template-columns: 1fr;

    max-width: 500px;

    margin: 0 auto;

  }

}



.location-card {

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  border-radius: 18px;

  padding: 2.25rem 2rem;

  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

  position: relative;

  overflow: hidden;

}



.location-card:hover {

  transform: translateY(-6px);

  border-color: var(--brand-accent);

  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.12);

}



[data-theme="dark"] .location-card:hover {

  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4);

}



.location-top-bar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 1.5rem;

}



.location-flag {

  font-size: 2rem;

  line-height: 1;

}



.location-badge {

  font-size: 0.75rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.06em;

  padding: 0.25rem 0.75rem;

  border-radius: var(--radius-full);

  background: rgba(74, 145, 87, 0.12);

  color: var(--brand-accent);

  border: 1px solid rgba(74, 145, 87, 0.3);

}



.location-heading-group {

  margin-bottom: 0.4rem;

}



.location-city-name {

  font-family: var(--font-display);

  font-size: 1.85rem;

  font-weight: 800;

  color: var(--text-heading);

  display: inline-block;

  margin-right: 0.5rem;

}



.location-country-name {

  font-size: 1.1rem;

  color: var(--muted-color);

  font-weight: 500;

}



.location-role-title {

  color: var(--brand-accent);

  font-size: 0.95rem;

  font-weight: 600;

  margin-bottom: 1.25rem;

}



.location-divider {

  height: 1px;

  background: var(--border-color);

  margin-bottom: 1.25rem;

}



.location-details-list {

  display: flex;

  flex-direction: column;

  gap: 0.75rem;

  margin-bottom: 1.75rem;

}



.location-detail-item {

  display: flex;

  align-items: flex-start;

  gap: 0.65rem;

  font-size: 0.9rem;

  line-height: 1.5;

  color: var(--muted-color);

}



.location-detail-link {

  color: var(--text-color);

  text-decoration: none;

  transition: color var(--transition-fast);

}



.location-detail-link:hover {

  color: var(--brand-accent);

}



.location-connect-btn {

  display: inline-flex;

  align-items: center;

  justify-content: space-between;

  width: 100%;

  padding: 0.8rem 1.2rem;

  border-radius: 10px;

  background: var(--surface-color);

  border: 1px solid var(--border-color);

  color: var(--text-heading);

  font-size: 0.875rem;

  font-weight: 600;

  text-decoration: none;

  transition: all var(--transition-fast);

}



.location-connect-btn:hover {

  background: var(--brand-green);

  border-color: var(--brand-green);

  color: #FFFFFF;

}



/* ------------------------------------------------------------

   Services Page 9 Pillars Grid

   ------------------------------------------------------------ */

.services-pillars-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 2rem;

}



@media (max-width: 1024px) {

  .services-pillars-grid {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (max-width: 700px) {

  .services-pillars-grid {

    grid-template-columns: 1fr;

  }

}



.service-pillar-card {

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  border-radius: 20px;

  padding: 2.25rem 2rem;

  display: flex;

  flex-direction: column;

  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

  position: relative;

}



.service-pillar-card:hover {

  transform: translateY(-6px);

  border-color: var(--brand-accent);

  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);

}



[data-theme="dark"] .service-pillar-card:hover {

  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4);

}



.pillar-header-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 1.5rem;

}



.pillar-number-tag {

  font-family: var(--font-mono);

  font-size: 0.8rem;

  font-weight: 700;

  color: var(--brand-accent);

  background: rgba(74, 145, 87, 0.12);

  padding: 0.3rem 0.75rem;

  border-radius: var(--radius-full);

}



.pillar-icon-box {

  width: 44px;

  height: 44px;

  border-radius: 12px;

  background: var(--surface-color);

  border: 1px solid var(--border-color);

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--brand-accent);

}



.pillar-title {

  font-family: var(--font-display);

  font-size: 1.45rem;

  font-weight: 700;

  color: var(--text-heading);

  margin-bottom: 0.75rem;

  line-height: 1.3;

}



.pillar-desc {

  color: var(--muted-color);

  font-size: 0.95rem;

  line-height: 1.6;

  margin-bottom: 1.5rem;

}



.pillar-subservices-box {

  border-top: 1px solid var(--border-color);

  padding-top: 1.25rem;

  margin-bottom: 1.75rem;

  flex-grow: 1;

}



.pillar-subs-label {

  display: block;

  font-size: 0.75rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  color: var(--muted-dark);

  margin-bottom: 0.75rem;

}



.pillar-tags-cloud {

  display: flex;

  flex-wrap: wrap;

  gap: 0.45rem;

}



.pillar-sub-pill {

  font-size: 0.785rem;

  font-weight: 500;

  padding: 0.35rem 0.75rem;

  border-radius: 8px;

  background: var(--surface-color);

  border: 1px solid var(--border-color);

  color: var(--text-color);

  transition: all var(--transition-fast);

}



.pillar-sub-pill:hover {

  background: rgba(74, 145, 87, 0.15);

  border-color: var(--brand-accent);

  color: var(--text-heading);

}



.pillar-quote-btn {

  width: 100%;

  justify-content: center;

  padding: 0.75rem;

  font-size: 0.875rem;

  border-radius: 10px;

}



.services-cta-banner {

  background: linear-gradient(135deg, #111827 0%, #1e293b 100%);

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 24px;

  padding: 4rem 3rem;

  position: relative;

  overflow: hidden;

}



@media (max-width: 600px) {

  .services-cta-banner {

    padding: 2.5rem 1.5rem;

  }

}



/* ------------------------------------------------------------

   Blogs Page Cards Grid

   ------------------------------------------------------------ */

.blogs-cards-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 2rem;

}



@media (max-width: 1024px) {

  .blogs-cards-grid {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (max-width: 650px) {

  .blogs-cards-grid {

    grid-template-columns: 1fr;

  }

}



.blog-card {

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  border-radius: 18px;

  overflow: hidden;

  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

  display: flex;

  flex-direction: column;

}



.blog-card:hover {

  transform: translateY(-6px);

  border-color: var(--brand-accent);

  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);

}



[data-theme="dark"] .blog-card:hover {

  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);

}



.blog-card-thumb {

  position: relative;

  height: 210px;

  overflow: hidden;

}



.blog-card-thumb img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.5s ease;

}



.blog-card:hover .blog-card-thumb img {

  transform: scale(1.06);

}



.blog-category-badge {

  position: absolute;

  top: 1rem;

  left: 1rem;

  background: rgba(11, 15, 12, 0.75);

  backdrop-filter: blur(8px);

  color: var(--brand-accent);

  font-size: 0.75rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  padding: 0.3rem 0.75rem;

  border-radius: var(--radius-full);

  border: 1px solid rgba(116, 242, 152, 0.3);

}



.blog-card-body {

  padding: 1.75rem;

  display: flex;

  flex-direction: column;

  flex-grow: 1;

}



.blog-meta-row {

  display: flex;

  align-items: center;

  gap: 0.5rem;

  font-size: 0.8rem;

  color: var(--muted-dark);

  margin-bottom: 0.75rem;

}



.blog-card-title {

  font-family: var(--font-display);

  font-size: 1.25rem;

  font-weight: 700;

  color: var(--text-heading);

  line-height: 1.35;

  margin-bottom: 0.75rem;

}



.blog-card-summary {

  color: var(--muted-color);

  font-size: 0.915rem;

  line-height: 1.6;

  flex-grow: 1;

  margin-bottom: 1.5rem;

}



.blog-card-footer {

  border-top: 1px solid var(--border-color);

  padding-top: 1rem;

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.blog-author-text {

  font-size: 0.8rem;

  color: var(--muted-color);

  font-weight: 500;

}



.blog-read-link {

  display: inline-flex;

  align-items: center;

  gap: 0.35rem;

  font-size: 0.825rem;

  font-weight: 600;

  color: var(--brand-accent);

}



/* ------------------------------------------------------------

   Blog & Editorial Magazine Styles

   ------------------------------------------------------------ */

.category-pill {

  display: inline-flex;

  align-items: center;

  padding: 0.5rem 1.15rem;

  border-radius: var(--radius-full);

  font-size: 0.875rem;

  font-weight: 600;

  text-decoration: none;

  background: var(--surface-card);

  color: var(--muted-color);

  border: 1px solid var(--border-color);

  transition: all var(--transition-fast);

  white-space: nowrap;

}



.category-pill:hover {

  color: var(--text-heading);

  border-color: var(--brand-accent);

  background: rgba(74, 145, 87, 0.08);

}



.category-pill.active {

  background: var(--brand-accent);

  color: #FFFFFF;

  border-color: var(--brand-accent);

  font-weight: 700;

  box-shadow: 0 4px 12px rgba(54, 122, 72, 0.25);

}



.featured-post-card {

  display: grid;

  grid-template-columns: 1.25fr 1fr;

  gap: 2.5rem;

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  border-radius: 20px;

  overflow: hidden;

  box-shadow: var(--shadow-md);

  transition: all var(--transition-base);

}



.featured-post-card:hover {

  border-color: var(--brand-accent);

  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);

}



[data-theme="dark"] .featured-post-card:hover {

  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45);

}



@media (max-width: 900px) {

  .featured-post-card {

    grid-template-columns: 1fr;

    gap: 1.5rem;

  }

}



.featured-post-img-wrap {

  width: 100%;

  height: 100%;

  min-height: 340px;

  overflow: hidden;

  position: relative;

}



.featured-post-img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);

}



.featured-post-card:hover .featured-post-img {

  transform: scale(1.05);

}



.featured-post-content {

  padding: 2.5rem 2.5rem 2.5rem 0;

  display: flex;

  flex-direction: column;

}



@media (max-width: 900px) {

  .featured-post-content {

    padding: 0 1.5rem 1.75rem 1.5rem;

  }

}



.post-category-badge {

  display: inline-block;

  padding: 0.3rem 0.75rem;

  border-radius: var(--radius-full);

  font-size: 0.75rem;

  font-weight: 700;

  background: rgba(54, 122, 72, 0.12);

  color: var(--brand-accent);

  border: 1px solid rgba(54, 122, 72, 0.25);

  text-transform: uppercase;

  letter-spacing: 0.5px;

}



.post-title-link {

  transition: color var(--transition-fast);

}



.post-title-link:hover {

  color: var(--brand-accent) !important;

}



.blog-cards-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 2rem;

}



@media (max-width: 1024px) {

  .blog-cards-grid {

    grid-template-columns: repeat(2, 1fr);

  }

}



@media (max-width: 650px) {

  .blog-cards-grid {

    grid-template-columns: 1fr;

  }

}



.blog-card-img-wrap {

  position: relative;

  width: 100%;

  height: 220px;

  overflow: hidden;

}



.blog-card-img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.5s ease;

}



.blog-card:hover .blog-card-img {

  transform: scale(1.06);

}



.blog-card-badge {

  position: absolute;

  top: 1rem;

  left: 1rem;

  background: rgba(11, 15, 12, 0.85);

  backdrop-filter: blur(8px);

  color: #74F298;

  font-size: 0.72rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  padding: 0.3rem 0.7rem;

  border-radius: var(--radius-full);

  border: 1px solid rgba(116, 242, 152, 0.3);

}



.blog-card-excerpt {

  color: var(--muted-color);

  font-size: 0.92rem;

  line-height: 1.6;

  margin-bottom: 1.25rem;

  display: -webkit-box;

  -webkit-line-clamp: 3;

  -webkit-box-orient: vertical;

  overflow: hidden;

}



.read-more-link {

  display: inline-flex;

  align-items: center;

  gap: 0.35rem;

  font-size: 0.85rem;

  font-weight: 700;

  color: var(--brand-accent);

  text-decoration: none;

  transition: gap var(--transition-fast);

}



.read-more-link:hover {

  gap: 0.6rem;

}



/* Single Blog Post Reader Layout */

.blog-reader-container {

  max-width: 1240px !important;

  width: 100%;

}



.blog-post-body {

  font-size: 1.15rem;

  line-height: 1.85;

  color: var(--text-color);

}



.blog-post-body p {

  margin-bottom: 1.75rem;

}



.blog-post-body .lead-paragraph {

  font-size: 1.35rem;

  line-height: 1.75;

  color: var(--text-heading);

  font-weight: 500;

  margin-bottom: 2rem;

}



.blog-post-body h2 {

  font-size: clamp(1.6rem, 2.8vw, 2.1rem);

  font-weight: 800;

  color: var(--text-heading);

  margin-top: 3rem;

  margin-bottom: 1.25rem;

  letter-spacing: -0.3px;

}



.blog-post-body h3 {

  font-size: clamp(1.3rem, 2.2vw, 1.6rem);

  font-weight: 700;

  color: var(--text-heading);

  margin-top: 2rem;

  margin-bottom: 0.85rem;

}



.blog-post-body blockquote {

  margin: 2.5rem 0;

  padding: 1.75rem 2rem;

  background: var(--surface-card);

  border-left: 4px solid var(--brand-accent);

  border-radius: 0 var(--radius-md) var(--radius-md) 0;

  font-size: 1.25rem;

  font-style: italic;

  line-height: 1.7;

  color: var(--text-heading);

}



.blog-post-body ul, .blog-post-body ol {

  margin: 1.5rem 0 2rem 1.5rem;

}



.blog-post-body li {

  margin-bottom: 0.75rem;

  line-height: 1.7;

}



.blog-post-body hr {

  border: none;

  border-top: 1px solid var(--border-color);

  margin: 3rem 0;

}



.blog-post-body a {

  color: var(--brand-accent);

  text-decoration: underline;

  text-underline-offset: 3px;

}



/* Article Share Buttons */

.share-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 0.4rem;

  min-width: 36px;

  height: 36px;

  padding: 0 0.75rem;

  border-radius: var(--radius-full);

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  color: var(--text-color);

  text-decoration: none;

  transition: all var(--transition-fast);

  cursor: pointer;

  font-size: 0.85rem;

  font-weight: 700;

}



.share-btn:hover {

  transform: translateY(-2px);

  color: #FFFFFF;

}



.share-linkedin:hover {

  background: #0A66C2 !important;

  border-color: #0A66C2 !important;

}



.share-twitter:hover {

  background: #000000 !important;

  border-color: #000000 !important;

}



.share-facebook:hover {

  background: #1877F2 !important;

  border-color: #1877F2 !important;

}



.share-whatsapp:hover {

  background: #25D366 !important;

  border-color: #25D366 !important;

}



.share-copy:hover {

  background: var(--brand-accent) !important;

  border-color: var(--brand-accent) !important;

}



/* ------------------------------------------------------------

   Heritage & Founding Story Card (About Page)

   ------------------------------------------------------------ */

.about-founding-story-card {

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  border-radius: 20px;

  padding: 3rem 2.5rem;

  position: relative;

  overflow: hidden;

}



.founding-story-grid {

  display: grid;

  grid-template-columns: 1.4fr 1fr;

  gap: 3rem;

  align-items: center;

}



@media (max-width: 900px) {

  .founding-story-grid {

    grid-template-columns: 1fr;

    gap: 2rem;

  }

}



.founding-metrics-column {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 1.25rem;

}



.founding-metric-box {

  background: var(--surface-color);

  border: 1px solid var(--border-color);

  border-radius: 14px;

  padding: 1.5rem;

  text-align: center;

}



.founding-metric-box .metric-num {

  display: block;

  font-family: var(--font-display);

  font-size: 2.25rem;

  font-weight: 800;

  color: var(--brand-accent);

  line-height: 1;

  margin-bottom: 0.5rem;

}



.founding-metric-box .metric-label {

  display: block;

  font-size: 0.825rem;

  color: var(--muted-color);

  font-weight: 600;

  line-height: 1.35;

}



/* ============================================================

   HERO SECTIONS REDESIGN — DIFFERENTIATED BACKGROUND & ANIMATIONS

   ============================================================ */



/* 1. Page Hero Section Background & Base Styles */

.page-hero-section {

  position: relative;

  min-height: 500px;

  display: flex;

  align-items: center;

  background: linear-gradient(180deg, #DCEEE2 0%, #E3F3E8 50%, #D1EBD8 100%) !important;

  border-bottom: 3px solid #367A48 !important;

  box-shadow: 0 14px 30px -8px rgba(46, 113, 66, 0.2) !important;

  overflow: hidden;

  padding-top: calc(var(--nav-height) + 2.75rem);

  padding-bottom: 3.5rem;

}



[data-theme="dark"] .page-hero-section {

  background: linear-gradient(180deg, #091F12 0%, #0E2C1A 50%, #123620 100%) !important;

  border-bottom: 3px solid #74F298 !important;

  box-shadow: 0 16px 45px -8px rgba(0, 0, 0, 0.9), 0 3px 15px rgba(116, 242, 152, 0.25) !important;

}



.page-hero-section::before {

  content: '';

  position: absolute;

  inset: 0;

  background-image: 

    radial-gradient(circle at 82% 28%, rgba(74, 145, 87, 0.18) 0%, transparent 48%),

    radial-gradient(circle at 14% 75%, rgba(116, 242, 152, 0.14) 0%, transparent 42%),

    linear-gradient(rgba(74, 145, 87, 0.06) 1px, transparent 1px),

    linear-gradient(90deg, rgba(74, 145, 87, 0.06) 1px, transparent 1px);

  background-size: 100% 100%, 100% 100%, 46px 46px, 46px 46px;

  pointer-events: none;

  z-index: 0;

}



[data-theme="dark"] .page-hero-section::before {

  background-image: 

    radial-gradient(circle at 82% 28%, rgba(74, 145, 87, 0.32) 0%, transparent 50%),

    radial-gradient(circle at 14% 75%, rgba(116, 242, 152, 0.2) 0%, transparent 45%),

    linear-gradient(rgba(116, 242, 152, 0.06) 1px, transparent 1px),

    linear-gradient(90deg, rgba(116, 242, 152, 0.06) 1px, transparent 1px);

}



.page-hero-section .container,

.page-hero-section .container-wide {

  position: relative;

  z-index: 1;

  width: 100%;

}



/* Homepage Hero Section background contrast */

.hero-section {

  background: linear-gradient(180deg, #DCEEE2 0%, #E3F3E8 50%, #D1EBD8 100%) !important;

  border-bottom: 3px solid #367A48 !important;

  box-shadow: 0 14px 30px -8px rgba(46, 113, 66, 0.2) !important;

}



[data-theme="dark"] .hero-section {

  background: linear-gradient(180deg, #091F12 0%, #0E2C1A 50%, #123620 100%) !important;

  border-bottom: 3px solid #74F298 !important;

  box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.9), 0 3px 15px rgba(116, 242, 152, 0.25) !important;

}



/* 2. Responsive 2-Column Split Grid */

.hero-split-grid {

  display: grid;

  grid-template-columns: 1.15fr 0.85fr;

  align-items: center;

  gap: 3.5rem;

}



@media (max-width: 992px) {

  .hero-split-grid {

    grid-template-columns: 1fr;

    gap: 2.75rem;

    text-align: center;

  }

  .hero-split-grid .badge,

  .hero-split-grid .service-hero-actions,

  .hero-split-grid .services-hero-actions,

  .hero-split-grid .contact-trust-chips,

  .hero-split-grid .portfolio-hero-chips,

  .hero-split-grid .about-hero-chips {

    justify-content: center;

  }

  .hero-split-grid p {

    margin-left: auto;

    margin-right: auto;

  }

}



/* 3. Global Hero Keyframe Animations */

@keyframes heroFloatA {

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

  50% { transform: translateY(-10px) rotate(-1deg); }

}



@keyframes heroFloatB {

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

  50% { transform: translateY(10px) rotate(1deg); }

}



@keyframes heroFloatC {

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

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

}



@keyframes heroSpinCW {

  from { transform: rotate(0deg); }

  to { transform: rotate(360deg); }

}



@keyframes heroSpinCCW {

  from { transform: rotate(360deg); }

  to { transform: rotate(0deg); }

}



@keyframes heroPulseGlow {

  0%, 100% {

    transform: scale(1);

    box-shadow: 0 0 25px rgba(74, 145, 87, 0.35);

  }

  50% {

    transform: scale(1.06);

    box-shadow: 0 0 45px rgba(116, 242, 152, 0.65);

  }

}



@keyframes heroRadarRipple {

  0% { transform: scale(0.9); opacity: 0.8; }

  50% { transform: scale(1.08); opacity: 0.25; }

  100% { transform: scale(0.9); opacity: 0.8; }

}



@keyframes heroLiveDot {

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

  50% { opacity: 0.3; transform: scale(0.75); }

}



/* 4. Contact Hero Interactive Floating Badges */

.contact-floating-badge,

.character-floating-badge {

  position: absolute;

  z-index: 3;

  display: inline-flex;

  align-items: center;

  gap: 0.45rem;

  padding: 0.5rem 0.95rem;

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-full);

  font-family: var(--font-display);

  font-size: 0.82rem;

  font-weight: 700;

  color: var(--text-heading);

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  text-decoration: none;

  white-space: nowrap;

  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;

  cursor: pointer;

}



.contact-floating-badge:hover {

  transform: scale(1.08) translateY(-2px) !important;

  border-color: var(--brand-accent) !important;

  color: var(--brand-accent) !important;

  box-shadow: 0 12px 28px rgba(74, 145, 87, 0.25) !important;

}



[data-theme="dark"] .contact-floating-badge,

[data-theme="dark"] .character-floating-badge {

  background: rgba(20, 26, 22, 0.92);

  border-color: rgba(116, 242, 152, 0.28);

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);

}



.contact-floating-badge .badge-icon,

.character-floating-badge .badge-icon {

  font-size: 0.95rem;

  line-height: 1;

}



.contact-floating-badge.badge-top-left {

  top: -4%;

  left: -8%;

  animation: heroFloatA 4.5s ease-in-out infinite;

}



.contact-floating-badge.badge-top-right {

  top: 6%;

  right: -8%;

  animation: heroFloatC 4.8s ease-in-out infinite 0.5s;

}



.contact-floating-badge.badge-bottom-left {

  bottom: 12%;

  left: -10%;

  animation: heroFloatB 5.2s ease-in-out infinite;

}



.contact-floating-badge.badge-bottom-right {

  bottom: -4%;

  right: -4%;

  animation: heroFloatA 5s ease-in-out infinite 1.2s;

}



@media (max-width: 680px) {

  .contact-floating-badge.badge-top-left { left: 0%; top: -6%; }

  .contact-floating-badge.badge-top-right { right: 0%; top: 4%; }

  .contact-floating-badge.badge-bottom-left { left: 0%; bottom: 6%; }

  .contact-floating-badge.badge-bottom-right { right: 0%; bottom: -6%; }

}



/* 5. About Page Hero Visual: Agency Echo Ecosystem */

.about-hero-visual-stage {

  position: relative;

  width: 100%;

  min-height: 420px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.about-ecosystem-wrapper {

  position: relative;

  width: 380px;

  height: 380px;

  max-width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

}



.about-orbit-ring-outer {

  position: absolute;

  width: 100%;

  height: 100%;

  border-radius: 50%;

  border: 1px dashed rgba(74, 145, 87, 0.35);

  animation: heroSpinCW 38s linear infinite;

  pointer-events: none;

}



[data-theme="dark"] .about-orbit-ring-outer {

  border-color: rgba(116, 242, 152, 0.3);

}



.about-orbit-ring-inner {

  position: absolute;

  width: 72%;

  height: 72%;

  border-radius: 50%;

  border: 1px solid rgba(74, 145, 87, 0.2);

  animation: heroSpinCCW 28s linear infinite;

  pointer-events: none;

}



.about-core-emblem {

  position: relative;

  z-index: 2;

  width: 110px;

  height: 110px;

  border-radius: 50%;

  background: radial-gradient(circle at 35% 35%, #5db26c 0%, #2E7142 60%, #173b22 100%);

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  color: #FFFFFF;

  text-align: center;

  animation: heroPulseGlow 4s ease-in-out infinite;

  border: 2px solid rgba(255, 255, 255, 0.3);

}



[data-theme="dark"] .about-core-emblem {

  background: radial-gradient(circle at 35% 35%, #74F298 0%, #2E7142 60%, #081B0E 100%);

  color: #060907;

  border-color: rgba(116, 242, 152, 0.6);

}



.about-core-emblem .emblem-icon {

  font-size: 1.75rem;

  line-height: 1;

  margin-bottom: 0.2rem;

}



.about-core-emblem .emblem-title {

  font-family: var(--font-display);

  font-size: 0.72rem;

  font-weight: 800;

  letter-spacing: 0.08em;

  text-transform: uppercase;

}



.about-float-card {

  position: absolute;

  z-index: 3;

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-md);

  padding: 0.75rem 1rem;

  display: flex;

  align-items: center;

  gap: 0.65rem;

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.07);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  transition: transform var(--transition-fast), border-color var(--transition-fast);

  white-space: nowrap;

}



[data-theme="dark"] .about-float-card {

  background: rgba(20, 26, 22, 0.92);

  border-color: rgba(116, 242, 152, 0.22);

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);

}



.about-float-card:hover {

  border-color: var(--brand-accent);

}



.about-float-card .card-icon {

  font-size: 1.35rem;

  line-height: 1;

}



.about-float-card .card-text h4 {

  font-family: var(--font-display);

  font-size: 0.88rem;

  font-weight: 700;

  color: var(--text-heading);

  margin: 0;

  line-height: 1.2;

}



.about-float-card .card-text p {

  font-size: 0.75rem;

  color: var(--muted-color);

  margin: 0;

  line-height: 1.2;

}



.about-card-1 {

  top: 0%;

  left: -4%;

  animation: heroFloatA 4.8s ease-in-out infinite;

}



.about-card-2 {

  top: 6%;

  right: -8%;

  animation: heroFloatB 5.4s ease-in-out infinite 0.3s;

}



.about-card-3 {

  bottom: 4%;

  left: -8%;

  animation: heroFloatC 5.1s ease-in-out infinite 0.7s;

}



.about-card-4 {

  bottom: 0%;

  right: -4%;

  animation: heroFloatA 4.6s ease-in-out infinite 1.1s;

}



@media (max-width: 540px) {

  .about-ecosystem-wrapper {

    width: 310px;

    height: 310px;

  }

  .about-float-card {

    padding: 0.5rem 0.75rem;

  }

  .about-card-1 { left: 0%; top: -4%; }

  .about-card-2 { right: 0%; top: 4%; }

  .about-card-3 { left: 0%; bottom: 2%; }

  .about-card-4 { right: 0%; bottom: -4%; }

}



/* 6. Services Page Hero Visual: 360° Creative Orbit */

.services-hero-visual-stage {

  position: relative;

  width: 100%;

  min-height: 420px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.services-orbit-wrapper {

  position: relative;

  width: 400px;

  height: 400px;

  max-width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

}



.services-orbit-center {

  position: relative;

  z-index: 2;

  width: 125px;

  height: 125px;

  border-radius: 50%;

  background: radial-gradient(circle at 35% 35%, #2E7142 0%, #1b4928 60%, #0e2715 100%);

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  color: #FFFFFF;

  text-align: center;

  border: 2px solid rgba(116, 242, 152, 0.45);

  box-shadow: 0 0 35px rgba(74, 145, 87, 0.4);

  animation: heroPulseGlow 4s ease-in-out infinite;

}



[data-theme="dark"] .services-orbit-center {

  background: radial-gradient(circle at 35% 35%, #74F298 0%, #2E7142 60%, #06140A 100%);

  color: #060907;

  border-color: rgba(116, 242, 152, 0.7);

}



.services-orbit-center .center-metric {

  font-family: var(--font-display);

  font-size: 1.5rem;

  font-weight: 800;

  line-height: 1;

}



.services-orbit-center .center-label {

  font-size: 0.68rem;

  font-weight: 700;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  margin-top: 0.2rem;

}



.services-radar-ring {

  position: absolute;

  width: 155px;

  height: 155px;

  border-radius: 50%;

  border: 1px solid rgba(116, 242, 152, 0.45);

  animation: heroRadarRipple 3s ease-out infinite;

  pointer-events: none;

}



.services-orbit-ring {

  position: absolute;

  width: 100%;

  height: 100%;

  border-radius: 50%;

  border: 1px dashed rgba(74, 145, 87, 0.3);

  animation: heroSpinCW 45s linear infinite;

  pointer-events: none;

}



[data-theme="dark"] .services-orbit-ring {

  border-color: rgba(116, 242, 152, 0.28);

}



.services-node-pill {

  position: absolute;

  z-index: 3;

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  padding: 0.55rem 0.95rem;

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-full);

  font-family: var(--font-display);

  font-size: 0.8rem;

  font-weight: 700;

  color: var(--text-heading);

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  white-space: nowrap;

  transition: transform var(--transition-fast), border-color var(--transition-fast);

}



[data-theme="dark"] .services-node-pill {

  background: rgba(20, 26, 22, 0.92);

  border-color: rgba(116, 242, 152, 0.25);

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);

}



.services-node-pill:hover {

  transform: scale(1.05);

  border-color: var(--brand-accent);

}



.node-1 { top: 1%; left: 8%; animation: heroFloatA 4.6s ease-in-out infinite; }

.node-2 { top: 4%; right: 4%; animation: heroFloatB 5.1s ease-in-out infinite 0.4s; }

.node-3 { top: 46%; right: -10%; animation: heroFloatC 4.8s ease-in-out infinite 0.8s; }

.node-4 { bottom: 6%; right: 6%; animation: heroFloatA 5.3s ease-in-out infinite 1.2s; }

.node-5 { bottom: 2%; left: 8%; animation: heroFloatB 4.7s ease-in-out infinite 0.2s; }

.node-6 { top: 46%; left: -10%; animation: heroFloatC 5s ease-in-out infinite 0.6s; }



.services-sync-banner {

  position: absolute;

  bottom: -6%;

  z-index: 4;

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  padding: 0.4rem 0.85rem;

  background: rgba(74, 145, 87, 0.12);

  border: 1px solid rgba(74, 145, 87, 0.35);

  border-radius: var(--radius-full);

  font-size: 0.76rem;

  font-weight: 700;

  color: var(--brand-accent);

  backdrop-filter: blur(8px);

}



[data-theme="dark"] .services-sync-banner {

  background: rgba(116, 242, 152, 0.12);

  border-color: rgba(116, 242, 152, 0.3);

}



.services-sync-banner .pulse-dot {

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: var(--brand-accent);

  animation: heroLiveDot 1.6s ease-in-out infinite;

}



@media (max-width: 540px) {

  .services-orbit-wrapper {

    width: 320px;

    height: 320px;

  }

  .node-3 { right: -2%; }

  .node-6 { left: -2%; }

}



/* 7. Service Detail Hero Visual: Pillar Capability & Delivery Matrix */

.service-detail-hero-visual-stage {

  position: relative;

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

}



.detail-matrix-card {

  position: relative;

  width: 100%;

  max-width: 440px;

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  border-radius: 20px;

  padding: 2rem;

  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.1);

  backdrop-filter: blur(14px);

  -webkit-backdrop-filter: blur(14px);

  z-index: 2;

  animation: heroFloatA 6s ease-in-out infinite;

}



[data-theme="dark"] .detail-matrix-card {

  background: rgba(20, 26, 22, 0.9);

  border-color: rgba(116, 242, 152, 0.22);

  box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.7);

}



.detail-matrix-card-bg-layer {

  position: absolute;

  top: 14px;

  left: 14px;

  right: -14px;

  bottom: -14px;

  background: rgba(74, 145, 87, 0.08);

  border: 1px dashed rgba(74, 145, 87, 0.25);

  border-radius: 24px;

  z-index: 1;

  pointer-events: none;

}



[data-theme="dark"] .detail-matrix-card-bg-layer {

  background: rgba(116, 242, 152, 0.05);

  border-color: rgba(116, 242, 152, 0.18);

}



.detail-matrix-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 1.5rem;

  padding-bottom: 1rem;

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

}



.detail-matrix-icon-badge {

  width: 54px;

  height: 54px;

  border-radius: 14px;

  background: rgba(74, 145, 87, 0.15);

  border: 1px solid rgba(74, 145, 87, 0.35);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.8rem;

  line-height: 1;

}



[data-theme="dark"] .detail-matrix-icon-badge {

  background: rgba(116, 242, 152, 0.15);

  border-color: rgba(116, 242, 152, 0.35);

}



.detail-matrix-status {

  display: inline-flex;

  align-items: center;

  gap: 0.4rem;

  font-size: 0.75rem;

  font-weight: 700;

  color: var(--brand-accent);

  background: rgba(74, 145, 87, 0.1);

  padding: 0.3rem 0.75rem;

  border-radius: var(--radius-full);

}



.detail-matrix-status .dot {

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: var(--brand-accent);

  animation: heroLiveDot 1.8s ease-in-out infinite;

}



.detail-matrix-list {

  list-style: none;

  display: flex;

  flex-direction: column;

  gap: 0.85rem;

  margin-bottom: 1.5rem;

}



.detail-matrix-item {

  display: flex;

  align-items: center;

  gap: 0.75rem;

  font-size: 0.925rem;

  color: var(--text-color);

  font-weight: 600;

}



.detail-matrix-item .check-pill {

  width: 22px;

  height: 22px;

  border-radius: 50%;

  background: var(--brand-green);

  color: #FFFFFF;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 0.75rem;

  font-weight: 800;

  flex-shrink: 0;

}



[data-theme="dark"] .detail-matrix-item .check-pill {

  background: var(--brand-accent);

  color: #060907;

}



.detail-matrix-footer {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 0.75rem;

  padding-top: 1rem;

  border-top: 1px solid var(--border-color);

}



.detail-matrix-kpi {

  background: var(--surface-color);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-sm);

  padding: 0.65rem 0.85rem;

  text-align: center;

}



.detail-matrix-kpi .kpi-num {

  font-family: var(--font-display);

  font-size: 1.1rem;

  font-weight: 800;

  color: var(--brand-accent);

  display: block;

}



.detail-matrix-kpi .kpi-label {

  font-size: 0.72rem;

  color: var(--muted-color);

  font-weight: 600;

}



/* 8. Portfolio Hero Visual: Multi-Medium Creative Showcase */

.portfolio-hero-visual-stage {

  position: relative;

  width: 100%;

  min-height: 400px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.portfolio-showcase-stack {

  position: relative;

  width: 380px;

  height: 340px;

  max-width: 100%;

}



/* Card 1: 4:5 Stills (Front Center) */

.showcase-card-stills {

  position: absolute;

  top: 15%;

  left: 5%;

  width: 260px;

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  border-radius: 16px;

  overflow: hidden;

  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.12);

  z-index: 3;

  animation: heroFloatA 5.5s ease-in-out infinite;

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

}



[data-theme="dark"] .showcase-card-stills {

  background: rgba(20, 26, 22, 0.94);

  border-color: rgba(116, 242, 152, 0.25);

  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7);

}



.showcase-card-stills .stills-thumb {

  width: 100%;

  height: 140px;

  object-fit: cover;

  display: block;

}



.showcase-card-stills .stills-info {

  padding: 0.85rem 1rem;

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.showcase-card-stills .stills-tag {

  font-family: var(--font-display);

  font-size: 0.825rem;

  font-weight: 700;

  color: var(--text-heading);

}



.showcase-card-stills .stills-format {

  font-size: 0.72rem;

  font-weight: 700;

  color: var(--brand-accent);

  background: rgba(74, 145, 87, 0.14);

  padding: 0.2rem 0.55rem;

  border-radius: 999px;

}



/* Card 2: 16:9 Films (Top Right Floating) */

.showcase-card-films {

  position: absolute;

  top: -4%;

  right: 0%;

  width: 210px;

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  border-radius: 14px;

  padding: 0.85rem 1rem;

  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.1);

  z-index: 4;

  animation: heroFloatB 4.8s ease-in-out infinite 0.5s;

  display: flex;

  align-items: center;

  gap: 0.75rem;

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

}



[data-theme="dark"] .showcase-card-films {

  background: rgba(20, 26, 22, 0.94);

  border-color: rgba(116, 242, 152, 0.25);

  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.65);

}



.showcase-play-circle {

  width: 38px;

  height: 38px;

  border-radius: 50%;

  background: #E1306C;

  color: #FFFFFF;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  animation: heroRadarRipple 2.5s ease-out infinite;

}



.showcase-card-films .film-text h5 {

  font-family: var(--font-display);

  font-size: 0.82rem;

  font-weight: 700;

  color: var(--text-heading);

  margin: 0;

}



.showcase-card-films .film-text p {

  font-size: 0.72rem;

  color: var(--muted-color);

  margin: 0;

}



/* Card 3: 9:16 Reels (Bottom Right Floating) */

.showcase-card-reels {

  position: absolute;

  bottom: 0%;

  right: 4%;

  width: 220px;

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  border-radius: 14px;

  padding: 0.85rem 1rem;

  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.1);

  z-index: 2;

  animation: heroFloatC 5.2s ease-in-out infinite 0.9s;

  display: flex;

  align-items: center;

  gap: 0.75rem;

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

}



[data-theme="dark"] .showcase-card-reels {

  background: rgba(20, 26, 22, 0.94);

  border-color: rgba(116, 242, 152, 0.25);

  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.65);

}



.showcase-reels-icon {

  width: 36px;

  height: 36px;

  border-radius: 10px;

  background: linear-gradient(135deg, #405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D);

  color: #FFFFFF;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.1rem;

  flex-shrink: 0;

}



.showcase-card-reels .reel-text h5 {

  font-family: var(--font-display);

  font-size: 0.82rem;

  font-weight: 700;

  color: var(--text-heading);

  margin: 0;

}



.showcase-card-reels .reel-text p {

  font-size: 0.72rem;

  color: var(--muted-color);

  margin: 0;

}



/* ------------------------------------------------------------

   WordPress-like Top Admin Floating Bar ("Edit with Visual Builder")

   ------------------------------------------------------------ */

.ps-admin-top-bar {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  height: 38px;

  background: #0f1512;

  color: #E2E8F0;

  z-index: 9999999;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  font-size: 0.8rem;

  box-shadow: 0 2px 12px rgba(0,0,0,0.45);

  border-bottom: 1px solid rgba(116, 242, 152, 0.25);

}



body.has-admin-top-bar {

  padding-top: 38px !important;

}



body.has-admin-top-bar .site-header {

  top: 38px !important;

}



body.has-admin-top-bar .hero-section,

body.has-admin-top-bar .page-hero-section {

  padding-top: calc(var(--nav-height) + 38px) !important;

}



@media (max-width: 992px) {

  body.has-admin-top-bar .nav-links {

    top: calc(var(--nav-height) + 38px) !important;

    height: calc(100vh - var(--nav-height) - 38px) !important;

  }

}



.ps-admin-bar-inner {

  max-width: 1400px;

  margin: 0 auto;

  padding: 0 1rem;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.ps-admin-bar-left,

.ps-admin-bar-right {

  display: flex;

  align-items: center;

  gap: 0.85rem;

}



.ps-admin-bar-brand {

  color: #FFFFFF;

  text-decoration: none;

  font-weight: 700;

  display: flex;

  align-items: center;

  gap: 6px;

  font-size: 0.8rem;

}



.ps-admin-bar-dot {

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: #74F298;

  box-shadow: 0 0 6px #74F298;

}



.ps-admin-bar-edit-btn {

  background: linear-gradient(135deg, #2E8B57 0%, #1E6B3E 100%);

  color: #FFFFFF !important;

  text-decoration: none;

  font-weight: 700;

  padding: 0.3rem 0.85rem;

  border-radius: 999px;

  display: inline-flex;

  align-items: center;

  gap: 6px;

  font-size: 0.775rem;

  box-shadow: 0 2px 8px rgba(46, 139, 87, 0.4);

  transition: all 0.2s ease;

  border: 1px solid rgba(116, 242, 152, 0.35);

}



.ps-admin-bar-edit-btn:hover {

  background: linear-gradient(135deg, #3CB371 0%, #2E8B57 100%);

  transform: translateY(-1px);

  box-shadow: 0 4px 12px rgba(46, 139, 87, 0.6);

}



.ps-admin-bar-user {

  color: #94A3B8;

  font-size: 0.75rem;

}



.ps-admin-bar-user b {

  color: #FFFFFF;

}



.ps-admin-bar-link {

  color: #CBD5E1;

  text-decoration: none;

  font-size: 0.775rem;

  transition: color 0.15s;

}



.ps-admin-bar-link:hover {

  color: #74F298;

}



.ps-admin-bar-logout {

  color: #F87171;

  text-decoration: none;

  font-size: 0.75rem;

  margin-left: 0.25rem;

}



.ps-admin-bar-logout:hover {

  text-decoration: underline;

}



.ps-admin-bar-toggle-btn {

  background: rgba(255, 255, 255, 0.1);

  border: 1px solid rgba(255, 255, 255, 0.2);

  color: #CBD5E1;

  font-size: 0.65rem;

  padding: 3px 7px;

  border-radius: 4px;

  cursor: pointer;

  transition: all 0.15s ease;

  line-height: 1;

  font-family: inherit;

}



.ps-admin-bar-toggle-btn:hover {

  background: rgba(255, 255, 255, 0.2);

  color: #FFFFFF;

}



/* Minimized Floating Pill State */

body.has-admin-top-bar.admin-bar-minimized {

  padding-top: 0 !important;

}



body.has-admin-top-bar.admin-bar-minimized .site-header {

  top: 0 !important;

}



body.has-admin-top-bar.admin-bar-minimized .hero-section,

body.has-admin-top-bar.admin-bar-minimized .page-hero-section {

  padding-top: var(--nav-height) !important;

}



body.has-admin-top-bar.admin-bar-minimized .ps-admin-top-bar {

  top: 15px;

  right: 15px;

  left: auto;

  height: auto;

  border-radius: 999px;

  padding: 4px 10px;

  background: rgba(15, 21, 18, 0.95);

  backdrop-filter: blur(8px);

  border: 1px solid rgba(116, 242, 152, 0.4);

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);

}



body.has-admin-top-bar.admin-bar-minimized .ps-admin-bar-brand,

body.has-admin-top-bar.admin-bar-minimized .ps-admin-bar-user,

body.has-admin-top-bar.admin-bar-minimized .ps-admin-bar-link,

body.has-admin-top-bar.admin-bar-minimized .ps-admin-bar-logout {

  display: none !important;

}



/* ============================================================

   Portfolio Hero Animated Smartphone Social Media Mockup

   ============================================================ */

.portfolio-hero-visual-stage {

  position: relative;

  width: 100%;

  min-height: 520px;

  display: flex;

  align-items: center;

  justify-content: center;

}



/* Ambient Radial Glow */

.character-ambient-glow,

.blog-stage-ambient-glow,

.services-stage-ambient-glow,

.phone-ambient-glow {

  position: absolute;

  width: 380px;

  height: 380px;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(74, 145, 87, 0.22) 0%, rgba(255, 255, 255, 0.08) 45%, transparent 70%);

  filter: blur(45px);

  pointer-events: none;

  z-index: 1;

  animation: phoneGlowPulse 5s ease-in-out infinite;

}



[data-theme="dark"] .character-ambient-glow,

[data-theme="dark"] .blog-stage-ambient-glow,

[data-theme="dark"] .services-stage-ambient-glow,

[data-theme="dark"] .about-stage-ambient-glow {

  background: radial-gradient(circle, rgba(116, 242, 152, 0.28) 0%, rgba(255, 255, 255, 0.05) 45%, transparent 70%);

}



/* Services Hero Visual Stage (Stationary Transparent Animated Sticker Icon) */

.services-hero-visual-stage {

  position: relative;

  width: 100%;

  min-height: 440px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.services-character-stage {

  position: relative;

  z-index: 2;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;

  max-width: 440px;

}



.services-character-gif {

  width: 100%;

  max-width: 420px;

  height: auto;

  object-fit: contain;

  display: block;

  filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.16));

  user-select: none;

}



[data-theme="dark"] .services-character-gif {

  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.65));

}



.services-floating-badge {

  position: absolute;

  z-index: 5;

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  border-radius: 14px;

  padding: 0.55rem 0.95rem;

  display: flex;

  align-items: center;

  gap: 0.65rem;

  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

}



[data-theme="dark"] .services-floating-badge {

  background: rgba(20, 26, 22, 0.94);

  border-color: rgba(116, 242, 152, 0.25);

  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.65);

}



.services-floating-badge .badge-icon {

  font-size: 1.15rem;

  line-height: 1;

}



.services-floating-badge .badge-copy {

  display: flex;

  flex-direction: column;

}



.services-floating-badge .badge-num {

  font-family: var(--font-display);

  font-size: 0.88rem;

  font-weight: 800;

  color: var(--text-heading);

  line-height: 1.1;

}



.services-floating-badge .badge-label {

  font-size: 0.72rem;

  font-weight: 600;

  color: var(--muted-color);

  text-transform: uppercase;

  letter-spacing: 0.5px;

  line-height: 1.1;

  margin-top: 2px;

}



/* Blog Hero Visual Stage (Stationary Transparent Animated Sticker Icon) */

.blog-hero-visual-stage {

  position: relative;

  width: 100%;

  min-height: 440px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.blog-character-stage {

  position: relative;

  z-index: 2;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;

  max-width: 440px;

}



.blog-character-gif {

  width: 100%;

  max-width: 420px;

  height: auto;

  object-fit: contain;

  display: block;

  filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.16));

  user-select: none;

}



[data-theme="dark"] .blog-character-gif {

  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.65));

}



.blog-floating-badge {

  position: absolute;

  z-index: 5;

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  border-radius: 14px;

  padding: 0.55rem 0.95rem;

  display: flex;

  align-items: center;

  gap: 0.65rem;

  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

}



[data-theme="dark"] .blog-floating-badge {

  background: rgba(20, 26, 22, 0.94);

  border-color: rgba(116, 242, 152, 0.25);

  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.65);

}



.blog-floating-badge .badge-icon {

  font-size: 1.15rem;

  line-height: 1;

}



.blog-floating-badge .badge-copy {

  display: flex;

  flex-direction: column;

}



.blog-floating-badge .badge-num {

  font-family: var(--font-display);

  font-size: 0.88rem;

  font-weight: 800;

  color: var(--text-heading);

  line-height: 1.1;

}



.blog-floating-badge .badge-label {

  font-size: 0.72rem;

  font-weight: 600;

  color: var(--muted-color);

  text-transform: uppercase;

  letter-spacing: 0.5px;

  line-height: 1.1;

  margin-top: 2px;

}



/* About Us Hero Visual Stage (Stationary Transparent Animated Sticker Icon) */

.about-hero-visual-stage {

  position: relative;

  width: 100%;

  min-height: 440px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.about-stage-ambient-glow {

  position: absolute;

  width: 380px;

  height: 380px;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(74, 145, 87, 0.16) 0%, rgba(255, 255, 255, 0.04) 40%, transparent 70%);

  filter: blur(35px);

  pointer-events: none;

  z-index: 1;

  animation: phoneGlowPulse 5s ease-in-out infinite;

}



.about-character-stage {

  position: relative;

  z-index: 2;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;

  max-width: 440px;

}



.about-character-gif {

  width: 100%;

  max-width: 420px;

  height: auto;

  object-fit: contain;

  display: block;

  filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.16));

  user-select: none;

}



[data-theme="dark"] .about-character-gif {

  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.65));

}



.about-floating-badge {

  position: absolute;

  z-index: 5;

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  border-radius: 14px;

  padding: 0.55rem 0.95rem;

  display: flex;

  align-items: center;

  gap: 0.65rem;

  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

}



[data-theme="dark"] .about-floating-badge {

  background: rgba(20, 26, 22, 0.94);

  border-color: rgba(116, 242, 152, 0.25);

  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.65);

}



.about-floating-badge .badge-icon {

  font-size: 1.15rem;

  line-height: 1;

}



.about-floating-badge .badge-copy {

  display: flex;

  flex-direction: column;

}



.about-floating-badge .badge-num {

  font-family: var(--font-display);

  font-size: 0.88rem;

  font-weight: 800;

  color: var(--text-heading);

  line-height: 1.1;

}



.about-floating-badge .badge-label {

  font-size: 0.72rem;

  font-weight: 600;

  color: var(--muted-color);

  text-transform: uppercase;

  letter-spacing: 0.5px;

  line-height: 1.1;

  margin-top: 2px;

}



/* Hero Character Stage (Black & White Animated Sticker Icon) */

.hero-character-stage {

  position: relative;

  z-index: 2;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;

  max-width: 440px;

}



.hero-character-gif {

  width: 100%;

  max-width: 420px;

  height: auto;

  object-fit: contain;

  display: block;

  filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.18));

  user-select: none;

}



[data-theme="dark"] .hero-character-gif {

  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.65));

}



@keyframes phoneGlowPulse {

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

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

}



/* Floating Stat Badges */

.phone-floating-badge {

  position: absolute;

  z-index: 5;

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  border-radius: 14px;

  padding: 0.6rem 0.95rem;

  display: flex;

  align-items: center;

  gap: 0.65rem;

  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

}



[data-theme="dark"] .phone-floating-badge {

  background: rgba(20, 26, 22, 0.94);

  border-color: rgba(116, 242, 152, 0.25);

  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.65);

}



.badge-top-left {

  top: 10%;

  left: -2%;

  animation: heroBadgeFloatB 5.4s ease-in-out infinite 0.4s;

}



.badge-top-right {

  top: 8%;

  right: 2%;

  animation: heroBadgeFloatA 5.2s ease-in-out infinite;

}



.badge-bottom-left {

  bottom: 6%;

  left: 2%;

  animation: heroBadgeFloatB 5.6s ease-in-out infinite 0.8s;

}



.badge-bottom-right {

  bottom: 10%;

  right: -2%;

  animation: heroBadgeFloatA 5.0s ease-in-out infinite 1.2s;

}



@keyframes heroBadgeFloatA {

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

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

}



@keyframes heroBadgeFloatB {

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

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

}



.badge-icon-fire {

  font-size: 1.1rem;

}



.badge-icon-pkg {

  width: 26px;

  height: 26px;

  border-radius: 7px;

  background: linear-gradient(135deg, #F59E0B, #D97706);

  color: #fff;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}



.badge-icon-print {

  width: 26px;

  height: 26px;

  border-radius: 7px;

  background: linear-gradient(135deg, #3B82F6, #1D4ED8);

  color: #fff;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}



.badge-icon-video {

  width: 26px;

  height: 26px;

  border-radius: 7px;

  background: linear-gradient(135deg, #8B5CF6, #6D28D9);

  color: #fff;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}



.badge-icon-insta {

  width: 26px;

  height: 26px;

  border-radius: 7px;

  background: linear-gradient(135deg, #405DE6, #833AB4, #E1306C, #FD1D1D);

  color: #fff;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}



.badge-copy {

  display: flex;

  flex-direction: column;

}



.badge-num {

  font-family: var(--font-display);

  font-size: 0.82rem;

  font-weight: 800;

  color: var(--text-heading);

  line-height: 1.2;

}



.badge-label {

  font-size: 0.65rem;

  color: var(--muted-color);

  font-weight: 600;

}



/* Smartphone Mockup Frame */

.smartphone-mockup {

  position: relative;

  width: 290px;

  height: 495px;

  border-radius: 40px;

  background: #0B100C;

  border: 7px solid #1E2721;

  box-shadow: 0 28px 55px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 0 0 2px #000;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  z-index: 3;

  transform: perspective(900px) rotateY(-4deg) rotateX(2deg);

  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;

  user-select: none;

}



.smartphone-mockup:hover {

  transform: perspective(900px) rotateY(0deg) rotateX(0deg);

  box-shadow: 0 32px 65px -10px rgba(74, 145, 87, 0.3), 0 0 0 1px rgba(116, 242, 152, 0.35), inset 0 0 0 2px #000;

}



/* Dynamic Island */

.phone-dynamic-island {

  position: absolute;

  top: 8px;

  left: 50%;

  transform: translateX(-50%);

  width: 82px;

  height: 18px;

  background: #000000;

  border-radius: 20px;

  z-index: 25;

  display: flex;

  align-items: center;

  justify-content: flex-end;

  padding-right: 8px;

}



.phone-speaker-slit {

  position: absolute;

  top: 3px;

  left: 50%;

  transform: translateX(-50%);

  width: 26px;

  height: 2.5px;

  background: #1c1c1c;

  border-radius: 2px;

}



.phone-camera-lens {

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: #0f1c2b;

  border: 1px solid rgba(255, 255, 255, 0.18);

}



/* Phone Status Bar */

.phone-status-bar {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 30px;

  padding: 4px 16px 0;

  display: flex;

  justify-content: space-between;

  align-items: center;

  font-size: 0.65rem;

  font-weight: 700;

  color: #FFFFFF;

  z-index: 22;

  pointer-events: none;

}



.phone-status-icons {

  display: flex;

  align-items: center;

  gap: 4px;

}



/* Social App Header */

.social-phone-header {

  margin-top: 28px;

  padding: 8px 12px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  background: rgba(14, 20, 16, 0.96);

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

  z-index: 18;

}



.social-user-identity {

  display: flex;

  align-items: center;

  gap: 8px;

}



.social-header-avatar {

  width: 26px;

  height: 26px;

  border-radius: 50%;

  object-fit: cover;

  border: 1.5px solid var(--brand-accent);

}



.social-header-names {

  display: flex;

  flex-direction: column;

}



.social-username {

  font-size: 0.72rem;

  font-weight: 800;

  color: #FFFFFF;

  display: flex;

  align-items: center;

  gap: 3px;

  line-height: 1.2;

}



.social-sub {

  font-size: 0.58rem;

  color: #8C9A8E;

}



.social-live-pulse {

  background: #E1306C;

  color: #FFFFFF;

  font-size: 0.5rem;

  font-weight: 800;

  padding: 1px 5px;

  border-radius: 3px;

  letter-spacing: 0.5px;

  animation: heroLiveGlow 2s infinite ease-in-out;

}



@keyframes heroLiveGlow {

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

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

}



/* Stories Tray */

.social-stories-tray {

  display: flex;

  gap: 10px;

  padding: 8px 12px;

  background: rgba(14, 20, 16, 0.92);

  border-bottom: 1px solid rgba(255, 255, 255, 0.06);

  z-index: 16;

  overflow: hidden;

}



.story-item {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 3px;

  font-size: 0.55rem;

  color: #8C9A8E;

  font-weight: 600;

}



.story-ring {

  width: 36px;

  height: 36px;

  border-radius: 50%;

  padding: 1.5px;

  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);

  display: flex;

  align-items: center;

  justify-content: center;

}



.story-ring img {

  width: 100%;

  height: 100%;

  border-radius: 50%;

  object-fit: cover;

  border: 1.5px solid #0B100C;

}



/* Social Feed Viewport */

.social-feed-viewport {

  flex: 1;

  overflow: hidden;

  position: relative;

  background: #0C120E;

}



.feed-fade-top {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 16px;

  background: linear-gradient(180deg, #0C120E 0%, transparent 100%);

  z-index: 12;

  pointer-events: none;

}



.feed-fade-bottom {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  height: 24px;

  background: linear-gradient(0deg, #0C120E 0%, transparent 100%);

  z-index: 12;

  pointer-events: none;

}



/* Auto-Scrolling Feed Track */

.social-feed-track {

  display: flex;

  flex-direction: column;

  gap: 12px;

  padding: 6px 0;

  animation: socialFeedScroll 26s linear infinite;

}



.smartphone-mockup:hover .social-feed-track {

  animation-play-state: paused;

}



@keyframes socialFeedScroll {

  0% { transform: translateY(0); }

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

}



/* Post Cards */

.feed-post-card {

  background: rgba(18, 25, 20, 0.95);

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 12px;

  margin: 0 10px;

  overflow: hidden;

}



.feed-post-header {

  padding: 6px 10px;

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.feed-post-user {

  display: flex;

  align-items: center;

  gap: 6px;

}



.feed-post-avatar {

  width: 20px;

  height: 20px;

  border-radius: 50%;

  object-fit: cover;

}



.feed-post-author {

  font-size: 0.62rem;

  font-weight: 700;

  color: #FFFFFF;

  line-height: 1.2;

}



.feed-post-author span {

  color: var(--brand-accent);

  font-weight: 600;

}



.feed-post-location {

  font-size: 0.52rem;

  color: #8C9A8E;

}



.feed-post-more {

  font-size: 0.65rem;

  color: #8C9A8E;

  letter-spacing: -1px;

}



.feed-post-media {

  position: relative;

  width: 100%;

  aspect-ratio: 4/5;

  max-height: 190px;

  overflow: hidden;

  background: #000;

}



.feed-post-media img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}



.feed-media-badge {

  position: absolute;

  bottom: 6px;

  left: 6px;

  font-size: 0.55rem;

  font-weight: 700;

  color: #FFFFFF;

  background: rgba(0, 0, 0, 0.72);

  backdrop-filter: blur(4px);

  -webkit-backdrop-filter: blur(4px);

  padding: 2px 6px;

  border-radius: 4px;

}



.feed-media-badge.reel-badge {

  background: rgba(225, 48, 108, 0.85);

}



.feed-post-actions {

  padding: 6px 10px 3px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  font-size: 0.62rem;

  color: #FFFFFF;

}



.actions-left {

  display: flex;

  align-items: center;

  gap: 8px;

}



.action-btn {

  display: inline-flex;

  align-items: center;

  gap: 3px;

  cursor: pointer;

}



.action-heart {

  color: #ff3040;

  font-weight: 700;

}



.feed-post-caption {

  padding: 2px 10px 8px;

  font-size: 0.58rem;

  line-height: 1.4;

  color: #94A3B8;

}



.feed-post-caption strong {

  color: #FFFFFF;

  font-weight: 700;

}



.feed-post-caption span {

  color: var(--brand-accent);

}



/* Responsive Scaling for Tablets and Mobile */

@media (max-width: 992px) {

  .portfolio-hero-visual-stage,

  .blog-hero-visual-stage,

  .services-hero-visual-stage,

  .about-hero-visual-stage {

    min-height: 380px;

    margin-top: 1.5rem;

  }

  .hero-character-gif,

  .blog-character-gif,

  .services-character-gif,

  .about-character-gif {

    max-width: 360px;

  }

  .smartphone-mockup {

    width: 270px;

    height: 460px;

    transform: none;

  }

}



@media (max-width: 576px) {

  .portfolio-hero-visual-stage,

  .blog-hero-visual-stage,

  .services-hero-visual-stage,

  .about-hero-visual-stage {

    min-height: 320px;

  }

  .hero-character-gif,

  .blog-character-gif,

  .services-character-gif,

  .about-character-gif {

    max-width: 290px;

  }

  .smartphone-mockup {

    width: 245px;

    height: 420px;

    border-width: 6px;

    border-radius: 34px;

  }

  .badge-top-left {

    top: 2%;

    left: -2%;

    padding: 0.4rem 0.7rem;

  }

  .badge-top-right {

    top: 2%;

    right: -2%;

    padding: 0.4rem 0.7rem;

  }

  .badge-bottom-left {

    bottom: 2%;

    left: -2%;

    padding: 0.4rem 0.7rem;

  }

  .badge-bottom-right {

    bottom: 2%;

    right: -2%;

    padding: 0.4rem 0.7rem;

  }

}



/* ========================================================

   Portfolio Section 6: Press Ads & Print Campaigns

   Layout: Exactly 2 per row on desktop, 1 per row on mobile

   Aspect Ratio: Standard A4 Portrait (210 / 297 = 1 : 1.414)

   ======================================================== */

.portfolio-press-ads-grid {
  column-count: 3;
  column-gap: 1.5rem;
  width: 100%;
  max-width: 1280px;
  margin: 2rem auto 0;
}

.press-ad-card {
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  display: inline-block;
  width: 100%;
  margin-bottom: 1.5rem;
  position: relative;
  border-radius: var(--radius-md, 16px);
  overflow: hidden;
  background: var(--surface-card);
  border: 1px solid var(--border-color);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
}



[data-theme="dark"] .press-ad-card {

  background: rgba(22, 28, 24, 0.85);

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);

}



.press-ad-card:hover {

  transform: translateY(-6px);

  border-color: var(--brand-accent);

  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.12);

}



[data-theme="dark"] .press-ad-card:hover {

  border-color: rgba(116, 242, 152, 0.5);

  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.65);

}



.press-ad-media-wrap {

  position: relative;

  width: 100%;

  overflow: hidden;

  background: transparent;

}



.press-ad-img {

  width: 100%;

  height: auto;

  display: block;

  transition: transform 0.45s ease;

}



.press-ad-card:hover .press-ad-img {

  transform: scale(1.025);

}



.press-ad-zoom-hint {

  position: absolute;

  top: 1rem;

  right: 1rem;

  width: 38px;

  height: 38px;

  border-radius: 50%;

  background: rgba(15, 23, 42, 0.75);

  border: 1px solid rgba(255, 255, 255, 0.25);

  color: #FFFFFF;

  display: flex;

  align-items: center;

  justify-content: center;

  opacity: 0;

  transform: scale(0.85);

  transition: opacity 0.25s ease, transform 0.25s ease;

  pointer-events: none;

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);

  z-index: 2;

}



.press-ad-card:hover .press-ad-zoom-hint {

  opacity: 1;

  transform: scale(1);

}



@media (max-width: 992px) {
  .portfolio-press-ads-grid {
    column-count: 2;
    column-gap: 1.25rem;
  }
  .press-ad-card {
    margin-bottom: 1.25rem;
  }
}

@media (max-width: 540px) {
  .portfolio-press-ads-grid {
    column-count: 1;
    column-gap: 0;
    max-width: 440px;
  }
  .press-ad-card {
    margin-bottom: 1rem;
  }
}



/* ==========================================================================

   Homepage Portfolio Statics Showcase Slider

   ========================================================================== */



.portfolio-statics-section {

  position: relative;

  background: radial-gradient(circle at 50% 25%, rgba(74, 145, 87, 0.05) 0%, rgba(255, 255, 255, 0) 70%), var(--bg-main, #FFFFFF);

  border-top: 1px solid var(--border-color);

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

}



[data-theme="dark"] .portfolio-statics-section {

  background: radial-gradient(circle at 50% 25%, rgba(74, 145, 87, 0.12) 0%, rgba(15, 20, 17, 0.8) 70%), #0e1310;

}



.statics-slider-wrapper {

  position: relative;

  width: 100%;

  margin: 0 auto;

}



.statics-slider-header-controls {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 1.75rem;

  gap: 1.25rem;

  padding: 0 0.25rem;

}



.statics-slider-indicator {

  display: flex;

  align-items: center;

  gap: 1.25rem;

  flex: 1;

  max-width: 360px;

}



.statics-count-badge {

  display: inline-flex;

  align-items: center;

  gap: 0.35rem;

  font-family: var(--font-mono, monospace);

  font-size: 0.95rem;

  font-weight: 700;

  padding: 0.45rem 1rem;

  border-radius: var(--radius-full, 9999px);

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  color: var(--text-color);

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);

}



.statics-current-slide {

  color: var(--brand-green, #4a9157);

}



.statics-divider {

  opacity: 0.35;

}



.statics-progress-bar-track {

  flex: 1;

  height: 4px;

  background: rgba(140, 160, 145, 0.2);

  border-radius: 9999px;

  overflow: hidden;

  position: relative;

}



.statics-progress-bar-fill {

  height: 100%;

  width: 6.25%;

  background: var(--brand-green, #4a9157);

  border-radius: 9999px;

  transition: width 0.25s ease-out;

}



.statics-slider-nav-btns {

  display: flex;

  align-items: center;

  gap: 0.75rem;

}



.statics-nav-btn {

  width: 44px;

  height: 44px;

  border-radius: 50%;

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  color: var(--text-color);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);

  user-select: none;

}



.statics-nav-btn:hover {

  background: var(--brand-green, #4a9157);

  color: #FFFFFF;

  border-color: var(--brand-green, #4a9157);

  transform: translateY(-2px);

  box-shadow: 0 8px 22px rgba(74, 145, 87, 0.35);

}



.statics-nav-btn:active {

  transform: scale(0.94);

}



[data-theme="dark"] .statics-nav-btn {

  background: #151d18;

  border-color: rgba(255, 255, 255, 0.1);

  color: #E2E8F0;

}



[data-theme="dark"] .statics-nav-btn:hover {

  background: var(--brand-green, #4a9157);

  color: #FFFFFF;

  border-color: var(--brand-green, #4a9157);

}



.statics-slider-viewport {

  width: 100%;

  overflow-x: auto;

  overflow-y: hidden;

  scroll-behavior: smooth;

  scroll-snap-type: x mandatory;

  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;

  padding: 0.5rem 0.25rem 1.5rem;

  cursor: grab;

  user-select: none;

}



.statics-slider-viewport::-webkit-scrollbar {

  display: none;

}



.statics-slider-viewport.is-dragging {

  cursor: grabbing;

  scroll-behavior: auto;

  scroll-snap-type: none;

}



.statics-slider-track {

  display: flex;

  gap: 1.5rem;

  width: max-content;

}



.statics-slide-item {

  flex: 0 0 295px;

  width: 295px;

  max-width: 295px;

  scroll-snap-align: start;

  scroll-snap-stop: normal;

  display: flex;

  flex-direction: column;

}



@media (min-width: 1280px) {

  .statics-slide-item {

    flex: 0 0 calc((1240px - (3 * 1.5rem)) / 4);

    width: calc((1240px - (3 * 1.5rem)) / 4);

    max-width: calc((1240px - (3 * 1.5rem)) / 4);

  }

}



@media (max-width: 1279px) and (min-width: 992px) {

  .statics-slide-item {

    flex: 0 0 calc((100vw - 6rem - (2 * 1.25rem)) / 3);

    width: calc((100vw - 6rem - (2 * 1.25rem)) / 3);

    max-width: calc((100vw - 6rem - (2 * 1.25rem)) / 3);

  }

}



@media (max-width: 991px) and (min-width: 640px) {

  .statics-slide-item {

    flex: 0 0 calc((100vw - 3.5rem - 1rem) / 2);

    width: calc((100vw - 3.5rem - 1rem) / 2);

    max-width: calc((100vw - 3.5rem - 1rem) / 2);

  }

}



@media (max-width: 639px) {

  .statics-slide-item {

    flex: 0 0 82vw;

    width: 82vw;

    max-width: 320px;

  }

  .statics-slider-header-controls {

    flex-wrap: wrap;

  }

  .statics-slider-indicator {

    max-width: 100%;

  }

}



.statics-slider-dots {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0.5rem;

  margin-top: 1.25rem;

}



.statics-dot {

  width: 8px;

  height: 8px;

  border-radius: 4px;

  background: var(--border-color);

  border: none;

  padding: 0;

  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);

  cursor: pointer;

}



.statics-dot:hover {

  background: rgba(74, 145, 87, 0.5);

}



.statics-dot.is-active {

  width: 26px;

  background: var(--brand-green, #4a9157);

}



/* ==========================================================================

   Portfolio Packaging & Product Design Section

   ========================================================================== */



.portfolio-packaging-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 2rem;

  width: 100%;

  margin-top: 2rem;

}



.packaging-card {

  background: var(--surface-card);

  border: 1px solid var(--border-color);

  border-radius: var(--radius-lg, 16px);

  overflow: hidden;

  display: flex;

  flex-direction: column;

  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;

  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);

  cursor: pointer;

  position: relative;

}



[data-theme="dark"] .packaging-card {

  background: #121814;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);

}



.packaging-card:hover {

  transform: translateY(-6px);

  border-color: var(--brand-accent);

  box-shadow: 0 16px 38px rgba(74, 145, 87, 0.2);

}



.packaging-media-wrap {

  position: relative;

  width: 100%;

  aspect-ratio: 16 / 12;

  background: radial-gradient(circle at center, rgba(74, 145, 87, 0.08) 0%, rgba(0, 0, 0, 0.02) 70%, transparent 100%);

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 1.75rem;

  overflow: hidden;

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

}



[data-theme="dark"] .packaging-media-wrap {

  background: radial-gradient(circle at center, rgba(74, 145, 87, 0.14) 0%, rgba(10, 15, 12, 0.6) 80%);

}



.packaging-img {

  max-width: 100%;

  max-height: 100%;

  object-fit: contain;

  display: block;

  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);

  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.14));

}



.packaging-card:hover .packaging-img {

  transform: scale(1.05);

  filter: drop-shadow(0 18px 36px rgba(74, 145, 87, 0.28));

}



.packaging-card-content {

  padding: 1.5rem;

  display: flex;

  flex-direction: column;

  flex: 1;

}



@media (max-width: 1024px) {

  .portfolio-packaging-grid {

    grid-template-columns: repeat(2, 1fr);

    gap: 1.5rem;

  }

}



@media (max-width: 640px) {

  .portfolio-packaging-grid {

    grid-template-columns: 1fr;

    gap: 1.25rem;

  }

  .packaging-media-wrap {

    aspect-ratio: 16 / 13;

    padding: 1.25rem;

  }

}





















/* ==========================================================================

   Creative Agency Animation System & Micro-Interactions

   ========================================================================== */



/* Enhanced Card 3D Depth & Lift */

.service-card,

.philosophy-card,

.why-choose-card,

.brand-showcase-section,

.portfolio-item-card,

.press-masonry-card,

.packaging-card,

.alliance-card,

.studio-location-card {

  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), 

              box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1), 

              border-color 0.4s ease, 

              background 0.4s ease;

  will-change: transform, box-shadow;

}



.service-card:hover,

.philosophy-card:hover,

.brand-showcase-section:hover,

.press-masonry-card:hover,

.packaging-card:hover,

.alliance-card:hover,

.studio-location-card:hover {

  transform: translateY(-8px);

  border-color: rgba(74, 145, 87, 0.45) !important;

  box-shadow: 0 20px 45px -12px rgba(74, 145, 87, 0.22), 0 0 0 1px rgba(74, 145, 87, 0.15) !important;

}



/* Card Image Fluid Zoom on Hover */

.service-card-img,

.brand-showcase-section img,

.portfolio-item-card img,

.press-masonry-card img,

.packaging-card img {

  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);

}



.service-card:hover .service-card-img,

.brand-showcase-section:hover img,

.portfolio-item-card:hover img,

.press-masonry-card:hover img,

.packaging-card:hover img {

  transform: scale(1.055);

}



/* Interactive Link Arrows Sliding Animation */

.btn-icon,

.service-category-tag,

.statics-card-link span:last-child {

  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);

  display: inline-block;

}



.service-card:hover .service-category-tag,

.brand-showcase-section:hover a span:last-child,

.statics-card-link:hover span:last-child,

.btn:hover .btn-icon {

  transform: translateX(5px);

}



/* Creative Agency Button Sheen / Shimmer Effect */

.btn-primary,

.btn-accent {

  position: relative;

  overflow: hidden;

}



.btn-primary::after,

.btn-accent::after {

  content: '';

  position: absolute;

  top: 0;

  left: -120%;

  width: 50%;

  height: 100%;

  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);

  transform: skewX(-25deg);

  pointer-events: none;

}



.btn-primary:hover::after,

.btn-accent:hover::after {

  left: 140%;

  transition: left 0.75s ease-in-out;

}



/* Floating Ambient Depth Blobs */

@keyframes ambientGlowFloat {

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

  50% { transform: translate(30px, -20px) scale(1.08); opacity: 0.2; }

  100% { transform: translate(-20px, 15px) scale(0.96); opacity: 0.14; }

}



/* Accessible Reduced-Motion Support */

@media (prefers-reduced-motion: reduce) {

  *, ::before, ::after {

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

    scroll-behavior: auto !important;

  }

}





/* ==========================================================================

   Ultimate Creative Agency Hover Experience (Tactile, Glowing, Interactive)

   ========================================================================== */



/* 1. Global Interactive Spotlight Glow on Cards */

.service-card,

.why-choose-card,

.philosophy-card,

.brand-showcase-section,

.studio-location-card,

.statement-card,

.press-masonry-card,

.packaging-card,

.portfolio-photo-card,

.statics-slide-item {

  position: relative;

  overflow: hidden;

  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 

              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), 

              border-color 0.35s ease !important;

}



.service-card::before,

.why-choose-card::before,

.philosophy-card::before,

.brand-showcase-section::before,

.studio-location-card::before,

.statement-card::before,

.press-masonry-card::before,

.packaging-card::before,

.portfolio-photo-card::before,

.statics-slide-item::before {

  content: '';

  position: absolute;

  inset: 0;

  border-radius: inherit;

  background: radial-gradient(420px circle at var(--spotlight-x, -500px) var(--spotlight-y, -500px), rgba(74, 145, 87, 0.22), transparent 60%);

  pointer-events: none;

  opacity: 0;

  transition: opacity 0.35s ease;

  z-index: 1;

}



.service-card:hover::before,

.why-choose-card:hover::before,

.philosophy-card:hover::before,

.brand-showcase-section:hover::before,

.studio-location-card:hover::before,

.statement-card:hover::before,

.press-masonry-card:hover::before,

.packaging-card:hover::before,

.portfolio-photo-card:hover::before,

.statics-slide-item:hover::before {

  opacity: 1;

}



/* 2. Elevated Card Hover Physics & Ambient Green Glow */

.service-card:hover,

.philosophy-card:hover,

.brand-showcase-section:hover,

.studio-location-card:hover,

.press-masonry-card:hover,

.packaging-card:hover,

.why-choose-card:hover,

.portfolio-photo-card:hover,

.statics-slide-item:hover {

  transform: translateY(-10px) !important;

  border-color: var(--brand-green) !important;

  box-shadow: 0 24px 50px -12px rgba(74, 145, 87, 0.35), 0 0 0 1.5px rgba(74, 145, 87, 0.45) !important;

}



/* 3. Card Title Color Flare on Hover */

.service-card:hover .service-title,

.philosophy-card:hover .philosophy-title,

.why-choose-card:hover .why-choose-card-title,

.brand-showcase-section:hover h3,

.studio-location-card:hover h4,

.statics-slide-item:hover .card-item-title,

.portfolio-item-card:hover .card-item-title {

  color: var(--brand-green) !important;

  transition: color 0.3s ease;

}



/* 4. Fluid Card Image Zoom */

.service-card-img,

.brand-showcase-section img,

.portfolio-item-card img,

.press-masonry-card img,

.packaging-card img,

.photo-visual-wrap img {

  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) !important;

}



.service-card:hover .service-card-img,

.brand-showcase-section:hover img,

.portfolio-item-card:hover img,

.press-masonry-card:hover img,

.packaging-card:hover img,

.statics-slide-item:hover .photo-visual-wrap img {

  transform: scale(1.085) !important;

}



/* 5. Process Step Ghost Number Glow & Scale */

.philosophy-number {

  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;

  display: inline-block;

}



.philosophy-card:hover .philosophy-number {

  color: var(--brand-green) !important;

  transform: scale(1.15) translateY(-3px);

  text-shadow: 0 0 25px rgba(74, 145, 87, 0.55);

}



/* 6. Why Choose Us Icon Pop on Hover */

.why-choose-card-icon {

  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;

}



.why-choose-card:hover .why-choose-card-icon {

  transform: scale(1.22) rotate(-8deg);

  background: rgba(74, 145, 87, 0.25) !important;

  color: var(--brand-green) !important;

  box-shadow: 0 0 22px rgba(74, 145, 87, 0.4);

}



/* 7. Button Spring Scale & Luminous Glow */

.btn {

  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), 

              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), 

              background 0.35s ease, 

              border-color 0.35s ease !important;

}



.btn-primary:hover,

.btn-accent:hover {

  transform: translateY(-4px) scale(1.03) !important;

  box-shadow: 0 16px 36px -6px rgba(74, 145, 87, 0.55), 0 0 0 2px rgba(116, 242, 152, 0.35) !important;

}



.btn-outline:hover {

  background: var(--brand-green) !important;

  border-color: var(--brand-green) !important;

  color: #FFFFFF !important;

  transform: translateY(-4px) scale(1.03) !important;

  box-shadow: 0 16px 36px -6px rgba(74, 145, 87, 0.4) !important;

}



.btn:active {

  transform: translateY(-1px) scale(0.98) !important;

}



/* 8. Interactive Link Arrow Nudge */

.btn-icon,

.service-category-tag,

.statics-card-link span:last-child {

  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;

  display: inline-block;

}



.btn:hover .btn-icon,

.service-card:hover .service-category-tag,

.statics-slide-item:hover .statics-card-link span:last-child,

.brand-showcase-section:hover a span:last-child {

  transform: translateX(6px) !important;

}



/* 9. Sleek Animated Nav Links Underline */

.nav-link {

  position: relative;

  transition: color 0.3s ease;

}



.nav-link::after {

  content: '';

  position: absolute;

  bottom: -4px;

  left: 50%;

  width: 0;

  height: 2.5px;

  background: var(--brand-green);

  border-radius: 99px;

  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), left 0.35s cubic-bezier(0.16, 1, 0.3, 1);

}



.nav-link:hover::after,

.nav-link.active::after {

  width: 100%;

  left: 0;

}



/* 10. Theme Toggle Button Hover Spin */

.theme-toggle {

  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;

}



.theme-toggle:hover {

  transform: rotate(180deg) scale(1.15) !important;

  box-shadow: 0 0 18px rgba(74, 145, 87, 0.45);

  border-color: var(--brand-green);

}



/* 11. FAQ Accordion Item Hover Slide */

.faq-accordion-item {

  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

}



.faq-accordion-item:hover {

  border-color: var(--brand-green) !important;

  box-shadow: 0 10px 25px -8px rgba(74, 145, 87, 0.2);

  transform: translateX(6px);

}



.faq-accordion-item:hover .faq-question-text {

  color: var(--brand-green);

}



/* 12. Footer Links Slide & Social Icons Float */

.footer-links a,

.footer-legal-links a {

  transition: all 0.3s ease;

  display: inline-block;

}



.footer-links a:hover,

.footer-legal-links a:hover {

  color: var(--brand-green) !important;

  transform: translateX(6px);

}



.social-icon,

.footer-social-link {

  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);

  display: inline-flex;

}



.social-icon:hover,

.footer-social-link:hover {

  transform: translateY(-6px) scale(1.15) !important;

  box-shadow: 0 0 22px rgba(74, 145, 87, 0.65) !important;

  border-color: var(--brand-green) !important;

  color: var(--brand-green) !important;

}



/* 13. Magnetic Cursor Expanded Ring */

.hover-card {

  width: 64px !important;

  height: 64px !important;

  border-color: var(--brand-green) !important;

  background: rgba(74, 145, 87, 0.16) !important;

  backdrop-filter: blur(4px);

}



/* 14. Brand Statics Slider Nav Buttons Hover */

.statics-nav-btn {

  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

}



.statics-nav-btn:hover {

  transform: scale(1.12);

  background: var(--brand-green) !important;

  border-color: var(--brand-green) !important;

  color: #FFFFFF !important;

  box-shadow: 0 8px 20px -4px rgba(74, 145, 87, 0.45);

}





/* ==========================================================================

   15. Advanced Creative Agency Visuals, Gleams & Micro-Animations

   ========================================================================== */



/* A. Pulsing Radar Sonar on Section Badges */

.badge-dot {

  position: relative !important;

  display: inline-block !important;

  flex-shrink: 0;

}



.badge-dot::before {

  content: '';

  position: absolute;

  inset: -3px;

  border-radius: 50%;

  background: var(--brand-green);

  opacity: 0.75;

  animation: badgePulseSonar 2.2s cubic-bezier(0.16, 1, 0.3, 1) infinite;

  pointer-events: none;

}



@keyframes badgePulseSonar {

  0% {

    transform: scale(0.9);

    opacity: 0.85;

  }

  60% {

    transform: scale(2.8);

    opacity: 0;

  }

  100% {

    transform: scale(2.8);

    opacity: 0;

  }

}



/* B. Liquid Metallic Flow on Brand Green Highlight Text */

.text-gradient-green {

  background: linear-gradient(135deg, #2E7142 0%, #3DA55D 28%, #74F298 50%, #3DA55D 72%, #2E7142 100%) !important;

  background-size: 240% auto !important;

  -webkit-background-clip: text !important;

  -webkit-text-fill-color: transparent !important;

  animation: textGleamFlow 6s ease-in-out infinite;

  display: inline-block;

}



[data-theme="dark"] .text-gradient-green {

  background: linear-gradient(135deg, #74F298 0%, #A3F7BC 30%, #FFFFFF 50%, #74F298 70%, #3DA55D 100%) !important;

  background-size: 240% auto !important;

  -webkit-background-clip: text !important;

  -webkit-text-fill-color: transparent !important;

}



@keyframes textGleamFlow {

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

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

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

}



/* C. Diagonal Gloss / Light-Sweep Shimmer on Media Cards */

.service-media-wrap,

.photo-visual-wrap,

.packaging-card-visual,

.press-masonry-visual,

.brand-showcase-media {

  position: relative !important;

  overflow: hidden !important;

}



.service-media-wrap::after,

.photo-visual-wrap::after,

.packaging-card-visual::after,

.press-masonry-visual::after,

.brand-showcase-media::after {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: linear-gradient(

    115deg,

    transparent 25%,

    rgba(255, 255, 255, 0.45) 50%,

    transparent 75%

  );

  transform: translateX(-160%) skewX(-20deg);

  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);

  pointer-events: none;

  z-index: 3;

}



[data-theme="dark"] .service-media-wrap::after,

[data-theme="dark"] .photo-visual-wrap::after,

[data-theme="dark"] .packaging-card-visual::after,

[data-theme="dark"] .press-masonry-visual::after,

[data-theme="dark"] .brand-showcase-media::after {

  background: linear-gradient(

    115deg,

    transparent 25%,

    rgba(116, 242, 152, 0.28) 50%,

    transparent 75%

  );

}



.service-card:hover .service-media-wrap::after,

.statics-slide-item:hover .photo-visual-wrap::after,

.packaging-card:hover .packaging-card-visual::after,

.press-masonry-card:hover .press-masonry-visual::after,

.brand-showcase-section:hover .brand-showcase-media::after {

  transform: translateX(170%) skewX(-20deg);

}



/* D. WhatsApp Floating Widget Ambient Breathing Pulse */

.poppy-sticky-whatsapp {

  position: fixed;

  bottom: 2rem;

  right: 2rem;

  z-index: 99;

}



.whatsapp-float-btn {

  position: relative;

  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease !important;

}



.whatsapp-pulse-ring {

  position: absolute;

  inset: -6px;

  border-radius: 999px;

  background: rgba(37, 211, 102, 0.4);

  animation: whatsappRingPulse 3.2s cubic-bezier(0.16, 1, 0.3, 1) infinite;

  z-index: -1;

  pointer-events: none;

}



@keyframes whatsappRingPulse {

  0% { transform: scale(0.92); opacity: 0.85; }

  60% { transform: scale(1.38); opacity: 0; }

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

}



.whatsapp-float-btn:hover {

  transform: translateY(-4px) scale(1.05) !important;

  box-shadow: 0 16px 36px -6px rgba(37, 211, 102, 0.55) !important;

}



/* E. Scrolled Glass Navbar Refinement */

.site-header {

  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease !important;

}



.site-header.scrolled {

  background: rgba(255, 255, 255, 0.88) !important;

  backdrop-filter: blur(18px) !important;

  -webkit-backdrop-filter: blur(18px) !important;

  border-bottom: 1px solid rgba(46, 113, 66, 0.16) !important;

  box-shadow: 0 10px 30px -10px rgba(46, 113, 66, 0.1) !important;

}



[data-theme="dark"] .site-header.scrolled {

  background: rgba(9, 31, 18, 0.9) !important;

  border-bottom: 1px solid rgba(116, 242, 152, 0.22) !important;

  box-shadow: 0 10px 32px -10px rgba(0, 0, 0, 0.65) !important;

}



/* F. Multi-Phase Organic Hero Badges Float */

.phone-floating-badge.badge-top-left {

  animation: heroBadgeFloatA 5.6s ease-in-out infinite 0.2s !important;

}



.phone-floating-badge.badge-top-right {

  animation: heroBadgeFloatB 5.2s ease-in-out infinite 0.8s !important;

}



.phone-floating-badge.badge-bottom-left {

  animation: heroBadgeFloatB 6.0s ease-in-out infinite 1.4s !important;

}



.phone-floating-badge.badge-bottom-right {

  animation: heroBadgeFloatA 5.4s ease-in-out infinite 2.0s !important;

}



@keyframes heroBadgeFloatA {

  0%, 100% {

    transform: translateY(0) rotate(0deg);

  }

  50% {

    transform: translateY(-9px) rotate(1.2deg);

  }

}



@keyframes heroBadgeFloatB {

  0%, 100% {

    transform: translateY(0) rotate(0deg);

  }

  50% {

    transform: translateY(9px) rotate(-1.2deg);

  }

}



/* ==========================================================================

   16. Custom Creative Agency Page Scrollbar & Scroll Progress Bar

   ========================================================================== */



/* Modern Standard CSS Scrollbar (Firefox & Standards) */

html {

  scrollbar-width: thin;

  scrollbar-color: #2E7142 rgba(220, 238, 226, 0.45);

}



[data-theme="dark"] html {

  scrollbar-color: #74F298 rgba(9, 31, 18, 0.85);

}



/* WebKit Custom Scrollbar (Chrome, Edge, Safari, Opera) */

::-webkit-scrollbar {

  width: 9px;

  height: 9px;

}



::-webkit-scrollbar-track {

  background: rgba(220, 238, 226, 0.35);

  border-left: 1px solid rgba(46, 113, 66, 0.08);

}



[data-theme="dark"] ::-webkit-scrollbar-track {

  background: rgba(9, 31, 18, 0.88);

  border-left: 1px solid rgba(116, 242, 152, 0.12);

}



::-webkit-scrollbar-thumb {

  background: linear-gradient(180deg, #2E7142 0%, #3DA55D 100%);

  border-radius: 9999px;

  border: 2px solid transparent;

  background-clip: content-box;

  transition: background 0.3s ease;

}



::-webkit-scrollbar-thumb:hover {

  background: linear-gradient(180deg, #235733 0%, #2E7142 100%);

  background-clip: content-box;

  box-shadow: 0 0 10px rgba(46, 113, 66, 0.5);

}



[data-theme="dark"] ::-webkit-scrollbar-thumb {

  background: linear-gradient(180deg, #3DA55D 0%, #74F298 100%);

  border-radius: 9999px;

  border: 2px solid transparent;

  background-clip: content-box;

}



[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {

  background: linear-gradient(180deg, #74F298 0%, #A3F7BC 100%);

  background-clip: content-box;

  box-shadow: 0 0 14px rgba(116, 242, 152, 0.65);

}



::-webkit-scrollbar-corner {

  background: transparent;

}



/* Top Global Scroll Progress Bar */

.page-scroll-progress {

  position: fixed;

  top: 0;

  left: 0;

  height: 3.5px;

  width: 0%;

  background: linear-gradient(90deg, #2E7142 0%, #3DA55D 35%, #74F298 70%, #A3F7BC 100%);

  box-shadow: 0 0 12px rgba(116, 242, 152, 0.85), 0 0 4px #74F298;

  z-index: 10001;

  pointer-events: none;

  transition: width 0.08s ease-out;

}



[data-theme="dark"] .page-scroll-progress {

  background: linear-gradient(90deg, #3DA55D 0%, #74F298 50%, #FFFFFF 100%);

  box-shadow: 0 0 14px rgba(116, 242, 152, 0.95), 0 0 6px #74F298;

}



body.has-admin-top-bar .page-scroll-progress {

  top: 38px;

}



body.has-admin-top-bar.admin-bar-minimized .page-scroll-progress {

  top: 0;

}