/*
 * 7P Digital Custom Styles - Minimal Version
 * Black & Yellow Theme
 * Only color customizations - no layout changes
 */

:root {
  --primary-color: #FFD700;
  --secondary-color: #FFC700;
}

/* Font Import */
body {
  font-family: 'Open Sans', sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Roboto', sans-serif !important;
}

/* Primary Color Overrides */
.wc-btn-primary {
  background-color: var(--primary-color) !important;
  color: #000 !important;
}

.wc-btn-primary:hover {
  background-color: var(--secondary-color) !important;
}

/* Header */
.header__area {
  border-bottom: 1px solid var(--primary-color);
}

.header__support a {
  color: var(--primary-color) !important;
}

/* Hero Title */
.hero__title {
  color: var(--primary-color) !important;
}

.hero__sub-title span {
  color: var(--primary-color) !important;
}

.experience {
  background: var(--primary-color) !important;
  color: #000 !important;
}

/* Section Titles */
.sec-sub-title {
  color: var(--primary-color) !important;
}

/* Service Cards */
.service__icon {
  color: var(--primary-color) !important;
}

.service__link {
  background-color: var(--primary-color) !important;
  color: #000 !important;
}

.service__item:hover {
  border-color: var(--primary-color) !important;
}

/* Registration */
.registration__icon {
  color: var(--primary-color) !important;
}

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

.registration__item {
  border: 2px solid var(--primary-color) !important;
}

/* Portfolio */
.portfolio__info h4 {
  color: var(--primary-color) !important;
}

.swiper-button-next,
.swiper-button-prev {
  color: var(--primary-color) !important;
}

/* Testimonials */
.testimonial__rating i {
  color: var(--primary-color) !important;
}

.testimonial__author h4 {
  color: var(--primary-color) !important;
}

.testimonial__author img {
  border: 2px solid var(--primary-color) !important;
}

/* Blog */
.blog__meta,
.blog__meta a {
  color: grey !important;
}

.blog__btn {
  color: grey !important;
}

/* Contact */
.contact__info h2 {
  color: var(--primary-color) !important;
}

.contact__icon {
  background-color: var(--primary-color) !important;
  color: #000 !important;
}

.contact__text h4 {
  color: var(--primary-color) !important;
}

.contact__form {
  border: 2px solid var(--primary-color) !important;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--primary-color) !important;
}

/* Footer */
.footer__area {
  background: #111010 !important;
  border-top: 2px solid var(--primary-color) !important;
}

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

.footer__links a:hover {
  color: var(--primary-color) !important;
}

.footer__subscribe button {
  /* background-color: var(--primary-color) !important; */
  color: #000 !important;
}

.footer__social a {
  border-color: var(--primary-color) !important;
  color: var(--primary-color) !important;
}



.footer__copyright a {
  color: var(--primary-color) !important;
}

/* Scroll Top Button - Always Yellow Background */
.scroll-top,
#scroll_top,
.scroll-top.light,
.scroll-top.dark,
button#scroll_top {
  background-color: #FFD700 !important;
  background: #FFD700 !important;
  color: #000 !important;
  border: none !important;
  mix-blend-mode: normal !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.4s ease, background-color 0.3s ease !important;
}

.scroll-top.show,
#scroll_top.show {
  display: flex !important;
  opacity: 1 !important;
}

.scroll-top:hover,
#scroll_top:hover {
  background-color: #FFC700 !important;
  background: #FFC700 !important;
}

.scroll-top i,
#scroll_top i {
  color: #000 !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

/* Preloader */
.bar {
  background-color: var(--primary-color) !important;
}

/* Roll Text */
.roll__area {
  border-top: 2px solid var(--primary-color);
  border-bottom: 2px solid var(--primary-color);
}

.roll__slide h2 {
  color: var(--primary-color) !important;
}

/* About Section */
.about__title {
  color: var(--primary-color) !important;
}

/* CTA Section */
.cta__sub-title {
  color: var(--primary-color) !important;
}

/* Swiper Pagination */
.swiper-pagination-bullet-active {
  background-color: var(--primary-color) !important;
}

/* Offcanvas Menu */
.offcanvas__menu a:hover {
  color: var(--primary-color) !important;
}

.offcanvas__social a:hover {
  color: var(--primary-color) !important;
}

/* Line Decoration - Hide all vertical lines globally */
.line::before,
.line::after,
.line-3,
span.line-3 {
  display: none !important;
  background-color: transparent !important;
  opacity: 0 !important;
}

/* Hide marquee/roll section */
.roll__area {
  display: none !important;
}

/* Bottom arrow in hero - make it yellow */
.hero__content > img[src*="arrow-down"] {
  filter: brightness(0) saturate(100%) invert(80%) sepia(72%) saturate(474%) hue-rotate(359deg) brightness(104%) contrast(104%) !important;
}

/* Remove yellow background from 25k+ Projects box */
.experience {
  background: transparent !important;
  border: none !important;
  color: var(--primary-color) !important;
}

/* Remove yellow background from service arrows */
.service__link,
.service__item .arrow-icon {
  background-color: transparent !important;
  color: var(--primary-color) !important;
  border: none !important;
}

/* Fix footer newsletter button - KEEP THIS */
.footer__subscribe button,
.subs-btn {
  background-color: transparent;
  color: #000;
  border: none;
  padding: 10px 15px;
  border-radius: 999px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.footer__subscribe button:hover,
.subs-btn:hover {
  background-color: #000000;
  color: #ffffff;
}

.footer__subscribe button:hover i,
.subs-btn:hover i {
  color: #ffffff;
}

/* Logo shows naturally on white header backgrounds */
.header__logo img {
  filter: none !important;
}

/* Offcanvas and footer are dark, so keep white logo there */
.offcanvas__logo img,
.footer__logo {
  /* filter: brightness(0) invert(1) !important; */
  filter: drop-shadow(1px 0 0 white) drop-shadow(-1px 0 0 white) drop-shadow(0 1px 0 white) drop-shadow(0 -1px 0 white) !important;
}

/* Fix email adaptive color - black on white, white on black */
.header__support a {
  color: inherit !important;
  mix-blend-mode: difference !important;
  filter: invert(1) grayscale(1) contrast(9);
}

/* Registration Section Styles */
.registration__area {
  background: linear-gradient(135deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.85) 100%);
  position: relative;
  overflow: hidden;
}

/* Hide vertical lines in registration section */
.registration__area .line,
.registration__area .line-3 {
  display: none !important;
}

/* Make main heading yellow */
.registration__main-heading {
  color: var(--primary-color) !important;
}

.registration__card {
  background: rgba(255, 255, 255, 0.03);
  border: 2px solid rgba(255, 215, 0, 0.2);
  border-radius: 20px;
  padding: 50px 40px;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  margin-bottom: 30px;
}

.registration__card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.registration__card:hover::before {
  opacity: 1;
}

.registration__card:hover {
  border-color: var(--primary-color);
  transform: translateY(-10px);
  box-shadow: 0 20px 60px rgba(255, 215, 0, 0.2);
}

.registration__icon {
  color: var(--primary-color);
  margin-bottom: 30px;
  display: inline-block;
  transition: transform 0.5s ease;
}

.registration__card:hover .registration__icon {
  transform: scale(1.1) rotate(5deg);
}

.registration__title {
  font-size: 32px;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 20px;
  font-family: 'Roboto', sans-serif;
}

.registration__text {
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 30px;
}

.registration__benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.registration__benefits li {
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: 15px;
  margin-bottom: 15px;
  padding-left: 30px;
  position: relative;
  transition: all 0.3s ease;
}

.registration__benefits li i {
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--primary-color);
  font-size: 14px;
}

.registration__benefits li:hover {
  padding-left: 35px;
  color: var(--primary-color);
}

.registration__cta {
  padding: 60px 20px;
}

.registration__cta-title {
  font-size: 48px;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 20px;
  font-family: 'Roboto', sans-serif;
  line-height: 1.2;
}

.registration__cta-text {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.9) !important;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Parallax animation helpers */
.fade_bottom {
  opacity: 0;
  transform: translateY(50px);
  transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade_bottom.animated {
  opacity: 1;
  transform: translateY(0);
}

/* Workflow Section Fixes */
.workflow__area {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

/* Change workflow step indicators to yellow */
.workflow__slider .swiper-pagination-bullet,
.workflow__slider .swiper-pagination-bullet-active {
  background-color: var(--primary-color) !important;
}

/* Workflow step text - grey */
.workflow__step {
  color: #999 !important;
}

/* Workflow step numbers - grey */
.workflow__number {
  color: #999 !important;
}

/* Workflow title - grey/dark */
.workflow__title {
  color: #333 !important;
}

/* Counter section spacing - reduced */
.counter__area {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

.counter__area .pt-100 {
  padding-top: 40px !important;
}

.counter__area .pb-100 {
  padding-bottom: 40px !important;
}

/* Hide circles and lines in counter section */
.counter__area .line::before,
.counter__area .line::after,
.counter__area .line-3 {
  display: none !important;
}

.counter__border {
  display: none !important;
}



/* Responsive Design Improvements */
@media (max-width: 1024px) {
  .hero__title {
    font-size: 60px !important;
  }
  
  .service__item,
  .testimonial__card,
  .blog__item {
    margin-bottom: 30px !important;
  }
}

@media (max-width: 768px) {
  .hero__title {
    font-size: 48px !important;
  }
  
  .slide-title {
    font-size: 32px !important;
  }
  
  .header__support {
    display: none !important;
  }
  
  .footer__widget {
    margin-bottom: 40px !important;
    text-align: center !important;
  }
  
  .footer__social {
    justify-content: center !important;
  }
}

@media (max-width: 480px) {
  .hero__title {
    font-size: 36px !important;
  }
  
  .sec-title {
    font-size: 32px !important;
  }
  
  .service__item,
  .testimonial__card {
    padding: 30px 20px !important;
  }
  
  .contact__form {
    padding: 30px 20px !important;
  }
  
  .registration__card {
    padding: 30px 20px !important;
  }
  
  .registration__title {
    font-size: 24px !important;
  }
  
  .registration__cta-title {
    font-size: 28px !important;
  }
  
  .registration__cta-text {
    font-size: 16px !important;
  }
}

/* =====================================================================
   7P Digital - LIGHT THEME OVERRIDES (2026-01-29)
   Goal: Grey/White/Black UI, with Yellow used only as glossy accent.
   ===================================================================== */

:root {
  --color-bg: #f6f7f9;
  --color-surface: #ffffff;
  --color-text: #111214;
  --color-muted: #5f6670;
  --color-border: #e6e8ee;

  /* Black and white accent */
  --primary-color: #000000;
  --secondary-color: #1a1a1a;
  --accent-yellow-2: #ffe47a;
  --accent-gradient: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
}

body {
  background: var(--color-bg) !important;
  color: var(--color-text) !important;
}

/* Make sure most text defaults to dark on light backgrounds */
p,
span,
li,
a,
small {
  color: inherit;
}

/* Improve readability for common text blocks */
.text-anim,
.sec-title-wrapper p,
.about__content p,
.service__top-text p,
.cta__content p {
  color: var(--color-muted) !important;
}

html {
  scroll-behavior: smooth;
}

/* Global readability reset (master.css sometimes forces white text) */
main,
footer {
  color: var(--color-text) !important;
}

main p,
footer p,
main li,
footer li {
  color: var(--color-muted) !important;
}

main a,
footer a {
  color: var(--color-text);
}

main a:hover,
footer a:hover {
  color: var(--color-text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-text) !important;
}

/* Portfolio / Work section visibility */
.portfolio__text {
  color: rgba(17, 18, 20, 0.12) !important;
  pointer-events: none;
}

.portfolio__title,
.portfolio__info h3,
.portfolio__info h4 {
  color: var(--color-text) !important;
}

.portfolio__info p {
  color: var(--color-muted) !important;
}

/* Header: force TOP header (override master.css sidebar header__area)
   Requirement: transparent header initially, glossy white background on sticky.
*/
.header__area {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: auto !important;
  z-index: 9999 !important;
  padding: 14px 24px !important;

  background: transparent !important;
  backdrop-filter: none;
  border-right: none !important;
  border-bottom: 1px solid transparent !important;
  mix-blend-mode: normal !important;
}

/* Subtle gradient behind menu when hero is visible (still "no white background") */
.header__area::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.10) 60%, rgba(0, 0, 0, 0.00) 100%);
  opacity: 0.9;
  pointer-events: none;
}

.header__area > * {
  position: relative;
  z-index: 1;
}

/* Sticky only becomes glossy-white AFTER leaving hero */
.header__area.sticky:not(.header--on-hero) {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(17, 18, 20, 0.08) !important;
  box-shadow: 0 12px 30px rgba(17, 18, 20, 0.10);
}

/* While hero is visible: header looks like sticky header */
.header__area.header--on-hero {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(17, 18, 20, 0.08) !important;
  box-shadow: 0 12px 30px rgba(17, 18, 20, 0.10) !important;
}

.header__area.header--on-hero .header__inner {
  background: transparent !important;
}

/* Dark text on white background for hero header */
.header__area.header--on-hero .header__menu a {
  color: #111111 !important;
  text-shadow: none !important;
}

.header__area.header--on-hero .header__menu a:hover {
  color: #000000 !important;
}

/* Dark CTA button on white background */
.header__area.header--on-hero .header__cta {
  background: #000000 !important;
  color: #ffffff !important;
}

.header__area.header--on-hero .header__cta:hover {
  background: transparent !important;
  color: #000000 !important;
}

/* Dark logo on white background (same as sticky header) */
.header__area.header--on-hero .header__logo img {
  filter: none !important;
}

.header__area:not(.header--on-hero)::before {
  opacity: 0;
}

.header__inner {
  padding: 0 !important;
  height: auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px;
}

/* Remove sidebar layout offsets */
body,
#smooth-wrapper,
#smooth-content {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Let the hero start at the very top behind the fixed header.
   Individual sections (and the hero content itself) already include their own padding.
*/
main {
  padding-top: 0;
}

@media (max-width: 767px) {
  main {
    padding-top: 0;
  }
}

/* Section spacing is controlled per-section and via pt-* and pb-* utilities.
   Avoid adding padding here because it stacks with inner container spacing and creates huge whitespace.
*/
main > section:not(.hero__area) {
  padding-top: 0;
  padding-bottom: 0;
}

@media (max-width: 767px) {
  main > section:not(.hero__area) {
    padding-top: 0;
    padding-bottom: 0;
  }
}

.header__right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.header__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px !important;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700 !important;
  line-height: 1;
  white-space: nowrap;
  background: #000000 !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
  animation: none !important;
  position: relative;
  overflow: hidden !important;
  isolation: isolate;
  transition: color 0.5s ease, transform 0.5s ease, box-shadow 0.5s ease !important;
}

.header__cta::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: #facc15;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.7s ease, height 0.7s ease;
  z-index: -1;
}

.header__cta::after {
  display: none !important;
}

.header__cta:hover::before {
  width: 400px;
  height: 400px;
}

.header__cta:hover {
  background: transparent !important;
  color: #000000 !important;
  box-shadow: 0 4px 12px rgba(250, 204, 21, 0.3) !important;
}

/* When header is transparent, keep CTA black */
.header__area:not(.sticky) .header__cta {
  background: #000000 !important;
  color: #ffffff !important;
}

.header__area:not(.sticky) .header__cta:hover {
  background: transparent !important;
  color: #000000 !important;
}

/* Sticky header — maintain button style */
.header__area.sticky .header__cta {
  background: #000000 !important;
  color: #ffffff !important;
  border-radius: 6px;
  box-shadow: none !important;
  animation: none !important;
}

.header__area.sticky .header__cta:hover {
  background: transparent !important;
  color: #000000 !important;
  box-shadow: 0 4px 12px rgba(250, 204, 21, 0.3) !important;
}

.header__cta i {
  transform: rotate(-45deg);
}

.header__menu {
  flex: 1;
  display: flex;
  justify-content: center;
}

.header__menu ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.header__menu a {
  color: rgba(255, 255, 255, 0.98) !important;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.2px;
  text-transform: none;
  opacity: 0.98;
  text-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
}

.header__area.sticky:not(.header--on-hero) .header__menu a {
  color: var(--color-text) !important;
  text-shadow: none;
}

.header__menu a:hover {
  opacity: 1;
  color: rgba(255, 255, 255, 1) !important;
}

.header__area.sticky:not(.header--on-hero) .header__menu a:hover {
  color: #000000 !important;
}

/* Reset master.css header button spacing */
.header__area button {
  margin-top: 0 !important;
  padding: 0 !important;
}

/* Desktop: show menu + CTA, hide hamburger */
.header__nav-icon {
  display: none;
}

/* Mobile: hide menu, show hamburger */
@media (max-width: 991px) {
  .header__menu {
    display: none;
  }

  .header__nav-icon {
    display: block;
  }
}

/* Logo visibility on light theme */
.header__logo img {
  filter: none !important;
}

/* Remove earlier "adaptive" email blend trick for light theme */
.header__support a {
  mix-blend-mode: normal !important;
  filter: none !important;
  color: var(--color-text) !important;
  opacity: 0.9;
}

.header__support a:hover {
  opacity: 1;
}

/* Buttons: override Axtra default circular buttons -> modern pill buttons */
.wc-btn-primary,
.wc-btn-secondary,
.wc-btn-primary.btn-hover,
.wc-btn-secondary.btn-hover {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  padding: 14px 22px !important;
  border-radius: 999px !important;
  position: relative !important;
  overflow: visible !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px;
  gap: 10px;
}

/* Kill Axtra expanding circle hover span (this caused the yellow circle artifact) */
.wc-btn-primary span,
.wc-btn-secondary span {
  display: none !important;
}

/* Axtra sets .btn-item { position:absolute; } which breaks normal layout */
.btn-item {
  position: relative !important;
}

/* Axtra wraps buttons in a circular .btn_wrapper; neutralize to normal wrapper */
.btn_wrapper,
#btn_wrapper {
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  margin: 0 !important;
  justify-content: flex-start !important;
}

/* Primary button — glossy animated gold across the whole site */
.wc-btn-primary,
.wc-btn-primary.btn-hover {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 40%, #1a1000 100%) !important;
  color: #000000 !important;
  border: none !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em;
  box-shadow: 0 8px 28px rgba(251,191,36,0.40), inset 0 1px 0 rgba(255,255,255,0.25) !important;
  animation: btnGoldShift 3s ease infinite;
  position: relative;
  overflow: hidden !important;
}

.wc-btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(105deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 55%);
  pointer-events: none;
}

.wc-btn-primary:hover {
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 16px 44px rgba(251,191,36,0.55), inset 0 1px 0 rgba(255,255,255,0.30) !important;
}

@keyframes btnGoldShift {
  0%   { box-shadow: 0 8px 28px rgba(251,191,36,0.40), inset 0 1px 0 rgba(255,255,255,0.25); }
  50%  { box-shadow: 0 12px 40px rgba(251,191,36,0.65), inset 0 1px 0 rgba(255,255,255,0.30); }
  100% { box-shadow: 0 8px 28px rgba(251,191,36,0.40), inset 0 1px 0 rgba(255,255,255,0.25); }
}

/* Secondary button */
.wc-btn-secondary {
  background: transparent !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
}

.wc-btn-secondary:hover {
  border-color: rgba(0, 0, 0, 0.55) !important;
  background: #f5f5f5 !important;
}

/* Headings: ensure visibility (master.css often forces white). */
.hero__title,
.sec-title,
.sec-title.title-anim,
.sec-title-wrapper .sec-title,
.registration__main-heading {
  color: var(--color-text) !important;
}

/* Accent: optional gradient underline feel for headings */
.hero__title,
.sec-title {
  text-shadow: 0 2px 0 rgba(255, 196, 0, 0.15);
}

.about__title,
.registration__title {
  color: var(--color-text) !important;
}

.sec-sub-title {
  color: var(--color-muted) !important;
}

.hero__sub-title span {
  color: var(--color-text) !important;
}

/* Hero: full viewport + influencer marketing video */
.hero__area {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 120px 0 80px;

}

/* Wrapper for YouTube iframe background */
.hero__bg-video-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero__bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.78vh; /* 16:9 aspect ratio */
  height: 100vh;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  border: 0;
}

/* Hero content: modern */
.hero__content--modern {
  background: rgba(17, 18, 20, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 24px;
  padding: 44px 44px 40px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(8px);
  max-width: 630px;
  margin-left: 0;
  margin-right: auto;
}

.hero__eyebrow {
  color: rgba(255, 255, 255, 0.8) !important;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  margin-bottom: 14px;
}

.hero__headline {
  color: #ffffff !important;
  font-size: 40px;
  line-height: 1.02;
  font-weight: 800;
  margin-bottom: 18px;
}

.hero__lead {
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 18px;
  line-height: 1.7;
  max-width: 720px;
  margin-bottom: 28px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 28px;
}

.hero__actions .wc-btn-primary,
.hero__actions .wc-btn-secondary {
  padding: 14px 22px !important;
}

.hero__actions .wc-btn-secondary {
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

.hero__actions .wc-btn-secondary:hover {
  border-color: rgba(255, 255, 255, 0.6) !important;
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.hero__stat-num {
  color: #ffffff;
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

.hero__stat-label {
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  margin-top: 8px;
}

@media (max-width: 991px) {
  .hero__content--modern {
    padding: 28px 22px 26px;
  }
  .hero__headline {
    font-size: 46px;
  }
  .hero__stats {
    grid-template-columns: 1fr;
  }
}

/* Remove Axtra animated cursors (they show as yellow circles) */
.cursor,
.cursor1,
.cursor2,
#client_cursor {
  display: none !important;
}

.hero__area .container,
.hero__area .row,
.hero__area .col-xxl-12,
.hero__area .hero__content {
  position: relative;
  z-index: 2;
}

.hero__area .container {
  max-width: 100%;
}

.hero__area .row {
  justify-content: flex-start;
  margin-left: 0;
  margin-right: 0;
}

.hero__area .col-xxl-12 {
  display: flex;
  justify-content: flex-start;
  padding-left: 15px;
  max-width: 100%;
  flex: 0 0 auto;
}

.hero__sub-title {
  color: var(--color-muted) !important;
}

.experience {
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
  backdrop-filter: blur(8px);
}

/* Make each section feel distinct with alternating light backgrounds */
.about__area {
  background: #ffffff !important;
  border-top: 1px solid #f0f0f0;
  padding-top: 100px !important;
  padding-bottom: 100px !important;
}

/* About (Influencer Marketing) revamp */
.about__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: start;
}

.about__kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(255, 215, 0, 0.1) !important;
  border: 1px solid rgba(255, 215, 0, 0.45) !important;
  border-radius: 100px !important;
  padding: 6px 16px 6px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #9a7c00 !important;
  margin-bottom: 20px !important;
}

.about__kicker::before {
  content: '' !important;
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #FFD700 !important;
  flex-shrink: 0 !important;
}

.about__headline {
  font-size: clamp(30px, 3.5vw, 46px);
  line-height: 1.08;
  font-weight: 800;
  color: #111214 !important;
  margin-bottom: 18px;
}

.about__desc {
  font-size: 17px;
  line-height: 1.75;
  color: rgba(17, 18, 20, 0.65) !important;
  margin-bottom: 26px;
  max-width: 680px;
}

.about__bullets {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 26px;
}

.about__bullet {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(17, 18, 20, 0.1) !important;
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 12px 40px rgba(17, 18, 20, 0.06);
}

.about__bullet h4 {
  font-size: 16px;
  margin: 0 0 6px 0;
  color: #111214 !important;
}

.about__bullet p {
  margin: 0;
  color: rgba(17, 18, 20, 0.65) !important;
  line-height: 1.6;
}

.about__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 8px;
}

/* Get a Proposal — black bg, white text, yellow hover (like View All Projects) */
.about__actions .wc-btn-primary {
  background: #000000 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  animation: none !important;
  font-weight: 700 !important;
  position: relative;
  overflow: hidden !important;
  isolation: isolate;
  transition: color 0.5s ease, transform 0.5s ease, box-shadow 0.5s ease !important;
}

.about__actions .wc-btn-primary::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: #facc15;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.7s ease, height 0.7s ease;
  z-index: -1;
}

.about__actions .wc-btn-primary::after {
  display: none !important;
}

.about__actions .wc-btn-primary:hover::before {
  width: 400px;
  height: 400px;
}

.about__actions .wc-btn-primary:hover {
  background: transparent !important;
  color: #000000 !important;
  box-shadow: 0 4px 12px rgba(250, 204, 21, 0.3) !important;
  transform: none !important;
}

/* See Case Studies — white bg, black text, yellow hover (like Let's Talk) */
.about__actions .wc-btn-secondary {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  font-weight: 700 !important;
  position: relative;
  overflow: hidden !important;
  isolation: isolate;
  transition: color 0.5s ease, transform 0.5s ease, box-shadow 0.5s ease !important;
}

.about__actions .wc-btn-secondary::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: #facc15;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.7s ease, height 0.7s ease;
  z-index: -1;
}

.about__actions .wc-btn-secondary:hover::before {
  width: 400px;
  height: 400px;
}

.about__actions .wc-btn-secondary:hover {
  background: transparent !important;
  color: #000000 !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px rgba(250, 204, 21, 0.3) !important;
  transform: none !important;
}

.about__actions .wc-btn-primary i,
.about__actions .wc-btn-secondary i {
  transform: rotate(-45deg);
}

.about__media {
  position: relative;
}

.about__image-stack {
  position: relative;
  min-height: 520px;
}

.about__img {
  position: absolute;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 22px 70px rgba(17, 18, 20, 0.18);
  border: 1px solid rgba(17, 18, 20, 0.08);
}

.about__img--primary {
  width: 78%;
  height: 360px;
  left: 0;
  top: 0;
  object-fit: cover;
}

.about__img--secondary {
  width: 64%;
  height: 270px;
  right: 0;
  top: 140px;
  object-fit: cover;
}

.about__img--tertiary {
  width: 56%;
  height: 220px;
  left: 12%;
  bottom: 0;
  object-fit: cover;
}

.about__media-badge {
  position: absolute;
  right: 18px;
  bottom: 16px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(17, 18, 20, 0.10);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 18px 60px rgba(17, 18, 20, 0.12);
  max-width: 200px;
}

.about__media-badge .num {
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
  color: #111214 !important;
}

.about__media-badge .lbl {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.3;
  color: rgba(17, 18, 20, 0.70);
}

@media (max-width: 991px) {
  .about__grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .about__headline {
    font-size: 34px;
  }

  .about__image-stack {
    min-height: 440px;
  }
}

.service__area {
  background: linear-gradient(135deg, #0d0900 0%, #1c1400 45%, #0d0b00 100%) !important;
  border: none !important;
  position: relative;
  overflow: hidden;
  padding-top: 100px !important;
  padding-bottom: 80px !important;
}
.service__area > * {
  position: relative;
  z-index: 1;
}
.service__area::before {
  content: '';
  position: absolute;
  top: -30%;
  left: -15%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(251,191,36,0.18) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.service__area::after {
  content: '';
  position: absolute;
  bottom: -25%;
  right: -10%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(245,158,11,0.12) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/* Services (revamp): horizontal scroll + hover depth + glow */
.services__header {
  margin-bottom: 34px;
}

.services__footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
}

.services__view-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: #ffffff !important;
  color: #000000 !important;
  font-size: 14px;
  font-weight: 700;
  border-radius: 6px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.5s ease, transform 0.5s ease, box-shadow 0.5s ease;
}

.services__view-all-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: #facc15;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.7s ease, height 0.7s ease;
  z-index: -1;
}

.services__view-all-btn:hover::before {
  width: 400px;
  height: 400px;
}

.services__view-all-btn:hover {
  background: transparent !important;
  color: #000000 !important;
  box-shadow: 0 4px 12px rgba(250, 204, 21, 0.3);
}

.services__view-all-btn i {
  font-size: 12px;
  color: #000000 !important;
  transform: rotate(-45deg);
}

.services__kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(251, 191, 36, 0.10) !important;
  border: 1px solid rgba(251, 191, 36, 0.35) !important;
  border-radius: 100px !important;
  padding: 6px 16px 6px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: rgba(251, 191, 36, 0.90) !important;
  margin-bottom: 14px;
}

.services__kicker::before {
  content: '' !important;
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #fbbf24 !important;
  flex-shrink: 0 !important;
}

.services__headline {
  font-size: 44px;
  line-height: 1.08;
  font-weight: 800;
  color: #ffffff !important;
  margin-bottom: 14px;
}

.services__desc {
  color: rgba(255, 255, 255, 0.62) !important;
  font-size: 17px;
  line-height: 1.75;
}

.services__scroller-wrap {
  position: relative;
  padding: 10px 0 6px;
  overflow: hidden;
}

.services__scroller {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding: 12px 10px 22px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* hide scrollbar */
.services__scroller::-webkit-scrollbar {
  height: 0;
}
.services__scroller {
  scrollbar-width: none;
}


.services__card {
  scroll-snap-align: start;
  flex: 0 0 380px;
  background: rgba(15, 12, 0, 0.85);
  border: 1px solid rgba(251,191,36,0.25);
  border-radius: 22px;
  padding: 26px 26px 22px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.40);
  position: relative;
  overflow: hidden;
  transition: box-shadow 300ms ease, border-color 300ms ease;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.services__card::before,
.services__card::after {
  display: none !important;
}

.services__card:hover {
  border-color: rgba(251,191,36,0.60);
  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
}


/* Mobile: stack cards vertically */
@media (max-width: 767px) {
  .services__scroller {
    overflow-x: visible;
  }
}

.services__card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.services__icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(251,191,36,0.15);
  border: 1px solid rgba(251,191,36,0.30);
  box-shadow: none;
  transition: background 300ms ease;
}

.services__icon i {
  font-size: 22px;
  color: #ffffff;
  transition: transform 260ms ease, color 260ms ease;
}

/* icon animation on hover */
.services__card:hover .services__icon i {
  transform: rotate(-12deg) scale(1.14);
}

.services__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.services__tag {
  font-size: 12px;
  color: rgba(251, 191, 36, 0.90);
  background: rgba(251,191,36,0.10);
  border: 1px solid rgba(251,191,36,0.25);
  padding: 6px 10px;
  border-radius: 999px;
}

.services__title {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff !important;
  margin-bottom: 10px;
}

.services__text {
  color: rgba(230, 215, 175, 0.72) !important;
  line-height: 1.7;
  margin-bottom: 16px;
}

.services__card-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: rgba(251, 191, 36, 0.95) !important;
  transition: color 260ms ease, gap 260ms ease;
}

.services__card-link i {
  transform: rotate(-45deg);
}

.services__card:hover .services__card-link {
  color: #ffffff !important;
  gap: 14px;
}

.services__footer {
  margin-top: 26px;
}


@media (max-width: 991px) {
  .services__headline {
    font-size: 34px;
  }
  .services__card {
    flex-basis: 320px;
  }
}

@media (max-width: 767px) {
  .services__scroller {
    display: grid;
    grid-template-columns: 1fr;
    overflow: visible;
    padding: 0;
  }
  .services__card {
    flex: unset;
  }
}

.registration__area {
  background: #0d1117 !important;
}

.counter__area.keystats__revamp {
  background: linear-gradient(160deg, #0d0900 0%, #1c1400 25%, #120e00 55%, #0a0800 100%) !important;
  position: relative;
  overflow: hidden;
}
.counter__area.keystats__revamp::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -10%;
  width: 700px;
  height: 700px;
  background: radial-gradient(ellipse, rgba(251,191,36,0.40) 0%, rgba(180,130,0,0.18) 35%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.counter__area.keystats__revamp::after {
  content: '';
  position: absolute;
  bottom: -20%;
  right: -5%;
  width: 600px;
  height: 600px;
  background: radial-gradient(ellipse, rgba(245,158,11,0.35) 0%, rgba(120,80,0,0.15) 35%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.counter__area.keystats__revamp .container {
  position: relative;
  z-index: 1;
}

.portfolio__area {
  background: #f2f3f5 !important;
}

.brand__area {
  background: #ffffff !important;
}


.blog__area {
  background: #f3f5f8 !important;
}

.cta__area {
  background: #ffffff !important;
}

.footer__area {
  background: #ffffff !important;
}

/* Add soft section separators */
main > section:not(.hero__area) {
  position: relative;
}

main > section:not(.hero__area)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 64px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.02) 100%);
  pointer-events: none;
}

.container.line {
  background: transparent !important;
}

/* Neutralize additional components that were previously forced yellow */
.service__link {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
}

.service__icon,
.testimonial__rating i,
.testimonial__author h4,
.contact__info h2,
.contact__text h4 {
  color: var(--color-text) !important;
}

.testimonial__author img {
  border-color: var(--color-border) !important;
}

/* Blog: card effect */
.blog__item {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 18px;
  overflow: hidden;
  padding: 18px 18px 22px;
  box-shadow: 0 18px 60px rgba(17, 18, 20, 0.08);
  transition: transform 250ms ease, box-shadow 250ms ease;
}

.blog__item:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 70px rgba(17, 18, 20, 0.12);
}

.blog__img-wrapper .img-box {
  border-radius: 14px;
  overflow: hidden;
}

.blog__title {
  color: var(--color-text) !important;
}

.blog__meta,
.blog__meta a,
.blog__btn {
  color: var(--color-muted) !important;
}

/* Testimonials slider */
.testimonial__slider {
  padding-bottom: 36px;
}

.testimonial__slider .swiper-wrapper {
  align-items: stretch !important;
}

.testimonial__slider .swiper-slide {
  height: auto !important;
  display: flex !important;
}

.testimonial__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  padding: 70px 30px 30px;
  min-height: 320px;
  height: 100% !important;
  box-shadow: 0 18px 60px rgba(17, 18, 20, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  margin-top: 50px;
}

.testimonial__card .testimonial__img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  flex-shrink: 0;
  overflow: hidden;
  background: #fff;
  border: 3px solid var(--color-border);
}

.testimonial__card .testimonial__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Stop main.js imageMoving() cursor-follow effect */
  transform: none !important;
  transition: none !important;
  pointer-events: none;
  position: static !important;
  left: auto !important;
  top: auto !important;
}

.testimonial__text {
  color: var(--color-muted) !important;
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 20px;
  flex-grow: 1;
  position: relative;
}

.testimonial__text::before {
  content: '\201C';
  font-size: 60px;
  line-height: 1;
  color: var(--color-border);
  position: absolute;
  top: -20px;
  left: 0;
  font-family: Georgia, serif;
}

.testimonial__text::after {
  content: '\201D';
  font-size: 60px;
  line-height: 1;
  color: var(--color-border);
  position: absolute;
  bottom: -30px;
  right: 0;
  font-family: Georgia, serif;
}

.testimonial__title {
  color: var(--color-text) !important;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.testimonial__title::before {
  content: '';
  width: 30px;
  height: 3px;
  background: var(--color-text);
  display: block;
}

.testimonial__role {
  color: var(--color-muted) !important;
  font-size: 13px;
  margin-top: 4px;
}

.testimonial__pagination {
  position: static !important;
  margin-top: 20px !important;
  display: flex !important;
  justify-content: center !important;
}

.testimonial__pagination .swiper-pagination-bullet {
  background: rgba(17, 18, 20, 0.25) !important;
  opacity: 1;
  margin: 0 6px !important;
}

.testimonial__pagination .swiper-pagination-bullet-active {
  background: var(--primary-color) !important;
}

/* Registration section: convert from dark to light */
.registration__area {
  background: var(--color-bg) !important;
}

.registration__card {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: 0 16px 48px rgba(17, 18, 20, 0.08);
}

/* Fix button hover animation conflict */
.header__cta {
  position: fixed !important;
  right: 40px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 1000 !important;
  pointer-events: auto !important;
  padding: 12px 20px !important;
}

.header__cta,
.header__cta * {
  transform: none !important;
}

.header__cta:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 14px 36px rgba(251,191,36,0.55), inset 0 1px 0 rgba(255,255,255,0.30) !important;
}

.btn-hover {
  transition: none !important;
}

.registration__icon {
  color: var(--color-text) !important;
}

.registration__text,
.registration__benefits li {
  color: var(--color-muted) !important;
}

.registration__benefits li i {
  color: var(--color-muted) !important;
}

/* Section transitions
   IMPORTANT: Don't hide content by default (avoids "missing sections" if JS errors).
   Animation is handled by GSAP ScrollTrigger in custom.js when available.
*/
/* Section scroll-reveal */
.section-reveal {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .section-reveal {
    transition: none;
  }
}

/* =============================
   Join (Creators + Brands) Revamp
   ============================= */
.join__revamp {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  transition: background-color 0.3s ease;
}

.join__header {
  max-width: 920px;
  margin: 0 auto 46px;
  text-align: center;
}

.join__kicker {
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(17, 18, 20, 0.65);
  margin-bottom: 14px;
}

.join__headline {
  font-size: 44px;
  line-height: 1.12;
  margin-bottom: 14px;
  color: var(--color-text) !important;
}

.join__desc {
  max-width: 820px;
  margin: 0 auto;
  color: var(--color-muted) !important;
  line-height: 1.7;
}

.join__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.join__card {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 30px 30px 26px;
  background: linear-gradient(180deg, rgba(255,255,255,0.84) 0%, rgba(243,245,248,0.84) 100%);
  border: 1px solid rgba(17, 18, 20, 0.08);
  box-shadow: 0 24px 90px rgba(17, 18, 20, 0.10);
  transform-style: preserve-3d;
  will-change: transform;
  transition: box-shadow 260ms ease, border-color 260ms ease;
  backdrop-filter: blur(10px);
}

.join__card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 22px;
  background: radial-gradient(circle at var(--glow-x, 80%) var(--glow-y, 20%), rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.08) 32%, rgba(0, 0, 0, 0) 70%);
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 260ms ease, transform 260ms ease;
  pointer-events: none;
}

.join__card::after {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.25) 45%, rgba(255,255,255,0) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 260ms ease;
  pointer-events: none;
}

.join__card:hover {
  border-color: rgba(0, 0, 0, 0.28);
  box-shadow: 0 34px 120px rgba(17, 18, 20, 0.14);
}

.join__card:hover::before {
  opacity: 1;
  transform: scale(1);
}

.join__card:hover::after {
  opacity: 1;
}

.join__card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.join__icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #000000;
  border: 1px solid #1a1a1a;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.20);
  transform: translateZ(30px);
}

.join__icon i {
  font-size: 22px;
  color: #ffffff;
}

.join__chip {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 18, 20, 0.68);
  background: rgba(17, 18, 20, 0.04);
  border: 1px solid rgba(17, 18, 20, 0.06);
  padding: 8px 12px;
  border-radius: 999px;
}

.join__title {
  font-size: 22px;
  font-weight: 900;
  color: var(--color-text) !important;
  margin-bottom: 10px;
}

.join__text {
  color: var(--color-muted) !important;
  line-height: 1.7;
  margin-bottom: 16px;
}

.join__list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: grid;
  gap: 10px;
}

.join__list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: rgba(17, 18, 20, 0.78);
}

.join__list li i {
  margin-top: 4px;
  color: rgba(17, 18, 20, 0.55);
}

.join__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.join__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.join__orb {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 999px;
  filter: blur(0px);
  background: radial-gradient(circle, rgba(255, 196, 0, 0.18) 0%, rgba(255, 196, 0, 0.06) 40%, rgba(255, 196, 0, 0) 70%);
  opacity: 0.9;
}

.join__orb--1 {
  top: -160px;
  left: -160px;
}

.join__orb--2 {
  bottom: -200px;
  right: -180px;
}

.join__orb--3 {
  top: 40%;
  right: 8%;
  width: 320px;
  height: 320px;
  opacity: 0.6;
}

@media (max-width: 991px) {
  .join__headline {
    font-size: 36px;
  }
  .join__grid {
    grid-template-columns: 1fr;
  }
}

/* =============================
   Brands Marquee Revamp
   ============================= */
.brands__revamp .line-3 {
  display: none !important;
}

.brands__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: center;
}

.brands__title {
  max-width: 820px;
  margin: 0 auto 8px;
  text-align: center;
}

.brands__kicker {
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(17, 18, 20, 0.65);
  margin-bottom: 12px;
}

.brands__headline {
  font-size: 32px;
  line-height: 1.15;
  color: var(--color-text) !important;
  margin-bottom: 8px;
}

.brands__desc {
  color: var(--color-muted) !important;
  margin: 0;
}

.brands__marquee {
  position: relative;
  overflow: hidden;

  /* Full left-to-right marquee (full-bleed) */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);

  border-radius: 18px;
  border: 1px solid rgba(17, 18, 20, 0.08);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 60px rgba(17, 18, 20, 0.10);
  height: 96px;
  display: flex;
  align-items: center;
}

.brands__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}

.brands__fade--left {
  left: 0;
  background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}

.brands__fade--right {
  right: 0;
  background: linear-gradient(270deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}

.brands__track {
  --marquee-duration: 22s;
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  padding: 0 80px;
  animation: brands-marquee var(--marquee-duration) linear infinite;
  will-change: transform;
}

.brands__marquee:hover .brands__track {
  animation-play-state: paused;
}

.brands__item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.95;
  transition: opacity 220ms ease, transform 220ms ease;
}

.brands__item img {
  height: 128px;
  width: auto;
  opacity: 1;
  filter: contrast(1.18);
  mix-blend-mode: multiply;
}

.brands__item:hover {
  opacity: 1;
  transform: translateY(-2px);
}

@keyframes brands-marquee {
  /* move RIGHT -> LEFT continuously (3 sets, so -33.33%) */
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-33.33%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .brands__track {
    animation: none;
  }
}

@media (max-width: 991px) {
  .brands__headline {
    font-size: 28px;
  }
  .brands__track {
    padding: 0 56px;
    gap: 42px;
  }
  .brands__fade {
    width: 90px;
  }
}

@media (max-width: 767px) {
  .brands__item img {
    height: 36px;
  }
}

/* =============================
   Reels (Instagram) Section
   ============================= */
.reels__area {
  background: linear-gradient(135deg, #0d0900 0%, #1a1000 30%, #0a0600 60%, #1c1400 100%) !important;
  padding: 84px 0 !important;
  border-top: 2px solid rgba(251,191,36,0.18);
  border-bottom: 2px solid rgba(251,191,36,0.10);
  box-shadow: inset 0 0 120px rgba(251,191,36,0.06);
}

.reels__scroller {
  min-height: 450px !important;
}

.reels__header {
  max-width: 920px;
  margin: 0 auto 26px;
  text-align: center;
}

.reels__kicker {
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 12px;
  color: #fbbf24;
  margin-bottom: 12px;
}

.reels__headline {
  font-size: 40px;
  line-height: 1.12;
  margin-bottom: 10px;
  color: #ffffff !important;
}

.reels__desc {
  color: rgba(255, 255, 255, 0.60) !important;
  line-height: 1.7;
  margin: 0;
}

/* Instagram badge in reels section */
.reels__ig-badge {
  display: flex;
  justify-content: center;
  margin: 10px 0 32px;
}

.reels__ig-badge i {
  font-size: 52px;
  background: radial-gradient(circle at 30% 110%, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 4px 18px rgba(220, 39, 67, 0.45));
  animation: igPulse 2.8s ease-in-out infinite;
}

@keyframes igPulse {
  0%, 100% { filter: drop-shadow(0 4px 18px rgba(220,39,67,0.45)); transform: scale(1); }
  50%       { filter: drop-shadow(0 6px 28px rgba(220,39,67,0.75)); transform: scale(1.08); }
}

.reels__scroller-wrap {
  position: relative;
  padding: 10px 0 6px;
}

.reels__scroller-wrap::before,
.reels__scroller-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}

.reels__scroller-wrap::before {
  left: -2px;

}

.reels__scroller-wrap::after {
  right: -2px;

}

.reels__nav-group {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
  padding-right: 10px;
}

.reels__nav {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(251,191,36,0.35);
  background: rgba(251,191,36,0.10);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 28px rgba(251,191,36,0.20);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fbbf24;
  transition: transform 220ms ease, opacity 220ms ease;
}

.reels__nav:hover {
  transform: scale(1.06);
}

.reels__nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.reels__scroller {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding: 12px 10px 22px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  perspective: 900px;
  cursor: grab;
  user-select: none;
}

.reels__scroller.is-dragging {
  cursor: grabbing;
}

.reels__scroller::-webkit-scrollbar {
  height: 0;
}

.reels__card {
  scroll-snap-align: start;
  flex: 0 0 290px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(17, 18, 20, 0.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.86) 100%);
  box-shadow: 0 22px 80px rgba(17, 18, 20, 0.12);
  transform-style: preserve-3d;
  will-change: transform;
}

.reels__media-link {
  display: block;
  text-decoration: none;
}

.reels__media {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: #111;
}

.reels__thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease, filter 0.3s ease;
}

.reels__card:hover .reels__thumbnail {
  transform: scale(1.05);
  filter: brightness(0.85);
}

.reels__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
  transition: background 0.3s ease;
}

.reels__card:hover .reels__overlay {
  background: rgba(0, 0, 0, 0.4);
}

.reels__play {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
  color: #fff;
  box-shadow: 0 18px 60px rgba(0,0,0,0.35);
  transition: transform 220ms ease;
}

.reels__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.88);
  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 8px 10px;
  border-radius: 999px;
  backdrop-filter: blur(10px);
}

.reels__title-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 100px 20px 25px;
  background: linear-gradient(to top, rgba(251, 191, 36, 0.90) 0%, rgba(251, 191, 36, 0.65) 35%, rgba(251, 191, 36, 0.30) 65%, transparent 100%);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  z-index: 10;
}

.reels__card:hover .reels__title-overlay {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.reels__title-overlay .reels__title {
  font-size: 15px;
  font-weight: 700;
  color: #1a1000 !important;
  margin: 0;
  text-align: center;
  line-height: 1.4;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
}

.reels__card:hover .reels__play {
  transform: scale(1.06);
  animation: reels-play-pulse 1.2s ease-in-out infinite;
}

@keyframes reels-play-pulse {
  0%, 100% { box-shadow: 0 18px 60px rgba(0,0,0,0.35); }
  50% { box-shadow: 0 22px 90px rgba(255,196,0,0.25); }
}

.reels__card.is-embed .reels__placeholder {
  opacity: 0.18;
}

.reels__card.is-playing .reels__placeholder {
  opacity: 0;
  pointer-events: none;
}

.reels__card.is-playing iframe {
  pointer-events: auto;
}

.reels__meta {
  padding: 16px 16px 18px;
}

.reels__title {
  font-size: 16px;
  font-weight: 900;
  color: var(--color-text, #111214) !important;
  margin: 0 0 10px;
}

.reels__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: rgba(17, 18, 20, 0.80) !important;
}

.reels__link i {
  transform: rotate(-45deg);
}

.reels__card:hover .reels__link {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

@media (max-width: 767px) {
  .reels__scroller-wrap::before,
  .reels__scroller-wrap::after,
  .reels__nav {
    display: none !important;
  }
  .reels__scroller {
    padding: 10px 0 0;
  }
}

/* =============================
   Footer Revamp (dark theme)
   ============================= */
.footer__revamp {
  background: #111010 !important;
  border-top: 2px solid var(--primary-color) !important;
}

/* Flip all text to light on dark footer — overrides the global 'footer p/li' muted colors */
.footer__revamp,
.footer__revamp p,
.footer__revamp li,
.footer__revamp span:not(.wc-btn-primary *):not(.wc-btn-secondary *) {
  color: rgba(255, 255, 255, 0.70) !important;
}

.footer__revamp h1,
.footer__revamp h2,
.footer__revamp h3,
.footer__revamp h4,
.footer__revamp h5,
.footer__revamp h6 {
  color: #ffffff !important;
}

/* Undo old global logo inversion specifically in footer */

.footer__revamp a {
  color: rgba(255, 255, 255, 0.75);
}

.footer__revamp a:hover {
  color: #fbbf24;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 0.9fr 1.1fr 1.2fr;
  gap: 26px;
  padding: 70px 0 30px;
}

.footer__brand {
  max-width: 460px;
}

.footer__blurb {
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.60);
  line-height: 1.7;
}

.footer__title {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: #ffffff !important;
  margin: 4px 0 14px;
}

.footer__link,
.footer__contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.footer__muted {
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.6;
  margin-bottom: 12px;
}

.footer__cta {
  margin-top: 16px;
}

.footer__subscribe {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(10px);
  padding: 10px 10px 10px 14px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.25);
}

.footer__subscribe input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.90);
}

.footer__subscribe input::placeholder {
  color: rgba(255, 255, 255, 0.40);
}

.footer__social {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.footer__social li {
  list-style: none;
}

.footer__social a span {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: transparent;
  transition: all 0.3s ease;
}

.footer__social a:hover span {
  background: #000000;
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.footer__social a span i,
.footer__social a span svg {
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.3s ease;
  animation: floatIcon 3s ease-in-out infinite;
  font-size: 18px;
}

.footer__social a:hover span i,
.footer__social a:hover span svg {
  color: #fbbf24;
  animation-play-state: paused;
  transform: translateY(0);
}

.footer__social li:nth-child(1) span i,
.footer__social li:nth-child(1) span svg {
  animation-delay: 0s;
}

.footer__social li:nth-child(2) span i,
.footer__social li:nth-child(2) span svg {
  animation-delay: 0.5s;
}

.footer__social li:nth-child(3) span i,
.footer__social li:nth-child(3) span svg {
  animation-delay: 1s;
}

.footer__social li:nth-child(4) span i,
.footer__social li:nth-child(4) span svg {
  animation-delay: 1.5s;
}

@keyframes floatIcon {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

.footer__bottom {
  padding: 18px 0 26px;
  /* border-top: 1px solid rgba(255, 255, 255, 0.10); */
  color: rgba(255, 255, 255, 0.45);
}

.footer__bottom-inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: nowrap;
}

.footer__bottom p {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.footer__credit-link {
  font-weight: 800;
  text-decoration: underline !important;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}

.footer__privacy-link {
  margin-left: auto;
  flex: 0 0 auto;
  white-space: nowrap;
  text-decoration: none;
}

.footer__privacy-link:hover {
  text-decoration: none;
}

/* =============================
   Privacy Policy (site)
   ============================= */
.policy__content {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  color: rgba(17, 18, 20, 0.78);
  line-height: 1.8;
}

.policy__content p {
  margin: 0 0 14px;
}

.policy__content h1,
.policy__content h2,
.policy__content h3,
.policy__content h4 {
  color: rgba(17, 18, 20, 0.92);
  margin: 22px 0 10px;
}

.policy__content ul,
.policy__content ol {
  margin: 0 0 14px;
  padding-left: 22px;
}

/* Axtra master.css sets `li { list-style: none; }` globally.
   Restore markers for policy content only. */
.policy__content ul > li {
  list-style: disc;
}

.policy__content ol > li {
  list-style: decimal;
}

.policy__content ul > li,
.policy__content ol > li {
  display: list-item;
  margin: 0 0 8px;
}

.policy__content a {
  text-decoration: underline;
}

@media (max-width: 991px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    padding-top: 56px;
  }
}

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

  .footer__bottom-inner {
    flex-wrap: wrap;
  }
}

/* =============================
   Global section backgrounds (avoid "all-white" look)
   ============================= */




/* =============================
   Services Section - Scroll Animation (white to gray)
   ============================= */
.services__revamp {
  background: #ffffff !important;
  transition: background-color 1s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Smooth transitions for all elements inside */
.services__revamp * {
  transition: color 0.8s cubic-bezier(0.4, 0, 0.2, 1), 
              background-color 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.services__revamp.bg-gray {
  background: linear-gradient(135deg, #0d0900 0%, #1c1400 45%, #0d0b00 100%) !important;
}

/* Services section text colors when gray bg is active */
.services__revamp.bg-gray .services__kicker,
.services__revamp.bg-gray .services__headline,
.services__revamp.bg-gray .services__desc,
.services__revamp.bg-gray .services__title,
.services__revamp.bg-gray .services__text,
.services__revamp.bg-gray h2,
.services__revamp.bg-gray h3,
.services__revamp.bg-gray p {
  color: #ffffff !important;
}

.services__revamp.bg-gray .services__tag {
  background: rgba(251,191,36,0.12) !important;
  color: rgba(251,191,36,0.90) !important;
  border: 1px solid rgba(251,191,36,0.25) !important;
}

.services__revamp.bg-gray .services__card {
  background: linear-gradient(145deg, rgba(251,191,36,0.10) 0%, rgba(15,12,0,0.82) 55%, rgba(180,115,0,0.06) 100%) !important;
  border-color: rgba(251,191,36,0.25) !important;
}

.services__revamp.bg-gray .services__icon {
  background: linear-gradient(135deg, rgba(251,191,36,0.22) 0%, rgba(30,22,0,0.85) 100%) !important;
  border: 1px solid rgba(251,191,36,0.30) !important;
  box-shadow: 0 4px 16px rgba(245,158,11,0.20) !important;
}

.services__revamp.bg-gray .services__icon i {
  color: #fbbf24 !important;
}

.services__revamp.bg-gray .services__card-link {
  color: rgba(251,191,36,0.95) !important;
}

.services__revamp.bg-gray .services__nav {
  background: rgba(20,15,0,0.80) !important;
  border-color: rgba(251,191,36,0.40) !important;
  color: rgba(251,191,36,0.90) !important;
}

.services__revamp.bg-gray .services__nav:hover {
  background: rgba(30,22,0,0.90) !important;
  border-color: rgba(251,191,36,0.70) !important;
}

/* Fix button in dark background — keep golden theme */
.services__revamp.bg-gray .wc-btn-primary {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 40%, #1a1000 100%) !important;
  color: #000000 !important;
  border: none !important;
  box-shadow: 0 8px 28px rgba(251,191,36,0.40) !important;
}

/* Join section — permanently dark: always show white text */
.join__revamp .join__kicker,
.join__revamp .join__headline,
.join__revamp .join__desc,
.join__revamp .join__title,
.join__revamp .join__text,
.join__revamp .join__list li,
.join__revamp .join__chip,
.join__revamp h2,
.join__revamp h3,
.join__revamp h4,
.join__revamp p {
  color: #ffffff !important;
}
.join__revamp .join__list li i { color: rgba(255,255,255,0.55) !important; }
.join__revamp .join__chip {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.2) !important;
}
.join__revamp .join__card {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.1) !important;
}
.join__revamp .wc-btn-primary {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 40%, #1a1000 100%) !important;
  color: #000000 !important;
  border: none !important;
  box-shadow: 0 8px 28px rgba(251,191,36,0.38) !important;
}
.join__revamp .wc-btn-secondary {
  background: transparent !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.4) !important;
}
.join__revamp .wc-btn-secondary:hover {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.6) !important;
}

/* Join section - scroll/hover animated background */
.join__revamp {
  background: #0d1117 !important;
  transition: background-color 1s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Smooth transitions for all elements inside */
.join__revamp * {
  transition: color 0.8s cubic-bezier(0.4, 0, 0.2, 1), 
              background-color 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.join__revamp.bg-gray {
  background: #1a1a1a !important;
}

/* Join section text colors when gray bg is active */
.join__revamp.bg-gray .join__kicker,
.join__revamp.bg-gray .join__headline,
.join__revamp.bg-gray .join__desc,
.join__revamp.bg-gray .join__title,
.join__revamp.bg-gray .join__text,
.join__revamp.bg-gray .join__list li,
.join__revamp.bg-gray .join__chip,
.join__revamp.bg-gray h3,
.join__revamp.bg-gray h4,
.join__revamp.bg-gray p {
  color: #ffffff !important;
  transition: color 0.6s ease;
}

.join__revamp.bg-gray .join__list li i {
  color: rgba(255, 255, 255, 0.6) !important;
}

.join__revamp.bg-gray .join__chip {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.join__revamp.bg-gray .join__card {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Fix button text in gray bg */
.join__revamp.bg-gray .wc-btn-primary {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
}

.join__revamp.bg-gray .wc-btn-secondary {
  background: transparent !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

.join__revamp.bg-gray .wc-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
}

/* =============================
   Portfolio/Work Section - Scroll Animation (same as Join)
   ============================= */
.portfolio__area {
  background: #f2f3f5 !important;
  transition: background-color 1s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.portfolio__area.bg-gray {
  background: gray !important;
}

/* Portfolio section text colors when gray bg is active */
.portfolio__area.bg-gray .portfolio__text {
  color: #ffffff !important;
  transition: color 0.6s ease;
}

.portfolio__area.bg-gray .portfolio__title,
.portfolio__area.bg-gray .portfolio__info p {
  color: #ffffff !important;
}

/* Fix button in dark background */
.portfolio__area.bg-gray .wc-btn-secondary {
  background: transparent !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

.portfolio__area.bg-gray .wc-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
}


/* =============================
   Global spacing tune (reduce extra whitespace)
   ============================= */
main .pt-150 { padding-top: 96px !important; }
main .pb-140 { padding-bottom: 88px !important; }
main .pt-120 { padding-top: 76px !important; }
main .pb-120 { padding-bottom: 76px !important; }
main .pt-100 { padding-top: 64px !important; }
main .pb-100 { padding-bottom: 64px !important; }
main .pt-50  { padding-top: 32px !important; }
main .pb-50  { padding-bottom: 32px !important; }

/* Axtra has a more specific rule: .brand__area .pb-100 { padding-bottom: 50px; }
   Override it so spacing stays consistent.
*/
main .brand__area .pb-100 { padding-bottom: 64px !important; }

@media (max-width: 767px) {
  main .pt-150 { padding-top: 78px !important; }
  main .pb-140 { padding-bottom: 72px !important; }
  main .pt-120 { padding-top: 64px !important; }
  main .pb-120 { padding-bottom: 64px !important; }
  main .pt-100 { padding-top: 56px !important; }
  main .pb-100 { padding-bottom: 56px !important; }
  main .pt-50  { padding-top: 26px !important; }
  main .pb-50  { padding-bottom: 26px !important; }
  main .brand__area .pb-100 { padding-bottom: 56px !important; }
}

/* =============================
   Section-specific padding (for sections without pt/pb utilities)
   ============================= */
.about__area,
.services__revamp,
.reels__area {
  padding: 84px 0;
}

.portfolio__area {
  padding-top: 72px;
}

@media (max-width: 767px) {
  .about__area,
  .services__revamp,
  .reels__area {
    padding: 64px 0;
  }
  .portfolio__area {
    padding-top: 56px;
  }
}

/* Reduce some template spacing utilities that feel too tall */
.testimonial__area .mt-60 {
  margin-top: 28px !important;
}

/* Axtra adds huge padding-top to testimonial title block; neutralize it */
.testimonial__area .sec-title-wrapper {
  max-width: 760px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.testimonial__area .sec-sub-title,
.testimonial__area .sec-title,
.testimonial__area .sec-title-wrapper p {
  text-align: center !important;
}

.testimonial__area .sec-title-wrapper p {
  padding-top: 10px !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}

/* Reduce container padding for testimonial section */
.testimonial__area .pt-120 {
  padding-top: 56px !important;
}

.testimonial__area .pb-120 {
  padding-bottom: 56px !important;
}

.brands__revamp .pt-100 {
  padding-top: 24px !important;
}

.brands__revamp .pb-100 {
  padding-bottom: 24px !important;
}

.brands__revamp .pt-50 {
  padding-top: 24px !important;
}

.brands__revamp .pb-50 {
  padding-bottom: 24px !important;
}

/* Button sits OUTSIDE portfolio__area to escape GSAP fixed-positioned items */
.portfolio__btn-outer {
  display: flex;
  justify-content: center;
  padding: 36px 0 52px;
  background: #f2f3f5;
  position: relative;
  z-index: 10;
}

.portfolio__btn-outer .wc-btn-secondary {
  background: #000000 !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  padding: 14px 40px !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  animation: none !important;
  position: relative;
  overflow: hidden !important;
  isolation: isolate;
  transition: color 0.5s ease, transform 0.5s ease, box-shadow 0.5s ease !important;
}

.portfolio__btn-outer .wc-btn-secondary::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: #facc15;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.7s ease, height 0.7s ease;
  z-index: -1;
}

.portfolio__btn-outer .wc-btn-secondary::after {
  display: none !important;
}

.portfolio__btn-outer .wc-btn-secondary:hover::before {
  width: 400px;
  height: 400px;
}

.portfolio__btn-outer .wc-btn-secondary:hover {
  background: transparent !important;
  color: #000000 !important;
  box-shadow: 0 4px 12px rgba(250, 204, 21, 0.3) !important;
  transform: none !important;
}

.portfolio__btn-outer .wc-btn-secondary i {
  transform: rotate(-45deg);
}

.portfolio__area .portfolio__btn.btn_wrapper {
  display: flex !important;
  justify-content: center !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Override to golden primary style */
.portfolio__area .portfolio__btn .wc-btn-secondary {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 40%, #1a1000 100%) !important;
  color: #000000 !important;
  border: none !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 28px rgba(251,191,36,0.40), inset 0 1px 0 rgba(255,255,255,0.25) !important;
  animation: btnGoldShift 3s ease infinite;
  position: relative;
  overflow: hidden !important;
}

.portfolio__area .portfolio__btn .wc-btn-secondary::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(105deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 55%);
  pointer-events: none;
}

.portfolio__area .portfolio__btn .wc-btn-secondary:hover {
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 16px 44px rgba(251,191,36,0.55), inset 0 1px 0 rgba(255,255,255,0.30) !important;
}

.portfolio__area .portfolio__btn .wc-btn-secondary i {
  transform: rotate(-45deg);
}

/* Work (Portfolio) section */
.portfolio__area {
  transition: background-color 1s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.portfolio__area.bg-gray {
  background: #f2f3f5 !important;
}


/* =============================
   Section backgrounds — final authority (placed last to win all specificity races)
   ============================= */
.about__area       { background: #ffffff    !important; }                 /* 1. Clean white */
.service__area     { background: linear-gradient(135deg, #0d0900 0%, #1c1400 45%, #0d0b00 100%) !important; }
.registration__area,
.join__revamp      { background: #0d1117    !important; }                 /* 3. Deep dark */
/* counter__area / keystats: bg handled by component inline styles */
.portfolio__area   { background: #f2f3f5    !important; }                 /* 5. Light grey */
.brand__area,
.brands__revamp    { background: #ffffff    !important; }                 /* 6. White */
.testimonial__area { background: #fff8f0    !important; }                 /* 7. Warm amber tint */
.reels__area       { background: linear-gradient(135deg, #0d0900 0%, #1a1000 30%, #0a0600 60%, #1c1400 100%) !important; }  /* 8. Black-gold */

/* Dark join section: ensure all text is white regardless of JS state */
.join__revamp * { color: #ffffff !important; }
.join__revamp .join__card,
.join__revamp .creators__card { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.1) !important; }
.join__revamp .wc-btn-primary  { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 40%, #1a1000 100%) !important; color: #000000 !important; border: none !important; }
.join__revamp .wc-btn-secondary { background: transparent !important; color: #ffffff !important; border-color: rgba(255,255,255,0.35) !important; }
.join__revamp .wc-btn-secondary:hover { background: rgba(255,255,255,0.1) !important; border-color: rgba(255,255,255,0.6) !important; }

/* =====================================================================
   CAREER PAGE  — all rules use !important to beat axtra master.css
   ===================================================================== */

/* ── Reset: kill axtra link bleeds inside career sections ───────────── */
.career-page a { text-decoration: none !important; }
.career__process-desc a,
.career__step-desc a,
.career__tips li a { color: inherit !important; }

/* ── Hero ──────────────────────────────────────────────────────────── */
.career__hero {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #0a0700 !important;
  overflow: hidden !important;
  padding: 120px 0 80px !important;
  text-align: center !important;
}

/* layered ambient glow */
.career__hero::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(ellipse 70% 55% at 50% 60%, rgba(255,215,0,0.10) 0%, transparent 65%),
    radial-gradient(ellipse 40% 30% at 20% 20%, rgba(255,215,0,0.04) 0%, transparent 60%) !important;
  pointer-events: none !important;
}

/* subtle diagonal grid */
.career__hero-bg {
  position: absolute !important;
  inset: 0 !important;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 60px,
    rgba(255,215,0,0.025) 60px,
    rgba(255,215,0,0.025) 61px
  ) !important;
  pointer-events: none !important;
}

/* decorative big faded "7P" watermark */
.career__hero-inner {
  position: relative !important;
  z-index: 2 !important;
  max-width: 820px !important;
  margin: 0 auto !important;
}

.career__eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #FFD700 !important;
  color: #000000 !important;
  border: none !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  padding: 8px 22px !important;
  border-radius: 100px !important;
  margin-bottom: 32px !important;
}

.career__eyebrow::before {
  content: '' !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #000000 !important;
  animation: career-pulse 1.8s ease-in-out infinite !important;
}

@keyframes career-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

.career__headline,
.career-page .career__hero h1 {
  font-size: clamp(2.8rem, 5.5vw, 5rem) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  color: #ffffff !important;
  margin-bottom: 22px !important;
  font-family: 'Roboto', sans-serif !important;
  letter-spacing: -1px !important;
}

.career__headline span,
.career-page .career__hero h1 span {
  color: #FFD700 !important;
  display: block !important;
}

.career__subline,
.career-page .career__hero p.career__subline {
  font-size: 1.1rem !important;
  color: rgba(255,255,255,0.85) !important;
  line-height: 1.75 !important;
  margin: 0 auto 36px !important;
  max-width: 540px !important;
  font-family: 'Open Sans', sans-serif !important;
}

.career__hero-cta {
  font-size: 1rem !important;
  padding: 16px 40px !important;
}

/* scroll indicator */
.career__scroll-hint {
  position: absolute !important;
  bottom: 28px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  color: rgba(255,255,255,0.3) !important;
  font-size: 0.72rem !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  z-index: 2 !important;
}

.career__scroll-hint i {
  color: rgba(255,215,0,0.5) !important;
  animation: career-bounce 2s ease-in-out infinite !important;
}

@keyframes career-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* ── Process + Roles Section ────────────────────────────────────────── */
.career__process {
  padding: 110px 0 !important;
  background: #f7f6f3 !important;
}

.career__process .sec-sub-title {
  color: var(--primary-color) !important;
}

.career__process .sec-title {
  color: #111 !important;
  font-size: clamp(2rem, 3.5vw, 2.8rem) !important;
  margin-bottom: 16px !important;
}

.career__process-intro {
  padding-right: 60px !important;
}

.career__process-desc {
  color: #666 !important;
  line-height: 1.8 !important;
  font-size: 1rem !important;
  margin-bottom: 44px !important;
}

/* ── Steps ──────────────────────────────────────────────────────────── */
.career__steps {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin-top: 8px !important;
  position: relative !important;
}

/* vertical connector line */
.career__steps::before {
  content: '' !important;
  position: absolute !important;
  left: 25px !important;
  top: 52px !important;
  bottom: 52px !important;
  width: 2px !important;
  background: linear-gradient(to bottom, var(--primary-color), rgba(255,215,0,0.1)) !important;
}

.career__step {
  display: flex !important;
  align-items: flex-start !important;
  gap: 22px !important;
  padding: 20px 0 !important;
  position: relative !important;
}

.career__step-num,
.career-page .career__steps .career__step span.career__step-num {
  flex-shrink: 0 !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  background: #FFD700 !important;
  background-color: #FFD700 !important;
  color: #000000 !important;
  font-size: 0.85rem !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 16px rgba(255,215,0,0.35) !important;
  font-family: 'Roboto', sans-serif !important;
  position: relative !important;
  z-index: 1 !important;
  line-height: 1 !important;
}

.career__step-body {
  padding-top: 6px !important;
}

.career__step-title,
.career-page .career__steps .career__step h4 {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #111111 !important;
  margin-bottom: 4px !important;
  font-family: 'Roboto', sans-serif !important;
}

.career__step-desc,
.career-page .career__steps .career__step p {
  font-size: 0.88rem !important;
  color: #666666 !important;
  margin: 0 !important;
  line-height: 1.6 !important;
  font-family: 'Open Sans', sans-serif !important;
}

/* ── Roles Column ───────────────────────────────────────────────────── */
.career__roles-wrap {
  padding-left: 60px !important;
  border-left: 1px solid #e8e6e0 !important;
}

.career__roles-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 24px 0 36px !important;
}

.career__role-pill {
  display: inline-flex !important;
  align-items: center !important;
  padding: 10px 24px !important;
  background: #ffffff !important;
  border: 2px solid #e0ddd5 !important;
  color: #333 !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  transition: all 0.22s ease !important;
  cursor: pointer !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
  font-family: 'Roboto', sans-serif !important;
}

.career__role-pill:hover {
  background: #FFD700 !important;
  border-color: #FFD700 !important;
  color: #000 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(255,215,0,0.28) !important;
  text-decoration: none !important;
}

/* ── Tips Box ───────────────────────────────────────────────────────── */
.career__tips {
  background: #ffffff !important;
  border: 1px solid #e8e6e0 !important;
  border-top: 4px solid #FFD700 !important;
  border-radius: 8px !important;
  padding: 28px 30px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
}

.career__tips h4 {
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  color: #111 !important;
  margin-bottom: 18px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-family: 'Roboto', sans-serif !important;
}

.career__tips ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.career__tips li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  font-size: 0.87rem !important;
  color: #555 !important;
  line-height: 1.6 !important;
  font-family: 'Open Sans', sans-serif !important;
}

.career__tips li i {
  color: #FFD700 !important;
  margin-top: 3px !important;
  flex-shrink: 0 !important;
  font-size: 0.78rem !important;
}

.career__tips li span {
  color: #555 !important;
}

/* ── Form Section ───────────────────────────────────────────────────── */
.career__form-section {
  padding: 110px 0 130px !important;
  background: #0a0700 !important;
  position: relative !important;
}

.career__form-section::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255,215,0,0.07) 0%, transparent 70%) !important;
  pointer-events: none !important;
}

.career__form-header {
  margin-bottom: 64px !important;
  position: relative !important;
  z-index: 1 !important;
}

.career__form-header .sec-sub-title {
  color: var(--primary-color) !important;
}

.career__form-header .sec-title {
  color: #ffffff !important;
  font-size: clamp(1.9rem, 3.2vw, 2.8rem) !important;
  line-height: 1.2 !important;
  font-family: 'Roboto', sans-serif !important;
}

.career__form-tagline {
  color: rgba(255,255,255,0.5) !important;
  font-size: 1rem !important;
  margin-top: 14px !important;
  font-family: 'Open Sans', sans-serif !important;
}

.career__form-wrap {
  max-width: 900px !important;
  margin: 0 auto !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  padding: 60px 64px !important;
  box-shadow: 0 32px 100px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,215,0,0.12) !important;
  position: relative !important;
  z-index: 1 !important;
}

/* top yellow accent bar */
.career__form-wrap::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: var(--primary-color) !important;
  border-radius: 12px 12px 0 0 !important;
}

/* ── Alert ──────────────────────────────────────────────────────────── */
.career__alert {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 18px 22px !important;
  border-radius: 8px !important;
  margin-bottom: 36px !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  font-family: 'Open Sans', sans-serif !important;
}

.career__alert i {
  font-size: 1.25rem !important;
  margin-top: 1px !important;
  flex-shrink: 0 !important;
}

.career__alert--success {
  background: #f0fdf4 !important;
  border: 1px solid #86efac !important;
  color: #15803d !important;
}

.career__alert--success i { color: #16a34a !important; }

.career__alert--error {
  background: #fef2f2 !important;
  border: 1px solid #fca5a5 !important;
  color: #b91c1c !important;
}

.career__alert--error i { color: #dc2626 !important; }

/* ── Form Groups ────────────────────────────────────────────────────── */
.career__form .row {
  margin-bottom: 0 !important;
}

.career__form-group {
  margin-bottom: 24px !important;
}

.career__form-group label {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: #222 !important;
  margin-bottom: 8px !important;
  font-family: 'Roboto', sans-serif !important;
  letter-spacing: 0.2px !important;
}

.career__form-group label span {
  color: #e53e3e !important;
}

.career__form-group label em {
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 0.78rem !important;
  color: #999 !important;
  margin-left: 2px !important;
  font-family: 'Open Sans', sans-serif !important;
}

.career__form-group input,
.career__form-group select,
.career__form-group textarea {
  width: 100% !important;
  padding: 13px 16px !important;
  border: 1.5px solid #e2e0d8 !important;
  border-radius: 6px !important;
  font-size: 0.95rem !important;
  font-family: 'Open Sans', sans-serif !important;
  color: #111 !important;
  background: #fafaf8 !important;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
}

.career__form-group input:focus,
.career__form-group select:focus,
.career__form-group textarea:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px rgba(255,215,0,0.15) !important;
  background: #ffffff !important;
}

.career__form-group select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  padding-right: 42px !important;
  cursor: pointer !important;
}

.career__form-group textarea {
  resize: vertical !important;
  min-height: 130px !important;
}

.career__form-group input::placeholder,
.career__form-group textarea::placeholder {
  color: #bbb !important;
}

/* ── File Drop ──────────────────────────────────────────────────────── */
.career__file-drop {
  position: relative !important;
  border: 2px dashed #d8d5cc !important;
  border-radius: 8px !important;
  background: #fafaf8 !important;
  transition: border-color 0.25s, background 0.25s !important;
  cursor: pointer !important;
}

.career__file-drop:hover,
.career__file-drop--has-file {
  border-color: var(--primary-color) !important;
  background: #fffde8 !important;
}

.career__file-input {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  cursor: pointer !important;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

.career__file-ui {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 36px 20px !important;
  pointer-events: none !important;
  text-align: center !important;
}

.career__file-ui .fa-file-arrow-up {
  font-size: 2.2rem !important;
  color: var(--primary-color) !important;
}

.career__file-ui span {
  font-size: 0.88rem !important;
  color: #888 !important;
  font-family: 'Open Sans', sans-serif !important;
}

.career__file-name {
  font-size: 0.92rem !important;
  color: #111 !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: 'Roboto', sans-serif !important;
}

.career__file-name .fa-file-pdf {
  color: #e53e3e !important;
}

.career__field-error {
  font-size: 0.81rem !important;
  color: #dc2626 !important;
  margin-top: 7px !important;
  margin-bottom: 0 !important;
  font-family: 'Open Sans', sans-serif !important;
}

/* ── Social Section Divider ─────────────────────────────────────────── */
.career__form-section-label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: #999 !important;
  border-top: 1px solid #ece9e0 !important;
  padding-top: 30px !important;
  margin-top: 12px !important;
  margin-bottom: 22px !important;
  font-family: 'Roboto', sans-serif !important;
}

.career__form-section-label i {
  color: var(--primary-color) !important;
  font-size: 0.95rem !important;
}

.career__form-section-label em {
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-size: 0.78rem !important;
  color: #bbb !important;
  margin-left: 4px !important;
  font-family: 'Open Sans', sans-serif !important;
}

/* ── Char Count ─────────────────────────────────────────────────────── */
.career__char-count {
  display: block !important;
  text-align: right !important;
  font-size: 0.76rem !important;
  color: #bbb !important;
  margin-top: 5px !important;
  font-family: 'Open Sans', sans-serif !important;
}

/* ── Submit ─────────────────────────────────────────────────────────── */
.career__form-submit {
  border-top: 1px solid #ece9e0 !important;
  padding-top: 36px !important;
  margin-top: 16px !important;
  text-align: center !important;
}

.career__submit-btn {
  font-size: 1rem !important;
  padding: 17px 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
}

.career__submit-btn:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

.career__form-note {
  margin-top: 18px !important;
  font-size: 0.78rem !important;
  color: #bbb !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  font-family: 'Open Sans', sans-serif !important;
}

.career__form-note i { color: #ccc !important; }
.career__form-note span { color: #bbb !important; }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  .career__process-intro {
    padding-right: 0 !important;
    margin-bottom: 60px !important;
  }

  .career__roles-wrap {
    padding-left: 0 !important;
    border-left: none !important;
    border-top: 1px solid #e8e6e0 !important;
    padding-top: 48px !important;
  }

  .career__steps::before {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .career__hero {
    padding: 120px 0 70px !important;
  }

  .career__headline {
    font-size: clamp(2.4rem, 10vw, 3.2rem) !important;
    letter-spacing: -0.5px !important;
  }

  .career__form-wrap {
    padding: 40px 24px !important;
  }

  .career__form-header .sec-title {
    font-size: 1.75rem !important;
  }

  .career__scroll-hint {
    display: none !important;
  }
}


/* ============================================================
   ABOUT PAGE STYLES
   ============================================================ */

/* ── Base ── */
.about-page {
  background: #0a0a0a !important;
  color: #fff !important;
  overflow-x: hidden !important;
}

.about__section-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(255, 215, 0, 0.12) !important;
  color: #FFD700 !important;
  border: 1px solid rgba(255, 215, 0, 0.3) !important;
  border-radius: 100px !important;
  padding: 6px 18px !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  margin-bottom: 20px !important;
}

.about__section-tag--light {
  background: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.75) !important;
  border-color: rgba(255,255,255,0.2) !important;
}


/* ── HERO ── */
.about__hero {
  position: relative !important;
  background: #000 !important;
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: 160px 0 100px !important;
}

.about__hero-noise {
  position: absolute !important;
  inset: 0 !important;
  background-image:
    radial-gradient(ellipse 80% 60% at 70% 40%, rgba(255,215,0,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 20% 80%, rgba(255,215,0,0.04) 0%, transparent 60%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.about__hero .container {
  position: relative !important;
  z-index: 2 !important;
}

.about__hero-inner {
  max-width: 880px !important;
}

.about__eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #FFD700 !important;
  color: #000 !important;
  border-radius: 100px !important;
  padding: 7px 20px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  margin-bottom: 30px !important;
}

.about__eyebrow-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #000 !important;
  display: inline-block !important;
  animation: pulse-dot 1.5s infinite !important;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.7); }
}

.about-page .about__headline {
  font-size: clamp(2.8rem, 6vw, 5.5rem) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  color: #fff !important;
  margin: 0 0 28px !important;
  letter-spacing: -0.02em !important;
}

.about-page .about__headline span {
  color: #FFD700 !important;
  font-style: italic !important;
}

.about__subline {
  font-size: clamp(1rem, 1.6vw, 1.2rem) !important;
  color: rgba(255,255,255,0.72) !important;
  line-height: 1.7 !important;
  max-width: 560px !important;
  margin: 0 0 50px !important;
}

.about__hero-scroll {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  color: rgba(255,255,255,0.35) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.about__scroll-line {
  width: 48px !important;
  height: 1px !important;
  background: linear-gradient(90deg, rgba(255,215,0,0.5), transparent) !important;
  position: relative !important;
  overflow: hidden !important;
}

.about__scroll-line::after {
  content: '' !important;
  position: absolute !important;
  left: -100% !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: #FFD700 !important;
  animation: scroll-slide 2s ease-in-out infinite !important;
}

@keyframes scroll-slide {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Marquee ticker at bottom of hero */
.about__hero-marquee {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: #FFD700 !important;
  padding: 10px 0 !important;
  overflow: hidden !important;
  z-index: 2 !important;
}

.about__hero-marquee-track {
  display: flex !important;
  white-space: nowrap !important;
  animation: marquee-scroll 30s linear infinite !important;
  color: #000 !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.about__hero-marquee-track span {
  padding-right: 0 !important;
  flex-shrink: 0 !important;
}

@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* ── OUR STORY ── */
.about__story {
  padding: 120px 0 !important;
  background: #0a0a0a !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
}

.about__story-grid {
  display: grid !important;
  grid-template-columns: 220px 1fr !important;
  gap: 80px !important;
  align-items: start !important;
}

.about__story-label {
  position: sticky !important;
  top: 120px !important;
}

.about__story-label span {
  display: inline-block !important;
  writing-mode: vertical-lr !important;
  text-orientation: mixed !important;
  transform: rotate(180deg) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.25) !important;
  border-left: 2px solid #FFD700 !important;
  padding-left: 14px !important;
}

.about__story-lead {
  font-size: clamp(1.1rem, 1.8vw, 1.4rem) !important;
  color: rgba(255,255,255,0.6) !important;
  line-height: 1.6 !important;
  margin-bottom: 48px !important;
  font-style: italic !important;
}

.about__story-date {
  margin-bottom: 48px !important;
}

.about__story-date-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: rgba(255,215,0,0.1) !important;
  border: 1px solid rgba(255,215,0,0.25) !important;
  color: #FFD700 !important;
  border-radius: 8px !important;
  padding: 10px 20px !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  margin-bottom: 20px !important;
}

.about__story-date p {
  color: rgba(255,255,255,0.65) !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

.about__story-quote {
  position: relative !important;
  display: flex !important;
  gap: 24px !important;
  background: rgba(255,215,0,0.04) !important;
  border-radius: 16px !important;
  padding: 36px !important;
  margin: 0 0 48px !important;
  border: 1px solid rgba(255,215,0,0.1) !important;
}

.about__story-quote-bar {
  flex-shrink: 0 !important;
  width: 4px !important;
  background: #FFD700 !important;
  border-radius: 4px !important;
}

.about__story-quote p {
  margin: 0 0 12px !important;
  color: rgba(255,255,255,0.55) !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
}

.about__story-quote-big {
  font-size: clamp(1.15rem, 2vw, 1.55rem) !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

.about__story-quote-big em {
  color: #FFD700 !important;
  font-style: normal !important;
}

.about__story-body {
  color: rgba(255,255,255,0.72) !important;
  font-size: 1.05rem !important;
  line-height: 1.75 !important;
  margin-bottom: 20px !important;
}

.about__story-body strong {
  color: #FFD700 !important;
  font-weight: 700 !important;
}


/* ── 7 Ps ── */
.about__7ps {
  padding: 120px 0 !important;
  background: #0d0d0d !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
}

.about__7ps-header {
  text-align: center !important;
  margin-bottom: 72px !important;
}

.about__7ps-title {
  font-size: clamp(2.2rem, 4.5vw, 3.8rem) !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: 1.1 !important;
  margin: 0 0 16px !important;
  letter-spacing: -0.02em !important;
}

.about__7ps-title span {
  color: #FFD700 !important;
}

.about__7ps-subtitle {
  color: rgba(255,255,255,0.5) !important;
  font-size: 1.05rem !important;
  margin: 0 !important;
}

.about__7ps-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
}

/* Last row: 3 cards spanning 4 cols — center them */
.about__7p-card:nth-child(5) { grid-column: 1 / 2 !important; }
.about__7p-card:nth-child(6) { grid-column: 2 / 3 !important; }
.about__7p-card:nth-child(7) { grid-column: 3 / 4 !important; }

.about__7p-card {
  background: #111 !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 20px !important;
  padding: 32px 28px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: border-color 0.3s, transform 0.3s, background 0.3s !important;
}

.about__7p-card:hover {
  border-color: rgba(255,215,0,0.35) !important;
  background: #161616 !important;
  transform: translateY(-4px) !important;
}

.about__7p-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, #FFD700, transparent) !important;
  opacity: 0 !important;
  transition: opacity 0.3s !important;
}

.about__7p-card:hover::before {
  opacity: 1 !important;
}

.about__7p-card-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 20px !important;
}

.about__7p-number {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.2) !important;
  letter-spacing: 0.1em !important;
}

.about__7p-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: rgba(255,215,0,0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #FFD700 !important;
  font-size: 1.1rem !important;
  transition: background 0.3s !important;
}

.about__7p-card:hover .about__7p-icon {
  background: rgba(255,215,0,0.2) !important;
}

.about__7p-title {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin: 0 0 10px !important;
  letter-spacing: -0.01em !important;
}

.about__7p-desc {
  font-size: 0.9rem !important;
  color: rgba(255,255,255,0.52) !important;
  line-height: 1.65 !important;
  margin: 0 0 20px !important;
}

.about__7p-bar {
  height: 3px !important;
  background: linear-gradient(90deg, #FFD700, rgba(255,215,0,0.2)) !important;
  border-radius: 2px !important;
  transform: scaleX(0.25) !important;
  transform-origin: left !important;
  transition: transform 0.4s ease !important;
}

.about__7p-card:hover .about__7p-bar {
  transform: scaleX(1) !important;
}


/* ── SWIPE RIGHT ── */
.about__swipe {
  padding: 120px 0 !important;
  background: #0a0a0a !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
}

.about__swipe-grid {
  display: grid !important;
  grid-template-columns: 1fr 1.4fr !important;
  gap: 80px !important;
  align-items: start !important;
  margin-bottom: 80px !important;
}

.about__swipe-title {
  font-size: clamp(2rem, 3.5vw, 3rem) !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
}

.about__swipe-title span {
  color: #FFD700 !important;
  display: block !important;
}

.about__swipe-right {
  display: flex !important;
  flex-direction: column !important;
  gap: 28px !important;
}

.about__swipe-block {
  padding: 28px 32px !important;
  background: #111 !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
}

.about__swipe-block p {
  color: rgba(255,255,255,0.68) !important;
  font-size: 1rem !important;
  line-height: 1.75 !important;
  margin: 0 0 12px !important;
}

.about__swipe-block p:last-child {
  margin: 0 !important;
}

.about__swipe-block strong {
  color: #fff !important;
  font-weight: 700 !important;
}

.about__swipe-block em {
  color: #FFD700 !important;
  font-style: italic !important;
}

.about__swipe-block--highlight {
  border-color: rgba(255,215,0,0.2) !important;
  background: rgba(255,215,0,0.04) !important;
  display: flex !important;
  gap: 20px !important;
  align-items: flex-start !important;
}

.about__swipe-icon {
  font-size: 1.3rem !important;
  color: #FFD700 !important;
  margin-top: 2px !important;
  flex-shrink: 0 !important;
}

/* Pillars row */
.about__pillars {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  margin-bottom: 60px !important;
}

.about__pillar {
  background: #111 !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 16px !important;
  padding: 28px 20px !important;
  text-align: center !important;
  transition: border-color 0.3s, transform 0.3s !important;
}

.about__pillar:hover {
  border-color: rgba(255,215,0,0.3) !important;
  transform: translateY(-3px) !important;
}

.about__pillar-icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  background: rgba(255,215,0,0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #FFD700 !important;
  font-size: 1.2rem !important;
  margin: 0 auto 14px !important;
}

.about__pillar span {
  display: block !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.8) !important;
  letter-spacing: 0.02em !important;
}

/* Promise */
.about__promise {
  background: rgba(255,215,0,0.05) !important;
  border: 1px solid rgba(255,215,0,0.15) !important;
  border-radius: 20px !important;
  padding: 48px !important;
  text-align: center !important;
}

.about__promise p {
  font-size: 1.05rem !important;
  color: rgba(255,255,255,0.6) !important;
  line-height: 1.75 !important;
  margin: 0 0 16px !important;
}

.about__promise-bold {
  font-size: clamp(1.1rem, 1.8vw, 1.35rem) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

.about__promise-bold span {
  color: #FFD700 !important;
}

.about__promise-disclaimer {
  font-size: 0.9rem !important;
  color: rgba(255,255,255,0.38) !important;
  font-style: italic !important;
  margin: 0 !important;
}

.about__promise-disclaimer em {
  color: rgba(255,215,0,0.6) !important;
  font-style: normal !important;
  font-weight: 700 !important;
}


/* ── VISION ── */
.about__vision {
  position: relative !important;
  padding: 140px 0 !important;
  background: #000 !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
  overflow: hidden !important;
}

.about__vision-bg {
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(255,215,0,0.06) 0%, transparent 70%) !important;
  pointer-events: none !important;
}

.about__vision-inner {
  position: relative !important;
  z-index: 2 !important;
  text-align: center !important;
  max-width: 820px !important;
  margin: 0 auto !important;
}

.about__vision-title {
  font-size: clamp(2rem, 4vw, 3.4rem) !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: 1.15 !important;
  margin: 0 0 24px !important;
  letter-spacing: -0.02em !important;
}

.about__vision-title span {
  color: #FFD700 !important;
}

.about__vision-body {
  font-size: 1.05rem !important;
  color: rgba(255,255,255,0.6) !important;
  line-height: 1.75 !important;
  margin: 0 0 56px !important;
}

.about__vision-cards {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 48px !important;
}

.about__vision-card {
  background: #111 !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 16px !important;
  padding: 24px 20px !important;
  text-align: center !important;
  transition: border-color 0.3s, transform 0.3s !important;
}

.about__vision-card:hover {
  border-color: rgba(255,215,0,0.3) !important;
  transform: translateY(-3px) !important;
}

.about__vision-star {
  color: #FFD700 !important;
  font-size: 0.9rem !important;
  display: block !important;
  margin-bottom: 12px !important;
}

.about__vision-card strong {
  display: block !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin-bottom: 6px !important;
}

.about__vision-card span {
  display: block !important;
  font-size: 0.78rem !important;
  color: rgba(255,255,255,0.42) !important;
  line-height: 1.5 !important;
}

.about__vision-tagline {
  font-size: 1rem !important;
  color: rgba(255,215,0,0.6) !important;
  font-style: italic !important;
  margin: 0 !important;
}


/* ── FOUNDERS ── */
.about__founders {
  padding: 120px 0 !important;
  background: #0d0d0d !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
}

.about__founders-header {
  text-align: center !important;
  margin-bottom: 72px !important;
}

.about__founders-title {
  font-size: clamp(2rem, 4vw, 3.2rem) !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 16px !important;
}

.about__founders-title span {
  color: #FFD700 !important;
}

.about__founders-sub {
  font-size: 1rem !important;
  color: rgba(255,255,255,0.55) !important;
  line-height: 1.7 !important;
  max-width: 580px !important;
  margin: 0 auto !important;
}

.about__founders-sub strong {
  color: #FFD700 !important;
  font-weight: 700 !important;
}

.about__founders-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 32px !important;
  max-width: 860px !important;
  margin: 0 auto !important;
}

.about__founder-card {
  background: #111 !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  transition: border-color 0.3s, transform 0.3s !important;
}

.about__founder-card:hover {
  border-color: rgba(255,215,0,0.3) !important;
  transform: translateY(-5px) !important;
}

.about__founder-photo {
  position: relative !important;
  background: linear-gradient(135deg, #1a1a1a, #222) !important;
  height: 280px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.about__founder-photo-placeholder {
  width: 90px !important;
  height: 90px !important;
  border-radius: 50% !important;
  background: rgba(255,215,0,0.1) !important;
  border: 2px solid rgba(255,215,0,0.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255,215,0,0.4) !important;
  font-size: 2rem !important;
}

.about__founder-photo img {
  width: 150px !important;
  height: 150px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center !important;
  border: 3px solid rgba(255,215,0,0.3) !important;
}

.about__founder-photo-img {
  width: 150px !important;
  height: 150px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center !important;
  border: 3px solid rgba(255,215,0,0.3) !important;
}

.about__founder-badge {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  background: #FFD700 !important;
  color: #000 !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-radius: 100px !important;
  padding: 5px 14px !important;
}

.about__founder-info {
  padding: 28px !important;
}

.about__founder-name {
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin: 0 0 4px !important;
}

.about__founder-role {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: #FFD700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin: 0 0 16px !important;
}

.about__founder-bio {
  font-size: 0.9rem !important;
  color: rgba(255,255,255,0.55) !important;
  line-height: 1.65 !important;
  margin: 0 0 20px !important;
}

.about__founder-socials {
  display: flex !important;
  gap: 10px !important;
}

.about__founder-socials a {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255,255,255,0.5) !important;
  font-size: 0.85rem !important;
  transition: background 0.3s, color 0.3s, border-color 0.3s !important;
  text-decoration: none !important;
}

.about__founder-socials a:hover {
  background: rgba(255,215,0,0.15) !important;
  color: #FFD700 !important;
  border-color: rgba(255,215,0,0.3) !important;
}


/* ── CTA ── */
.about__cta {
  padding: 140px 0 !important;
  background: #000 !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
}

.about__cta-inner {
  text-align: center !important;
  max-width: 700px !important;
  margin: 0 auto !important;
}

.about__cta-title {
  font-size: clamp(2.2rem, 5vw, 4rem) !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 20px !important;
}

.about__cta-title span {
  color: #FFD700 !important;
  font-style: italic !important;
}

.about__cta-body {
  font-size: 1.05rem !important;
  color: rgba(255,255,255,0.52) !important;
  line-height: 1.7 !important;
  margin: 0 0 40px !important;
}

.about__cta-btn {
  padding: 18px 42px !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  border-radius: 100px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}


/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .about__7ps-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .about__7p-card:nth-child(5),
  .about__7p-card:nth-child(6),
  .about__7p-card:nth-child(7) {
    grid-column: auto !important;
  }

  .about__vision-cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 900px) {
  .about__story-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  .about__story-label {
    position: static !important;
  }

  .about__story-label span {
    writing-mode: horizontal-tb !important;
    text-orientation: initial !important;
    transform: none !important;
    border-left: none !important;
    border-bottom: 2px solid #FFD700 !important;
    padding-left: 0 !important;
    padding-bottom: 10px !important;
  }

  .about__swipe-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

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

  .about__founders-grid {
    grid-template-columns: 1fr !important;
    max-width: 480px !important;
  }
}

@media (max-width: 768px) {
  .about__hero {
    padding: 130px 0 90px !important;
  }

  .about__headline {
    font-size: clamp(2.2rem, 7vw, 3rem) !important;
  }

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

  .about__vision-cards {
    grid-template-columns: 1fr 1fr !important;
  }

  .about__promise {
    padding: 32px 24px !important;
  }

  .about__story {
    padding: 80px 0 !important;
  }

  .about__7ps,
  .about__swipe,
  .about__vision,
  .about__founders,
  .about__cta {
    padding: 80px 0 !important;
  }
}

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

  .about__pillars {
    grid-template-columns: 1fr 1fr !important;
  }

  .about__vision-cards {
    grid-template-columns: 1fr !important;
  }

  .about__hero-scroll {
    display: none !important;
  }
}


/* ============================================================
   SERVICES PAGE STYLES
   ============================================================ */

/* ── Base ── */
.services-page {
  background: #0a0a0a !important;
  color: #fff !important;
  overflow-x: hidden !important;
}

.svc__section-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(255,215,0,0.12) !important;
  color: #FFD700 !important;
  border: 1px solid rgba(255,215,0,0.3) !important;
  border-radius: 100px !important;
  padding: 6px 18px !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  margin-bottom: 20px !important;
}


/* ── HERO ── */
.svc__hero {
  position: relative !important;
  background: #000 !important;
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: 160px 0 100px !important;
}

.svc__hero-noise {
  position: absolute !important;
  inset: 0 !important;
  background-image:
    radial-gradient(ellipse 70% 50% at 60% 40%, rgba(255,215,0,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 10% 70%, rgba(255,215,0,0.04) 0%, transparent 60%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.svc__hero .container {
  position: relative !important;
  z-index: 2 !important;
}

.svc__hero-inner {
  max-width: 820px !important;
}

.svc__eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #FFD700 !important;
  color: #000 !important;
  border-radius: 100px !important;
  padding: 7px 20px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  margin-bottom: 30px !important;
}

.svc__eyebrow-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #000 !important;
  display: inline-block !important;
  animation: pulse-dot 1.5s infinite !important;
}

.svc__headline {
  font-size: clamp(2.8rem, 6vw, 5.5rem) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  color: #fff !important;
  margin: 0 0 28px !important;
  letter-spacing: -0.02em !important;
}

.svc__headline span {
  color: #FFD700 !important;
  font-style: italic !important;
  display: block !important;
}

.svc__subline {
  font-size: clamp(1rem, 1.6vw, 1.15rem) !important;
  color: rgba(255,255,255,0.65) !important;
  line-height: 1.7 !important;
  max-width: 560px !important;
  margin: 0 0 48px !important;
}

/* Stats row */
.svc__hero-stats {
  display: flex !important;
  align-items: center !important;
  gap: 32px !important;
}

.svc__hero-stat strong {
  display: block !important;
  font-size: 2rem !important;
  font-weight: 800 !important;
  color: #FFD700 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
}

.svc__hero-stat span {
  display: block !important;
  font-size: 0.75rem !important;
  color: rgba(255,255,255,0.38) !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  margin-top: 4px !important;
}

.svc__hero-stat-divider {
  width: 1px !important;
  height: 40px !important;
  background: rgba(255,255,255,0.1) !important;
}

/* Marquee */
.svc__hero-marquee {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: #FFD700 !important;
  padding: 10px 0 !important;
  overflow: hidden !important;
  z-index: 2 !important;
}

.svc__hero-marquee-track {
  display: flex !important;
  white-space: nowrap !important;
  animation: marquee-scroll 40s linear infinite !important;
  color: #000 !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.svc__hero-marquee-track span {
  flex-shrink: 0 !important;
}


/* ── SERVICES LIST ── */
.svc__list {
  padding: 80px 0 !important;
  background: #0a0a0a !important;
}

.svc__item {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr 1.6fr !important;
  gap: 60px !important;
  align-items: start !important;
  padding: 60px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  overflow: hidden !important;
  cursor: default !important;
  transition: background 0.4s !important;
}

.svc__item:first-child {
  border-top: 1px solid rgba(255,255,255,0.07) !important;
}

.svc__item--open {
  background: rgba(255,255,255,0.02) !important;
}

/* Accent bottom bar */
.svc__item-bar {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  height: 2px !important;
  width: 0 !important;
  background: var(--svc-accent, #FFD700) !important;
  transition: width 0.5s ease !important;
}

.svc__item--open .svc__item-bar {
  width: 100% !important;
}

/* Watermark number */
.svc__item-watermark {
  position: absolute !important;
  right: -10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 9rem !important;
  font-weight: 900 !important;
  color: rgba(255,255,255,0.025) !important;
  line-height: 1 !important;
  pointer-events: none !important;
  letter-spacing: -0.04em !important;
  user-select: none !important;
  transition: color 0.4s !important;
}

.svc__item--open .svc__item-watermark {
  color: rgba(255,255,255,0.04) !important;
}

/* Left column */
.svc__item-left {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  position: sticky !important;
  top: 120px !important;
}

.svc__item-icon {
  width: 60px !important;
  height: 60px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.3rem !important;
  color: var(--svc-accent, #FFD700) !important;
  transition: background 0.3s, border-color 0.3s !important;
}

.svc__item--open .svc__item-icon {
  background: rgba(255,255,255,0.08) !important;
  border-color: var(--svc-accent, #FFD700) !important;
}

.svc__item-tag {
  display: block !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--svc-accent, #FFD700) !important;
  margin-bottom: 6px !important;
}

.svc__item-title {
  font-size: clamp(1.5rem, 2.5vw, 2.1rem) !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
  transition: color 0.3s !important;
}

/* Right column */
.svc__item-right {
  padding-top: 4px !important;
}

.svc__item-tagline {
  font-size: clamp(1rem, 1.6vw, 1.2rem) !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.85) !important;
  line-height: 1.55 !important;
  font-style: italic !important;
  margin: 0 0 20px !important;
  border-left: 3px solid var(--svc-accent, #FFD700) !important;
  padding-left: 20px !important;
}

.svc__item-body {
  font-size: 1rem !important;
  color: rgba(255,255,255,0.55) !important;
  line-height: 1.8 !important;
  margin: 0 0 28px !important;
}

.svc__item-highlights {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.svc__item-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 100px !important;
  padding: 6px 16px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.65) !important;
  transition: background 0.3s, border-color 0.3s, color 0.3s !important;
}

.svc__item--open .svc__item-pill {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.18) !important;
  color: rgba(255,255,255,0.85) !important;
}


/* ── PROCESS ── */
.svc__process {
  padding: 120px 0 !important;
  background: #0d0d0d !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
}

.svc__process-header {
  text-align: center !important;
  margin-bottom: 72px !important;
}

.svc__process-title {
  font-size: clamp(2rem, 4vw, 3.2rem) !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
}

.svc__process-title span {
  color: #FFD700 !important;
  font-style: italic !important;
}

.svc__process-steps {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  position: relative !important;
}

/* Connector line between steps */
.svc__process-steps::before {
  content: '' !important;
  position: absolute !important;
  top: 26px !important;
  left: calc(12.5% + 26px) !important;
  right: calc(12.5% + 26px) !important;
  height: 1px !important;
  background: linear-gradient(90deg, rgba(255,215,0,0.4), rgba(255,215,0,0.15), rgba(255,215,0,0.4)) !important;
  z-index: 0 !important;
}

.svc__process-step {
  position: relative !important;
  z-index: 1 !important;
  background: #111 !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 20px !important;
  padding: 32px 28px !important;
  transition: border-color 0.3s, transform 0.3s !important;
}

.svc__process-step:hover {
  border-color: rgba(255,215,0,0.3) !important;
  transform: translateY(-4px) !important;
}

.svc__process-step-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 20px !important;
}

.svc__process-num {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.2) !important;
  letter-spacing: 0.1em !important;
}

.svc__process-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  background: rgba(255,215,0,0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #FFD700 !important;
  font-size: 1.1rem !important;
}

.svc__process-step-title {
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin: 0 0 10px !important;
}

.svc__process-step-desc {
  font-size: 0.88rem !important;
  color: rgba(255,255,255,0.48) !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}


/* ── CTA ── */
.svc__cta {
  padding: 140px 0 !important;
  background: #000 !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
}

.svc__cta-inner {
  text-align: center !important;
  max-width: 680px !important;
  margin: 0 auto !important;
}

.svc__cta-title {
  font-size: clamp(2.2rem, 5vw, 4rem) !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 20px !important;
}

.svc__cta-title span {
  color: #FFD700 !important;
  font-style: italic !important;
}

.svc__cta-body {
  font-size: 1.05rem !important;
  color: rgba(255,255,255,0.52) !important;
  line-height: 1.7 !important;
  margin: 0 0 40px !important;
}

.svc__cta-btn {
  padding: 18px 42px !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  border-radius: 100px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}


/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .svc__item {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .svc__item-left {
    position: static !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
  }

  .svc__item-watermark {
    font-size: 6rem !important;
  }

  .svc__process-steps {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .svc__process-steps::before {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .svc__hero {
    padding: 130px 0 90px !important;
    min-height: auto !important;
  }

  .svc__hero-stats {
    flex-wrap: wrap !important;
    gap: 20px !important;
  }

  .svc__item {
    padding: 40px 0 !important;
  }

  .svc__item-tagline {
    font-size: 1rem !important;
  }

  .svc__list {
    padding: 60px 0 !important;
  }

  .svc__process,
  .svc__cta {
    padding: 80px 0 !important;
  }
}

@media (max-width: 540px) {
  .svc__process-steps {
    grid-template-columns: 1fr !important;
  }

  .svc__hero-stat-divider {
    display: none !important;
  }

  .svc__hero-stats {
    gap: 16px !important;
  }
  
  .svc__item-highlights {
    gap: 8px !important;
  }
}


/* ============================================================
   CONTACT PAGE STYLES
   ============================================================ */

/* ── Base ── */
.contact-page {
  background: #0a0a0a !important;
  color: #fff !important;
  overflow-x: hidden !important;
}


/* ── HERO ── */
.ct__hero {
  position: relative !important;
  background: #000 !important;
  min-height: 70vh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: 160px 0 100px !important;
}

.ct__hero-noise {
  position: absolute !important;
  inset: 0 !important;
  background-image:
    radial-gradient(ellipse 60% 55% at 50% 50%, rgba(255,215,0,0.07) 0%, transparent 65%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.ct__hero .container {
  position: relative !important;
  z-index: 2 !important;
}

.ct__hero-inner {
  max-width: 780px !important;
  text-align: center !important;
  margin: 0 auto !important;
}

.ct__eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #FFD700 !important;
  color: #000 !important;
  border-radius: 100px !important;
  padding: 7px 20px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  margin-bottom: 30px !important;
}

.ct__eyebrow-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #000 !important;
  display: inline-block !important;
  animation: pulse-dot 1.5s infinite !important;
}

.ct__headline {
  font-size: clamp(2.8rem, 6vw, 5rem) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  color: #fff !important;
  margin: 0 0 24px !important;
  letter-spacing: -0.02em !important;
}

.ct__headline span {
  color: #FFD700 !important;
  font-style: italic !important;
  display: block !important;
}

.ct__subline {
  font-size: clamp(1rem, 1.5vw, 1.15rem) !important;
  color: rgba(255,255,255,0.58) !important;
  line-height: 1.7 !important;
  max-width: 540px !important;
  margin: 0 auto !important;
}

.ct__hero-marquee {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: #FFD700 !important;
  padding: 10px 0 !important;
  overflow: hidden !important;
  z-index: 2 !important;
}

.ct__hero-marquee-track {
  display: flex !important;
  white-space: nowrap !important;
  animation: marquee-scroll 35s linear infinite !important;
  color: #000 !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.ct__hero-marquee-track span {
  flex-shrink: 0 !important;
}


/* ── MAIN GRID ── */
.ct__main {
  padding: 100px 0 !important;
  background: #0a0a0a !important;
}

.ct__grid {
  display: grid !important;
  grid-template-columns: 1fr 1.35fr !important;
  gap: 64px !important;
  align-items: start !important;
}


/* ── LEFT SIDE ── */
.ct__info-cards {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  margin-bottom: 40px !important;
}

.ct__info-card {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  background: #111 !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 16px !important;
  padding: 20px 24px !important;
  transition: border-color 0.3s !important;
}

.ct__info-card:hover {
  border-color: rgba(255,215,0,0.25) !important;
}

.ct__info-icon {
  width: 46px !important;
  height: 46px !important;
  border-radius: 12px !important;
  background: rgba(255,215,0,0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #FFD700 !important;
  font-size: 1rem !important;
  flex-shrink: 0 !important;
}

.ct__info-label {
  display: block !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.35) !important;
  margin-bottom: 4px !important;
}

.ct__info-value {
  display: block !important;
  font-size: 0.98rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}

a.ct__info-value:hover {
  color: #FFD700 !important;
}

/* Social links */
.ct__social-block {
  margin-bottom: 40px !important;
}

.ct__social-label {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.3) !important;
  margin-bottom: 14px !important;
}

.ct__social-links {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.ct__social-link {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 18px !important;
  background: #111 !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 12px !important;
  color: rgba(255,255,255,0.55) !important;
  text-decoration: none !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  transition: background 0.25s, border-color 0.25s, color 0.25s !important;
}

.ct__social-link i {
  font-size: 1rem !important;
  width: 20px !important;
  text-align: center !important;
  color: rgba(255,255,255,0.3) !important;
  transition: color 0.25s !important;
}

.ct__social-link:hover {
  background: rgba(255,215,0,0.07) !important;
  border-color: rgba(255,215,0,0.25) !important;
  color: #fff !important;
}

.ct__social-link:hover i {
  color: #FFD700 !important;
}

/* FAQ */
.ct__faq-title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.45) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin: 0 0 16px !important;
}

.ct__faq-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.ct__faq-item {
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #111 !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  transition: border-color 0.3s !important;
}

.ct__faq-item--open {
  border-color: rgba(255,215,0,0.2) !important;
}

.ct__faq-q {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px 20px !important;
  background: transparent !important;
  border: none !important;
  color: rgba(255,255,255,0.75) !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: color 0.2s !important;
}

.ct__faq-q:hover {
  color: #fff !important;
}

.ct__faq-item--open .ct__faq-q {
  color: #FFD700 !important;
}

.ct__faq-q i {
  font-size: 0.75rem !important;
  flex-shrink: 0 !important;
  color: rgba(255,255,255,0.3) !important;
}

.ct__faq-item--open .ct__faq-q i {
  color: #FFD700 !important;
}

.ct__faq-a {
  padding: 0 20px 16px !important;
}

.ct__faq-a p {
  font-size: 0.85rem !important;
  color: rgba(255,255,255,0.48) !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}


/* ── RIGHT: FORM CARD ── */
.ct__form-card {
  background: #111 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 28px !important;
  padding: 48px !important;
  position: sticky !important;
  top: 100px !important;
}

.ct__form-header {
  margin-bottom: 32px !important;
}

.ct__form-title {
  font-size: clamp(1.6rem, 2.5vw, 2.1rem) !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 10px !important;
}

.ct__form-title span {
  color: #FFD700 !important;
  font-style: italic !important;
}

.ct__form-sub {
  font-size: 0.9rem !important;
  color: rgba(255,255,255,0.42) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* Alert */
.ct__alert {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 14px 18px !important;
  border-radius: 12px !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  margin-bottom: 24px !important;
}

.ct__alert i {
  font-size: 1rem !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
}

.ct__alert--success {
  background: rgba(52,211,153,0.1) !important;
  border: 1px solid rgba(52,211,153,0.25) !important;
  color: #34D399 !important;
}

.ct__alert--error {
  background: rgba(239,68,68,0.1) !important;
  border: 1px solid rgba(239,68,68,0.25) !important;
  color: #f87171 !important;
}

/* Profile toggle */
.ct__profile-toggle {
  display: flex !important;
  gap: 12px !important;
}

.ct__profile-btn {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 20px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background: transparent !important;
  color: rgba(255,255,255,0.5) !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background 0.25s, border-color 0.25s, color 0.25s !important;
}

.ct__profile-btn:hover {
  border-color: rgba(255,215,0,0.3) !important;
  color: rgba(255,255,255,0.8) !important;
}

.ct__profile-btn--active {
  background: rgba(255,215,0,0.12) !important;
  border-color: #FFD700 !important;
  color: #FFD700 !important;
}

/* Form groups */
.ct__form-group {
  margin-bottom: 20px !important;
}

.ct__form-fieldset {
  border: none !important;
  padding: 0 !important;
  margin: 0 0 20px !important;
  min-width: 0 !important;
}

.ct__form-label {
  display: block !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.5) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}

.ct__form-label span {
  color: #FFD700 !important;
}

.ct__input {
  width: 100% !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  color: #fff !important;
  font-size: 0.95rem !important;
  font-family: inherit !important;
  outline: none !important;
  transition: border-color 0.25s, background 0.25s !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.ct__input::placeholder {
  color: rgba(255,255,255,0.22) !important;
}

.ct__input:focus {
  border-color: rgba(255,215,0,0.5) !important;
  background: rgba(255,215,0,0.03) !important;
}

.ct__textarea {
  resize: vertical !important;
  min-height: 130px !important;
}

/* Submit button */
.ct__submit-btn {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 16px 32px !important;
  background: #FFD700 !important;
  color: #000 !important;
  border: none !important;
  border-radius: 14px !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  letter-spacing: 0.05em !important;
  cursor: pointer !important;
  transition: background 0.25s, transform 0.2s, box-shadow 0.25s !important;
  margin-bottom: 16px !important;
}

.ct__submit-btn:hover:not(:disabled) {
  background: #f5cb00 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(255,215,0,0.25) !important;
}

.ct__submit-btn:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

.ct__form-note {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 0.75rem !important;
  color: rgba(255,255,255,0.25) !important;
  justify-content: center !important;
  margin: 0 !important;
}

.ct__form-note i {
  color: rgba(255,215,0,0.4) !important;
  font-size: 0.7rem !important;
}


/* ── VIBES STRIP ── */
.ct__vibes {
  padding: 80px 0 !important;
  background: #0d0d0d !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
}

.ct__vibes-inner {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
}

.ct__vibe {
  background: #111 !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 20px !important;
  padding: 28px 24px !important;
  text-align: center !important;
  transition: border-color 0.3s, transform 0.3s !important;
}

.ct__vibe:hover {
  border-color: rgba(255,215,0,0.25) !important;
  transform: translateY(-3px) !important;
}

.ct__vibe-icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  background: rgba(255,215,0,0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #FFD700 !important;
  font-size: 1.1rem !important;
  margin: 0 auto 14px !important;
}

.ct__vibe strong {
  display: block !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin-bottom: 4px !important;
}

.ct__vibe span {
  display: block !important;
  font-size: 0.78rem !important;
  color: rgba(255,255,255,0.38) !important;
  line-height: 1.5 !important;
}


/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .ct__grid {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }

  .ct__form-card {
    position: static !important;
  }

  .ct__vibes-inner {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .ct__hero {
    padding: 130px 0 90px !important;
    min-height: auto !important;
  }

  .ct__form-card {
    padding: 32px 24px !important;
  }

  .ct__main {
    padding: 70px 0 !important;
  }

  .ct__vibes {
    padding: 60px 0 !important;
  }
}

@media (max-width: 480px) {
  .ct__vibes-inner {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  .ct__profile-toggle {
    flex-direction: column !important;
  }
}