/* ===== Click Plus — merged theme-aware custom-pro.css =====
   Cleaned, deduped and improved for dark/light toggle compatibility.
   Replace entire assets/css/custom-pro.css with this file.
*/

/* -------------------------
   Core variables (light / default)
   ------------------------- */
:root{
  --bg: #ffffff;
  --bg-gradient: linear-gradient(180deg,#f9fbfd 0%, #eaf4f5 100%);
  --surface: #ffffff;
  --text: #243b3b;
  --muted: #556b6b;
  --teal: #0ea99a;
  --deep: #005f73;
  --accent: #00d4ff;
  --card: #ffffff;
  --card-shadow: rgba(0,0,0,0.08);
  --brand-accent: var(--teal);
  --transition-fast: 0.22s;

  /* hero image - change version to bust cache when updating image file */
  --hero-bg-url: "assets/hero-bg.png?v=3";
}

/* -------------------------
   Dark theme variables
   ------------------------- */
:root[data-theme="dark"]{
  --bg: #071018;
  --bg-gradient: var(--bg);
  --surface: #0b1a1d;
  --text: #dff6f5;
  --muted: #a7c9c8;
  --teal: #0ea99a; /* keep brand teal consistent */
  --deep: #002a33;
  --accent: #00d4ff;
  --card: #0b1a1d;
  --card-shadow: rgba(0,0,0,0.6);
}

/* -------------------------
   THEME SWITCH (centralized style)
   ------------------------- */
/* keep this here so switch styling is part of main stylesheet */
.cp-theme-switch, #themeSwitch, #darkToggle {
  position: fixed;
  left: 18px;
  bottom: 90px;
  z-index: 1100;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 34px;
  padding: 4px;
  border-radius: 999px;
  background: var(--cp-switch-bg, #ffffff);
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
  border: 1px solid rgba(0,0,0,0.06);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.cp-theme-switch:active, #themeSwitch:active, #darkToggle:active { transform: scale(.98); }
.cp-theme-switch:focus, #themeSwitch:focus, #darkToggle:focus { outline: 3px solid rgba(21,156,228,0.18); outline-offset: 2px; }

/* inner knob */
.cp-theme-switch__knob {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: var(--cp-knob-bg, #111);
  color: var(--cp-knob-color, #fff);
  border-radius: 50%;
  transition: transform .22s cubic-bezier(.2,.9,.2,1), background .18s ease;
  transform: translateX(0);
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
  font-size: 14px;
  line-height: 1;
}

/* container for icons (for cross-fade) */
.cp-theme-switch__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  display: inline-block;
  opacity: 1;
  transition: opacity .18s linear, transform .18s cubic-bezier(.2,.9,.2,1);
  pointer-events: none;
}

/* state: light (knob on left shows moon) */
.cp-theme-switch[aria-pressed="false"] {
  background: var(--cp-switch-bg-light, #fff);
}
.cp-theme-switch[aria-pressed="false"] .cp-theme-switch__knob {
  transform: translateX(0);
  background: var(--cp-knob-bg-light, #111);
}

/* state: dark (knob slides right and shows sun) */
.cp-theme-switch[aria-pressed="true"] {
  background: var(--cp-switch-bg-dark, #222);
  border-color: rgba(255,255,255,0.06);
}
.cp-theme-switch[aria-pressed="true"] .cp-theme-switch__knob {
  transform: translateX(22px);
  background: var(--cp-knob-bg-dark, #ffd54f);
  color: #111;
}

/* icon visibility toggles */
.cp-theme-switch__icon--moon { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.cp-theme-switch[aria-pressed="true"] .cp-theme-switch__icon--moon { opacity: 0; transform: translate(-50%,-50%) scale(.8); }
.cp-theme-switch__icon--sun { opacity: 0; transform: translate(-50%,-50%) scale(.8); }
.cp-theme-switch[aria-pressed="true"] .cp-theme-switch__icon--sun { opacity: 1; transform: translate(-50%,-50%) scale(1); }

/* small-screen tweak - avoid overlapping mobile UI */
@media (max-width: 540px) {
  .cp-theme-switch { left: 12px; bottom: 82px; width: 52px; height: 32px; }
  .cp-theme-switch__knob { width: 24px; height: 24px; }
}

/* -------------------------
   Global application
   ------------------------- */
html, body{
  background: var(--bg-gradient);
  color: var(--text);
  transition: background-color 220ms ease, color 220ms ease, background 220ms ease;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-text-size-adjust:100%;
  -ms-text-size-adjust:100%;
}

/* Surfaces and common elements */
.header-sticky, .navbar, .card, .section, .footer, .feature-box, .team-card{
  background-color: var(--surface);
  color: var(--text);
  box-shadow: 0 4px 18px var(--card-shadow);
  transition: background var(--transition-fast) ease, color var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
}

/* Links, buttons and accents */
a, .btn, .btn-cta { color: var(--accent); }
.muted, .small { color: var(--muted); }

/* Headings & text (override library defaults) */
h1,h2,h3,h4,h5,h6,p,li,span,button { color: var(--text) !important; }

/* Icons inherit theme color */
svg, .icon { fill: currentColor; color: inherit; }

/* Toggle button look (legacy id updated to themeSwitch for compatibility) */
#themeSwitch {
  min-width: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  border: 0;
  padding: .35rem .6rem;
  border-radius: .35rem;
}

/* -------------------------
   Logo / Brand (CP+) adjustments
   ------------------------- */
.logo-img{
  height: 44px;
  margin-right: 10px;
  transition: height 180ms ease, transform 180ms ease;
}

.brand-text > div {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 10px;
  background: rgba(14,169,154,0.08);
  box-shadow: 0 6px 18px rgba(2,18,18,0.04);
  transition: background 220ms ease, transform 150ms ease, box-shadow 150ms ease;
  min-width: 120px;
  justify-content: center;
}

.brand-click,
.brand-plus {
  font-weight: 900;
  font-size: 1.05rem;
  line-height: 1;
  display: inline-block;
}

.brand-click{ color: var(--deep); }
.brand-plus{ color: var(--teal); }

.brand-sub{ display:block; font-size:.85rem; color:var(--muted); margin-top:4px; }

.brand-text > div:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(2,18,18,0.06);
}

/* Dark mode adjustments for brand */
:root[data-theme="dark"] .brand-text > div {
  background: rgba(255,255,255,0.02);
  box-shadow: 0 6px 18px rgba(0,0,0,0.6);
}
:root[data-theme="dark"] .brand-click { color: var(--text); }
:root[data-theme="dark"] .brand-plus  { color: var(--accent); }

/* -------------------------
   Original layout rules (kept and tuned)
   ------------------------- */
.header-sticky .navbar{
  transition: all .28s ease;
  background: rgba(255,255,255,0.92);
  border-radius:10px;
  box-shadow:0 6px 18px rgba(2,18,18,0.04);
}
.header-sticky.scrolled .navbar{
  padding-top:6px;
  padding-bottom:6px;
  box-shadow:0 10px 30px rgba(2,18,18,0.07);
  transform: translateY(-2px);
}

/* Hero & typography (FORCE PNG hero background with cache-bust) */
.hero-section{
  padding: 60px 0;
  background-image: url(var(--hero-bg-url));
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  /* subtle gradient overlay sits above image via pseudo element if needed */
  position: relative;
  overflow: hidden;
}
.hero-section::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(14,169,154,0.04), rgba(255,255,255,0.00));
  mix-blend-mode: normal;
  z-index: 0;
}
.hero-section > * { position: relative; z-index: 1; }

.hero-title{ font-size: clamp(30px, 4vw, 48px); line-height:1.02; font-weight:800; color: #072f33; }
.hero-sub{ font-size:18px; color:var(--muted); display:inline-block; margin-left:8px; }
.hero-lead{ color:var(--muted); max-width:720px; }

/* Buttons (light mode defaults) */
.btn-primary{ background: linear-gradient(90deg,var(--teal),var(--deep)); border:0; transition:transform .12s ease; color: #042827; }
.btn-primary:hover{ transform: translateY(-3px); box-shadow:0 18px 40px rgba(14,169,154,0.14); }
.btn-cta{ background:var(--teal); color:#042827; padding:.55rem .9rem; border-radius:.5rem; }

/* Floating CTA */
.floating-cta{
  position: fixed; right:22px; bottom:160px; width:56px; height:56px;
  background: linear-gradient(180deg,var(--teal),var(--deep));
  color:#042827; border-radius:12px; z-index:1200;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 18px 40px rgba(14,169,154,0.18);
}

/* Sections & cards */
.section{ padding:48px 0; z-index: 0; }
.section-light{ background:#ffffff; border-top:1px solid #eef7f6; }

.service-card{ border:0; border-radius:12px; transition: transform .22s ease, box-shadow .22s ease; }
.service-card:hover{ transform: translateY(-8px); box-shadow:0 30px 80px rgba(6,41,37,0.06); border-left:4px solid var(--teal); }
.icon-wrap{ width:60px; height:60px; display:flex; align-items:center; justify-content:center; background:#f0fbfb; border-radius:10px; color:var(--teal); font-size:24px; }

.feature-box{ padding:18px; border-radius:10px; background:#ffffff; border:1px solid #eef7f6; min-height:120px; }
.feature-icon{ font-size:28px; color:var(--teal); }

.team-card{ background:#ffffff; padding:12px; border-radius:10px; border:1px solid #eef7f6; }
.team-photo{ width:96px; height:96px; object-fit:cover; border-radius:8px; background:#eef7f6; }

.section-customers{ padding:40px 0; background:#f8fbfb; border-top:1px solid #e6f7f6; }
.customer-logo{ max-width:160px; opacity:.85; filter:grayscale(100%); transition:all .2s ease; }
.customer-logo:hover{ opacity:1; filter:none; transform:scale(1.02); }

.footer{ background: linear-gradient(90deg,var(--teal),var(--deep)); color:#042827; padding: 40px 0; }

/* AOS tweaks and animations */
.inview{ opacity:1; transform:none; transition: all .6s cubic-bezier(.2,.9,.3,1); }
.section, .service-card, .feature-box, .team-card{ opacity:0; transform: translateY(18px); }

/* Mobile UI polish */
@media (max-width: 768px){
  .hero-section{ padding: 28px 0; }
  .hero-title{ font-size: 24px; }
  .hero-lead{ font-size: 15px; }
  .btn-lg { padding: 12px 18px; font-size: 15px; }
  .service-card{ margin-bottom: 12px; }
  .team-photo{ width:80px;height:80px; }
  .section{ padding:32px 0; }
}
@media (max-width: 576px){
  .btn-lg{ padding: 14px 20px; font-size:16px; border-radius:10px; }
  .navbar .nav-link{ padding: .6rem .5rem; }
}

/* AOS default */
[data-aos]{ opacity:0; transform: translateY(12px); transition: all .6s ease; }
[data-aos].aos-animate{ opacity:1; transform:none; }

/* -------------------------
   Converted dark-mode specific rules
   ------------------------- */

/* Apply base dark body & surfaces using variables */
:root[data-theme="dark"] body{
  background: var(--bg);
  color: var(--text);
}

/* surface elements in dark */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .feature-box,
:root[data-theme="dark"] .team-card {
  background: var(--card);
  color: var(--text);
  border-color: rgba(255,255,255,0.04);
}

/* hero tweaks for dark */
:root[data-theme="dark"] .hero-section{
  background: linear-gradient(180deg, rgba(0,212,255,0.03), rgba(0,0,0,0.02));
  /* keep image overlay subtle in dark */
}
:root[data-theme="dark"] .hero-title{ color: var(--text); }
:root[data-theme="dark"] .hero-sub, :root[data-theme="dark"] .hero-lead { color: var(--muted); }

/* icons, icon-wrap and backgrounds in dark */
:root[data-theme="dark"] .icon-wrap{ background: rgba(255,255,255,0.02); color: var(--teal); }
:root[data-theme="dark"] .floating-cta{ background: linear-gradient(180deg,var(--teal),var(--deep)); color: #042827; }

/* navbar / header in dark */
:root[data-theme="dark"] .header-sticky .navbar{ background: rgba(11,26,29,0.46); box-shadow: 0 8px 30px rgba(0,0,0,0.6); }
:root[data-theme="dark"] .navbar .nav-link{ color: var(--text) !important; }

/* footer in dark */
:root[data-theme="dark"] .footer{
  background: linear-gradient(90deg, rgba(0,212,255,0.06), rgba(0,212,255,0.03));
  color: var(--text);
}

/* customer logos in dark */
:root[data-theme="dark"] .customer-logo{ filter:grayscale(20%); opacity: .9; }

/* svg / icon tweaks in dark */
:root[data-theme="dark"] svg, :root[data-theme="dark"] svg *, :root[data-theme="dark"] .icon {
  fill: currentColor !important;
  color: var(--text) !important;
}

/* Inline-styles fallback: override inline color declarations in dark mode */
:root[data-theme="dark"] [style*="color: #"],
:root[data-theme="dark"] [style*="color:#"] {
  color: var(--text) !important;
}

/* Strong dark overrides for common elements */
:root[data-theme="dark"] .navbar .nav-link,
:root[data-theme="dark"] .brand-text,
:root[data-theme="dark"] .brand-sub,
:root[data-theme="dark"] a,
:root[data-theme="dark"] p,
:root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3,
:root[data-theme="dark"] h4, :root[data-theme="dark"] h5, :root[data-theme="dark"] h6 {
  color: var(--text) !important;
}

/* =========================================================
   DARK MODE VISIBILITY FIXES — Click Plus (final patch)
   Ensures all text/buttons remain readable in dark mode
   ========================================================= */

/* Global dark-mode hint */
:root[data-theme="dark"] { color-scheme: dark; }

/* General text override (covers inline styles/text-dark classes too) */
:root[data-theme="dark"] [style*="color: #"],
:root[data-theme="dark"] [style*="color:#"],
:root[data-theme="dark"] [class*="text-dark"],
:root[data-theme="dark"] h1, 
:root[data-theme="dark"] h2, 
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4, 
:root[data-theme="dark"] h5, 
:root[data-theme="dark"] h6,
:root[data-theme="dark"] p,
:root[data-theme="dark"] span,
:root[data-theme="dark"] li,
:root[data-theme="dark"] a,
:root[data-theme="dark"] button,
:root[data-theme="dark"] small {
  color: var(--text) !important;
  fill: var(--text) !important;
}

/* Brand-colored buttons for dark mode (teal tone) */
:root[data-theme="dark"] .btn,
:root[data-theme="dark"] .btn-cta,
:root[data-theme="dark"] #themeSwitch,
:root[data-theme="dark"] #darkToggle,
:root[data-theme="dark"] .cp-theme-switch {
  background: linear-gradient(90deg, var(--teal), var(--deep)) !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 600;
  transition: all 0.2s ease;
}

:root[data-theme="dark"] .btn:hover,
:root[data-theme="dark"] .btn-cta:hover,
:root[data-theme="dark"] #themeSwitch:hover,
:root[data-theme="dark"] #darkToggle:hover,
:root[data-theme="dark"] .cp-theme-switch:hover {
  background: linear-gradient(90deg, var(--deep), var(--teal)) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
}

/* Ensure nav links and footer text are visible */
:root[data-theme="dark"] .navbar .nav-link,
:root[data-theme="dark"] .footer,
:root[data-theme="dark"] .footer p,
:root[data-theme="dark"] .footer small {
  color: var(--text) !important;
}

/* Fix inputs / placeholders if used */
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea {
  background: var(--surface);
  color: var(--text);
  border-color: rgba(255,255,255,0.1);
}
:root[data-theme="dark"] ::placeholder {
  color: var(--muted);
  opacity: 0.8;
}

/* Ensure cards, service boxes etc. have readable text */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .service-card,
:root[data-theme="dark"] .feature-box,
:root[data-theme="dark"] .team-card {
  background: var(--surface);
  color: var(--text);
  border-color: rgba(255,255,255,0.04);
}

/* Fix for hero titles and muted text */
:root[data-theme="dark"] .hero-title,
:root[data-theme="dark"] .hero-sub,
:root[data-theme="dark"] .hero-lead,
:root[data-theme="dark"] .muted {
  color: var(--text) !important;
}

/* =========================================================
   Mobile Floating Burger Styles (moved into main CSS)
   ========================================================= */

#mobileBurger {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 1600;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(90deg, var(--teal), var(--deep));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 8px 24px rgba(14, 169, 154, 0.18);
  border: none;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.9);
  transition: all 0.25s ease;
}

#mobileBurger.show {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

#mobileBurger svg {
  width: 24px;
  height: 24px;
}

#mobileBurger.open {
  background: linear-gradient(90deg, var(--deep), var(--teal));
}

@media (min-width: 992px) {
  #mobileBurger {
    display: none !important;
  }
}

/* WhatsApp float (force fixed so image path change doesn't break position) */
.whatsapp-float {
  position: fixed !important;
  right: 18px !important;
  bottom: 90px !important;
  z-index: 1700 !important;
  display: inline-block !important;
  transition: transform .18s ease, opacity .18s ease;
}
.whatsapp-float img { display:block; width:48px; height:48px; border-radius:8px; object-fit:cover; }

/* subtle smooth scroll behavior for anchors */
html{ scroll-behavior: smooth; }

/* Nav underline animation */
.navbar .nav-link{ position: relative; transition: color .18s ease; }
.navbar .nav-link::after{ content:""; position:absolute; left:50%; transform:translateX(-50%) scaleX(0); bottom:-6px; height:3px; width:60%; background:linear-gradient(90deg,var(--teal),var(--deep)); border-radius:4px; transform-origin:center; transition: transform .22s cubic-bezier(.2,.9,.3,1); }
.navbar .nav-link:hover::after, .navbar .nav-link.active::after{ transform: translateX(-50%) scaleX(1); }

/* Button micro-interactions */
.btn{ transition: transform .12s cubic-bezier(.2,.9,.3,1), box-shadow .12s ease; }
.btn:hover{ transform: translateY(-3px); }
.btn:active{ transform: translateY(-1px) scale(.995); }

/* Modal contact custom */
.modal-content{ border-radius:12px; box-shadow:0 30px 80px rgba(2,18,18,0.08); }
.modal-header{ border-bottom:0; }
.modal-footer{ border-top:0; }
.modal-backdrop.show { opacity: 0.35; }

/* Focus outline for accessibility */
a:focus, button:focus, input:focus, textarea:focus { outline: 3px solid rgba(14,169,154,0.12); outline-offset:2px; border-radius:6px; }

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* TEMP fix: force show hidden sections (use only if you need it) */
.section, .service-card, .feature-box, .team-card {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
}

/* ===== Dark-mode: force visible fixes for About / Why sections ===== */
:root[data-theme="dark"] #about,
:root[data-theme="dark"] #why,
:root[data-theme="dark"] .about-section,
:root[data-theme="dark"] .why-section,
:root[data-theme="dark"] .brand-text,
:root[data-theme="dark"] .brand-sub,
:root[data-theme="dark"] .section-title,
:root[data-theme="dark"] .section-heading,
:root[data-theme="dark"] .nav-link,
:root[data-theme="dark"] .muted {
  color: var(--text) !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  text-shadow: none !important;
}

/* also ensure any children (headings, spans) inside those sections are visible */
:root[data-theme="dark"] #about * ,
:root[data-theme="dark"] #why * ,
:root[data-theme="dark"] .about-section * ,
:root[data-theme="dark"] .why-section * {
  color: var(--text) !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}

/* small tweak: if some elements use .text-muted class, make them readable in dark */
:root[data-theme="dark"] .text-muted,
:root[data-theme="dark"] .muted {
  color: var(--muted) !important;
  opacity: 1 !important;
}

/* ===== Responsive map / iframe fixes =====
   Paste this at the END of assets/css/custom-pro.css
*/

/* Ideal responsive wrapper using aspect-ratio (modern browsers) */
.map-responsive {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9; /* change to 4/3 or 21/9 if you prefer */
  height: auto;
  overflow: hidden;
  border-radius: 10px;
}

/* Fallback for older browsers: keep padding-bottom technique */
@supports (not (aspect-ratio: 16/9)) {
  .map-responsive {
    height: 0;
    padding-bottom: 56.25%; /* 16:9 */
  }
}

/* Make iframe fully fill wrapper and reflow nicely */
.map-responsive iframe,
.map-responsive embed,
.map-responsive object {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  max-width: 100%;
  transform: none !important; /* override any transform applied */
  will-change: auto; /* avoid persistent gpu transforms */
}

/* Avoid any parent transforms that can create containing-block issues */
.map-responsive * {
  transform: none !important;
}

/* Make sure images/videos/etc are responsive across site */
img, iframe, embed, object, video {
  max-width: 100%;
  height: auto;
}

/* If you used a fixed height on contact map container, allow it to shrink on small screens */
#contact .map-responsive { max-height: 70vh; height: auto; }

/* === Perfect alignment: Theme switch & WhatsApp button === */

/* Desktop: Both buttons aligned horizontally */
.cp-theme-switch {
  bottom: 90px !important;
  left: 18px !important;
}

.whatsapp-float {
  bottom: 90px !important;
  right: 18px !important;
}

/* Mobile screens: lift both slightly to avoid footer overlap */
@media (max-width: 576px) {
  .cp-theme-switch {
    bottom: 110px !important;
    left: 12px !important;
  }
  .whatsapp-float {
    bottom: 110px !important;
    right: 12px !important;
  }
}

/* ===== Hero image smooth fade edges ===== */
.hero-image-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px; /* smooth corner rounding */
}

.hero-image-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,0) 60%, rgba(255,255,255,0.9) 100%);
  pointer-events: none;
  transition: opacity 0.3s ease;
  opacity: 0.2; /* adjust fade strength (0.1 to 0.4) */
}

/* For dark mode, slightly different fade */
:root[data-theme="dark"] .hero-image-card::after {
  background: radial-gradient(circle at center, rgba(7,16,24,0) 60%, rgba(7,16,24,1) 100%);
  opacity: 0.3;
}


/* ===== End of file ===== */