/* ============================================================
   FrugalNova \" Premium Website Styles
   Design: Clean, Professional, Natural Colors, Photo-based
   ============================================================ */

/* \"\"\" CSS CUSTOM PROPERTIES \"\"\" */
:root {
  /* Palette */
  --clr-primary:       #1a2e44;     /* Deep navy-slate */
  --clr-primary-light: #2c4a6e;
  --clr-accent:        #B5246A;     /* Magenta-rose */
  --clr-accent-light:  #C94985;
  --clr-accent-pale:   #FAE8F1;
  --clr-surface:       #ffffff;
  --clr-surface-2:     #f8f7f4;
  --clr-surface-3:     #f0ede6;
  --clr-text:          #1c1c1e;
  --clr-text-muted:    #4a4a58;     /* Darkened from #5a5a6b for better contrast (8.3:1) */
  --clr-text-light:    #666676;     /* Darkened from #9898a8 to meet WCAG AA (4.7:1) */
  --clr-border:        #e8e4dc;
  --clr-shadow:        rgba(26,46,68,.10);

  /* Typography */
  /* Typography - Modern & Lean */
  --font-sans:    'Inter', system-ui, sans-serif;
  --font-headings: 'Outfit', 'Inter', system-ui, sans-serif;

  /* Sizing */
  --container-max: 1200px;
  --radius-sm:     6px;
  --radius-md:     12px;
  --radius-lg:     20px;
  --radius-xl:     32px;

  /* Transitions */
  --ease-out:  cubic-bezier(.22, 1, .36, 1);
  --ease-in:   cubic-bezier(.64, 0, .78, 0);
  --ease-circ: cubic-bezier(.4, 0, .2, 1);
  --dur-fast:  180ms;
  --dur-med:   350ms;
  --dur-slow:  600ms;
}

/* \"\"\" RESET & BASE \"\"\" */
*, *::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-sans);
  font-weight: 300; /* Lighter base weight */
  color: var(--clr-text);
  background: var(--clr-surface);
  overflow-x: hidden;
  line-height: 1.7; /* Breathing room */
  letter-spacing: 0.01em;
}

img { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 2rem;
}

.section { padding: 1.6rem 0; } /* Tighter global section padding */

/* \"\"\" TYPOGRAPHY \"\"\" */
.section-label {
  display: inline-block;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--clr-accent);
  margin-bottom: 0.8rem;
  position: relative;
  padding-left: 2.2rem;
}
.section-label::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 1.6rem; height: 3px;
  background: var(--clr-accent);
  border-radius: 2px;
}

.section-title {
  font-family: var(--font-headings);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem); /* Slightly smaller & sharper */
  font-weight: 600; /* Clean semi-bold instead of heavy bold */
  line-height: 1.2;
  color: var(--clr-primary);
  margin-bottom: 0.85rem;
  letter-spacing: -0.02em;
}
.section-title em { font-style: normal; font-weight: 400; color: var(--clr-accent); }

.section-desc {
  font-size: 1rem;
  font-weight: 300;
  color: var(--clr-text-muted);
  max-width: 540px;
  line-height: 1.8;
  letter-spacing: 0.01em;
}

.section-header {
  text-align: center;
  margin-bottom: 1.25rem; /* Tightened */
}
.section-header .section-label { display: block; }
.section-header .section-label::before { display: none; }
.section-header .section-label { padding-left: 0; }
.section-header .section-desc { margin: 0 auto; }

/* \"\"\" BUTTONS \"\"\" */
/* \"\"\" BUTTONS: REDESIGNED FOR HIGH CONTRAST & 3D DEPTH \"\"\" */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: .9rem 2.4rem;
  border-radius: 100px;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .02em;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  z-index: 1;
  text-transform: uppercase;
  border: none;
  transform-style: preserve-3d;
}

/* \"\" Primary button: High-contrast Gradient \"\" */
.btn-primary {
  background: linear-gradient(135deg, var(--clr-primary) 0%, #2c4a6e 100%);
  color: #fff;
  box-shadow: 
    0 4px 15px rgba(26,46,68,0.2),
    0 10px 20px -10px rgba(26,46,68,0.4),
    inset 0 -4px 0 rgba(0,0,0,0.2);
}

.btn-primary:hover {
  transform: translateY(-5px) scale(1.03) translateZ(10px);
  background: linear-gradient(135deg, #2c4a6e 0%, var(--clr-primary) 100%);
  box-shadow: 
    0 15px 30px rgba(26,46,68,0.25),
    0 20px 40px -15px rgba(26,46,68,0.5),
    inset 0 -2px 0 rgba(0,0,0,0.1),
    0 0 20px rgba(181,36,106,0.2);
}

/* \"\" Ghost button: Glassmorphism with 3D look \"\" */
.btn-ghost {
  background: rgba(255,255,255,0.05);
  color: var(--clr-primary);
  backdrop-filter: blur(10px);
  border: 2px solid var(--clr-border);
  box-shadow: 
    0 4px 10px rgba(0,0,0,0.05),
    inset 0 1px 1px rgba(255,255,255,0.4);
}

.btn-ghost:hover {
  background: var(--clr-surface);
  border-color: var(--clr-accent);
  color: var(--clr-primary);
  transform: translateY(-5px) scale(1.03) translateZ(10px);
  box-shadow: 
    0 15px 30px rgba(181,36,106,0.15),
    0 0 0 4px rgba(181,36,106,0.1);
}

/* \"\" Hero button variants (Enhanced contrast for dark bg) \"\" */
.hero .btn-ghost {
  color: #fff;
  border-color: rgba(255,255,255,0.4);
}

.hero .btn-ghost:hover {
  background: #fff;
  color: var(--clr-primary);
  border-color: #fff;
}

/* \"\" Animated Sweep/Shine across all buttons \"\" */
.btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255,255,255,0.2), 
    transparent);
  transform: skewX(-30deg);
  transition: 0.8s;
  z-index: -1;
}

.btn:hover::before {
  left: 200%;
}

.btn-full { width: 100%; justify-content: center; }

.btn-loader {
  display: none;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.btn.loading .btn-text { opacity: 0; }
.btn.loading .btn-loader { display: block; }

@keyframes spin { to { transform: rotate(360deg); } }

/* \"\"\" NAVBAR \"\"\" */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 0.85rem 0;
  transition: all var(--dur-med) var(--ease-circ);
  /* Starts transparent over the light hero */
  background: rgba(255,255,255,0);
}
.navbar.scrolled {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 1px 0 var(--clr-border), 0 8px 32px rgba(26,46,68,.08);
  padding: 0.6rem 0;
}

.nav-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.logo-img {
  display: block;
  height: 40px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  /* Subtle drop shadow for contrast on transparent areas */
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.08));
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.nav-logo:hover .logo-img {
  opacity: 0.85;
  transform: scale(1.03);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin-left: auto;
}

.nav-link {
  font-size: .85rem;
  font-weight: 400;
  padding: .5rem .9rem;
  border-radius: 100px;
  transition: all var(--dur-fast) var(--ease-out);
  color: var(--clr-text-muted);
  font-weight: 500;
  letter-spacing: 0.03em;
}
.nav-link:hover { background: var(--clr-surface-2); color: var(--clr-primary); }
.nav-link.active { background: var(--clr-surface-2); color: var(--clr-primary); }

/* \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 
   PREMIUM MEGA MENU DROPDOWN
   \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022  */

.nav-dropdown-wrapper { position: relative; }

/* Ensure mega menu is full width relative to navbar */
.nav-dropdown-wrapper.mega-menu-wrapper { position: static; }

.mega-menu-wrapper > .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.mega-menu-wrapper > .nav-link::after {
  content: '';
  display: block;
  width: 0; height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid var(--clr-text-light);
  flex-shrink: 0;
  margin-top: 1px;
  transition: transform .25s var(--ease-out), border-top-color .25s;
}
.mega-menu-wrapper.is-open > .nav-link::after,
.mega-menu-wrapper:hover > .nav-link::after {
  transform: rotate(180deg) translateY(-1px);
  border-top-color: var(--clr-accent);
}

/* \"\" Mega Menu Panel \"\" */
.nav-dropdown.mega-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  width: 96vw;
  max-width: 1120px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  box-shadow: 
    0 25px 80px rgba(26, 46, 68, 0.12),
    0 10px 30px rgba(26, 46, 68, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  padding: 1.4rem 1.8rem 1.6rem 1.8rem; /* Compact, premium panel padding */
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-10px) scale(0.98);
  transform-origin: top center;
  transition: opacity 0.35s var(--ease-out), transform 0.4s var(--ease-out), visibility 0.4s;
  z-index: 200;
  pointer-events: none;
}

/* Custom Scrollbar for Mega Menu */
.nav-dropdown.mega-menu::-webkit-scrollbar {
  width: 6px;
}
.nav-dropdown.mega-menu::-webkit-scrollbar-track {
  background: transparent;
  margin: 1rem 0;
}
.nav-dropdown.mega-menu::-webkit-scrollbar-thumb {
  background: rgba(26, 46, 68, 0.15);
  border-radius: 10px;
}
.nav-dropdown.mega-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(26, 46, 68, 0.25);
}

/* Show on Hover */
.mega-menu-wrapper.is-open .nav-dropdown.mega-menu,
.mega-menu-wrapper:hover .nav-dropdown.mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
  pointer-events: auto !important;
}

/* Invisible hover bridge */
.mega-menu-wrapper::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 25px;
  background: transparent;
  z-index: 199;
}

/* \"\" Inner 2-Level Layout \"\" */
.mega-menu-2level {
  display: flex;
  gap: 2rem;
  align-items: stretch;
  min-height: 400px;
}

/* \"\" Level 1: Categories \"\" */
.mega-categories {
  flex: 0 0 35%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-right: 1px solid rgba(26, 46, 68, 0.08);
  padding-right: 1.5rem;
}

.mega-category-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.3s var(--ease-out);
  position: relative;
  opacity: 0;
  transform: translateX(-15px);
}

.mega-menu-wrapper.is-open .mega-category-item,
.mega-menu-wrapper:hover .mega-category-item {
  opacity: 1;
  transform: translateX(0);
}
.mega-menu-wrapper.is-open .mega-category-item:nth-child(1), .mega-menu-wrapper:hover .mega-category-item:nth-child(1) { transition-delay: 0.05s; }
.mega-menu-wrapper.is-open .mega-category-item:nth-child(2), .mega-menu-wrapper:hover .mega-category-item:nth-child(2) { transition-delay: 0.10s; }
.mega-menu-wrapper.is-open .mega-category-item:nth-child(3), .mega-menu-wrapper:hover .mega-category-item:nth-child(3) { transition-delay: 0.15s; }
.mega-menu-wrapper.is-open .mega-category-item:nth-child(4), .mega-menu-wrapper:hover .mega-category-item:nth-child(4) { transition-delay: 0.20s; }
.mega-menu-wrapper.is-open .mega-category-item:nth-child(5), .mega-menu-wrapper:hover .mega-category-item:nth-child(5) { transition-delay: 0.25s; }

.mega-category-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15%;
  bottom: 15%;
  width: 3px;
  background: var(--clr-accent);
  border-radius: 4px;
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.3s var(--ease-out);
  z-index: 1;
}

.mega-category-item:hover,
.mega-category-item.active {
  background: linear-gradient(90deg, rgba(181, 36, 106, 0.04) 0%, transparent 100%);
  transform: translateX(4px);
}
.mega-category-item:hover::before,
.mega-category-item.active::before {
  transform: scaleY(1);
}

.mega-category-item:hover .mega-icon,
.mega-category-item.active .mega-icon {
  transform: scale(1.1) rotate(-6deg);
  background: var(--clr-accent-pale);
}

.cat-arrow {
  color: var(--clr-text-light);
  font-size: 1.1rem;
  transition: transform 0.3s var(--ease-out), color 0.3s;
}
.mega-category-item:hover .cat-arrow,
.mega-category-item.active .cat-arrow {
  transform: translateX(4px);
  color: var(--clr-accent);
}

/* \"\" Category Title \"\" */
.mega-title {
  font-family: var(--font-headings);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--clr-primary);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.mega-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--clr-surface-3);
  border-radius: 6px;
  font-size: 0.95rem;
  color: var(--clr-accent);
  transition: transform 0.4s var(--ease-out), background 0.4s;
}

/* \"\" Level 2: Subcategories Container \"\" */
.mega-subcategories-container {
  flex: 1;
  position: relative;
  overflow: hidden; /* For smooth transitions */
}

/* \"\" Subcategory Panels \"\" */
.mega-sub-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateX(20px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out), visibility 0.4s;
  display: flex;
  flex-direction: column;
}

.mega-sub-panel.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.mega-sub-title {
  font-family: var(--font-headings);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--clr-primary);
  margin-bottom: 1.2rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid rgba(26, 46, 68, 0.08);
}

/* \"\" Subcategory List \"\" */
.mega-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem 1.5rem;
  align-content: start;
}

.mega-list li {
  display: block;
}

.mega-list a {
  display: block;
  width: 100%;
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--clr-text-muted);
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius-sm);
  transition: all 0.25s var(--ease-out);
  position: relative;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
  z-index: 1;
}

/* Left accent bar on hover */
.mega-list a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 2.5px;
  background: var(--clr-accent);
  border-radius: 4px;
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.25s var(--ease-out);
  pointer-events: none;
  z-index: -1;
}

/* Soft highlight background */
.mega-list a::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(181, 36, 106, 0.04) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.25s var(--ease-out);
  pointer-events: none;
  z-index: -2;
  border-radius: inherit;
}

.mega-list a:hover {
  color: var(--clr-primary);
  transform: translateX(4px);
  font-weight: 500;
}

.mega-list a:hover::before {
  transform: scaleY(1);
}

.mega-list a:hover::after {
  opacity: 1;
}

/* Active State for Links */
.mega-list a.dd-active {
  color: var(--clr-primary);
  font-weight: 500;
  background: var(--clr-accent-pale);
}
.mega-list a.dd-active::before {
  transform: scaleY(1);
}

/* \"\" Responsive Mobile/Tablet Adjustments \"\" */
@media (max-width: 1100px) {
  .nav-dropdown.mega-menu {
    padding: 1.2rem 1.4rem;
  }
  .mega-menu-2level {
    gap: 1.5rem;
  }
  .mega-categories {
    flex: 0 0 40%;
    padding-right: 1rem;
  }
  .mega-title {
    font-size: 0.88rem;
  }
  .mega-icon {
    width: 28px;
    height: 28px;
    font-size: 0.85rem;
  }
  .mega-list a {
    font-size: 0.82rem;
  }
  .mega-sub-title {
    font-size: 1rem;
    margin-bottom: 1rem;
  }
}

@media (max-width: 768px) {
  .nav-dropdown-wrapper.mega-menu-wrapper { position: relative; }
  .nav-dropdown.mega-menu {
    position: static;
    width: 100%;
    box-shadow: none;
    border: none;
    padding: 1rem 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  
  .mega-menu-wrapper.is-open .nav-dropdown.mega-menu,
  .mega-menu-wrapper:hover .nav-dropdown.mega-menu {
    display: block;
  }

  .mega-menu-2level {
    flex-direction: column;
    gap: 1rem;
    min-height: auto;
  }
  
  .mega-categories {
    border-right: none;
    border-bottom: 1px solid rgba(26, 46, 68, 0.08);
    padding-right: 0;
    padding-bottom: 1rem;
  }

  .mega-subcategories-container {
    overflow: visible;
    min-height: auto;
  }
  
  .mega-sub-panel {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
  }
  
  .mega-sub-panel.active {
    display: flex;
  }

  .mega-list {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .mega-list a {
    padding: 0.35rem 0.5rem;
  }
}

.nav-cta {
  flex-shrink: 0;
  padding: .65rem 1.6rem;
  border-radius: 100px;
  font-size: .875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  background: var(--clr-primary);
  color: #fff;
  box-shadow: 0 4px 15px rgba(26,46,68,0.2);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  overflow: hidden;
}
.nav-cta:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 25px rgba(26,46,68,0.3);
  background: var(--clr-primary-light);
}
.nav-cta::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transform: skewX(-30deg);
  transition: 0.8s;
}
.nav-cta:hover::before { left: 200%; }

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
  margin-left: auto;
}
.hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--clr-primary);
  border-radius: 2px;
  transition: all var(--dur-med) var(--ease-out);
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* \"\"\" HERO \"\"\" */
.hero {
  position: relative;
  min-height: 85svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #f4f5f8; /* Slightly cooler light base */
}

/* \"\" SVG Noise grain overlay (premium texture) \"\" */
.hero-noise {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .028;
  /* Inline SVG turbulence filter as data URI */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px 180px;
}

/* Subtle dot-grid background */
.hero-grid-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    radial-gradient(circle, rgba(26,46,68,.09) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

/* Soft accent glow blobs (CSS-only, zero images) */
.hero-glow {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  will-change: opacity, transform;
  animation: glowBreath 7s ease-in-out infinite alternate;
}
.hero-glow--1 {
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(181,36,106,.16) 0%, transparent 68%);
  top: -12%; right: 8%;
  animation-delay: 0s;
}
.hero-glow--2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(79,142,247,.12) 0%, transparent 68%);
  bottom: 4%; right: 33%;
  animation-delay: 3.5s;
}
.hero-glow--3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(181,36,106,.09) 0%, transparent 70%);
  top: 20%; left: -4%;
  animation-delay: 6s;
}
@keyframes glowBreath {
  0%   { opacity: .55; transform: scale(.94); }
  100% { opacity: 1;   transform: scale(1.06); }
}

/* \"\" Two-column inner layout \"\" */
.hero-inner {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 4rem;
  padding-top: 6rem;
  padding-bottom: 3rem;
  width: 100%;
}

/* \"\" LEFT COLUMN: text content \"\" */
.hero-content {
  flex: 1 1 480px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}



.hero-title {
  font-family: var(--font-headings);
  font-size: clamp(2.4rem, 4.8vw, 4.2rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--clr-primary);
  margin-bottom: .6rem;
  letter-spacing: -0.03em;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp .9s var(--ease-out) .4s forwards;
  /* 3D context for per-word magnetic effect */
  perspective: 700px;
  perspective-origin: 50% 60%;
  transform-style: preserve-3d;
  cursor: default;
}

/* Each word: composited layer, smooth spring return */
.h-word {
  display: inline-block;
  white-space: nowrap;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              text-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  transform-origin: center 80%;
}

/* CSS-only lift fallback (JS overrides with precise per-word values) */
.hero-title:hover .h-word {
  transform: translateY(-3px) translateZ(6px);
  text-shadow: 0 6px 18px rgba(26,46,68,.12);
}
/* Stagger the title words on enter for a wave feel (CSS fallback only) */
.hero-title:hover .h-word:nth-child(1) { transition-delay:  0ms; }
.hero-title:hover .h-word:nth-child(2) { transition-delay: 30ms; }
.hero-title:hover .h-word:nth-child(3) { transition-delay: 60ms; }
/* accent words */
.hero-accent .h-word:nth-child(1) { transition-delay: 90ms; }
.hero-accent .h-word:nth-child(2) { transition-delay:120ms; }
.hero-accent .h-word:nth-child(3) { transition-delay:150ms; }

/* When JS is driving, cancel the CSS override \" JS sets inline style directly */
.hero-title.js-hover .h-word {
  /* Let inline style from JS win; suppress CSS fallback transform */
  transform: none; /* will be overridden by inline style */
  text-shadow: none;
  transition-delay: 0ms; /* JS runs at framerate, no stagger needed */
}

/* Hero accent: allow 3D overflow (words translateZ toward viewer) */
/* Hero accent: rose italic + moving shine sweep */
.hero-accent {
  font-style: italic;
  color: var(--clr-accent);
  display: block;
  position: relative;
  overflow: visible; /* Changed from hidden so 3D translateZ isn't clipped */
}
.hero-accent::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(100deg,
    transparent 20%,
    rgba(255,255,255,.38) 50%,
    transparent 80%);
  transform: skewX(-20deg);
  animation: accentShine 5s ease-in-out 2s infinite;
  pointer-events: none;
}
@keyframes accentShine {
  0%   { left: -60%; opacity: 0; }
  10%  { opacity: 1; }
  40%  { left: 120%; opacity: 1; }
  41%  { opacity: 0; }
  100% { left: 120%; opacity: 0; }
}

/* Decorative gradient divider under heading */
.hero-deco-line {
  width: 72px;
  height: 3px;
  background: linear-gradient(90deg, var(--clr-accent) 0%, rgba(79,142,247,.5) 100%);
  border-radius: 100px;
  margin-bottom: 0.8rem;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  animation: decoLineIn .8s var(--ease-out) .65s forwards;
}
@keyframes decoLineIn {
  to { opacity: 1; transform: scaleX(1); }
}

.hero-subtitle {
  font-size: 1.05rem;
  font-weight: 300;
  color: var(--clr-text-muted);
  max-width: 520px;
  line-height: 1.85;
  margin-bottom: 1.5rem;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp .9s var(--ease-out) .6s forwards;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-bottom: 2rem;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp .9s var(--ease-out) .8s forwards;
}

/* Override ghost button for light hero bg */
.hero .btn-ghost {
  color: var(--clr-primary);
  border-color: var(--clr-border);
  background: #fff;
}
.hero .btn-ghost:hover {
  border-color: var(--clr-accent);
  background: var(--clr-accent-pale);
  color: var(--clr-primary);
}



/* \"\" RIGHT COLUMN: laptop visual \"\" */
.hero-visual {
  flex: 0 0 auto;
  width: min(48%, 560px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateX(40px);
  animation: fadeSlideLeft .9s var(--ease-out) .5s forwards;
}
@keyframes fadeSlideLeft {
  to { opacity: 1; transform: translateX(0); }
}

/* \"\" Laptop Scene (3D perspective container) \"\" */
.laptop-scene {
  position: relative;
  width: 100%;
  max-width: 520px;
  perspective: 1400px;
  perspective-origin: 50% 38%;
}

.laptop {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  transform: rotateX(6deg) rotateY(-10deg);
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.65s ease;
  /* Colored multi-layer drop shadow for depth */
  filter:
    drop-shadow(0 8px 2px rgba(26,46,68,.15))
    drop-shadow(0 30px 40px rgba(26,46,68,.20))
    drop-shadow(0 60px 80px rgba(79,142,247,.08));
  cursor: default;
}
.laptop-scene:hover .laptop {
  transform: rotateX(0deg) rotateY(0deg);
  filter:
    drop-shadow(0 8px 2px rgba(26,46,68,.18))
    drop-shadow(0 40px 60px rgba(26,46,68,.24))
    drop-shadow(0 80px 100px rgba(79,142,247,.10));
}

/* Screen lid \" more realistic angled gradient */
.laptop-lid {
  background: linear-gradient(150deg, #2e404e 0%, #1a2e44 60%, #151e2b 100%);
  border-radius: 14px 14px 4px 4px;
  padding: 12px 12px 6px;
  position: relative;
  box-shadow:
    0 -1px 0 rgba(255,255,255,.10) inset,
    0 1px 0 rgba(0,0,0,.5);
}
.laptop-notch {
  width: 70px; height: 8px;
  background: #0e1c2b;
  border-radius: 0 0 6px 6px;
  margin: 0 auto 6px;
  opacity: .7;
}
.laptop-screen {
  background: #0d1117;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 16/10;
  position: relative;
}

/* Screen shine: diagonal light reflection */
.screen-shine {
  position: absolute;
  top: 0; left: -40%;
  width: 35%; height: 100%;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255,255,255,.04) 50%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 10;
  animation: screenShineMove 8s ease-in-out infinite alternate;
}
@keyframes screenShineMove {
  0%   { left: -40%; }
  100% { left: 110%; }
}

/* Scanlines: subtle CRT row effect */
.screen-scanlines {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,.045) 2px,
    rgba(0,0,0,.045) 4px
  );
  mix-blend-mode: multiply;
}

/* Chrome bar (fake OS tab bar) */
.screen-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #161b22;
  padding: 7px 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.chrome-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.chrome-dot--red    { background: #ff5f57; }
.chrome-dot--yellow { background: #febc2e; }
.chrome-dot--green  { background: #28c840; }
.chrome-title {
  font-size: .65rem;
  color: rgba(255,255,255,.35);
  font-family: var(--font-sans);
  margin-left: 6px;
  letter-spacing: .03em;
}
.chrome-branch {
  margin-left: auto;
  font-size: .58rem;
  color: rgba(255,255,255,.25);
  font-family: var(--font-sans);
  letter-spacing: .04em;
}

/* Code content area */
.screen-code {
  padding: 12px 14px;
  font-family: 'Courier New', 'Consolas', monospace;
  font-size: .62rem;
  line-height: 1.8;
  overflow: hidden;
}
.code-line {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: translateX(-6px);
  animation: codeFadeIn .4s ease forwards;
  white-space: pre;
}
/* Stagger each line */
.code-line:nth-child(1)  { animation-delay: 1.0s; }
.code-line:nth-child(2)  { animation-delay: 1.2s; }
.code-line:nth-child(3)  { animation-delay: 1.4s; }
.code-line:nth-child(4)  { animation-delay: 1.6s; }
.code-line:nth-child(5)  { animation-delay: 1.8s; }
.code-line:nth-child(6)  { animation-delay: 2.0s; }
.code-line:nth-child(7)  { animation-delay: 2.2s; }
.code-line:nth-child(8)  { animation-delay: 2.4s; }
.code-line:nth-child(9)  { animation-delay: 2.6s; }
.code-line:nth-child(10) { animation-delay: 2.8s; }
@keyframes codeFadeIn {
  to { opacity: 1; transform: translateX(0); }
}

/* Active (current) line highlight */
.code-line--active {
  background: rgba(79,142,247,.10);
  border-left: 2px solid rgba(79,142,247,.5);
  border-radius: 0 3px 3px 0;
  padding: 0 4px 0 6px;
  margin: 0 -4px 0 -8px;
}
.code-line--output {
  margin-top: 3px;
  border-top: 1px solid rgba(255,255,255,.05);
  padding-top: 3px;
}

/* Syntax token colors */
.cl-num     { color: rgba(255,255,255,.2); user-select:none; font-size:.55rem; min-width: 14px; }
.cl-kw      { color: #ff7b72; } /* red: keyword */
.cl-var     { color: #79c0ff; } /* blue: variable */
.cl-fn      { color: #d2a8ff; } /* purple: function */
.cl-str     { color: #a5d6ff; } /* light blue: string -- was light green */
.cl-op      { color: #ff7b72; } /* operator */
.cl-p       { color: #c9d1d9; } /* punctuation */
.cl-key     { color: #79c0ff; } /* object key */
.cl-comment { color: #8b949e; font-style: italic; } /* grey comment */
.cl-success { color: #3fb950; font-weight: 600; } /* green success */

/* Blinking caret */
.cl-caret {
  display: inline-block;
  width: 2px; height: .8em;
  background: #58a6ff;
  vertical-align: text-bottom;
  margin-left: 1px;
  border-radius: 1px;
  animation: caretBlink 1s step-end infinite;
}
@keyframes caretBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Laptop base / keyboard */
.laptop-base {
  background: linear-gradient(180deg, #243344 0%, #1a2535 100%);
  border-radius: 0 0 12px 12px;
  padding: 8px 16px 12px;
  margin-top: 1px;
  box-shadow: 0 4px 0 rgba(0,0,0,.3);
}
.laptop-keyboard {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 6px;
}
.kb-row {
  display: flex;
  gap: 3px;
  justify-content: center;
}
.kb-row span {
  flex: 1;
  height: 5px;
  background: rgba(255,255,255,.07);
  border-radius: 2px;
  max-width: 28px;
}
.kb-row--space { margin-top: 2px; }
.kb-space {
  flex: none !important;
  width: 50% !important;
  max-width: none !important;
  height: 5px;
  background: rgba(255,255,255,.07);
  border-radius: 2px;
}
.laptop-trackpad {
  width: 36%;
  height: 10px;
  background: rgba(255,255,255,.05);
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.07);
  margin: 4px auto 0;
}

/* Floating info badges around laptop */
.laptop-badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.95);
  border-radius: 100px;
  padding: .45rem 1.25rem;
  font-size: .95rem;
  font-weight: 600;
  color: var(--clr-primary);
  letter-spacing: .03em;
  box-shadow: 0 8px 28px rgba(26,46,68,.14), 0 2px 8px rgba(26,46,68,.08);
  white-space: nowrap;
  z-index: 5;
  animation: badgeFloat 4s ease-in-out infinite;
}
.laptop-badge--top {
  top: -18px;
  right: -22px;
  animation-delay: 0s;
}
.laptop-badge--bottom {
  bottom: 12px;
  left: -30px;
  animation-delay: 2s;
}
@keyframes badgeFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33%       { transform: translateY(-6px) rotate(.3deg); }
  66%       { transform: translateY(-3px) rotate(-.2deg); }
}
.laptop-badge .badge-dot {
  width: 7px; height: 7px;
}

/* \"\" Screen glow bloom (behind laptop) \"\" */
.screen-glow {
  position: absolute;
  top: 10%; left: 15%;
  width: 70%; height: 55%;
  background: radial-gradient(
    ellipse at 50% 55%,
    rgba(79,142,247,.22) 0%,
    rgba(88,166,255,.10) 40%,
    transparent 75%
  );
  filter: blur(32px);
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  animation: screenGlowPulse 4s ease-in-out infinite alternate;
}
@keyframes screenGlowPulse {
  0%   { opacity: .7; transform: scale(.96); }
  100% { opacity: 1;  transform: scale(1.04); }
}

/* \"\" Floating tech pills \"\" */
.hero-tech-pills {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}
.tech-pill {
  position: absolute;
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 100px;
  padding: .3rem .85rem;
  font-size: .65rem;
  font-weight: 700;
  color: var(--clr-primary);
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 0 4px 16px rgba(26,46,68,.10);
  opacity: 0;
  animation: pillAppear .6s var(--ease-out) forwards, pillFloat 5s ease-in-out infinite;
}
.tech-pill--1 {
  top: 8%;  left: -2%;
  animation-delay: 1.4s, 1.4s;
}
.tech-pill--2 {
  top: 72%; left: 60%;
  animation-delay: 1.8s, 1.8s;
}
.tech-pill--3 {
  top: 55%; left: -6%;
  animation-delay: 2.2s, 2.2s;
}
.tech-pill--4 {
  top: 22%; left: 62%;
  animation-delay: 2.6s, 2.6s;
}
@keyframes pillAppear {
  from { opacity: 0; transform: translateY(10px) scale(.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes pillFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-7px); }
}




/* \"\"\" ABOUT (Compact Modern 3D Theme) \"\"\" */
.compact-about {
  padding: 3.5rem 0;
  background: var(--clr-surface);
  position: relative;
  overflow: hidden;
}

.compact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr; /* Visually reduce image size */
  gap: 3rem;
  align-items: center; /* Vertical centering */
}

/* Specific overrides to tighten the height */
.compact-about .section-label {
  font-size: 0.95rem;
  margin-bottom: 0.6rem;
}

.compact-about .section-title {
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  margin-bottom: 0.8rem;
}

/* Visual Side */
.about-visual {
  position: relative;
  perspective: 1000px;
}

.about-img-glass {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(26,46,68,0.06);
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.about-img-glass:hover {
  transform: rotateY(3deg) rotateX(2deg) scale(1.02);
}

.about-img {
  width: 100%;
  aspect-ratio: 4/4.5;
  object-fit: cover;
  display: block;
}

.glass-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.2) 100%);
  pointer-events: none;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: inherit;
}

/* Floating Widgets */
.about-widget {
  position: absolute;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  padding: 0.8rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  transform: translateZ(40px);
  animation: floatWidget 4s ease-in-out infinite;
  z-index: 2;
}

.w-top {
  top: 10%;
  right: -5%;
}

.w-bottom {
  bottom: 10%;
  left: -5%;
  animation-delay: 2s;
}

@keyframes floatWidget {
  0%, 100% { transform: translateY(0) translateZ(40px); }
  50% { transform: translateY(-8px) translateZ(40px); }
}

.w-icon { font-size: 1.4rem; }
.w-info strong { display: block; font-size: 0.85rem; color: var(--clr-primary); font-weight: 700; }
.w-info span { font-size: 0.7rem; color: var(--clr-text-muted); }

/* Content Side */
.about-text {
  font-size: 0.88rem;
  font-weight: 300;
  color: var(--clr-text-muted);
  line-height: 1.5;
  margin-bottom: 1rem;
  max-width: 95%;
}

/* Compact 3D Mini Features */
.about-mini-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
  margin-bottom: 1.2rem;
  perspective: 800px;
}

.mini-feature {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #ffffff;
  border-radius: 12px;
  padding: 0.65rem 0.85rem;
  box-shadow: 0 4px 15px rgba(26,46,68,0.03);
  border: 1px solid rgba(26,46,68,0.03);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
  cursor: default;
  transform-style: preserve-3d;
}

.mini-feature:hover {
  transform: translateY(-5px) translateZ(10px) rotateX(3deg);
  box-shadow: 0 15px 30px rgba(181,36,106,0.08);
  border-color: rgba(181,36,106,0.15);
}

.mf-icon-wrap {
  width: 38px;
  height: 38px;
  background: rgba(181,36,106,0.04);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.3s;
  transform: translateZ(15px);
}

.mini-feature:hover .mf-icon-wrap {
  background: rgba(181,36,106,0.12);
}

.mf-icon { font-size: 1.2rem; }
.mf-text { transform: translateZ(10px); }
.mf-text strong { display: block; font-size: 0.8rem; color: var(--clr-primary); font-weight: 700; margin-bottom: 0.1rem; }
.mf-text span { display: block; font-size: 0.68rem; color: var(--clr-text-light); }

.compact-cta {
  margin-top: 0.4rem;
}

.compact-cta .btn-primary {
  padding: 0.8rem 1.8rem;
  font-size: 0.92rem;
}

.compact-cta .section-cta-note {
  font-size: 0.72rem;
  margin-top: 0.5rem;
}

@media (max-width: 900px) {
  .compact-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .w-top { right: 5%; }
  .w-bottom { left: 5%; }
}

@media (max-width: 600px) {
  .about-mini-features {
    grid-template-columns: 1fr;
  }
}


/* \"\"\" PORTFOLIO \"\"\" */
.portfolio { background: var(--clr-surface); padding: 2rem 0 3.5rem; }

.portfolio-showcase {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2.2rem;
  align-items: start;
}

.portfolio-main {
  position: sticky;
  top: 100px;
}
.portfolio-img-wrap {
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4/3;
  position: relative;
}
.portfolio-main-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: all .6s var(--ease-out);
}
.portfolio-main-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(17,32,50,.65));
  display: flex;
  align-items: flex-end;
  padding: 1.5rem;
}
.portfolio-tags {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.portfolio-tags span {
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
  color: #fff;
  border: 1px solid rgba(255,255,255,.3);
  padding: .3rem .85rem;
  border-radius: 100px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
}

.portfolio-items {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.portfolio-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--clr-border);
  cursor: pointer;
  transition: all var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
  background: var(--clr-surface);
}
.portfolio-item:hover,
.portfolio-item.active {
  border-color: var(--clr-accent);
  background: var(--clr-accent-pale);
  box-shadow:
    0 6px 24px rgba(181,36,106,.16),
    0 0 0 2px rgba(181,36,106,.12);
  transform: translateX(4px);
}
.pf-item-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.pf-number {
  font-size: .7rem;
  font-weight: 800;
  color: var(--clr-accent);
  letter-spacing: .08em;
  flex-shrink: 0;
}
.pf-item-meta strong { display: block; font-size: .9rem; color: var(--clr-primary); font-weight: 700; }
.pf-item-meta span { font-size: .78rem; color: var(--clr-text-muted); }
.pf-arrow {
  font-size: 1rem;
  color: var(--clr-accent);
  transform: translateX(0);
  transition: transform var(--dur-fast) var(--ease-out);
}
.portfolio-item:hover .pf-arrow,
.portfolio-item.active .pf-arrow { transform: translateX(4px); }


/* \"\"\" CONTACT \"\"\" */
.contact { background: var(--clr-surface); padding: 4rem 0; }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 2.5rem; /* Reduced from 3rem */
  align-items: stretch;
}

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

.contact-intro {
  font-size: .95rem;
  color: var(--clr-text-muted);
  line-height: 1.75;
  margin-bottom: 1.5rem;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: auto;
}
.contact-detail {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.cd-icon {
  font-size: 1.2rem;
  width: 44px; height: 44px;
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contact-detail strong { display: block; font-size: .85rem; font-weight: 700; color: var(--clr-primary); margin-bottom: .25rem; }
.contact-detail a { display: block; font-size: .82rem; color: var(--clr-accent); }
.contact-detail a:hover { text-decoration: underline; }
.contact-detail span { font-size: .82rem; color: var(--clr-text-muted); }

.contact-social { display: flex; gap: .75rem; }
.social-link {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--clr-border);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--dur-fast) var(--ease-out);
}
.social-link svg { width: 16px; height: 16px; stroke: var(--clr-text-muted); transition: stroke var(--dur-fast); }
.social-link:hover { border-color: var(--clr-primary); background: var(--clr-primary); }
.social-link:hover svg { stroke: #fff; }

/* FORM */
.contact-form-wrap {
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
}

.contact-form { display: flex; flex-direction: column; gap: 1.25rem; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }

.form-group { display: flex; flex-direction: column; gap: .45rem; }
.form-group label { font-size: .8rem; font-weight: 600; color: var(--clr-text-muted); letter-spacing: .04em; }

.form-group input,
.form-group select,
.form-group textarea {
  padding: .85rem 1rem;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: .9rem;
  color: var(--clr-text);
  background: var(--clr-surface);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.form-group select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a5a6b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 16px; padding-right: 2.5rem; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--clr-primary); box-shadow: 0 0 0 3px rgba(26,46,68,.08); }
.form-group input.error,
.form-group textarea.error { border-color: #e53935; }

.form-error { font-size: .75rem; color: #e53935; min-height: 1.1em; }

.form-success {
  display: none;
  align-items: center;
  gap: .5rem;
  background: #f0faf4;
  border: 1px solid #a8e4bc;
  color: #2e7d52;
  border-radius: var(--radius-md);
  padding: .9rem 1.2rem;
  font-size: .875rem;
  font-weight: 500;
}
.form-success.visible { display: flex; }

/* \"\"\" FOOTER \"\"\" */
.footer {
  position: relative;
  background: #0a1017; /* Deeper premium dark */
  padding: 4rem 0 2rem;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.7);
}

.footer-glow {
  position: absolute;
  top: 0; right: 20%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(181,36,106,.05) 0%, transparent 60%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  transform: translateY(-50%);
}

.footer-inner {
  position: relative;
  z-index: 1;
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1.2fr 1.5fr;
  gap: 3rem;
  padding-bottom: 3rem;
}

.footer-brand .footer-logo {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
}
.logo-img--footer {
  height: 52px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
  /* Invert/brighten on dark footer background */
  filter: brightness(1.15) drop-shadow(0 1px 4px rgba(0,0,0,0.25));
}
.footer-tagline { 
  font-size: .95rem; 
  color: rgba(255,255,255,.65); 
  line-height: 1.7; 
}

.footer-links-col h4,
.footer-contact-col h4 { 
  font-size: .75rem; 
  font-weight: 700; 
  letter-spacing: .12em; 
  text-transform: uppercase; 
  color: var(--clr-accent); 
  margin-bottom: 1.5rem; 
}

.footer-links-col ul { display: flex; flex-direction: column; gap: 0.65rem; }
.footer-links-col a {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-size: .9rem;
  color: rgba(255,255,255,.75);
  transition: all var(--dur-fast) var(--ease-out);
}
.footer-links-col .f-arrow {
  display: none;
}
.footer-links-col a:hover { 
  color: #fff; 
  transform: translateX(4px);
}

.footer-contact-col { display: flex; flex-direction: column; gap: 1rem; }
.footer-mail {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .95rem;
  color: rgba(255,255,255,.8);
  transition: color var(--dur-fast);
}
.footer-mail svg {
  width: 18px; height: 18px;
  stroke: var(--clr-accent);
  transition: transform var(--dur-fast);
}
.footer-mail:hover { color: #fff; }
.footer-mail:hover svg { transform: scale(1.1); }

.footer-offices {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem; 
  color: rgba(255,255,255,.6); 
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.1);
}
.office-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #50c878;
  box-shadow: 0 0 0 2px rgba(80,200,120,.2);
  flex-shrink: 0;
}

.footer-line {
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.02) 100%);
  margin-bottom: 2rem;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .85rem;
  color: rgba(255,255,255,.55);
}

.footer-social {
  display: flex;
  gap: 1rem;
}
.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.75);
  transition: all var(--dur-fast) var(--ease-out);
}
.footer-social svg { width: 16px; height: 16px; transition: stroke var(--dur-fast); }
.footer-social a:hover {
  background: var(--clr-accent);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(181,36,106,.3);
}

/* Responsive Footer */
@media (max-width: 992px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 3rem; }
}
@media (max-width: 576px) {
  .footer-top { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-bottom { flex-direction: column; gap: 1.5rem; text-align: center; }
  .footer-social { justify-content: center; }
}

/* \"\"\" BACK TO TOP \"\"\" */
.back-top {
  position: fixed;
  bottom: 2rem; right: 2rem;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--clr-primary);
  color: #fff;
  font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 30px rgba(26,46,68,0.4);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
}
.back-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-top:hover { 
  background: var(--clr-accent); 
  transform: translateY(-8px) scale(1.1);
  box-shadow: 0 15px 40px rgba(181,36,106,0.5);
}

/* \"\"\" ANIMATIONS \"\"\" */
@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  to { opacity: 1; }
}

/* Intersection observer fade-in classes */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.reveal-left.revealed { opacity: 1; transform: translateX(0); }
.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.reveal-right.revealed { opacity: 1; transform: translateX(0); }

/* Stagger delay utilities */
.delay-1 { transition-delay: .1s !important; }
.delay-2 { transition-delay: .2s !important; }
.delay-3 { transition-delay: .3s !important; }
.delay-4 { transition-delay: .4s !important; }
.delay-5 { transition-delay: .5s !important; }
.delay-6 { transition-delay: .6s !important; }

/* 3D card tilt */
.tilt-card { transform-style: preserve-3d; }

/* \"\"\" RESPONSIVE \"\"\" */
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .about-grid, .contact-grid { gap: 3rem; }
  .portfolio-showcase { gap: 2rem; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 768px) {
  .section { padding: 4rem 0; }
  .container { padding: 0 1.25rem; }

  /* Nav */
  .nav-links {
    position: fixed;
    top: 0; right: -100%;
    width: min(320px, 80vw);
    height: 100vh;
    background: #fff;
    flex-direction: column;
    align-items: flex-start;
    padding: 5rem 2rem 2rem;
    gap: .5rem;
    box-shadow: -8px 0 40px rgba(26,46,68,.15);
    transition: right var(--dur-med) var(--ease-out);
    z-index: 999;
  }
  .nav-links.open { right: 0; }
  .nav-link { color: var(--clr-text-muted) !important; font-size: 1rem; width: 100%; padding: .75rem 1rem; border-radius: var(--radius-md); }
  .nav-cta { display: none; }
  .hamburger { display: flex; z-index: 1000; }

  /* Hero */


  /* About */
  .about-grid { grid-template-columns: 1fr; }
  .about-pillars { grid-template-columns: 1fr; }
  .floating-card { right: 1rem; bottom: 1rem; }

  /* Services */
  .services-grid { grid-template-columns: 1fr; }

  /* Portfolio */
  .portfolio-showcase { grid-template-columns: 1fr; }
  .portfolio-main { position: relative; top: unset; }


  /* Contact */
  .contact-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }

  /* Footer */
  .footer-top { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; gap: .5rem; text-align: center; }

  .section-title { font-size: clamp(1.7rem, 6vw, 2.4rem); }
}

@media (max-width: 480px) {
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .contact-form-wrap { padding: 1.5rem; }
  .hero-title { font-size: clamp(2rem, 10vw, 2.6rem); }
  .hero-accent { white-space: normal; } /* Allow wrap on very small screens to prevent overflow */

  /* Responsive logo sizing */
  .logo-img { height: 32px; max-width: 140px; }
  .logo-img--footer { height: 44px; max-width: 200px; }
}


/* \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 
   SECTION CTA ROWS (After About & Portfolio)
   \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022  */
.section-cta-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.section-cta-row--center {
  justify-content: center;
  text-align: center;
  margin-top: 2.5rem;
  flex-direction: column;
  gap: .75rem;
}

.section-cta-note {
  font-size: .78rem;
  font-weight: 400;
  color: var(--clr-text-light);
  letter-spacing: .01em;
}

/* \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 
   STICKY MOBILE CTA BAR
   \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022 \2022  */
.sticky-mobile-cta {
  display: none; /* Hidden by default on desktop */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
  padding: .75rem 1.25rem;
  padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(181, 36, 106, .15);
  box-shadow: 0 -4px 24px rgba(26, 46, 68, .10);
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}

.sticky-mobile-cta.is-visible {
  transform: translateY(0);
}

.sticky-mobile-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 100%;
  padding: .85rem 1.5rem;
  background: linear-gradient(135deg, var(--clr-primary) 0%, #2c4a6e 100%);
  color: #fff;
  font-size: .92rem;
  font-weight: 700;
  border-radius: var(--radius-md);
  letter-spacing: .02em;
  text-decoration: none;
  transition: opacity .2s, transform .2s;
  box-shadow: 0 4px 16px rgba(26, 46, 68, .3);
}

.sticky-mobile-cta-btn:hover,
.sticky-mobile-cta-btn:active {
  opacity: .92;
  transform: scale(.99);
}

.sticky-cta-icon {
  font-size: 1rem;
}

.sticky-cta-arrow {
  margin-left: auto;
  opacity: .7;
}

/* Show sticky CTA on mobile only */
@media (max-width: 768px) {
  .sticky-mobile-cta {
    display: block;
  }

  /* Prevent sticky CTA overlapping back-to-top */
  .back-top {
    bottom: 5rem;
  }

  .section-cta-row {
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
  }
}