/* Theme: Modern Colorful — non-destructive overrides
   This stylesheet supplements existing styles with a vibrant, modern palette
   and subtle UI refinements. Loaded after other CSS to override defaults.
*/
:root{
  --bg: #fffdf8;
  --surface: #ffffff;
  --muted: #6b7280;
  --ink: #0b1220;
  --glass: rgba(255,255,255,0.6);
  --primary-1: #FF6B35; /* warm coral */
  --primary-2: #FFB86B; /* warm gold */
  --accent-1: #06B6A4;  /* teal */
  --accent-2: #7C3AED;  /* purple */
  --card-shadow: 0 18px 40px rgba(12,16,23,0.08);
  --soft-shadow: 0 8px 24px rgba(12,16,23,0.06);
  --radius: 14px;
}

/* Global overrides */
body.theme-modern{ background: linear-gradient(180deg, #fffefc 0%, #fff9f1 100%); color:var(--ink); }
a{ color: var(--primary-1); text-decoration: none; }
a:hover{ color: var(--accent-2); }

.container{ max-width:1280px; margin:0 auto; padding:0 20px; }

/* Header — bold red with animated dynamic accents */
.site-header{ position:sticky; top:0; z-index:60; overflow:hidden; background: linear-gradient(90deg, #ff3b30 0%, #ff6b35 50%, #ff8a3d 100%); border-bottom: none; box-shadow: 0 8px 30px rgba(12,18,28,0.12); color:#fff; }
.site-header::before{ content:""; position:absolute; inset:0; background:
  radial-gradient(circle at 10% 20%, rgba(255,255,255,0.08), transparent 8%),
  radial-gradient(circle at 85% 80%, rgba(255,255,255,0.06), transparent 10%),
  linear-gradient(90deg, rgba(124,58,237,0.04), rgba(6,182,164,0.03));
  mix-blend-mode: overlay; opacity:0.9; transform: translateX(-6%); animation: header-animate 14s linear infinite; pointer-events:none;
}
.site-header .container{ position:relative; z-index:2; }
.site-header .brand img{ height:56px; transition:transform .28s ease, filter .28s ease; filter: drop-shadow(0 8px 30px rgba(255,107,53,0.12)); }
.site-header .brand img:hover{ transform:translateY(-2px) scale(1.02); }
.main-nav a{ color: #ffffff; border-radius:10px; padding:10px 14px; transition:all .18s ease; position:relative; z-index:4; font-weight:700; letter-spacing:0.02em; text-shadow: 0 2px 12px rgba(0,0,0,0.35); }
.main-nav a.is-active{ color:#fff; background: rgba(255,255,255,0.08); box-shadow: inset 0 -4px 0 rgba(255,255,255,0.06); }
.main-nav a:hover{ color: #fff; transform:translateY(-1px); }

/* Ensure header overlay does not obscure interactive content */
.site-header::before{ z-index:1; }
.site-header .container{ z-index:3; }

/* Mobile menu: ensure contrast when modern.css forces a white background */
@media (max-width:900px){
  .main-nav{ background: linear-gradient(90deg, #ff3b30, #ff6b35) !important; color:#fff !important; }
  .main-nav ul{ padding:20px; }
  .main-nav a{ color:#fff !important; }
  .nav-toggle{ color:#fff !important; }
}
.nav-toggle{ color:#fff; }

@keyframes header-animate { 0%{ transform: translateX(-10%) scale(1); } 50%{ transform: translateX(8%) scale(1.03); } 100%{ transform: translateX(-10%) scale(1); } }

.site-header, .site-header * { color: #fff !important; }
.site-header .main-nav a{ color:#fff !important; border-radius:10px; padding:10px 14px; transition:all .18s ease; font-weight:700; }
.site-header .main-nav a.is-active{ color:#fff !important; background: rgba(255,255,255,0.08); box-shadow: inset 0 -4px 0 rgba(255,255,255,0.06); }
.site-header .main-nav a:hover{ color:#fff !important; transform:translateY(-1px); }

/* Hero enhancements */
.hero-media{ border-radius:18px; overflow:hidden; box-shadow: var(--card-shadow); border: 1px solid rgba(12,18,28,0.04); }
.hero-slide.is-active{ filter: saturate(1.06) contrast(1.03); transform: scale(1.02); transition: transform .9s cubic-bezier(.2,.9,.2,1), opacity .9s ease; }
.hero-dots{ background: linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0.35)); border-radius:999px; padding:8px; backdrop-filter: blur(6px); }

.hero-title{ color:var(--ink); text-shadow: 0 6px 30px rgba(12,16,24,0.04); }
.hero-sub{ color:var(--muted); }

/* Buttons */
.btn-primary{ background: linear-gradient(90deg, var(--primary-1), var(--primary-2)); color:#fff; border:none; box-shadow: 0 14px 40px rgba(255,107,53,0.12); }
.btn-outline{ border:1px solid rgba(12,18,28,0.06); background: transparent; color:var(--ink); }
.btn{ padding:12px 20px; border-radius:12px; font-weight:700; }

/* Product cards — colorful accents */
.product-card{ border-radius:16px; overflow:hidden; border:1px solid rgba(12,18,28,0.04); transition: transform .32s ease, box-shadow .32s ease; background: linear-gradient(180deg,#fff,#fffefc); }
.product-card:hover{ transform:translateY(-8px); box-shadow: var(--soft-shadow); }
.product-spec{ background: linear-gradient(90deg, rgba(255,184,107,0.12), rgba(6,182,164,0.04)); color:var(--accent-1); }

/* Ledger chips */
.ledger-item{ background: linear-gradient(90deg,#FFF8F3,#FFFDF9); border-radius:999px; padding:10px 18px; border: 1px solid rgba(12,18,28,0.04); color:var(--ink); }

/* CTA band — punchy gradient */
.cta-band{ background: linear-gradient(90deg, var(--accent-2), var(--primary-1)); color:#fff; border-radius:14px; padding:28px; box-shadow: 0 12px 36px rgba(124,58,237,0.10); }
.cta-band a.btn-primary{ background: rgba(255,255,255,0.12); color:#fff; box-shadow:none; }

/* Grid tweaks */
.grid-3{ gap:22px; }
.product-media{ border-bottom: 1px solid rgba(12,18,28,0.03); }

/* Gallery */
.gallery-item{ border-radius:14px; overflow:hidden; box-shadow: var(--soft-shadow); }
.gallery-caption{ background: linear-gradient(90deg, rgba(0,0,0,0.45), rgba(0,0,0,0.15)); }

/* Contact */
.contact-card{ background: linear-gradient(180deg,#FFFFFF,#FFFBF6); border-radius:12px; box-shadow: var(--soft-shadow); }
.contact-row .icon{ background: linear-gradient(180deg, rgba(124,58,237,0.12), rgba(6,182,164,0.06)); color:var(--accent-2); }

/* Footer — lighter and friendlier */
.site-footer{ background: linear-gradient(180deg,#0F1720,#0B1220); color:#DDE6F5; }
.footer-top{ gap:22px; }
.footer-brand p{ color:#C7D6E8; }
.footer-col a{ color:#E6EEF8; }

/* Accessibility */
:focus{ outline: 3px solid rgba(124,58,237,0.15); outline-offset:3px; }

/* Small screen adjustments preserved from modern.css but refined */
@media (max-width:640px){ .container{ padding:0 14px; } .brand img{ height:48px; } .hero-media{ min-height:240px; } }

/* Subtle animations */
.reveal{ transform: translateY(8px); opacity:0; transition: transform .6s ease, opacity .6s ease; }
.reveal.is-visible{ transform:none; opacity:1; }