/* ── Design Tokens ─────────────────────────────────── */
:root {
  --c-primary:      #1d4ed8;
  --c-primary-dark: #1e3a8a;
  --c-accent:       #4f46e5;
  --c-purple:       #7c3aed;
  --c-green:        #16a34a;
  --c-text:         #1e293b;
  --c-muted:        #64748b;
  --c-border:       #e2e8f0;
  --c-surface:      #ffffff;
  --gradient-hero:  linear-gradient(160deg, #0f172a 0%, #0369a1 45%, #0891b2 75%, #06b6d4 100%);
  --font:           -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius:         12px;
  --shadow:         0 1px 8px rgba(0,0,0,0.07);
  --shadow-lg:      0 4px 24px rgba(0,0,0,0.12);
}

/* ── Reset ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font); color: var(--c-text); background: #f8faff; line-height: 1.6; }
a { color: inherit; }
img { max-width: 100%; display: block; }

/* ── Nav ────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-border);
}
.nav-inner {
  max-width: 960px; margin: 0 auto; padding: 0.4rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-logo { text-decoration: none; display: flex; align-items: center; }
.nav-logo-img { height: 43px; width: auto; display: block; }
.nav-links { display: flex; gap: 1.5rem; list-style: none; }
.nav-links a {
  text-decoration: none; color: #334155;
  font-size: 0.9rem; font-weight: 600; transition: color 0.15s;
}
.nav-links a:hover { color: var(--c-primary); }

/* ── Hero ───────────────────────────────────────────── */
.hero {
  background: var(--gradient-hero);
  padding: 2.5rem 1.5rem 0.75rem;
  text-align: center; color: #fff;
  position: relative; overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 40%, rgba(255,255,255,0.07) 0%, transparent 60%);
  pointer-events: none;
}
.hero-tag {
  display: inline-block;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.92);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.3rem 0.9rem; border-radius: 20px; margin-bottom: 1.5rem;
}
.hero h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800; line-height: 1.1; margin-bottom: 1rem;
  text-shadow: 0 2px 16px rgba(0,0,0,0.2);
}
/* ── Hero top layout (title group + prompt chips) ─── */
.hero-top { margin-bottom: 1.25rem; }
.hero-prompts { display: none; }

.hero--chatting .hero-top {
  display: flex; flex-direction: row; align-items: flex-start;
  justify-content: center; gap: 1.5rem; text-align: left;
  max-width: 680px; margin: 0 auto 1rem;
}
.hero--chatting .hero-title-group { flex: 0 0 190px; text-align: left; }
.hero--chatting .hero-title-group h1 { font-size: clamp(1rem, 2.5vw, 1.5rem); margin-bottom: 0.3rem; }
.hero--chatting .hero-title-group .hero-sub { font-size: 0.75rem; margin-bottom: 0; opacity: 0.8; }
.hero--chatting .hero-prompts {
  display: flex; flex-direction: column; gap: 0.45rem; flex: 1; min-width: 0;
}

.hero-sub {
  font-size: 1rem; opacity: 0.85; margin-bottom: 1.5rem;
  max-width: 500px; margin-left: auto; margin-right: auto;
}

/* ── Prompt chips ───────────────────────────────────── */
.prompt-chip {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.92); font-size: 0.78rem; font-weight: 500;
  padding: 0.45rem 0.75rem; border-radius: 8px;
  cursor: pointer; text-align: left; font-family: var(--font);
  transition: background 0.15s; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.prompt-chip:hover { background: rgba(255,255,255,0.22); }
.prompt-chip--featured {
  background: linear-gradient(135deg, rgba(34,197,94,0.35), rgba(22,163,74,0.35));
  border-color: rgba(134,239,172,0.6);
  color: #fff; font-weight: 600;
  box-shadow: 0 0 0 1px rgba(134,239,172,0.25), 0 2px 8px rgba(22,163,74,0.25);
}
.prompt-chip--featured:hover {
  background: linear-gradient(135deg, rgba(34,197,94,0.5), rgba(22,163,74,0.5));
}
.chip-tag {
  display: inline-block; margin-left: 0.4rem;
  background: #fbbf24; color: #422006;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em;
  padding: 0.1rem 0.4rem; border-radius: 4px; text-transform: uppercase;
}

/* ── Chat Widget ────────────────────────────────────── */
.chat-widget {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--radius);
  padding: 1.25rem;
  max-width: 680px; margin: 0 auto;
  backdrop-filter: blur(8px);
  text-align: left;
}
.chat-messages {
  min-height: 60px; max-height: min(560px, 70vh);
  overflow-y: auto; overscroll-behavior: contain;
  margin-bottom: 0.75rem;
  display: flex; flex-direction: column; gap: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.35) transparent;
}
.chat-messages::-webkit-scrollbar { width: 10px; }
.chat-messages::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.3); border-radius: 5px;
  border: 2px solid transparent; background-clip: padding-box;
}
.chat-messages::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.5); background-clip: padding-box; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
/* Flex-shrink fix so children don't push the container past max-height */
.chat-messages > .chat-message { flex: 0 0 auto; }
.chat-message {
  padding: 0.6rem 0.9rem; border-radius: 8px;
  font-size: 0.9rem; line-height: 1.55; max-width: 88%;
}
.chat-message--user {
  background: rgba(255,255,255,0.2); color: #fff;
  align-self: flex-end;
}
.chat-message--assistant {
  background: rgba(241,245,249,0.96); color: var(--c-text);
  align-self: flex-start;
  border: 1px solid rgba(148,163,184,0.25);
}
.chat-message--thinking {
  background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.6);
  align-self: flex-start; font-style: italic; font-size: 0.82rem;
}
/* Greeting / idle assistant prompt — typed-out with dark grey text on slate-tinted bubble */
.chat-message--assistant-typing {
  background: rgba(241,245,249,0.96); color: #475569;
  align-self: flex-start; font-size: 0.9rem; line-height: 1.55;
  padding: 0.6rem 0.9rem; border-radius: 8px; max-width: 88%;
  border: 1px solid rgba(148,163,184,0.25);
}
.chat-input-row { display: flex; gap: 0.4rem; align-items: flex-end; }
.chat-input-row input,
.chat-input-row textarea {
  flex: 1; padding: 0.65rem 0.9rem; border-radius: 8px;
  border: none; font-size: 0.95rem; outline: none;
  background: rgba(255,255,255,0.95); color: var(--c-text);
  font-family: var(--font);
}
.chat-input-row textarea {
  resize: none; min-height: 40px; max-height: 140px; line-height: 1.4;
  overflow-y: auto;
}
.chat-input-row input::placeholder,
.chat-input-row textarea::placeholder { color: var(--c-muted); }

/* Square send icon button — greyed until text entered */
.chat-send-btn {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 8px; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.2); color: rgba(255,255,255,0.4);
  transition: background 0.15s, color 0.15s;
}
.chat-send-btn:not(:disabled) {
  background: #fff; color: var(--c-primary);
}
.chat-send-btn:not(:disabled):hover { background: #e8f0fe; }
.chat-send-btn:disabled { cursor: default; }

/* Attach button */
.chat-attach-btn {
  width: 36px; height: 36px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border-radius: 6px;
  color: rgba(255,255,255,0.6); transition: color 0.15s;
}
.chat-attach-btn:hover { color: rgba(255,255,255,0.9); }
.chat-attach-name {
  font-size: 0.7rem; color: rgba(255,255,255,0.8);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px;
}

/* Light chat variant — semi-opaque white on coloured hero backgrounds */
.chat-widget--light {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.4);
}
.chat-widget--light .chat-input-row input,
.chat-widget--light .chat-input-row textarea {
  background: rgba(255,255,255,0.92);
  color: var(--c-text);
}
.chat-widget--light .chat-input-row button {
  background: #fff;
  color: var(--c-green);
}
.chat-widget--light .chat-input-row button:hover { background: #f0fdf4; }

/* Dark-background chat variant (used on sub-pages) */
.chat-widget--dark {
  background: rgba(15,23,42,0.7);
  border-color: rgba(59,130,246,0.3);
}
.chat-widget--dark .chat-message--assistant {
  background: rgba(51,65,85,0.92); color: #e2e8f0;
  border-color: rgba(148,163,184,0.2);
}
.chat-widget--dark .chat-message--assistant-typing {
  background: rgba(51,65,85,0.92); color: #cbd5e1;
  border-color: rgba(148,163,184,0.2);
}
.chat-widget--dark .chat-input-row input,
.chat-widget--dark .chat-input-row textarea {
  background: rgba(30,41,59,0.9); color: #e2e8f0; border: 1px solid rgba(255,255,255,0.1);
}
.chat-widget--dark .chat-send-btn:not(:disabled) {
  background: var(--c-primary); color: #fff;
}
.chat-widget--dark .chat-send-btn:not(:disabled):hover { background: #1e40af; }
.chat-widget--dark .chat-attach-btn { color: #64748b; }
.chat-widget--dark .chat-attach-btn:hover { color: #94a3b8; }
.chat-widget--dark .chat-messages { scrollbar-color: rgba(255,255,255,0.4) transparent; }
.chat-widget--dark .chat-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.4); background-clip: padding-box; }
.chat-widget--dark .chat-messages::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.6); background-clip: padding-box; }

/* ── Hero split — chat + quick form side-by-side ──── */
.hero-split {
  display: grid; grid-template-columns: 1fr 320px;
  gap: 1.25rem; max-width: 980px; margin: 0 auto;
  align-items: stretch;
}
.hero-split .chat-widget { max-width: none; margin: 0; }
.hero-form {
  background: rgba(255,255,255,0.95);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  display: flex; flex-direction: column; gap: 0.55rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
  text-align: left;
}
.hero-form-title {
  font-size: 1rem; font-weight: 800; color: var(--c-text); margin: 0;
}
.hero-form-sub {
  font-size: 0.78rem; color: var(--c-muted); margin: 0 0 0.3rem;
}
.hero-form input,
.hero-form textarea {
  padding: 0.55rem 0.7rem; border-radius: 6px;
  border: 1px solid var(--c-border); font-size: 0.85rem;
  font-family: var(--font); color: var(--c-text);
  background: #f8fafc; outline: none; transition: border-color 0.15s;
  width: 100%;
}
.hero-form input:focus,
.hero-form textarea:focus { border-color: var(--c-green); background: #fff; }
.hero-form textarea { resize: vertical; min-height: 60px; }
.hero-form-btn {
  background: var(--c-green); color: #fff; border: none;
  padding: 0.65rem 1rem; border-radius: 6px; font-size: 0.9rem;
  font-weight: 700; cursor: pointer; font-family: var(--font);
  transition: filter 0.15s; margin-top: 0.2rem;
}
.hero-form-btn:hover:not(:disabled) { filter: brightness(1.08); }
.hero-form-btn:disabled { opacity: 0.7; cursor: default; }
.hero-form-status {
  font-size: 0.78rem; color: var(--c-green); font-weight: 600; min-height: 1rem; margin: 0;
}

@media (max-width: 820px) {
  .hero-split { grid-template-columns: 1fr; }
}

/* ── Service Cards ──────────────────────────────────── */
.services {
  padding: 1rem 1.5rem 2rem;
  background: var(--c-surface);
}
.services-title {
  text-align: center; font-size: 1.5rem; font-weight: 800;
  margin-bottom: 1.5rem;
}
.services-sub {
  text-align: center; color: var(--c-muted);
  font-size: 0.95rem; margin-bottom: 3rem;
}
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem; max-width: 960px; margin: 0 auto;
}
.card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: 1.25rem;
  box-shadow: var(--shadow); cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.card-accent { height: 4px; border-radius: 2px; margin-bottom: 1.25rem; align-self: stretch; }
.card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.5rem; }
.card p { font-size: 0.875rem; color: var(--c-muted); line-height: 1.55; }
.card .card-bullets { text-align: left; align-self: stretch; }

/* ── Card Illustrations ──────────────────────────────── */
.card-illustration {
  height: 72px; margin-bottom: 1rem;
  display: flex; align-items: center; gap: 1rem;
  position: relative; overflow: hidden;
}

/* Data card — bar chart + bot */
.ci-screen {
  width: 56px; height: 68px;
  background: #eff6ff; border-radius: 6px;
  border: 1.5px solid #bfdbfe;
  display: flex; align-items: flex-end; gap: 4px;
  padding: 8px 6px 6px;
}
.ci-bar {
  flex: 1; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #3b82f6, #1e3a8a);
  transition: height 0.4s ease;
}
.ci-bar--1 { height: 55%; }
.ci-bar--2 { height: 80%; }
.ci-bar--3 { height: 40%; }
.card--data:hover .ci-bar--1 { height: 70%; }
.card--data:hover .ci-bar--2 { height: 95%; }
.card--data:hover .ci-bar--3 { height: 60%; }
.ci-bot {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.ci-bot-head {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #1d4ed8, #3b82f6);
  border: 2px solid #bfdbfe;
  position: relative;
}
.ci-bot-head::before, .ci-bot-head::after {
  content: ''; position: absolute;
  width: 6px; height: 6px; border-radius: 50%;
  background: #fff; top: 9px;
}
.ci-bot-head::before { left: 6px; }
.ci-bot-head::after { right: 6px; }
.ci-bot-bubble {
  background: #1d4ed8; color: #fff;
  font-size: 0.6rem; font-weight: 700;
  padding: 2px 6px; border-radius: 8px;
  letter-spacing: 0.05em;
}

/* Energy card — AC unit + badge */
.ci-ac {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  border: 1.5px solid #86efac;
  border-radius: 8px; padding: 8px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.ci-ac-unit {
  width: 52px; height: 20px;
  background: linear-gradient(135deg, #16a34a, #22c55e);
  border-radius: 4px;
}
.ci-ac-vents {
  display: flex; gap: 5px;
}
.ci-ac-vents span {
  width: 12px; height: 3px; border-radius: 2px;
  background: #4ade80;
  animation: ventPulse 1.8s ease-in-out infinite;
}
.ci-ac-vents span:nth-child(2) { animation-delay: 0.3s; }
.ci-ac-vents span:nth-child(3) { animation-delay: 0.6s; }
@keyframes ventPulse {
  0%, 100% { opacity: 0.4; transform: scaleX(1); }
  50% { opacity: 1; transform: scaleX(1.15); }
}
.ci-badge {
  background: linear-gradient(135deg, #15803d, #16a34a);
  color: #fff; font-size: 0.65rem; font-weight: 600;
  text-align: center; padding: 6px 10px; border-radius: 8px;
  line-height: 1.3;
}
.ci-badge strong { font-size: 0.85rem; }

/* Gadgets card — stacked coins + clock */
.card-illustration--gadgets {
  position: relative; justify-content: center;
}
.ci-coin {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  color: #fff; font-weight: 800; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(124,58,237,0.35);
  position: absolute;
  transition: transform 0.25s ease;
}
.ci-coin--1 { left: 10px; top: 50%; transform: translateY(-60%); z-index: 3; }
.ci-coin--2 { left: 30px; top: 50%; transform: translateY(-40%); z-index: 2; }
.ci-coin--3 { left: 50px; top: 50%; transform: translateY(-60%); z-index: 1; }
.card--gadgets:hover .ci-coin--1 { transform: translateY(-80%); }
.card--gadgets:hover .ci-coin--2 { transform: translateY(-55%); }
.card--gadgets:hover .ci-coin--3 { transform: translateY(-80%); }
.ci-clock {
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  font-size: 1.8rem;
}

/* ── Testimonials ───────────────────────────────────── */
.testimonials {
  background: #f8faff;
  padding: 1.25rem 1.5rem 1.5rem;
  border-top: 1px solid var(--c-border);
}
.testimonials-title {
  text-align: center; font-size: 1.6rem; font-weight: 400;
  color: var(--c-text); margin-bottom: 1.25rem;
  letter-spacing: -0.01em; line-height: 1.25;
  font-family: 'Segoe UI Light', 'Segoe UI', system-ui, -apple-system, sans-serif;
}
.testimonials-wrapper { max-width: 760px; margin: 0 auto; }
.testimonials-carousel { position: relative; overflow: hidden; }
.testimonials-track { display: flex; transition: transform 0.45s ease; }
.testimonial-slide { min-width: 100%; padding: 0 2.5rem; }
.testimonial-card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: 1.5rem 1.75rem 1.25rem;
  box-shadow: var(--shadow); text-align: center;
  min-height: 220px; display: flex; flex-direction: column; justify-content: center;
}
.testimonial-card--logo { padding-top: 1.75rem; }
.testimonial-logo-wrap {
  display: flex; align-items: center; justify-content: center;
  height: 56px; margin-bottom: 1rem;
}
.testimonial-logo {
  max-height: 52px; max-width: 220px;
  width: auto; height: auto;
  object-fit: contain; filter: none;
}
.testimonial-quote {
  font-size: 0.95rem; line-height: 1.65; color: var(--c-text);
  font-style: italic; margin-bottom: 0.75rem;
}
.testimonial-quote::before { content: '\201C'; }
.testimonial-quote::after  { content: '\201D'; }
.testimonial-author { font-weight: 700; font-size: 0.95rem; color: var(--c-primary); }
.testimonial-service { font-size: 0.78rem; color: var(--c-muted); margin-top: 0.2rem; }
.testimonials-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--c-surface); border: 1px solid var(--c-border);
  cursor: pointer; font-size: 1rem; color: var(--c-text);
  box-shadow: var(--shadow); transition: box-shadow 0.15s;
  display: flex; align-items: center; justify-content: center;
}
.testimonials-arrow:hover { box-shadow: var(--shadow-lg); }
.testimonials-arrow--prev { left: 0; }
.testimonials-arrow--next { right: 0; }
.testimonials-dots {
  display: flex; justify-content: center; gap: 0.5rem; margin-top: 0.75rem;
}
.testimonials-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-border); cursor: pointer; border: none;
  transition: background 0.2s; padding: 0;
}
.testimonials-dot.active { background: var(--c-primary); }

/* ── Contact reveal (footer anti-scraping) ───────── */
.contact-reveal {
  background: rgba(96,165,250,0.12); border: 1px solid rgba(96,165,250,0.35);
  cursor: pointer; color: #93c5fd;
  font-size: 0.78rem; font-family: var(--font); font-weight: 500;
  padding: 0.2rem 0.55rem; border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.contact-reveal:hover { background: rgba(96,165,250,0.22); color: #dbeafe; }
/* Once revealed, render contact info as plain link (no underline) so it stays
   visually consistent with surrounding footer links. */
.contact-revealed { color: #60a5fa; text-decoration: none; }
.contact-revealed:hover { color: #93c5fd; }

/* ── Buttons ─────────────────────────────────────────── */
.btn {
  display: inline-block; padding: 0.75rem 1.5rem;
  border-radius: 8px; font-weight: 600; font-size: 0.95rem;
  cursor: pointer; border: none; text-decoration: none;
  font-family: var(--font); transition: filter 0.15s;
}
.btn:hover { filter: brightness(1.08); }
.btn-primary { background: var(--c-primary); color: #fff; }
.btn-green  { background: var(--c-green); color: #fff; }
.btn-outline { background: transparent; border: 2px solid currentColor; }

/* ── Footer ──────────────────────────────────────────── */
.footer {
  background: #0f172a; color: #94a3b8;
  padding: 2.5rem 1.5rem; text-align: center; font-size: 0.875rem;
}
.footer-links {
  display: flex; justify-content: center; gap: 1.5rem;
  margin-bottom: 1rem; flex-wrap: wrap;
}
.footer-links a { color: #60a5fa; text-decoration: none; }
.footer-links a:hover { color: #93c5fd; }

/* ── Utilities ───────────────────────────────────────── */
.container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ── Markdown chat formatting ────────────────────────── */
.chat-message--assistant .md-p { margin: 0.2rem 0; font-size: 0.88rem; line-height: 1.55; }
.chat-message--assistant .md-gap { height: 0.4rem; }
.chat-message--assistant .md-h3 { font-weight: 700; font-size: 0.9rem; margin: 0.4rem 0 0.1rem; }
.chat-message--assistant .md-h4 { font-weight: 600; font-size: 0.85rem; margin: 0.3rem 0 0.1rem; }
.chat-message--assistant .md-ul { margin: 0.3rem 0 0.3rem 1rem; padding: 0; }
.chat-message--assistant .md-ul li { font-size: 0.88rem; line-height: 1.5; margin: 0.15rem 0; }
.chat-message--assistant .md-code { background: #e2e8f0; border-radius: 3px; padding: 0 3px; font-size: 0.82rem; font-family: monospace; }
/* Markdown links rendered as inline pill tiles — same look + feel as the
   prompt-chip tags so links blend visually with the chat UI. */
.chat-message--assistant .md-link,
.chat-message--assistant-typing .md-link {
  display: inline-block;
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  color: #1e3a8a;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.82rem;
  padding: 0.05rem 0.5rem;
  border-radius: 6px;
  border: 1px solid #93c5fd;
  line-height: 1.4;
  transition: background 0.15s, transform 0.1s;
  white-space: nowrap;
}
.chat-message--assistant .md-link:hover,
.chat-message--assistant-typing .md-link:hover {
  background: linear-gradient(135deg, #bfdbfe, #93c5fd);
  transform: translateY(-1px);
}
.chat-widget--dark .chat-message--assistant .md-link,
.chat-widget--dark .chat-message--assistant-typing .md-link {
  background: linear-gradient(135deg, rgba(59,130,246,0.25), rgba(37,99,235,0.25));
  color: #bfdbfe;
  border-color: rgba(96,165,250,0.45);
}
.chat-widget--dark .chat-message--assistant .md-link:hover,
.chat-widget--dark .chat-message--assistant-typing .md-link:hover {
  background: linear-gradient(135deg, rgba(59,130,246,0.4), rgba(37,99,235,0.4));
}

/* ── Placeholder pulse animation ────────────────────── */
@keyframes placeholderPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.85; }
}
.chat-input-row input::placeholder,
.chat-input-row textarea::placeholder {
  animation: placeholderPulse 2.5s ease-in-out infinite;
}

/* ── Voice button ───────────────────────────────────── */
.chat-voice-btn {
  width: 36px; height: 36px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px; border: none; cursor: pointer;
  background: transparent; color: rgba(255,255,255,0.55);
  transition: color 0.15s, background 0.15s;
}
.chat-voice-btn:hover { color: rgba(255,255,255,0.9); }
.chat-voice-btn.active { color: #f87171; background: rgba(248,113,113,0.15); }

/* ── Lucide card icons ───────────────────────────────── */
.card-icon-wrap {
  width: 52px; height: 52px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
}
.card-icon-wrap--logo {
  width: auto; height: auto; background: transparent !important;
  padding: 0; margin: 0 auto 0.6rem;
}
.card--data   .card-icon-wrap { background: #eff6ff; color: #1d4ed8; }
.card--energy .card-icon-wrap { background: #f0fdf4; color: #16a34a; }
.card--gadgets .card-icon-wrap { background: #f5f3ff; color: #7c3aed; }
.card--ai     .card-icon-wrap { background: #eef2ff; color: #4f46e5; }
.card--deep   .card-icon-wrap { background: #ecfeff; color: #0891b2; }
.card--home   .card-icon-wrap { background: #fff7ed; color: #c2410c; }

/* Card status badge — "Coming Soon" etc. */
.card-badge {
  display: inline-block; vertical-align: middle;
  margin-left: 0.5rem;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em;
  padding: 0.15rem 0.45rem; border-radius: 4px;
  text-transform: uppercase;
}
.card-badge--soon {
  background: #fef3c7; color: #92400e;
  border: 1px solid #fcd34d;
}

/* Card bullet lists (services pages) */
.card-bullets {
  list-style: none; padding: 0; margin: 0.4rem 0 0;
  display: flex; flex-direction: column; gap: 0.45rem;
}
.card-bullets li {
  position: relative; padding-left: 1.1rem;
  font-size: 0.85rem; color: var(--c-text); line-height: 1.5;
}
.card-bullets li::before {
  content: ''; position: absolute; left: 0; top: 0.55rem;
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: 0.5;
}
.card--data .card-bullets li::before  { color: #1d4ed8; opacity: 1; }
.card--ai   .card-bullets li::before  { color: #4f46e5; opacity: 1; }
.card--deep .card-bullets li::before  { color: #0891b2; opacity: 1; }
.bullet-tag {
  display: inline-block; margin-left: 0.4rem;
  background: #fbbf24; color: #422006;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em;
  padding: 0.1rem 0.4rem; border-radius: 4px; text-transform: uppercase;
  vertical-align: 1px;
}

/* Prior Projects carousel cards */
.project-card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: 1.5rem 1.75rem;
  box-shadow: var(--shadow); text-align: left;
}
.project-logo {
  height: 40px; width: auto; max-width: 160px; object-fit: contain;
  margin-bottom: 0.75rem;
}
.project-title {
  font-size: 1.05rem; font-weight: 800; color: var(--c-text);
  margin-bottom: 0.2rem;
}
.project-client {
  font-size: 0.8rem; font-weight: 600; color: var(--c-primary);
  letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 0.75rem;
}
.project-bullets {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0.4rem;
}
.project-bullets li {
  position: relative; padding-left: 1.2rem;
  font-size: 0.86rem; line-height: 1.55; color: var(--c-text);
}
.project-bullets li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  color: var(--c-green); font-weight: 700;
}

/* ── VEU Logo in energy nav ──────────────────────────── */
.nav-veu {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.nav-veu-logo { height: 36px; width: auto; display: block; }
.nav-veu-acc { font-size: 0.55rem; color: var(--c-muted); letter-spacing: 0.02em; }

/* ── Energy page sections ────────────────────────────── */

/* Reviews */
.energy-reviews {
  background: #f8faff; padding: 2.5rem 1.5rem;
  border-top: 1px solid var(--c-border);
}
.section-title {
  text-align: center; font-size: 1.4rem; font-weight: 800;
  margin-bottom: 0.5rem; color: var(--c-text);
}
.section-sub {
  text-align: center; color: var(--c-muted); font-size: 0.9rem; margin-bottom: 1.5rem;
}

/* Offers / pricing */
.offers-section {
  background: #fff; padding: 2.5rem 1.5rem;
  border-top: 1px solid var(--c-border);
}
.offers-highlight {
  background: linear-gradient(135deg, #052e16, #15803d);
  color: #fff; border-radius: var(--radius);
  padding: 1.25rem 1.5rem; text-align: center;
  font-size: 1rem; line-height: 1.5; margin-bottom: 1.75rem;
  max-width: 780px; margin-left: auto; margin-right: auto;
}
.offers-highlight strong { color: #86efac; }
.offer-checklist {
  list-style: none; max-width: 680px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 0.75rem;
}
.offer-checklist li {
  display: flex; align-items: flex-start; gap: 0.75rem;
  font-size: 0.95rem; line-height: 1.4;
}
.offer-checklist li::before {
  content: '✓'; flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--c-green); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; margin-top: 0.05rem;
}
.offer-checklist del { color: var(--c-muted); font-size: 0.85rem; }
.offers-note {
  text-align: center; font-size: 0.8rem; color: var(--c-muted);
  margin-top: 1.25rem;
}

/* System product cards */
.systems-section {
  background: #f8faff; padding: 2.5rem 1.5rem;
  border-top: 1px solid var(--c-border);
}
.systems-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem; max-width: 960px; margin: 0 auto;
}
.system-card {
  background: #fff; border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: 1.5rem;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 0.6rem;
}
.system-brand {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--c-muted);
}
.system-model { font-size: 1.1rem; font-weight: 800; color: var(--c-text); }
.system-capacity {
  display: inline-block; background: #eff6ff; color: #1d4ed8;
  font-size: 0.78rem; font-weight: 600; padding: 0.2rem 0.6rem;
  border-radius: 20px; align-self: flex-start;
}
.system-warranty {
  font-size: 0.78rem; color: var(--c-muted);
}
.system-features {
  display: flex; flex-direction: column; gap: 0.35rem; margin: 0.25rem 0;
}
.system-feat {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.82rem; color: var(--c-text);
}
.system-feat::before { content: '✓'; color: var(--c-green); font-weight: 700; }
.system-efficiency { display: flex; gap: 2px; }
.system-efficiency span {
  display: inline-block; width: 12px; height: 12px; border-radius: 2px;
  background: #22c55e;
}
.system-efficiency span.empty { background: #e2e8f0; }
.system-apply {
  margin-top: auto;
  display: block; text-align: center;
  background: var(--c-green); color: #fff;
  padding: 0.6rem 1rem; border-radius: 8px;
  font-weight: 700; font-size: 0.88rem; text-decoration: none;
  transition: filter 0.15s;
}
.system-apply:hover { filter: brightness(1.08); }

/* Enquiry form */
.enquiry-section {
  background: #fff; padding: 2.5rem 1.5rem;
  border-top: 1px solid var(--c-border);
}
.enquiry-form {
  max-width: 660px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 1rem;
}
.form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
.enquiry-form label {
  display: flex; flex-direction: column; gap: 0.35rem;
  font-size: 0.85rem; font-weight: 600; color: var(--c-text);
}
.enquiry-form input,
.enquiry-form select,
.enquiry-form textarea {
  padding: 0.65rem 0.9rem; border-radius: 8px;
  border: 1px solid var(--c-border); font-size: 0.9rem;
  font-family: var(--font); color: var(--c-text);
  background: #f8fafc; outline: none; transition: border-color 0.15s;
}
.enquiry-form input:focus,
.enquiry-form select:focus,
.enquiry-form textarea:focus { border-color: var(--c-primary); background: #fff; }
.enquiry-form textarea { resize: vertical; min-height: 90px; }
.enquiry-form .form-submit {
  background: var(--c-green); color: #fff; border: none;
  padding: 0.85rem 1.5rem; border-radius: 8px; font-size: 1rem;
  font-weight: 700; cursor: pointer; font-family: var(--font);
  transition: filter 0.15s; align-self: flex-start;
}
.enquiry-form .form-submit:hover { filter: brightness(1.08); }
.form-success {
  display: none; background: #f0fdf4; border: 1px solid #86efac;
  border-radius: var(--radius); padding: 1rem 1.25rem;
  color: #15803d; font-weight: 600; text-align: center;
}

/* ── Form thank-you panels (post-submit) ──────────────── */
.contact-thanks,
.hero-form-thanks,
.enquiry-thanks {
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  padding: 1rem 0 0.5rem;
}
.contact-thanks-tick,
.hero-form-tick,
.enquiry-thanks-tick {
  width: 48px; height: 48px; border-radius: 50%;
  background: #16a34a; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; font-weight: 700;
  box-shadow: 0 4px 14px rgba(22,163,74,0.35);
}
.contact-thanks-note,
.enquiry-thanks-note,
.hero-form-thanks .hero-form-sub {
  color: var(--c-muted); font-size: 0.92rem; line-height: 1.55;
  max-width: 38rem; margin: 0;
}
.enquiry-thanks-title { font-size: 1.1rem; font-weight: 800; margin: 0; color: var(--c-text); }
.hero-form-thanks .hero-form-title { margin: 0; }

/* ── Offers grid (energy page) ───────────────────────── */
.offers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem; max-width: 960px; margin: 0 auto;
}
.offer-card {
  background: #fff; border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: 1.5rem;
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 0.6rem;
  position: relative;
}
.offer-card--featured {
  border-color: var(--c-green);
  box-shadow: 0 4px 20px rgba(22,163,74,0.15);
}
.offer-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--c-green); color: #fff;
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.2rem 0.7rem; border-radius: 20px; white-space: nowrap;
}
.offer-icon { font-size: 1.75rem; }
.offer-card h3 { font-size: 1rem; font-weight: 800; margin-bottom: 0; }
.offer-price { font-size: 0.88rem; color: var(--c-muted); }
.offer-price strong { color: var(--c-green); font-size: 1.1rem; }
.offer-card .offer-checklist { margin: 0; max-width: none; gap: 0.5rem; }
.offer-card .offer-checklist li { font-size: 0.82rem; }
.offer-card .offer-checklist li::before {
  width: 18px; height: 18px; font-size: 0.65rem;
}

/* ── Featured product cards (energy page) ──────────────── */
.offers-grid--featured {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.featured-card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 1.5rem 1.5rem 1.4rem;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 0.65rem;
  position: relative;
  text-align: left;
}
.featured-card--highlighted {
  border-color: var(--c-green);
  box-shadow: 0 4px 20px rgba(22,163,74,0.15);
}
.featured-card-tag {
  display: inline-block; align-self: flex-start;
  background: #f0fdf4; color: var(--c-green);
  border: 1px solid #bbf7d0;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.18rem 0.55rem; border-radius: 4px;
}
.featured-card-title {
  font-size: 1.05rem; font-weight: 700; margin: 0; line-height: 1.3;
}
.featured-card-model {
  display: block; font-size: 0.82rem; font-weight: 500;
  color: var(--c-muted); letter-spacing: 0.01em;
  margin-top: 0.15rem;
}
.featured-card-specs {
  list-style: none; padding: 0; margin: 0.25rem 0 0;
  display: flex; flex-direction: column; gap: 0.45rem;
}
.featured-card-specs li {
  position: relative; padding-left: 1.1rem;
  font-size: 0.85rem; line-height: 1.5; color: var(--c-text);
}
.featured-card-specs li::before {
  content: ''; position: absolute; left: 0; top: 0.55rem;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-green);
}
.featured-card-from {
  margin-top: auto; padding-top: 0.5rem;
  font-size: 0.85rem; color: var(--c-muted);
  border-top: 1px solid var(--c-border);
}
.featured-card-from strong {
  color: var(--c-green); font-size: 1.05rem;
  margin-left: 0.25rem;
}

/* ── System cards (energy page) ──────────────────────── */
.system-card--featured {
  border-color: var(--c-primary);
  box-shadow: 0 4px 20px rgba(29,78,216,0.12);
}
.system-name { font-size: 1.15rem; font-weight: 800; color: var(--c-text); }
.system-badge {
  display: inline-block; font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.2rem 0.7rem; border-radius: 20px; align-self: flex-start;
}
.system-badge--green  { background: #f0fdf4; color: #15803d; }
.system-badge--blue   { background: #eff6ff; color: #1d4ed8; }
.system-badge--purple { background: #f5f3ff; color: #7c3aed; }
.system-specs {
  list-style: none; display: flex; flex-direction: column; gap: 0.35rem;
  border-top: 1px solid var(--c-border); padding-top: 0.6rem; margin-top: 0.2rem;
}
.system-specs li { display: flex; justify-content: space-between; font-size: 0.82rem; }
.spec-label { color: var(--c-muted); }
.spec-val { font-weight: 600; color: var(--c-text); text-align: right; }
.system-features { font-size: 0.82rem; color: var(--c-muted); line-height: 1.5; }
.system-cta {
  margin-top: auto; display: block; text-align: center;
  background: var(--c-green); color: #fff;
  padding: 0.65rem 1rem; border-radius: 8px;
  font-weight: 700; font-size: 0.88rem; text-decoration: none;
  transition: filter 0.15s;
}
.system-cta:hover { filter: brightness(1.08); }

/* ── Enquiry form groups ─────────────────────────────── */
.form-group {
  display: flex; flex-direction: column; gap: 0.35rem;
}
.form-group label {
  font-size: 0.85rem; font-weight: 600; color: var(--c-text);
}
.form-file-input { display: none; }
.form-file-label {
  font-size: 0.82rem; color: var(--c-muted);
  background: #f8fafc; border: 1px solid var(--c-border);
  border-radius: 8px; padding: 0.6rem 0.9rem; display: block; cursor: pointer;
}
.form-submit-btn {
  background: var(--c-green); color: #fff; border: none;
  padding: 0.85rem 2rem; border-radius: 8px; font-size: 1rem;
  font-weight: 700; cursor: pointer; font-family: var(--font);
  transition: filter 0.15s; align-self: flex-start;
}
.form-submit-btn:hover:not(:disabled) { filter: brightness(1.08); }
.form-submit-btn:disabled { opacity: 0.7; cursor: default; }
.form-note { font-size: 0.85rem; min-height: 1.2rem; }

/* ── Contact modal ────────────────────────────────── */
.contact-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: center; justify-content: center;
  padding: 1rem;
}
.contact-modal--open { display: flex; }
.contact-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(15,23,42,0.7);
  backdrop-filter: blur(4px);
}
.contact-modal-card {
  position: relative; z-index: 1;
  background: #fff; border-radius: var(--radius);
  padding: 1.75rem 1.75rem 1.5rem;
  width: 100%; max-width: 520px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  animation: contactModalIn 0.18s ease-out;
}
@keyframes contactModalIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.contact-modal-close {
  position: absolute; top: 0.5rem; right: 0.75rem;
  background: none; border: none; cursor: pointer;
  font-size: 1.6rem; line-height: 1; color: var(--c-muted);
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
}
.contact-modal-close:hover { background: #f1f5f9; color: var(--c-text); }
.contact-modal-title {
  font-size: 1.25rem; font-weight: 800; margin: 0 0 0.25rem;
  color: var(--c-text);
}
.contact-modal-sub {
  font-size: 0.88rem; color: var(--c-muted); margin: 0 0 1rem;
}
.contact-modal-form {
  display: flex; flex-direction: column; gap: 0.7rem;
}
.contact-modal-form label {
  display: flex; flex-direction: column; gap: 0.3rem;
  font-size: 0.85rem; font-weight: 600; color: var(--c-text);
}
.contact-modal-form input,
.contact-modal-form textarea {
  padding: 0.6rem 0.8rem; border-radius: 8px;
  border: 1px solid var(--c-border); font-size: 0.9rem;
  font-family: var(--font); color: var(--c-text);
  background: #f8fafc; outline: none; transition: border-color 0.15s, background 0.15s;
}
.contact-modal-form input:focus,
.contact-modal-form textarea:focus { border-color: var(--c-primary); background: #fff; }
.contact-modal-form textarea { resize: vertical; min-height: 200px; line-height: 1.5; }
.contact-modal-btn {
  background: var(--c-primary); color: #fff; border: none;
  padding: 0.75rem 1.25rem; border-radius: 8px; font-size: 0.95rem;
  font-weight: 700; cursor: pointer; font-family: var(--font);
  transition: filter 0.15s; align-self: flex-start; margin-top: 0.2rem;
}
.contact-modal-btn:hover:not(:disabled) { filter: brightness(1.1); }
.contact-modal-btn:disabled { opacity: 0.7; cursor: default; }
.contact-modal-status {
  font-size: 0.85rem; color: var(--c-green); font-weight: 600; min-height: 1rem; margin: 0;
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 640px) {
  .hero { padding: 3.5rem 1rem 3rem; }
  .nav-inner { padding: 0.75rem 1rem; }
  .nav-links { display: none; }
  .services { padding: 3rem 1rem; }
  .chat-widget { padding: 1rem; }
  .testimonial-slide { padding: 0 2.5rem; }
  .testimonial-card { padding: 1.5rem 1.25rem; }
  .form-row { grid-template-columns: 1fr; }
  .nav-veu-acc { display: none; }
  .systems-grid { grid-template-columns: 1fr; }
}