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

:root {
  /* Futuristic Dark Palette */
  --bg-dark: #0a0a0f;
  --bg-card: rgba(255, 255, 255, 0.03);
  --bg-glass: rgba(255, 255, 255, 0.05);

  --primary: #ffffff;
  --secondary: #a0a0a0;

  --accent-blue: #00f3ff;
  --accent-purple: #bc13fe;
  --accent-green: #00ff9d;

  --gradient-main: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
  --gradient-glow: radial-gradient(circle at center, rgba(188, 19, 254, 0.2) 0%, transparent 70%);

  --border-glass: 1px solid rgba(255, 255, 255, 0.1);
  --shadow-neon: 0 0 20px rgba(0, 243, 255, 0.15);
}

body {
  font-family: 'Inter', sans-serif;
  margin: 0;
  background: var(--bg-dark);
  color: var(--primary);
  line-height: 1.6;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  margin-top: 0;
}

a {
  text-decoration: none;
  color: inherit;
  transition: 0.3s;
}

/* --- TOP BAR --- */
.top-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1rem 2rem;
  display: flex;
  justify-content: flex-start;
  /* Align to left as requested "very top bar" usually implies visibility, but user said "very top bar". Let's keep it left or right? User didn't specify alignment, but usually right is standard. Wait, user said "keep language selection at the very top bar". I'll put it top-right which is standard, or top-left? Let's go with top-right for now as it balances the logo usually. Actually, let's stick to top-left if there's no logo, or top-right. The previous code had it in header. Let's do flex-end (right). */
  justify-content: flex-end;
  z-index: 100;
  box-sizing: border-box;
}

.language-selector {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  border: var(--border-glass);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
}

.language-selector select {
  background: transparent;
  border: none;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  cursor: pointer;
  appearance: none;
  /* Remove default arrow to style custom if needed, but standard is fine for now */
}

.language-selector select:focus {
  outline: none;
}

.language-selector select option {
  background: var(--bg-dark);
  color: #fff;
}

/* --- HERO SECTION --- */
.hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: radial-gradient(circle at 50% 50%, #1a1a2e 0%, #0a0a0f 100%);
  overflow: hidden;
  padding: 2rem;
}

/* Abstract Background Glow */
.hero::before {
  content: '';
  position: absolute;
  width: 80vw;
  height: 80vw;
  background: radial-gradient(circle at center, rgba(0, 243, 255, 0.15) 0%, rgba(188, 19, 254, 0.1) 40%, transparent 70%);
  filter: blur(100px);
  z-index: 0;
  animation: pulseGlow 8s infinite alternate;
}

.hero-text {
  position: relative;
  z-index: 1;
  max-width: 900px;
  /* Add a subtle containment glow */
  padding: 3rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 243, 255, 0.03), transparent);
}

.hero h1 {
  font-size: 3.8rem;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  background: linear-gradient(to right, #fff, #b0b0b0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Glow on text */
  text-shadow: 0 0 30px rgba(0, 243, 255, 0.1);
}

.hero p {
  font-size: 1.25rem;
  color: var(--secondary);
  margin-bottom: 2.5rem;
}

.highlight-text {
  color: var(--accent-blue);
  font-weight: 600;
  text-shadow: 0 0 20px rgba(0, 243, 255, 0.6);
}

/* Buttons */
.cta-buttons {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
}

.btn {
  padding: 1rem 2rem;
  border-radius: 50px;
  font-weight: 600;
  font-family: 'Outfit', sans-serif;
  position: relative;
  overflow: hidden;
  border: var(--border-glass);
  backdrop-filter: blur(10px);
}

.btn.primary {
  background: rgba(0, 243, 255, 0.1);
  color: var(--accent-blue);
  border-color: var(--accent-blue);
  box-shadow: 0 0 15px rgba(0, 243, 255, 0.2);
}

.btn.primary:hover {
  background: var(--accent-blue);
  color: #000;
  box-shadow: 0 0 30px rgba(0, 243, 255, 0.6);
  transform: translateY(-3px);
}

.btn.secondary {
  background: rgba(188, 19, 254, 0.1);
  color: var(--accent-purple);
  border-color: var(--accent-purple);
}

.btn.secondary:hover {
  background: var(--accent-purple);
  color: #fff;
  box-shadow: 0 0 30px rgba(188, 19, 254, 0.6);
  transform: translateY(-3px);
}

/* --- SECTIONS --- */
section {
  padding: 5rem 2rem;
  max-width: 1200px;
  margin: auto;
}

section h2 {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 3rem;
  color: #fff;
}

section h2 span {
  color: var(--accent-purple);
}

/* --- HITL FLOW (The Elias Edge) --- */
.hitl-flow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.flow-step {
  flex: 1;
  background: var(--bg-card);
  border: var(--border-glass);
  padding: 2rem;
  border-radius: 16px;
  text-align: center;
  position: relative;
  transition: transform 0.3s;
  min-width: 250px;
}

.flow-step:hover {
  transform: translateY(-5px);
  border-color: var(--accent-blue);
}

.flow-step i {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  background: var(--gradient-main);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.flow-arrow {
  font-size: 2rem;
  color: var(--secondary);
  animation: floatArrow 2s infinite ease-in-out;
}

/* --- SERVICES (Refactored) --- */
.services-container {
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap;
}

.service-card {
  background: var(--bg-card);
  border: var(--border-glass);
  border-radius: 20px;
  padding: 3rem;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Automation Card Styling */
.automation-card {
  flex: 1;
  min-width: 300px;
  max-width: 550px;
  border: 1px solid rgba(0, 243, 255, 0.3);
  background: radial-gradient(circle at top right, rgba(0, 243, 255, 0.05), transparent 70%);
}

.automation-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 0 30px rgba(0, 243, 255, 0.2);
  border-color: var(--accent-blue);
}

/* BI Card Styling (Primary) */
.bi-card {
  flex: 1;
  min-width: 300px;
  max-width: 550px;
  border: 1px solid rgba(188, 19, 254, 0.5);
  /* Stronger border */
  background: radial-gradient(circle at top, rgba(188, 19, 254, 0.1), transparent 80%);
  display: block;
  /* Ensure it takes width settings from HTML */
}

.bi-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 50px rgba(188, 19, 254, 0.3);
  border-color: var(--accent-purple);
}

.card-content h3 {
  font-size: 2.2rem;
  /* Larger Title */
  margin-bottom: 0.5rem;
  background: linear-gradient(to right, #fff, #e0e0e0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.service-focus {
  color: var(--secondary);
  font-size: 1.1rem;
  margin-bottom: 2rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 1rem;
  display: inline-block;
}

.service-list {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
  /* Allow equal width in flex container */
  min-width: 280px;
}

.service-list li {
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.1rem;
  color: #ddd;
}

.service-list li i {
  font-size: 1.4rem;
  width: 30px;
  text-align: center;
  color: var(--accent-purple);
}

.automation-card .service-list li i {
  color: var(--accent-blue);
}

/* Add-ons Container */
.addons-container {
  background: transparent;
}

.addons-container .bento-card {
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.02);
  min-height: 180px;
  justify-content: center;
}

.addons-container .bento-card:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-5px);
}

.card-action {
  margin-top: 2rem;
  text-align: right;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 1px;
  opacity: 0.7;
  transition: 0.3s;
}

.automation-card .card-action {
  color: var(--accent-blue);
}

.bi-card .card-action {
  color: var(--accent-purple);
}

.service-card:hover .card-action {
  opacity: 1;
  padding-right: 10px;
}

/* --- PRICING --- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.price-card {
  background: var(--bg-card);
  border: var(--border-glass);
  border-radius: 20px;
  padding: 2rem;
  position: relative;
  text-align: center;
}

.price-card.popular {
  border-color: var(--accent-blue);
  box-shadow: 0 0 20px rgba(0, 243, 255, 0.1);
}

.badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent-blue);
  color: #000;
  padding: 0.3rem 1rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
}

.price-focus {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-blue);
  border: 1px solid rgba(0, 243, 255, 0.3);
  border-radius: 20px;
  padding: 0.2rem 0.8rem;
  margin-bottom: 0.5rem;
}

.price {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 1rem 0;
  font-family: 'Outfit', sans-serif;
}

.price span {
  font-size: 1rem;
  color: var(--secondary);
  font-weight: 400;
}

/* --- ABOUT & CONSULTATION --- */
.about-container {
  display: flex;
  align-items: center;
  gap: 3rem;
  background: var(--bg-glass);
  padding: 3rem;
  border-radius: 24px;
  border: var(--border-glass);
}

.about-text {
  flex: 1;
}

.about-visual {
  flex: 1;
  height: 200px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  padding: 20px;
}

/* Animated Bars */
.bar {
  width: 15%;
  background: var(--accent-blue);
  border-radius: 4px 4px 0 0;
  animation: barAnim 2s infinite ease-in-out alternate;
}

.bar:nth-child(2) {
  animation-delay: 0.2s;
  background: var(--accent-purple);
}

.bar:nth-child(3) {
  animation-delay: 0.4s;
  background: var(--accent-green);
}

.bar:nth-child(4) {
  animation-delay: 0.6s;
}

@keyframes barAnim {
  0% {
    height: 20%;
    opacity: 0.5;
  }

  100% {
    height: 80%;
    opacity: 1;
  }
}

/* Form */
form input,
form textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1rem;
  border-radius: 8px;
  color: #fff;
  margin-bottom: 1rem;
  font-family: 'Inter', sans-serif;
}

form input:focus,
form textarea:focus {
  outline: none;
  border-color: var(--accent-blue);
}

/* --- FOOTER --- */
footer {
  text-align: center;
  padding: 2rem;
  border-top: var(--border-glass);
  color: var(--secondary);
  font-size: 0.9rem;
}

/* --- ANIMATIONS --- */
@keyframes pulseGlow {
  0% {
    opacity: 0.5;
    transform: scale(1);
  }

  100% {
    opacity: 0.8;
    transform: scale(1.1);
  }
}

@keyframes floatArrow {

  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(5px);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2.5rem;
  }

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

  .span-2,
  .span-4 {
    grid-column: span 1;
  }

  .hitl-flow {
    flex-direction: column;
  }

  .flow-arrow {
    transform: rotate(90deg);
    margin: 1rem 0;
  }

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