.elementor-102 .elementor-element.elementor-element-07f3e91{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-102 .elementor-element.elementor-element-e46b221{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-102 .elementor-element.elementor-element-b77af76{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-102 .elementor-element.elementor-element-bb58649{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-102 .elementor-element.elementor-element-325b980{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-102 .elementor-element.elementor-element-eb8e7ff{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-6c71df1 *//* ==========================================
   SCOPED VARIABLES (100% Intact)
=========================================== */
.loophix-seo-hero {
  --brand-light: #FEFDFF;  
  --brand-purple: #C581F1; 
  --brand-cyan: #7FFA;     
  --text-dark: #1A1A1A;
  
  position: relative;
  background-color: var(--brand-light);
  padding: 90px 20px;
  overflow: hidden;
  font-family: 'Lato', sans-serif;
  display: flex;
  justify-content: center;
}

.loophix-seo-hero a { text-decoration: none !important; }

/* Background Glow */
.loophix-seo-hero .hero-glow-bg {
  position: absolute; top: -10%; right: -5%;
  width: 900px; height: 900px;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand-cyan) 12%, transparent) 0%, color-mix(in srgb, var(--brand-purple) 10%, transparent) 35%, transparent 70%);
  z-index: 0; pointer-events: none;
}

.loophix-seo-hero .hero-container {
  position: relative; z-index: 1; 
  max-width: 1200px; width: 100%;
  display: flex; align-items: center; gap: 60px;
}

/* ==========================================
   ✍️ LEFT COLUMN: CONTENT
=========================================== */
.loophix-seo-hero .hero-text-content { flex: 1; max-width: 600px; }

.loophix-seo-hero .eyebrow-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px; border-radius: 50px;
  background: color-mix(in srgb, var(--brand-cyan) 10%, transparent); 
  color: var(--brand-purple); border: 2px solid var(--brand-purple);
  font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
  margin-bottom: 25px;
}
.loophix-seo-hero .eyebrow-tag svg { width: 16px; height: 16px; color: var(--brand-cyan); }

.loophix-seo-hero .hero-title { 
  font-family: 'Montserrat', sans-serif; font-size: clamp(40px, 6vw, 64px); 
  font-weight: 900; color: var(--text-dark); margin: 0 0 20px 0; line-height: 1.1; letter-spacing: -1px;
}

.loophix-seo-hero .text-gradient { 
  background: linear-gradient(90deg, var(--brand-purple), var(--brand-cyan)); 
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; 
}

.loophix-seo-hero .hero-subtitle { 
  font-family: 'Lato', sans-serif; font-weight: 700;
  color: var(--text-dark); opacity: 0.85; font-size: 18px; margin: 0 0 40px; line-height: 1.6; 
}

/* Single Action Button - Improved Glow */
.loophix-seo-hero .hero-action-buttons { display: flex; gap: 15px; flex-wrap: wrap; margin-bottom: 40px; }

.loophix-seo-hero .btn-hero {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 18px 36px; /* Slightly larger for solo focus */
  border-radius: 12px;
  font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 800; 
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: pointer;
}

.loophix-seo-hero .btn-solid { 
  background: linear-gradient(135deg, var(--brand-purple), var(--brand-cyan)); 
  color: var(--brand-light); border: none; 
  box-shadow: 0 10px 25px color-mix(in srgb, var(--brand-purple) 30%, transparent);
}
.loophix-seo-hero .btn-solid:hover { 
  box-shadow: 0 15px 35px color-mix(in srgb, var(--brand-cyan) 50%, transparent); 
  transform: translateY(-5px) scale(1.02); 
}
.loophix-seo-hero .btn-solid svg { width: 22px; height: 22px; transition: transform 0.3s; }
.loophix-seo-hero .btn-solid:hover svg { transform: translateX(6px); }

/* Trust Metrics */
.loophix-seo-hero .trust-metrics { display: flex; gap: 30px; border-top: 1px solid #E4E4E7; padding-top: 25px; }
.loophix-seo-hero .metric { font-family: 'Lato', sans-serif; font-size: 15px; font-weight: 800; color: var(--text-dark); opacity: 0.8; }
.loophix-seo-hero .metric .highlight { color: var(--brand-purple); font-size: 18px; font-family: 'Montserrat', sans-serif; font-weight: 900; }

/* ==========================================
   🖼️ RIGHT COLUMN: PURE CSS VISUAL (Intact)
=========================================== */
.loophix-seo-hero .hero-visual {
  flex: 1; position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 20px;
}

.loophix-seo-hero .search-bar-mockup {
  width: 100%; max-width: 450px; background: #FFFFFF;
  border-radius: 100px; padding: 20px 25px; display: flex; align-items: center; gap: 15px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.05); border: 1px solid color-mix(in srgb, var(--brand-purple) 15%, transparent);
  animation: floatUp 6s ease-in-out infinite;
}
.loophix-seo-hero .search-bar-mockup svg { width: 24px; height: 24px; }
.loophix-seo-hero .search-bar-mockup .typing-text {
  font-family: 'Lato', sans-serif; font-size: 16px; font-weight: 800; color: #A1A1AA;
}

.loophix-seo-hero .chart-mockup {
  width: 100%; max-width: 400px; background: #FFFFFF; border-radius: 24px; padding: 30px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.08); border: 1px solid color-mix(in srgb, var(--brand-cyan) 15%, transparent);
  display: flex; align-items: flex-end; gap: 15px; height: 200px; position: relative;
  animation: floatDown 7s ease-in-out infinite; margin-right: 20px;
}
.loophix-seo-hero .chart-bar {
  flex: 1; background: color-mix(in srgb, var(--brand-purple) 20%, transparent); border-radius: 8px 8px 0 0;
}
.loophix-seo-hero .bar-1 { height: 40%; }
.loophix-seo-hero .bar-2 { height: 60%; }
.loophix-seo-hero .bar-3 { height: 50%; }
.loophix-seo-hero .bar-4 { height: 100%; background: linear-gradient(180deg, var(--brand-cyan), var(--brand-purple)); }

.loophix-seo-hero .floating-badge {
  position: absolute; top: -15px; right: -20px; background: var(--text-dark); color: var(--brand-light);
  padding: 10px 16px; border-radius: 12px; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 14px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

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

/* ==========================================
   📱 RESPONSIVENESS
=========================================== */
@media (max-width: 1024px) {
  .loophix-seo-hero .hero-container { flex-direction: column; text-align: center; gap: 40px; }
  .loophix-seo-hero .hero-text-content { max-width: 100%; }
  .loophix-seo-hero .hero-action-buttons { justify-content: center; }
  .loophix-seo-hero .trust-metrics { justify-content: center; }
  .loophix-seo-hero .hero-visual { width: 100%; align-items: center; }
  .loophix-seo-hero .chart-mockup { margin-right: 0; }
}

@media (max-width: 768px) {
  .loophix-seo-hero { padding: 20px 15px; }
  .loophix-seo-hero .hero-title { font-size: 32px; }
  .loophix-seo-hero .hero-subtitle { font-size: 16px; }
  .loophix-seo-hero .btn-hero { width: 100%; }
  .loophix-seo-hero .search-bar-mockup { max-width: 100%; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-5fc73f6 */@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@800;900&family=Lato:wght@700;800;900&display=swap');

/* ==========================================
   SCOPED VARIABLES & SETUP
=========================================== */
.loophix-premium-services {
  --brand-light: #FEFDFF;  
  --brand-purple: #C581F1; 
  --brand-cyan: #7FFA;     
  --text-dark: #1A1A1A;
  
  position: relative;
  background-color: var(--brand-light);
  /* Subtle tech dot-grid for premium feel */
  background-image: radial-gradient(#E0E0E0 1px, transparent 1px);
  background-size: 30px 30px;
  padding: 120px 20px;
  overflow: hidden;
  font-family: 'Lato', sans-serif;
}

.loophix-premium-services * { box-sizing: border-box; }
.loophix-premium-services a { text-decoration: none !important; }

/* 🔥 VFX 1: Breathing & Rotating Ambient Glow */
.loophix-premium-services .services-ambient-bg {
  position: absolute; top: 10%; right: -10%;
  width: 900px; height: 900px;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand-cyan) 10%, transparent) 0%, color-mix(in srgb, var(--brand-purple) 8%, transparent) 40%, transparent 70%);
  z-index: 0; pointer-events: none;
  animation: ambientVFX 12s infinite alternate ease-in-out;
}

@keyframes ambientVFX {
  0% { transform: scale(0.8) rotate(0deg); opacity: 0.6; }
  100% { transform: scale(1.1) rotate(45deg); opacity: 1; }
}

.loophix-premium-services .services-container {
  position: relative; z-index: 1; max-width: 1250px; margin: 0 auto;
}

/* ==========================================
   ✍️ HEADER (Animated Text)
=========================================== */
.loophix-premium-services .services-header { text-align: center; margin-bottom: 70px; }

.loophix-premium-services .eyebrow-box {
  display: inline-block; padding: 8px 24px; border-radius: 4px;
  background: var(--text-dark); color: var(--brand-light); 
  font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px;
  margin-bottom: 25px; box-shadow: 4px 4px 0 var(--brand-purple);
}

.loophix-premium-services .services-title { 
  font-family: 'Montserrat', sans-serif; font-size: clamp(36px, 5vw, 60px); 
  font-weight: 900; color: var(--text-dark); margin: 0 0 20px 0; line-height: 1.1; letter-spacing: -1px;
}

/* 🔥 VFX 2: Shimmering Text Gradient */
.loophix-premium-services .text-gradient-3d { 
  background: linear-gradient(90deg, var(--brand-purple), var(--brand-cyan), var(--brand-purple)); 
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; 
  filter: drop-shadow(0px 4px 8px color-mix(in srgb, var(--brand-purple) 30%, transparent));
  animation: textShimmer 3s linear infinite;
}

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

.loophix-premium-services .services-subtitle { 
  font-family: 'Lato', sans-serif; font-weight: 800;
  color: var(--text-dark); font-size: 18px; margin: 0 auto; max-width: 650px; line-height: 1.6; 
}

/* ==========================================
   🎬 3D CARDS & GLASS HOVER VFX
=========================================== */
.loophix-premium-services .services-grid-3d {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 40px;
  perspective: 1200px;
}

.loophix-premium-services .cinematic-card {
  background: #FFFFFF; border-radius: 12px; padding: 40px 30px;
  border: 1px solid #EAEAEA; box-shadow: 0 10px 30px rgba(0,0,0,0.04);
  display: flex; flex-direction: column; position: relative;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease, border-color 0.4s ease;
  overflow: hidden; /* For Glass Sweep */
}

/* 🔥 VFX 3: Sweeping Glass Shine */
.loophix-premium-services .cinematic-card::after {
  content: ""; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
  transform: skewX(-20deg); z-index: 10; pointer-events: none; transition: 0s;
}

.loophix-premium-services .cinematic-card:hover {
  transform: translateY(-10px) rotateX(2deg) rotateY(-2deg); /* Micro 3D Tilt */
  box-shadow: 0 25px 50px color-mix(in srgb, var(--brand-purple) 20%, transparent);
  border-color: color-mix(in srgb, var(--brand-cyan) 60%, transparent);
}

.loophix-premium-services .cinematic-card:hover::after {
  animation: glassSweep 0.7s ease-out forwards;
}

@keyframes glassSweep {
  0% { left: -100%; }
  100% { left: 200%; }
}

.loophix-premium-services .card-title {
  font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: 900; 
  color: var(--text-dark); margin: 0 0 10px 0; padding-top: 10px; transition: color 0.3s ease;
}

.loophix-premium-services .cinematic-card:hover .card-title {
  color: var(--brand-purple); /* Hover Title Color Change */
}

.loophix-premium-services .card-desc {
  font-family: 'Lato', sans-serif; font-size: 16px; font-weight: 700; 
  color: var(--text-dark); margin: 0 0 25px 0; line-height: 1.5;
}

/* ==========================================
   💎 🔥 VFX 4: KINETIC 3D ICONS (Pure CSS Magic)
=========================================== */
.loophix-premium-services .css-3d-icon {
  width: 70px; height: 70px; position: relative; margin-bottom: 20px;
  transform-style: preserve-3d;
  transform: rotateX(60deg) rotateZ(-45deg);
  /* Base floating motion for all icons */
  animation: floatBase 6s ease-in-out infinite alternate;
}

@keyframes floatBase {
  0% { transform: rotateX(60deg) rotateZ(-45deg) translateZ(0px); }
  100% { transform: rotateX(60deg) rotateZ(-45deg) translateZ(12px); }
}

.loophix-premium-services .cinematic-card:hover .css-3d-icon {
  animation-play-state: paused; /* Pause base float to show hover effect */
  transform: rotateX(55deg) rotateZ(-35deg) translateZ(20px) scale(1.05);
}

/* 1. On-Page (Levitating Pages) */
.loophix-premium-services .icon-pages .layer {
  position: absolute; width: 50px; height: 60px; border-radius: 4px;
  background: linear-gradient(135deg, var(--brand-purple), var(--brand-cyan));
  box-shadow: -5px 5px 15px rgba(0,0,0,0.15); border: 1px solid #fff;
  animation: levitateLayer 3s infinite alternate ease-in-out;
}
.loophix-premium-services .icon-pages .layer-1 { transform: translateZ(0px); opacity: 0.6; animation-delay: 0s; }
.loophix-premium-services .icon-pages .layer-2 { transform: translateZ(15px) translateX(-5px) translateY(5px); opacity: 0.8; animation-delay: 0.4s; }
.loophix-premium-services .icon-pages .layer-3 { transform: translateZ(30px) translateX(-10px) translateY(10px); animation-delay: 0.8s; }

@keyframes levitateLayer {
  0% { transform: translateZ(inherit) translateY(0); }
  100% { transform: translateZ(inherit) translateY(-8px); }
}

/* 2. Technical (Pumping Server Stack) */
.loophix-premium-services .icon-server .disk {
  position: absolute; width: 50px; height: 50px; border-radius: 8px;
  background: var(--text-dark); border: 2px solid var(--brand-cyan);
  box-shadow: -3px 3px 0 var(--brand-purple);
  animation: pumpDisk 2s infinite alternate ease-in-out;
}
.loophix-premium-services .icon-server .disk-1 { --tz: 0px; animation-delay: 0s; }
.loophix-premium-services .icon-server .disk-2 { --tz: 20px; animation-delay: 0.2s; }
.loophix-premium-services .icon-server .disk-3 { --tz: 40px; animation-delay: 0.4s; }

@keyframes pumpDisk {
  0% { transform: translateZ(var(--tz)); }
  100% { transform: translateZ(calc(var(--tz) + 8px)); }
}

/* 3. Off-Page (Pulsing Network Nodes) */
.loophix-premium-services .icon-network .node {
  position: absolute; width: 20px; height: 20px; border-radius: 50%;
  background: var(--brand-cyan); box-shadow: -3px 3px 10px var(--brand-purple);
  animation: pulseNode 1.5s infinite alternate;
}
.loophix-premium-services .icon-network .node-left { top: 40px; left: 0; --tz: 10px; animation-delay: 0s; }
.loophix-premium-services .icon-network .node-right { top: 40px; right: 0; --tz: 10px; animation-delay: 0.5s; }
.loophix-premium-services .icon-network .node-top { top: 0; left: 25px; --tz: 30px; background: var(--brand-purple); animation-delay: 1s; }
.loophix-premium-services .icon-network .link-line {
  position: absolute; top: 25px; left: 10px; width: 50px; height: 20px;
  border-top: 3px dashed var(--text-dark); border-left: 3px dashed var(--text-dark);
  transform: translateZ(10px); opacity: 0.5;
}

@keyframes pulseNode {
  0% { transform: translateZ(var(--tz)) scale(0.9); box-shadow: 0 0 5px var(--brand-cyan); }
  100% { transform: translateZ(var(--tz)) scale(1.2); box-shadow: 0 0 20px var(--brand-purple); }
}

/* 4. Local SEO (Spinning Ring & Bouncing Pin) */
.loophix-premium-services .icon-local .target-ring {
  position: absolute; top: 10px; left: 10px; width: 50px; height: 50px;
  border-radius: 50%; border: 4px dashed var(--brand-purple); transform: translateZ(0);
  animation: spinRing 8s linear infinite;
}
.loophix-premium-services .icon-local .target-dot {
  position: absolute; top: 30px; left: 30px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--text-dark); transform: translateZ(0);
}
.loophix-premium-services .icon-local .floating-pin {
  position: absolute; top: 20px; left: 20px; width: 30px; height: 30px;
  border-radius: 50% 50% 50% 0; background: var(--brand-cyan);
  box-shadow: -5px 5px 15px rgba(0,0,0,0.3);
  animation: bouncePin 1.5s ease-in-out infinite alternate;
}

@keyframes spinRing { 100% { transform: translateZ(0) rotate(360deg); } }
@keyframes bouncePin {
  0% { transform: rotateZ(45deg) translateZ(30px); }
  100% { transform: rotateZ(45deg) translateZ(50px); }
}

/* 5. Content SEO (Levitating 3D Blocks) */
.loophix-premium-services .icon-content .block {
  position: absolute; width: 40px; height: 40px; border-radius: 6px;
  background: linear-gradient(to bottom right, var(--brand-purple), var(--brand-cyan));
  box-shadow: -10px 10px 20px rgba(0,0,0,0.2); border: 2px solid #fff;
  animation: levitateBlock 3s infinite alternate ease-in-out;
}
.loophix-premium-services .icon-content .block-back { top: 0; left: 0; --tz: 0px; animation-delay: 0s; }
.loophix-premium-services .icon-content .block-front { top: 20px; left: 20px; --tz: 25px; animation-delay: 0.5s; }

@keyframes levitateBlock {
  0% { transform: translateZ(var(--tz)) translateY(0); }
  100% { transform: translateZ(calc(var(--tz) + 10px)) translateY(-5px); }
}

/* 6. Analytics (Live Equalizer Bars) */
.loophix-premium-services .icon-analytics .bar {
  position: absolute; bottom: 0; width: 15px; border-radius: 4px;
  background: var(--text-dark); box-shadow: -3px 3px 0 var(--brand-purple);
  transform-origin: bottom;
  animation: eqBars 1.5s ease-in-out infinite alternate;
}
.loophix-premium-services .icon-analytics .bar-1 { left: 5px; height: 20px; transform: translateZ(0); animation-delay: 0s; }
.loophix-premium-services .icon-analytics .bar-2 { left: 25px; height: 40px; transform: translateZ(0); background: var(--brand-cyan); animation-delay: 0.3s; }
.loophix-premium-services .icon-analytics .bar-3 { left: 45px; height: 65px; transform: translateZ(0); background: var(--brand-purple); box-shadow: -3px 3px 0 var(--text-dark); animation-delay: 0.6s; }

@keyframes eqBars {
  0% { transform: translateZ(0) scaleY(0.7); }
  100% { transform: translateZ(0) scaleY(1.1); }
}

/* ==========================================
   🗄️ 2 COLUMNS GRID & GLOWING BULLETS
=========================================== */
.loophix-premium-services .sub-services-grid {
  display: grid; 
  grid-template-columns: repeat(2, 1fr); 
  gap: 14px 10px; 
  margin-bottom: 35px; 
  flex-grow: 1; 
}

.loophix-premium-services .sub-services-grid span {
  font-family: 'Lato', sans-serif; 
  font-size: 15px; 
  font-weight: 800;
  color: var(--text-dark); 
  position: relative; 
  padding-left: 20px; 
  line-height: 1.4;
  display: flex;
  align-items: center; /* Ensures bullet is perfectly centered vertically */
  transition: transform 0.3s ease, color 0.3s ease;
  cursor: default;
}

/* Advanced Hover Motion for list items */
.loophix-premium-services .sub-services-grid span:hover {
  transform: translateX(4px);
  color: var(--brand-purple);
}

/* The Perfect Glowing Dot (Matches your reference image) */
.loophix-premium-services .sub-services-grid span::before {
  content: ""; 
  position: absolute; 
  left: 0; 
  top: 50%; 
  transform: translateY(-50%); /* Perfect vertical centering */
  width: 6px; 
  height: 6px;
  background: var(--brand-cyan); 
  border-radius: 50%; 
  /* Layered Shadow: First layer for soft pink/purple ring, Second for wide blur */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-purple) 20%, transparent),
              0 0 8px 1px var(--brand-purple); 
  transition: all 0.3s ease;
}

/* Bullet changes color on hover */
.loophix-premium-services .sub-services-grid span:hover::before {
  background: var(--brand-purple);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-cyan) 20%, transparent),
              0 0 8px 1px var(--brand-cyan); 
}

/* ==========================================
   🔥 WHATSAPP BUTTON (Animated Glow)
=========================================== */
.loophix-premium-services .wa-unique-btn {
  display: block; text-align: center; padding: 16px; border-radius: 8px;
  background: var(--text-dark); color: var(--brand-light) !important; 
  text-decoration: none !important; font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
  border: 1px solid var(--text-dark); transition: all 0.3s ease; position: relative; overflow: hidden; z-index: 1;
}

.loophix-premium-services .wa-unique-btn::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, var(--brand-purple), var(--brand-cyan));
  z-index: -1; opacity: 0; transition: opacity 0.3s ease;
}

.loophix-premium-services .wa-unique-btn:hover {
  border-color: transparent; transform: translateY(-3px);
  box-shadow: 0 10px 20px color-mix(in srgb, var(--brand-purple) 30%, transparent);
}
.loophix-premium-services .wa-unique-btn:hover::before { opacity: 1; }

/* ==========================================
   📱 RESPONSIVENESS
=========================================== */
@media (max-width: 768px) {
  .loophix-premium-services { padding: 80px 15px; }
  .loophix-premium-services .services-title { font-size: 32px; }
  .loophix-premium-services .cinematic-card { padding: 30px 20px; }
  .loophix-premium-services .sub-services-grid { gap: 10px 5px; }
  .loophix-premium-services .sub-services-grid span { font-size: 14px; padding-left: 18px; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f75ac60 *//* ==========================================
   PROBLEM -> SOLUTION SECTION STYLES
=========================================== */
.loophix-problem-solution {
  --brand-light: #FEFDFF;  
  --brand-purple: #C581F1; 
  --brand-cyan: #7FFA;     
  --text-dark: #1A1A1A;
  --error-bg: #FFF5F5;
  --error-text: #E53E3E;
  --success-bg: #F0FFF4;
  --success-text: #38A169;

  background-color: #FAFAFC; 
  padding: 120px 20px;
  font-family: 'Lato', sans-serif;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.loophix-problem-solution .ps-container {
  max-width: 1250px;
  margin: 0 auto;
}

/* --- Header Styles --- */
.loophix-problem-solution .ps-header { text-align: center; margin-bottom: 70px; }

.loophix-problem-solution .eyebrow-box {
  display: inline-block; padding: 8px 24px; border-radius: 4px;
  background: var(--text-dark); color: var(--brand-light); 
  font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px;
  margin-bottom: 25px; box-shadow: 4px 4px 0 var(--brand-cyan);
}

.loophix-problem-solution .ps-title { 
  font-family: 'Montserrat', sans-serif; font-size: clamp(36px, 5vw, 60px); 
  font-weight: 900; color: var(--text-dark); margin: 0 0 20px 0; line-height: 1.1; letter-spacing: -1px;
}

.loophix-problem-solution .text-gradient-3d { 
  background: linear-gradient(90deg, var(--brand-purple), var(--brand-cyan), var(--brand-purple)); 
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; 
  filter: drop-shadow(0px 4px 8px color-mix(in srgb, var(--brand-purple) 30%, transparent));
  animation: textShimmer 3s linear infinite;
}

.loophix-problem-solution .ps-subtitle { 
  font-family: 'Lato', sans-serif; font-weight: 800;
  color: #555; font-size: 18px; margin: 0 auto; max-width: 700px; line-height: 1.6; 
}

/* ==========================================
   🗄️ THE GRID (FORCED 2 ROWS & 2 COLUMNS)
=========================================== */
.loophix-problem-solution .ps-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 Columns fix = 2 Rows automatically */
  gap: 40px; /* Slightly wider gap for the 2x2 layout */
}

/* ==========================================
   ✨ CARD STYLES & STAGGERED ENTRANCE ANIMATION
=========================================== */
.loophix-problem-solution .ps-card {
  display: flex;
  flex-direction: column;
  background: transparent;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  
  /* Initial state for animation */
  opacity: 0;
  transform: translateY(40px);
  animation: cardFadeIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Staggered Delay so they appear one by one */
.loophix-problem-solution .ps-card:nth-child(1) { animation-delay: 0.1s; }
.loophix-problem-solution .ps-card:nth-child(2) { animation-delay: 0.3s; }
.loophix-problem-solution .ps-card:nth-child(3) { animation-delay: 0.5s; }
.loophix-problem-solution .ps-card:nth-child(4) { animation-delay: 0.7s; }

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

.loophix-problem-solution .ps-card:hover {
  transform: translateY(-8px) scale(1.01);
}

.loophix-problem-solution .ps-problem,
.loophix-problem-solution .ps-solution {
  padding: 35px 25px;
  position: relative;
  z-index: 2;
  transition: all 0.4s ease;
}

/* --- Problem Box (Muted) --- */
.loophix-problem-solution .ps-problem {
  background: #FFFFFF;
  border: 1px solid #EAEAEA;
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.02);
  filter: grayscale(0.6) opacity(0.8); /* Muted initial look */
}

/* --- Solution Box --- */
.loophix-problem-solution .ps-solution {
  background: #FFFFFF;
  border: 1px solid #EAEAEA;
  border-top: none;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* 🔥 Card Hover Magic: Upgraded */
.loophix-problem-solution .ps-card:hover .ps-solution {
  border-color: color-mix(in srgb, var(--brand-cyan) 50%, transparent);
  box-shadow: 0 20px 50px color-mix(in srgb, var(--brand-purple) 25%, transparent),
              inset 0 -4px 0 var(--brand-cyan);
  background: linear-gradient(to bottom, #FFFFFF, color-mix(in srgb, var(--brand-cyan) 5%, transparent));
}

.loophix-problem-solution .ps-card:hover .ps-problem {
  filter: grayscale(0) opacity(1); /* Wakes up completely on hover */
  background: color-mix(in srgb, var(--error-bg) 30%, #fff);
}

/* --- Typography --- */
.loophix-problem-solution .box-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--text-dark);
  margin: 15px 0 10px 0;
  line-height: 1.3;
}

.loophix-problem-solution .box-desc {
  font-size: 16px;
  font-weight: 600;
  color: #666;
  line-height: 1.6;
  margin: 0;
}

/* --- Badges & Hover Pulse --- */
.loophix-problem-solution .badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: transform 0.3s ease;
}
.loophix-problem-solution .badge-error {
  background: var(--error-bg);
  color: var(--error-text);
  border: 1px solid #FED7D7;
}
.loophix-problem-solution .badge-success {
  background: var(--success-bg);
  color: var(--success-text);
  border: 1px solid #C6F6D5;
}

.loophix-problem-solution .ps-card:hover .badge-error {
  transform: scale(1.05); /* Pulse effect */
}
.loophix-problem-solution .ps-card:hover .badge-success {
  background: var(--text-dark);
  color: var(--brand-cyan);
  border-color: var(--text-dark);
  box-shadow: 0 0 10px var(--brand-cyan);
  transform: scale(1.05);
}

/* ==========================================
   🔥 Animated Energy Divider (The Arrow)
=========================================== */
.loophix-problem-solution .ps-flow-divider {
  height: 40px;
  background: #FFFFFF;
  border-left: 1px solid #EAEAEA;
  border-right: 1px solid #EAEAEA;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  transition: border-color 0.4s ease;
}

.loophix-problem-solution .ps-card:hover .ps-flow-divider {
  border-color: color-mix(in srgb, var(--brand-cyan) 50%, transparent);
}

/* The physical arrow shape */
.loophix-problem-solution .energy-arrow {
  width: 24px;
  height: 24px;
  background: #E0E0E0;
  clip-path: polygon(50% 100%, 0 40%, 25% 40%, 25% 0, 75% 0, 75% 40%, 100% 40%);
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* The flowing energy inside the arrow */
.loophix-problem-solution .energy-arrow::before {
  content: "";
  position: absolute;
  top: -100%; left: 0; width: 100%; height: 100%;
  background: linear-gradient(to bottom, var(--brand-cyan), var(--brand-purple));
  animation: arrowFlow 1.5s linear infinite;
}

.loophix-problem-solution .ps-card:hover .energy-arrow {
  transform: scale(1.4) translateY(3px); /* Gets bigger and points harder down */
  box-shadow: 0 0 15px var(--brand-purple); /* Adds glow */
}

@keyframes arrowFlow {
  0% { top: -100%; }
  100% { top: 100%; }
}

/* ==========================================
   📱 RESPONSIVENESS (Mobile/Tablet Fix)
=========================================== */
@media (max-width: 992px) {
  /* On tablets and mobile, switch back to 1 column so it doesn't squish */
  .loophix-problem-solution .ps-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .loophix-problem-solution { padding: 80px 15px; }
  .loophix-problem-solution .ps-title { font-size: 32px; }
  .loophix-problem-solution .ps-problem,
  .loophix-problem-solution .ps-solution { padding: 25px 20px; }
  .loophix-problem-solution .box-title { font-size: 20px; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d9fa2c5 *//* ==========================================
   PROCESS / HOW WE WORK STYLES
=========================================== */
.loophix-process-section {
  --brand-light: #FEFDFF;  
  --brand-purple: #C581F1; 
  --brand-cyan: #7FFA;     
  --text-dark: #1A1A1A;

  background-color: #FFFFFF; /* Pure white to contrast with the previous section */
  padding: 120px 20px;
  font-family: 'Lato', sans-serif;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.loophix-process-section .process-container {
  max-width: 1250px;
  margin: 0 auto;
}

/* --- Header Styles --- */
.loophix-process-section .process-header { text-align: center; margin-bottom: 80px; }

.loophix-process-section .eyebrow-box {
  display: inline-block; padding: 8px 24px; border-radius: 4px;
  background: var(--text-dark); color: var(--brand-light); 
  font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px;
  margin-bottom: 25px; box-shadow: 4px 4px 0 var(--brand-purple);
}

.loophix-process-section .process-title { 
  font-family: 'Montserrat', sans-serif; font-size: clamp(36px, 5vw, 60px); 
  font-weight: 900; color: var(--text-dark); margin: 0 0 20px 0; line-height: 1.1; letter-spacing: -1px;
}

.loophix-process-section .text-gradient-3d { 
  background: linear-gradient(90deg, var(--brand-purple), var(--brand-cyan), var(--brand-purple)); 
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; 
  filter: drop-shadow(0px 4px 8px color-mix(in srgb, var(--brand-purple) 30%, transparent));
  animation: textShimmer 3s linear infinite;
}

.loophix-process-section .process-subtitle { 
  font-family: 'Lato', sans-serif; font-weight: 800;
  color: #555; font-size: 18px; margin: 0 auto; max-width: 700px; line-height: 1.6; 
}

/* ==========================================
   🧩 THE LAYOUT (Flex Wrap for 5 Items)
=========================================== */
.loophix-process-section .process-flex-layout {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Centers the bottom row automatically */
  gap: 30px;
}

/* ==========================================
   ✨ CARD & VFX STYLES
=========================================== */
.loophix-process-section .process-card {
  flex: 1 1 350px; /* Allows cards to grow and shrink beautifully */
  max-width: 400px; /* Prevents them from getting too wide */
  background: #FAFAFC;
  border: 1px solid #EAEAEA;
  border-radius: 16px;
  padding: 40px 30px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.03);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease, border-color 0.4s ease;
  
  /* Staggered Entrance Animation Setup */
  opacity: 0;
  transform: translateY(40px);
  animation: cardFadeUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Adding Delays */
.loophix-process-section .process-card:nth-child(1) { animation-delay: 0.1s; }
.loophix-process-section .process-card:nth-child(2) { animation-delay: 0.25s; }
.loophix-process-section .process-card:nth-child(3) { animation-delay: 0.4s; }
.loophix-process-section .process-card:nth-child(4) { animation-delay: 0.55s; }
.loophix-process-section .process-card:nth-child(5) { animation-delay: 0.7s; }

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

/* --- Giant Background Watermark Number --- */
.loophix-process-section .step-watermark {
  position: absolute;
  top: -20px;
  right: -10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 150px;
  font-weight: 900;
  color: var(--text-dark);
  opacity: 0.03; /* Barely visible initially */
  line-height: 1;
  pointer-events: none;
  z-index: 0;
  transition: all 0.5s ease;
}

/* --- Card Content --- */
.loophix-process-section .card-content {
  position: relative;
  z-index: 2;
}

.loophix-process-section .icon-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid #EAEAEA;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
  color: var(--text-dark);
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  transition: all 0.4s ease;
}

.loophix-process-section .icon-circle svg {
  width: 28px;
  height: 28px;
}

.loophix-process-section .step-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: var(--text-dark);
  margin: 0 0 15px 0;
  transition: color 0.3s ease;
}

.loophix-process-section .step-desc {
  font-size: 16px;
  font-weight: 600;
  color: #666;
  line-height: 1.6;
  margin: 0;
}

/* --- The Animated Hover Track (Progress Line) --- */
.loophix-process-section .hover-track {
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  width: 0%; /* Starts invisible */
  background: linear-gradient(90deg, var(--brand-cyan), var(--brand-purple));
  z-index: 3;
  transition: width 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ==========================================
   🔥 HOVER MAGIC
=========================================== */
.loophix-process-section .process-card:hover {
  transform: translateY(-10px);
  background: #FFFFFF;
  border-color: color-mix(in srgb, var(--brand-purple) 30%, transparent);
  box-shadow: 0 20px 40px rgba(0,0,0,0.06), 
              0 10px 20px color-mix(in srgb, var(--brand-cyan) 10%, transparent);
}

/* Watermark glows and moves slightly */
.loophix-process-section .process-card:hover .step-watermark {
  opacity: 0.1;
  color: var(--brand-purple);
  transform: scale(1.05) translate(-10px, 10px);
}

/* Icon pops up and gets colored */
.loophix-process-section .process-card:hover .icon-circle {
  background: var(--text-dark);
  color: var(--brand-cyan);
  border-color: var(--text-dark);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--brand-purple) 30%, transparent);
  transform: scale(1.1) rotate(5deg);
}

/* Title changes color */
.loophix-process-section .process-card:hover .step-title {
  color: var(--brand-purple);
}

/* Progress track shoots across */
.loophix-process-section .process-card:hover .hover-track {
  width: 100%;
}

/* ==========================================
   📱 RESPONSIVENESS
=========================================== */
@media (max-width: 768px) {
  .loophix-process-section { padding: 80px 15px; }
  .loophix-process-section .process-title { font-size: 32px; }
  .loophix-process-section .process-card { flex: 1 1 100%; max-width: 100%; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-0d9facc *//* ==========================================
   WHY CHOOSE US / BENEFITS STYLES
=========================================== */
.loophix-benefits-section {
  --brand-light: #FEFDFF;  
  --brand-purple: #C581F1; 
  --brand-cyan: #7FFA;     
  --text-dark: #1A1A1A;

  /* Subtle dot pattern background for tech-agency vibe */
  background-color: #FAFAFC;
  background-image: radial-gradient(#E0E0E0 1px, transparent 1px);
  background-size: 24px 24px;
  padding: 120px 20px;
  font-family: 'Lato', sans-serif;
  position: relative;
  z-index: 1;
}

.loophix-benefits-section .benefits-container {
  max-width: 1250px;
  margin: 0 auto;
}

/* --- Header Styles --- */
.loophix-benefits-section .benefits-header { text-align: center; margin-bottom: 70px; }

.loophix-benefits-section .eyebrow-box {
  display: inline-block; padding: 8px 24px; border-radius: 4px;
  background: var(--text-dark); color: var(--brand-light); 
  font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px;
  margin-bottom: 25px; box-shadow: 4px 4px 0 var(--brand-cyan);
}

.loophix-benefits-section .benefits-title { 
  font-family: 'Montserrat', sans-serif; font-size: clamp(36px, 5vw, 60px); 
  font-weight: 900; color: var(--text-dark); margin: 0 0 20px 0; line-height: 1.1; letter-spacing: -1px;
}

.loophix-benefits-section .text-gradient-3d { 
  background: linear-gradient(90deg, var(--brand-purple), var(--brand-cyan), var(--brand-purple)); 
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; 
  filter: drop-shadow(0px 4px 8px color-mix(in srgb, var(--brand-purple) 30%, transparent));
  animation: textShimmer 3s linear infinite;
}

.loophix-benefits-section .benefits-subtitle { 
  font-family: 'Lato', sans-serif; font-weight: 800;
  color: #555; font-size: 18px; margin: 0 auto; max-width: 700px; line-height: 1.6; 
}

/* ==========================================
   🗄️ THE GRID (2x2 Layout)
=========================================== */
.loophix-benefits-section .benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

/* ==========================================
   ✨ MAGIC BORDER TRACING CARDS
=========================================== */
.loophix-benefits-section .benefit-card {
  position: relative;
  background: #EAEAEA; /* The base border color */
  border-radius: 16px;
  padding: 2px; /* This padding creates the border thickness */
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.03);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
  
  /* Initial state for staggered entry */
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.loophix-benefits-section .benefit-card:nth-child(1) { animation-delay: 0.1s; }
.loophix-benefits-section .benefit-card:nth-child(2) { animation-delay: 0.2s; }
.loophix-benefits-section .benefit-card:nth-child(3) { animation-delay: 0.3s; }
.loophix-benefits-section .benefit-card:nth-child(4) { animation-delay: 0.4s; }

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

/* 🔥 The Animated Spinning Gradient Border */
.loophix-benefits-section .benefit-card::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, transparent 70%, var(--brand-cyan) 85%, var(--brand-purple) 100%);
  transform: translate(-50%, -50%) rotate(0deg);
  animation: spinBorder 4s linear infinite;
  opacity: 0; /* Hidden initially, shows on hover */
  transition: opacity 0.4s ease;
}

@keyframes spinBorder {
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* --- Card Inner Background (Hides the middle of the conic gradient) --- */
.loophix-benefits-section .card-inner {
  position: relative;
  background: #FFFFFF;
  border-radius: 14px; /* Slightly less than parent to fit perfectly */
  padding: 40px 35px;
  height: 100%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  transition: background 0.4s ease;
}

/* ==========================================
   🔥 HOVER EFFECTS
=========================================== */
.loophix-benefits-section .benefit-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px color-mix(in srgb, var(--brand-purple) 15%, transparent);
}

.loophix-benefits-section .benefit-card:hover::before {
  opacity: 1; /* Reveals the spinning glowing border */
}

/* Subtly tint the inner card on hover */
.loophix-benefits-section .benefit-card:hover .card-inner {
  background: linear-gradient(135deg, #FFFFFF, color-mix(in srgb, var(--brand-cyan) 5%, transparent));
}

/* ==========================================
   🎨 INNER CONTENT STYLING
=========================================== */
.loophix-benefits-section .icon-box {
  width: 55px;
  height: 55px;
  border-radius: 12px;
  background: var(--text-dark);
  color: var(--brand-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
  box-shadow: 4px 4px 0 var(--brand-purple);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.loophix-benefits-section .icon-box svg {
  width: 26px;
  height: 26px;
}

.loophix-benefits-section .benefit-card:hover .icon-box {
  transform: translate(-4px, -4px);
  box-shadow: 8px 8px 0 var(--brand-cyan);
  background: var(--brand-purple);
  color: var(--text-dark);
}

.loophix-benefits-section .benefit-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--text-dark);
  margin: 0 0 15px 0;
  line-height: 1.3;
}

.loophix-benefits-section .benefit-desc {
  font-size: 16px;
  font-weight: 600;
  color: #666;
  line-height: 1.6;
  margin: 0;
}

/* ==========================================
   📱 RESPONSIVENESS
=========================================== */
@media (max-width: 992px) {
  .loophix-benefits-section .benefits-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .loophix-benefits-section { padding: 80px 15px; }
  .loophix-benefits-section .benefits-title { font-size: 32px; }
  .loophix-benefits-section .card-inner { padding: 30px 25px; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c7a1d6c *//* ==========================================
   CTA SECTION (LIGHT / BRAND THEME)
=========================================== */
.loophix-cta-section {
  --brand-light: #FEFDFF;  
  --brand-purple: #C581F1; 
  --brand-cyan: #7FFA;     
  --text-dark: #1A1A1A;

  background-color: #FAFAFC; /* Matches previous sections */
  padding: 120px 20px;
  font-family: 'Lato', sans-serif;
  position: relative;
  z-index: 1;
  overflow: hidden;
  text-align: center;
}

.loophix-cta-section * { box-sizing: border-box; }
.loophix-cta-section a { text-decoration: none !important; } /* No underlines anywhere */

/* 🔥 Soft Ambient Glow for the background */
.loophix-cta-section .cta-ambient-bg {
  position: absolute;
  top: 50%; left: 50%;
  width: 800px; height: 800px;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand-cyan) 10%, transparent) 0%, transparent 60%);
  transform: translate(-50%, -50%);
  z-index: 0; pointer-events: none;
  animation: pulseGlow 6s infinite alternate;
}

@keyframes pulseGlow {
  0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
}

.loophix-cta-section .cta-container {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* --- Header Styles (Light Theme) --- */
.loophix-cta-section .eyebrow-box {
  display: inline-block; padding: 8px 24px; border-radius: 4px;
  background: var(--text-dark); color: var(--brand-light); 
  font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px;
  margin-bottom: 25px; box-shadow: 4px 4px 0 var(--brand-cyan);
}

.loophix-cta-section .cta-title { 
  font-family: 'Montserrat', sans-serif; font-size: clamp(36px, 5vw, 60px); 
  font-weight: 900; color: var(--text-dark); margin: 0 0 20px 0; line-height: 1.1; letter-spacing: -1px;
}

.loophix-cta-section .text-gradient-3d { 
  background: linear-gradient(90deg, var(--brand-purple), var(--brand-cyan), var(--brand-purple)); 
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; 
  filter: drop-shadow(0px 4px 8px color-mix(in srgb, var(--brand-purple) 30%, transparent));
  animation: textShimmer 3s linear infinite;
}

.loophix-cta-section .cta-subtitle { 
  font-family: 'Lato', sans-serif; font-weight: 800;
  color: #555; font-size: 18px; margin: 0 auto 50px auto; max-width: 600px; line-height: 1.6; 
}

/* ==========================================
   📱 THE 3 ACTION BUTTONS
=========================================== */
.loophix-cta-section .cta-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap; 
}

.loophix-cta-section .action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 800;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.loophix-cta-section .action-btn svg { width: 20px; height: 20px; }

/* 1. WhatsApp Button */
.loophix-cta-section .wa-btn {
  background: #25D366; 
  color: #FFFFFF !important;
  box-shadow: 0 8px 15px rgba(37, 211, 102, 0.2);
}
.loophix-cta-section .wa-btn:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 25px rgba(37, 211, 102, 0.4);
}

/* 2. Call Button */
.loophix-cta-section .call-btn {
  background: var(--brand-purple);
  color: var(--brand-light) !important;
  box-shadow: 0 8px 15px color-mix(in srgb, var(--brand-purple) 30%, transparent);
}
.loophix-cta-section .call-btn:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 25px color-mix(in srgb, var(--brand-purple) 50%, transparent);
}

/* 3. Send Email (Triggers Popup) - Clean Light Theme Styling */
.loophix-cta-section .email-btn {
  background: #FFFFFF;
  color: var(--text-dark) !important;
  border: 2px solid #EAEAEA;
  box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}
.loophix-cta-section .email-btn:hover {
  background: var(--text-dark);
  color: var(--brand-cyan) !important;
  border-color: var(--text-dark);
  transform: translateY(-5px);
  box-shadow: 0 15px 25px color-mix(in srgb, var(--brand-cyan) 30%, transparent);
}

/* ==========================================
   ✉️ PURE CSS MODAL (POPUP FORM)
=========================================== */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(26, 26, 26, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.4s ease;
  padding: 20px;
}

/* The Magic Trigger: When URL has #loophix-contact-modal */
.modal-overlay:target {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.close-overlay {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: default;
}

.modal-box {
  background: #FFFFFF;
  width: 100%;
  max-width: 600px;
  border-radius: 16px;
  padding: 40px;
  position: relative;
  z-index: 10000;
  box-shadow: 0 25px 50px rgba(0,0,0,0.3);
  transform: translateY(30px) scale(0.95);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border-bottom: 4px solid var(--brand-cyan);
}

.modal-overlay:target .modal-box {
  transform: translateY(0) scale(1);
}

.close-btn {
  position: absolute; top: 20px; right: 20px;
  font-size: 28px; color: #999; font-weight: bold;
  text-decoration: none !important; line-height: 1; transition: color 0.3s;
}
.close-btn:hover { color: var(--text-dark); }

.modal-header { text-align: left; margin-bottom: 30px; }
.modal-header h3 {
  font-family: 'Montserrat', sans-serif; font-size: 28px; font-weight: 900;
  color: var(--text-dark); margin: 0 0 10px 0;
}
.modal-header p { font-family: 'Lato', sans-serif; color: #666; font-size: 15px; margin: 0; }
.modal-header p strong { color: var(--brand-purple); }

/* --- Form Styles --- */
.loophix-form { display: flex; flex-direction: column; gap: 20px; text-align: left; }

.input-row { display: flex; gap: 20px; }
.input-group { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.full-width { flex: 100%; }

.loophix-form label {
  font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 800; color: var(--text-dark); text-transform: uppercase; letter-spacing: 1px;
}

.loophix-form input,
.loophix-form select,
.loophix-form textarea {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid #EAEAEA;
  border-radius: 8px;
  background: #FAFAFC;
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  color: var(--text-dark);
  outline: none;
  transition: all 0.3s ease;
}

.loophix-form textarea { resize: vertical; }

.loophix-form input:focus,
.loophix-form select:focus,
.loophix-form textarea:focus {
  background: #FFFFFF;
  border-color: var(--brand-cyan);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-cyan) 20%, transparent);
}

.submit-btn {
  background: linear-gradient(90deg, var(--brand-purple), var(--brand-cyan));
  color: var(--brand-light);
  border: none; border-radius: 8px;
  padding: 18px; font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 800;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: all 0.3s ease; box-shadow: 0 10px 20px color-mix(in srgb, var(--brand-purple) 30%, transparent);
}

.submit-btn svg { width: 20px; height: 20px; }

.submit-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 30px color-mix(in srgb, var(--brand-cyan) 40%, transparent);
}

/* ==========================================
   📱 RESPONSIVENESS
=========================================== */
@media (max-width: 768px) {
  .loophix-cta-section { padding: 80px 15px; }
  .loophix-cta-section .cta-title { font-size: 32px; }
  .loophix-cta-section .cta-actions { flex-direction: column; width: 100%; }
  .loophix-cta-section .action-btn { width: 100%; }
  
  .input-row { flex-direction: column; gap: 20px; }
  .modal-box { padding: 30px 20px; margin: 20px; width: auto; }
}/* End custom CSS */