@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;800&family=Inter:wght@300;400;600&display=swap');

:root {
   --bg-color: #030305;
   --surface-color: #0e0e12;
   --surface-light: #1a1a24;
   --text-primary: #ffffff;
   --text-secondary: #a0a0b0;
   --accent-1: #00f0ff;
   --accent-2: #7000ff;
   --accent-glow: rgba(0, 240, 255, 0.3);
   --font-heading: 'Syne', sans-serif;
   --font-body: 'Inter', sans-serif;
   --transition-smooth: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
   --header-height: 90px;
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html {
   scroll-behavior: auto;
   font-size: 16px;
}

body {
   background-color: var(--bg-color);
   color: var(--text-primary);
   font-family: var(--font-body);
   overflow-x: hidden;
   cursor: none;
   /* Custom Cursor */
}

/* Custom Cursor */
.cursor-dot,
.cursor-outline {
   position: fixed;
   top: 0;
   left: 0;
   border-radius: 50%;
   pointer-events: none;
   z-index: 9999;
   transform: translate(-50%, -50%);
}

.cursor-dot {
   width: 8px;
   height: 8px;
   background: var(--accent-1);
}

.cursor-outline {
   width: 40px;
   height: 40px;
   border: 1px solid var(--accent-1);
   transition: width 0.3s, height 0.3s, background 0.3s;
}

.cursor-outline.hover {
   width: 60px;
   height: 60px;
   background: var(--accent-glow);
   border-color: transparent;
}

/* Layout & Typography */
.container {
   width: 90%;
   max-width: 1400px;
   margin: 0 auto;
}

h1,
h2,
h3,
h4 {
   font-family: var(--font-heading);
   font-weight: 800;
   text-transform: uppercase;
}

a {
   text-decoration: none;
   color: inherit;
}

p {
   line-height: 1.6;
   color: var(--text-secondary);
}

/* Header (Strictly Consistent) */
.site-header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: var(--header-height);
   background: rgba(3, 3, 5, 0.8);
   backdrop-filter: blur(15px);
   z-index: 1000;
   border-bottom: 1px solid rgba(255, 255, 255, 0.05);
   display: flex;
   align-items: center;
   transition: var(--transition-smooth);
}

.header-container {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
}

.site-logo {
   height: 80px;
   object-fit: contain;
   filter:brightness(0) invert(1);
}

.site-nav ul {
   display: flex;
   gap: 40px;
   list-style: none;
}

.site-nav a {
   font-weight: 600;
   font-size: 0.9rem;
   letter-spacing: 1px;
   transition: color 0.3s;
   position: relative;
}

.site-nav a::after {
   content: '';
   position: absolute;
   bottom: -5px;
   left: 0;
   width: 0%;
   height: 2px;
   background: var(--accent-1);
   transition: width 0.3s;
}

.site-nav a:hover::after {
   width: 100%;
}

.btn-primary {
   background: linear-gradient(45deg, var(--accent-2), var(--accent-1));
   color: #fff;
   padding: 12px 30px;
   border-radius: 30px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 1px;
   border: none;
   cursor: pointer;
   position: relative;
   overflow: hidden;
   z-index: 1;
   display: inline-block;
}

.btn-primary::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(45deg, var(--accent-1), var(--accent-2));
   z-index: -1;
   transition: opacity 0.5s ease;
   opacity: 0;
}

.btn-primary:hover::before {
   opacity: 1;
}

/* Sections Common */
section {
   padding: 120px 0;
   position: relative;
}

.section-title {
   font-size: 3rem;
   margin-bottom: 20px;
   text-align: center;
   background: linear-gradient(to right, #fff, var(--text-secondary));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

/* Hero Section (3D & Animations) */
.hero {
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   overflow: hidden;
}

.hero-bg {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: radial-gradient(circle at center, var(--surface-light) 0%, var(--bg-color) 70%);
   z-index: 0;
}

.hero-content {
   position: relative;
   z-index: 1;
   text-align: center;
   perspective: 1000px;
}

.hero-title {
   font-size: clamp(3rem, 8vw, 7rem);
   line-height: 1;
   margin-bottom: 20px;
   transform-style: preserve-3d;
}

.hero-subtitle {
   font-size: 1.2rem;
   max-width: 600px;
   margin: 0 auto 40px;
   color: var(--text-secondary);
}

.hero-3d-element {
   position: absolute;
   width: 300px;
   height: 300px;
   border: 2px solid var(--accent-1);
   border-radius: 30%;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) rotateX(45deg) rotateY(45deg);
   opacity: 0.1;
   pointer-events: none;
   animation: rotate3d 20s linear infinite;
}

@keyframes rotate3d {
   100% {
      transform: translate(-50%, -50%) rotateX(405deg) rotateY(405deg);
   }
}

/* Services */
.services-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 30px;
   margin-top: 60px;
}

.service-card {
   background: var(--surface-color);
   padding: 50px 40px;
   border-radius: 20px;
   border: 1px solid rgba(255, 255, 255, 0.05);
   transition: var(--transition-smooth);
   position: relative;
   overflow: hidden;
}

.service-card:hover {
   transform: translateY(-10px);
   border-color: var(--accent-1);
   box-shadow: 0 10px 40px var(--accent-glow);
}

.service-icon {
   font-size: 2.5rem;
   color: var(--accent-1);
   margin-bottom: 20px;
}

.service-card h3 {
   font-size: 1.5rem;
   margin-bottom: 15px;
}

/* Interactive Service Calculator */
.calculator-box {
   background: var(--surface-color);
   padding: 50px;
   border-radius: 20px;
   border: 1px solid rgba(255, 255, 255, 0.05);
   max-width: 800px;
   margin: 0 auto;
}

.calc-group {
   margin-bottom: 30px;
}

.calc-group label {
   display: block;
   font-size: 1.1rem;
   margin-bottom: 15px;
   font-weight: 600;
}

.calc-slider {
   width: 100%;
   -webkit-appearance: none;
   height: 6px;
   background: #333;
   border-radius: 5px;
   outline: none;
   transition: 0.3s;
}

.calc-slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   width: 25px;
   height: 25px;
   border-radius: 50%;
   background: var(--accent-1);
   cursor: pointer;
}

.calc-result {
   text-align: center;
   margin-top: 40px;
   padding-top: 30px;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.calc-result h4 {
   font-size: 1.2rem;
   color: var(--text-secondary);
}

.calc-result .roi-value {
   font-size: 4rem;
   color: var(--accent-1);
   font-family: var(--font-heading);
   font-weight: 800;
}

/* Sample Campaign Reports (CSS Charts) */
.reports-container {
   display: flex;
   gap: 40px;
   align-items: center;
   flex-wrap: wrap;
}

.chart-box {
   flex: 1;
   min-width: 300px;
   background: var(--surface-color);
   padding: 40px;
   border-radius: 20px;
}

.chart-bar {
   display: flex;
   align-items: center;
   margin-bottom: 20px;
}

.chart-label {
   width: 100px;
   font-weight: 600;
}

.chart-track {
   flex: 1;
   height: 12px;
   background: rgba(255, 255, 255, 0.05);
   border-radius: 10px;
   overflow: hidden;
}

.chart-fill {
   height: 100%;
   background: linear-gradient(90deg, var(--accent-2), var(--accent-1));
   width: 0;
   transition: width 1.5s ease-out;
}

.reports-text {
   flex: 1;
   min-width: 300px;
}

/* Industries Marquee */
.industries {
   overflow: hidden;
   white-space: nowrap;
   padding: 60px 0;
   background: var(--surface-light);
   border-top: 1px solid rgba(255, 255, 255, 0.05);
   border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.marquee-content {
   display: inline-block;
   animation: marquee 20s linear infinite;
}

.marquee-item {
   display: inline-block;
   font-size: 3rem;
   font-family: var(--font-heading);
   color: transparent;
   -webkit-text-stroke: 1px rgba(255, 255, 255, 0.4);
   margin: 0 40px;
   transition: 0.3s;
   cursor: default;
}

.marquee-item:hover {
   color: var(--accent-1);
   -webkit-text-stroke: 0px;
}

@keyframes marquee {
   0% {
      transform: translateX(0);
   }

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

/* Testimonials */
.testimonials-wrapper {
   display: flex;
   gap: 30px;
   overflow-x: auto;
   padding-bottom: 40px;
   scroll-snap-type: x mandatory;
}

.testimonial-card {
   min-width: 400px;
   background: var(--surface-color);
   padding: 40px;
   border-radius: 20px;
   scroll-snap-align: start;
}

.test-quote {
   font-size: 1.2rem;
   font-style: italic;
   margin-bottom: 20px;
}

.test-author {
   display: flex;
   align-items: center;
   gap: 15px;
}

.test-avatar {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background: #333;
}

.test-name {
   font-weight: 600;
   color: var(--accent-1);
}

/* Contact Forms / Legal Pages Form */
.contact-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 60px;
}

.form-group {
   margin-bottom: 25px;
   position: relative;
}

.form-control {
   width: 100%;
   background: transparent;
   border: none;
   border-bottom: 1px solid rgba(255, 255, 255, 0.2);
   color: #fff;
   font-size: 1.1rem;
   padding: 15px 0;
   outline: none;
   transition: 0.3s;
   font-family: var(--font-body);
}

.form-control:focus {
   border-bottom-color: var(--accent-1);
}

textarea.form-control {
   resize: vertical;
   min-height: 100px;
}

.contact-info-card {
   background: var(--surface-color);
   padding: 50px;
   border-radius: 20px;
}

.info-item {
   margin-bottom: 30px;
}

.info-title {
   font-size: 1.5rem;
   margin-bottom: 10px;
   color: var(--accent-1);
}

/* Live Chat Widget */
.live-chat-btn {
   position: fixed;
   bottom: 30px;
   right: 30px;
   width: 60px;
   height: 60px;
   background: var(--accent-1);
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
   box-shadow: 0 5px 20px var(--accent-glow);
   z-index: 900;
   transition: transform 0.3s;
}

.live-chat-btn:hover {
   transform: scale(1.1);
}

.chat-window {
   position: fixed;
   bottom: 100px;
   right: 30px;
   width: 350px;
   background: var(--surface-color);
   border-radius: 20px;
   border: 1px solid rgba(255, 255, 255, 0.1);
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
   z-index: 900;
   transform: translateY(20px);
   opacity: 0;
   pointer-events: none;
   transition: 0.3s;
}

.chat-window.active {
   transform: translateY(0);
   opacity: 1;
   pointer-events: auto;
}

.chat-header {
   background: linear-gradient(45deg, var(--accent-2), var(--accent-1));
   padding: 20px;
   border-radius: 20px 20px 0 0;
   font-weight: 600;
}

.chat-body {
   padding: 20px;
   height: 250px;
   overflow-y: auto;
   color: var(--text-secondary);
   font-size: 0.9rem;
}

.chat-input {
   display: flex;
   border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.chat-input input {
   flex: 1;
   background: transparent;
   border: none;
   padding: 15px;
   color: #fff;
   outline: none;
}

.chat-input button {
   background: transparent;
   border: none;
   padding: 0 20px;
   color: var(--accent-1);
   cursor: pointer;
   font-weight: 600;
}

/* Footer (Strictly Consistent) */
.site-footer {
   background: var(--surface-light);
   padding: 80px 0 20px;
   border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-container {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr;
   gap: 60px;
   margin-bottom: 60px;
}

.footer-logo {
   height: 80px;
   filter:brightness(0) invert(1);
   margin-bottom: 20px;
}

.footer-title {
   font-size: 1.2rem;
   margin-bottom: 25px;
   color: #fff;
}

.footer-col ul {
   list-style: none;
}

.footer-col ul li {
   margin-bottom: 15px;
}

.footer-col ul li a {
   color: var(--text-secondary);
   transition: color 0.3s;
}

.footer-col ul li a:hover {
   color: var(--accent-1);
}

.footer-bottom {
   text-align: center;
   padding-top: 20px;
   border-top: 1px solid rgba(255, 255, 255, 0.05);
   color: var(--text-secondary);
   font-size: 0.9rem;
}

/* Legal Pages Specific */
.legal-page {
   padding-top: calc(var(--header-height) + 60px);
}

.legal-content {
   max-width: 900px;
   margin: 0 auto;
   background: var(--surface-color);
   padding: 60px;
   border-radius: 20px;
   border: 1px solid rgba(255, 255, 255, 0.05);
}

.legal-content h1 {
   font-size: 3rem;
   margin-bottom: 40px;
   color: var(--accent-1);
}

.legal-content h2 {
   font-size: 1.8rem;
   margin: 40px 0 20px;
   color: #fff;
}

.legal-content p {
   margin-bottom: 20px;
   font-size: 1.1rem;
   line-height: 1.8;
}

/* Animations & Utilities */
.reveal {
   opacity: 0;
   transform: translateY(50px);
   transition: 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
   opacity: 1;
   transform: translateY(0);
}

@media (max-width: 1024px) {
   .hero-title {
      font-size: 4rem;
   }

   .footer-container {
      grid-template-columns: 1fr 1fr;
   }

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

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

@media (max-width: 768px) {
   .site-nav {
      display: none;
      /* In a real build, add a hamburger menu here, keeping simple for code size constraints */
   }

   .hero-title {
      font-size: 3rem;
   }

   .footer-container {
      grid-template-columns: 1fr;
   }

   .testimonial-card {
      min-width: 300px;
   }

   .legal-content {
      padding: 30px;
   }
}