/* Hero Section */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding-top: var(--spacing-xl);
}
.hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: radial-gradient(circle at 50% 30%, rgba(0, 229, 255, 0.05) 0%, rgba(10, 10, 12, 1) 70%);
  z-index: -1;
}
.hero-content {
  max-width: 800px;
}
.hero p {
  font-size: 1.25rem;
  margin-bottom: var(--spacing-md);
  max-width: 600px;
}
.hero-actions {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

/* Logos Section */
.logos-section {
  padding: var(--spacing-md) 0;
  border-block: 1px solid var(--color-border);
  background: rgba(18, 20, 24, 0.3);
}
.logos-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  opacity: 0.5;
  filter: grayscale(100%);
}
.logos-grid span {
  font-weight: 700;
  font-size: 1.5rem;
  font-family: var(--font-heading);
}

/* Services Grid (Home) */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

/* Methodology Section */
.methodology {
  background-color: var(--color-bg-secondary);
}
.timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
  position: relative;
}
.timeline-item {
  position: relative;
  padding-left: var(--spacing-md);
  border-left: 2px solid var(--color-border);
  padding-bottom: var(--spacing-md);
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: -9px;
  top: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--color-bg-secondary);
  border: 2px solid var(--color-accent-light);
}

/* Services Page Detailed */
.service-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xl);
  align-items: center;
  padding: var(--spacing-lg) 0;
  border-bottom: 1px solid var(--color-border);
}
.service-block:last-child {
  border-bottom: none;
}
.service-block:nth-child(even) {
  direction: rtl;
}
.service-block:nth-child(even) > * {
  direction: ltr;
}
.service-features {
  list-style: none;
  margin-top: var(--spacing-md);
}
.service-features li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--color-text-primary);
}
.service-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-accent-light);
}

/* Blog Page */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--spacing-lg);
  margin-top: var(--spacing-lg);
}
.blog-card-img {
  width: 100%;
  height: 200px;
  background-color: var(--color-bg-primary);
  border-bottom: 1px solid var(--color-border);
  object-fit: cover;
}

/* Contact Page */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xl);
  align-items: start;
}
.contact-info {
  background: var(--color-bg-secondary);
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
.contact-item {
  margin-bottom: var(--spacing-md);
}
.contact-item strong {
  display: block;
  color: var(--color-text-primary);
  margin-bottom: 0.25rem;
}

/* Page Header */
.page-header {
  padding: calc(var(--spacing-xl) + var(--spacing-lg)) 0 var(--spacing-lg);
  text-align: center;
  background: linear-gradient(to bottom, rgba(10, 10, 12, 1), rgba(18, 20, 24, 0.5));
  border-bottom: 1px solid var(--color-border);
}

@media (max-width: 992px) {
  .service-block { grid-template-columns: 1fr; gap: var(--spacing-md); direction: ltr !important; }
  .contact-layout { grid-template-columns: 1fr; }
}

/* ====== INTERACTIVE WIDGETS ====== */
.interactive-widget {
    background: rgba(4,5,7,0.8);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    max-width: 900px;
    margin: 3rem auto;
    box-shadow: var(--shadow-neo-dark);
}

/* 1. SEO Checklist */
.seo-widget { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; }
@media (max-width: 768px) { .seo-widget { grid-template-columns: 1fr; } }
.seo-checklist label { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; cursor: pointer; color: var(--color-text-secondary); transition: color 0.3s ease; }
.seo-checklist label:hover { color: var(--color-text-primary); }
.seo-checklist input { width: 22px; height: 22px; accent-color: var(--color-accent); cursor: pointer; }
.seo-chart-box { text-align: center; }
.seo-chart-bar { width: 100%; height: 200px; background: rgba(255,255,255,0.02); border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,0.05); position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: 1rem; gap: 10%; }
.chart-col { flex: 1; background: linear-gradient(to top, var(--color-accent), #00e5ff); border-radius: 4px 4px 0 0; transition: height 0.6s cubic-bezier(0.17, 0.67, 0.12, 0.99), opacity 0.3s ease; height: 5%; opacity: 0.3; }

/* 2. Roulette */
.roulette-container { text-align: center; overflow: hidden; }
.roulette-wheel { width: 280px; height: 280px; border-radius: 50%; border: 4px solid var(--color-border); margin: 0 auto 2rem; position: relative; transition: transform 4s cubic-bezier(0.1, 0.7, 0.1, 1); background: url('../assets/roulette_wheel.png') center/cover no-repeat; box-shadow: 0 0 40px rgba(0, 229, 255, 0.3); }
.roulette-pointer { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 30px solid var(--color-warning); z-index: 10; filter: drop-shadow(0 4px 4px rgba(0,0,0,0.5)); }

/* 3. Branding Before/After */
.ba-slider { position: relative; width: 100%; height: 350px; overflow: hidden; border-radius: var(--radius-md); border: 1px solid var(--color-border); }
.ba-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md); }
.ba-before { filter: grayscale(20%) brightness(0.9); z-index: 1; }
.ba-after { z-index: 2; clip-path: inset(0 50% 0 0); filter: drop-shadow(0 0 20px rgba(0, 229, 255, 0.5)); }
.ba-input { position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); z-index: 3; appearance: none; background: transparent; cursor: ew-resize; height: 100%; opacity: 0; }
.ba-line { position: absolute; top: 0; left: 50%; width: 4px; height: 100%; background: var(--color-primary); z-index: 4; transform: translateX(-50%); pointer-events: none; box-shadow: 0 0 10px rgba(0,0,0,0.8); }
.ba-line::after { content: '< >'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; background: var(--color-primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; border: 3px solid white; font-family: 'Inter', sans-serif; }

/* 4. ROAS Calculator */
.roas-calc { text-align: left; }
.roas-slider-wrap { margin-bottom: 2rem; background: rgba(255,255,255,0.02); padding: 1.5rem; border-radius: var(--radius-md); }
.roas-slider-wrap input { width: 100%; margin-top: 1rem; appearance: none; background: rgba(255,255,255,0.1); height: 8px; border-radius: 4px; outline: none; cursor: pointer; }
.roas-slider-wrap input::-webkit-slider-thumb { appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 15px var(--color-accent); cursor: pointer; }
.roas-results { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.roas-box { background: linear-gradient(145deg, rgba(4,5,7,1), rgba(15,20,25,1)); padding: 2rem; border-radius: var(--radius-sm); border: 1px solid var(--color-border); text-align: center; transition: transform 0.3s ease; }
.roas-box:hover { transform: translateY(-5px); border-color: var(--color-accent); }
.roas-value { font-size: 3rem; font-weight: bold; color: var(--color-warning); font-family: 'Outfit', sans-serif; text-shadow: 0 0 20px rgba(255, 170, 0, 0.2); }

/* 5. Color Grading */
.cg-container { text-align: center; }
.cg-image { width: 100%; height: 350px; object-fit: cover; border-radius: var(--radius-md); transition: filter 1s ease-in-out; margin-bottom: 2rem; filter: sepia(0.3) contrast(0.7) brightness(0.7); border: 1px solid var(--color-border); }
.cg-image.graded { filter: saturate(1.4) contrast(1.1) brightness(1.1); box-shadow: 0 0 30px rgba(0, 229, 255, 0.3); border-color: var(--color-accent); }
.cg-buttons { display: flex; justify-content: center; gap: 1rem; }
@media (max-width: 600px) { .cg-buttons { flex-direction: column; } }

/* PRISMA COMPONENTS: Tabs, Marquee, Accordion */
/* Marquee */
.marquee-wrapper { overflow: hidden; width: 100%; padding: 2rem 0; background: rgba(0,0,0,0.2); }
.marquee-content { display: flex; animation: scroll 20s linear infinite; width: calc(250px * 10); }
.marquee-item { width: 250px; flex-shrink: 0; text-align: center; }
.marquee-item img { filter: grayscale(100%) opacity(0.5); transition: all 0.3s ease; height: 50px; object-fit: contain; }
.marquee-item img:hover { filter: grayscale(0%) opacity(1); }
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-250px * 5)); } }

/* Tabs */
.tabs-container { max-width: 900px; margin: 0 auto; }
.tabs-header { display: flex; gap: 1rem; margin-bottom: 2rem; justify-content: center; flex-wrap: wrap; }
.tab-btn { background: rgba(255,255,255,0.05); border: 1px solid var(--color-border); color: var(--color-text-secondary); padding: 1rem 2rem; border-radius: var(--radius-sm); cursor: pointer; transition: all 0.3s ease; font-family: 'Outfit', sans-serif; font-weight: 600; }
.tab-btn.active { background: var(--color-primary); color: white; border-color: var(--color-primary); box-shadow: 0 0 15px rgba(0, 229, 255, 0.4); }
.tab-content { display: none; background: rgba(4,5,7,0.6); padding: 3rem; border-radius: var(--radius-md); border: 1px solid var(--color-border); animation: fadeIn 0.5s ease; text-align: left; }
.tab-content.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Accordion */
.faq-container { max-width: 800px; margin: 0 auto; text-align: left; }
.accordion-item { border-bottom: 1px solid var(--color-border); }
.accordion-header { padding: 1.5rem 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 600; color: var(--color-text-primary); transition: color 0.3s ease; }
.accordion-header:hover { color: var(--color-accent); }
.accordion-header::after { content: '+'; font-size: 1.5rem; color: var(--color-accent); transition: transform 0.3s ease; }
.accordion-header.active::after { transform: rotate(45deg); }
.accordion-body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out; color: var(--color-text-secondary); }
.accordion-body p { padding-bottom: 1.5rem; margin: 0; }