/* ===== Codexure Custom Enhancements ===== */

/* --- Preloader: Slow logo orbital animation only --- */
.dsnload .dsnload__img {
  animation-duration: 5s !important;
}

/* --- Keyframe Animations --- */
@keyframes iconFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes iconGlow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(212,190,131,0.5)); }
  50% { filter: drop-shadow(0 0 18px rgba(212,190,131,1)) brightness(1.3); }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,190,131,0.5), 0 0 15px rgba(212,190,131,0.1); }
  50% { box-shadow: 0 0 0 8px rgba(212,190,131,0), 0 0 30px rgba(212,190,131,0.25); }
}

@keyframes shimmerText {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes borderPulse {
  0%, 100% { border-color: rgba(212,190,131,0.3); }
  50% { border-color: rgba(212,190,131,0.9); }
}

@keyframes whatsappBounce {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37,211,102,0.5); }
  50% { transform: scale(1.06); }
  70% { box-shadow: 0 0 0 16px rgba(37,211,102,0); }
}

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes countUp {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

/* --- Service Icon Animations --- */
.service-item .dsn-icon img {
  animation: iconFloat 3.5s ease-in-out infinite, iconGlow 3.5s ease-in-out infinite;
  transition: transform 0.4s cubic-bezier(0.175,0.885,0.32,1.275);
}
.service-item:hover .dsn-icon img {
  animation: none;
  transform: scale(1.2) rotate(5deg);
  filter: drop-shadow(0 0 22px rgba(212,190,131,1)) brightness(1.4);
}

/* --- Service Card Hover --- */
.service-item-inner.border-style {
  transition: box-shadow 0.4s ease, transform 0.35s ease, border-color 0.4s ease;
  position: relative;
  overflow: hidden;
}
.service-item-inner.border-style::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(212,190,131,0.06) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.service-item:hover .service-item-inner.border-style {
  box-shadow: 0 8px 40px rgba(212,190,131,0.2), 0 0 0 1px rgba(212,190,131,0.4);
  transform: translateY(-8px);
}
.service-item:hover .service-item-inner.border-style::before {
  opacity: 1;
}

/* --- Accordion Icon Animation --- */
.accordion__item .dsn-icon svg {
  transition: transform 0.3s ease, filter 0.3s ease;
}
.accordion__item.active .dsn-icon svg,
.accordion__item:hover .dsn-icon svg {
  filter: drop-shadow(0 0 8px rgba(212,190,131,0.8));
  transform: scale(1.1);
}

/* --- Contact Info Icons --- */
.box-info .dsn-icon i {
  transition: all 0.35s ease;
  display: inline-block;
}
.box-info .service-item:hover .dsn-icon i {
  color: #d4be83;
  text-shadow: 0 0 20px #d4be83, 0 0 40px rgba(212,190,131,0.5);
  transform: scale(1.25) rotate(-5deg);
}

/* --- Social Icons --- */
.social-side .socials li a {
  transition: all 0.3s ease;
}
.social-side .socials li a:hover i {
  text-shadow: 0 0 15px currentColor;
  transform: scale(1.2);
}
.dsn-socials li a {
  transition: all 0.35s ease !important;
}
.dsn-socials li a:hover {
  animation: pulseGlow 0.8s ease-out;
}

/* --- Heading Glow --- */
.footer-content .title-h2 {
  text-shadow: 0 0 40px rgba(212,190,131,0.3);
}

/* --- CTA Button Pulse --- */
.dsn-def-btn .dsn-btn {
  transition: all 0.35s ease;
}
.dsn-def-btn .dsn-btn:hover {
  box-shadow: 0 0 25px rgba(212,190,131,0.35);
}

/* --- Floating WhatsApp Button — Gold theme --- */
@keyframes waPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(212,190,131,0.5), 0 4px 20px rgba(212,190,131,0.2); }
  50%      { box-shadow: 0 0 0 10px rgba(212,190,131,0), 0 4px 24px rgba(212,190,131,0.3); }
}
.whatsapp-float {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 9999;
  width: 58px;
  height: 58px;
  background: #0a0a0a;
  border: 1.5px solid rgba(212,190,131,0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  animation: waPulse 2.5s ease infinite;
  transition: all 0.3s ease;
}
.whatsapp-float i {
  color: #d4be83;
  font-size: 26px;
  line-height: 1;
}
.whatsapp-float:hover {
  background: #d4be83;
  border-color: #d4be83;
  animation: none;
  transform: scale(1.1);
  box-shadow: 0 6px 30px rgba(212,190,131,0.4);
}
.whatsapp-float:hover i { color: #000; }
.whatsapp-tooltip {
  position: fixed;
  bottom: 44px;
  right: 104px;
  z-index: 9998;
  background: #075E54;
  color: #fff;
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 13px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateX(8px);
  font-family: inherit;
  letter-spacing: 0.3px;
}
.whatsapp-tooltip::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-left-color: #075E54;
  border-right: 0;
}
.whatsapp-float:hover ~ .whatsapp-tooltip {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* --- Projects Showcase Section (index.html) --- */
.projects-teaser {
  padding: 80px 0;
}
.projects-teaser .project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 50px;
}
.project-card-placeholder {
  position: relative;
  border: 1px solid rgba(212,190,131,0.2);
  border-radius: 4px;
  padding: 50px 30px;
  text-align: center;
  background: rgba(255,255,255,0.02);
  transition: all 0.4s ease;
  overflow: hidden;
  cursor: pointer;
  animation: borderPulse 3s ease infinite;
}
.project-card-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(212,190,131,0.07) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.project-card-placeholder:hover {
  border-color: rgba(212,190,131,0.8);
  transform: translateY(-10px);
  box-shadow: 0 20px 60px rgba(212,190,131,0.15), 0 0 0 1px rgba(212,190,131,0.5);
}
.project-card-placeholder:hover::before {
  opacity: 1;
}
.project-card-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, rgba(212,190,131,0.25), rgba(212,190,131,0.05));
  border: 1px solid rgba(212,190,131,0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  font-size: 32px;
  color: #d4be83;
  transition: all 0.4s ease;
}
.project-card-placeholder:hover .project-card-icon {
  animation: iconGlow 1.5s ease infinite;
  background: linear-gradient(135deg, rgba(212,190,131,0.4), rgba(212,190,131,0.1));
}
.project-card-placeholder h4 {
  margin-bottom: 12px;
  font-size: 1rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.project-card-placeholder p {
  font-size: 0.875rem;
  opacity: 0.65;
  line-height: 1.7;
}
.coming-soon-badge {
  display: inline-block;
  margin-top: 20px;
  padding: 5px 14px;
  border: 1px solid rgba(212,190,131,0.5);
  border-radius: 20px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #d4be83;
  opacity: 0.8;
}

/* --- Stats Bar --- */
.stats-bar {
  border-top: 1px solid rgba(255,255,255,0.07);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  padding: 50px 0;
}
.stats-bar .stat-item {
  text-align: center;
  padding: 20px;
}
.stats-bar .stat-number {
  display: block;
  font-size: 2.8rem;
  font-weight: 700;
  color: #d4be83;
  line-height: 1;
  animation: countUp 0.6s ease forwards;
}
.stats-bar .stat-label {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  opacity: 0.6;
  margin-top: 10px;
}

/* --- Projects Page Grid --- */
.projects-page-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 60px;
}
.projects-page-card {
  border: 1px solid rgba(212,190,131,0.2);
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255,255,255,0.02);
  transition: all 0.4s ease;
  position: relative;
}
.projects-page-card:hover {
  border-color: rgba(212,190,131,0.7);
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(212,190,131,0.15);
}
.projects-page-card .card-img-area {
  height: 220px;
  background: linear-gradient(135deg, rgba(212,190,131,0.1) 0%, rgba(0,0,0,0.3) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  color: rgba(212,190,131,0.4);
  border-bottom: 1px solid rgba(212,190,131,0.15);
  transition: all 0.4s ease;
}
.projects-page-card:hover .card-img-area {
  color: rgba(212,190,131,0.8);
  background: linear-gradient(135deg, rgba(212,190,131,0.15) 0%, rgba(0,0,0,0.2) 100%);
}
.projects-page-card .card-body {
  padding: 30px;
}
.projects-page-card .card-category {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #d4be83;
  margin-bottom: 10px;
  display: block;
}
.projects-page-card .card-title {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}
.projects-page-card .card-desc {
  font-size: 0.875rem;
  opacity: 0.65;
  line-height: 1.7;
}
.projects-page-card .card-tag {
  display: inline-block;
  margin-top: 16px;
  padding: 4px 12px;
  border: 1px solid rgba(212,190,131,0.35);
  border-radius: 20px;
  font-size: 11px;
  letter-spacing: 1px;
  color: #d4be83;
  opacity: 0.7;
}

/* --- Responsive --- */
@media (max-width: 992px) {
  .projects-teaser .project-grid,
  .projects-page-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .projects-teaser .project-grid,
  .projects-page-grid {
    grid-template-columns: 1fr;
  }
  .whatsapp-float {
    bottom: 20px;
    right: 20px;
    width: 54px;
    height: 54px;
  }
  .whatsapp-float i {
    font-size: 25px;
  }
  .whatsapp-tooltip {
    display: none;
  }
  .stats-bar .stat-number {
    font-size: 2rem;
  }
}


/* ===================================================================
   SERVICES SECTION — Framer Motion Style (Dark Glassmorphism)
   =================================================================== */

/* --- Section Shell --- */
.cx-services-section {
  position: relative;
  padding: 100px 0 120px;
  overflow: hidden;
}

.cx-services-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% -5%, rgba(212,190,131,0.07) 0%, transparent 65%),
    repeating-linear-gradient(0deg,   transparent, transparent 59px, rgba(255,255,255,0.018) 59px, rgba(255,255,255,0.018) 60px),
    repeating-linear-gradient(90deg,  transparent, transparent 59px, rgba(255,255,255,0.018) 59px, rgba(255,255,255,0.018) 60px);
  pointer-events: none;
  z-index: 0;
}

.cx-services-inner {
  position: relative;
  z-index: 1;
}

/* --- Header Row --- */
.cx-services-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 64px;
}

.cx-label {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #d4be83;
  padding: 5px 14px;
  border: 1px solid rgba(212,190,131,0.35);
  border-radius: 20px;
  margin-bottom: 18px;
}

.cx-heading {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.15;
  margin: 0;
}

.cx-heading span { color: #d4be83; }

.cx-view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #d4be83;
  text-decoration: none;
  border: 1px solid rgba(212,190,131,0.4);
  padding: 12px 22px;
  border-radius: 4px;
  white-space: nowrap;
  cursor: pointer;
  align-self: flex-end;
  transition: background 0.3s ease, border-color 0.3s ease, gap 0.3s ease;
}
.cx-view-all:hover {
  background: rgba(212,190,131,0.1);
  border-color: rgba(212,190,131,0.75);
  gap: 14px;
  color: #d4be83;
}
.cx-view-all svg { transition: transform 0.3s ease; }
.cx-view-all:hover svg { transform: translateX(5px); }

/* --- Grid --- */
.cx-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

/* ---- Card ---- */
.cx-card {
  position: relative;
  border-radius: 18px;
  cursor: pointer;
  /* stagger enter state */
  opacity: 0;
  transform: translateY(48px);
  transition:
    opacity  0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.cx-card.cx-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Rotating gradient border */
@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes borderSpin {
  to { --border-angle: 360deg; }
}

.cx-card-border {
  position: absolute;
  inset: -1px;
  border-radius: 19px;
  background: conic-gradient(
    from var(--border-angle),
    transparent 0%,
    rgba(212,190,131,0.9) 18%,
    rgba(212,190,131,0.3) 30%,
    transparent 45%
  );
  opacity: 0;
  z-index: 0;
  transition: opacity 0.4s ease;
  animation: borderSpin 3.5s linear infinite paused;
}

.cx-card:hover .cx-card-border,
.cx-card:focus-visible .cx-card-border {
  opacity: 1;
  animation-play-state: running;
}

/* Glass card body */
.cx-card-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: 42px 36px 40px;
  border-radius: 18px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  will-change: transform;
}

.cx-card:hover .cx-card-inner,
.cx-card:focus-visible .cx-card-inner {
  background: rgba(212,190,131,0.035);
  border-color: rgba(212,190,131,0.22);
}

/* Shimmer sweep on hover */
.cx-card-inner::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 55%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(212,190,131,0.07) 45%,
    rgba(212,190,131,0.12) 50%,
    rgba(212,190,131,0.07) 55%,
    transparent 100%
  );
  transform: skewX(-15deg);
  pointer-events: none;
}

.cx-card:hover .cx-card-inner::after {
  animation: cxShimmer 0.75s ease forwards;
}

@keyframes cxShimmer {
  0%   { left: -120%; }
  100% { left: 150%; }
}

/* --- Icon Block --- */
.cx-card-icon {
  position: relative;
  width: 68px;
  height: 68px;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cx-card-icon svg {
  width: 46px;
  height: 46px;
  color: #d4be83;
  position: relative;
  z-index: 1;
  transition: transform 0.4s cubic-bezier(0.175,0.885,0.32,1.275), filter 0.4s ease;
}

.cx-card:hover .cx-card-icon svg {
  transform: scale(1.18) translateY(-4px);
  filter: drop-shadow(0 0 14px rgba(212,190,131,0.95));
}

/* Icon radial glow */
.cx-icon-glow {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,190,131,0.22) 0%, transparent 70%);
  opacity: 0;
  animation: cxIconPulse 2.4s ease-in-out infinite;
  animation-play-state: paused;
  transition: opacity 0.35s ease;
}

.cx-card:hover .cx-icon-glow {
  opacity: 1;
  animation-play-state: running;
}

@keyframes cxIconPulse {
  0%, 100% { transform: scale(0.9); opacity: 0.7; }
  50%       { transform: scale(1.35); opacity: 0.15; }
}

/* --- Card Number --- */
.cx-card-number {
  position: absolute;
  top: 38px;
  right: 36px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(212,190,131,0.25);
  transition: color 0.35s ease;
  font-variant-numeric: tabular-nums;
}

.cx-card:hover .cx-card-number { color: rgba(212,190,131,0.65); }

/* --- Title --- */
.cx-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #ffffff;
  line-height: 1.35;
  margin: 0 0 14px;
  transition: color 0.3s ease;
}

.cx-card:hover .cx-card-title { color: #d4be83; }

/* Animated underline */
.cx-card-title::after {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  background: linear-gradient(90deg, #d4be83 0%, transparent 100%);
  margin-top: 12px;
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: 2px;
}
.cx-card:hover .cx-card-title::after { width: 58px; }

/* --- Description --- */
.cx-card-desc {
  font-size: 0.875rem;
  line-height: 1.78;
  color: rgba(255,255,255,0.5);
  margin: 0 0 28px;
  transition: color 0.3s ease;
}

.cx-card:hover .cx-card-desc { color: rgba(255,255,255,0.75); }

/* --- Learn More Link --- */
.cx-card-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #d4be83;
  text-decoration: none;
  opacity: 0.65;
  transition: opacity 0.3s ease, gap 0.3s ease;
}

.cx-card-link svg { transition: transform 0.3s ease; }

.cx-card:hover .cx-card-link { opacity: 1; gap: 12px; }
.cx-card:hover .cx-card-link svg { transform: translateX(5px); }

/* Focus visible ring for accessibility */
.cx-card:focus-visible {
  outline: 2px solid rgba(212,190,131,0.7);
  outline-offset: 3px;
  border-radius: 18px;
}

/* --- Tag Badge --- */
.cx-card-tag {
  position: absolute;
  bottom: 28px;
  right: 28px;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(212,190,131,0.35);
  border: 1px solid rgba(212,190,131,0.14);
  padding: 4px 10px;
  border-radius: 20px;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.cx-card:hover .cx-card-tag {
  color: rgba(212,190,131,0.8);
  border-color: rgba(212,190,131,0.4);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .cx-cards-grid { grid-template-columns: repeat(2, 1fr); }
  .cx-cards-grid .cx-card:last-child {
    grid-column: 1 / -1;
    max-width: 420px;
    width: 100%;
    margin-inline: auto;
  }
}

@media (max-width: 640px) {
  .cx-services-section { padding: 70px 0 80px; }
  .cx-cards-grid { grid-template-columns: 1fr; }
  .cx-cards-grid .cx-card:last-child { grid-column: auto; max-width: none; }
  .cx-services-header { flex-direction: column; align-items: flex-start; }
  .cx-card-inner { padding: 32px 26px 38px; }
  .cx-card-number { top: 28px; right: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .cx-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .cx-card-border,
  .cx-icon-glow,
  .cx-card-inner::after { animation: none !important; }
}


/* ===================================================================
   PROJECTS MARQUEE STRIP
   =================================================================== */

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

.cx-projects-strip {
  overflow: hidden;
  border-top: 1px solid rgba(212,190,131,0.15);
  border-bottom: 1px solid rgba(212,190,131,0.15);
  background: rgba(212,190,131,0.03);
  cursor: pointer;
  transition: background 0.3s ease;
}

.cx-projects-strip:hover {
  background: rgba(212,190,131,0.07);
}

.cx-strip-inner {
  display: block;
  text-decoration: none;
  padding: 20px 0;
  overflow: hidden;
}

.cx-strip-track {
  display: flex;
  width: max-content;
  animation: cxMarquee 18s linear infinite;
}

.cx-projects-strip:hover .cx-strip-track {
  animation-play-state: paused;
}

.cx-strip-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 40px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #d4be83;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.cx-strip-item svg {
  flex-shrink: 0;
  transition: transform 0.3s ease;
  opacity: 0.7;
}

.cx-projects-strip:hover .cx-strip-item svg {
  transform: translateX(4px);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .cx-strip-track { animation: none; }
  .cx-strip-item:not(:first-child) { display: none; }
}


/* ===================================================================
   GLOBAL SECTION THEME
   =================================================================== */
.cx-section-bg {
  position: relative;
  overflow: hidden;
}
.cx-section-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% -5%, rgba(212,190,131,0.07) 0%, transparent 65%),
    repeating-linear-gradient(0deg,  transparent, transparent 59px, rgba(255,255,255,0.018) 59px, rgba(255,255,255,0.018) 60px),
    repeating-linear-gradient(90deg, transparent, transparent 59px, rgba(255,255,255,0.018) 59px, rgba(255,255,255,0.018) 60px);
  pointer-events: none; z-index: 0;
}
.cx-section-bg > * { position: relative; z-index: 1; }

/* --- Generic glass card (reuse on any section) --- */
.cx-glass-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 16px;
  transition: all 0.4s ease;
}
.cx-glass-card.cx-visible {
  opacity: 1; transform: translateY(0);
}
.cx-glass-card:hover {
  border-color: rgba(212,190,131,0.28);
  box-shadow: 0 20px 50px rgba(212,190,131,0.13);
  transform: translateY(-7px);
}

/* ===================================================================
   INDEX – ABOUT (WHO WE ARE) SECTION
   =================================================================== */
.cx-about-section { padding: 100px 0; }

.cx-about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

/* Accordion items styled as glass cards */
.cx-about-section .accordion__item {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07) !important;
  backdrop-filter: blur(12px);
  border-radius: 14px;
  margin-bottom: 14px;
  padding: 4px 0;
  transition: all 0.35s ease;
  /* opacity/transform removed — DSN AJAX would leave hidden */
}
.cx-about-section .accordion__item.cx-visible {
  opacity: 1; transform: translateY(0);
}
.cx-about-section .accordion__item:hover,
.cx-about-section .accordion__item.active {
  border-color: rgba(212,190,131,0.35) !important;
  background: rgba(212,190,131,0.05);
  box-shadow: 0 8px 30px rgba(212,190,131,0.1);
}
.cx-about-section .accordion__question {
  padding: 18px 24px;
}
.cx-about-section .accordion__answer {
  padding: 0 24px 20px;
  color: rgba(255,255,255,0.65);
}

/* Right side info card */
.cx-about-info-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  backdrop-filter: blur(14px);
  border-radius: 16px;
  padding: 48px 40px;
  transition: all 0.6s cubic-bezier(0.22,1,0.36,1);
}
.cx-about-info-card.cx-visible {
  opacity: 1; transform: translateY(0);
}
.cx-about-info-card:hover {
  border-color: rgba(212,190,131,0.2);
  box-shadow: 0 20px 60px rgba(212,190,131,0.08);
}
.cx-about-info-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #d4be83;
  margin-bottom: 20px;
}
.cx-about-info-card p {
  color: rgba(255,255,255,0.6);
  line-height: 1.8;
  font-size: 0.9rem;
}

/* ===================================================================
   INDEX – FAQ SECTION
   =================================================================== */
.cx-faq-section {
  padding: 100px 0;
}
.cx-faq-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  align-items: start;
}
.cx-faq-sticky {
  position: sticky;
  top: 120px;
}
.cx-faq-sticky .cx-label { display: inline-block; margin-bottom: 20px; }
.cx-faq-sticky h2 {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
  line-height: 1.2;
}
.cx-faq-sticky h2 span { color: #d4be83; }
.cx-faq-sticky p {
  margin-top: 16px;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.75;
}

.cx-faq-list { display: flex; flex-direction: column; gap: 14px; }

.cx-faq-item {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  backdrop-filter: blur(12px);
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.35s ease;
  /* always visible — DSN AJAX compat */
}
.cx-faq-item.cx-visible { opacity: 1; transform: translateY(0); }
.cx-faq-item:hover {
  border-color: rgba(212,190,131,0.3);
  box-shadow: 0 6px 24px rgba(212,190,131,0.08);
}
.cx-faq-q {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
  cursor: pointer;
}
.cx-faq-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(212,190,131,0.15);
  border: 1px solid rgba(212,190,131,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #d4be83;
  flex-shrink: 0;
}
.cx-faq-q h3 {
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #fff;
}
.cx-faq-a {
  padding: 0 26px 20px 76px;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.58);
  line-height: 1.75;
}

/* ===================================================================
   INDEX – PROJECTS 3D CTA (replaces marquee strip)
   =================================================================== */
.cx-projects-cta-section {
  position: relative;
  padding: 120px 0 140px;
  overflow: hidden;
  text-align: center;
}
.cx-projects-cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 90% 70% at 50% 50%, rgba(212,190,131,0.09) 0%, transparent 70%);
  pointer-events: none;
}
/* Border lines top/bottom */
.cx-projects-cta-section::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,190,131,0.4), transparent);
}

/* 3D Cube */
.cx-cube-scene {
  width: 140px;
  height: 140px;
  perspective: 550px;
  margin: 0 auto 56px;
}
.cx-3d-cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: cxCubeSpin 9s linear infinite;
}
@keyframes cxCubeSpin {
  from { transform: rotateX(22deg) rotateY(0deg); }
  to   { transform: rotateX(22deg) rotateY(360deg); }
}
.cx-cube-face {
  position: absolute;
  width: 140px;
  height: 140px;
  border: 1px solid rgba(212,190,131,0.45);
  background: rgba(212,190,131,0.04);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(212,190,131,0.7);
  font-size: 38px;
}
.cx-face-front  { transform: rotateY(0deg)   translateZ(70px); }
.cx-face-back   { transform: rotateY(180deg)  translateZ(70px); }
.cx-face-right  { transform: rotateY(90deg)   translateZ(70px); }
.cx-face-left   { transform: rotateY(-90deg)  translateZ(70px); }
.cx-face-top    { transform: rotateX(90deg)   translateZ(70px); }
.cx-face-bottom { transform: rotateX(-90deg)  translateZ(70px); }

.cx-projects-cta-section .cx-label { margin-bottom: 24px; }
.cx-projects-cta-section h2 {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 20px;
}
.cx-projects-cta-section h2 span { color: #d4be83; }
.cx-projects-cta-section p.cx-cta-desc {
  max-width: 520px;
  margin: 0 auto 50px;
  font-size: 0.95rem;
  line-height: 1.8;
  color: rgba(255,255,255,0.5);
}
.cx-projects-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 44px;
  background: #d4be83;
  color: #0a0a0a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  border: 2px solid #d4be83;
  transition: all 0.35s ease;
  cursor: pointer;
}
.cx-projects-cta-btn:hover {
  background: transparent;
  color: #d4be83;
  box-shadow: 0 0 40px rgba(212,190,131,0.3), 0 0 80px rgba(212,190,131,0.1);
  gap: 18px;
}
.cx-projects-cta-btn svg { transition: transform 0.3s ease; }
.cx-projects-cta-btn:hover svg { transform: translateX(6px); }

/* ===================================================================
   SERVICE PAGE – 6 CARDS GRID
   =================================================================== */
.cx-service-6-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 60px;
}

/* ===================================================================
   CONTACT PAGE – REDESIGNED FORM + INFO
   =================================================================== */
.cx-contact-wrap {
  padding: 80px 0 100px;
}
.cx-contact-two-col {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 36px;
  align-items: start;
}
.cx-form-glass {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  backdrop-filter: blur(14px);
  border-radius: 18px;
  padding: 52px 48px;
}
.cx-form-glass h2 {
  font-size: 1.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
  margin-bottom: 8px;
}
.cx-form-glass > p {
  color: rgba(255,255,255,0.45);
  font-size: 0.875rem;
  margin-bottom: 36px;
  line-height: 1.7;
}
.cx-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.cx-field { margin-bottom: 18px; }
.cx-field input,
.cx-field textarea {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 16px 20px;
  color: #fff;
  font-size: 0.875rem;
  font-family: inherit;
  outline: none;
  transition: all 0.3s ease;
  resize: vertical;
  box-sizing: border-box;
}
.cx-field input::placeholder,
.cx-field textarea::placeholder { color: rgba(255,255,255,0.28); }
.cx-field input:focus,
.cx-field textarea:focus {
  border-color: rgba(212,190,131,0.5);
  background: rgba(212,190,131,0.04);
  box-shadow: 0 0 0 3px rgba(212,190,131,0.08);
}
.cx-send-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 34px;
  background: transparent;
  border: 1px solid rgba(212,190,131,0.55);
  color: #d4be83;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.35s ease;
  margin-top: 6px;
}
.cx-send-btn:hover {
  background: rgba(212,190,131,0.1);
  border-color: rgba(212,190,131,0.85);
  box-shadow: 0 0 24px rgba(212,190,131,0.2);
}

/* Contact info cards */
.cx-contact-info-stack { display: flex; flex-direction: column; gap: 18px; }
.cx-contact-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  backdrop-filter: blur(12px);
  border-radius: 14px;
  padding: 26px 28px;
  display: flex;
  align-items: center;
  gap: 18px;
  transition: all 0.35s ease;
  /* always visible — DSN AJAX compat */
}
.cx-contact-card.cx-visible { opacity: 1; transform: translateX(0); }
.cx-contact-card:hover {
  border-color: rgba(212,190,131,0.35);
  background: rgba(212,190,131,0.04);
  box-shadow: 0 8px 28px rgba(212,190,131,0.12);
}
.cx-contact-card-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(212,190,131,0.1);
  border: 1px solid rgba(212,190,131,0.25);
  display: flex; align-items: center; justify-content: center;
  color: #d4be83;
  font-size: 20px;
  flex-shrink: 0;
  transition: all 0.35s ease;
}
.cx-contact-card:hover .cx-contact-card-icon {
  background: rgba(212,190,131,0.2);
  box-shadow: 0 0 22px rgba(212,190,131,0.45);
  transform: scale(1.1) rotate(-6deg);
}
.cx-contact-card-text {}
.cx-contact-card-label {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(212,190,131,0.65);
  margin-bottom: 5px;
}
.cx-contact-card-val {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.8);
  line-height: 1.6;
}
.cx-contact-card-val a {
  color: inherit; text-decoration: none;
  transition: color 0.25s ease;
}
.cx-contact-card-val a:hover { color: #d4be83; }

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 1024px) {
  .cx-about-grid { grid-template-columns: 1fr; gap: 40px; }
  .cx-faq-grid { grid-template-columns: 1fr; gap: 40px; }
  .cx-faq-sticky { position: static; }
  .cx-contact-two-col { grid-template-columns: 1fr; }
  .cx-service-6-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .cx-service-6-grid { grid-template-columns: 1fr; }
  .cx-form-glass { padding: 34px 24px; }
  .cx-field-row { grid-template-columns: 1fr; }
  .cx-projects-cta-section { padding: 80px 0; }
  .cx-cube-scene { width: 110px; height: 110px; }
  .cx-cube-face { width: 110px; height: 110px; font-size: 28px; }
  .cx-face-front { transform: rotateY(0deg)   translateZ(55px); }
  .cx-face-back  { transform: rotateY(180deg)  translateZ(55px); }
  .cx-face-right { transform: rotateY(90deg)   translateZ(55px); }
  .cx-face-left  { transform: rotateY(-90deg)  translateZ(55px); }
  .cx-face-top   { transform: rotateX(90deg)   translateZ(55px); }
  .cx-face-bottom{ transform: rotateX(-90deg)  translateZ(55px); }
}
@media (prefers-reduced-motion: reduce) {
  .cx-3d-cube { animation: none !important; }
  .cx-glass-card, .cx-faq-item, .cx-contact-card, .cx-about-info-card {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}


/* ===================================================================
   PERFORMANCE OVERRIDES — reduce GPU load, keep all animations intact
   =================================================================== */

/* Drop blur from 12-14px down to 4px across all glass elements */
.cx-card-inner,
.cx-form-glass,
.cx-contact-card,
.cx-faq-item,
.cx-about-info-card,
.cx-glass-card,
.cx-about-section .accordion__item,
.cx-cube-face,
.cx-projects-cta-section .cx-card-inner {
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* Remove expensive repeating-linear-gradient grid from section backgrounds */
.cx-section-bg::before,
.cx-services-section::before {
  background:
    radial-gradient(ellipse 70% 55% at 50% -5%, rgba(212,190,131,0.07) 0%, transparent 65%) !important;
}

/* Remove will-change from non-animating elements (only keep on cards during hover) */
.cx-glass-card,
.cx-faq-item,
.cx-contact-card,
.cx-about-info-card {
  will-change: auto;
}

/* Only activate will-change on hover (GPU layer only when needed) */
.cx-card:hover .cx-card-inner,
.cx-glass-card:hover,
.cx-faq-item:hover,
.cx-contact-card:hover {
  will-change: transform;
}

/* Reduce box-shadow complexity on hover states */
.cx-card:hover .cx-card-inner {
  box-shadow: 0 10px 30px rgba(212,190,131,0.12);
}

/* Pause non-visible animations to save CPU */
.cx-card:not(:hover) .cx-card-border {
  animation-play-state: paused !important;
}
.cx-card:not(:hover) .cx-icon-glow {
  display: none;
}


/* ===================================================================
   GLOBAL COLOR THEME — consistent gold on all DSN elements
   =================================================================== */

/* Gold accent on all circle-before labels */
.circle-before::before {
  border-color: #d4be83 !important;
}

/* Consistent heading accent */
.dsn-heading-title,
.sub-section-title .title-h2 b,
.title-block-lg b {
  color: #d4be83 !important;
}

/* Gold on number badges in accordions */
.number.background-theme {
  background: rgba(212,190,131,0.15) !important;
  color: #d4be83 !important;
  border: 1px solid rgba(212,190,131,0.3) !important;
}

/* Consistent DSN button style */
.dsn-btn.border-color-default {
  border-color: rgba(212,190,131,0.45) !important;
  color: #d4be83 !important;
  transition: all 0.35s ease !important;
}
.dsn-btn.border-color-default:hover {
  background: rgba(212,190,131,0.1) !important;
  border-color: #d4be83 !important;
  box-shadow: 0 0 24px rgba(212,190,131,0.25) !important;
}

/* Footer link hover gold */
#dsn_footer .menu a:hover,
#dsn_footer .col-contact a:hover,
#dsn_footer .footer-bottom a:hover {
  color: #d4be83 !important;
}

/* Header title color */
.v-dark-head .slide-content .title a,
.intro-title h1.title {
  color: #fff !important;
}

/* Remove old marquee CSS leftovers */
.cx-projects-strip,
.cx-strip-inner,
.cx-strip-track,
.cx-strip-item { display: none !important; }

/* ===================================================================
   OUR PROJECTS — FINAL CTA SECTION (homepage bottom)
   =================================================================== */
.cx-final-projects {
  border-top: 1px solid rgba(212,190,131,0.15);
  background: linear-gradient(180deg, transparent 0%, rgba(212,190,131,0.03) 100%);
  padding: 90px 0;
  position: relative;
  overflow: hidden;
}

.cx-final-projects::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 600px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d4be83, transparent);
}

.cx-final-projects-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 60px;
  align-items: center;
}

.cx-final-left .cx-label { margin-bottom: 20px; }

.cx-final-heading {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 18px;
}
.cx-final-heading span { color: #d4be83; }

.cx-final-desc {
  font-size: 0.9rem;
  line-height: 1.8;
  color: rgba(255,255,255,0.5);
  max-width: 460px;
}

.cx-final-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}

.cx-final-icon-ring {
  width: 120px;
  height: 120px;
  animation: cxCubeSpin 12s linear infinite;
}

.cx-final-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 40px;
  background: #d4be83;
  color: #0a0a0a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  border: 2px solid #d4be83;
  transition: all 0.35s ease;
  white-space: nowrap;
}
.cx-final-btn:hover {
  background: transparent;
  color: #d4be83;
  box-shadow: 0 0 32px rgba(212,190,131,0.3);
  gap: 18px;
}
.cx-final-btn svg { transition: transform 0.3s ease; }
.cx-final-btn:hover svg { transform: translateX(5px); }

@media (max-width: 768px) {
  .cx-final-projects-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px;
  }
  .cx-final-desc { margin: 0 auto; }
  .cx-final-right { margin: 0 auto; }
}


/* ===================================================================
   HERO SECTION — Entrance animations & gold accents
   =================================================================== */
@keyframes heroFadeUp {
  from { opacity:0; transform:translateY(30px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes heroLineGrow {
  from { width:0; opacity:0; }
  to   { width:60px; opacity:1; }
}
@keyframes heroPulse {
  0%,100% { opacity:.6; transform:scaleX(1); }
  50%     { opacity:1;  transform:scaleX(1.04); }
}

/* Animate hero headline */
.slide-content .title {
  animation: heroFadeUp 1s cubic-bezier(.22,1,.36,1) 0.3s both;
}
.slide-content .description {
  animation: heroFadeUp 1s cubic-bezier(.22,1,.36,1) 0.6s both;
}
.slide-content .dsn-def-btn {
  animation: heroFadeUp 1s cubic-bezier(.22,1,.36,1) 0.85s both;
}

/* Gold accent line under hero heading */
.slide-content .title::after {
  content:'';
  display:block;
  height:2px;
  background:linear-gradient(90deg, #d4be83, transparent);
  margin-top:16px;
  border-radius:2px;
  animation: heroLineGrow 1.2s cubic-bezier(.22,1,.36,1) 0.9s both;
}

/* Hero learn more button — gold outline on hover */
.v-dark-head .dsn-btn.border-color-default:hover {
  border-color: rgba(212,190,131,0.7) !important;
  box-shadow: 0 0 24px rgba(212,190,131,0.2) !important;
}

/* Social sidebar icons — gold on hover */
.social-side .socials li a:hover {
  color: #d4be83 !important;
}
.social-side .socials li a:hover i {
  color: #d4be83 !important;
  text-shadow: 0 0 12px rgba(212,190,131,0.6) !important;
}

/* WhatsApp tooltip — match dark gold theme */
.whatsapp-tooltip {
  background: #0f0f0f !important;
  border: 1px solid rgba(212,190,131,0.3) !important;
  color: #d4be83 !important;
}
.whatsapp-tooltip::after {
  border-left-color: #0f0f0f !important;
}


/* ====================================================
   PROJECTS PAGE — extracted from inline <style> tag
   (Must be in global CSS so DSN AJAX nav keeps styles)
   ==================================================== */
/* ====================================================
   PROJECTS PAGE — PREMIUM REBUILD
   ==================================================== */
:root{--g:#d4be83;--g2:rgba(212,190,131,0.12);--dark:#080808;--card:#0f0f0f;--modal:#0d0d0d;}

/* ---- Hero ---- */
.p2-hero{position:relative;padding:160px 0 80px!important;text-align:center;overflow:hidden;}
.p2-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 90% 70% at 50% 0%,rgba(212,190,131,0.09) 0%,transparent 65%);pointer-events:none;}
.p2-pill{display:inline-flex!important;align-items:center;gap:8px;border:1px solid rgba(212,190,131,0.35);border-radius:30px;padding:6px 18px;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--g);margin-bottom:24px;}
.p2-pill span{width:6px;height:6px;border-radius:50%;background:var(--g);}
@keyframes pillPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(1.4);}}
.p2-hero h1{font-size:clamp(2.2rem,5.5vw,4.2rem)!important;font-weight:800!important;text-transform:uppercase!important;letter-spacing:1.5px!important;color:#fff!important;line-height:1.05!important;margin-bottom:20px!important;}
.p2-hero h1 em{font-style:normal;color:var(--g);}
.p2-hero-sub{max-width:640px;margin:0 auto 36px!important;font-size:.95rem!important;line-height:1.85!important;color:rgba(255,255,255,.48)!important;}
.p2-hero-btns{display:flex!important;gap:14px!important;justify-content:center!important;flex-wrap:wrap!important;margin-bottom:60px!important;}
.p2-btn-gold{display:inline-flex;align-items:center;gap:10px;padding:16px 36px;background:var(--g);color:#000;font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;border-radius:4px;text-decoration:none;transition:all .3s ease;}
.p2-btn-gold:hover{background:transparent;color:var(--g);box-shadow:0 0 30px rgba(212,190,131,.25);}
.p2-btn-ghost{display:inline-flex;align-items:center;gap:10px;padding:15px 36px;background:transparent;color:rgba(255,255,255,.7);font-size:10px;font-weight:600;letter-spacing:3px;text-transform:uppercase;border-radius:4px;border:1px solid rgba(255,255,255,.15);text-decoration:none;transition:all .3s ease;}
.p2-btn-ghost:hover{border-color:var(--g);color:var(--g);}
/* Stats row — use !important to override DSN global resets */
.p2-stats{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:0;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);}
.p2-stat{padding:28px 20px!important;text-align:center;border-right:1px solid rgba(255,255,255,.06);}
.p2-stat:last-child{border-right:none;}
.p2-stat-num{display:block!important;font-size:clamp(1rem,2.5vw,2rem)!important;font-weight:800!important;color:var(--g)!important;line-height:1!important;}
.p2-stat-label{display:block!important;font-size:9px!important;letter-spacing:2.5px!important;text-transform:uppercase!important;color:rgba(255,255,255,.38)!important;margin-top:8px!important;}

/* ---- Filters ---- */
.p2-filter-wrap{padding:50px 0 10px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.p2-filters{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:0 20px 30px;}
.p2-ftab{padding:9px 22px;border-radius:30px;border:1px solid rgba(255,255,255,.1);background:transparent;color:rgba(255,255,255,.45);font-size:10px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:all .28s ease;font-family:inherit;white-space:nowrap;}
.p2-ftab.active,.p2-ftab:hover{border-color:var(--g);color:var(--g);background:rgba(212,190,131,.07);}

/* ---- Grid ---- */
.p2-grid-section{padding:20px 0 100px;}
.p2-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}

/* ---- Image loading — NEVER show black ---- */
@keyframes p2Spin{to{transform:rotate(360deg);}}
.p2-screen{background:#1a1a1a;}
.p2-screen img{position:relative;z-index:1;}
/* Modal: images always visible — thumbnail bg provides instant preview */
.p2-mac-screen{background:#111 center/cover no-repeat;position:relative;}
.p2-mac-screen img{position:relative;z-index:2;width:100%;height:100%;object-fit:cover;display:block;}
.p2-phone-screen{background:#111 center/cover no-repeat;position:relative;}
.p2-phone-screen img{position:relative;z-index:2;width:100%;height:100%;object-fit:cover;object-position:center top;}
/* Loading overlay on modal screen while image loads */
.p2-img-loading::after{
  content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:36px;height:36px;border:2px solid rgba(212,190,131,0.25);
  border-top-color:#d4be83;border-radius:50%;
  animation:p2Spin .75s linear infinite;z-index:5;
}
.p2-img-ready::after{display:none;}
/* Quick preview thumbnail behind modal image */
.p2-mac-screen.p2-preview{background-size:cover;background-position:top center;background-repeat:no-repeat;}

/* ---- Card ---- */
.p2-card{border-radius:16px;background:var(--card);border:1px solid rgba(255,255,255,.07);overflow:hidden;cursor:pointer;opacity:0;transform:translateY(40px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1),box-shadow .35s ease,border-color .35s ease;}
.p2-card.p2-in{opacity:1;transform:translateY(0);}
.p2-card:hover{border-color:rgba(212,190,131,.3);box-shadow:0 24px 60px rgba(212,190,131,.1);}
/* Browser frame */
.p2-browser{position:relative;}
.p2-browser-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#1a1a1a;border-bottom:1px solid rgba(255,255,255,.05);}
.p2-dots{display:flex;gap:5px;}
.p2-dot{width:10px;height:10px;border-radius:50%;display:block;}
.p2-dot:nth-child(1){background:#ff5f57;}.p2-dot:nth-child(2){background:#febc2e;}.p2-dot:nth-child(3){background:#28c840;}
.p2-addr{flex:1;background:rgba(255,255,255,.05);border-radius:4px;padding:4px 10px;font-size:9px;color:rgba(255,255,255,.2);text-align:center;display:flex;align-items:center;justify-content:center;gap:5px;}
.p2-addr svg{width:9px;height:9px;opacity:.4;}
.p2-screen{position:relative;height:238px;overflow:hidden;background:#0a0a0a;}
.p2-screen img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .65s ease,filter .35s ease;filter:brightness(.88);}
.p2-card:hover .p2-screen img{transform:scale(1.04);filter:brightness(1);}
.p2-logo-mask{position:absolute;top:0;left:0;width:185px;height:62px;background:rgba(10,10,10,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:2;border-bottom-right-radius:8px;}
.p2-screen-fade{position:absolute;bottom:0;left:0;right:0;height:55%;background:linear-gradient(to top,#0a0a0a 0%,transparent 100%);z-index:2;pointer-events:none;}
.p2-conf-badge{position:absolute;top:12px;right:12px;z-index:3;font-size:8px;letter-spacing:2px;text-transform:uppercase;background:rgba(212,190,131,.12);border:1px solid rgba(212,190,131,.35);color:var(--g);padding:4px 10px;border-radius:20px;}
/* Card body */
.p2-card-body{padding:22px 26px 26px;}
.p2-card-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.p2-card-num{font-size:10px;letter-spacing:2px;color:rgba(212,190,131,.35);font-weight:700;}
.p2-card-industry{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.35);background:rgba(255,255,255,.05);padding:3px 10px;border-radius:20px;}
.p2-card h3{font-size:.95rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#fff;margin:0 0 10px;line-height:1.35;transition:color .3s ease;}
.p2-card:hover h3{color:var(--g);}
.p2-card-desc{font-size:.8rem;line-height:1.75;color:rgba(255,255,255,.45);margin-bottom:16px;}
.p2-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:18px;}
.p2-tag{font-size:8px;letter-spacing:1.5px;text-transform:uppercase;padding:4px 10px;border-radius:20px;border:1px solid rgba(212,190,131,.18);color:rgba(212,190,131,.6);background:rgba(212,190,131,.04);}
.p2-card-cta{display:inline-flex;align-items:center;gap:8px;font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--g);opacity:.65;background:none;border:none;cursor:pointer;font-family:inherit;padding:0;transition:all .3s ease;}
.p2-card-cta svg{transition:transform .3s ease;}
.p2-card:hover .p2-card-cta{opacity:1;gap:12px;}
.p2-card:hover .p2-card-cta svg{transform:translateX(4px);}
/* Demo card (Project 11 — CSS mockup) */
.p2-demo-screen{height:238px;background:#0c0c0c;position:relative;overflow:hidden;display:flex;flex-direction:column;}
.p2-demo-nav{padding:10px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(212,190,131,.1);}
.p2-demo-logo{font-size:9px;font-weight:700;letter-spacing:4px;color:rgba(255,255,255,.85);}
.p2-demo-nav-links{display:flex;gap:10px;}
.p2-demo-nav-links span{font-size:6px;letter-spacing:1.5px;color:rgba(255,255,255,.3);text-transform:uppercase;font-weight:400;}
.p2-demo-hero{display:flex;gap:10px;flex:1;padding:12px 16px 0;overflow:hidden;}
.p2-demo-hero-left{flex:1.3;display:flex;flex-direction:column;justify-content:center;}
.p2-demo-hero h4{font-size:12px;font-weight:800;text-transform:uppercase;color:#fff;letter-spacing:.5px;margin-bottom:4px;line-height:1.2;}
.p2-demo-hero p{font-size:7px;color:rgba(255,255,255,.35);margin-bottom:10px;line-height:1.5;}
.p2-demo-btn{display:inline-block;padding:5px 12px;background:#d4be83;color:#000;font-size:6.5px;font-weight:800;letter-spacing:2px;border-radius:2px;}
.p2-demo-grid{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:4px;align-content:start;}
.p2-demo-product{border-radius:3px;height:52px;border:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;justify-content:flex-end;padding:5px;}
.p2-demo-product:nth-child(1){background:linear-gradient(160deg,rgba(212,190,131,.12),rgba(0,0,0,.3));}
.p2-demo-product:nth-child(2){background:linear-gradient(160deg,rgba(180,160,120,.1),rgba(0,0,0,.3));}
.p2-demo-product:nth-child(3){background:linear-gradient(160deg,rgba(200,180,140,.08),rgba(0,0,0,.3));}
.p2-demo-product:nth-child(4){background:linear-gradient(160deg,rgba(160,140,100,.08),rgba(0,0,0,.3));}
.p2-demo-pname{font-size:5.5px;color:rgba(255,255,255,.4);letter-spacing:1px;text-transform:uppercase;}
.p2-demo-pprice{font-size:7px;font-weight:700;color:#d4be83;margin-top:1px;}
.p2-demo-footer{padding:7px 16px;border-top:1px solid rgba(212,190,131,.08);display:flex;align-items:center;justify-content:space-between;background:rgba(212,190,131,.02);}
.p2-demo-ftabs{display:flex;gap:8px;}
.p2-demo-ftab{font-size:6px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.22);}
.p2-demo-ftab.p2-act{color:rgba(212,190,131,.7);}
.p2-demo-fcart{font-size:6px;letter-spacing:1px;color:rgba(212,190,131,.55);border:1px solid rgba(212,190,131,.2);padding:2px 7px;border-radius:2px;}

/* ====================================================
   MODAL
   ==================================================== */
.p2-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:99997;opacity:0;pointer-events:none;transition:opacity .4s ease;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}
.p2-overlay.p2-show{opacity:1;pointer-events:all;}
.p2-modal{position:fixed;top:0;right:-100%;width:min(960px,100%);height:100vh;background:var(--modal);border-left:1px solid rgba(212,190,131,.12);z-index:99998;overflow-y:auto;transition:right .48s cubic-bezier(.22,1,.36,1);display:flex;flex-direction:column;}
.p2-modal.p2-show{right:0;}
/* Modal head */
.p2-mhead{position:sticky;top:0;z-index:10;background:rgba(13,13,13,.95);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.05);padding:18px 36px;display:flex;align-items:center;justify-content:space-between;}
.p2-mhead-tags{display:flex;gap:8px;align-items:center;}
.p2-mhead-industry{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--g);border:1px solid rgba(212,190,131,.3);padding:4px 12px;border-radius:20px;}
.p2-mhead-conf{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.3);background:rgba(255,255,255,.04);padding:4px 12px;border-radius:20px;}
.p2-close{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.1);background:transparent;color:rgba(255,255,255,.5);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;font-size:16px;line-height:1;}
.p2-close:hover{border-color:var(--g);color:var(--g);}
/* Slider */
.p2-slider-wrap{position:relative;background:#0a0a0a;}
.p2-slides{position:relative;overflow:hidden;}
.p2-slide{display:none;padding:36px 36px 20px;}
.p2-slide.p2-active{display:block;}
/* MacBook in modal */
.p2-mac{max-width:100%;}
.p2-mac-top{background:#1e1e1e;border-radius:12px 12px 0 0;border:2px solid #2a2a2a;padding:7px 7px 0;}
.p2-mac-bar{display:flex;align-items:center;gap:7px;padding:7px 10px 8px;background:#141414;border-radius:6px 6px 0 0;}
.p2-mac-dots{display:flex;gap:5px;}
.p2-mac-dot{width:10px;height:10px;border-radius:50%;}
.p2-mac-dot:nth-child(1){background:#ff5f57;}.p2-mac-dot:nth-child(2){background:#febc2e;}.p2-mac-dot:nth-child(3){background:#28c840;}
.p2-mac-addr{flex:1;background:rgba(255,255,255,.05);border-radius:4px;padding:4px 10px;font-size:9px;color:rgba(255,255,255,.2);text-align:center;}
.p2-mac-screen{position:relative;overflow:hidden;height:360px;background:#080808;}
.p2-mac-screen img{width:100%;height:100%;object-fit:cover;display:block;}
.p2-mac-screen .p2-ml{position:absolute;top:0;left:0;width:210px;height:72px;background:rgba(8,8,8,.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:2;border-bottom-right-radius:8px;}
.p2-mac-screen .p2-mf{position:absolute;bottom:0;left:0;right:0;height:40%;background:linear-gradient(to top,#080808,transparent);z-index:2;pointer-events:none;}
.p2-mac-chin{height:22px;background:#1e1e1e;border:2px solid #2a2a2a;border-top:none;border-radius:0 0 6px 6px;}
.p2-mac-base{display:flex;justify-content:center;margin-top:0;}
.p2-mac-stand{width:70px;height:12px;background:#252525;border-radius:0 0 4px 4px;}
.p2-mac-foot{width:140px;height:5px;background:#1e1e1e;border-radius:0 0 8px 8px;margin-top:-1px;}
/* Split slide (desktop + mobile side by side) */
.p2-split{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:start;}
.p2-phone{width:150px;flex-shrink:0;}
.p2-phone-body{background:#1e1e1e;border:2px solid #2a2a2a;border-radius:26px;padding:8px;}
.p2-phone-notch{width:54px;height:12px;background:#111;border-radius:0 0 10px 10px;margin:0 auto 5px;}
.p2-phone-screen{height:260px;background:#080808;border-radius:10px;overflow:hidden;position:relative;}
.p2-phone-screen img{width:100%;height:100%;object-fit:cover;object-position:center top;}
.p2-phone-screen::after{content:'';position:absolute;bottom:0;left:0;right:0;height:35%;background:linear-gradient(to top,#080808,transparent);}
.p2-phone-home{width:36px;height:4px;background:rgba(255,255,255,.12);border-radius:4px;margin:7px auto 0;}
/* Slide nav */
.p2-slide-nav{display:flex;align-items:center;justify-content:space-between;padding:14px 36px 10px;background:#0a0a0a;}
.p2-slide-dots{display:flex;gap:8px;align-items:center;}
.p2-sdot{width:22px;height:3px;border-radius:3px;background:rgba(255,255,255,.15);cursor:pointer;transition:all .3s ease;}
.p2-sdot.p2-active{background:var(--g);width:36px;}
.p2-snav-btns{display:flex;gap:8px;}
.p2-snav-btn{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.1);background:transparent;color:rgba(255,255,255,.5);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;font-size:14px;}
.p2-snav-btn:hover{border-color:var(--g);color:var(--g);}
.p2-slide-label{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.25);}
/* Modal content */
.p2-mcontent{padding:30px 36px 60px;}
.p2-mtitle{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;text-transform:uppercase;letter-spacing:1px;color:#fff;margin-bottom:24px;line-height:1.15;}
.p2-mtitle span{color:var(--g);}
/* Info grid */
.p2-info-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;margin-bottom:28px;}
.p2-info-block{padding:18px 20px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);border-radius:12px;}
.p2-info-block h5{font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:var(--g);margin-bottom:8px;opacity:.8;}
.p2-info-block p{font-size:.8rem;color:rgba(255,255,255,.55);line-height:1.75;}
/* Features */
.p2-features-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:28px;}
.p2-feat{display:flex;align-items:center;gap:10px;font-size:.8rem;color:rgba(255,255,255,.6);padding:10px 14px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);border-radius:8px;}
.p2-feat::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--g);flex-shrink:0;}
/* Tech */
.p2-section-label{font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:var(--g);margin-bottom:14px;opacity:.8;}
.p2-tech-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px;}
.p2-tech-pill{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;padding:6px 14px;border-radius:20px;background:rgba(212,190,131,.06);border:1px solid rgba(212,190,131,.2);color:var(--g);}
/* Results */
.p2-results{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:30px;}
.p2-result{display:flex;align-items:center;gap:12px;font-size:.8rem;color:rgba(255,255,255,.65);}
.p2-result-icon{width:32px;height:32px;border-radius:50%;background:rgba(212,190,131,.1);border:1px solid rgba(212,190,131,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.p2-result-icon svg{width:14px;height:14px;color:var(--g);}
/* Modal CTA */
.p2-mcta{display:flex;align-items:center;gap:16px;padding:22px 26px;background:rgba(212,190,131,.04);border:1px solid rgba(212,190,131,.12);border-radius:12px;flex-wrap:wrap;}
.p2-mcta p{flex:1;font-size:.8rem;color:rgba(255,255,255,.5);margin:0;}
.p2-mcta a{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:var(--g);color:#000;font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;border-radius:4px;text-decoration:none;transition:all .3s ease;white-space:nowrap;}
.p2-mcta a:hover{background:transparent;color:var(--g);border:1px solid var(--g);}

/* ====================================================
   CTA + NOTICE + FOOTER EXTRAS
   ==================================================== */
.p2-cta-section{padding:100px 0;text-align:center;border-top:1px solid rgba(212,190,131,.1);background:linear-gradient(180deg,transparent,rgba(212,190,131,.03));}
.p2-cta-section h2{font-size:clamp(1.8rem,4vw,3.2rem);font-weight:800;text-transform:uppercase;letter-spacing:1.5px;color:#fff;margin-bottom:18px;}
.p2-cta-section h2 span{color:var(--g);}
.p2-cta-section p{max-width:540px;margin:0 auto 16px;font-size:.9rem;color:rgba(255,255,255,.48);line-height:1.8;}
.p2-cta-contacts{display:flex;gap:20px;justify-content:center;margin:20px 0 44px;flex-wrap:wrap;}
.p2-cta-contact{display:flex;align-items:center;gap:8px;font-size:.8rem;color:rgba(255,255,255,.45);}
.p2-cta-contact a{color:var(--g);text-decoration:none;}
.p2-cta-contact a:hover{text-decoration:underline;}
.p2-cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.p2-notice{padding:22px;text-align:center;border-top:1px solid rgba(255,255,255,.04);}
.p2-notice p{font-size:.75rem;color:rgba(255,255,255,.28);line-height:1.7;max-width:700px;margin:0 auto;font-style:italic;}
.p2-notice strong{color:rgba(212,190,131,.45);}

/* ====================================================
   RESPONSIVE
   ==================================================== */
@media(max-width:1024px){
  .p2-grid{grid-template-columns:repeat(2,1fr);}
  .p2-info-grid{grid-template-columns:1fr;}
}
@media(max-width:768px){
  .p2-stats{grid-template-columns:repeat(3,1fr);}
  .p2-stat{padding:20px 10px;}
  .p2-modal{width:100%;}
  .p2-slide{padding:20px 16px 14px;}
  .p2-slide-nav{padding:10px 16px 8px;flex-wrap:wrap;gap:8px;}
  .p2-mcontent{padding:20px 16px 50px;}
  .p2-mhead{padding:14px 16px;flex-wrap:wrap;gap:8px;}
  .p2-mhead-tags{flex-wrap:wrap;}
  .p2-info-grid{grid-template-columns:1fr;}
  .p2-features-list,.p2-results{grid-template-columns:1fr;}
  .p2-split{grid-template-columns:1fr;}
  .p2-phone{display:none;}
  .p2-mac-screen{height:220px;}
  .p2-tech-row{gap:6px;}
  .p2-tech-pill{font-size:8px;padding:5px 10px;}
}
@media(max-width:640px){
  .p2-grid{grid-template-columns:1fr;}
  .p2-stats{grid-template-columns:1fr;border-bottom:none;}
  .p2-stat{border-right:none!important;border-bottom:1px solid rgba(255,255,255,.06);padding:18px 16px;}
  .p2-hero{padding:100px 0 60px;}
  .p2-hero h1{font-size:1.7rem;letter-spacing:0.5px;}
  .p2-hero-sub{font-size:.85rem;}
  .p2-hero-btns{gap:10px;}
  .p2-btn-gold,.p2-btn-ghost{padding:13px 24px;font-size:9px;}
  .p2-filter-wrap{padding:30px 0 5px;}
  .p2-filters{gap:6px;padding:0 12px 20px;}
  .p2-ftab{padding:7px 14px;font-size:9px;}
  .p2-card-body{padding:16px 18px 20px;}
  .p2-browser-bar{padding:8px 10px;}
  .p2-screen{height:200px;}
  .p2-logo-mask{width:140px;height:48px;}
  .p2-mhead-industry,.p2-mhead-conf{font-size:8px;padding:3px 8px;}
  .p2-mac-screen{height:190px;}
  .p2-mcta{flex-direction:column;align-items:flex-start;}
}
@media(prefers-reduced-motion:reduce){
  .p2-card{opacity:1!important;transform:none!important;transition:none!important;}
  .p2-modal{transition:none!important;}
  .p2-pill span{animation:none!important;}
}