/* ============================================================
   Emindynamic — Blue & White Theme (Sinemotion-style layout)
   Overrides appended on top of base theme. Light & airy.
   ============================================================ */
:root {
  --bw-hero-1: #eaf2ff;   /* top of hero */
  --bw-hero-2: #d6e6ff;   /* mid */
  --bw-hero-3: #ffffff;   /* bottom */
  --bw-blue: #1e6df2;
  --bw-blue-deep: #0b3f91;
  --bw-ink: #0f1f3d;
  --bw-body: #3d5378;
  --bw-soft: #eef4fe;
}

/* ---------- Topbar: light blue ---------- */
.topbar { background: var(--bw-blue); color: #fff; }
.topbar a { color: rgba(255,255,255,0.95); }
.topbar .lang-switch a.active { color: #fff; border-bottom: 2px solid #fff; }

/* ---------- Navbar: white, blue active ---------- */
.navbar { background: rgba(255,255,255,0.96); border-bottom: 1px solid #e3ecfb; }
.navbar .brand-name { color: var(--bw-ink); }
.navbar .brand-sub { color: var(--bw-blue); }
.nav-links > a { color: var(--bw-ink); }
.nav-links > a:hover, .nav-links > a.active { color: var(--bw-blue); background: var(--bw-soft); }
.brand-logo { background: linear-gradient(135deg, #1e6df2, #0b3f91); }

/* ---------- Hero: photo posters (dark overlay) with light text ---------- */
.hero-slider .slide { background-size: cover; background-position: center; }
.hero-slider .slide-copy h1 { color: #fff; }
.hero-slider .slide-copy h1 span { color: #7ab0ff; }
.hero-slider .hero-eyebrow { color: #7ab0ff; background: rgba(30,109,242,0.18); border: 1px solid rgba(122,176,255,0.35); }
.hero-slider .hero-desc { color: rgba(255,255,255,0.82); }
.hero-slider .slide-arrow { background: rgba(255,255,255,0.16); color: #fff; border: 1px solid rgba(255,255,255,0.3); }
.hero-slider .slide-arrow:hover { background: var(--bw-blue); color: #fff; border-color: var(--bw-blue); }
.slide-dots .dot { background: rgba(255,255,255,0.4); }
.slide-dots .dot.active { background: #fff; }
.hero-slider .btn-outline-light { border-color: rgba(255,255,255,0.75); color: #fff; }
.hero-slider .btn-outline-light:hover { background: #fff; color: var(--bw-blue-deep); }

/* ---------- Sections: alternating white / light blue ---------- */
.section.gray { background: #f2f7ff; }
.section-title { color: var(--bw-ink); }
.section-sub { color: var(--bw-body); }
.section-tag { background: #e3edfd; color: var(--bw-blue); }

/* ---------- Pow cards: white with blue border & top accent ---------- */
.pow-card {
  background: #ffffff;
  border: 1px solid #e0ecfb;
  color: var(--bw-ink);
  min-height: 280px;
  box-shadow: 0 8px 26px rgba(15,63,170,0.06);
}
.pow-card:hover { box-shadow: 0 18px 44px rgba(15,63,170,0.16); }
.pow-card::after { display: none; }
.pow-card h3 { color: var(--bw-ink); }
.pow-card p { color: var(--bw-body); }
.pow-card .pc-ic { background: #e8f0fe; }
.pow-card .pc-ic svg { color: var(--bw-blue); }
.pow-card .more { color: var(--bw-blue); }
/* subtle top gradient accent */
.pow-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, #1e6df2, #6fa8ff);
  border-radius: var(--radius) var(--radius) 0 0;
  z-index: 2;
}

/* ---------- Product cards: light media, blue accent ---------- */
.prod-card { background: #fff; border: 1px solid #e0ecfb; box-shadow: 0 6px 20px rgba(15,63,170,0.05); }
.prod-card .pc-media { background: #f0f6ff; }
.prod-card .pc-media .pc-ic-fallback svg { color: #b9cef0; }
.prod-card .pc-media .model-badge { background: rgba(30,109,242,0.9); }
.prod-card .pc-cat { color: var(--bw-blue); }
.prod-card h3 a { color: var(--bw-ink); }
.prod-card p { color: var(--bw-body); }
.prod-card .pc-tags span { background: #e8f0fe; color: var(--bw-blue); }
.prod-card .pc-media::after { display: none; }

/* ---------- Why cards ---------- */
.why-card { background: #fff; border: 1px solid #e0ecfb; box-shadow: 0 6px 20px rgba(15,63,170,0.05); }
.why-card h3 { color: var(--bw-ink); }
.why-card p { color: var(--bw-body); }
.why-card .w-ic { background: #e8f0fe; }
.why-card .w-ic svg { color: var(--bw-blue); }

/* ---------- App cards ---------- */
.app-card { background: #fff; border: 1px solid #e0ecfb; box-shadow: 0 6px 20px rgba(15,63,170,0.05); }
.app-card::before { background: linear-gradient(90deg, #1e6df2, #6fa8ff); }
.app-card h3 { color: var(--bw-ink); }
.app-card p { color: var(--bw-body); }
.app-card h3 .a-ic { background: #e8f0fe; }
.app-card h3 .a-ic svg { color: var(--bw-blue); }

/* ---------- Stats / media light ---------- */
.stat-card { background: linear-gradient(135deg, #1e6df2, #0b3f91); }
.detail-media { background: #f0f6ff; border-color: #e0ecfb; }
.detail-media::after { display: none; }
.d-ic-fallback svg { color: #b9cef0; }
.rel-media { background: linear-gradient(135deg, #1e6df2, #0b3f91); }
.detail-specs h2, .detail-related h2 { color: var(--bw-ink); }

/* ---------- CTA & Footer keep deep blue as accent ---------- */
.cta-band {
  background: radial-gradient(800px 400px at 80% 0%, rgba(30,109,242,0.35) 0%, transparent 60%), linear-gradient(135deg, #0b3f91 0%, #1e6df2 100%);
}
.footer { background: linear-gradient(135deg, #071b40 0%, #0b2d6b 60%, #0b3f91 100%); }

/* ---------- Contact / inquiry light ---------- */
.inquiry-form { background: #fff; border-color: #e0ecfb; box-shadow: 0 14px 44px rgba(15,63,170,0.12); }
.form-field label { color: var(--bw-ink); }
.ci-row b { color: var(--bw-ink); }
.contact-info h2 { color: var(--bw-ink); }
.ci-row .ci-ic { background: #e8f0fe; }
.ci-row .ci-ic svg { color: var(--bw-blue); }

/* ---------- Page hero (inner pages) light ---------- */
.page-hero {
  background: linear-gradient(120deg, #eaf2ff 0%, #d6e6ff 60%, #ffffff 100%);
  color: var(--bw-ink);
}
.page-hero .crumbs { color: rgba(15,31,61,0.55); }
.page-hero .crumbs a { color: rgba(15,31,61,0.7); }
.page-hero .crumbs a:hover { color: var(--bw-blue); }
.page-hero p { color: var(--bw-body); }

/* ---------- Sidebar / sort light ---------- */
.sidebar { background: #fff; border-color: #e0ecfb; box-shadow: 0 6px 20px rgba(15,63,170,0.05); }
.side-title { color: var(--bw-ink); border-color: #e0ecfb; }
.sidebar li > a { color: var(--bw-body); }
.sidebar li > a:hover { color: var(--bw-blue); background: #eef4fe; }
.sidebar li > a.active { color: var(--bw-blue); border-left-color: var(--bw-blue); background: #e8f0fe; }
.sidebar li > a .count { background: #eef4fe; color: var(--bw-body); }
.spec-label { color: var(--bw-ink); }
.spec-row:nth-child(odd) { background: #f5f9ff; }

/* ---------- News cards light ---------- */
.news-card { background: #fff; border: 1px solid #e0ecfb; box-shadow: 0 6px 20px rgba(15,63,170,0.05); }
.news-card h3 { color: var(--bw-ink); }
.news-card p { color: var(--bw-body); }
.news-card .more { color: var(--bw-blue); }
.news-media { background: linear-gradient(135deg, #1e6df2, #0b3f91); }
.news-media svg { color: rgba(255,255,255,0.9); }

/* ---------- Dark section (About mission) override to blue gradient ---------- */
.section.dark {
  background: linear-gradient(120deg, #0b3f91 0%, #1e6df2 100%);
}

/* ---------- Reveal-safe default text ---------- */
body { background: #fff; color: var(--bw-body); }

/* ---------- Intro band (about + stats) ---------- */
.intro-band { background: linear-gradient(135deg, #f5f9ff 0%, #eaf2ff 100%); padding: 72px 0; }
.intro-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.intro-text h2 { font-size: 32px; color: var(--bw-ink); margin-bottom: 14px; line-height: 1.25; }
.intro-text p { font-size: 15.5px; color: var(--bw-body); margin-bottom: 24px; line-height: 1.8; }
.intro-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.stat-box {
  background: #fff; border: 1px solid #dfeafe; border-radius: 16px;
  padding: 28px 18px; text-align: center;
  box-shadow: 0 8px 24px rgba(15,63,170,0.07);
}
.stat-box .sb-num { font-size: 30px; font-weight: 800; color: var(--bw-blue); line-height: 1.1; }
.stat-box .sb-label { font-size: 13px; color: var(--bw-body); margin-top: 6px; font-weight: 600; }

/* Home news grid uses same cards */
#homeNews.news-grid { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 1024px) {
  .intro-grid { grid-template-columns: 1fr; gap: 32px; }
  #homeNews.news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  #homeNews.news-grid { grid-template-columns: 1fr; }
  .intro-stats { grid-template-columns: 1fr 1fr; }
}


/* ============================================================
   HERO — Sinemotion-style (light gradient, left text + right product)
   Appended last so it overrides earlier hero rules.
   ============================================================ */
.hero-slider {
  background:
    radial-gradient(900px 500px at 82% 20%, rgba(30,109,242,0.10) 0%, transparent 60%),
    linear-gradient(120deg, #eef4fe 0%, #e2edfd 45%, #ffffff 100%);
  min-height: 600px;
}
.hero-slider .slide {
  background-size: cover;
  background-position: center;
  align-items: center;
}
.hero-slider .slide-flex {
  display: flex; align-items: center; justify-content: space-between;
  gap: 40px; width: 100%;
}
.hero-slider .slide-copy { max-width: 620px; padding: 90px 0; }
.hero-slider .slide-copy h1 {
  color: var(--bw-ink); font-size: 50px; line-height: 1.12;
  letter-spacing: -1px; margin-bottom: 18px;
}
.hero-slider .slide-copy h1 span { color: var(--bw-blue); }
.hero-slider .hero-eyebrow {
  color: var(--bw-blue); background: rgba(30,109,242,0.10);
  border: 1px solid rgba(30,109,242,0.22);
}
.hero-slider .hero-desc { color: var(--bw-body); font-size: 17px; margin-bottom: 26px; }

/* core specs row */
.hero-specs { display: flex; gap: 36px; margin-bottom: 32px; flex-wrap: wrap; }
.hero-specs .hs-item { position: relative; padding-left: 16px; }
.hero-specs .hs-item::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px;
  border-radius: 2px; background: linear-gradient(180deg, #1e6df2, #6fa8ff);
}
.hero-specs .hs-item b { display: block; font-size: 26px; font-weight: 800; color: var(--bw-ink); line-height: 1.1; }
.hero-specs .hs-item span { font-size: 13px; color: #6b82a8; }

/* right product image */
.hero-slider .slide-visual { flex-shrink: 0; }
.hero-slider .slide-visual img {
  max-width: 520px; width: 100%; height: auto;
  border-radius: 20px; background: #fff;
  box-shadow: 0 20px 50px rgba(15,63,170,0.16);
  border: 1px solid #e0ecfb;
  aspect-ratio: 4/3; object-fit: contain; padding: 18px;
}
.hero-slider .btn-outline { border-color: var(--bw-blue); color: var(--bw-blue); background: transparent; }
.hero-slider .btn-outline:hover { background: var(--bw-blue); color: #fff; }
.hero-slider .slide-arrow {
  background: rgba(255,255,255,0.85); color: var(--bw-blue);
  border: 1px solid rgba(30,109,242,0.25); box-shadow: 0 4px 14px rgba(15,63,170,0.10);
}
.hero-slider .slide-arrow:hover { background: var(--bw-blue); color: #fff; border-color: var(--bw-blue); }
.slide-dots .dot { background: rgba(30,109,242,0.28); }
.slide-dots .dot.active { background: var(--bw-blue); }

@media (max-width: 1024px) {
  .hero-slider .slide-visual img { max-width: 380px; }
  .hero-slider .slide-copy h1 { font-size: 40px; }
}
@media (max-width: 768px) {
  .hero-slider .slide-flex { flex-direction: column; text-align: center; }
  .hero-slider .slide-copy { padding: 56px 0 10px; max-width: 100%; }
  .hero-slider .slide-copy h1 { font-size: 30px; }
  .hero-specs { justify-content: center; gap: 22px; }
  .hero-specs .hs-item { padding-left: 0; text-align: center; }
  .hero-specs .hs-item::before { display: none; }
  .hero-actions { justify-content: center; }
  .hero-slider .slide-visual img { max-width: 280px; margin: 0 auto 40px; aspect-ratio: 4/3; }
}

/* ---------- Intro single (no stats box) ---------- */
.intro-single {
  max-width: 860px; margin: 0 auto; text-align: center;
}
.intro-single h2 { font-size: 32px; color: var(--bw-ink); margin: 14px 0 14px; line-height: 1.25; }
.intro-single p { font-size: 16px; color: var(--bw-body); margin-bottom: 26px; line-height: 1.85; }
.intro-single .btn { margin-top: 4px; }


/* ============================================================
   HERO — Full-width image banners (uploaded designs)
   ============================================================ */
.hero-slider {
  position: relative; overflow: hidden; padding: 0;
  min-height: 0; height: auto; aspect-ratio: 16/9;
  max-height: 640px; background: #eef4fe;
}
.hero-slider .slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
.hero-slider .slide.active { opacity: 1; visibility: visible; }
.hero-slider .slide-copy, .hero-slider .slide-visual { display: none; }

@media (max-width: 768px) {
  .hero-slider { aspect-ratio: 4/3; max-height: 460px; }
}

/* FIX: active slide must be positioned so it fills the hero */
.hero-slider .slide.active { position: absolute; inset: 0; }
.hero-slider .slide { position: absolute; inset: 0; width: 100%; height: 100%; }


/* ============================================================
   HERO FULL-WIDTH — edge to edge, no side gaps
   ============================================================ */
.hero.hero-slider {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  left: auto; right: auto;
  padding: 0 !important;
  border-radius: 0 !important;
  position: relative;
  aspect-ratio: 16 / 9;
  max-height: none !important;
  height: auto;
}
.hero.hero-slider .slide {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border-radius: 0 !important;
}
/* make sure hero is not inside a max-width wrapper */
main > .hero.hero-slider, body > .hero.hero-slider { display: block; }

@media (max-width: 768px) {
  .hero.hero-slider { aspect-ratio: 4 / 3; max-height: none !important; }
}