:root{
  --container: 1200px;
  --pad: 20px;
  --ink: #0f1b3d;
  --muted: rgba(15,27,61,.72);
  --line: rgba(0,0,0,.08);
  --bg: #ffffff;
  --brand: #ff2d2d;
  --shadow: 0 10px 30px rgba(15,27,61,.10);
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", sans-serif;
  color: var(--ink);
  background: var(--bg);
}
a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto; display:block}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  border: 1px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
  white-space: nowrap;
}
.btn:active{transform: translateY(1px)}
.btn--primary{
  background: var(--brand);
  color: #fff;
  box-shadow: 0 12px 24px rgba(255,45,45,.22);
}
.btn--primary:hover{box-shadow: 0 16px 30px rgba(255,45,45,.28)}
.btn--ghost{
  background: #fff;
  border-color: var(--line);
  color: var(--ink);
}
.btn--ghost:hover{border-color: rgba(0,0,0,.16)}
.btn--outline{
  background: transparent;
  border-color: rgba(255,45,45,.35);
  color: var(--brand);
}
.btn--outline:hover{border-color: rgba(255,45,45,.55)}

/* Hero */
.hero{
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid var(--line);

  position: relative;
}
.hero__img{
  width: 100%;
  height: auto;
  display: block;
  /* allow clicking hotspots placed above the image */
  pointer-events: none;

  position: relative;
  z-index: 1;
}

/* --- Hero hotspots (clickable areas on top of hero.png) --- */
.hero-media{ position: relative; }
/* index.html uses .hero__visual as the hero media wrapper */
.hero__visual{ position: relative; }
/* ensure hotspot container fills the hero image area */
.hero__hotspots{ position:absolute; inset:0; z-index: 6; }
.hero-hotspot{
  position: absolute;
  display: block;
  border-radius: 999px;
  z-index: 5;
  background: transparent;

  pointer-events: auto;
}

/* Top-right Login pill in the hero header */
.hero-hotspot--login{
  /* clickable area for the red Login pill */
  top: 5.5%;
  right: 3.2%;
  width: 15.5%;
  height: 8.0%;
}

/* "Products" and "Contact" links in the hero header */
.hero-hotspot--products{
  /* lowered a bit so cursor/hand indicator aligns better with the text */
  top: 5.5%;
  left: 54.5%;
  width: 11.8%;
  height: 8.0%;
}
.hero-hotspot--contact{
  /* lowered a bit so cursor/hand indicator aligns better with the text */
  top: 5.5%;
  left: 66.9%;
  width: 11.8%;
  height: 8.0%;
}

/* Bottom-left "START WITH US" pill inside hero */
.hero-hotspot--demo{
  /* enlarge hotspot so the visible button inside hero image is always clickable */
  /* moved down slightly so the hand-cursor appears closer to the actual button */
  top: 80.5%;
  left: 4.0%;
  width: 28.0%;
  height: 11.8%;
}

/* Features image hotspots (3 "DETAIL" buttons) */
.feature-media{ position: relative; }
.feature-hotspot{
  position: absolute;
  display: block;
  border-radius: 999px;
  background: transparent;
  z-index: 5;
}
.feature-hotspot:focus-visible{
  outline: 3px solid rgba(220, 38, 38, 0.35);
  outline-offset: 4px;
}

/* Using percentage values so hotspots scale with the image */
.feature-hotspot--insight{
  top: 83.2%;
  left: 6.5%;
  width: 18.8%;
  height: 9.5%;
}
.feature-hotspot--performance{
  top: 83.2%;
  left: 43.2%;
  width: 18.8%;
  height: 9.5%;
}
.feature-hotspot--explore{
  top: 83.2%;
  left: 74.6%;
  width: 18.8%;
  height: 9.5%;
}

/* Simple "polos" pages: same skyline vibe but lebih menerawang */
.plain-page{
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  background: #fff;
}
.plain-page__bg{
  /* hide the skyline background on plain pages */
  display: none;
}
.plain-page__content{
  position: relative;
  z-index: 2;
  width: min(var(--container), calc(100% - 2*var(--pad)));
  margin: 0 auto;
  padding: 36px 0 64px;
}
.plain-topbar{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.plain-card{
  margin-top: clamp(80px, 12vw, 140px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 22px;
  max-width: 820px;
}
.plain-card h1{margin:0 0 8px 0; font-size: 26px; letter-spacing: -0.02em;}
.plain-card p{margin:0; color: var(--muted); line-height: 1.6; font-size: 14px;}

.hero-hotspot:focus-visible{
  outline: 3px solid rgba(220, 38, 38, 0.35);
  outline-offset: 4px;
}
/* Sections full width images */
.section{background:#fff}
.fullbleed{width:100%; margin:0; padding:0}
.section__img img{width:100%; height:auto}

/* Separator */
.section + .section{border-top: 1px solid var(--line)}

/* Footer CTA card — overlay on footer image (moved up to avoid text collision) */
.footer-section{ position: relative; }

.footer-cta{
  position: absolute;
  left: 0;
  right: 0;
  /* move the card into the empty area above skyline */
  /* moved up by +60px to avoid overlapping the building pillar */
  bottom: clamp(630px, calc(20vw + 190px), 810px);
  background: transparent;
  padding: 0;
  border-top: 0;
}

.footer-cta__inner{
  width: min(var(--container), calc(100% - 2*var(--pad)));
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}

.footer-cta h2{margin:0 0 6px 0; font-size:20px; letter-spacing:-0.01em}
.footer-cta p{margin:0; color: var(--muted); font-size:13px; line-height:1.5}
.footer-cta__actions{display:flex; gap:10px; flex-wrap:wrap}

@media (max-width: 900px){
  .footer-cta{
    /* moved up by +60px on smaller screens as well */
    bottom: clamp(700px, calc(18vw + 90px), 850px);
  }
  .footer-cta__inner{
    flex-direction: column;
    align-items: flex-start;
  }
}


/* spacing tweak: give more air between partners and footer brand */
.partners-section{padding-bottom: 64px !important;}
.partners{margin-bottom: 48px !important;}
.site-footer .footer-brand{margin-top: 48px !important;}


/* ===== Premium header overlay on hero ===== */
.hero{ position: relative; }
.site-header{
  position:absolute;
  top:18px;
  left:0; right:0;
  width:min(var(--container), calc(100% - 2*var(--pad)));
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  z-index: 5;
}
.site-logo{ height:42px; width:auto; display:block; }
.site-header__nav{ display:flex; align-items:center; gap:14px; }
.nav-link{
  font-weight:600;
  font-size:14px;
  color: rgba(15,27,61,.85);
  padding:10px 10px;
  border-radius:12px;
  backdrop-filter: blur(6px);
}
.nav-link:hover{ background: rgba(255,255,255,.65); }
.nav-cta{
  font-weight:700;
  font-size:14px;
  padding:10px 14px;
  border-radius:14px;
  background: #0f1b3d;
  color:#fff;
  box-shadow: 0 10px 26px rgba(15,27,61,.18);
}
.nav-cta:hover{ transform: translateY(-1px); }

/* Hero actions (accessible buttons below hero image) */
.hero-actions{
  position:absolute;
  left:0; right:0;
  bottom: clamp(18px, 2.2vw, 28px);
  width:min(var(--container), calc(100% - 2*var(--pad)));
  margin:0 auto;
  display:flex;
  gap:12px;
  justify-content:flex-start;
  z-index: 4;
}
.btn--ghost{
  background: rgba(255,255,255,.72);
  border:1px solid var(--line);
  color: var(--ink);
}
.btn--ghost:hover{ background: rgba(255,255,255,.92); }
@media (max-width: 720px){
  .hero-logo-overlay{top:12px;left:12px}
  .hero-logo-overlay__bg{background:#ffffff;border-radius:18px;padding:28px 34px;box-shadow:none;display:inline-flex}
  .footer-logo-overlay__bg{background:#ffffff;border-radius:18px;padding:28px 34px;box-shadow:none;display:inline-flex}
.footer-logo-overlay__bg{ position: relative; overflow:hidden; }
.footer-logo-overlay__bg::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:38px; background:#fff; }

  .hero-logo-overlay__img{height:206px;width:auto;display:block}
  .footer-logo-overlay{position:absolute;left:26px;top:18px;z-index:6;pointer-events:none}
  .footer-logo-overlay__bg{background:#ffffff;border-radius:18px;padding:28px 34px;box-shadow:none;display:inline-flex}
  .footer-logo-overlay img{height:202px;width:auto;display:block}
}

  .hero-actions{ justify-content:center; }
  .site-logo{ height:38px; }
}

/* === Logo overlay to replace baked-in logo on hero image === */
.hero{ position: relative; }
.hero-logo-overlay{position:absolute;top:22px;left:26px;z-index:6;pointer-events:none}
.hero-logo-overlay__bg{background:#ffffff;border-radius:18px;padding:28px 34px;box-shadow:none;display:inline-flex}
.hero-logo-overlay__img{height:206px;width:auto;display:block}

/* === Footer logo overlay to replace baked-in logo near partners/footer === */
.footer-section{ position: relative; }
.footer-logo-overlay{position:absolute;left:26px;top:18px;z-index:6;pointer-events:none}
.footer-logo-overlay__bg{background:#ffffff;border-radius:18px;padding:28px 34px;box-shadow:none;display:inline-flex}
.footer-logo-overlay img{height:202px;width:auto;display:block}

@media (max-width: 720px){
  .hero-logo-overlay{position:absolute;top:22px;left:26px;z-index:6;pointer-events:none}
  .hero-logo-overlay__img{height:206px;width:auto;display:block}
  .footer-logo-overlay{position:absolute;left:26px;top:18px;z-index:6;pointer-events:none}
  .footer-logo-overlay img{height:202px;width:auto;display:block}
}

.hero-hotspot{cursor:pointer}

/* Ensure hero hotspots are clickable above any overlays */
.hero-hotspot{position:absolute;z-index:20;cursor:pointer}

/* Overlays must never block clicks */
.hero-logo-overlay, .hero-logo-overlay *,
.footer-logo-overlay, .footer-logo-overlay *{
  pointer-events:none !important;
}

/* v112: force hero hotspots clickable */
.hero-hotspot{pointer-events:auto !important; cursor:pointer !important; z-index:30 !important;}

/* v112: overlays never capture clicks */
.hero-logo-overlay, .hero-logo-overlay *, .footer-logo-overlay, .footer-logo-overlay *{
  pointer-events:none !important;
}

/* v113: ensure hero hotspots always clickable */
.hero-hotspot{z-index:60 !important; cursor:pointer !important; pointer-events:auto !important;}

/* v113: ensure hero background never blocks clicks */
.hero img, .hero__img img, .hero-bg, .hero-illustration{pointer-events:none !important;}

/* v115: subtle lift without background box */



/* ============================= */
/* RESPONSIVE IMPROVEMENT v118 */
/* ============================= */

* {
  box-sizing: border-box;
}

img, svg, canvas {
  max-width: 100%;
  height: auto;
}

/* Container fix */
.container, .container-fluid {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* KPI cards stack on mobile */
@media (max-width: 768px) {
  .row {
    display: flex;
    flex-direction: column;
  }

  .col-lg-3,
  .col-lg-4,
  .col-lg-6,
  .col-md-6 {
    width: 100% !important;
    margin-bottom: 16px;
  }
}

/* Map responsive */
#map,
.map-container {
  width: 100%;
  height: 280px;
}

@media (min-width: 1024px) {
  #map,
  .map-container {
    height: 420px;
  }
}

/* Chart container */
.chart-box,
.card-body canvas {
  width: 100% !important;
  height: 300px !important;
}



/* ====================================== */
/* LOGO RESPONSIVE FIX v119 */
/* ====================================== */

/* Desktop default */
.hero-logo-overlay__img {
  height: 206px;
  width: auto;
  max-width: 100%;
}

.footer-logo-overlay img {
  height: 202px;
  width: auto;
  max-width: 100%;
}

/* Mobile optimization */
@media (max-width: 720px) {

  .hero-logo-overlay {
    top: 10px !important;
    left: 12px !important;
  }

  .hero-logo-overlay__bg {
    padding: 10px 12px !important;
    border-radius: 14px !important;
  }

  .hero-logo-overlay__img {
    height: clamp(72px, 18vw, 120px) !important;
  }

  .footer-logo-overlay {
    top: 10px !important;
    left: 12px !important;
  }

  .footer-logo-overlay__bg {
    padding: 10px 12px !important;
    border-radius: 14px !important;
  }

  .footer-logo-overlay img {
    height: clamp(70px, 18vw, 115px) !important;
  }
}


/* ====================================== */
/* LAYOUT FIXES v120 (HERO + FOOTER CTA)   */
/* ====================================== */

/* 1) HERO: logo jangan nutup headline di hero.png (mobile) */
@media (max-width: 720px){
  .hero-logo-overlay{
    top: 8px !important;
    left: 10px !important;
  }
  .hero-logo-overlay__bg{
    padding: 8px 10px !important;
    border-radius: 14px !important;
  }
  .hero-logo-overlay__img{
    height: clamp(54px, 14vw, 88px) !important;
  }
}

/* 2) FOOTER CTA: jangan melayang terlalu tinggi sampai nutup section lain */
@media (max-width: 900px){
  .footer-cta{
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    padding: 20px 0 !important;
    background: transparent !important;
  }
  .footer-cta__inner{
    width: min(var(--container), calc(100% - 2*var(--pad))) !important;
    margin: 0 auto !important;
  }
}


/* ====================================== */
/* HOTFIX v121 — Mobile Hero text safe area + Footer CTA non-overlap */
/* ====================================== */

/* Mobile: move hero logo away from headline area (to top-right) and shrink */
@media (max-width: 720px){
  .hero-logo-overlay{
    left: auto !important;
    right: 12px !important;
    top: 10px !important;
  }
  .hero-logo-overlay__bg{
    padding: 8px 10px !important;
    border-radius: 12px !important;
  }
  .hero-logo-overlay__img{
    height: clamp(56px, 14vw, 90px) !important;
    width: auto !important;
  }
}

/* Tablet & Mobile: footer CTA must not float above previous sections */
@media (max-width: 900px){
  .footer-cta{
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    padding: 0 !important;
    margin-top: 24px !important;
    background: transparent !important;
  }
  .footer-cta__inner{
    width: min(var(--container), calc(100% - 2*var(--pad))) !important;
  }
}



/* ====================================== */
/* HOTFIX v122 — Keep overlay logo inside hero (avoid navbar row) */
/* ====================================== */

/* On small screens, navbar items can share the same top row.
   Push the hero overlay logo down so it doesn't "kabur" to navbar area. */
@media (max-width: 1024px){
  .hero{ padding-top: 12px; } /* harmless, but keeps spacing consistent */
  .hero-logo-overlay{
    top: 64px !important;   /* move below navbar */
    right: 12px !important; /* keep to the right */
    left: auto !important;
    z-index: 4 !important;  /* below nav if nav is higher */
  }
}

/* For very small phones, slightly smaller and a bit higher */
@media (max-width: 420px){
  .hero-logo-overlay{ top: 54px !important; }
  .hero-logo-overlay__img{ height: clamp(52px, 13vw, 84px) !important; }
}


/* ====================================== */
/* HOTFIX v123 — Show hero overlay logo ONLY on mobile */
/* Reason: on tablet/desktop it collides with navbar and looks like "kabur". */
/* ====================================== */

/* Default: hide overlay logo on wider screens */
.hero-logo-overlay{ display: none !important; }

/* Mobile only: show overlay logo and keep it inside hero */
@media (max-width: 720px){
  .hero-logo-overlay{
    display: block !important;
    position: absolute !important;
    right: 12px !important;
    left: auto !important;
    top: 54px !important;     /* below navbar */
    z-index: 4 !important;
    pointer-events: none !important;
  }
  .hero-logo-overlay__bg{
    background:#fff !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
  }
  .hero-logo-overlay__img{
    height: clamp(52px, 13vw, 84px) !important;
    width: auto !important;
    max-width: 100% !important;
    display:block !important;
  }
}




/* ====================================== */
/* HOTFIX v125 — Use overlay logo as REPLACEMENT (same spot), not a second logo */
/* ====================================== */

.hero{ position: relative; }

/* Always show overlay */
.hero-logo-overlay{
  display: block !important;
  position: absolute !important;
  top: 14px !important;
  left: 16px !important;
  right: auto !important;
  z-index: 6 !important;
  pointer-events: none !important;
}

/* White bg covers the baked-in logo behind it */
.hero-logo-overlay__bg{
  background:#fff !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
  display: inline-flex !important;
}

/* Responsive logo size */
.hero-logo-overlay__img{
  height: clamp(56px, 7vw, 110px) !important;  /* desktop/tablet */
  width: auto !important;
  display:block !important;
}

/* Mobile: smaller so it never touches the red headline */
@media (max-width: 720px){
  .hero-logo-overlay{ top: 10px !important; left: 12px !important; }
  .hero-logo-overlay__bg{ padding: 8px 10px !important; border-radius: 12px !important; }
  .hero-logo-overlay__img{ height: clamp(44px, 12vw, 72px) !important; }
}


/* ====================================== */
/* HOTFIX v126 — Desktop logo scale for hero overlay */
/* ====================================== */

/* Desktop/tablet: make overlay logo follow desktop proportion */
@media (min-width: 721px){
  .hero-logo-overlay{
    top: 18px !important;
    left: 24px !important;
  }
  .hero-logo-overlay__bg{
    padding: 18px 22px !important;
    border-radius: 18px !important;
  }
  .hero-logo-overlay__img{
    height: clamp(110px, 9vw, 210px) !important;
  }
}


/* ====================================== */
/* HOTFIX v127 — Nudge hero overlay logo slightly to the right (desktop/tablet) */
/* ====================================== */
@media (min-width: 721px){
  .hero-logo-overlay{
    left: 52px !important;
  }
}


/* ===== Patch: ensure hero/footer visuals scale correctly on mobile ===== */
.hero__img, .footer-section .section__img > img{
  width: 100%;
  height: auto;
  display: block;
}


/* Force hide BY RENDBAR text */
.logo small, .logo span, .by-rendbar { display: none !important; }

/* Move footer CTA up (desktop only) */
 (min-width: 901px){
  .footer-cta { transform: translateY(-200px) !important; }
}
 (max-width: 900px){
  .footer-cta { transform: none !important; }
}


/* ====================================== */
/* HOTFIX v128-fix4 — Footer mobile CTA + remove BY RENDBAR + pointer links */
/* 1) Hide the footer overlay logo block that contains 'BY RENDBAR' (it's baked into the logo image) */
.footer-logo-overlay{ display:none !important; }

/* 2) Pointer icons positioning (overlay on top of footer image text) */
.footer-section{ position: relative; }
.footer-contact-links{
  position: absolute;
  left: 38px;
  top: 58%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 5;
}
.footer-contact-links .contact-pointer{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 28px;
  height: 28px;
  font-size: 18px;
  text-decoration: none;
  border-radius: 999px;
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(0,0,0,0.06);
}

/* 3) Mobile: move CTA lower (closer to bottom), keep stable */
@media (max-width: 720px){
  .footer-cta{
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 28px !important; /* LOWER (smaller = closer to bottom) */
    transform: none !important;
    margin-top: 0 !important;
    padding: 0 !important;
  }
  .footer-contact-links{
    left: 22px;
    top: 46%;
    gap: 14px;
  }
}


/* ====================================== */
/* HOTFIX v128-fix5 — White pointer hotspots + hide CTA on mobile */
/* 0) Ensure footer-section is positioning context */
.footer-section{ position: relative; }

/* 1) Hide footer logo overlay card (contains BY RENDBAR) */
.footer-logo-overlay{ display:none !important; }

/* 2) Remove emoji pointer list if any leftover */
.footer-contact-links{ display:none !important; }

/* 3) Contact hotspots: invisible clickable areas + subtle white pointer dot */

/* Footer contact hotspots (click targets + subtle pointers) */
.footer-section .section__img{ position: relative; }

.footer-contact-hotspots{
  position:absolute;
  inset:0;            /* anchor to the footer image area */
  z-index: 6;
  pointer-events: none; /* allow only children to receive clicks */
}

/* Each hotspot sits on top of the text that is baked into footer-bg.png */
.footer-contact-hotspots .contact-hotspot{
  position:absolute;
  left: 7%;
  width: 55%;
  height: 6%;
  pointer-events: auto;
  background: transparent;
}

/* Pointer badge (small white circle + chevron) */
.footer-contact-hotspots .contact-hotspot::after{
  content:"›";
  position:absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 6px 16px rgba(0,0,0,0.10);
  color:#3b4a63;
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
  text-align:center;
}

/* Vertical positions tuned to the baked footer text block */
.footer-contact-hotspots .contact-hotspot--email{ top: 42%; }
.footer-contact-hotspots .contact-hotspot--tel{ top: 50%; }
.footer-contact-hotspots .contact-hotspot--linkedin{ top: 58%; }
.footer-contact-hotspots .contact-hotspot--ig{ top: 66%; }

/* Mobile: keep hotspots aligned and prevent them from drifting */
@media (max-width: 640px){
  .footer-contact-hotspots .contact-hotspot{
    left: 6%;
    width: 78%;
    height: 7%;
  }
  .footer-contact-hotspots .contact-hotspot::after{
    right: calc(100% + 8px);
    width: 24px;
    height: 24px;
    font-size: 16px;
    line-height: 24px;
  }
  .footer-contact-hotspots .contact-hotspot--email{ top: 46%; }
  .footer-contact-hotspots .contact-hotspot--tel{ top: 54%; }
  .footer-contact-hotspots .contact-hotspot--linkedin{ top: 62%; }
  .footer-contact-hotspots .contact-hotspot--ig{ top: 70%; }
}

/* Extra-small phones */
@media (max-width: 380px){
  .footer-contact-hotspots .contact-hotspot{
    left: 5%;
    width: 84%;
  }
}

.footer-cta{ display:none !important; }

  .footer-contact-hotspots{
    left: 18px;
    top: 42%;
    width: 360px;
  }
  .footer-contact-hotspots .contact-hotspot{
    width: 360px;
    height: 40px;
  }
  .footer-contact-hotspots .hotspot-email{ top: 0px; }
  .footer-contact-hotspots .hotspot-tel{ top: 46px; }
  .footer-contact-hotspots .hotspot-linkedin{ top: 92px; }
  .footer-contact-hotspots .hotspot-ig{ top: 138px; }
}


/* ====================================== */
/* HOTFIX v128-fix7 — Align pointer badges next to contact text */
.footer-contact-hotspots{ 
  left: 92px !important;   /* move badges to sit beside text */
  top: 54% !important;
}
.footer-contact-hotspots .contact-hotspot::before{
  left: -28px !important;  /* badge slightly before 'Email:' */
}
.footer-contact-hotspots .contact-hotspot::after{
  left: -22px !important;  /* chevron inside badge */
}

/* Mobile: align badges next to text (not at screen edge) */
@media (max-width: 720px){
  .footer-contact-hotspots{
    left: 56px !important;
    top: 42% !important;
  }
  .footer-contact-hotspots .contact-hotspot::before{ left: -24px !important; }
  .footer-contact-hotspots .contact-hotspot::after{ left: -18px !important; }
}


/* ====================================== */
/* HOTFIX v128-fix8 — Align pointer badges to each contact line */
/* Move hotspot block up a bit so first badge aligns with "Email:" */
.footer-contact-hotspots{ top: 49% !important; } /* was slightly too low */

/* Re-map line offsets (desktop) */
.footer-contact-hotspots .hotspot-email{ top: -6px !important; }
.footer-contact-hotspots .hotspot-tel{ top: 46px !important; }
.footer-contact-hotspots .hotspot-linkedin{ top: 98px !important; }
.footer-contact-hotspots .hotspot-ig{ top: 150px !important; }

@media (max-width: 720px){
  .footer-contact-hotspots{ top: 39% !important; } /* match mobile text block */
  .footer-contact-hotspots .hotspot-email{ top: -4px !important; }
  .footer-contact-hotspots .hotspot-tel{ top: 44px !important; }
  .footer-contact-hotspots .hotspot-linkedin{ top: 88px !important; }
  .footer-contact-hotspots .hotspot-ig{ top: 132px !important; }
}

@media (max-width: 640px){ .footer-cta{ display:none; } }


/* --- HOTFIX v128-fix10: ensure footer contact pointers render & align (desktop+mobile) --- */
.footer-section .section__img{ position: relative; }

/* hotspots should be above the image and not clipped */
.footer-section .footer-contact-hotspots{ z-index: 5; pointer-events: none; }
.footer-section .footer-contact-hotspots .contact-hotspot{ pointer-events: auto; }

/* on small screens, move the hotspot container down a bit so icons sit beside the text */
@media (max-width: 768px){
  .footer-section .footer-contact-hotspots{
    left: 6% !important;
    top: 48% !important;
    width: 70% !important;
    height: 45% !important;
  }
  .footer-section .footer-contact-hotspots .contact-hotspot{ left: 0 !important; }
}
/* =========================================================
   PRODUCTS — Carousel + Zigzag (Playlog-ish)
   v128 patch: partial preview + reveal on scroll + autoslide
========================================================= */

/* Reveal on scroll */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity: 1; transform:none; transition:none;}
}

/* Products hero */
.products-content{ padding-top: 18px; }
.products-hero{
  padding: 10px 0 18px;
  max-width: 860px;
}
.products-hero h1{
  margin: 0 0 8px 0;
  font-size: clamp(28px, 3.2vw, 44px);
  letter-spacing: -0.02em;
}
.products-hero__sub{
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
  font-size: 14px;
}

/* ===== Carousel Screenshot (partial preview) ===== */
.shots{ padding: clamp(18px, 3vw, 28px) 0; }
.shots__head{ max-width: 720px; margin-bottom: 12px; }
.shots__head h2{ margin:0 0 6px 0; letter-spacing:-0.01em; }
.shots__desc{ margin:0; color: var(--muted); line-height: 1.7; font-size: 14px; }

.shots__wrap{ position: relative; }

.shots__track{
  display: flex;
  gap: 16px;

  /* partial preview */
  overflow-x: auto;
  padding: 10px 10px 18px;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 10px;
  -webkit-overflow-scrolling: touch;

  border-radius: 18px;
}

.shots__track::-webkit-scrollbar{ height: 10px; }
.shots__track::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.18); border-radius: 999px; }
.shots__track::-webkit-scrollbar-track{ background: rgba(0,0,0,.06); border-radius: 999px; }

.shot{
  flex: 0 0 68%;
  scroll-snap-align: center;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
  transform: translateZ(0);
}
.shot img{
  width: 100%;
  height: auto;
  display: block;
}

/* Nav arrows */
.shots__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.92);
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 26px;
  line-height: 1;
  z-index: 2;
}
.shots__nav--prev{ left: -8px; }
.shots__nav--next{ right: -8px; }
.shots__nav[disabled]{ opacity: .4; cursor: not-allowed; }

/* Dots */
.shots__dots{
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 8px;
}
.shots__dots button{
  width: 8px; height: 8px;
  border-radius: 999px;
  border: 0;
  background: rgba(0,0,0,.20);
  cursor: pointer;
}
.shots__dots button[aria-current="true"]{
  width: 18px;
  background: rgba(0,0,0,.60);
}

/* Responsive tuning for partial preview */
@media (max-width: 1024px){
  .shot{ flex-basis: 80%; }
  .shots__nav--prev{ left: -2px; }
  .shots__nav--next{ right: -2px; }
}
@media (max-width: 640px){
  .shot{ flex-basis: 88%; }
  .shots__nav{ display:none; } /* swipe-centric */
}

/* ===== Zigzag Features ===== */
.features-zigzag{ padding: clamp(22px, 4vw, 44px) 0; }
.fz__head{ max-width: 760px; margin-bottom: 16px; }
.fz__head h2{ margin:0 0 6px 0; letter-spacing:-0.01em; }
.fz__head p{ margin:0; color: var(--muted); line-height:1.7; font-size:14px; }

.fz__row{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(16px, 3vw, 36px);
  align-items: center;
  padding: clamp(14px, 2.5vw, 26px) 0;
}

.fz__text h3{ margin: 0 0 8px; letter-spacing: -0.01em; }
.fz__text p{ margin: 0 0 12px; color: var(--muted); line-height: 1.7; font-size: 14px; }
.fz__list{ margin: 0; padding-left: 18px; color: var(--muted); line-height: 1.7; font-size: 14px; }

.fz__media{
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.fz__media img{ width: 100%; height: auto; display:block; }

/* reverse row on desktop */
.fz__row--reverse{ grid-template-columns: .95fr 1.05fr; }
.fz__row--reverse .fz__text{ order: 2; }
.fz__row--reverse .fz__media{ order: 1; }

/* Mobile: stack image top, text bottom */
@media (max-width: 820px){
  .fz__row{ grid-template-columns: 1fr; }
  .fz__media{ order: 1; }
  .fz__text{ order: 2; }
}


/* ===============================
   Reveal (fade-in on scroll)
================================= */
.reveal{ opacity:0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.reveal.is-visible{ opacity:1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ transition:none; transform:none; opacity:1; }
}

/* ===============================
   Features cards (Playlog-ish)
================================= */
.features-cards{ padding: clamp(36px, 5vw, 76px) 0; background: #fff; }
.features-cards__head{ max-width: 760px; margin: 0 auto 22px; text-align: center; }
.features-cards__head h2{ margin:0 0 8px; letter-spacing:-0.02em; }
.features-cards__head p{ margin:0; color: var(--muted); }

.features-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2.5vw, 26px);
  align-items: start;
}
.feature-card{
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 18px;
  background: #fff;
}
.feature-card h3{ margin: 0 0 6px; letter-spacing:-0.01em; }
.feature-card p{ margin: 0 0 14px; color: var(--muted); line-height: 1.45; }
.btn--pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 18px;
  border-radius: 999px;
  text-decoration:none;
  border: 1px solid rgba(15,27,61,.12);
  color: var(--ink);
  background: #fff;
}
.btn--pill:hover{ box-shadow: 0 8px 22px rgba(15,27,61,.12); }

/* ===============================
   Mini carousel inside card
   (Partial preview + snap)
================================= */
.shot-carousel{ position: relative; margin-bottom: 10px; }
.shot-track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%; /* partial preview */
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 12px;
  -webkit-overflow-scrolling: touch;
  padding: 6px 6px 12px;
  border-radius: 18px;
}
.shot-item{
  scroll-snap-align: center;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
}
.shot-item img{ width:100%; height:auto; display:block; }

.shot-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.92);
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 24px;
  line-height: 1;
  z-index: 2;
}
.shot-nav--prev{ left: -6px; }
.shot-nav--next{ right: -6px; }
.shot-nav[disabled]{ opacity:.4; cursor:not-allowed; }

.shot-dots{
  display:flex;
  gap: 8px;
  justify-content: center;
  margin: 8px 0 14px;
}
.shot-dots button{
  width: 8px; height: 8px;
  border-radius: 999px;
  border: 0;
  background: rgba(15,27,61,.22);
  cursor: pointer;
}
.shot-dots button[aria-current="true"]{
  width: 18px;
  background: rgba(15,27,61,.65);
}

/* ===============================
   Zigzag section
================================= */
.features-zigzag{ padding: clamp(38px, 5vw, 86px) 0; background: #fafbff; }
.features-zigzag__head{ max-width: 820px; margin: 0 auto 18px; text-align:center; }
.features-zigzag__head p{ margin: 0; color: var(--muted); }

.fz-row{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(16px, 3vw, 40px);
  align-items: center;
  padding: clamp(16px, 3vw, 28px) 0;
}
.fz-row--reverse{ grid-template-columns: .95fr 1.05fr; }
.fz-row--reverse .fz-text{ order: 2; }
.fz-row--reverse .fz-media{ order: 1; }

.fz-text h3{ margin: 0 0 8px; letter-spacing:-0.01em; }
.fz-text p{ margin: 0 0 12px; color: var(--muted); }
.fz-text ul{ margin: 0; padding-left: 18px; color: rgba(15,27,61,.86); }

.fz-media{
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: var(--shadow);
  background: #fff;
}
.fz-media img{ width:100%; height:auto; display:block; }

/* Responsive */
@media (max-width: 980px){
  .features-grid{ grid-template-columns: 1fr; }
  .shot-nav{ display:none; } /* swipe-centric */
  .shot-track{ grid-auto-columns: 88%; }
  .fz-row{ grid-template-columns: 1fr; }
  .fz-media{ order: 1; }
  .fz-text{ order: 2; }
}


/* --- Landing Features: center + enlarge Detail button --- */
.feature-card .btn--pill{
  display: inline-flex;
  width: fit-content;
  margin: 18px auto 0;
  padding: 14px 28px;
  font-size: 18px;
  font-weight: 600;
}
.feature-card{ text-align: center; }
.feature-card h3,
.feature-card > p{ text-align: left; } /* keep heading/desc align */
@media (max-width: 640px){
  .feature-card .btn--pill{ font-size: 17px; padding: 13px 26px; }
}

/* ===============================
   Dashboard preview inside Feature carousels
   (iframe cropped + subtle drift)
================================= */
.dash-shot{
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: var(--shadow);
  height: clamp(180px, 22vw, 280px);
}
.dash-frame{
  width: 1440px;
  height: 900px;
  border: 0;
  pointer-events: none;
  transform-origin: top left;
  /* per-variant variables */
  --tx: -90px;
  --ty: -70px;
  --scale: .62;
  transform: translate(var(--tx), var(--ty)) scale(var(--scale));
  animation: dashFloat 5.8s ease-in-out infinite;
}
.dash-shot--kpi .dash-frame{ --tx: -90px; --ty: -70px; --scale: .62; }
.dash-shot--charts .dash-frame{ --tx: -90px; --ty: -210px; --scale: .62; }
.dash-shot--map .dash-frame{ --tx: -320px; --ty: -120px; --scale: .62; }

@keyframes dashFloat{
  0%,100%{ transform: translate(var(--tx), var(--ty)) scale(var(--scale)); }
  50%{ transform: translate(var(--tx), calc(var(--ty) - 18px)) scale(var(--scale)); }
}

/* pause drift when user focuses/hover on the card */
.feature-card:hover .dash-frame,
.feature-card:focus-within .dash-frame{ animation-play-state: paused; }

@media (prefers-reduced-motion: reduce){
  .dash-frame{ animation: none; }
}

/* ===============================
   Make Detail button a true primary CTA
================================= */
.feature-card .btn--pill{
  min-width: 240px;
  justify-content: center;
  padding: 16px 44px;
  font-size: 20px;
  font-weight: 700;
  border-radius: 999px;
}
@media (max-width: 640px){
  .feature-card .btn--pill{ min-width: 210px; padding: 15px 34px; font-size: 18px; }
}

/* ===============================
   Detail pages: bigger + centered layout
================================= */
.plain-card{
  margin-left: auto;
  margin-right: auto;
  max-width: 980px;
}
.plain-card h1{ font-size: 32px; }
.plain-card p{ font-size: 15px; }

/* bring "How it works" closer and remove heavy background on detail */
.detail-how{
  background: transparent;
  padding: 26px 0 54px;
}
.detail-how .features-zigzag__head{ margin-bottom: 12px; }
.detail-how .features-zigzag__head h2{ font-size: clamp(22px, 3vw, 32px); }

/* make zigzag cards feel larger on detail pages */
.detail-how .fz-row{ gap: clamp(18px, 3vw, 54px); }
.detail-how .fz-text h3{ font-size: 20px; }
.detail-how .fz-text p,
.detail-how .fz-text li{ font-size: 15px; }

@media (max-width: 980px){
  .plain-card{ max-width: 920px; }
}


/* Dashboard screenshot images (replaces iframe previews) */
.dash-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: translateY(0);
  animation: shotFloat 7s ease-in-out infinite;
}
@keyframes shotFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}
/* pause motion when user interacts */
.feature-card:hover .dash-img,
.feature-card:focus-within .dash-img{
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce){
  .dash-img{ animation: none; }
}


/* ===== Detail pages: subtle media drift ===== */
.media-drift{
  position: relative;
}
.media-drift img{
  animation: mediaDrift 5.5s ease-in-out infinite;
  transform-origin: center;
}
.media-drift.is-paused img{ animation-play-state: paused; }

@keyframes mediaDrift{
  0%{ transform: translateY(0px); }
  50%{ transform: translateY(-6px); }
  100%{ transform: translateY(0px); }
}

@media (prefers-reduced-motion: reduce){
  .media-drift img{ animation: none !important; }
}