/* =====================================================================
   POWER4ALL — CONSULTANCY DETAIL PAGES  (shared design system)
   Reusable across every consultancy sub-page (project development,
   converter development, battery chargers, EV conversion, PCB design,
   web & Android apps, EV charging software). Prefix: .cd-
   Palette: deep navy surfaces + electric teal / blue accents.
   Light + dark (data-theme="dark") aware. Self-contained.
===================================================================== */

.cd-page {
  --cd-navy-900: #0a1220;
  --cd-navy-800: #0e1c33;
  --cd-navy-700: #14294c;
  --cd-teal: #00d4be;
  --cd-teal-600: #00a896;
  --cd-blue: #4f8cff;
  --cd-violet: #7c5cff;

  --cd-ink: #14203a;
  --cd-body: #47546f;
  --cd-muted: #6b7896;

  --cd-bg: #eef3fb;
  --cd-bg-2: #e7eefb;
  --cd-card: #ffffff;
  --cd-line: rgba(20, 40, 80, 0.12);

  --cd-shell: 1180px;
  --cd-radius: 22px;
  --cd-radius-sm: 14px;
  --cd-shadow: 0 20px 46px rgba(16, 28, 54, 0.12);
  --cd-shadow-lg: 0 30px 70px rgba(10, 18, 38, 0.18);

  background: var(--cd-bg);
  color: var(--cd-body);
  overflow-x: hidden;
}

/* ---------- Layout primitives ---------- */
.cd-shell {
  width: min(100% - 2.4rem, var(--cd-shell));
  margin-inline: auto;
}
.cd-section { position: relative; padding: clamp(3rem, 6vw, 5.5rem) 0; }
.cd-section--tint { background: linear-gradient(180deg, var(--cd-bg) 0%, var(--cd-bg-2) 100%); }
.cd-section--white { background: #ffffff; }

.cd-sec-head { max-width: 760px; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.cd-sec-head--left { margin-left: 0; text-align: left; }
.cd-sec-title {
  color: var(--cd-ink);
  font-size: clamp(1.55rem, 3.4vw, 2.35rem);
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0.55rem 0 0.75rem;
}
.cd-sec-desc { color: var(--cd-body); font-size: 1.03rem; line-height: 1.75; margin: 0; }

.cd-kicker {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.42rem 0.9rem; border-radius: 999px;
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--cd-teal-600);
  background: rgba(0, 168, 150, 0.10);
  border: 1px solid rgba(0, 168, 150, 0.24);
}
.cd-kicker i { font-size: 0.95rem; }

/* ---------- Buttons ---------- */
.cd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.9rem 1.5rem; border-radius: 14px; border: 1px solid transparent;
  font-weight: 700; font-size: 1rem; line-height: 1; cursor: pointer;
  text-decoration: none; transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}
.cd-btn--primary {
  color: #052a26;
  background: linear-gradient(135deg, var(--cd-teal), #34e0cf);
  box-shadow: 0 14px 30px rgba(0, 168, 150, 0.30);
}
.cd-btn--primary:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(0, 168, 150, 0.40); color: #052a26; }
.cd-btn--ghost {
  color: var(--cd-ink); background: #fff; border-color: var(--cd-line);
  box-shadow: 0 8px 20px rgba(16, 28, 54, 0.08);
}
.cd-btn--ghost:hover { transform: translateY(-3px); border-color: rgba(79, 140, 255, 0.5); color: var(--cd-ink); }
.cd-btn--light { color: #eaf6ff; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.22); }
.cd-btn--light:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.16); color: #fff; }

/* ---------- Breadcrumb ---------- */
.cd-breadcrumb {
  background: var(--cd-navy-900);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 0.85rem 0;
}
.cd-breadcrumb ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  list-style: none; margin: 0; padding: 0;
  font-size: 0.86rem;
}
.cd-breadcrumb li { display: inline-flex; align-items: center; gap: 0.5rem; color: rgba(220, 232, 255, 0.6); }
.cd-breadcrumb a { color: rgba(220, 232, 255, 0.82); text-decoration: none; transition: color 0.2s ease; }
.cd-breadcrumb a:hover { color: var(--cd-teal); }
.cd-breadcrumb li[aria-current] { color: #fff; font-weight: 700; }
.cd-breadcrumb .sep { color: rgba(220, 232, 255, 0.35); }

/* =====================================================================
   HERO
===================================================================== */
.cd-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 120% at 12% 0%, rgba(0, 168, 150, 0.22), transparent 46%),
    radial-gradient(120% 120% at 88% 8%, rgba(79, 140, 255, 0.22), transparent 48%),
    linear-gradient(160deg, var(--cd-navy-900) 0%, var(--cd-navy-700) 62%, #16305c 100%);
  color: #eaf2ff;
  padding: clamp(3.2rem, 7vw, 6rem) 0 clamp(3.6rem, 7vw, 6rem);
}
.cd-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 75%);
}
.cd-hero-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.cd-hero-eyebrow {
  color: var(--cd-teal); background: rgba(0, 212, 190, 0.12); border-color: rgba(0, 212, 190, 0.3);
}
.cd-hero h1 {
  color: #ffffff; margin: 1.1rem 0 1rem;
  font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.06; font-weight: 800; letter-spacing: -0.015em;
}
.cd-hero h1 .cd-hl {
  background: linear-gradient(115deg, var(--cd-teal), #7fe9dc 45%, var(--cd-blue));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.cd-hero-lead { color: #cfe0f5; font-size: clamp(1.02rem, 1.6vw, 1.18rem); line-height: 1.78; max-width: 60ch; margin: 0 0 1.6rem; }
.cd-hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-bottom: 1.7rem; }
.cd-hero-tags { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.cd-hero-tag {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.45rem 0.85rem; border-radius: 999px; font-size: 0.84rem; font-weight: 600;
  color: #dbe9ff; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14);
}
.cd-hero-tag i { color: var(--cd-teal); }

/* Hero side visual card */
.cd-hero-card {
  position: relative; border-radius: 26px; padding: 1.6rem;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 30px 70px rgba(0, 6, 18, 0.4);
  backdrop-filter: blur(8px);
}
.cd-hero-card h3 { color: #fff; font-size: 1.05rem; font-weight: 800; margin: 0 0 1rem; display: flex; align-items: center; gap: 0.55rem; }
.cd-hero-card h3 i { color: var(--cd-teal); }
.cd-hero-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.cd-hero-steps li {
  position: relative; padding: 0.75rem 0.85rem 0.75rem 2.9rem; border-radius: 14px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e6f0ff; font-size: 0.92rem; line-height: 1.4; counter-increment: cdstep;
}
.cd-hero-steps li::before {
  content: counter(cdstep, decimal-leading-zero);
  position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%);
  width: 1.7rem; height: 1.7rem; border-radius: 8px;
  display: grid; place-items: center; font-size: 0.78rem; font-weight: 800; color: #052a26;
  background: linear-gradient(135deg, var(--cd-teal), #47e3d2);
}
.cd-hero-steps { counter-reset: cdstep; }

/* ---------- Hero stat strip ---------- */
.cd-hero-stats {
  position: relative; z-index: 2;
  margin-top: clamp(2.2rem, 4vw, 3rem);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
.cd-hero-stat {
  padding: 1.1rem 1rem; border-radius: 16px; text-align: center;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12);
}
.cd-hero-stat b {
  display: block; font-size: clamp(1.35rem, 2.6vw, 1.9rem); font-weight: 800; line-height: 1;
  background: linear-gradient(115deg, var(--cd-teal), var(--cd-blue));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.cd-hero-stat span { display: block; margin-top: 0.4rem; font-size: 0.82rem; color: #b9cae6; letter-spacing: 0.02em; }

/* ---------- Hero oscilloscope figure ---------- */
.cd-hero-scope {
  margin: 0 0 1.1rem; padding: 0.7rem 0.7rem 0.55rem; border-radius: 14px;
  background: rgba(4, 12, 26, 0.42); border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.cd-hero-scope svg { display: block; width: 100%; height: auto; }
.cd-scope-cap { display: flex; justify-content: space-between; margin-top: 0.35rem; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(200, 220, 255, 0.6); }

/* ---------- Hero photo + scope card ---------- */
.cd-hero-right { display: grid; gap: 1rem; }
.cd-hero-media {
  position: relative; border-radius: 24px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 30px 70px rgba(0, 6, 18, 0.45);
}
.cd-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }
.cd-hero-scopecard { padding: 0.9rem 1rem 0.8rem; }
.cd-hero-scopecard p { color: #cfe0f5; font-size: 0.86rem; line-height: 1.5; margin: 0.55rem 0 0; }

/* ---------- Framed photo figure (light sections) ---------- */
.cd-media { border-radius: 18px; overflow: hidden; border: 1px solid var(--cd-line); box-shadow: var(--cd-shadow); background: var(--cd-card); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.cd-media:hover { transform: translateY(-5px); box-shadow: var(--cd-shadow-lg); }
.cd-media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cd-media figcaption { padding: 0.7rem 0.9rem; color: var(--cd-muted); font-size: 0.86rem; line-height: 1.45; }

.cd-gallery { display: grid; gap: 1.1rem; grid-template-columns: repeat(4, 1fr); }

/* ---------- Split media (deliverables) ---------- */
.cd-split-media { border-radius: 22px; overflow: hidden; border: 1px solid var(--cd-line); box-shadow: var(--cd-shadow-lg); margin-bottom: 1.2rem; }
.cd-split-media img { display: block; width: 100%; object-fit: cover; aspect-ratio: 16 / 10; }

/* ---------- Technical diagram figure (light sections) ---------- */
.cd-figure {
  margin: 2.2rem auto 0; max-width: 900px;
  background: var(--cd-card); border: 1px solid var(--cd-line); border-radius: var(--cd-radius);
  padding: 1.4rem clamp(1rem, 3vw, 2rem); box-shadow: var(--cd-shadow);
}
.cd-figure svg { display: block; width: 100%; height: auto; }
.cd-figure figcaption { margin-top: 0.9rem; text-align: center; color: var(--cd-muted); font-size: 0.88rem; }
[data-theme="dark"] .cd-diagram-box { fill: #12233f; }
[data-theme="dark"] .cd-diagram-label { fill: #eaf1ff; }
[data-theme="dark"] .cd-diagram-sub { fill: #9fb2d4; }

/* =====================================================================
   FEATURE / OFFERING GRID
===================================================================== */
.cd-grid { display: grid; gap: 1.3rem; grid-template-columns: repeat(3, 1fr); }
.cd-grid--2 { grid-template-columns: repeat(2, 1fr); }

.cd-card {
  position: relative; background: var(--cd-card); border: 1px solid var(--cd-line);
  border-radius: var(--cd-radius); padding: 1.7rem 1.5rem; box-shadow: var(--cd-shadow);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  overflow: hidden;
}
.cd-card::before {
  content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--cd-teal), var(--cd-blue));
  transform: scaleX(0); transform-origin: left; transition: transform 0.35s ease;
}
.cd-card:hover { transform: translateY(-6px); box-shadow: var(--cd-shadow-lg); border-color: rgba(79, 140, 255, 0.28); }
.cd-card:hover::before { transform: scaleX(1); }
.cd-card-icon {
  width: 3.2rem; height: 3.2rem; border-radius: 14px; display: grid; place-items: center;
  font-size: 1.5rem; color: #fff; margin-bottom: 1rem;
  background: linear-gradient(135deg, var(--cd-teal-600), var(--cd-blue));
  box-shadow: 0 12px 26px rgba(0, 168, 150, 0.24);
}
.cd-card h3 { color: var(--cd-ink); font-size: 1.16rem; font-weight: 800; margin: 0 0 0.55rem; }
.cd-card p { color: var(--cd-body); font-size: 0.97rem; line-height: 1.7; margin: 0; }

/* ---------- Checklist ---------- */
.cd-check { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.cd-check.cd-check--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1.6rem; }
.cd-check li { position: relative; padding-left: 2rem; color: var(--cd-body); font-size: 0.98rem; line-height: 1.6; }
.cd-check li::before {
  content: '\F26E'; font-family: 'bootstrap-icons'; position: absolute; left: 0; top: 0.02em;
  width: 1.4rem; height: 1.4rem; border-radius: 50%; display: grid; place-items: center;
  font-size: 0.72rem; color: #fff; background: linear-gradient(135deg, var(--cd-teal-600), var(--cd-blue));
}
.cd-check li b { color: var(--cd-ink); font-weight: 700; }

/* =====================================================================
   PROCESS TIMELINE
===================================================================== */
.cd-timeline { display: grid; gap: 1.1rem; grid-template-columns: repeat(3, 1fr); counter-reset: cdtl; }
.cd-step {
  position: relative; background: var(--cd-card); border: 1px solid var(--cd-line);
  border-radius: var(--cd-radius); padding: 1.6rem 1.4rem 1.5rem; box-shadow: var(--cd-shadow);
  counter-increment: cdtl; transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cd-step:hover { transform: translateY(-5px); box-shadow: var(--cd-shadow-lg); }
.cd-step-num {
  position: absolute; top: -1.1rem; left: 1.4rem;
  width: 2.6rem; height: 2.6rem; border-radius: 12px; display: grid; place-items: center;
  font-weight: 800; font-size: 1rem; color: #052a26;
  background: linear-gradient(135deg, var(--cd-teal), #47e3d2);
  box-shadow: 0 10px 22px rgba(0, 168, 150, 0.32);
}
.cd-step-num::after { content: counter(cdtl, decimal-leading-zero); }
.cd-step h3 { color: var(--cd-ink); font-size: 1.08rem; font-weight: 800; margin: 1rem 0 0.5rem; }
.cd-step p { color: var(--cd-body); font-size: 0.95rem; line-height: 1.65; margin: 0; }

/* =====================================================================
   SPLIT (deliverables / applications) — text + panel
===================================================================== */
.cd-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: center; }
.cd-panel {
  background: linear-gradient(160deg, var(--cd-navy-800), var(--cd-navy-700));
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--cd-radius);
  padding: 1.8rem; box-shadow: var(--cd-shadow-lg); color: #e7f0ff;
}
.cd-panel h3 { color: #fff; font-size: 1.1rem; font-weight: 800; margin: 0 0 1.1rem; display: flex; align-items: center; gap: 0.55rem; }
.cd-panel h3 i { color: var(--cd-teal); }
.cd-panel .cd-check li { color: #cfe0f5; }
.cd-panel .cd-check li b { color: #fff; }

/* ---------- Applications chips grid ---------- */
.cd-apps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }
.cd-app {
  display: flex; gap: 0.85rem; align-items: flex-start;
  background: var(--cd-card); border: 1px solid var(--cd-line); border-radius: var(--cd-radius-sm);
  padding: 1rem 1.05rem; box-shadow: var(--cd-shadow); transition: transform 0.25s ease, border-color 0.25s ease;
}
.cd-app:hover { transform: translateY(-4px); border-color: rgba(79, 140, 255, 0.32); }
.cd-app i {
  flex: none; width: 2.4rem; height: 2.4rem; border-radius: 10px; display: grid; place-items: center;
  font-size: 1.1rem; color: var(--cd-teal-600); background: rgba(0, 168, 150, 0.1); border: 1px solid rgba(0, 168, 150, 0.2);
}
.cd-app b { display: block; color: var(--cd-ink); font-size: 0.98rem; margin-bottom: 0.15rem; }
.cd-app span { color: var(--cd-muted); font-size: 0.88rem; line-height: 1.5; }

/* =====================================================================
   FAQ
===================================================================== */
.cd-faq { max-width: 860px; margin-inline: auto; display: grid; gap: 0.85rem; }
.cd-faq-item { background: var(--cd-card); border: 1px solid var(--cd-line); border-radius: var(--cd-radius-sm); overflow: hidden; box-shadow: 0 10px 24px rgba(16, 28, 54, 0.07); }
.cd-faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.3rem; background: none; border: 0; cursor: pointer; text-align: left;
  color: var(--cd-ink); font-size: 1.02rem; font-weight: 700;
}
.cd-faq-q i { flex: none; color: var(--cd-teal-600); transition: transform 0.3s ease; }
.cd-faq-item.is-open .cd-faq-q i { transform: rotate(45deg); }
.cd-faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.cd-faq-a-inner { padding: 0 1.3rem 1.2rem; color: var(--cd-body); font-size: 0.97rem; line-height: 1.75; }
.cd-faq-item.is-open .cd-faq-a { max-height: 400px; }

/* =====================================================================
   CTA BAND
===================================================================== */
.cd-cta {
  position: relative; overflow: hidden; border-radius: clamp(20px, 3vw, 30px);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(0, 168, 150, 0.28), transparent 45%),
    radial-gradient(120% 140% at 100% 100%, rgba(79, 140, 255, 0.28), transparent 46%),
    linear-gradient(150deg, var(--cd-navy-900), var(--cd-navy-700));
  color: #eaf2ff; padding: clamp(2.2rem, 5vw, 3.6rem);
  display: grid; grid-template-columns: 1.4fr auto; gap: 1.6rem; align-items: center;
  box-shadow: var(--cd-shadow-lg);
}
.cd-cta h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; margin: 0.7rem 0 0.6rem; line-height: 1.15; }
.cd-cta p { color: #cfe0f5; font-size: 1.02rem; line-height: 1.7; margin: 0; max-width: 60ch; }
.cd-cta-actions { display: flex; flex-direction: column; gap: 0.8rem; }

/* =====================================================================
   SCROLL REVEAL
===================================================================== */
.cd-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.cd-reveal.is-visible { opacity: 1; transform: none; }
.cd-reveal.d1 { transition-delay: 0.08s; }
.cd-reveal.d2 { transition-delay: 0.16s; }
.cd-reveal.d3 { transition-delay: 0.24s; }

/* =====================================================================
   RESPONSIVE
===================================================================== */
@media (max-width: 992px) {
  .cd-hero-grid { grid-template-columns: 1fr; }
  .cd-hero-card { order: 2; }
  .cd-grid, .cd-timeline { grid-template-columns: repeat(2, 1fr); }
  .cd-gallery { grid-template-columns: repeat(2, 1fr); }
  .cd-hero-stats { grid-template-columns: repeat(2, 1fr); }
  .cd-split { grid-template-columns: 1fr; }
  .cd-cta { grid-template-columns: 1fr; }
  .cd-cta-actions { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 620px) {
  .cd-grid, .cd-grid--2, .cd-timeline, .cd-apps, .cd-check.cd-check--2, .cd-gallery { grid-template-columns: 1fr; }
  .cd-hero-stats { grid-template-columns: repeat(2, 1fr); }
  .cd-hero-actions { flex-direction: column; align-items: stretch; }
  .cd-hero-actions .cd-btn { width: 100%; }
  .cd-step { padding-top: 1.8rem; }
}

/* =====================================================================
   DARK MODE  (site toggle sets data-theme="dark" on <html>/<body>)
===================================================================== */
[data-theme="dark"] .cd-page {
  --cd-ink: #eaf1ff;
  --cd-body: #b7c4dc;
  --cd-muted: #8ea0c0;
  --cd-bg: #070d18;
  --cd-bg-2: #0a1424;
  --cd-card: #0f1c33;
  --cd-line: rgba(255, 255, 255, 0.1);
  --cd-shadow: 0 20px 46px rgba(0, 0, 0, 0.4);
  --cd-shadow-lg: 0 30px 70px rgba(0, 0, 0, 0.55);
}
[data-theme="dark"] .cd-section--white { background: #0b1526; }
[data-theme="dark"] .cd-app i { background: rgba(0, 168, 150, 0.16); }
[data-theme="dark"] .cd-btn--ghost { background: #0f1c33; color: var(--cd-ink); }

@media (prefers-reduced-motion: reduce) {
  .cd-reveal { opacity: 1; transform: none; transition: none; }
  .cd-card, .cd-step, .cd-app, .cd-btn { transition: none; }
}