/* ==========================================================================
   DEVTTT Stylesheet - Recreated with Premium UI/UX & Responsive Design
   ========================================================================== */

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

/* CSS Variables */
:root {
  --font-primary: 'Outfit', sans-serif;
  --font-secondary: 'Inter', sans-serif;

  /* Theme Colors */
  --color-primary: #7643C9;
  --color-primary-light: #8e5bd9;
  --color-primary-dark: #5b30a1;
  --color-secondary: #ED7818;
  --color-secondary-light: #ff8e35;
  --color-dark: #192a3d;
  --color-dark-bg: #0f1a26;
  --color-body: #3A4F66;
  --color-light-bg: #FAFBFC;
  --color-light-card: #f2f5f7;
  --color-border: #e1e8ed;
  --color-white: #ffffff;
  --color-gray: #7a8b9e;
  
  /* Gradient Colors */
  --grad-hero: linear-gradient(135deg, #192a3d 0%, #0c151f 100%);
  --grad-purple: linear-gradient(135deg, #7643C9 0%, #a47af0 100%);
  --grad-orange: linear-gradient(135deg, #ED7818 0%, #ff9843 100%);
  
  /* Layout Options */
  --container-width: 1240px;
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  
  /* Shadows */
  --shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 20px 50px rgba(118, 67, 201, 0.15);
}

/* Reset Styles */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-secondary);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-body);
  background-color: var(--color-white);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  color: var(--color-dark);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 1rem;
}

p {
  margin-bottom: 1.5rem;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-fast);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol {
  list-style: none;
}

button, input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  border: none;
  outline: none;
  background: none;
}

button {
  cursor: pointer;
}

/* Base Layout Container */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* Sections */
.section {
  padding: 80px 0;
  position: relative;
}

.section-bg-light {
  background-color: var(--color-light-bg);
}

.section-bg-dark {
  background-color: var(--color-dark-bg);
  color: var(--color-white);
}

.section-bg-dark h1,
.section-bg-dark h2,
.section-bg-dark h3 {
  color: var(--color-white);
}

/* Section Header */
.section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 60px;
}

.section-header h2 {
  font-size: 2.25rem;
  margin-bottom: 1.25rem;
}

.section-header p {
  color: var(--color-gray);
  font-size: 1.1rem;
}

.highlight-text {
  position: relative;
  display: inline-block;
  color: var(--color-primary);
}

.highlight-text::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 4px;
  background-color: var(--color-primary);
  border-radius: 2px;
}

.highlight-text-orange {
  color: var(--color-secondary);
}

.highlight-text-orange::after {
  background-color: var(--color-secondary);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 50px;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 1rem;
  transition: all var(--transition-normal);
  gap: 10px;
  box-shadow: var(--shadow-sm);
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn-primary:hover {
  background-color: var(--color-primary-light);
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(118, 67, 201, 0.3);
}

.btn-secondary {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

.btn-secondary:hover {
  background-color: var(--color-secondary-light);
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(237, 120, 24, 0.3);
}

.btn-outline {
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  padding: 12px 26px;
}

.btn-outline:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-3px);
}

/* ==========================================================================
   Header & Navigation
   ========================================================================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  z-index: 1000;
  transition: all var(--transition-normal);
}

.header.scrolled {
  padding: 10px 0;
  box-shadow: var(--shadow-sm);
}

.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}

.logo img {
  height: 45px;
  width: auto;
  max-width: 100%;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-link {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color-dark);
  position: relative;
  padding: 8px 0;
}

.nav-link:hover, .nav-link.active {
  color: var(--color-primary);
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-primary);
  transition: var(--transition-normal);
}

.nav-link:hover::after, .nav-link.active::after {
  width: 100%;
}

/* Language Switcher */
.lang-switcher {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-primary);
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 20px;
  background-color: var(--color-light-bg);
  border: 1px solid var(--color-border);
}

.lang-flag {
  width: 20px;
  height: 15px;
  object-fit: cover;
  border-radius: 2px;
}

.lang-dropdown {
  position: absolute;
  top: 105%;
  right: 0;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  min-width: 130px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--transition-normal);
  z-index: 100;
}

.lang-switcher:hover .lang-dropdown,
.lang-switcher.open .lang-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  transition: var(--transition-fast);
}

.lang-option:hover {
  background-color: var(--color-light-bg);
  color: var(--color-primary);
}

/* Mobile Nav Toggle */
.mobile-nav-toggle {
  display: none;
  font-size: 1.8rem;
  color: var(--color-dark);
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero {
  min-height: 90vh;
  padding-top: 120px;
  background: var(--grad-hero);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  color: var(--color-white);
}

#hero-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.hero .container {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.hero-content {
  max-width: 650px;
}

.hero-subtitle {
  font-family: var(--font-primary);
  font-weight: 700;
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 1rem;
  margin-bottom: 1rem;
  display: inline-block;
}

.hero-title {
  font-size: 3.5rem;
  line-height: 1.15;
  color: var(--color-white);
  margin-bottom: 1.5rem;
}

.hero-desc {
  font-size: 1.15rem;
  color: var(--color-gray);
  margin-bottom: 2.5rem;
  max-width: 580px;
}

.hero-btns {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.hero-image {
  flex: 1;
  display: flex;
  justify-content: center;
  position: relative;
}

.hero-image img {
  max-width: 100%;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
  100% { transform: translateY(0px); }
}

/* ==========================================================================
   Benefits / Expanding Cards Section
   ========================================================================== */
.why-ideon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.benefit-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 350px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-slow);
}

.benefit-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform var(--transition-slow);
  z-index: 1;
}

.benefit-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(25, 42, 61, 0.4) 0%, rgba(15, 26, 38, 0.9) 100%);
  z-index: 2;
  transition: opacity var(--transition-normal);
}

.benefit-content {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 30px;
  z-index: 3;
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  transition: all var(--transition-slow);
}

.benefit-icon {
  font-size: 2.25rem;
  color: var(--color-secondary);
  margin-bottom: 15px;
  display: inline-block;
  transition: transform var(--transition-normal);
}

.benefit-card:hover .benefit-icon {
  transform: scale(1.1);
}

.benefit-title {
  font-size: 1.35rem;
  color: var(--color-white);
  margin-bottom: 0;
  transition: margin-bottom var(--transition-normal);
}

.benefit-desc {
  max-height: 0;
  opacity: 0;
  font-size: 0.9rem;
  color: var(--color-border);
  line-height: 1.5;
  transition: max-height var(--transition-slow), opacity var(--transition-slow);
}

.benefit-card:hover .benefit-desc {
  max-height: 150px;
  opacity: 1;
  margin-top: 10px;
}

.benefit-card:hover .benefit-bg {
  transform: scale(1.1);
}

/* ==========================================================================
   Pricing Section
   ========================================================================== */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.pricing-card {
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
  transition: all var(--transition-normal);
  display: flex;
  flex-direction: column;
}

.pricing-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary);
}

.pricing-img-wrapper {
  height: 200px;
  overflow: hidden;
  position: relative;
}

.pricing-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.pricing-card:hover .pricing-img {
  transform: scale(1.1);
}

.pricing-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(118, 67, 201, 0.1) 0%, rgba(25, 42, 61, 0.7) 100%);
}

.pricing-header {
  padding: 30px;
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.pricing-plan-title {
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: var(--color-dark);
}

.pricing-desc {
  font-size: 0.9rem;
  color: var(--color-gray);
  margin-bottom: 20px;
  min-height: 48px;
}

.pricing-price {
  font-family: var(--font-primary);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary);
}

.pricing-price small {
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-gray);
}

.pricing-body {
  padding: 30px;
  flex-grow: 1;
}

.pricing-features {
  margin-bottom: 30px;
}

.pricing-feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.95rem;
  margin-bottom: 12px;
  color: var(--color-body);
}

.pricing-feature i {
  color: var(--color-primary);
  font-size: 1.1rem;
  margin-top: 3px;
}

.pricing-footer {
  padding: 0 30px 30px;
}

.pricing-footer .btn {
  width: 100%;
}

.pricing-card.popular {
  border: 2px solid var(--color-primary);
  position: relative;
}

.pricing-card.popular::before {
  content: 'Phổ biến nhất';
  position: absolute;
  top: 15px;
  right: 15px;
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 20px;
  z-index: 10;
}

/* ==========================================================================
   Portfolio / Projects Section
   ========================================================================== */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 50px;
}

.project-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 280px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  perspective: 1000px;
}

.project-flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform var(--transition-slow);
  transform-style: preserve-3d;
}

.project-card:hover .project-flipper {
  transform: rotateY(180deg);
}

.project-front, .project-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.project-front {
  background-size: cover;
  background-position: center;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
}

.project-front::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.8) 100%);
  z-index: 1;
}

.project-title {
  color: var(--color-white);
  font-size: 1.15rem;
  font-weight: 700;
  position: relative;
  z-index: 2;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.project-back {
  background: var(--color-dark);
  transform: rotateY(180deg);
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px;
  text-align: center;
  color: var(--color-white);
}

.project-back-title {
  font-size: 1.25rem;
  color: var(--color-white);
  margin-bottom: 20px;
}

.portfolio-more {
  text-align: center;
}

/* ==========================================================================
   FAQ Section
   ========================================================================== */
.faq-container {
  display: grid;
  grid-template-columns: 4.5fr 7.5fr;
  gap: 50px;
  align-items: center;
}

.faq-illustration {
  text-align: center;
}

.faq-illustration img {
  max-width: 100%;
  animation: float 6s ease-in-out infinite;
}

.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.faq-item {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: all var(--transition-normal);
}

.faq-item.active {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.faq-question {
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  font-weight: 600;
  font-family: var(--font-primary);
  font-size: 1.1rem;
  color: var(--color-dark);
  gap: 20px;
  transition: color var(--transition-fast);
}

.faq-question:hover, .faq-item.active .faq-question {
  color: var(--color-primary);
}

.faq-toggle-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--color-light-bg);
  color: var(--color-primary);
  transition: all var(--transition-normal);
  font-size: 0.8rem;
}

.faq-item.active .faq-toggle-icon {
  background-color: var(--color-primary);
  color: var(--color-white);
  transform: rotate(135deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height var(--transition-normal) ease-out, opacity var(--transition-normal) ease-out;
  border-top: 1px solid transparent;
}

.faq-item.active .faq-answer {
  max-height: 500px;
  opacity: 1;
  border-top-color: var(--color-border);
}

.faq-answer-content {
  padding: 20px 24px;
  font-size: 0.95rem;
  color: var(--color-body);
}

.faq-answer-content p {
  margin-bottom: 12px;
}

.faq-answer-content p:last-child {
  margin-bottom: 0;
}

.faq-answer-content ul {
  list-style: disc;
  margin-left: 20px;
  margin-bottom: 12px;
}

.faq-answer-content li {
  margin-bottom: 6px;
}

/* ==========================================================================
   Testimonials Section
   ========================================================================== */
.testimonials-slider-container {
  max-width: 850px;
  margin: 0 auto;
  position: relative;
  padding: 0 40px;
}

.testimonials-slider {
  overflow: hidden;
  position: relative;
  min-height: 240px;
}

.testimonial-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: opacity var(--transition-slow), transform var(--transition-slow), visibility var(--transition-slow);
  text-align: center;
  padding: 10px 0;
}

.testimonial-slide.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.testimonial-quote {
  font-size: 1.25rem;
  line-height: 1.8;
  font-style: italic;
  color: var(--color-dark);
  margin-bottom: 25px;
  position: relative;
}

.testimonial-quote::before, .testimonial-quote::after {
  content: '"';
  font-size: 3rem;
  color: var(--color-primary-light);
  opacity: 0.2;
  position: absolute;
  line-height: 1;
}

.testimonial-quote::before {
  top: -15px;
  left: -20px;
}

.testimonial-quote::after {
  bottom: -40px;
  right: -20px;
}

.testimonial-author {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-primary);
  margin-bottom: 5px;
}

.testimonial-company {
  font-size: 0.85rem;
  color: var(--color-gray);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.testimonial-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-dark);
  transition: all var(--transition-normal);
  z-index: 10;
}

.testimonial-btn:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.testimonial-btn-prev {
  left: -20px;
}

.testimonial-btn-next {
  right: -20px;
}

.testimonials-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 35px;
}

.testimonial-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-border);
  cursor: pointer;
  transition: all var(--transition-normal);
}

.testimonial-dot.active {
  background-color: var(--color-primary);
  width: 24px;
  border-radius: 10px;
}

/* ==========================================================================
   Contact Section & Form
   ========================================================================== */
.contact-layout {
  display: grid;
  grid-template-columns: 5.5fr 6.5fr;
  gap: 50px;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.contact-info-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(118, 67, 201, 0.1);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.1rem;
}

.contact-info-text h4 {
  font-size: 1rem;
  margin-bottom: 4px;
  color: var(--color-dark);
}

.contact-info-text p, .contact-info-text a {
  font-size: 0.95rem;
  color: var(--color-body);
  margin-bottom: 0;
}

.contact-info-text a:hover {
  color: var(--color-primary);
}

.contact-map-wrapper {
  height: 280px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.contact-map-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.contact-form-wrapper {
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  padding: 40px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
}

.contact-form h3 {
  font-size: 1.6rem;
  margin-bottom: 25px;
}

.form-group {
  margin-bottom: 20px;
}

.form-control {
  width: 100%;
  padding: 14px 20px;
  border: 1px solid var(--color-border);
  background-color: var(--color-light-bg);
  border-radius: var(--radius-sm);
  color: var(--color-dark);
  font-size: 0.95rem;
  transition: all var(--transition-fast);
}

.form-control:focus {
  border-color: var(--color-primary);
  background-color: var(--color-white);
  box-shadow: 0 0 0 3px rgba(118, 67, 201, 0.15);
}

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

.contact-form .btn {
  width: 100%;
  padding: 16px;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  background-color: var(--color-dark-bg);
  color: var(--color-gray);
  padding: 80px 0 0;
  border-top: 1px solid #1e2e42;
}

.footer-grid {
  display: grid;
  grid-template-columns: 4fr 2.5fr 3fr 2.5fr;
  gap: 40px;
  margin-bottom: 60px;
}

.footer-col-about img {
  height: 40px;
  margin-bottom: 25px;
}

.footer-col-about p {
  font-size: 0.9rem;
  line-height: 1.7;
}

.footer-title {
  font-family: var(--font-primary);
  color: var(--color-white);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 25px;
  position: relative;
  padding-bottom: 10px;
}

.footer-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 30px;
  height: 2px;
  background-color: var(--color-primary);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links a {
  font-size: 0.9rem;
  color: var(--color-gray);
}

.footer-links a:hover {
  color: var(--color-white);
  padding-left: 5px;
}

.footer-contact-info {
  display: flex;
  flex-direction: column;
  gap: 15px;
  font-size: 0.9rem;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.footer-contact-item i {
  color: var(--color-primary-light);
  margin-top: 4px;
}

.footer-contact-item a:hover {
  color: var(--color-white);
}

.footer-social-btns {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.footer-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  background-color: #1e2e42;
  color: var(--color-white);
  font-weight: 600;
  font-size: 0.9rem;
  transition: all var(--transition-normal);
}

.footer-social-btn:hover {
  background-color: var(--color-primary);
  transform: translateY(-2px);
}

.footer-social-btn.fb {
  background-color: #3b5998;
}

.footer-social-btn.fb:hover {
  background-color: #4d70ba;
}

.footer-social-btn.zalo {
  background-color: #0068ff;
}

.footer-social-btn.zalo:hover {
  background-color: #2b84ff;
}

.footer-social-btn img {
  width: 18px;
  height: 18px;
}

.copyright {
  border-top: 1px solid #1e2e42;
  padding: 25px 0;
  text-align: center;
  font-size: 0.85rem;
}

/* ==========================================================================
   Modals / Pricing Popups
   ========================================================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(15, 26, 38, 0.85);
  backdrop-filter: blur(5px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
  padding: 20px;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal-container {
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  max-width: 650px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  position: relative;
  transform: scale(0.9);
  transition: all var(--transition-normal);
  border: 1px solid var(--color-border);
}

.modal-overlay.active .modal-container {
  transform: scale(1);
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--color-light-bg);
  color: var(--color-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  z-index: 10;
  font-size: 1.2rem;
}

.modal-close:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.modal-header-img {
  height: 180px;
  position: relative;
  background-size: cover;
  background-position: center;
}

.modal-header-img::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(15, 26, 38, 0.8) 100%);
}

.modal-header-title {
  position: absolute;
  left: 30px;
  bottom: 20px;
  color: var(--color-white);
  font-size: 1.8rem;
  z-index: 2;
  margin: 0;
  font-family: var(--font-primary);
}

.modal-body {
  padding: 30px;
}

.modal-intro {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-body);
  margin-bottom: 20px;
  border-left: 4px solid var(--color-primary);
  padding-left: 15px;
}

.modal-price-box {
  background-color: rgba(118, 67, 201, 0.05);
  border: 1px dashed var(--color-primary);
  border-radius: var(--radius-sm);
  padding: 15px;
  text-align: center;
  margin-bottom: 25px;
}

.modal-price-title {
  font-size: 0.85rem;
  color: var(--color-gray);
  text-transform: uppercase;
  margin-bottom: 5px;
  letter-spacing: 1px;
}

.modal-price-value {
  font-family: var(--font-primary);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--color-primary);
}

.modal-features-title {
  font-size: 1.15rem;
  margin-bottom: 15px;
  color: var(--color-dark);
}

.modal-features-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 30px;
}

.modal-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.95rem;
}

.modal-feature-item i {
  color: #28a745;
  font-size: 1.1rem;
  margin-top: 3px;
}

.modal-action {
  text-align: center;
}

.modal-action .btn {
  width: 100%;
  padding: 16px;
}

/* ==========================================================================
   Floating Widgets & Quick Access
   ========================================================================== */
.floating-widgets {
  position: fixed;
  bottom: 30px;
  right: 30px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 999;
}

.floating-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  transition: all var(--transition-normal);
  cursor: pointer;
  position: relative;
}

.floating-btn:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.floating-btn.zalo {
  background-color: #0068ff;
}

.floating-btn.zalo img {
  width: 30px;
  height: 30px;
}

.floating-btn.phone {
  background-color: #25d366;
  font-size: 1.5rem;
  animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.floating-btn.fb-messenger {
  background-color: #0084ff;
  font-size: 1.5rem;
}

/* ==========================================================================
   Responsive Media Queries
   ========================================================================== */
@media screen and (max-width: 1100px) {
  :root {
    --container-width: 960px;
  }
  
  .hero-title {
    font-size: 3rem;
  }
  
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

@media screen and (max-width: 900px) {
  :root {
    --container-width: 720px;
  }
  
  .section {
    padding: 60px 0;
  }
  
  .hero .container {
    flex-direction: column;
    text-align: center;
    padding-top: 40px;
  }
  
  .hero-content {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .hero-desc {
    margin-left: auto;
    margin-right: auto;
  }
  
  .hero-btns {
    justify-content: center;
  }
  
  .why-ideon-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 30px;
    max-width: 450px;
    margin: 0 auto;
  }
  
  .faq-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .faq-illustration {
    display: none;
  }
  
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media screen and (max-width: 768px) {
  .mobile-nav-toggle {
    display: block;
  }
  
  .nav-menu {
    position: fixed;
    top: 80px;
    left: -100%;
    width: 100%;
    height: calc(100vh - 80px);
    background-color: var(--color-white);
    flex-direction: column;
    padding: 40px 20px;
    gap: 24px;
    transition: var(--transition-normal);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
    border-top: 1px solid var(--color-border);
  }
  
  .nav-menu.active {
    left: 0;
  }
  
  .nav-link {
    font-size: 1.2rem;
  }
  
  .hero-title {
    font-size: 2.5rem;
  }

  /* Language Switcher Mobile Styles */
  .nav-menu .lang-switcher {
    width: 100%;
    justify-content: center;
    margin-top: 10px;
  }
  .nav-menu .lang-dropdown {
    position: static;
    width: 100%;
    margin-top: 5px;
    box-shadow: none;
    border: none;
    background-color: var(--color-light-bg);
    opacity: 1;
    visibility: visible;
    display: none;
    transform: none;
  }
  .nav-menu .lang-switcher.open .lang-dropdown {
    display: block;
  }
}

@media screen and (max-width: 480px) {
  :root {
    --container-width: 100%;
  }
  
  .hero-title {
    font-size: 2.1rem;
  }
  
  .benefit-card {
    height: 300px;
  }
  
  .portfolio-grid {
    grid-template-columns: 1fr;
  }
  
  .contact-form-wrapper {
    padding: 30px 20px;
  }
  
  .footer-grid {
    grid-template-columns: 1fr;
  }
  
  .floating-widgets {
    bottom: 20px;
    right: 20px;
  }
}

/* ========================================================================== 
   IDEON 2.0 Visual Refresh - Premium Agency System
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --font-primary: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
  --font-secondary: 'Plus Jakarta Sans', Inter, sans-serif;
  --color-primary: #8b5cf6;
  --color-primary-light: #a78bfa;
  --color-primary-dark: #5b21b6;
  --color-secondary: #ff8a3d;
  --color-secondary-light: #ffb86b;
  --color-dark: #101828;
  --color-dark-bg: #070816;
  --color-body: #475467;
  --color-light-bg: #f7f7fb;
  --color-border: rgba(123, 97, 255, 0.14);
  --grad-hero: radial-gradient(circle at 12% 18%, rgba(139, 92, 246, .42), transparent 34%), radial-gradient(circle at 82% 20%, rgba(255, 138, 61, .32), transparent 30%), radial-gradient(circle at 52% 88%, rgba(45, 212, 191, .18), transparent 36%), linear-gradient(135deg, #060817 0%, #111338 48%, #1b0b2d 100%);
  --grad-purple: linear-gradient(135deg, #7c3aed 0%, #c084fc 100%);
  --grad-orange: linear-gradient(135deg, #ff7a1a 0%, #ffbe5c 100%);
  --shadow-sm: 0 10px 25px rgba(16, 24, 40, .08);
  --shadow-md: 0 22px 55px rgba(16, 24, 40, .12);
  --shadow-lg: 0 32px 90px rgba(81, 45, 168, .28);
  --radius-sm: 12px;
  --radius-md: 22px;
  --radius-lg: 34px;
}

body {
  background: radial-gradient(circle at top left, rgba(139, 92, 246, .08), transparent 32%), linear-gradient(180deg, #ffffff 0%, #fbfbff 58%, #f7f7fb 100%);
  color: var(--color-body);
  font-feature-settings: 'kern' 1, 'liga' 1;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .34;
  background-image: linear-gradient(rgba(139, 92, 246, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(139, 92, 246, .08) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 70%);
}

h1, h2, h3, h4, h5, h6 { letter-spacing: -0.045em; }
.section { padding: 105px 0; }
.section-header { max-width: 820px; margin-bottom: 64px; }
.section-header h2 { font-size: clamp(2rem, 4vw, 3.35rem); line-height: 1.02; }
.section-header p { font-size: 1.08rem; line-height: 1.75; }

.highlight-text {
  color: transparent;
  background: linear-gradient(90deg, #7c3aed, #ff8a3d 65%, #14b8a6);
  -webkit-background-clip: text;
  background-clip: text;
}
.highlight-text::after { height: 8px; bottom: 3px; z-index: -1; opacity: .22; background: linear-gradient(90deg, #7c3aed, #ff8a3d); }

.header { background: rgba(255,255,255,.74); backdrop-filter: blur(22px) saturate(150%); border-bottom: 1px solid rgba(139, 92, 246, .12); }
.header.scrolled { box-shadow: 0 16px 45px rgba(16, 24, 40, .08); }
.logo img { height: 48px; filter: drop-shadow(0 8px 18px rgba(124,58,237,.14)); }
.nav-menu { gap: 26px; }
.nav-link { font-size: .98rem; letter-spacing: -.01em; }
.lang-switcher, .btn, .footer-social-btn { backdrop-filter: blur(14px); }
.lang-switcher { border-color: rgba(139, 92, 246, .18); background: rgba(255,255,255,.78); box-shadow: 0 10px 25px rgba(16,24,40,.06); }

.btn { border-radius: 999px; padding: 15px 28px; font-weight: 800; letter-spacing: -.015em; position: relative; overflow: hidden; isolation: isolate; }
.btn::before { content: ''; position: absolute; inset: 0; opacity: 0; z-index: -1; background: linear-gradient(120deg, rgba(255,255,255,.28), transparent 38%, rgba(255,255,255,.18)); transform: translateX(-50%); transition: opacity .3s ease, transform .55s ease; }
.btn:hover::before { opacity: 1; transform: translateX(50%); }
.btn-primary { background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 50%, #ff8a3d 100%); box-shadow: 0 18px 35px rgba(139, 92, 246, .33), 0 0 0 1px rgba(255,255,255,.18) inset; }
.btn-primary:hover { background: linear-gradient(135deg, #9f6cff 0%, #f052a8 48%, #ff9b52 100%); transform: translateY(-4px) scale(1.015); box-shadow: 0 26px 55px rgba(139, 92, 246, .38); }
.btn-secondary { background: linear-gradient(135deg, #ff7a1a, #ffbe5c); box-shadow: 0 16px 35px rgba(255, 122, 26, .26); }
.btn-outline { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.34) !important; box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset; }

.hero { min-height: 100vh; padding-top: 112px; padding-bottom: 68px; background: var(--grad-hero); }
.hero::before, .hero::after { content: ''; position: absolute; border-radius: 999px; pointer-events: none; filter: blur(10px); }
.hero::before { width: 420px; height: 420px; right: -120px; top: 120px; background: radial-gradient(circle, rgba(255,138,61,.28), transparent 66%); animation: orbFloat 9s ease-in-out infinite; }
.hero::after { width: 520px; height: 520px; left: -160px; bottom: -170px; background: radial-gradient(circle, rgba(139,92,246,.32), transparent 68%); animation: orbFloat 11s ease-in-out infinite reverse; }
.hero .container { gap: 62px; }
.hero-content { max-width: 720px; }
.hero-subtitle { color: #fff; padding: 10px 16px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(255,255,255,.08); box-shadow: 0 12px 35px rgba(0,0,0,.16); letter-spacing: .13em; }
.hero-title { font-size: clamp(3.1rem, 7vw, 6.25rem); line-height: .94; letter-spacing: -0.075em; max-width: 780px; background: linear-gradient(180deg, #fff 0%, #f4edff 48%, #ffc78a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 18px 65px rgba(139,92,246,.25); }
.hero-desc { color: rgba(244, 247, 255, .78); font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.85; max-width: 660px; }
.hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 30px; max-width: 660px; }
.hero-stat { padding: 18px 18px 16px; border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.055)); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 20px 55px rgba(0,0,0,.18); }
.hero-stat strong { display: block; color: #fff; font-family: var(--font-primary); font-size: clamp(1.25rem, 2.4vw, 1.75rem); letter-spacing: -.04em; }
.hero-stat span { display: block; margin-top: 4px; color: rgba(255,255,255,.65); font-size: .85rem; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.hero-trust span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 999px; color: rgba(255,255,255,.78); background: rgba(255,255,255,.075); border: 1px solid rgba(255,255,255,.1); font-size: .86rem; }
.hero-trust i { color: #ffb86b; }
.hero-image { min-width: 360px; }
.hero-image::before { content: ''; position: absolute; inset: 10% -8% -8% 10%; background: linear-gradient(135deg, rgba(139,92,246,.45), rgba(255,138,61,.28)); border-radius: 44px; filter: blur(34px); opacity: .75; }
.hero-image img { position: relative; border-radius: 34px; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 40px 110px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.08) inset; transform: perspective(1000px) rotateY(-8deg) rotateX(4deg); animation: float 7s ease-in-out infinite; }

.benefit-card, .pricing-card, .faq-item, .contact-form-wrapper, .contact-info-wrapper, .project-card { border: 1px solid rgba(139,92,246,.12); box-shadow: 0 24px 60px rgba(16,24,40,.10); }
.benefit-card { border-radius: 28px; height: 390px; }
.benefit-card::after { background: linear-gradient(180deg, rgba(8,10,28,.10) 0%, rgba(8,10,28,.84) 72%, rgba(8,10,28,.96) 100%); }
.benefit-card:hover { transform: translateY(-10px) scale(1.015); box-shadow: 0 38px 85px rgba(16,24,40,.18); }
.benefit-title { font-size: 1.35rem; }
.benefit-desc { color: rgba(255,255,255,.82); }
.pricing-card { border-radius: 30px; background: rgba(255,255,255,.88); backdrop-filter: blur(18px); overflow: hidden; }
.pricing-card:hover { transform: translateY(-14px); box-shadow: 0 38px 90px rgba(139,92,246,.18); }
.pricing-card.popular { border-color: rgba(139,92,246,.42); box-shadow: 0 28px 85px rgba(139,92,246,.20); }
.pricing-card.popular::before { background: linear-gradient(135deg, #8b5cf6, #ec4899); border-radius: 999px; }

.project-card { height: 330px; border-radius: 30px; box-shadow: 0 26px 70px rgba(16,24,40,.14); }
.project-card-large { height: 430px; }
.project-front, .project-back { border-radius: 30px; }
.project-front::after { background: linear-gradient(180deg, rgba(5,7,18,.05) 0%, rgba(5,7,18,.32) 42%, rgba(5,7,18,.92) 100%); }
.project-title, .project-back-title { letter-spacing: -.045em; }
.project-title { font-size: 1.3rem; }
.project-back { background: radial-gradient(circle at 20% 0%, rgba(139,92,246,.34), transparent 34%), radial-gradient(circle at 82% 88%, rgba(255,138,61,.28), transparent 34%), linear-gradient(135deg, #090b22, #181338 58%, #281028); }
.project-card:hover { box-shadow: 0 38px 90px rgba(139,92,246,.22); }
.faq-item { border-radius: 20px; background: rgba(255,255,255,.84); backdrop-filter: blur(14px); }

.footer { position: relative; overflow: hidden; background: radial-gradient(circle at 15% 20%, rgba(139,92,246,.30), transparent 28%), radial-gradient(circle at 86% 12%, rgba(255,138,61,.20), transparent 26%), linear-gradient(135deg, #060817 0%, #10112f 70%, #17091f 100%); }
.footer::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, #000, transparent 82%); }
.footer .container { position: relative; z-index: 1; }
.footer-social-btn { border-radius: 16px; border: 1px solid rgba(255,255,255,.08); }
.floating-btn { box-shadow: 0 22px 45px rgba(16,24,40,.22); }

@keyframes orbFloat { 0%, 100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(22px,-28px,0) scale(1.08); } }

@media screen and (max-width: 900px) {
  .hero { min-height: auto; padding-top: 120px; }
  .hero .container { gap: 42px; }
  .hero-image { min-width: 0; width: 100%; }
  .hero-image img { transform: none; }
  .hero-stats { grid-template-columns: 1fr; width: 100%; }
  .hero-trust { justify-content: center; }
}

@media screen and (max-width: 768px) {
  .section { padding: 78px 0; }
  .header .container { height: 72px; }
  .nav-menu { top: 72px; height: calc(100vh - 72px); background: rgba(255,255,255,.94); backdrop-filter: blur(22px); }
  .hero-title { font-size: clamp(2.55rem, 13vw, 4rem); }
  .hero-desc { font-size: 1rem; }
  .hero-btns { width: 100%; }
  .hero-btns .btn { flex: 1 1 100%; justify-content: center; }
  .portfolio-grid, .portfolio-grid-large { grid-template-columns: 1fr; }
  .project-card, .project-card-large { height: 360px; }
}

@media screen and (max-width: 480px) {
  .container { padding: 0 18px; }
  .hero-subtitle { font-size: .72rem; letter-spacing: .1em; }
  .hero-stat { padding: 15px; }
  .project-card, .project-card-large, .benefit-card { border-radius: 24px; }
}

/* ========================================================================== 
   IDEON 2.1 Advanced Motion & Bento Polish
   ========================================================================== */
:root {
  --cursor-x: 50vw;
  --cursor-y: 50vh;
  --hero-tilt-x: 0deg;
  --hero-tilt-y: 0deg;
  --hero-shift-x: 0px;
  --hero-shift-y: 0px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --glow-x: 50%;
  --glow-y: 50%;
}

.cursor-spotlight {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: radial-gradient(460px circle at var(--cursor-x) var(--cursor-y), rgba(139, 92, 246, .16), rgba(255, 138, 61, .08) 28%, transparent 62%);
  mix-blend-mode: soft-light;
}

.reveal {
  opacity: 0;
  transform: translate3d(0, 34px, 0) scale(.985);
  filter: blur(10px);
  transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1), filter .8s ease;
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
  filter: blur(0);
}

.service-marquee {
  overflow: hidden;
  border-block: 1px solid rgba(139, 92, 246, .13);
  background: linear-gradient(90deg, rgba(255,255,255,.92), rgba(248,246,255,.94), rgba(255,249,244,.92));
  box-shadow: 0 16px 42px rgba(16,24,40,.05) inset;
}

.marquee-track {
  display: flex;
  width: max-content;
  gap: 0;
  animation: marqueeMove 28s linear infinite;
}

.marquee-track span {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 18px 34px;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .18em;
  color: rgba(16,24,40,.62);
  white-space: nowrap;
}

.marquee-track span::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8b5cf6, #ff8a3d);
  box-shadow: 0 0 18px rgba(139,92,246,.55);
}

@keyframes marqueeMove {
  from { transform: translateX(0); }
  to { transform: translateX(-33.333%); }
}

.hero-image {
  transform-style: preserve-3d;
  transform: translate3d(var(--hero-shift-x), var(--hero-shift-y), 0) rotateX(var(--hero-tilt-x)) rotateY(var(--hero-tilt-y));
  transition: transform .18s ease-out;
}

.hero-floating-ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.floating-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  border-radius: 999px;
  color: rgba(255,255,255,.92);
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 20px 50px rgba(0,0,0,.28);
  backdrop-filter: blur(16px);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: -.01em;
  animation: chipFloat 5.8s ease-in-out infinite;
}

.floating-chip i { color: #ffb86b; }
.chip-a { left: -22px; top: 14%; }
.chip-b { right: -26px; top: 46%; animation-delay: -1.6s; }
.chip-c { left: 18%; bottom: 2%; animation-delay: -3s; }

@keyframes chipFloat {
  0%, 100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(0,-14px,0); }
}

.hero-title {
  background-size: 200% 200%;
  animation: titleGradient 7s ease-in-out infinite;
}

@keyframes titleGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #8b5cf6, #ff8a3d);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.portfolio-grid,
.portfolio-grid-large {
  grid-template-columns: repeat(12, 1fr);
  gap: 22px;
}

.portfolio-grid .project-card,
.portfolio-grid-large .project-card {
  grid-column: span 3;
}

.portfolio-grid .project-card:nth-child(1),
.portfolio-grid-large .project-card:nth-child(1) {
  grid-column: span 6;
}

.portfolio-grid .project-card:nth-child(3),
.portfolio-grid-large .project-card:nth-child(3) {
  grid-column: span 5;
}

.portfolio-grid .project-card:nth-child(4),
.portfolio-grid-large .project-card:nth-child(4) {
  grid-column: span 4;
}

.project-card {
  transform-style: preserve-3d;
  transform: perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform .22s ease, box-shadow .35s ease;
}

.project-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(340px circle at var(--glow-x) var(--glow-y), rgba(255,255,255,.28), transparent 58%);
  transition: opacity .28s ease;
}

.project-card:hover::before { opacity: 1; }

.project-flipper {
  transform: translateZ(0);
}

.project-card:hover .project-flipper {
  transform: rotateY(180deg) translateZ(18px);
}

.project-front {
  transform: translateZ(1px);
}

.project-front::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(139,92,246,.35), rgba(255,138,61,.38));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: .8;
}

.project-title::before {
  content: 'CASE STUDY';
  display: block;
  width: max-content;
  margin-bottom: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #fff;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.16);
  font-size: .62rem;
  letter-spacing: .16em;
  text-shadow: none;
}

.pricing-card,
.benefit-card,
.faq-item,
.contact-form-wrapper,
.contact-info-wrapper {
  position: relative;
  overflow: hidden;
}

.pricing-card::after,
.benefit-card::before,
.faq-item::before,
.contact-form-wrapper::before,
.contact-info-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.38), transparent);
  transform: translateX(-120%);
  transition: transform .8s ease;
}

.pricing-card:hover::after,
.benefit-card:hover::before,
.faq-item:hover::before,
.contact-form-wrapper:hover::before,
.contact-info-wrapper:hover::before {
  transform: translateX(120%);
}

.footer-social-btn,
.floating-btn {
  position: relative;
  overflow: hidden;
}

.floating-btn::after {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: inherit;
  border: 1px solid currentColor;
  opacity: .35;
  animation: pulseRing 1.8s ease-out infinite;
}

@keyframes pulseRing {
  0% { transform: scale(.75); opacity: .45; }
  100% { transform: scale(1.25); opacity: 0; }
}

.page-header {
  overflow: hidden;
  background: radial-gradient(circle at 14% 10%, rgba(139,92,246,.34), transparent 34%), radial-gradient(circle at 88% 20%, rgba(255,138,61,.25), transparent 30%), linear-gradient(135deg, #070816, #15143a 58%, #230d30);
}

.page-header h1 {
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  background: linear-gradient(180deg, #fff, #ffd2a8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.page-header p {
  color: rgba(255,255,255,.76);
  font-size: 1.12rem;
}

@media screen and (max-width: 1024px) {
  .portfolio-grid .project-card,
  .portfolio-grid-large .project-card,
  .portfolio-grid .project-card:nth-child(1),
  .portfolio-grid .project-card:nth-child(3),
  .portfolio-grid .project-card:nth-child(4),
  .portfolio-grid-large .project-card:nth-child(1),
  .portfolio-grid-large .project-card:nth-child(3),
  .portfolio-grid-large .project-card:nth-child(4) {
    grid-column: span 6;
  }
}

@media screen and (max-width: 768px) {
  .cursor-spotlight { display: none; }
  .service-marquee { margin-top: 0; }
  .marquee-track span { padding: 14px 22px; font-size: .76rem; }
  .floating-chip { display: none; }
  .portfolio-grid .project-card,
  .portfolio-grid-large .project-card,
  .portfolio-grid .project-card:nth-child(1),
  .portfolio-grid .project-card:nth-child(3),
  .portfolio-grid .project-card:nth-child(4),
  .portfolio-grid-large .project-card:nth-child(1),
  .portfolio-grid-large .project-card:nth-child(3),
  .portfolio-grid-large .project-card:nth-child(4) {
    grid-column: span 12;
  }
  .project-card { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; filter: none; }
}

/* ========================================================================== 
   IDEON 2.2 Theme + Language Premium Toggles
   ========================================================================== */
.theme-toggle,
.lang-segmented {
  flex: 0 0 auto;
}

.theme-toggle {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.theme-toggle-track,
.lang-segmented {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(139, 92, 246, .18);
  box-shadow: 0 12px 30px rgba(16, 24, 40, .08), inset 0 1px 0 rgba(255,255,255,.75);
  backdrop-filter: blur(18px) saturate(160%);
}

.theme-toggle-track {
  width: 74px;
  justify-content: space-between;
}

.theme-toggle-icon {
  position: relative;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: .8rem;
  transition: color .25s ease, opacity .25s ease, transform .25s ease;
}

.theme-toggle-icon.sun { color: #f59e0b; }
.theme-toggle-icon.moon { color: #94a3b8; }

.theme-toggle-thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 30px;
  height: 30px;
  z-index: 1;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff, #fff7ed);
  box-shadow: 0 8px 18px rgba(16,24,40,.12);
  transition: transform .34s cubic-bezier(.2,.8,.2,1), background .25s ease;
}

.theme-toggle[aria-pressed="true"] .theme-toggle-thumb {
  transform: translateX(34px);
  background: linear-gradient(135deg, #1e1b4b, #312e81);
}

.theme-toggle[aria-pressed="true"] .theme-toggle-icon.sun {
  color: #a1a1aa;
  opacity: .62;
}

.theme-toggle[aria-pressed="true"] .theme-toggle-icon.moon {
  color: #f8fafc;
  transform: rotate(-10deg);
}

.lang-segmented {
  gap: 3px;
}

.lang-segment {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 52px;
  height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  color: #7a8497;
  font-weight: 800;
  font-size: .77rem;
  line-height: 1;
  transition: color .25s ease, transform .25s ease, background .25s ease, box-shadow .25s ease;
}

.lang-segment:hover {
  color: #5b21b6;
  transform: translateY(-1px);
}

.lang-segment.active {
  color: #101828;
  background: linear-gradient(135deg, #ffffff, #f6f2ff);
  box-shadow: 0 8px 20px rgba(16,24,40,.10), inset 0 1px 0 rgba(255,255,255,.9);
}

.lang-code {
  letter-spacing: -.02em;
}

.lang-label {
  opacity: .66;
  font-size: .72rem;
}

.lang-segmented .lang-flag,
.lang-segmented .fa-chevron-down,
.lang-segmented .lang-dropdown {
  display: none !important;
}

html[data-theme="dark"] body {
  background: radial-gradient(circle at top left, rgba(139, 92, 246, .18), transparent 34%), linear-gradient(180deg, #070816 0%, #0b1026 54%, #090a18 100%);
  color: rgba(226, 232, 240, .78);
}

html[data-theme="dark"] body::before {
  opacity: .42;
  background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
  color: #f8fafc;
}

html[data-theme="dark"] .header {
  background: rgba(7, 8, 22, .72);
  border-bottom-color: rgba(255,255,255,.10);
}

html[data-theme="dark"] .nav-link,
html[data-theme="dark"] .mobile-nav-toggle {
  color: rgba(248,250,252,.82);
}

html[data-theme="dark"] .nav-link:hover,
html[data-theme="dark"] .nav-link.active {
  color: #fff;
}

html[data-theme="dark"] .theme-toggle-track,
html[data-theme="dark"] .lang-segmented {
  background: rgba(15, 23, 42, .72);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 14px 34px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08);
}

html[data-theme="dark"] .lang-segment {
  color: rgba(226,232,240,.58);
}

html[data-theme="dark"] .lang-segment:hover {
  color: #fff;
}

html[data-theme="dark"] .lang-segment.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(139,92,246,.95), rgba(255,138,61,.72));
  box-shadow: 0 10px 28px rgba(139,92,246,.28);
}

html[data-theme="dark"] .section-bg-light,
html[data-theme="dark"] .pricing-card,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .contact-form-wrapper,
html[data-theme="dark"] .contact-info-wrapper,
html[data-theme="dark"] .modal-container {
  background: rgba(15, 23, 42, .78);
  color: rgba(226,232,240,.78);
  border-color: rgba(255,255,255,.10);
}

html[data-theme="dark"] .section-header p,
html[data-theme="dark"] .pricing-feature,
html[data-theme="dark"] .faq-answer-content,
html[data-theme="dark"] .contact-info-text,
html[data-theme="dark"] .form-group label {
  color: rgba(226,232,240,.68);
}

html[data-theme="dark"] .pricing-price small,
html[data-theme="dark"] .footer-links a {
  color: rgba(226,232,240,.58);
}

html[data-theme="dark"] .pricing-feature i,
html[data-theme="dark"] .faq-toggle-icon,
html[data-theme="dark"] .contact-info-icon {
  color: #c4b5fd;
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .form-control {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: #f8fafc;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: rgba(226,232,240,.42);
}

html[data-theme="dark"] .service-marquee {
  background: linear-gradient(90deg, rgba(9,10,24,.96), rgba(23,18,48,.96), rgba(31,18,30,.96));
  border-block-color: rgba(255,255,255,.10);
}

html[data-theme="dark"] .marquee-track span {
  color: rgba(248,250,252,.72);
}

@media screen and (max-width: 768px) {
  .nav-menu .theme-toggle,
  .nav-menu .lang-segmented {
    margin: 4px auto;
  }

  .nav-menu .theme-toggle-track,
  .nav-menu .lang-segmented {
    min-height: 44px;
  }

  .nav-menu .lang-segment {
    min-width: 76px;
    height: 36px;
  }
}

/* ========================================================================== 
   IDEON 2.3 Galaxy Dark Theme
   ========================================================================== */
html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 18% 12%, rgba(124, 58, 237, .34), transparent 28%),
    radial-gradient(circle at 78% 8%, rgba(45, 212, 191, .20), transparent 24%),
    radial-gradient(circle at 62% 72%, rgba(255, 138, 61, .16), transparent 28%),
    radial-gradient(circle at 28% 86%, rgba(236, 72, 153, .14), transparent 26%),
    linear-gradient(180deg, #02030d 0%, #070816 36%, #0b1026 68%, #050612 100%);
  color: rgba(234, 240, 255, .78);
}

html[data-theme="dark"] body::before {
  opacity: 1;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.88) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(196,181,253,.72) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(125,211,252,.58) 0 1px, transparent 1.5px),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 90px 90px, 140px 140px, 210px 210px, 64px 64px, 64px 64px;
  background-position: 0 0, 38px 60px, 90px 20px, 0 0, 0 0;
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.92) 68%, transparent 100%);
  animation: galaxyDrift 38s linear infinite;
}

html[data-theme="dark"] body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .74;
  background:
    radial-gradient(ellipse at 18% 20%, rgba(139,92,246,.22), transparent 42%),
    radial-gradient(ellipse at 82% 34%, rgba(14,165,233,.14), transparent 38%),
    radial-gradient(ellipse at 54% 88%, rgba(236,72,153,.12), transparent 40%),
    linear-gradient(115deg, transparent 0 42%, rgba(255,255,255,.10) 48%, transparent 54% 100%);
  filter: saturate(130%);
  animation: nebulaPulse 12s ease-in-out infinite;
}

@keyframes galaxyDrift {
  from { background-position: 0 0, 38px 60px, 90px 20px, 0 0, 0 0; }
  to { background-position: 90px 180px, 178px 260px, 300px 230px, 64px 128px, 64px 128px; }
}

@keyframes nebulaPulse {
  0%, 100% { opacity: .58; transform: scale(1); }
  50% { opacity: .86; transform: scale(1.035); }
}

html[data-theme="dark"] .hero,
html[data-theme="dark"] .page-header {
  background:
    radial-gradient(circle at 14% 18%, rgba(139, 92, 246, .52), transparent 32%),
    radial-gradient(circle at 78% 18%, rgba(45, 212, 191, .24), transparent 28%),
    radial-gradient(circle at 58% 82%, rgba(236, 72, 153, .24), transparent 30%),
    linear-gradient(135deg, #02030d 0%, #090a22 44%, #160b2e 72%, #070816 100%);
}

html[data-theme="dark"] .hero::before {
  background: radial-gradient(circle, rgba(125, 211, 252, .24), transparent 66%);
}

html[data-theme="dark"] .hero::after {
  background: radial-gradient(circle, rgba(168, 85, 247, .34), transparent 68%);
}

html[data-theme="dark"] .hero-image::before {
  background:
    radial-gradient(circle at 20% 30%, rgba(125, 211, 252, .36), transparent 34%),
    radial-gradient(circle at 74% 60%, rgba(236, 72, 153, .28), transparent 34%),
    linear-gradient(135deg, rgba(139,92,246,.50), rgba(45,212,191,.20));
  filter: blur(42px);
}

html[data-theme="dark"] .hero-subtitle,
html[data-theme="dark"] .hero-stat,
html[data-theme="dark"] .hero-trust span,
html[data-theme="dark"] .floating-chip,
html[data-theme="dark"] .pricing-card,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .contact-form-wrapper,
html[data-theme="dark"] .contact-info-wrapper {
  background: linear-gradient(180deg, rgba(15,23,42,.68), rgba(15,23,42,.36));
  border-color: rgba(196,181,253,.16);
  box-shadow: 0 26px 80px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08);
}

html[data-theme="dark"] .project-back {
  background:
    radial-gradient(circle at 18% 8%, rgba(125,211,252,.24), transparent 30%),
    radial-gradient(circle at 82% 84%, rgba(236,72,153,.24), transparent 32%),
    radial-gradient(circle at 50% 46%, rgba(139,92,246,.22), transparent 38%),
    linear-gradient(135deg, #030413, #0f1230 58%, #1d0b2c);
}

html[data-theme="dark"] .project-front::after {
  background: linear-gradient(180deg, rgba(2,3,13,.06) 0%, rgba(2,3,13,.38) 46%, rgba(2,3,13,.96) 100%);
}

html[data-theme="dark"] .service-marquee {
  background:
    radial-gradient(circle at 20% 50%, rgba(139,92,246,.16), transparent 32%),
    radial-gradient(circle at 80% 50%, rgba(45,212,191,.12), transparent 28%),
    rgba(3, 4, 19, .94);
}

html[data-theme="dark"] .footer {
  background:
    radial-gradient(circle at 15% 20%, rgba(139,92,246,.36), transparent 28%),
    radial-gradient(circle at 86% 12%, rgba(45,212,191,.18), transparent 26%),
    radial-gradient(circle at 50% 90%, rgba(236,72,153,.16), transparent 28%),
    linear-gradient(135deg, #02030d 0%, #070816 58%, #12071f 100%);
}

html[data-theme="dark"] .cursor-spotlight {
  background: radial-gradient(520px circle at var(--cursor-x) var(--cursor-y), rgba(125,211,252,.18), rgba(139,92,246,.15) 28%, rgba(236,72,153,.08) 45%, transparent 66%);
  mix-blend-mode: screen;
}

html[data-theme="dark"] .theme-toggle-track,
html[data-theme="dark"] .lang-segmented {
  box-shadow: 0 16px 38px rgba(0,0,0,.32), 0 0 28px rgba(139,92,246,.12), inset 0 1px 0 rgba(255,255,255,.10);
}

html[data-theme="dark"] .btn-primary {
  box-shadow: 0 20px 55px rgba(139,92,246,.34), 0 0 42px rgba(45,212,191,.10);
}

/* IDEON provided logo sizing */
.logo img[src*="logo-04.png"] {
  height: 42px;
  width: auto;
  object-fit: contain;
}

.footer-col-about img[src*="logo-transparent-04.png"] {
  width: min(190px, 100%);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 14px 30px rgba(139, 92, 246, .22));
}

html[data-theme="dark"] .logo img[src*="logo-04.png"] {
  filter: drop-shadow(0 10px 24px rgba(255,255,255,.12)) drop-shadow(0 0 22px rgba(139,92,246,.20));
}

@media screen and (max-width: 768px) {
  .logo img[src*="logo-04.png"] {
    height: 36px;
  }
}

/* ========================================================================== 
   IDEON 2.4 Strong Galaxy Background Layer
   ========================================================================== */
html[data-theme="dark"] {
  background: #02030d;
}

html[data-theme="dark"] body {
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(circle at 0% 8%, rgba(91, 33, 182, .44), transparent 30%),
    radial-gradient(circle at 100% 16%, rgba(14, 116, 144, .34), transparent 32%),
    radial-gradient(circle at 50% 42%, rgba(76, 29, 149, .24), transparent 36%),
    linear-gradient(120deg, #030311 0%, #08091c 42%, #071924 70%, #03040f 100%);
}

html[data-theme="dark"] body::before {
  z-index: 0;
  opacity: .92;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.95) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(167,139,250,.95) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(34,211,238,.70) 0 1px, transparent 1.6px),
    linear-gradient(rgba(139,92,246,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45,212,191,.09) 1px, transparent 1px);
  background-size: 78px 78px, 128px 128px, 190px 190px, 46px 46px, 46px 46px;
  background-position: 12px 18px, 44px 70px, 90px 20px, 0 0, 0 0;
  mask-image: none;
  animation: galaxyDrift 44s linear infinite, starTwinkle 4.5s ease-in-out infinite;
}

html[data-theme="dark"] body::after {
  z-index: 0;
  opacity: .95;
  background:
    radial-gradient(ellipse at 12% 24%, rgba(124,58,237,.52), transparent 38%),
    radial-gradient(ellipse at 86% 26%, rgba(6,182,212,.30), transparent 34%),
    radial-gradient(ellipse at 68% 78%, rgba(236,72,153,.22), transparent 38%),
    radial-gradient(ellipse at 22% 86%, rgba(249,115,22,.16), transparent 34%),
    linear-gradient(110deg, transparent 0 36%, rgba(255,255,255,.08) 44%, rgba(125,211,252,.08) 50%, transparent 60% 100%);
  filter: blur(.2px) saturate(145%);
  animation: nebulaPulse 10s ease-in-out infinite, auroraSlide 18s ease-in-out infinite;
}

html[data-theme="dark"] .header,
html[data-theme="dark"] main,
html[data-theme="dark"] section,
html[data-theme="dark"] footer,
html[data-theme="dark"] .floating-contact {
  position: relative;
  z-index: 1;
}

html[data-theme="dark"] .section,
html[data-theme="dark"] .section-bg-light,
html[data-theme="dark"] .portfolio-section,
html[data-theme="dark"] .faq-section,
html[data-theme="dark"] .testimonials,
html[data-theme="dark"] .contact-section {
  background:
    linear-gradient(180deg, rgba(3,4,15,.18), rgba(3,4,15,.38)),
    transparent !important;
}

html[data-theme="dark"] .section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 8% 8%, rgba(139,92,246,.12), transparent 28%),
    radial-gradient(circle at 92% 18%, rgba(45,212,191,.08), transparent 24%);
}

html[data-theme="dark"] .hero {
  box-shadow: inset 0 -90px 100px rgba(3,4,15,.78);
}

html[data-theme="dark"] .service-marquee {
  box-shadow: 0 0 55px rgba(139,92,246,.18), inset 0 1px 0 rgba(255,255,255,.08);
}

html[data-theme="dark"] .benefit-card,
html[data-theme="dark"] .pricing-card,
html[data-theme="dark"] .project-card,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .contact-form-wrapper,
html[data-theme="dark"] .contact-info-wrapper {
  background-color: rgba(7, 10, 28, .62);
  backdrop-filter: blur(18px) saturate(140%);
}

html[data-theme="dark"] .benefit-card,
html[data-theme="dark"] .project-card {
  box-shadow: 0 28px 90px rgba(0,0,0,.36), 0 0 42px rgba(139,92,246,.10);
}

html[data-theme="dark"] .page-header {
  box-shadow: inset 0 -80px 110px rgba(3,4,15,.82);
}

@keyframes starTwinkle {
  0%, 100% { opacity: .72; filter: brightness(.9); }
  50% { opacity: 1; filter: brightness(1.22); }
}

@keyframes auroraSlide {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(-2%, 1.5%, 0) scale(1.04); }
}

/* ========================================================================== 
   IDEON 2.5 Reference-style Galaxy Hero
   ========================================================================== */
html[data-theme="dark"] .hero,
html[data-theme="dark"] .page-header {
  isolation: isolate;
  background:
    radial-gradient(circle at 7% 36%, rgba(124, 58, 237, .58), transparent 34%),
    radial-gradient(circle at 38% 82%, rgba(190, 24, 93, .34), transparent 28%),
    radial-gradient(circle at 92% 26%, rgba(14, 116, 144, .38), transparent 34%),
    radial-gradient(circle at 68% 64%, rgba(30, 64, 175, .20), transparent 30%),
    linear-gradient(112deg, #0c0824 0%, #100b2b 32%, #071428 66%, #080b1c 100%) !important;
}

html[data-theme="dark"] .hero::before,
html[data-theme="dark"] .page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .9;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.88) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(167,139,250,.72) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(34,211,238,.50) 0 1px, transparent 1.5px),
    linear-gradient(rgba(139,92,246,.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45,212,191,.075) 1px, transparent 1px);
  background-size: 82px 82px, 132px 132px, 196px 196px, 48px 48px, 48px 48px;
  background-position: 14px 20px, 44px 74px, 98px 24px, 0 0, 0 0;
  animation: galaxyDrift 48s linear infinite, starTwinkle 4.8s ease-in-out infinite;
}

html[data-theme="dark"] .hero::after,
html[data-theme="dark"] .page-header::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 17% 38%, rgba(139,92,246,.46), transparent 42%),
    radial-gradient(ellipse at 45% 88%, rgba(236,72,153,.24), transparent 34%),
    radial-gradient(ellipse at 94% 34%, rgba(6,182,212,.24), transparent 38%),
    linear-gradient(90deg, rgba(2,3,13,.08) 0%, rgba(2,3,13,.36) 58%, rgba(2,3,13,.18) 100%);
  filter: saturate(145%);
  animation: auroraSlide 16s ease-in-out infinite;
}

html[data-theme="dark"] .hero {
  min-height: 100vh;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 -110px 130px rgba(2,3,13,.78);
}

html[data-theme="dark"] .hero .container {
  min-height: calc(100vh - 150px);
  align-items: center;
}

html[data-theme="dark"] .hero-title {
  color: transparent;
  background: linear-gradient(180deg, #ffffff 0%, #f4f0ff 52%, #dbeafe 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 22px 70px rgba(139,92,246,.38);
}

html[data-theme="dark"] .hero-desc {
  color: rgba(226,232,240,.78);
}

html[data-theme="dark"] .hero-image img {
  max-width: min(460px, 100%);
  border-radius: 18px;
  box-shadow:
    0 34px 90px rgba(0,0,0,.48),
    0 0 0 1px rgba(255,255,255,.14) inset,
    0 0 70px rgba(139,92,246,.22),
    0 0 90px rgba(45,212,191,.12);
}

html[data-theme="dark"] .hero-stat,
html[data-theme="dark"] .hero-trust span,
html[data-theme="dark"] .hero-subtitle {
  background: rgba(13, 17, 38, .54);
  border-color: rgba(255,255,255,.13);
  backdrop-filter: blur(18px) saturate(160%);
}

html[data-theme="dark"] .hero-stat strong,
html[data-theme="dark"] .hero-subtitle {
  color: #fff;
}

html[data-theme="dark"] .service-marquee {
  margin-top: 0;
  background: rgba(3, 4, 15, .88) !important;
  border-block-color: rgba(255,255,255,.10);
}

html[data-theme="dark"] .section:first-of-type:not(.hero) {
  padding-top: 96px;
}

@media screen and (max-width: 900px) {
  html[data-theme="dark"] .hero .container {
    min-height: auto;
  }

  html[data-theme="dark"] .hero-image img {
    max-width: 100%;
  }
}

/* ========================================================================== 
   IDEON 2.6 Global Galaxy Dark Theme - Hero CSS Across Entire Site
   ========================================================================== */
html[data-theme="dark"],
html[data-theme="dark"] body {
  min-height: 100%;
  background:
    radial-gradient(circle at 7% 18%, rgba(124, 58, 237, .58), transparent 34%),
    radial-gradient(circle at 38% 52%, rgba(190, 24, 93, .30), transparent 30%),
    radial-gradient(circle at 94% 22%, rgba(14, 116, 144, .38), transparent 34%),
    radial-gradient(circle at 70% 72%, rgba(30, 64, 175, .22), transparent 34%),
    linear-gradient(112deg, #0c0824 0%, #100b2b 32%, #071428 66%, #080b1c 100%) !important;
  background-attachment: fixed !important;
}

html[data-theme="dark"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .9;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.88) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(167,139,250,.72) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(34,211,238,.50) 0 1px, transparent 1.5px),
    linear-gradient(rgba(139,92,246,.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45,212,191,.075) 1px, transparent 1px);
  background-size: 82px 82px, 132px 132px, 196px 196px, 48px 48px, 48px 48px;
  background-position: 14px 20px, 44px 74px, 98px 24px, 0 0, 0 0;
  mask-image: none !important;
  animation: galaxyDrift 48s linear infinite, starTwinkle 4.8s ease-in-out infinite;
}

html[data-theme="dark"] body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .95;
  background:
    radial-gradient(ellipse at 17% 28%, rgba(139,92,246,.46), transparent 42%),
    radial-gradient(ellipse at 45% 64%, rgba(236,72,153,.22), transparent 36%),
    radial-gradient(ellipse at 94% 34%, rgba(6,182,212,.24), transparent 38%),
    linear-gradient(90deg, rgba(2,3,13,.08) 0%, rgba(2,3,13,.34) 58%, rgba(2,3,13,.18) 100%);
  filter: saturate(145%);
  animation: auroraSlide 16s ease-in-out infinite;
}

html[data-theme="dark"] .header,
html[data-theme="dark"] .hero,
html[data-theme="dark"] .page-header,
html[data-theme="dark"] .service-marquee,
html[data-theme="dark"] .section,
html[data-theme="dark"] .footer,
html[data-theme="dark"] .floating-contact,
html[data-theme="dark"] .modal-overlay {
  position: relative;
  z-index: 1;
}

html[data-theme="dark"] .hero,
html[data-theme="dark"] .page-header,
html[data-theme="dark"] .section,
html[data-theme="dark"] .section-bg-light,
html[data-theme="dark"] .portfolio-section,
html[data-theme="dark"] .faq-section,
html[data-theme="dark"] .testimonials,
html[data-theme="dark"] .contact-section,
html[data-theme="dark"] .footer {
  background: transparent !important;
}

html[data-theme="dark"] .hero::before,
html[data-theme="dark"] .hero::after,
html[data-theme="dark"] .page-header::before,
html[data-theme="dark"] .page-header::after,
html[data-theme="dark"] .section::before,
html[data-theme="dark"] .footer::before {
  display: none !important;
}

html[data-theme="dark"] .hero,
html[data-theme="dark"] .page-header {
  box-shadow: inset 0 -90px 110px rgba(2,3,13,.42) !important;
}

html[data-theme="dark"] .section {
  border-top: 1px solid rgba(255,255,255,.045);
}

html[data-theme="dark"] .section-header,
html[data-theme="dark"] .hero-content,
html[data-theme="dark"] .page-header .container {
  position: relative;
  z-index: 2;
}

html[data-theme="dark"] .benefit-card,
html[data-theme="dark"] .pricing-card,
html[data-theme="dark"] .project-card,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .contact-form-wrapper,
html[data-theme="dark"] .contact-info-wrapper,
html[data-theme="dark"] .testimonial-card,
html[data-theme="dark"] .modal-container {
  background: linear-gradient(180deg, rgba(13, 17, 38, .68), rgba(13, 17, 38, .42)) !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.36), 0 0 42px rgba(139,92,246,.10), inset 0 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter: blur(18px) saturate(150%);
}

html[data-theme="dark"] .service-marquee {
  background: rgba(3, 4, 15, .68) !important;
  backdrop-filter: blur(18px) saturate(140%);
}

html[data-theme="dark"] .footer {
  border-top: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 90px 120px rgba(2,3,13,.34);
}

html[data-theme="dark"] .header {
  background: rgba(3, 4, 15, .70) !important;
  backdrop-filter: blur(20px) saturate(160%);
}

/* ========================================================================== 
   IDEON 3.0 Dark Experience - Galaxy Creative OS
   Dark mode is a separate premium visual system, not just inverted colors.
   ========================================================================== */
html[data-theme="dark"] {
  color-scheme: dark;
  --dark-void: #02030d;
  --dark-ink: #070816;
  --dark-panel: rgba(8, 12, 32, .72);
  --dark-panel-strong: rgba(11, 16, 42, .88);
  --dark-stroke: rgba(199, 210, 254, .14);
  --dark-stroke-strong: rgba(167, 139, 250, .28);
  --dark-text: #f7f8ff;
  --dark-muted: rgba(226, 232, 240, .72);
  --dark-faint: rgba(226, 232, 240, .52);
  --dark-purple: #a78bfa;
  --dark-cyan: #22d3ee;
  --dark-pink: #f472b6;
  --dark-orange: #fb923c;
  --dark-gradient: linear-gradient(135deg, #8b5cf6 0%, #ec4899 48%, #22d3ee 100%);
}

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 8% 18%, rgba(124, 58, 237, .44), transparent 28%),
    radial-gradient(circle at 92% 18%, rgba(34, 211, 238, .24), transparent 30%),
    radial-gradient(circle at 50% 72%, rgba(236, 72, 153, .18), transparent 34%),
    linear-gradient(120deg, #02030d 0%, #070816 42%, #071827 70%, #03040f 100%) !important;
  color: var(--dark-muted);
}

html[data-theme="dark"] body::before {
  z-index: 0;
  opacity: .96;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.88) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(167,139,250,.72) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(34,211,238,.48) 0 1px, transparent 1.6px),
    linear-gradient(rgba(139,92,246,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,211,238,.075) 1px, transparent 1px);
  background-size: 78px 78px, 132px 132px, 198px 198px, 48px 48px, 48px 48px;
  background-position: 14px 20px, 44px 74px, 98px 24px, 0 0, 0 0;
  mask-image: none;
  animation: galaxyDrift 52s linear infinite, starTwinkle 5s ease-in-out infinite;
}

html[data-theme="dark"] body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .95;
  background:
    radial-gradient(ellipse at 14% 30%, rgba(139, 92, 246, .42), transparent 42%),
    radial-gradient(ellipse at 86% 28%, rgba(6, 182, 212, .22), transparent 38%),
    radial-gradient(ellipse at 52% 92%, rgba(236, 72, 153, .20), transparent 40%),
    linear-gradient(110deg, transparent 0 38%, rgba(255,255,255,.07) 48%, transparent 58% 100%);
  filter: saturate(155%);
  animation: auroraSlide 18s ease-in-out infinite;
}

html[data-theme="dark"] .header,
html[data-theme="dark"] main,
html[data-theme="dark"] section,
html[data-theme="dark"] footer,
html[data-theme="dark"] .floating-contact,
html[data-theme="dark"] .modal-overlay {
  position: relative;
  z-index: 1;
}

/* Header: command-bar style */
html[data-theme="dark"] .header {
  background: rgba(3, 5, 18, .68) !important;
  border-bottom: 1px solid rgba(199, 210, 254, .10) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
}

html[data-theme="dark"] .header.scrolled {
  background: rgba(3, 5, 18, .86) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.42), 0 0 38px rgba(139,92,246,.10);
}

html[data-theme="dark"] .logo {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.08);
}

html[data-theme="dark"] .nav-link {
  color: rgba(241,245,249,.74) !important;
}

html[data-theme="dark"] .nav-link:hover,
html[data-theme="dark"] .nav-link.active {
  color: #fff !important;
  text-shadow: 0 0 22px rgba(167,139,250,.36);
}

/* Hero: separate dark landing */
html[data-theme="dark"] .hero,
html[data-theme="dark"] .page-header {
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 34%, rgba(124, 58, 237, .62), transparent 34%),
    radial-gradient(circle at 42% 88%, rgba(190, 24, 93, .34), transparent 28%),
    radial-gradient(circle at 92% 26%, rgba(14, 116, 144, .40), transparent 34%),
    radial-gradient(circle at 68% 64%, rgba(30, 64, 175, .22), transparent 30%),
    linear-gradient(112deg, #0c0824 0%, #100b2b 32%, #071428 66%, #080b1c 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 -120px 150px rgba(2,3,13,.82);
}

html[data-theme="dark"] .hero .container {
  min-height: calc(100vh - 150px);
  align-items: center;
}

html[data-theme="dark"] .hero-subtitle,
html[data-theme="dark"] .page-header .breadcrumb {
  color: #fff !important;
  background: rgba(255,255,255,.075) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.24), 0 0 36px rgba(139,92,246,.12);
}

html[data-theme="dark"] .hero-title,
html[data-theme="dark"] .page-header h1 {
  color: transparent !important;
  background: linear-gradient(180deg, #ffffff 0%, #f4f0ff 48%, #bfefff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  text-shadow: 0 24px 80px rgba(139,92,246,.42);
}

html[data-theme="dark"] .hero-desc,
html[data-theme="dark"] .page-header p {
  color: rgba(226,232,240,.78) !important;
}

html[data-theme="dark"] .hero-image img {
  max-width: min(470px, 100%);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 36px 100px rgba(0,0,0,.52),
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 0 80px rgba(139,92,246,.24),
    0 0 100px rgba(34,211,238,.13);
}

html[data-theme="dark"] .hero-stat,
html[data-theme="dark"] .hero-trust span,
html[data-theme="dark"] .floating-chip {
  background: linear-gradient(180deg, rgba(13,17,38,.74), rgba(13,17,38,.42)) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  color: rgba(255,255,255,.82) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(18px) saturate(160%);
}

html[data-theme="dark"] .hero-stat strong {
  color: #fff !important;
}

/* Sections: transparent galaxy surfaces */
html[data-theme="dark"] .section,
html[data-theme="dark"] .section-bg-light,
html[data-theme="dark"] .portfolio-section,
html[data-theme="dark"] .faq-section,
html[data-theme="dark"] .testimonials,
html[data-theme="dark"] .contact-section {
  background: linear-gradient(180deg, rgba(3,4,15,.10), rgba(3,4,15,.36)), transparent !important;
}

html[data-theme="dark"] .section-header h2,
html[data-theme="dark"] .pricing-title,
html[data-theme="dark"] .faq-question h3,
html[data-theme="dark"] .contact-info-title,
html[data-theme="dark"] .modal-title {
  color: var(--dark-text) !important;
}

html[data-theme="dark"] .section-header p,
html[data-theme="dark"] .pricing-subtitle,
html[data-theme="dark"] .pricing-feature,
html[data-theme="dark"] .faq-answer-content,
html[data-theme="dark"] .contact-info-text,
html[data-theme="dark"] .testimonial-text,
html[data-theme="dark"] .modal-description {
  color: var(--dark-muted) !important;
}

/* Premium glass cards */
html[data-theme="dark"] .benefit-card,
html[data-theme="dark"] .pricing-card,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .contact-form-wrapper,
html[data-theme="dark"] .contact-info-wrapper,
html[data-theme="dark"] .modal-container,
html[data-theme="dark"] .testimonial-card,
html[data-theme="dark"] .testimonial-slide {
  background:
    linear-gradient(180deg, rgba(15,23,42,.74), rgba(8,12,32,.50)) !important;
  border: 1px solid var(--dark-stroke) !important;
  box-shadow:
    0 28px 90px rgba(0,0,0,.38),
    0 0 48px rgba(139,92,246,.08),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter: blur(20px) saturate(150%);
}

html[data-theme="dark"] .benefit-card:hover,
html[data-theme="dark"] .pricing-card:hover,
html[data-theme="dark"] .faq-item:hover,
html[data-theme="dark"] .contact-form-wrapper:hover,
html[data-theme="dark"] .contact-info-wrapper:hover {
  border-color: var(--dark-stroke-strong) !important;
  box-shadow:
    0 36px 110px rgba(0,0,0,.48),
    0 0 70px rgba(139,92,246,.16),
    0 0 70px rgba(34,211,238,.07),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

html[data-theme="dark"] .benefit-card::after {
  background: linear-gradient(180deg, rgba(2,3,13,.03) 0%, rgba(2,3,13,.50) 44%, rgba(2,3,13,.94) 100%) !important;
}

html[data-theme="dark"] .benefit-icon,
html[data-theme="dark"] .pricing-feature i,
html[data-theme="dark"] .faq-toggle-icon,
html[data-theme="dark"] .contact-info-icon {
  color: var(--dark-cyan) !important;
  filter: drop-shadow(0 0 18px rgba(34,211,238,.24));
}

/* Pricing as dark product cards */
html[data-theme="dark"] .pricing-card.popular {
  border-color: rgba(167,139,250,.42) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(139,92,246,.24), transparent 34%),
    linear-gradient(180deg, rgba(20,16,54,.82), rgba(8,12,32,.58)) !important;
}

html[data-theme="dark"] .pricing-price,
html[data-theme="dark"] .pricing-price span {
  color: #fff !important;
}

html[data-theme="dark"] .pricing-price small {
  color: var(--dark-faint) !important;
}

/* Portfolio: neon case studies */
html[data-theme="dark"] .project-card {
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 30px 95px rgba(0,0,0,.42), 0 0 54px rgba(139,92,246,.10) !important;
}

html[data-theme="dark"] .project-front::after {
  background: linear-gradient(180deg, rgba(2,3,13,.02) 0%, rgba(2,3,13,.34) 42%, rgba(2,3,13,.96) 100%) !important;
}

html[data-theme="dark"] .project-front::before {
  background: linear-gradient(135deg, rgba(255,255,255,.42), rgba(167,139,250,.44), rgba(34,211,238,.28), rgba(244,114,182,.30)) !important;
  opacity: .95;
}

html[data-theme="dark"] .project-back {
  background:
    radial-gradient(circle at 16% 12%, rgba(34,211,238,.26), transparent 30%),
    radial-gradient(circle at 84% 82%, rgba(244,114,182,.26), transparent 34%),
    radial-gradient(circle at 50% 45%, rgba(139,92,246,.28), transparent 38%),
    linear-gradient(135deg, #030413, #0f1230 58%, #1d0b2c) !important;
}

html[data-theme="dark"] .project-title,
html[data-theme="dark"] .project-back-title {
  color: #fff !important;
  text-shadow: 0 12px 35px rgba(0,0,0,.45);
}

html[data-theme="dark"] .project-desc,
html[data-theme="dark"] .project-back-desc {
  color: rgba(226,232,240,.78) !important;
}

/* Forms: dark cockpit */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .form-control {
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(199,210,254,.14) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] .form-control:focus {
  border-color: rgba(34,211,238,.48) !important;
  box-shadow: 0 0 0 4px rgba(34,211,238,.10), 0 0 38px rgba(139,92,246,.10) !important;
}

html[data-theme="dark"] .form-group label {
  color: rgba(248,250,252,.82) !important;
}

/* Buttons and toggles */
html[data-theme="dark"] .btn-primary {
  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 46%, #22d3ee 100%) !important;
  box-shadow: 0 22px 65px rgba(139,92,246,.34), 0 0 48px rgba(34,211,238,.12) !important;
}

html[data-theme="dark"] .btn-outline {
  background: rgba(255,255,255,.065) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: #fff !important;
}

html[data-theme="dark"] .theme-toggle-track,
html[data-theme="dark"] .lang-segmented {
  background: rgba(8, 12, 32, .72) !important;
  border-color: rgba(199,210,254,.14) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.34), 0 0 32px rgba(139,92,246,.14), inset 0 1px 0 rgba(255,255,255,.09) !important;
}

html[data-theme="dark"] .lang-segment.active {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(139,92,246,.98), rgba(236,72,153,.74), rgba(34,211,238,.62)) !important;
}

/* Marquee and footer */
html[data-theme="dark"] .service-marquee {
  background: rgba(3, 4, 15, .88) !important;
  border-block-color: rgba(255,255,255,.10) !important;
  box-shadow: 0 0 55px rgba(139,92,246,.16), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

html[data-theme="dark"] .marquee-track span {
  color: rgba(248,250,252,.76) !important;
}

html[data-theme="dark"] .footer {
  background:
    radial-gradient(circle at 15% 20%, rgba(139,92,246,.36), transparent 28%),
    radial-gradient(circle at 86% 12%, rgba(34,211,238,.18), transparent 26%),
    radial-gradient(circle at 50% 90%, rgba(236,72,153,.16), transparent 28%),
    linear-gradient(135deg, #02030d 0%, #070816 58%, #12071f 100%) !important;
  border-top: 1px solid rgba(255,255,255,.10);
}

html[data-theme="dark"] .footer-title,
html[data-theme="dark"] .footer-contact-title {
  color: #fff !important;
}

html[data-theme="dark"] .footer-links a,
html[data-theme="dark"] .footer-contact-text,
html[data-theme="dark"] .footer-desc,
html[data-theme="dark"] .copyright-text {
  color: rgba(226,232,240,.66) !important;
}

html[data-theme="dark"] .footer-links a:hover {
  color: #fff !important;
  text-shadow: 0 0 18px rgba(34,211,238,.30);
}

html[data-theme="dark"] .footer-social-btn,
html[data-theme="dark"] .floating-btn {
  box-shadow: 0 18px 48px rgba(0,0,0,.34), 0 0 28px rgba(139,92,246,.14) !important;
}

html[data-theme="dark"] .cursor-spotlight {
  background: radial-gradient(560px circle at var(--cursor-x) var(--cursor-y), rgba(34,211,238,.18), rgba(139,92,246,.16) 28%, rgba(236,72,153,.08) 45%, transparent 68%) !important;
  mix-blend-mode: screen;
}

@media screen and (max-width: 768px) {
  html[data-theme="dark"] .hero .container {
    min-height: auto;
  }

  html[data-theme="dark"] .nav-menu {
    background: rgba(3, 5, 18, .96) !important;
    border-top: 1px solid rgba(255,255,255,.10);
  }
}

/* ========================================================================== 
   IDEON 3.1 Ultra Dark Experience - Cinematic Galaxy UI
   ========================================================================== */
.dark-experience-layer {
  display: none;
}

html[data-theme="dark"] .dark-experience-layer {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% -20%, rgba(255,255,255,.10), transparent 25%),
    radial-gradient(circle at 18% 48%, rgba(139,92,246,.18), transparent 30%),
    radial-gradient(circle at 86% 44%, rgba(34,211,238,.13), transparent 32%);
}

html[data-theme="dark"] .galaxy-beam {
  position: absolute;
  width: 78vw;
  height: 18vh;
  border-radius: 999px;
  opacity: .38;
  filter: blur(38px);
  mix-blend-mode: screen;
  transform-origin: center;
}

html[data-theme="dark"] .beam-one {
  left: -12vw;
  top: 18vh;
  background: linear-gradient(90deg, transparent, rgba(139,92,246,.72), rgba(34,211,238,.35), transparent);
  transform: rotate(-18deg);
  animation: beamSweep 13s ease-in-out infinite;
}

html[data-theme="dark"] .beam-two {
  right: -18vw;
  bottom: 16vh;
  background: linear-gradient(90deg, transparent, rgba(236,72,153,.38), rgba(34,211,238,.42), transparent);
  transform: rotate(22deg);
  animation: beamSweep 16s ease-in-out infinite reverse;
}

html[data-theme="dark"] .cosmic-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(167,139,250,.18);
  box-shadow: 0 0 90px rgba(139,92,246,.10), inset 0 0 80px rgba(34,211,238,.045);
  transform: rotateX(64deg) rotateZ(-18deg);
}

html[data-theme="dark"] .orbit-one {
  width: 560px;
  height: 560px;
  right: -170px;
  top: 70px;
  animation: orbitSpin 28s linear infinite;
}

html[data-theme="dark"] .orbit-two {
  width: 760px;
  height: 760px;
  left: -260px;
  bottom: -220px;
  border-color: rgba(34,211,238,.12);
  animation: orbitSpin 38s linear infinite reverse;
}

html[data-theme="dark"] .cosmic-noise {
  position: absolute;
  inset: -20%;
  opacity: .09;
  background-image:
    repeating-radial-gradient(circle at 20% 30%, rgba(255,255,255,.9) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.12) 0 1px, transparent 1px 3px);
  background-size: 160px 160px, 100% 4px;
  animation: noiseShift 1.4s steps(2) infinite;
}

html[data-theme="dark"] .hero::before,
html[data-theme="dark"] .page-header::before {
  background-image:
    radial-gradient(circle, rgba(255,255,255,1) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(167,139,250,.95) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(34,211,238,.76) 0 1px, transparent 1.6px),
    linear-gradient(rgba(139,92,246,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,211,238,.105) 1px, transparent 1px) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] .hero-content {
  position: relative;
}

html[data-theme="dark"] .hero-content::before {
  content: '';
  position: absolute;
  left: -32px;
  top: -34px;
  width: 120px;
  height: 120px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(167,139,250,.34), transparent 68%);
  filter: blur(10px);
}

html[data-theme="dark"] .hero-title {
  letter-spacing: -.082em;
  filter: drop-shadow(0 0 18px rgba(167,139,250,.18));
}

html[data-theme="dark"] .hero-title::after {
  content: '';
  display: block;
  width: min(260px, 50%);
  height: 2px;
  margin-top: 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(167,139,250,.95), rgba(34,211,238,.55), transparent);
  box-shadow: 0 0 24px rgba(34,211,238,.22);
}

html[data-theme="dark"] .dark-hero-hud {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  display: block;
}

html[data-theme="dark"] .hud-panel {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 126px;
  padding: 10px 12px;
  border-radius: 16px;
  color: rgba(255,255,255,.86);
  background: linear-gradient(180deg, rgba(8,12,32,.84), rgba(8,12,32,.48));
  border: 1px solid rgba(199,210,254,.16);
  box-shadow: 0 18px 54px rgba(0,0,0,.36), 0 0 30px rgba(139,92,246,.13), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(18px) saturate(160%);
  animation: hudFloat 6s ease-in-out infinite;
}

html[data-theme="dark"] .hud-panel strong {
  color: #fff;
  font-family: var(--font-primary);
  font-size: 1.15rem;
}

html[data-theme="dark"] .hud-panel span {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: -.01em;
}

html[data-theme="dark"] .hud-panel i {
  color: var(--dark-cyan);
  filter: drop-shadow(0 0 14px rgba(34,211,238,.4));
}

html[data-theme="dark"] .hud-top { right: -34px; top: 6%; }
html[data-theme="dark"] .hud-mid { left: -44px; top: 42%; animation-delay: -2s; }
html[data-theme="dark"] .hud-bottom { right: 8%; bottom: -4%; animation-delay: -3.4s; }

html:not([data-theme="dark"]) .dark-hero-hud {
  display: none;
}

html[data-theme="dark"] .section-cosmic-divider {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(1040px, calc(100% - 40px));
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(167,139,250,.28), rgba(34,211,238,.20), transparent);
  box-shadow: 0 0 28px rgba(139,92,246,.20);
}

html[data-theme="dark"] .section-header {
  position: relative;
  padding: 26px;
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), transparent);
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

html[data-theme="dark"] .section-header::before {
  content: 'IDEON / CREATIVE SYSTEM';
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 11px;
  border-radius: 999px;
  color: rgba(191, 219, 254, .86);
  background: rgba(34,211,238,.08);
  border: 1px solid rgba(34,211,238,.14);
  font-family: var(--font-secondary);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .14em;
}

html[data-theme="dark"] .benefit-card,
html[data-theme="dark"] .pricing-card,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .contact-form-wrapper,
html[data-theme="dark"] .contact-info-wrapper {
  transform-style: preserve-3d;
}

html[data-theme="dark"] .benefit-card::before,
html[data-theme="dark"] .pricing-card::before,
html[data-theme="dark"] .faq-item::after,
html[data-theme="dark"] .contact-form-wrapper::after,
html[data-theme="dark"] .contact-info-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(167,139,250,.30), rgba(34,211,238,.18), rgba(244,114,182,.20));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: .75;
}

html[data-theme="dark"] .pricing-card.popular::after {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from 120deg, rgba(139,92,246,.0), rgba(139,92,246,.55), rgba(34,211,238,.42), rgba(236,72,153,.45), rgba(139,92,246,.0));
  filter: blur(18px);
  opacity: .55;
  animation: borderOrbit 7s linear infinite;
}

html[data-theme="dark"] .project-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from 90deg, rgba(139,92,246,.0), rgba(139,92,246,.40), rgba(34,211,238,.30), rgba(244,114,182,.34), rgba(139,92,246,.0));
  filter: blur(12px);
  opacity: 0;
  transition: opacity .35s ease;
}

html[data-theme="dark"] .project-card:hover::after {
  opacity: .55;
}

html[data-theme="dark"] .footer::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .36;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.12), transparent 26%),
    linear-gradient(180deg, transparent, rgba(0,0,0,.34));
}

@keyframes beamSweep {
  0%, 100% { opacity: .22; transform: translate3d(0,0,0) rotate(var(--beam-rotate, -18deg)) scaleX(.92); }
  50% { opacity: .52; transform: translate3d(4vw,-2vh,0) rotate(var(--beam-rotate, -18deg)) scaleX(1.08); }
}

@keyframes orbitSpin {
  from { transform: rotateX(64deg) rotateZ(0deg); }
  to { transform: rotateX(64deg) rotateZ(360deg); }
}

@keyframes noiseShift {
  0% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(-2%,1%,0); }
  100% { transform: translate3d(1%,-1%,0); }
}

@keyframes hudFloat {
  0%, 100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(0,-12px,0); }
}

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

@media screen and (max-width: 900px) {
  html[data-theme="dark"] .dark-hero-hud,
  html[data-theme="dark"] .cosmic-orbit {
    display: none;
  }

  html[data-theme="dark"] .section-header {
    padding: 18px;
  }
}

/* ========================================================================== 
   IDEON 3.2 Animated Canvas Galaxy Background
   ========================================================================== */
.galaxy-canvas {
  display: none;
}

html[data-theme="dark"] .galaxy-canvas {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  opacity: 1;
  mix-blend-mode: normal;
}

html[data-theme="dark"] body {
  background: #02030d !important;
}

html[data-theme="dark"] body::before,
html[data-theme="dark"] body::after,
html[data-theme="dark"] .dark-experience-layer {
  opacity: .42;
}

html[data-theme="dark"] .hero,
html[data-theme="dark"] .page-header {
  background:
    radial-gradient(circle at 10% 34%, rgba(124, 58, 237, .42), transparent 34%),
    radial-gradient(circle at 88% 28%, rgba(14, 116, 144, .30), transparent 34%),
    linear-gradient(112deg, rgba(12,8,36,.60) 0%, rgba(16,11,43,.48) 38%, rgba(7,20,40,.48) 72%, rgba(8,11,28,.62) 100%) !important;
  backdrop-filter: none;
}

html[data-theme="dark"] .section,
html[data-theme="dark"] .section-bg-light,
html[data-theme="dark"] .portfolio-section,
html[data-theme="dark"] .faq-section,
html[data-theme="dark"] .testimonials,
html[data-theme="dark"] .contact-section {
  background: rgba(2, 3, 13, .18) !important;
}

html[data-theme="dark"] .service-marquee {
  background: rgba(2, 3, 13, .72) !important;
  backdrop-filter: blur(14px);
}

html[data-theme="dark"] .header {
  background: rgba(2, 3, 13, .70) !important;
}

html[data-theme="dark"] .benefit-card,
html[data-theme="dark"] .pricing-card,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .contact-form-wrapper,
html[data-theme="dark"] .contact-info-wrapper,
html[data-theme="dark"] .modal-container,
html[data-theme="dark"] .testimonial-card,
html[data-theme="dark"] .testimonial-slide {
  background: linear-gradient(180deg, rgba(10, 14, 38, .72), rgba(5, 8, 24, .48)) !important;
}

html[data-theme="dark"] .hero-image::before {
  opacity: .95;
  filter: blur(52px);
}

html[data-theme="dark"] .hero::before,
html[data-theme="dark"] .hero::after,
html[data-theme="dark"] .page-header::before,
html[data-theme="dark"] .page-header::after {
  opacity: .36 !important;
}

@media (prefers-reduced-motion: reduce) {
  .galaxy-canvas {
    display: none !important;
  }
}

/* Fix bottom overscroll gap and logotron sizing */
html,
body {
  min-height: 100%;
  overscroll-behavior-y: none;
}

body {
  overflow-x: hidden;
}

.footer {
  margin-bottom: 0 !important;
}

.footer-bottom {
  margin-bottom: 0 !important;
  padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
}

html[data-theme="dark"] body {
  background-attachment: fixed;
}

html[data-theme="dark"] .footer {
  box-shadow: 0 80px 0 #02030d;
}

.logo img[src*="logotron.png"] {
  height: 44px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(124,58,237,.16));
}

html[data-theme="dark"] .logo img[src*="logotron.png"] {
  filter: drop-shadow(0 10px 24px rgba(255,255,255,.10)) drop-shadow(0 0 24px rgba(139,92,246,.24));
}

@media screen and (max-width: 768px) {
  .logo img[src*="logotron.png"] {
    height: 38px;
  }
}

/* Clean header logo after logotron feedback */
.logo {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.logo img[src*="logo-04.png"] {
  height: 38px !important;
  width: auto !important;
  object-fit: contain;
  filter: none !important;
}

html[data-theme="dark"] .logo img[src*="logo-04.png"] {
  filter: drop-shadow(0 0 14px rgba(255,255,255,.08)) !important;
}

@media screen and (max-width: 768px) {
  .logo img[src*="logo-04.png"] {
    height: 34px !important;
  }
}

/* Header layout without logo: centered navigation + right controls */
.header .container {
  position: relative;
  display: flex;
  justify-content: center !important;
  align-items: center;
}

.header .logo {
  display: none !important;
}

.header .nav-menu {
  position: static;
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  gap: 28px;
}

.header .nav-menu .nav-link {
  flex: 0 0 auto;
}

.header .nav-menu .lang-segmented,
.header .nav-menu .theme-toggle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}

.header .nav-menu .theme-toggle {
  right: 0;
}

.header .nav-menu .lang-segmented {
  right: 88px;
}

.mobile-nav-toggle {
  position: absolute;
  right: 0;
}

@media screen and (min-width: 769px) {
  .header .nav-menu {
    width: 100%;
    padding: 0 220px;
  }
}

@media screen and (max-width: 768px) {
  .header .container {
    justify-content: flex-end !important;
  }

  .header .nav-menu {
    position: fixed;
    justify-content: flex-start;
    margin: 0;
    gap: 22px;
  }

  .header .nav-menu .lang-segmented,
  .header .nav-menu .theme-toggle {
    position: static;
    transform: none;
  }

  .mobile-nav-toggle {
    position: relative;
    right: auto;
  }
}

/* Real SVG flags for language switcher - avoids Windows Chrome emoji flag fallback */
.lang-flag-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-block;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(255,255,255,.35), 0 4px 10px rgba(0,0,0,.16);
}

.lang-segment {
  gap: 6px;
}

.lang-segment .lang-label {
  line-height: 1;
}

/* ========================================================================== 
   Premium Page Transitions
   ========================================================================== */
body.page-ready main,
body.page-ready .header,
body.page-ready .footer,
body.page-ready .floating-contact {
  opacity: 0;
  transform: translateY(14px) scale(.992);
  filter: blur(8px);
}

body.page-entered main,
body.page-entered .header,
body.page-entered .footer,
body.page-entered .floating-contact {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition: opacity .72s cubic-bezier(.22,1,.36,1), transform .72s cubic-bezier(.22,1,.36,1), filter .72s cubic-bezier(.22,1,.36,1);
}

body.page-leaving main,
body.page-leaving .header,
body.page-leaving .footer,
body.page-leaving .floating-contact {
  opacity: 0;
  transform: translateY(-18px) scale(.985);
  filter: blur(12px);
  transition: opacity .42s ease, transform .42s ease, filter .42s ease;
}

.page-transition-layer {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  background:
    radial-gradient(circle at 28% 44%, rgba(139,92,246,.42), transparent 28%),
    radial-gradient(circle at 78% 48%, rgba(34,211,238,.32), transparent 30%),
    linear-gradient(110deg, rgba(3,4,15,.96), rgba(12,8,36,.96) 48%, rgba(4,18,32,.96));
  overflow: hidden;
}

.page-transition-layer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.8) 0 1px, transparent 1.5px),
    linear-gradient(rgba(139,92,246,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,211,238,.10) 1px, transparent 1px);
  background-size: 90px 90px, 46px 46px, 46px 46px;
  animation: transitionStars 18s linear infinite;
}

.transition-orb {
  position: absolute;
  width: 34vw;
  height: 34vw;
  border-radius: 50%;
  filter: blur(26px);
  opacity: .58;
  mix-blend-mode: screen;
}

.transition-orb.orb-a {
  left: 8%;
  top: 16%;
  background: radial-gradient(circle, rgba(139,92,246,.82), transparent 68%);
}

.transition-orb.orb-b {
  right: 10%;
  bottom: 10%;
  background: radial-gradient(circle, rgba(34,211,238,.58), transparent 68%);
}

.transition-line {
  position: absolute;
  left: -20%;
  top: 50%;
  width: 140%;
  height: 2px;
  transform: rotate(-8deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.86), rgba(34,211,238,.74), transparent);
  box-shadow: 0 0 34px rgba(34,211,238,.45), 0 0 70px rgba(139,92,246,.32);
}

body.page-leaving .page-transition-layer {
  opacity: 1;
  transform: scaleX(1);
  transition: transform .52s cubic-bezier(.76,0,.24,1), opacity .18s ease;
}

body.page-entered:not(.page-leaving) .page-transition-layer {
  animation: transitionReveal .72s cubic-bezier(.22,1,.36,1) both;
}

@keyframes transitionReveal {
  0% {
    opacity: 1;
    transform: scaleX(1);
    transform-origin: right center;
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: right center;
  }
}

@keyframes transitionStars {
  from { background-position: 0 0, 0 0, 0 0; }
  to { background-position: 180px 120px, 46px 46px, 46px 46px; }
}

@media (prefers-reduced-motion: reduce) {
  body.page-ready main,
  body.page-ready .header,
  body.page-ready .footer,
  body.page-ready .floating-contact,
  body.page-entered main,
  body.page-entered .header,
  body.page-entered .footer,
  body.page-entered .floating-contact,
  body.page-leaving main,
  body.page-leaving .header,
  body.page-leaving .footer,
  body.page-leaving .floating-contact {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  .page-transition-layer {
    display: none !important;
  }
}

/* Performance pass: keep premium feel but remove expensive full-page blur/canvas */
.galaxy-canvas {
  display: none !important;
}

body.page-ready main,
body.page-ready .header,
body.page-ready .footer,
body.page-ready .floating-contact {
  opacity: 0;
  transform: translate3d(0, 10px, 0) scale(.996);
  filter: none !important;
  will-change: opacity, transform;
}

body.page-entered main,
body.page-entered .header,
body.page-entered .footer,
body.page-entered .floating-contact {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: none !important;
  transition: opacity .42s ease, transform .42s cubic-bezier(.22,1,.36,1) !important;
}

body.page-leaving main,
body.page-leaving .header,
body.page-leaving .footer,
body.page-leaving .floating-contact {
  opacity: 0;
  transform: translate3d(0, -10px, 0) scale(.996);
  filter: none !important;
  transition: opacity .26s ease, transform .26s ease !important;
}

.page-transition-layer {
  background: linear-gradient(110deg, rgba(3,4,15,.96), rgba(12,8,36,.96), rgba(4,18,32,.96));
  will-change: transform, opacity;
}

.page-transition-layer::before,
.transition-orb {
  display: none !important;
}

.transition-line {
  height: 1px;
  box-shadow: 0 0 20px rgba(34,211,238,.32);
}

body.page-leaving .page-transition-layer {
  transition: transform .34s cubic-bezier(.76,0,.24,1), opacity .12s ease !important;
}

body.page-entered:not(.page-leaving) .page-transition-layer {
  animation-duration: .42s !important;
}

html[data-theme="dark"] .dark-experience-layer {
  opacity: .24 !important;
}

html[data-theme="dark"] .cosmic-noise,
html[data-theme="dark"] .galaxy-beam {
  display: none !important;
}

/* Bottom scroll cleanup: footer is the true end of the page */
html,
body {
  overscroll-behavior: none !important;
}

html[data-theme="dark"] body {
  background: #02030d !important;
}

.footer,
html[data-theme="dark"] .footer {
  margin-bottom: 0 !important;
  box-shadow: none !important;
}

.footer::after,
html[data-theme="dark"] .footer::after {
  display: none !important;
}

.footer-bottom {
  margin-bottom: 0 !important;
  padding-bottom: 18px !important;
}

html[data-theme="dark"] .footer-bottom {
  background: #02030d;
}

html[data-theme="dark"] .dark-experience-layer,
html[data-theme="dark"] .galaxy-canvas,
html[data-theme="dark"] body::before,
html[data-theme="dark"] body::after {
  bottom: auto !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
}

/* Modal overlays must not create document height after footer */
.modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow-y: auto;
  background: rgba(2, 3, 13, .72);
  backdrop-filter: blur(18px);
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modal-container {
  max-height: min(720px, calc(100dvh - 48px));
  overflow-y: auto;
}

/* ========================================================================== 
   Dark Mode Cleanup: smooth nebula background + readable typography
   ========================================================================== */
html[data-theme="dark"] body {
  background:
    radial-gradient(ellipse at 12% 18%, rgba(109, 40, 217, .36), transparent 34%),
    radial-gradient(ellipse at 88% 12%, rgba(8, 145, 178, .24), transparent 32%),
    radial-gradient(ellipse at 48% 72%, rgba(190, 24, 93, .16), transparent 38%),
    linear-gradient(135deg, #030513 0%, #080a1c 42%, #061521 72%, #02030d 100%) !important;
  color: rgba(241, 245, 249, .82) !important;
}

/* Remove square/grid texture in dark mode */
html[data-theme="dark"] body::before,
html[data-theme="dark"] .hero::before,
html[data-theme="dark"] .page-header::before,
html[data-theme="dark"] .page-transition-layer::before {
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.42) 0 1px, transparent 1.6px),
    radial-gradient(circle at 72% 18%, rgba(167,139,250,.34) 0 1px, transparent 1.5px),
    radial-gradient(circle at 42% 76%, rgba(34,211,238,.22) 0 1px, transparent 1.4px) !important;
  background-size: 132px 132px, 196px 196px, 260px 260px !important;
  background-position: 20px 34px, 80px 20px, 42px 90px !important;
  opacity: .42 !important;
  animation: none !important;
}

html[data-theme="dark"] body::after {
  background:
    radial-gradient(ellipse at 18% 30%, rgba(139,92,246,.30), transparent 44%),
    radial-gradient(ellipse at 82% 26%, rgba(34,211,238,.16), transparent 40%),
    radial-gradient(ellipse at 54% 86%, rgba(236,72,153,.12), transparent 42%) !important;
  opacity: .72 !important;
  animation: none !important;
}

html[data-theme="dark"] .dark-experience-layer,
html[data-theme="dark"] .cosmic-orbit,
html[data-theme="dark"] .cosmic-noise,
html[data-theme="dark"] .galaxy-beam {
  display: none !important;
}

html[data-theme="dark"] .hero,
html[data-theme="dark"] .page-header {
  background:
    radial-gradient(ellipse at 16% 36%, rgba(124, 58, 237, .42), transparent 42%),
    radial-gradient(ellipse at 88% 28%, rgba(8, 145, 178, .24), transparent 40%),
    radial-gradient(ellipse at 50% 90%, rgba(190, 24, 93, .16), transparent 42%),
    linear-gradient(120deg, rgba(6, 7, 24, .78), rgba(5, 17, 30, .74)) !important;
}

/* Readability fixes: no accidental low-contrast/transparent copy */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .section-header h2,
html[data-theme="dark"] .faq-question h3,
html[data-theme="dark"] .benefit-title,
html[data-theme="dark"] .pricing-title,
html[data-theme="dark"] .project-title,
html[data-theme="dark"] .contact-info-title,
html[data-theme="dark"] .footer-title {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc;
  text-shadow: none !important;
}

html[data-theme="dark"] .hero-title,
html[data-theme="dark"] .page-header h1 {
  color: #fff !important;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(180deg, #ffffff 0%, #ede9fe 55%, #bae6fd 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  text-shadow: none !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] .section-header p,
html[data-theme="dark"] .benefit-desc,
html[data-theme="dark"] .pricing-subtitle,
html[data-theme="dark"] .pricing-feature,
html[data-theme="dark"] .faq-answer-content,
html[data-theme="dark"] .contact-info-text,
html[data-theme="dark"] .testimonial-text,
html[data-theme="dark"] .project-desc,
html[data-theme="dark"] .footer-desc,
html[data-theme="dark"] .footer-contact-text,
html[data-theme="dark"] .copyright-text {
  color: rgba(226, 232, 240, .82) !important;
  -webkit-text-fill-color: currentColor;
}

html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .benefit-card,
html[data-theme="dark"] .pricing-card,
html[data-theme="dark"] .contact-form-wrapper,
html[data-theme="dark"] .contact-info-wrapper,
html[data-theme="dark"] .testimonial-card,
html[data-theme="dark"] .testimonial-slide {
  background: rgba(8, 12, 32, .72) !important;
  border-color: rgba(148, 163, 184, .20) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

html[data-theme="dark"] .section-header {
  background: rgba(8, 12, 32, .36) !important;
  border-color: rgba(148, 163, 184, .12) !important;
}

/* ========================================================================== 
   Featured Projects Redesign - Premium Case Study Wall
   ========================================================================== */
.portfolio-section {
  position: relative;
  overflow: hidden;
  padding-block: clamp(92px, 10vw, 150px) !important;
}

.portfolio-section::before {
  content: '';
  position: absolute;
  inset: 8% 6% auto;
  height: 54%;
  pointer-events: none;
  border-radius: 999px;
  background:
    radial-gradient(circle at 20% 45%, rgba(124,58,237,.18), transparent 34%),
    radial-gradient(circle at 72% 42%, rgba(14,165,233,.14), transparent 36%),
    linear-gradient(90deg, transparent, rgba(255,255,255,.04), transparent);
  filter: blur(12px);
}

.portfolio-section .section-header {
  max-width: 860px;
  margin-inline: auto;
  margin-bottom: clamp(42px, 5vw, 72px) !important;
}

.portfolio-grid,
.portfolio-grid-large {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px) !important;
  max-width: 1160px;
  margin-inline: auto;
  align-items: stretch;
}

.project-card {
  grid-column: span 6;
  min-height: 330px;
  border-radius: 28px !important;
  overflow: hidden;
  position: relative;
  transform: translateZ(0);
  background: #0b1020;
  box-shadow: 0 28px 90px rgba(15,23,42,.18) !important;
}

.project-card:first-child {
  grid-column: span 7;
  min-height: 390px;
}

.project-card:nth-child(2) {
  grid-column: span 5;
  min-height: 390px;
}

.project-card:nth-child(3),
.project-card:nth-child(4) {
  min-height: 340px;
}

.project-card-inner,
.project-front,
.project-back {
  min-height: inherit;
  height: 100%;
  border-radius: inherit;
}

.project-front {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 28px !important;
  background: #101828;
}

.project-image {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform: scale(1.02);
  transition: transform .65s cubic-bezier(.22,1,.36,1), filter .65s ease;
}

.project-front::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(2,6,23,.04) 0%, rgba(2,6,23,.28) 42%, rgba(2,6,23,.92) 100%),
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.20), transparent 28%);
}

.project-front::before {
  content: '';
  position: absolute;
  inset: 16px;
  z-index: 2;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.18);
  opacity: 0;
  transform: scale(.985);
  transition: opacity .35s ease, transform .35s ease;
}

.project-content {
  position: relative;
  z-index: 3;
  width: 100%;
  transform: translateY(8px);
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}

.project-category {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  color: rgba(255,255,255,.82) !important;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.project-title {
  margin-top: 13px !important;
  color: #fff !important;
  font-size: clamp(1.2rem, 2vw, 1.9rem) !important;
  letter-spacing: -.045em;
  line-height: 1.02;
}

.project-desc {
  max-width: 520px;
  color: rgba(226,232,240,.78) !important;
  margin-top: 10px;
}

.project-card:hover .project-image {
  transform: scale(1.09);
  filter: saturate(1.12) contrast(1.06);
}

.project-card:hover .project-front::before {
  opacity: 1;
  transform: scale(1);
}

.project-card:hover .project-content {
  transform: translateY(0);
}

.project-back {
  padding: 32px !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  background:
    radial-gradient(circle at 16% 12%, rgba(124,58,237,.38), transparent 32%),
    radial-gradient(circle at 84% 18%, rgba(14,165,233,.28), transparent 34%),
    linear-gradient(135deg, #070816, #111827 58%, #1e1238) !important;
}

.project-back-title {
  font-size: clamp(1.35rem, 2vw, 2rem) !important;
  color: #fff !important;
  letter-spacing: -.05em;
}

.project-back-desc {
  color: rgba(226,232,240,.80) !important;
  line-height: 1.75;
}

.project-link {
  margin-top: 18px;
  border-radius: 999px !important;
  box-shadow: 0 16px 42px rgba(139,92,246,.24);
}

.portfolio-cta,
.portfolio-section .section-cta {
  margin-top: clamp(34px, 4vw, 56px) !important;
  text-align: center;
}

html[data-theme="dark"] .portfolio-section {
  background:
    radial-gradient(ellipse at 18% 20%, rgba(124,58,237,.20), transparent 34%),
    radial-gradient(ellipse at 82% 30%, rgba(14,165,233,.13), transparent 34%),
    transparent !important;
}

html[data-theme="dark"] .project-card {
  border: 1px solid rgba(148,163,184,.18) !important;
  box-shadow: 0 34px 110px rgba(0,0,0,.42), 0 0 42px rgba(124,58,237,.10) !important;
}

html[data-theme="dark"] .project-card:hover {
  border-color: rgba(167,139,250,.38) !important;
  box-shadow: 0 42px 130px rgba(0,0,0,.52), 0 0 64px rgba(124,58,237,.18) !important;
}

@media screen and (max-width: 900px) {
  .portfolio-grid,
  .portfolio-grid-large {
    grid-template-columns: 1fr;
  }

  .project-card,
  .project-card:first-child,
  .project-card:nth-child(2),
  .project-card:nth-child(3),
  .project-card:nth-child(4) {
    grid-column: auto;
    min-height: 320px;
  }
}

/* FAQ dark readability fix */
html[data-theme="dark"] .faq-section .faq-item {
  background: rgba(10, 15, 38, .86) !important;
  border: 1px solid rgba(148, 163, 184, .24) !important;
}

html[data-theme="dark"] .faq-section .faq-question,
html[data-theme="dark"] .faq-section .faq-question * {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
  opacity: 1 !important;
}

html[data-theme="dark"] .faq-section .faq-answer,
html[data-theme="dark"] .faq-section .faq-answer *,
html[data-theme="dark"] .faq-section .faq-answer-content {
  color: rgba(226, 232, 240, .88) !important;
  -webkit-text-fill-color: rgba(226, 232, 240, .88) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] .faq-section .faq-toggle-icon,
html[data-theme="dark"] .faq-section .faq-question i {
  color: #67e8f9 !important;
  -webkit-text-fill-color: #67e8f9 !important;
  opacity: 1 !important;
}

/* Portfolio balance pass: equal premium cards */
.portfolio-grid,
.portfolio-grid-large {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(18px, 2vw, 26px) !important;
  max-width: 1240px !important;
}

.project-card,
.project-card:first-child,
.project-card:nth-child(2),
.project-card:nth-child(3),
.project-card:nth-child(4) {
  grid-column: auto !important;
  min-height: 360px !important;
  height: 360px !important;
}

.project-card-inner,
.project-front,
.project-back {
  height: 100% !important;
  min-height: 100% !important;
}

.project-front {
  padding: 24px !important;
}

.project-title {
  font-size: clamp(1.08rem, 1.35vw, 1.45rem) !important;
  line-height: 1.08 !important;
}

.project-desc {
  font-size: .92rem;
  line-height: 1.55;
}

@media screen and (max-width: 1100px) {
  .portfolio-grid,
  .portfolio-grid-large {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media screen and (max-width: 640px) {
  .portfolio-grid,
  .portfolio-grid-large {
    grid-template-columns: 1fr !important;
  }

  .project-card,
  .project-card:first-child,
  .project-card:nth-child(2),
  .project-card:nth-child(3),
  .project-card:nth-child(4) {
    height: 330px !important;
    min-height: 330px !important;
  }
}

/* Page transition v2: instant, smooth, no perceived delay */
body.page-ready main,
body.page-ready .header,
body.page-ready .footer,
body.page-ready .floating-contact {
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  filter: none !important;
}

body.page-entered main,
body.page-entered .header,
body.page-entered .footer,
body.page-entered .floating-contact {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: none !important;
  transition: opacity .26s ease-out, transform .26s cubic-bezier(.22,1,.36,1) !important;
}

body.page-leaving main,
body.page-leaving .header,
body.page-leaving .footer,
body.page-leaving .floating-contact {
  opacity: .96;
  transform: translate3d(0, -4px, 0);
  filter: none !important;
  transition: opacity .14s ease, transform .14s ease !important;
}

.page-transition-layer {
  opacity: 0;
  transform: translate3d(-100%,0,0) skewX(-10deg) !important;
  transform-origin: center;
  width: 34vw;
  min-width: 320px;
  right: auto;
  background: linear-gradient(100deg, transparent 0%, rgba(139,92,246,.18) 12%, rgba(34,211,238,.42) 48%, rgba(255,255,255,.72) 52%, rgba(236,72,153,.26) 76%, transparent 100%) !important;
  will-change: transform, opacity;
}

.transition-line {
  display: none !important;
}

body.page-leaving .page-transition-layer {
  opacity: 1;
  transform: translate3d(330vw,0,0) skewX(-10deg) !important;
  transition: transform .28s cubic-bezier(.65,0,.35,1), opacity .12s ease !important;
}

body.page-entered:not(.page-leaving) .page-transition-layer {
  animation: none !important;
  opacity: 0 !important;
}

/* Light mode clarity for active language/theme states */
html:not([data-theme="dark"]) .lang-segmented {
  background: rgba(255, 255, 255, .72) !important;
  border: 1px solid rgba(124, 58, 237, .16) !important;
  box-shadow: 0 12px 34px rgba(15, 23, 42, .12), inset 0 1px 0 rgba(255,255,255,.9) !important;
}

html:not([data-theme="dark"]) .lang-segment {
  color: rgba(71, 85, 105, .74) !important;
  opacity: .78;
}

html:not([data-theme="dark"]) .lang-segment.active {
  color: #fff !important;
  opacity: 1;
  background: linear-gradient(135deg, #7c3aed 0%, #ec4899 56%, #f97316 100%) !important;
  box-shadow: 0 10px 24px rgba(124,58,237,.28), inset 0 1px 0 rgba(255,255,255,.34) !important;
}

html:not([data-theme="dark"]) .lang-segment.active .lang-label {
  color: #fff !important;
  font-weight: 900;
}

html:not([data-theme="dark"]) .lang-segment.active .lang-flag-icon {
  box-shadow: 0 0 0 2px rgba(255,255,255,.82), 0 8px 16px rgba(0,0,0,.18);
}

html:not([data-theme="dark"]) .theme-toggle-track {
  background: rgba(255,255,255,.76) !important;
  border: 1px solid rgba(124, 58, 237, .16) !important;
  box-shadow: 0 12px 34px rgba(15, 23, 42, .12), inset 0 1px 0 rgba(255,255,255,.9) !important;
}

html:not([data-theme="dark"]) .theme-toggle-icon.sun {
  color: #f59e0b !important;
  opacity: 1 !important;
  filter: drop-shadow(0 0 8px rgba(245,158,11,.35));
}

html:not([data-theme="dark"]) .theme-toggle-icon.moon {
  color: #64748b !important;
  opacity: .55 !important;
}

html:not([data-theme="dark"]) .theme-toggle-thumb {
  background: linear-gradient(135deg, #ffffff, #fff7ed) !important;
  box-shadow: 0 8px 20px rgba(245,158,11,.22), inset 0 1px 0 rgba(255,255,255,.9) !important;
}

html[data-theme="dark"] .theme-toggle-icon.sun {
  opacity: .45 !important;
}

html[data-theme="dark"] .theme-toggle-icon.moon {
  color: #c4b5fd !important;
  opacity: 1 !important;
  filter: drop-shadow(0 0 10px rgba(196,181,253,.46));
}

/* Portfolio image fix: screenshots need wide balanced cards, not narrow vertical crops */
.portfolio-grid,
.portfolio-grid-large {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  max-width: 980px !important;
  gap: 24px !important;
}

.project-card,
.project-card:first-child,
.project-card:nth-child(2),
.project-card:nth-child(3),
.project-card:nth-child(4) {
  height: 300px !important;
  min-height: 300px !important;
  grid-column: auto !important;
  border-radius: 24px !important;
}

.project-front {
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  padding: 24px !important;
}

.project-front::after {
  background:
    linear-gradient(180deg, rgba(2,6,23,.02) 0%, rgba(2,6,23,.18) 42%, rgba(2,6,23,.90) 100%),
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.12), transparent 30%) !important;
}

.project-content {
  transform: translateY(0) !important;
}

.project-category {
  font-size: .62rem !important;
  padding: 6px 9px !important;
}

.project-title {
  font-size: clamp(1.12rem, 1.6vw, 1.55rem) !important;
  max-width: 88%;
}

.project-desc {
  display: none !important;
}

/* Per-project focal points for uploaded screenshots */
.project-front[style*="thaonhi.webp"] {
  background-position: center center !important;
}

.project-front[style*="order.webp"] {
  background-position: center top !important;
}

.project-front[style*="trantattoo.webp"] {
  background-position: center center !important;
}

.project-front[style*="tiengtrunghsk.webp"] {
  background-position: center top !important;
}

html[data-theme="dark"] .project-front::after {
  background:
    linear-gradient(180deg, rgba(2,6,23,.04) 0%, rgba(2,6,23,.20) 42%, rgba(2,6,23,.92) 100%),
    radial-gradient(circle at 18% 18%, rgba(167,139,250,.14), transparent 30%) !important;
}

@media screen and (max-width: 768px) {
  .portfolio-grid,
  .portfolio-grid-large {
    grid-template-columns: 1fr !important;
    max-width: 520px !important;
  }

  .project-card,
  .project-card:first-child,
  .project-card:nth-child(2),
  .project-card:nth-child(3),
  .project-card:nth-child(4) {
    height: 280px !important;
    min-height: 280px !important;
  }
}

/* Portfolio cleanup: remove unnecessary CASE STUDY badges */
.project-category {
  display: none !important;
}

.project-title {
  margin-top: 0 !important;
}

/* Remove generated CASE STUDY label from project titles */
.project-title::before {
  content: none !important;
  display: none !important;
}