/* Modern Theme Overlay - non-destructive enhancement layer */
/* Uses existing color tokens: --accent-color, --background-color, --surface-color, --text-primary-color, --text-secondary-color */

/* ---------- Base Reset (scoped & safe) ---------- */
:root {
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-heading: 'Poppins', var(--font-sans);
  --radius-xs: 3px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 18px; --radius-pill: 999px;
  --shadow-sm: 0 2px 4px -1px rgba(0,0,0,.25);
  --shadow-md: 0 6px 18px -4px rgba(0,0,0,.35);
  --shadow-lg: 0 10px 38px -10px rgba(0,0,0,.55);
  --grad-accent: linear-gradient(135deg, color-mix(in srgb, var(--accent-color) 85%, #fff) 0%, var(--accent-color) 60%, color-mix(in srgb, var(--accent-color) 70%, #000) 100%);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent-color) 55%, transparent);
  --transition-smooth: .35s cubic-bezier(.4,0,.2,1);
  --content-max: 1180px;
}

html { scroll-behavior: smooth; }
body { font-family: var(--font-sans); text-rendering: optimizeLegibility; }

:where(h1,h2,h3,h4,h5,h6){ font-family: var(--font-heading); font-weight:600; letter-spacing:.5px; }
:where(h1){font-size:clamp(2.3rem,5vw,3rem);} :where(h2){font-size:clamp(1.9rem,3.5vw,2.3rem);} :where(h3){font-size:clamp(1.4rem,2.7vw,1.7rem);} :where(h4){font-size:1.15rem;}

/* Typography refinement */
:where(p,li){line-height:1.65;}
::selection { background: var(--accent-color); color: var(--text-on-accent); }

/* Containers */
.container, .content-wrapper { max-width: var(--content-max); margin-inline:auto; padding-inline:1.2rem; }

/* Utility classes */
.u-muted { color: var(--text-secondary-color)!important; }
.u-center { text-align:center!important; }
.flex { display:flex!important; }
.flex-col { flex-direction:column!important; }
.gap-sm { gap:.5rem!important; } .gap-md { gap:1rem!important; } .gap-lg { gap:2rem!important; }
.mt-lg { margin-top:3rem!important; } .mb-lg { margin-bottom:3rem!important; }

/* Modern buttons */
:where(.btn, button.btn-primary, a.btn-primary){
  --_bg: var(--accent-color); --_fg: var(--text-on-accent);
  position:relative; display:inline-flex; align-items:center; gap:.55rem; font-size:.9rem; letter-spacing:.5px;
  font-weight:600; padding:.75rem 1.35rem; border-radius: var(--radius-pill); border:1px solid var(--accent-color);
  color:var(--_fg); background:var(--_bg); text-decoration:none; line-height:1; overflow:hidden;
  transition: background var(--transition-smooth), transform .4s, box-shadow var(--transition-smooth);
}
:where(.btn-outline){ --_bg:transparent; --_fg:var(--accent-color); background:var(--_bg); color:var(--_fg); }
:where(.btn-outline):hover{ background:color-mix(in srgb, var(--accent-color) 20%, transparent); }
:where(.btn, .btn-outline):hover{ transform:translateY(-2px); box-shadow: var(--shadow-md); }
:where(.btn, .btn-outline):active{ transform:translateY(0); box-shadow: var(--shadow-sm); }
:where(.btn, .btn-outline):focus-visible{ outline:none; box-shadow: var(--focus-ring); }

/* Nav improvements */
#main-header { backdrop-filter: blur(16px); background:linear-gradient(90deg, color-mix(in srgb, var(--background-color) 92%, var(--accent-color)) 0%, color-mix(in srgb, var(--background-color) 85%, var(--accent-color)) 100%); border-bottom:1px solid color-mix(in srgb, var(--accent-color) 15%, transparent); }
#main-header nav ul { gap:1.2rem; display:flex; }
#main-header nav a { position:relative; padding:.35rem .2rem; font-weight:500; letter-spacing:.4px; }
#main-header nav a::after { content:""; position:absolute; left:0; bottom:-4px; height:2px; width:0; background:var(--accent-color); transition:width .35s; border-radius:2px; }
#main-header nav a:hover::after, #main-header nav a:focus-visible::after, #main-header nav a.active::after { width:100%; }

/* Card system */
:where(.service-card, .feature-item, .area-item, .project-card){
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface-color) 94%, var(--accent-color)) 0%, var(--surface-color) 100%);
  border:1px solid color-mix(in srgb, var(--accent-color) 18%, transparent);
  border-radius: var(--radius-lg); padding:1.35rem 1.25rem 1.4rem; position:relative; overflow:hidden;
  transition: transform .55s cubic-bezier(.22,1,.23,1), box-shadow var(--transition-smooth), border-color .4s;
}
:where(.service-card, .feature-item, .area-item, .project-card):hover{
  transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--accent-color) 38%, transparent);
}

/* Subtle gradient ring on hover */
:where(.service-card, .project-card)::before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--accent-color) 20%, transparent), transparent 70%); opacity:0; transition:opacity .6s;}
:where(.service-card, .project-card):hover::before{opacity:1;}

/* Forms */
:where(input, textarea, select){ background:color-mix(in srgb, var(--surface-color) 92%, var(--background-color)); border:1px solid var(--border-color); padding:.75rem .9rem; border-radius: var(--radius-md); font:inherit; color:var(--text-primary-color); transition: border-color var(--transition-smooth), background var(--transition-smooth); }
:where(input, textarea, select):focus{ outline:none; border-color: var(--accent-color); box-shadow: var(--focus-ring); }
:where(textarea){ min-height:160px; resize:vertical; }

/* Tables */
:where(table.modern){ width:100%; border-collapse: collapse; font-size:.92rem; overflow:hidden; border:1px solid var(--border-color); border-radius: var(--radius-md); }
:where(table.modern) thead{ background: color-mix(in srgb, var(--accent-color) 35%, var(--surface-color)); color: var(--text-on-accent); }
:where(table.modern) th, :where(table.modern) td{ padding:.75rem .9rem; border-bottom:1px solid var(--border-color); }
:where(table.modern) tbody tr:hover{ background: color-mix(in srgb, var(--accent-color) 12%, transparent); }

/* Hero refinement */
.service-hero, .hero, .main-hero-banner{ position:relative; }
.service-hero .service-hero-content{ max-width:760px; }
.service-hero h1, .service-hero h2 { font-weight:700; }

/* Footer */
#main-footer { background: linear-gradient(0deg, color-mix(in srgb, var(--background-color) 94%, var(--accent-color)) 0%, var(--background-color) 60%); border-top:1px solid color-mix(in srgb, var(--accent-color) 15%, transparent); }
#main-footer a { opacity:.9; }
#main-footer a:hover { opacity:1; }

/* Animations cleanup */
.reduce-motion * { animation: none !important; transition: none !important; }

/* Accessible focus outlines */
:focus-visible { outline:none; box-shadow: var(--focus-ring); }

/* Dark mode fine-tuning */
body:not(.light-mode) .service-card, body:not(.light-mode) .feature-item, body:not(.light-mode) .project-card { background: linear-gradient(150deg, color-mix(in srgb, var(--surface-color) 85%, #000) 0%, var(--surface-color) 70%); }

/* Light mode subtle elevation */
body.light-mode .service-card, body.light-mode .feature-item, body.light-mode .project-card { box-shadow: 0 4px 18px -6px rgba(0,0,0,.15); }
body.light-mode .service-card:hover { box-shadow: 0 10px 34px -6px rgba(0,0,0,.22); }

/* Grad text utility */
.gradient-text-modern { background: var(--grad-accent); -webkit-background-clip:text; color:transparent; background-clip:text; }

/* Tag / badge */
.badge { display:inline-block; padding:.4rem .75rem; font-size:.65rem; font-weight:600; letter-spacing:.6px; text-transform:uppercase; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--accent-color) 20%, var(--surface-color)); border:1px solid color-mix(in srgb, var(--accent-color) 45%, transparent); }

/* Flex gap fallback */
.no-gap > * + * { margin-left:1rem; }

/* Smooth fade-in for images */
img { opacity:0; transition: opacity .8s ease; }
img[src] { opacity:1; }

/* ---------------------------------------------
   Refined Page Title Banner Heading
   Applies to about / services / gallery / blog / contact
---------------------------------------------- */
.page-title-banner h1 {
  font-size: clamp(2.2rem, 5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .5px;
  margin-bottom: 1rem;
  color: #fff;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
  position: relative;
  padding-inline: .25rem;
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
  font-family: var(--font-heading);
}

body.light-mode .page-title-banner h1 { color: var(--text-primary-color, #222); }

.page-title-banner h1::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -12px;
  width: 72px;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-color), color-mix(in srgb, var(--accent-color) 65%, #ffd680));
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 4px 10px -2px rgba(0,0,0,0.35);
}

.page-title-banner p {
  font-size: clamp(1rem, 1.4vw + .6rem, 1.25rem);
  line-height: 1.5;
  margin-top: .75rem;
  margin-bottom: 1.75rem;
  max-width: 46ch;
}

@media (max-width: 640px) {
  .page-title-banner { padding: 2.75rem 0 2.5rem; }
  .page-title-banner h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); }
  .page-title-banner h1::after { bottom: -10px; }
  .page-title-banner p { margin-bottom: 1.5rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .page-title-banner h1 { opacity: 0; transform: translateY(12px); animation: titleFade .7s ease .05s forwards; }
  .page-title-banner p { opacity: 0; transform: translateY(10px); animation: titleFade .7s ease .15s forwards; }
  .page-title-banner .header-actions { opacity: 0; transform: translateY(8px); animation: titleFade .7s ease .25s forwards; }
  @keyframes titleFade { to { opacity:1; transform: translateY(0); } }
}

.page-title-banner h1[style] {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

/* =============================================
   Glassmorphic Navigation + Smooth Section Gradients
============================================== */
#main-header {
  background: rgba(20,20,22,0.42) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 4px 22px -6px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04) !important;
  transition: background .6s ease, box-shadow .6s ease, border-color .6s ease;
}

#main-header.scrolled {
  background: rgba(18,18,20,0.72) !important;
  box-shadow: 0 6px 30px -10px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.05) !important;
}

body.light-mode #main-header {
  background: rgba(255,255,255,0.55) !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 4px 18px -6px rgba(0,0,0,0.18) !important;
}
body.light-mode #main-header.scrolled { background: rgba(255,255,255,0.75) !important; }

#main-header .container { backdrop-filter: none; }

/* Refined nav link aesthetics */
#main-header nav a {
  color: var(--text-secondary-color);
  font-weight: 500;
  letter-spacing: .4px;
  padding: .55rem .3rem;
  transition: color .35s ease;
}
#main-header nav a.active, #main-header nav a:hover { color: var(--accent-color); }
#main-header nav a::after { height: 2px; border-radius: 2px; }

/* Glass buttons inside header (theme toggle / hamburger) */
#main-header button { background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
body.light-mode #main-header button { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.1); }
#main-header button:hover { background: rgba(255,255,255,0.15); }
body.light-mode #main-header button:hover { background: rgba(0,0,0,0.08); }

/* Smooth Section Gradient Transitions */
section:not(.page-title-banner):not(.main-hero-banner):not(.service-hero), .py-section:not(.page-title-banner):not(.main-hero-banner):not(.service-hero) {
  position: relative;
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--background-color) 96%, var(--accent-color)) 0%,
      color-mix(in srgb, var(--background-color) 92%, #000) 55%,
      color-mix(in srgb, var(--background-color) 98%, var(--accent-color)) 100%);
  transition: background 1s ease;
}

/* Avoid overriding designed dark hero / special sections */
.page-title-banner,
.main-hero-banner,
.service-hero { background-blend-mode: overlay; }

/* Light mode adaptation */
body.light-mode section, body.light-mode .py-section {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--background-color) 100%, #ffffff) 0%,
    color-mix(in srgb, var(--background-color) 96%, var(--accent-color)) 45%,
    color-mix(in srgb, var(--background-color) 100%, #ffffff) 100%);
}

/* Remove duplicate strong gradient artifacts if legacy classes applied */
.bg-surface { background: linear-gradient(145deg, color-mix(in srgb, var(--surface-color) 100%, var(--accent-color)) 0%, var(--surface-color) 100%) !important; }

/* Soft separators between consecutive sections (only when no decorative divider) */
section + section:not(.page-title-banner):not(.no-divider)::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 28px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.18), rgba(0,0,0,0));
  pointer-events: none;
}
body.light-mode section + section:not(.page-title-banner):not(.no-divider)::before {
  background: linear-gradient(to bottom, rgba(0,0,0,0.09), rgba(0,0,0,0));
}

/* Prevent over-dark overlays stacking in dark mode for nested elements */
.glassmorphism-subtle { backdrop-filter: blur(14px) saturate(140%); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); }
body.light-mode .glassmorphism-subtle { background: rgba(255,255,255,0.55); border-color: rgba(0,0,0,0.08); }

/* =====================================================
   Dark Mode Section Seamless Transition Refinement
   Goal: remove harsh banded gradients between sections
         and replace with a unified page backdrop plus
         subtle edge fades so scrolling feels continuous.
===================================================== */
body:not(.light-mode) {
  background: linear-gradient(180deg,#0b0b0d 0%,#101012 28%,#131316 55%,#101012 78%,#0c0c0e 100%) fixed;
  background-attachment: fixed;
}

/* Neutralize earlier per-section heavy gradients in dark mode */
body:not(.light-mode) section:not(.page-title-banner):not(.main-hero-banner):not(.service-hero),
body:not(.light-mode) .py-section:not(.page-title-banner):not(.main-hero-banner):not(.service-hero) {
  background: transparent !important;
  position: relative;
  isolation: isolate; /* keep pseudo elements contained */
}

/* Keep intentional backgrounds for hero / title sections */

/* Subtle glass surface sections retain a gentle tint */
body:not(.light-mode) .bg-surface { background: rgba(255,255,255,0.02) !important; }

/* Edge blending (top + bottom) for regular sections */
body:not(.light-mode) section:not(.page-title-banner):not(.main-hero-banner):not(.service-hero):not(.no-fade)::before,
body:not(.light-mode) section:not(.page-title-banner):not(.main-hero-banner):not(.service-hero):not(.no-fade)::after {
  content: '';
  position: absolute;
  left: 0; width: 100%; pointer-events: none; z-index: -1;
}
body:not(.light-mode) section:not(.page-title-banner):not(.main-hero-banner):not(.service-hero):not(.no-fade)::before { top: 0; height: 70px; background: linear-gradient(to bottom, rgba(0,0,0,0.65), rgba(0,0,0,0)); }
body:not(.light-mode) section:not(.page-title-banner):not(.main-hero-banner):not(.service-hero):not(.no-fade)::after { bottom: 0; height: 70px; background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0)); }

/* Lighter fades for light mode not needed (retain originals) */

@media (max-width: 640px) {
  body:not(.light-mode) section:not(.page-title-banner):not(.main-hero-banner):not(.service-hero):not(.no-fade)::before,
  body:not(.light-mode) section:not(.page-title-banner):not(.main-hero-banner):not(.service-hero):not(.no-fade)::after { height: 50px; }
}

/* Reduced motion: still keep visual continuity without animation dependency */
@media (prefers-reduced-motion: reduce) {
  body:not(.light-mode) { background-attachment: scroll; }
}

/* =====================================================
   Unified Section Flow (Dark + Light)
   - Removes visible banding / harsh transitions
   - Provides consistent padding & subtle separators
===================================================== */
:root {
  --section-y-pad: clamp(3rem, 6vw, 4.25rem);
}

/* Base reset for all content sections (exclude hero/title banners) */
section:not(.page-title-banner):not(.main-hero-banner):not(.service-hero),
.py-section:not(.page-title-banner):not(.main-hero-banner):not(.service-hero) {
  padding-top: var(--section-y-pad);
  padding-bottom: var(--section-y-pad);
  position: relative;
}

/* Light mode uniform surface */
body.light-mode section:not(.page-title-banner):not(.main-hero-banner):not(.service-hero),
body.light-mode .py-section:not(.page-title-banner):not(.main-hero-banner):not(.service-hero) {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
}

/* Dark mode: subtle micro-texture gradient (almost flat) */
body:not(.light-mode) section:not(.page-title-banner):not(.main-hero-banner):not(.service-hero),
body:not(.light-mode) .py-section:not(.page-title-banner):not(.main-hero-banner):not(.service-hero) {
  background: linear-gradient(145deg, #121214 0%, #141416 55%, #121214 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.01);
}

/* Remove earlier fade pseudo-elements that caused banding */
body:not(.light-mode) section:not(.page-title-banner):not(.main-hero-banner):not(.service-hero)::before,
body:not(.light-mode) section:not(.page-title-banner):not(.main-hero-banner):not(.service-hero)::after { content: none !important; }

/* Seamless separators: a soft overlay gradient between adjacent sections */
section + section:not(.page-title-banner):not(.main-hero-banner):not(.service-hero)::before,
.py-section + .py-section:not(.page-title-banner):not(.main-hero-banner):not(.service-hero)::before {
  content: '';
  position: absolute;
  top: -1px; left:0; width:100%; height: 42px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.38), rgba(0,0,0,0));
  pointer-events: none;
}
body.light-mode section + section:not(.page-title-banner):not(.main-hero-banner):not(.service-hero)::before,
body.light-mode .py-section + .py-section:not(.page-title-banner):not(.main-hero-banner):not(.service-hero)::before {
  background: linear-gradient(to bottom, rgba(0,0,0,0.08), rgba(0,0,0,0));
}

/* First real content section after hero: remove top separator */
main > section:not(.page-title-banner):not(.main-hero-banner):not(.service-hero):first-of-type::before { content: none !important; }

/* Optional uniform heading refinement inside sections */
section:not(.page-title-banner) h2.section-title, .py-section h2.section-title {
  position: relative;
  padding-bottom: .6rem;
  margin-bottom: 2.2rem;
}
section:not(.page-title-banner) h2.section-title::after, .py-section h2.section-title::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  height: 3px; width: 70px;
  background: linear-gradient(90deg, var(--accent-color), color-mix(in srgb, var(--accent-color) 65%, #ffd680));
  border-radius: 2px;
  pointer-events: none;
}

@media (max-width: 640px) {
  :root { --section-y-pad: 2.75rem; }
  section:not(.page-title-banner):not(.main-hero-banner):not(.service-hero) h2.section-title { margin-bottom: 1.75rem; }
}

/* Scrollbar (modern browsers) */
*::-webkit-scrollbar { width:10px; }
*::-webkit-scrollbar-track { background: var(--background-color); }
*::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent-color) 45%, var(--surface-color)); border-radius:6px; }
*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--accent-color) 60%, var(--surface-color)); }

/* Responsive tweaks */
@media (max-width:900px){
  #main-header nav ul { gap:.9rem; }
  .service-hero { padding-top:5rem; }
}
@media (max-width:640px){
  :where(h1){font-size:2.1rem;} :where(h2){font-size:1.75rem;} .btn{padding:.65rem 1.1rem;}
  .service-hero{padding:4.5rem 0 2rem;}
}