/* ==========================================================================
   envio — refdesign.css
   Reference-design layer. Loaded LAST so it can refine / override the base.
   Re-shapes key sections to match the supplied Enterprise Design Spec banner:
     · Hero  = left copy + large physical VIDEOTRON on a stand
     · Problem vs Solution = "Problem Cards" + "Solution Cards" groups
     · Videotron explanation = tabs + metric/feature card grid
     · CCTV explanation = camera stage + floating callouts
     · How It Works = steps + Dashboard Preview
     · About = "Our Journey" (timeline + isometric) + Mission/Vision illustration
     · Portfolio = Featured showcase with green stats panel
   ========================================================================== */


/* ==========================================================================
   1. HERO — split layout (copy left · videotron right)
   ========================================================================== */
.hero--split { padding-bottom: clamp(40px, 6vw, 80px); }
.hero--split .hero-grid {
  display: grid;
  grid-template-columns: 1.02fr 1.1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.hero-copy { text-align: left; max-width: 560px; }
.hero-copy h1 { margin-bottom: 20px; }
.hero-copy .lead { margin: 0 0 30px; max-width: 520px; }
.hero-copy .hero__cta { justify-content: flex-start; }
.hero-copy .hero__assure { justify-content: flex-start; }
.hero-visual { position: relative; }

/* ---- Physical videotron device ---- */
.vt-device { position: relative; display: flex; flex-direction: column; align-items: center; }
.vt-device__screen {
  width: 100%;
  border-radius: 18px;
  padding: 12px;
  background: linear-gradient(180deg, #20283c, #11151f);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 40px 80px -30px rgba(8,15,35,.6),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -2px 6px rgba(0,0,0,.4);
}
/* the glowing inner panel */
.vt-screen {
  position: relative; overflow: hidden;
  border-radius: 10px;
  background: radial-gradient(120% 120% at 50% 0%, #16224a, #060b1c 70%);
  border: 1px solid rgba(255,255,255,.06);
  padding: 12px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  aspect-ratio: 16 / 10;
}
.vt-screen__head {
  display: flex; align-items: center; gap: 8px;
  color: #cfe0ff; font-family: var(--font-display);
  font-size: clamp(.62rem, 1.1vw, .82rem); font-weight: 600; letter-spacing: -.01em;
}
.vt-screen__head .vt-chip {
  margin-left: auto; font-family: var(--font-sans);
  font-size: .58rem; font-weight: 700; letter-spacing: .08em;
  color: #6CE9A6; padding: 2px 7px; border-radius: 5px;
  background: rgba(18,183,106,.16); border: 1px solid rgba(18,183,106,.3);
}
.vt-screen__body { display: grid; grid-template-columns: .8fr 1.4fr .9fr; gap: 8px; min-height: 0; }
.vt-screen__foot { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }

/* left/right mini columns inside screen */
.vt-col { display: flex; flex-direction: column; gap: 8px; }
.vt-stat {
  padding: 8px 10px; border-radius: 8px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
}
.vt-stat b { display: block; color: #fff; font-family: var(--font-display); font-size: clamp(.95rem, 2vw, 1.5rem); line-height: 1; letter-spacing: -.02em; }
.vt-stat span { color: rgba(255,255,255,.5); font-size: clamp(.5rem, 1vw, .64rem); }

/* circular gauge (conic-gradient) */
.gauge {
  --val: 61%;
  width: clamp(46px, 8vw, 64px); aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(var(--accent) var(--val), rgba(255,255,255,.12) 0);
  display: grid; place-items: center; position: relative; margin: 2px auto;
}
.gauge::before { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: #0a1430; }
.gauge span { position: relative; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: clamp(.6rem, 1.3vw, .82rem); }

/* coloured data rows (right column) */
.vt-rows { display: flex; flex-direction: column; gap: 6px; }
.vt-row {
  display: flex; align-items: center; gap: 6px;
  font-size: clamp(.5rem, 1vw, .62rem); color: rgba(255,255,255,.7);
}
.vt-row i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.vt-row b { margin-left: auto; color: #fff; font-family: var(--font-display); font-size: clamp(.55rem,1vw,.68rem); }

/* feed inside the videotron stretches to fill */
.vt-screen .feed { aspect-ratio: auto; height: 100%; }
.vt-screen .bars { height: clamp(40px, 8vw, 64px); gap: 4px; }

/* neck + base (the stand) */
.vt-device__neck {
  width: clamp(48px, 8vw, 72px); height: clamp(26px, 4vw, 40px);
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.05));
  border-inline: 1px solid rgba(255,255,255,.12);
}
.vt-device__base {
  width: 58%; height: 14px; border-radius: 0 0 14px 14px;
  background: linear-gradient(180deg, #c9d2e2, #9aa6bd);
  box-shadow: 0 16px 30px -12px rgba(8,15,35,.5);
  position: relative;
}
.vt-device__base::before {
  content: ""; position: absolute; left: 50%; top: -6px; transform: translateX(-50%);
  width: 30%; height: 10px; border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #aeb9cd, #c9d2e2);
}

/* ---- Videotron screen slideshow (rotating views) ---- */
.vt-slides { position: relative; min-height: 0; }
.vt-slide {
  position: absolute; inset: 0; display: grid;
  opacity: 0; pointer-events: none;
  transition: opacity .7s var(--ease);
}
.vt-slide.is-active { opacity: 1; pointer-events: auto; }

/* slide 2 — live camera wall (2×2) */
.vt-cams { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; }
.vt-cams .feed { aspect-ratio: auto; height: 100%; }

/* slide 3 — analytics */
.vt-analytics { display: grid; grid-template-columns: .72fr 1.7fr; gap: 8px; }
.vt-chart {
  display: flex; flex-direction: column; gap: 8px; padding: 10px;
  border-radius: 8px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
}
.vt-chart svg { width: 100%; height: 46%; }
.vt-chart .bars { flex: 1; height: auto; }

/* slideshow indicator dots */
.vt-dots { display: flex; justify-content: center; gap: 6px; padding-top: 8px; }
.vt-dot {
  width: 7px; height: 7px; padding: 0; border: none; border-radius: 50%;
  background: rgba(255,255,255,.28); cursor: pointer;
  transition: width .3s var(--ease), background .3s var(--ease);
}
.vt-dot.is-active { width: 18px; border-radius: 4px; background: var(--accent); }

/* ---- Frameless hero slideshow (real videotron, NO computer frame) --------
   The slider is just a transparent area; each videotron image floats freely
   (object-fit: contain + soft drop-shadow), with no card/border/monitor frame. */
.hero-slider {
  position: relative;
  aspect-ratio: 4 / 3;                 /* area only; ubah jika perlu */
  /* frameless: transparan, tanpa border/shadow/rounded — bukan frame komputer */
}
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0; pointer-events: none;
  transition: opacity .8s var(--ease);
}
.hero-slide.is-active { opacity: 1; pointer-events: auto; }

/* the videotron image itself — full image, floating, no frame */
.hero-img {
  width: 100%; height: 100%;
  object-fit: contain;                 /* tampilkan videotron utuh, tak ke-crop */
  display: block;
  filter: drop-shadow(0 24px 44px rgba(8,15,35,.28));  /* seolah berdiri nyata */
}

/* placeholder drop-zone — only until a real image exists (clearly "add here") */
.hero-img-fallback {
  display: none;                       /* revealed by onerror */
  position: absolute; inset: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  text-align: center; padding: 24px;
  border: 2px dashed rgba(45,107,255,.28);
  border-radius: 20px;
  background: rgba(45,107,255,.04);
  color: var(--muted);
}
.hero-img-fallback i { font-size: 2.6rem; color: var(--brand); }
.hero-img-fallback b { color: var(--ink); font-family: var(--font-display); font-size: 1.25rem; }
.hero-img-fallback span { font-size: .8rem; color: var(--muted-2); }

/* dots below the image */
.hero-dots { position: absolute; left: 0; right: 0; bottom: 4px; z-index: 4; padding-top: 0; }
.hero-dots .vt-dot { background: rgba(11,18,32,.25); }
.hero-dots .vt-dot.is-active { background: var(--brand); }


/* ---- Trusted-by row with carousel arrows ---- */
.trusted__row { display: flex; align-items: center; gap: 16px; }
.trusted__row .marquee { flex: 1; }
.trusted__arrow {
  display: grid; place-items: center; width: 42px; height: 42px; flex: none;
  border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink); box-shadow: var(--sh-sm); transition: all .25s var(--ease);
}
.trusted__arrow:hover { background: var(--brand); border-color: var(--brand); color: #fff; transform: translateY(-2px); }
@media (max-width: 640px) { .trusted__arrow { display: none; } }

/* --- Equal-height logos -----------------------------------------------------
   The SVG files were normalised (each viewBox trimmed to its real artwork), so
   rendering them all at the SAME height now makes them look consistent. Width
   follows each logo's own ratio. Fine-tune ALL logos together via --logo-h
   below, or one logo with an inline override, e.g.  style="--logo-h: 30px"  on
   that .marquee__item. -------------------------------------------------------- */
.marquee__item { flex: none; }
.marquee__item .client-logo {
  height: var(--logo-h, 42px);   /* uniform height for every logo */
  width: auto;                   /* width follows the (trimmed) ratio */
  max-width: 260px;              /* safety cap for very wide wordmarks */
  object-fit: contain;
  display: block;
}
.marquee__item .client-name { display: none; align-items: center; gap: 11px; }


/* ==========================================================================
   2. PROBLEM vs SOLUTION — labelled card groups
   ========================================================================== */
.ps-wrap {
  display: grid; grid-template-columns: 0.92fr 1.18fr; gap: 28px; align-items: start;
}
.ps-block {
  padding: 26px; border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-sm);
}
.ps-block--problem { background: linear-gradient(180deg, #fff7f6, #fff); }
.ps-block--solution { background: linear-gradient(180deg, #f4fbf9, #fff); border-color: rgba(7,200,166,.16); }
.ps-block__label {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-sans); font-weight: 700; font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 20px;
}
.ps-block--problem .ps-block__label { color: var(--danger); }
.ps-block--solution .ps-block__label { color: var(--accent-600); }
.ps-block__label i {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; font-size: .72rem;
}
.ps-block--problem .ps-block__label i { background: #FEE4E2; color: var(--danger); }
.ps-block--solution .ps-block__label i { background: var(--accent-soft); color: var(--accent-600); }

.ps-cards { display: grid; gap: 14px; }
.ps-cards--2 { grid-template-columns: repeat(2, 1fr); }
.ps-cards--3 { grid-template-columns: repeat(3, 1fr); }

.mini-card {
  padding: 16px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.mini-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.mini-card__ic {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
  font-size: .95rem; margin-bottom: 12px;
}
.ps-block--problem .mini-card__ic { background: #FEF0EF; color: var(--danger); }
.ps-block--solution .mini-card { border-color: rgba(7,200,166,.14); }
.ps-block--solution .mini-card__ic { background: var(--accent-soft); color: var(--accent-600); }
.ps-block--solution .mini-card:hover { border-color: var(--accent); }
.mini-card h4 { font-family: var(--font-sans); font-size: .92rem; font-weight: 600; margin-bottom: 4px; }
.mini-card p { font-size: .8rem; line-height: 1.45; }


/* ==========================================================================
   3. VIDEOTRON EXPLANATION — tabs + metric/feature grid
   ========================================================================== */
.vt-explain__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.vt-explain__cards .metric-card { height: 100%; }

/* centered, horizontally-scrollable tab bar (never overflows the page) */
.vt-tabs {
  display: flex; width: max-content; max-width: 100%;
  margin: 0 auto 28px; overflow-x: auto;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.vt-tabs::-webkit-scrollbar { display: none; }
.vt-tabs .tab { flex: none; }


/* ==========================================================================
   4. CCTV EXPLANATION — camera stage + floating callouts
   ========================================================================== */
.cctv-stage {
  position: relative;
  border-radius: var(--r-xl);
  background:
    radial-gradient(80% 90% at 50% 30%, #1a2647, #0a1024 70%);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--sh-lg);
  min-height: 420px;
  display: grid; place-items: center;
  padding: 40px;
  overflow: hidden;
}
.cctv-stage::before { /* radar sweep ring */
  content: ""; position: absolute; width: 360px; height: 360px; border-radius: 50%;
  border: 1px solid rgba(7,200,166,.18);
  box-shadow: 0 0 0 40px rgba(7,200,166,.04), 0 0 0 80px rgba(7,200,166,.03);
  animation: cctv-ping 3.2s var(--ease) infinite;
}
@keyframes cctv-ping {
  0% { transform: scale(.7); opacity: .8; }
  100% { transform: scale(1.25); opacity: 0; }
}
.cctv-cam { position: relative; z-index: 2; width: clamp(180px, 26vw, 260px); filter: drop-shadow(0 24px 40px rgba(0,0,0,.5)); }
.cctv-cam svg { width: 100%; height: auto; }
/* real CCTV photo slot (replaces the SVG illustration) */
.cctv-cam:has(.cctv-photo) { width: clamp(240px, 42vw, 420px); }
.cctv-cam .cctv-photo { width: 100%; height: auto; display: block; border-radius: 16px; }
.cctv-cam .cctv-photo-fallback {
  display: none;                      /* revealed by onerror */
  flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  aspect-ratio: 16 / 10; border-radius: 16px; padding: 20px; text-align: center;
  border: 2px dashed rgba(255,255,255,.25); background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.7);
}
.cctv-cam .cctv-photo-fallback i { font-size: 2.4rem; color: var(--accent); }
.cctv-cam .cctv-photo-fallback b { color: #fff; font-family: var(--font-display); font-size: 1.15rem; }
.cctv-cam .cctv-photo-fallback span { font-size: .78rem; color: rgba(255,255,255,.45); }

/* ---- Feed image slots (foto nyata di dalam kotak CCTV/video-wall) ----------
   Tiap <div class="feed"> bisa diisi <img class="feed-img">. Gambar menutupi
   mockup (grid + bounding box), tapi label CAM tetap di atas. Jika file gambar
   tidak ada, onerror menghapus <img> → mockup vektor tampil sebagai fallback. */
.feed-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;                  /* di atas grid & bounding box, di bawah label */
}

/* ---- Vector → image slots (ilustrasi About, peta, scanner X-Ray) ----------
   <img> menutupi ilustrasi/peta vektor bila file ada; jika tidak ada, onerror
   menghapus <img> → vektor SVG tampil sebagai fallback (halaman tetap rapi). */
.iso-stage .iso-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 2; }
.world-map .map-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }

/* Google Maps asli (iframe) menggantikan peta titik dekoratif */
.world-map--live { -webkit-mask-image: none; mask-image: none; background: #0a1024; overflow: hidden; }
.world-map--live .gmap { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* Kartu proyek galeri: 1 gambar penuh (bukan grid 2 feed) */
.project-card__media { padding: 0; display: block; }
.project-card__media .card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.cctv-cam .cctv-img-overlay { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 2; }
.cctv-cam:has(.cctv-img-overlay) { width: clamp(240px, 42vw, 420px); }

/* Gambar PENUH untuk kotak/panel X-Ray (mengisi seluruh .cctv-stage,
   di bawah callout). onerror menghapus → panel gelap fallback. */
.cctv-stage .stage-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; border-radius: inherit; }

/* floating callout chips */
.cctv-callout {
  position: absolute; z-index: 4;
  display: flex; align-items: center; gap: 11px;
  padding: 12px 15px; border-radius: 14px;
  background: rgba(255,255,255,.96); backdrop-filter: blur(10px);
  box-shadow: var(--sh-lg); max-width: 220px;
}
.cctv-callout i {
  display: grid; place-items: center; width: 38px; height: 38px; flex: none;
  border-radius: 10px; font-size: 1rem; color: #fff;
  background: linear-gradient(150deg, var(--brand), var(--brand-700));
}
.cctv-callout i.accent { background: linear-gradient(150deg, var(--accent), var(--accent-600)); }
.cctv-callout b { display: block; color: var(--ink); font-size: .9rem; font-family: var(--font-display); }
.cctv-callout span { font-size: .76rem; color: var(--muted); }
.cctv-callout--tl { top: 14%; left: 4%; }
.cctv-callout--tr { top: 22%; right: 4%; }
.cctv-callout--br { bottom: 14%; right: 8%; }
.cctv-callout--bl { bottom: 18%; left: 6%; }


/* ==========================================================================
   5. HOW IT WORKS — steps + dashboard preview
   ========================================================================== */
.howit-split { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.howit-steps { display: flex; flex-direction: column; gap: 8px; }
.howit-step {
  display: flex; gap: 16px; padding: 18px;
  border-radius: var(--r); border: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.howit-step:hover { background: var(--surface); border-color: var(--line); box-shadow: var(--sh-sm); transform: translateX(4px); }
.howit-step__num {
  display: grid; place-items: center; width: 48px; height: 48px; flex: none;
  border-radius: 13px; font-size: 1.05rem; color: var(--brand);
  background: var(--brand-soft); border: 1px solid rgba(45,107,255,.16);
  position: relative;
}
.howit-step__num b {
  position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink); color: #fff; font-size: .68rem; font-family: var(--font-display);
  display: grid; place-items: center;
}
.howit-step h3 { font-size: 1.05rem; margin-bottom: 4px; }
.howit-step p { font-size: .9rem; line-height: 1.5; }

/* dark dashboard preview card (reuses .dashboard look, compact) */
.dash-preview {
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, #0E1730, #0A0F1E);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: var(--sh-lg);
  padding: 14px; overflow: hidden;
}
.dash-preview__bar { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.07); margin-bottom: 12px; }
.dash-preview__bar .dot-live { box-shadow: 0 0 0 0 rgba(18,183,106,.6); }
.dash-preview__bar span { color: rgba(255,255,255,.7); font-size: .76rem; font-weight: 500; font-family: var(--font-sans); }
.dash-preview__bar .vt-chip { margin-left: auto; font-size: .58rem; font-weight: 700; color: #84A9FF; padding: 2px 7px; border-radius: 5px; background: rgba(45,107,255,.16); border: 1px solid rgba(45,107,255,.3); }
.dash-preview__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
.dash-preview .feed { aspect-ratio: 16/10; }
.dash-preview__side { display: flex; flex-direction: column; gap: 10px; }


/* ==========================================================================
   6. ABOUT — "Our Journey" (timeline + isometric) & Mission/Vision
   ========================================================================== */
.journey { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 5vw, 64px); align-items: center; }

/* compact left-aligned timeline */
.journey-tl { position: relative; padding-left: 26px; }
.journey-tl::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, var(--brand), var(--accent)); opacity: .4; }
.journey-step { position: relative; padding: 14px 0 14px 18px; }
.journey-step::before {
  content: ""; position: absolute; left: -26px; top: 20px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--brand); box-shadow: 0 0 0 4px rgba(45,107,255,.12);
}
.journey-step .badge { margin-bottom: 8px; }
.journey-step h3 { font-size: 1.12rem; margin-bottom: 5px; }
.journey-step p { font-size: .9rem; line-height: 1.55; }
.journey-step:hover::before { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(7,200,166,.14); }

/* isometric illustration stage (CSS/SVG, no external images) */
.iso-stage {
  position: relative; aspect-ratio: 4/3;
  border-radius: var(--r-xl);
  background: radial-gradient(80% 90% at 50% 20%, #eef3fb, #e3e9f4);
  border: 1px solid var(--line); box-shadow: var(--sh-md);
  display: grid; place-items: center; overflow: hidden;
}
.iso-stage::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(45,107,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(45,107,255,.06) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent);
          mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent);
}
.iso-stage svg { position: relative; width: 74%; height: auto; filter: drop-shadow(0 18px 30px rgba(45,107,255,.2)); }
.iso-stage--dark { background: radial-gradient(80% 90% at 50% 20%, #16224a, #0a1024); border-color: rgba(255,255,255,.08); }
.iso-stage--dark::before { background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); }

/* Mission & Vision split with illustration */
.mv-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.mv-list { display: flex; flex-direction: column; gap: 20px; }
.mv-row { display: flex; gap: 16px; }
.mv-row__ic { display: grid; place-items: center; width: 50px; height: 50px; flex: none; border-radius: 14px; font-size: 1.2rem; color: #fff; }
.mv-row--mission .mv-row__ic { background: linear-gradient(150deg, var(--brand), var(--brand-700)); }
.mv-row--vision .mv-row__ic { background: linear-gradient(150deg, var(--accent), var(--accent-600)); }
.mv-row h3 { font-size: 1.25rem; margin-bottom: 6px; }
.mv-row p { font-size: .96rem; line-height: 1.6; }


/* ==========================================================================
   7. PORTFOLIO — Featured showcase with green stats panel
   ========================================================================== */
.show-featured {
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; align-items: stretch;
}
.show-featured__media {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  background: linear-gradient(160deg, #16224a, #0a1024);
  border: 1px solid var(--line); box-shadow: var(--sh-md);
  padding: 22px; min-height: 360px;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1.4fr 1fr; gap: 12px;
}
.show-featured__media .feed { aspect-ratio: auto; }
.show-featured__media .feed--wide { grid-column: 1 / -1; }
.show-featured__media .badge { position: absolute; top: 18px; left: 18px; z-index: 5; }

/* light-green stats panel */
.green-panel {
  border-radius: var(--r-xl); padding: clamp(26px, 3vw, 40px);
  background: linear-gradient(170deg, #ecfdf5, #f4fbf9);
  border: 1px solid rgba(18,183,106,.18);
  display: flex; flex-direction: column;
}
.green-panel__badge { align-self: flex-start; margin-bottom: 14px; }
.green-panel h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: 10px; }
.green-panel > p { font-size: .96rem; margin-bottom: 22px; }
.green-panel__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 24px; }
.green-stat b { display: block; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--success); }
.green-stat span { font-size: .85rem; color: #0B8A53; font-weight: 600; }
.green-panel__foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px; }


/* ==========================================================================
   8. CONTACT — two labelled groups inside the dark glass form
   ========================================================================== */
.form-group-label {
  display: flex; align-items: center; gap: 9px;
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.55); margin: 6px 0 14px;
}
.form-group-label::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.1); }
.form-group-label i { color: var(--accent); }
.form-group + .form-group { margin-top: 8px; }


/* ==========================================================================
   9. RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .hero--split .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-copy { text-align: center; max-width: 640px; margin-inline: auto; }
  .hero-copy .lead { margin-inline: auto; }
  .hero-copy .hero__cta, .hero-copy .hero__assure { justify-content: center; }
  .vt-device { max-width: 560px; margin-inline: auto; }

  .ps-wrap { grid-template-columns: 1fr; }
  .vt-explain__cards { grid-template-columns: repeat(2, 1fr); }
  .howit-split { grid-template-columns: 1fr; }
  .journey { grid-template-columns: 1fr; }
  .mv-split { grid-template-columns: 1fr; }
  .show-featured { grid-template-columns: 1fr; }
  .cctv-stage { min-height: 480px; }
}

@media (max-width: 640px) {
  .ps-cards--2, .ps-cards--3 { grid-template-columns: 1fr 1fr; }
  .vt-explain__cards { grid-template-columns: 1fr; }
  .vt-screen__body { grid-template-columns: 1fr; }
  .vt-screen__body .vt-col:last-child { display: none; } /* hide 3rd column on tiny screens */
  .green-panel__stats { grid-template-columns: 1fr 1fr; }
  .cctv-callout { position: static; max-width: none; margin-top: 10px; }
  .cctv-stage { display: block; padding: 28px; }
  .cctv-stage .cctv-cam { margin: 0 auto 18px; }
  .cctv-callouts-mobile { display: grid; gap: 10px; }
}

/* hide the radar/camera floating callouts gracefully on very small screens
   by letting them stack (handled above) */