:root {
  --dark-bg: #0a0b0f;
  --dark-surface: #0f1117;
  --dark-card: #161b26;
  --accent: #313491;
  --accent-light: #313491;
  --accent-dark: #313491;

  /* Font Variables (Next.js Optimized) */
  --font-inter: 'Inter', system-ui, sans-serif;
  --font-poppins: 'Poppins', "__Poppins_Fallback_c169f5", system-ui, sans-serif;
}

@font-face {
    font-family: __Poppins_Fallback_c169f5;
    src: local("Arial");
    ascent-override:93.62%;descent-override:31.21%;line-gap-override:8.92%;size-adjust:112.16%;
}

.__className_c169f5 {
    font-family: 'Poppins', __Poppins_Fallback_c169f5;
    font-style: normal;
}

.__variable_c169f5 {
    --font-poppins: "Poppins", "__Poppins_Fallback_c169f5";
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--dark-bg);
  color: #f3f4f6; /* gray-100 */
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* --- Process Section (Timeline) --- */
.timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #252d3d; /* dark-600 */
    transform: translateX(-50%);
}

.timeline-dot {
    width: 0.75rem; /* 3 */
    height: 0.75rem;
    border-radius: 9999px;
    background-color: rgba(49, 52, 145, 0.5); /* accent/50 */
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}

.timeline-card {
    position: relative;
    padding: 1.5rem; /* 6 */
    border-radius: 0.75rem; /* xl */
    background-color: #161b26; /* dark-800 */
    border: 1px solid #252d3d; /* dark-600 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
}

.timeline-card:hover {
    border-color: rgba(49, 52, 145, 0.4); /* accent/40 */
    box-shadow: 0 10px 15px -3px rgba(49, 52, 145, 0.05); /* shadow-accent/5 */
    transform: translateY(-0.25rem);
}

.timeline-step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem; /* 10 */
    height: 2.5rem;
    border-radius: 9999px;
    background-color: rgba(49, 52, 145, 0.2); /* accent/20 */
    color: #313491; /* accent-light */
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    transition: all 0.3s;
}

.group:hover .timeline-step-icon {
    background-color: rgba(49, 52, 145, 0.3);
    transform: scale(1.1);
}

/* Perfected Hero Animations from Next.js Hero.tsx */
@keyframes heroGradientShift {
  0%, 100% { background-position: 0% 0%, 100% 100%, 50% 50%; }
  33% { background-position: 30% 20%, 70% 80%, 60% 40%; }
  66% { background-position: 60% 60%, 40% 20%, 30% 70%; }
}
@keyframes heroGlowPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.9; }
}
@keyframes heroGridDrift {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 48px 0, 0 48px; }
}
@keyframes heroSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes heroSpinRev {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}
@keyframes heroNodePulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.25); opacity: 1; }
}

.hero-bg-spin-slow { 
  animation: heroSpin 22s linear infinite; 
  transform-origin: 50% 50%; 
  transform-box: fill-box;
}
.hero-bg-spin-rev { 
  animation: heroSpinRev 28s linear infinite; 
  transform-origin: 50% 50%; 
  transform-box: fill-box;
}
.hero-bg-spin-med { 
  animation: heroSpin 12s linear infinite; 
  transform-origin: 50% 50%; 
  transform-box: fill-box;
}
.hero-bg-spin-fast { 
  animation: heroSpinRev 8s linear infinite; 
  transform-origin: 50% 50%; 
  transform-box: fill-box;
}
.hero-bg-node-pulse { 
  animation: heroNodePulse 2s ease-in-out infinite; 
  transform-origin: 50% 50%; 
  transform-box: fill-box;
}
.hero-bg-node-pulse-delay-1 { 
  animation: heroNodePulse 2.2s ease-in-out infinite 0.2s; 
  transform-origin: 50% 50%; 
  transform-box: fill-box;
}
.hero-bg-node-pulse-delay-2 { 
  animation: heroNodePulse 2.4s ease-in-out infinite 0.4s; 
  transform-origin: 50% 50%; 
  transform-box: fill-box;
}

/* Scroll Animations */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

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

/* Utilities */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Glassmorphism Classes */
.glass {
  background: rgba(22, 27, 38, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-accent {
  background: rgba(49, 52, 145, 0.1);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(49, 52, 145, 0.2);
}

/* Portfolio Filter Styles */
.platform-btn.active, .category-chip.active {
    background-color: var(--accent) !important;
    color: white !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

#project-search:focus {
    box-shadow: 0 0 0 2px rgba(49, 52, 145, 0.2);
}

/* Custom Scrollbar for chips on mobile */
#category-filters {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
#category-filters::-webkit-scrollbar {
    display: none;
}

/* --- Services Detail Styles --- */
/* These classnames are used by: resources/views/website/services/*.blade.php */
.service-detail-wrap {
    width: 100%;
    max-width: 80rem; /* 1280px */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.service-offer-stack {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .service-offer-stack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.service-offer-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: 0.75rem; /* xl */
    background: #161b26; /* dark-800 */
    border: 1px solid #252d3d; /* dark-600 */
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.service-offer-card:hover {
    border-color: rgba(49, 52, 145, 0.4); /* accent/40 */
    transform: translateY(-2px);
}

.service-offer-icon {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background: #161b26; /* dark-800 */
    border: 1px solid #252d3d; /* dark-600 */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #313491; /* accent-light */
}

.service-offer-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.service-offer-card .min-w-0 {
    min-width: 0;
}

/* --- Light Theme Overrides (black -> white, keep blue) --- */
:root {
  --dark-bg: #ffffff;
  --dark-surface: #ffffff;
  --dark-card: #ffffff;
}

body {
  background-color: #ffffff;
  color: #111827;
}

.timeline-line {
  background-color: #e5e7eb;
}

.timeline-card,
.service-offer-card,
.service-offer-icon {
  background-color: #ffffff;
  border-color: #e5e7eb;
}

.glass {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(17, 24, 39, 0.08);
}

/* --- Force Website White + Blue Theme --- */
[class*="bg-dark-"] {
  background-color: #ffffff !important;
}

[class*="border-dark-"] {
  border-color: #dbeafe !important;
}

.from-dark-950,
.from-dark-900,
.from-dark-800 {
  --tw-gradient-from: #eff6ff var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(239 246 255 / 0) var(--tw-gradient-to-position) !important;
}

.via-dark-900,
.via-dark-800,
.via-dark-700 {
  --tw-gradient-via: #dbeafe var(--tw-gradient-via-position) !important;
  --tw-gradient-to: rgb(219 234 254 / 0) var(--tw-gradient-to-position) !important;
}

.to-dark-900,
.to-dark-800,
.to-dark-700 {
  --tw-gradient-to: #ffffff var(--tw-gradient-to-position) !important;
}

.text-white {
  color: #0f172a !important;
}

.text-gray-400,
.text-gray-300,
.text-gray-200,
.text-gray-100 {
  color: #475569 !important;
}

.hover\:text-white:hover {
  color: #ffffff !important;
}

.bg-white\/5,
.bg-white\/10 {
  background-color: rgba(219, 234, 254, 0.45) !important;
}

.border-white\/5,
.border-white\/10 {
  border-color: rgba(147, 197, 253, 0.45) !important;
}

.shadow-black\/50 {
  --tw-shadow-color: rgba(49, 52, 145, 0.15) !important;
}

.text-accent,
.text-accent-light,
.hover\:text-accent:hover,
.hover\:text-accent-light:hover {
  color: #313491 !important;
}

.bg-accent.text-white,
.bg-accent-dark.text-white,
.bg-accent-light.text-white,
.bg-accent\/90.text-white,
.bg-accent,
.bg-accent-dark,
.bg-accent-light,
.bg-accent\/90,
.hover\:bg-accent:hover,
.hover\:bg-accent-dark:hover,
.hover\:bg-accent-light:hover,
.hover\:bg-accent:hover.text-white,
.hover\:bg-accent-dark:hover.text-white,
.hover\:bg-accent-light:hover.text-white {
  color: #ffffff !important;
}