@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Sora:wght@100..800&display=swap');

:root {
  --bg: #08080C;
  --surface: #0F0F16;
  --card: #14141E;
  --card2: #1A1A28;
  --border: #1F1F30;
  --border2: #2A2A40;
  --blue: #3D8EFF;
  --blue2: #2563EB;
  --blue3: #60A5FA;
  --blue-dim: rgba(61,142,255,0.12);
  --white: #EEF2FF;
  --muted: #6B7280;
  --muted2: #9CA3AF;
  --font-heading: 'Sora', sans-serif;
  --font-body: 'DM Sans', sans-serif;
}

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

body {
  background-color: var(--bg);
  color: var(--white);
  font-family: var(--font-body);
  overflow-x: hidden;
  line-height: 1.6;
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  letter-spacing: -0.02em;
  color: var(--white);
}

/* Scroll Fade Animation styles */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-up-element {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fade-up-element.in-view, .fade-up-element.fade-in-up {
  opacity: 1;
  transform: translateY(0);
  animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Sticky Header Backdrop styling */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(8, 8, 12, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  transition: background-color 0.3s ease;
}

/* Grid Pattern Background Overlay for Hero */
.hero-grid-overlay {
  background-image: 
    linear-gradient(rgba(61, 142, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61, 142, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: center top;
}

.hero-glow-radial {
  background: radial-gradient(circle 600px at top center, rgba(61, 142, 255, 0.15) 0%, rgba(8, 8, 12, 0) 100%);
}

/* Infinite Marquee Loop */
.marquee-container {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  width: 100%;
  display: flex;
}

.marquee-container::before, .marquee-container::after {
  content: "";
  position: absolute;
  top: 0;
  width: 15%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.marquee-container::before {
  left: 0;
  background: linear-gradient(to right, var(--bg) 0%, rgba(8, 8, 12, 0) 100%);
}

.marquee-container::after {
  right: 0;
  background: linear-gradient(to left, var(--bg) 0%, rgba(8, 8, 12, 0) 100%);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 35s linear infinite;
}

@keyframes marquee-scroll {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

/* Service Card Hover Gaps & Effects */
.service-grid {
  background-color: var(--border);
  gap: 1px;
}

.service-card {
  background-color: var(--surface);
  transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.service-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-card:hover::after {
  transform: scaleX(1);
}

.service-card:hover {
  background-color: var(--card);
}

/* Portfolios Showcase Mockup Frame Layouts */
.browser-mockup {
  border-radius: 8px 8px 0 0;
  border: 1px solid var(--border);
  border-bottom: none;
  background-color: var(--surface);
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease;
}

.browser-mockup:hover {
  border-color: var(--border2);
}

.browser-bar {
  background-color: #12121A;
  height: 38px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 8px;
}

.browser-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.browser-url-bar {
  background: var(--surface);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--muted2);
  flex-grow: 1;
  max-width: 420px;
  margin: 0 auto;
  padding: 3px 12px;
  border: 1px solid var(--border);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.browser-body {
  height: 220px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.browser-image-fill {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.browser-image-fill:hover {
  transform: scale(1.03);
}

.dec-placeholder-bar {
  background: rgba(61,142,255,0.06);
  border: 1px dashed rgba(61,142,255,0.18);
  height: 120px;
  width: 80%;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Metric Bars animation states */
.metric-bar-fill {
  width: 0%;
  transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Frequently Asked Questions styling */
.faq-header {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid var(--border);
  transition: color 0.2s ease;
}

.faq-header:hover {
  color: var(--blue3);
}

.faq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item.active .faq-body {
  padding: 16px 20px 24px;
  border-bottom: 1px solid var(--border);
}

.faq-item.active .faq-chevron {
  transform: rotate(180deg);
}

.faq-chevron {
  transition: transform 0.3s ease;
}

/* Contact Form states */
.btn-submit {
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.1s ease;
}

.btn-submit.success {
  background-color: #10B981 !important;
  border-color: #10B981 !important;
}

.btn-submit.error {
  background-color: #EF4444 !important;
  border-color: #EF4444 !important;
}

/* Testimonials Hover style change */
.testimonial-card {
  transition: border-color 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid var(--border);
}

.testimonial-card:hover {
  border-color: var(--blue);
  transform: translateY(-4px);
}

/* Blog layouts */
.blog-card-header {
  height: 140px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px;
}

/* Custom UI styling helpers */
.text-glow {
  text-shadow: 0 0 12px rgba(61, 142, 255, 0.4);
}

.button-glow:hover {
  box-shadow: 0 0 20px rgba(61, 142, 255, 0.35);
}

/* Responsive Mobile Navigation Frame */
#mobile-nav-panel {
  transform: translateY(-20px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: rgba(8, 8, 12, 0.75) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.35s ease,
              visibility 0.4s;
}

#mobile-nav-panel.open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Smooth Expand/Collapse transition for menu links */
.mobile-nav-link {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

#mobile-nav-panel.open .mobile-nav-link {
  opacity: 1;
  transform: translateY(0);
}

#mobile-nav-panel.open .mobile-nav-link:nth-child(1) { transition-delay: 0.1s; }
#mobile-nav-panel.open .mobile-nav-link:nth-child(2) { transition-delay: 0.14s; }
#mobile-nav-panel.open .mobile-nav-link:nth-child(3) { transition-delay: 0.18s; }
#mobile-nav-panel.open .mobile-nav-link:nth-child(4) { transition-delay: 0.22s; }
#mobile-nav-panel.open .mobile-nav-link:nth-child(5) { transition-delay: 0.26s; }
#mobile-nav-panel.open .mobile-nav-link:nth-child(6) { transition-delay: 0.3s; }
#mobile-nav-panel.open .mobile-nav-link:nth-child(7) { transition-delay: 0.34s; }

/* Generic Utilities */
.bg-glow-static {
  background: radial-gradient(circle at 50% 50%, rgba(61, 142, 255, 0.1), transparent 70%);
}

/* Blue Glow effect from Sophisticated Dark design */
.blue-glow {
  background: radial-gradient(circle at center, rgba(61, 142, 255, 0.15) 0%, transparent 70%);
}

.font-sora {
  font-family: var(--font-heading);
}

.font-dm {
  font-family: var(--font-body);
}

.marquee-fade {
  mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

/* Portfolio Item Card Elevate Transformations on Hover */
.portfolio-item-card {
  transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), 
              transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), 
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, box-shadow;
  border-radius: 12px;
  padding: 12px;
  background-color: transparent;
  border: 1px solid transparent;
}

.portfolio-item-card.in-view:hover {
  transform: translateY(-6px) scale(1.02);
  background-color: rgba(15, 15, 22, 0.4);
  border-color: rgba(31, 31, 48, 0.7);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6), 
              0 0 35px rgba(61, 142, 255, 0.08);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   LIGHT MODE DESIGN SPECIFICATION
   ========================================================================== */

/* Configure root light-mode values */
:root.light-mode {
  --bg: #F4F6F9;
  --surface: #FFFFFF;
  --card: #EBF0F6;
  --card2: #DFE4EC;
  --border: #E2E8F0;
  --border2: #CBD5E1;
  --blue: #2563EB;
  --blue2: #1D4ED8;
  --blue3: #1E40AF;
  --blue-dim: rgba(37, 99, 235, 0.08);
  --white: #0F172A;
  --muted: #475569;
  --muted2: #64748B;
}

/* Ensure body respects bg and white colors under light mode */
html.light-mode body {
  background-color: var(--bg) !important;
  color: var(--white) !important;
}

/* Specific component overrides for light-mode readability */
html.light-mode header {
  background: rgba(244, 246, 249, 0.85) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
}

html.light-mode .text-white,
html.light-mode .text-\[\#EEF2FF\],
html.light-mode .text-brandwhite {
  color: var(--white) !important;
}

html.light-mode .text-gray-200,
html.light-mode .text-gray-300,
html.light-mode .text-\[\#9CA3AF\],
html.light-mode .text-brandmuted2,
html.light-mode .text-slate-200,
html.light-mode .text-\[\#D1D5DB\] {
  color: var(--muted) !important;
}

html.light-mode .text-gray-400,
html.light-mode .text-gray-500 {
  color: var(--muted2) !important;
}

html.light-mode .bg-\[\#08080C\],
html.light-mode .bg-\[\#050508\],
html.light-mode .bg-\[\#0A0A0C\],
html.light-mode .bg-\[\#0B0B10\],
html.light-mode .bg-brandbg {
  background-color: var(--bg) !important;
}

html.light-mode .bg-\[\#0F0F16\],
html.light-mode .bg-brandsurface {
  background-color: var(--surface) !important;
}

html.light-mode #mobile-nav-panel {
  background-color: rgba(255, 255, 255, 0.85) !important;
}

html.light-mode .bg-\[\#14141E\],
html.light-mode .bg-brandcard {
  background-color: var(--card) !important;
}

html.light-mode .bg-\[\#1A1A28\],
html.light-mode .bg-brandcard2 {
  background-color: var(--card2) !important;
}

html.light-mode .bg-\[\#14141E\]\/40 {
  background-color: rgba(235, 240, 246, 0.4) !important;
}

html.light-mode .from-\[\#141424\] {
  background: linear-gradient(to bottom, var(--surface), var(--card)) !important;
}

html.light-mode .border-\[\#1F1F30\],
html.light-mode .border-\[\#2A2A40\],
html.light-mode .border-brandborder {
  border-color: var(--border) !important;
}

/* Blog Markdown Adaptation */
html.light-mode .blog-markdown h1,
html.light-mode .blog-markdown h2,
html.light-mode .blog-markdown h3,
html.light-mode .blog-markdown strong {
  color: var(--white) !important;
}

html.light-mode .blog-markdown p,
html.light-mode .blog-markdown ul,
html.light-mode .blog-markdown ol,
html.light-mode .blog-markdown li {
  color: var(--muted) !important;
}

/* Overrides for specific page cards and boxes */
html.light-mode .service-card {
  background-color: var(--surface) !important;
  border: 1px solid var(--border) !important;
}

html.light-mode .service-card:hover {
  background-color: var(--card) !important;
}

html.light-mode .portfolio-item-card {
  border-color: var(--border) !important;
}

html.light-mode .portfolio-item-card.in-view:hover {
  background-color: var(--surface) !important;
  border-color: var(--blue) !important;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.12), 
              0 0 25px rgba(37, 99, 235, 0.05) !important;
}

html.light-mode .browser-mockup {
  background-color: var(--card) !important;
  border-color: var(--border) !important;
}

html.light-mode .browser-bar {
  background-color: var(--card2) !important;
  border-bottom: 1px solid var(--border) !important;
}

html.light-mode .browser-body {
  background-color: rgba(255, 255, 255, 0.8) !important;
}

html.light-mode .dec-placeholder-bar {
  background: rgba(37, 99, 235, 0.03) !important;
  border: 1px dashed rgba(37, 99, 235, 0.15) !important;
}

html.light-mode .testimonial-card {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
}

html.light-mode .testimonial-card:hover {
  border-color: var(--blue) !important;
}

html.light-mode .faq-item {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
}

html.light-mode .faq-header {
  border-bottom: 1px solid var(--border) !important;
}

html.light-mode .faq-item.active .faq-body {
  border-bottom: 1px solid var(--border) !important;
}

/* Contact info boxes & form inputs overrides */
html.light-mode input, 
html.light-mode select, 
html.light-mode textarea {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--white) !important;
}

html.light-mode input:focus, 
html.light-mode select:focus, 
html.light-mode textarea:focus {
  border-color: var(--blue) !important;
}

html.light-mode .bg-\[\#14141E\] h4 {
  color: var(--white) !important;
}

html.light-mode .marquee-container::before {
  background: linear-gradient(to right, var(--bg) 0%, rgba(244, 246, 249, 0) 100%) !important;
}

html.light-mode .marquee-container::after {
  background: linear-gradient(to left, var(--bg) 0%, rgba(244, 246, 249, 0) 100%) !important;
}

/* Hero gradient overlays and glows adapted for light mode */
html.light-mode .hero-glow-radial {
  background: radial-gradient(circle 600px at top center, rgba(37, 99, 235, 0.08) 0%, rgba(244, 246, 249, 0) 100%) !important;
}

html.light-mode .hero-grid-overlay {
  background-image: 
    linear-gradient(rgba(37, 99, 235, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.02) 1px, transparent 1px) !important;
}

/* Selection and interactive state */
html.light-mode ::selection {
  background: rgba(37, 99, 235, 0.15) !important;
  color: var(--white) !important;
}

/* SEO Score and Rating Badges adapted for light mode readability */
html.light-mode .bg-emerald-950/50,
html.light-mode .bg-emerald-950/40 {
  background-color: #DEF7EC !important; 
  color: #03543F !important; 
  border-color: #84E1BC !important; 
}
html.light-mode .bg-amber-950/50,
html.light-mode .bg-amber-950/40 {
  background-color: #FDF6B2 !important; 
  color: #723B13 !important; 
  border-color: #F8D882 !important; 
}
html.light-mode .bg-red-950/50,
html.light-mode .bg-red-950/40,
html.light-mode .bg-rose-950/40 {
  background-color: #FDE8E8 !important; 
  color: #9B1C1C !important; 
  border-color: #F8B4B4 !important; 
}

/* Beautiful form inputs styling */
.admin-input {
  background-color: #11111C;
  border: 1px solid var(--border);
  color: var(--white);
  padding: 12px 16px;
  border-radius: 8px;
  width: 100%;
  font-family: var(--font-body);
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.admin-input::placeholder {
  color: #6B7280;
}

.admin-input:focus {
  outline: none;
  border-color: var(--blue);
  background-color: #141424;
  box-shadow: 0 0 0 3px rgba(61, 142, 255, 0.15);
}

select.admin-input option {
  background-color: #11111C;
  color: var(--white);
}

/* Light mode overrides for form inputs */
html.light-mode .admin-input {
  background-color: #FFFFFF !important;
  border-color: #E5E7EB !important;
  color: #1F2937 !important;
}

html.light-mode .admin-input::placeholder {
  color: #9CA3AF !important;
}

html.light-mode .admin-input:focus {
  background-color: #FFFFFF !important;
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px rgba(61, 142, 255, 0.1) !important;
}

html.light-mode select.admin-input option {
  background-color: #FFFFFF !important;
  color: #1F2937 !important;
}

/* Custom status animation - fade in and scale/pulse elastic feedback popped */
@keyframes statusSuccessPulse {
  0% {
    opacity: 0;
    transform: scale(0.85);
  }
  50% {
    transform: scale(1.06);
  }
  75% {
    transform: scale(0.97);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.status-success-animate {
  animation: statusSuccessPulse 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ==========================================================================
   ADVANCED LIGHT MODE STYLING & ACCENT VISUAL IMPROVEMENTS
   ========================================================================== */
html.light-mode .text-\[\#3D8EFF\] {
  color: var(--blue) !important;
}
html.light-mode .bg-\[\#3D8EFF\] {
  background-color: var(--blue) !important;
}
html.light-mode .bg-\[\#3D8EFF\]\/10 {
  background-color: var(--blue-dim) !important;
}
html.light-mode .border-\[\#3D8EFF\]\/25,
html.light-mode .border-\[\#3D8EFF\]\/20,
html.light-mode .border-\[\#3D8EFF\]\/22,
html.light-mode .border-\[\#3D8EFF\]\/30 {
  border-color: rgba(37, 99, 235, 0.25) !important;
}
html.light-mode .border-\[\#3D8EFF\] {
  border-color: var(--blue) !important;
}

/* Prevent general white-text overrides from washing out white texts inside blue elements */
html.light-mode .bg-\[\#3D8EFF\] .text-white,
html.light-mode .bg-\[\#3D8EFF\] span,
html.light-mode .bg-\[\#2563EB\] .text-white,
html.light-mode button.text-white,
html.light-mode a.bg-\[\#3D8EFF\],
html.light-mode a.bg-\[\#2563EB\],
html.light-mode .btn-submit,
html.light-mode .btn-submit .text-white,
html.light-mode .portfolio-filter-btn.active,
html.light-mode #scroll-progress-bar {
  color: #FFFFFF !important;
}

/* From gradients adjustments */
html.light-mode .from-\[\#060C1F\] {
  background: linear-gradient(to bottom right, var(--surface), var(--card)) !important;
}