:root {
    --ibi-red:        #CC2229;
    --ibi-red-700:    #A41A20;
    --ibi-red-50:     #FBECED;
    --ibi-navy:       #1C3766;
    --ibi-navy-700:   #142849;
    --ibi-navy-900:   #0B172E;
    --ibi-navy-300:   #4A6493;
    --ibi-navy-50:    #EAEEF6;
    --ibi-gray-50:    #F7F8FA;
    --ibi-gray-100:   #EEF0F4;
    --ibi-gray-200:   #DDE1E8;
    --ibi-gray-300:   #C4CAD3;
    --ibi-gray-400:   #98A0AD;
    --ibi-gray-500:   #6B7280;
    --ibi-gray-700:   #3A414C;
    --ibi-gray-900:   #1A1D23;

    --shadow-1: 0 1px 2px rgba(11,23,46,0.06), 0 1px 1px rgba(11,23,46,0.04);
    --shadow-2: 0 4px 12px rgba(11,23,46,0.08), 0 1px 2px rgba(11,23,46,0.06);
    --shadow-3: 0 12px 28px rgba(11,23,46,0.14), 0 2px 6px rgba(11,23,46,0.06);

    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  * { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  html { scroll-behavior: smooth; }
  /* Anchor offset: account for sticky header (~72px) when jumping via #section links */
  section[id], div[id^="service-"], .service-card[id] { scroll-margin-top: 84px; }
  body {
    font-family: 'Inter', sans-serif;
    color: var(--ibi-gray-700);
    background: #fff;
  }

  .font-display { font-family: 'Montserrat', sans-serif; }

  /* Eyebrow label — brand signature */
  .eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ibi-red);
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .eyebrow::before {
    content: '';
    display: block;
    width: 24px;
    height: 2px;
    background: var(--ibi-red);
  }
  .eyebrow-on-navy { color: #fff; }
  .eyebrow-on-navy::before { background: #fff; }

  /* Section title — red underline bar 6px × 48px */
  .section-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    color: var(--ibi-gray-900);
    text-transform: uppercase;
    letter-spacing: -0.005em;
    line-height: 1.1;
    position: relative;
    padding-bottom: 20px;
    margin-bottom: 24px;
  }
  .section-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48px;
    height: 6px;
    background: var(--ibi-red);
  }
  .section-title.center { text-align: center; }
  .section-title.center::after { left: 50%; transform: translateX(-50%); }
  .section-title.on-navy { color: #fff; }

  /* Buttons */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.02em;
    padding: 12px 22px;
    border-radius: 6px;
    transition: all 180ms var(--ease-out);
    cursor: pointer;
    border: 2px solid transparent;
    text-transform: uppercase;
  }
  .btn-primary { background: var(--ibi-red); color: #fff; }
  .btn-primary:hover { background: var(--ibi-red-700); transform: translateY(-1px); }
  .btn-primary:active { transform: scale(0.98); }

  .btn-outline-white { border-color: rgba(255,255,255,0.4); color: #fff; background: transparent; }
  .btn-outline-white:hover { background: #fff; color: var(--ibi-navy); border-color: #fff; }

  .btn-outline-navy { border-color: var(--ibi-navy); color: var(--ibi-navy); background: transparent; }
  .btn-outline-navy:hover { background: var(--ibi-navy); color: #fff; }

  /* Cards */
  .card {
    background: #fff;
    border: 1px solid var(--ibi-gray-200);
    border-radius: 8px;
    box-shadow: var(--shadow-1);
    transition: all 220ms var(--ease-out);
    position: relative;
    overflow: hidden;
  }
  .card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-3);
    border-color: var(--ibi-gray-300);
  }
  .service-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 0;
    height: 4px;
    background: var(--ibi-red);
    transition: width 280ms var(--ease-out);
  }
  .service-card:hover::before { width: 100%; }

  /* Dotted grid background */
  .dot-grid {
    background-image: radial-gradient(circle, var(--ibi-gray-300) 1px, transparent 1px);
    background-size: 24px 24px;
  }

  /* Hero — navy with subtle texture */
  .hero {
    /* Fallback background — visible while video loads or if video fails */
    background:
      radial-gradient(ellipse 80% 60% at 80% 20%, rgba(204,34,41,0.18) 0%, transparent 60%),
      radial-gradient(ellipse 60% 80% at 10% 90%, rgba(74,100,147,0.35) 0%, transparent 50%),
      var(--ibi-navy);
    position: relative;
    overflow: hidden;
  }

  /* ===== HERO VIDEO BACKGROUND ===== */
  .hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
  }

  /* Navy multiply overlay — sits between video and content for text readability.
     Cool, slightly desaturated feel matches the brand photography guidelines
     ("30-50% navy multiply over field photography"). */
  .hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(11,23,46,0.55) 0%, rgba(28,55,102,0.7) 50%, rgba(11,23,46,0.85) 100%),
      radial-gradient(ellipse 70% 50% at 75% 30%, rgba(204,34,41,0.18) 0%, transparent 60%);
  }
  /* Dotted grid pattern overlaid for subtle texture */
  .hero-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 64px 64px;
    pointer-events: none;
  }

  /* ===== ANIMATED NETWORK ON HERO =====
     Brand-true visualization: echoes the IBINET logo's globe-with-cabling DNA.
     A slowly drifting globe meridian/parallel cage carries a node mesh whose
     links "draw in" on load, then data packets travel edge-to-edge — reading
     as live telecom backbone traffic across an archipelago. Deliberate motion
     (no spring/bounce), brand easing, fully reduced-motion safe. */
  .hero-network {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    opacity: 0.85;
  }

  /* ===== HERO ANIMATION ENHANCEMENT LAYERS ===== */

  /* Hero media slot — accepts img/video/gif. Hidden by default,
     visible when data-hero-mode="media" set on <section id="hero">. */
  .hero-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    pointer-events: none;
    display: none;
  }
  #hero[data-hero-mode="media"] .hero-media { display: block; }
  /* When media is active, dim ambient layers so they don't fight the photo */
  #hero[data-hero-mode="media"] .hero-gradient-breath,
  #hero[data-hero-mode="media"] .hero-particles,
  #hero[data-hero-mode="media"] .hero-network { opacity: 0.18; }

  /* Gradient breathing — radial that subtly shifts to suggest depth/movement */
  .hero-gradient-breath {
    position: absolute;
    inset: -10%;
    z-index: 1;
    pointer-events: none;
    background:
      radial-gradient(ellipse 70% 60% at 30% 40%,
                      rgba(28, 123, 194, 0.22) 0%, transparent 60%),
      radial-gradient(ellipse 60% 50% at 75% 65%,
                      rgba(204, 34, 41, 0.16) 0%, transparent 55%);
    animation: heroBreath 14s ease-in-out infinite alternate;
    transform: translate3d(
      calc(var(--mx, 0) * -18px),
      calc(var(--my, 0) * -12px),
      0);
    transition: transform 600ms var(--ease-out);
  }
  @keyframes heroBreath {
    0%   { background-position: 0% 0%, 100% 100%; filter: blur(0px); }
    50%  { filter: blur(2px); }
    100% { background-position: 12% 8%, 88% 92%; filter: blur(0px); }
  }

  /* Ambient particles — small floating dots over background */
  .hero-particles {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
  }
  .hero-particles span {
    position: absolute;
    left: var(--p-x);
    top: var(--p-y);
    width: var(--p-size);
    height: var(--p-size);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.35);
    opacity: 0;
    animation: heroParticleFloat var(--p-dur) ease-in-out infinite;
    animation-delay: var(--p-delay);
  }
  @keyframes heroParticleFloat {
    0%   { transform: translate(0, 0)   scale(0.6); opacity: 0; }
    10%  { opacity: 0.9; }
    50%  { transform: translate(14px, -28px) scale(1); opacity: 0.7; }
    90%  { opacity: 0.5; }
    100% { transform: translate(-6px, -56px) scale(0.4); opacity: 0; }
  }

  /* Mouse parallax — applied to .parallax-layer (hero-network SVG).
     CSS vars --mx/--my set by JS in range -1..+1 based on cursor offset. */
  .parallax-layer {
    transform: translate3d(
      calc(var(--mx, 0) * 14px),
      calc(var(--my, 0) * 10px),
      0);
    transition: transform 500ms var(--ease-out);
    will-change: transform;
  }

  /* Headline accent glow pulse — gives the red "Network" word a subtle
     attention-pull without making it look like a button. */
  .hero-headline-accent {
    text-shadow: 0 0 0 transparent;
    animation: heroAccentGlow 3.6s ease-in-out infinite;
  }
  @keyframes heroAccentGlow {
    0%, 100% { text-shadow: 0 0 0 transparent; }
    50%      { text-shadow: 0 0 36px rgba(204, 34, 41, 0.55),
                            0 0 8px rgba(204, 34, 41, 0.35); }
  }

  /* Reduce motion: turn off the heavy effects, keep functional layers */
  @media (prefers-reduced-motion: reduce) {
    .hero-gradient-breath,
    .hero-particles span,
    .hero-headline-accent { animation: none; }
    .parallax-layer { transition: none; transform: none; }
  }

  /* Globe cage — drifts very slowly to suggest a rotating planet behind the mesh */
  @keyframes globeDrift {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-26px); }
  }
  .hero-globe {
    transform-origin: center;
    animation: globeDrift 38s linear infinite alternate;
  }

  /* Links draw themselves in on load (stroke-dash reveal), then settle */
  @keyframes linkDraw {
    0%   { stroke-dashoffset: var(--len); opacity: 0; }
    18%  { opacity: 0.6; }
    100% { stroke-dashoffset: 0; opacity: 0.55; }
  }
  .net-link {
    stroke: rgba(255,255,255,0.16);
    stroke-width: 1;
    fill: none;
    stroke-dasharray: var(--len);
    stroke-dashoffset: var(--len);
    animation: linkDraw 2.4s var(--ease-out) forwards;
    animation-delay: var(--d, 0s);
  }
  .net-link.is-trunk { stroke: rgba(204,34,41,0.34); stroke-width: 1.25; }

  /* Node pulse / glow halo */
  @keyframes nodePulse {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
  }
  @keyframes nodeGlow {
    0%, 100% { opacity: 0.25; transform: scale(0.8); }
    50%      { opacity: 0.65; transform: scale(1.18); }
  }
  .node-pulse {
    transform-origin: center;
    transform-box: fill-box;
    animation: nodePulse 3.4s ease-in-out infinite;
  }
  .node-glow {
    transform-origin: center;
    transform-box: fill-box;
    animation: nodeGlow 3.4s ease-in-out infinite;
  }

  /* Data packets travel along trunk links via SVG <animateMotion> in markup;
     this class only governs their fade so they don't blink in at t=0 */
  @keyframes packetFade {
    0%   { opacity: 0; }
    8%   { opacity: 1; }
    92%  { opacity: 1; }
    100% { opacity: 0; }
  }
  .net-packet {
    animation: packetFade 3.2s linear infinite;
    animation-delay: var(--pd, 0s);
  }

  /* Ring sweep on the brand hub node — a slow radar-style outward sweep */
  @keyframes hubSweep {
    0%   { r: 6; opacity: 0.5; }
    100% { r: 64; opacity: 0; }
  }
  .net-hub-ring {
    animation: hubSweep 4.2s var(--ease-out) infinite;
  }
  .net-hub-ring.delay { animation-delay: 2.1s; }

  @media (prefers-reduced-motion: reduce) {
    .hero-globe { animation: none; }
    .net-link {
      animation: none;
      stroke-dashoffset: 0;
      opacity: 0.5;
    }
    .net-link.is-trunk { opacity: 0.5; }
    .node-pulse, .node-glow { animation: none; }
    .net-packet, .net-hub-ring { display: none; }
  }

  /* ===== HERO LAYOUT — fit to viewport ===== */
  /* Hero must fit within first viewport on load. We size it to viewport height
     minus the header (72px), so user always sees the full content + scroll indicator. */
  .hero {
    min-height: 100vh;
    padding-top: 96px;
    padding-bottom: 72px;
  }
  @media (min-height: 800px) {
    .hero { padding-top: 112px; padding-bottom: 80px; }
  }

  /* ===== HERO FRAME — 4 corner brackets (brand signature) ===== */
  .hero-frame {
    position: absolute;
    inset: 88px 24px 24px 24px;
    z-index: 3;
    pointer-events: none;
  }
  @media (min-width: 1024px) {
    .hero-frame { inset: 96px 32px 32px 32px; }
  }
  .hero-corner {
    position: absolute;
    width: 24px;
    height: 24px;
    border-color: rgba(255,255,255,0.35);
    border-style: solid;
    border-width: 0;
  }
  .hero-corner.top-left {
    top: 0; left: 0;
    border-top-width: 1px; border-left-width: 1px;
  }
  .hero-corner.top-right {
    top: 0; right: 0;
    border-top-width: 1px; border-right-width: 1px;
  }
  .hero-corner.bottom-left {
    bottom: 0; left: 0;
    border-bottom-width: 1px; border-left-width: 1px;
  }
  .hero-corner.bottom-right {
    bottom: 0; right: 0;
    border-bottom-width: 1px; border-right-width: 1px;
  }

  /* ===== VERTICAL MARKER (left edge) ===== */
  .hero-vertical-marker {
    position: absolute;
    left: 32px;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
    align-items: center;
    gap: 16px;
    z-index: 4;
    pointer-events: none;
  }
  .hero-vertical-num {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 13px;
    color: var(--ibi-red);
    letter-spacing: 0.1em;
  }
  .hero-vertical-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 10px;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.4em;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    text-transform: uppercase;
    white-space: nowrap;
  }

  /* ===== HERO PILL (eyebrow alternative) ===== */
  .hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 999px;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .hero-pill-dot {
    width: 6px;
    height: 6px;
    background: var(--ibi-red);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(204,34,41,0.8);
    animation: dotPulse 1.6s ease-in-out infinite;
  }
  @keyframes dotPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
  }

  /* ===== HERO HEADLINE — refined sizing ===== */
  .hero-headline {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    margin-top: 20px;
    line-height: 0.94;
    letter-spacing: -0.025em;
    /* Critical: scaled to fit. clamp keeps this readable on all sizes */
    font-size: clamp(34px, 5.5vw, 68px);
  }
  .hero-headline-line {
    display: block;
  }
  .hero-headline-accent {
    color: var(--ibi-red);
    position: relative;
    display: inline-block;
  }
  .hero-headline-accent::after {
    content: '';
    position: absolute;
    bottom: 4%;
    left: 0;
    width: 100%;
    height: 6%;
    background: var(--ibi-red);
    opacity: 0.18;
    z-index: -1;
  }

  /* Subline */
  .hero-subline {
    color: rgba(255,255,255,0.72);
    font-size: clamp(14px, 1.4vw, 16px);
    line-height: 1.55;
    margin-top: 18px;
    max-width: 540px;
  }

  /* ===== INLINE STATS (replaces grid 4-col) ===== */
  .hero-inline-stats {
    display: flex;
    align-items: stretch;
    gap: clamp(14px, 2vw, 28px);
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.14);
    flex-wrap: wrap;
  }
  .hero-stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .hero-stat-num {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(20px, 2vw, 26px);
    line-height: 1;
    color: #fff;
    letter-spacing: -0.02em;
  }
  .hero-stat-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 9.5px;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
  }
  .hero-stat-divider {
    width: 1px;
    background: rgba(255,255,255,0.14);
    align-self: stretch;
  }

  /* ===== STATUS CARD (right side) ===== */
  .hero-status-card {
    background: rgba(11,23,46,0.55);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 24px 48px rgba(11,23,46,0.4);
    overflow: hidden;
  }
  .hero-status-header {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .hero-status-led {
    width: 8px;
    height: 8px;
    background: #1E7F4D;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(30,127,77,0.25);
    animation: ledBlink 2.4s ease-in-out infinite;
    flex-shrink: 0;
  }
  @keyframes ledBlink {
    0%, 100% { box-shadow: 0 0 0 3px rgba(30,127,77,0.25); }
    50%      { box-shadow: 0 0 0 5px rgba(30,127,77,0.1); }
  }
  .hero-status-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11px;
    color: #fff;
    letter-spacing: 0.14em;
  }
  .hero-status-sub {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    color: rgba(255,255,255,0.55);
    margin-top: 2px;
  }
  .hero-status-tag {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11px;
    color: #1E7F4D;
    background: rgba(30,127,77,0.15);
    padding: 4px 10px;
    border-radius: 4px;
    letter-spacing: 0.04em;
  }

  /* Coverage rows */
  .hero-coverage {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .hero-coverage-row {
    display: grid;
    grid-template-columns: 110px 1fr 36px;
    align-items: center;
    gap: 10px;
  }
  .hero-coverage-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: rgba(255,255,255,0.85);
    font-weight: 500;
  }
  .hero-coverage-label svg { color: var(--ibi-red); flex-shrink: 0; }
  .hero-coverage-bar {
    height: 4px;
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
    overflow: hidden;
  }
  .hero-coverage-fill {
    height: 100%;
    background: var(--ibi-red);
    border-radius: 2px;
    width: 0;
    animation: barFill 1.4s var(--ease-out) forwards;
    animation-delay: 600ms;
  }
  @keyframes barFill {
    to { width: var(--w); }
  }
  .hero-coverage-pct {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 10px;
    color: rgba(255,255,255,0.7);
    text-align: right;
    letter-spacing: 0.03em;
  }

  /* Status footer (ticker) */
  .hero-status-footer {
    padding: 12px 20px;
    background: rgba(0,0,0,0.25);
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
  }
  .hero-status-led-sm {
    width: 6px;
    height: 6px;
    background: var(--ibi-red);
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(204,34,41,0.7);
    animation: dotPulse 1.4s ease-in-out infinite;
  }
  .hero-ticker {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .hero-ticker-item span:first-child {
    color: #fff;
    font-weight: 600;
  }

  /* ===== SCROLL INDICATOR ===== */
  .hero-scroll-indicator {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.5);
    z-index: 4;
  }
  .hero-scroll-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-weight: 600;
  }
  .hero-scroll-line {
    width: 1px;
    height: 36px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.5), transparent);
    position: relative;
    overflow: hidden;
  }
  .hero-scroll-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: var(--ibi-red);
    animation: scrollDot 2s ease-in-out infinite;
  }
  @keyframes scrollDot {
    0% { transform: translateY(-100%); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateY(360%); opacity: 0; }
  }

  /* Stat counters */
  .stat-number {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(40px, 6vw, 64px);
    line-height: 1;
    letter-spacing: -0.02em;
    color: #fff;
  }
  .stat-label {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: rgba(255,255,255,0.75);
    line-height: 1.5;
    margin-top: 12px;
  }

  /* Coverage map placeholder */
  .map-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1px;
    background: var(--ibi-navy-700);
    border-radius: 8px;
    overflow: hidden;
  }
  .map-cell {
    background: var(--ibi-navy);
    padding: 18px 20px;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 180ms var(--ease-out);
  }
  .map-cell:hover { background: var(--ibi-navy-700); }
  .map-cell svg { color: var(--ibi-red); flex-shrink: 0; }

  /* ===== INDONESIA MAP ===== */
  .indonesia-map-wrap { position: relative; }
  .map-card {
    background: var(--ibi-navy);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-3);
    border: 1px solid rgba(255,255,255,0.08);
  }
  .map-header {
    padding: 18px 24px;
    background: var(--ibi-navy-900);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
  }
  .map-svg-wrap {
    padding: 24px 16px;
    background:
      radial-gradient(ellipse 60% 40% at 50% 50%, rgba(74,100,147,0.25) 0%, transparent 60%),
      var(--ibi-navy);
  }
  .map-svg-wrap svg { display: block; }

  /* Region chips — mobile-only quick-select for the map */
  .map-region-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px;
    background: var(--ibi-navy);
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  .map-chip {
    appearance: none;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.85);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.04em;
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 180ms var(--ease-out),
                border-color 180ms var(--ease-out),
                color 180ms var(--ease-out);
    white-space: nowrap;
  }
  .map-chip:hover,
  .map-chip:focus-visible {
    background: rgba(204,34,41,0.15);
    border-color: var(--ibi-red);
    color: #fff;
    outline: none;
  }
  .map-chip.active {
    background: var(--ibi-red);
    border-color: var(--ibi-red);
    color: #fff;
  }
  /* Real province paths: base navy fill + subtle white province borders */
  .map-region path,
  .map-region ellipse {
    fill: #2A4A7F;
    stroke: rgba(255,255,255,0.28);
    stroke-width: 0.4;
    transition: fill 220ms var(--ease-out), filter 220ms var(--ease-out);
  }
  .map-region:hover path,
  .map-region:hover ellipse,
  .map-region:focus-visible path,
  .map-region:focus-visible ellipse {
    fill: var(--ibi-navy-300);
    cursor: pointer;
  }
  .map-region { outline: none; }
  .map-pin { cursor: pointer; }
  .pin-pulse {
    transform-origin: center;
    transform-box: fill-box;
    animation: pinPulse 2.4s var(--ease-out) infinite;
  }
  @keyframes pinPulse {
    0%   { transform: scale(0.6); opacity: 0.9; }
    100% { transform: scale(1.6); opacity: 0; }
  }
  .map-pin:hover circle:nth-child(3) { fill: var(--ibi-red-700); }

  .map-footer {
    padding: 18px 24px;
    background: var(--ibi-navy-900);
    border-top: 1px solid rgba(255,255,255,0.08);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  @media (min-width: 640px) {
    .map-footer { grid-template-columns: repeat(4, 1fr); }
  }
  .map-footer-item {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  /* Chips below map */
  .map-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
  }
  .map-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--ibi-gray-200);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: var(--ibi-gray-700);
    letter-spacing: 0.02em;
    transition: all 180ms var(--ease-out);
  }
  .map-chip:hover {
    border-color: var(--ibi-navy-300);
    color: var(--ibi-navy);
    transform: translateY(-1px);
  }
  .map-chip svg { color: var(--ibi-red); }
  .map-chip-primary {
    background: var(--ibi-red);
    color: #fff;
    border-color: var(--ibi-red);
  }
  .map-chip-primary svg { color: #fff; }
  .map-chip-primary:hover {
    background: var(--ibi-red-700);
    color: #fff;
    border-color: var(--ibi-red-700);
  }

  /* ===== MAP UPGRADES ===== */

  /* Filter bar above map */
  .map-filter-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
  }
  .map-filter-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ibi-gray-500);
  }
  .map-filter-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }
  .map-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--ibi-gray-100);
    border: 1px solid var(--ibi-gray-200);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11px;
    color: var(--ibi-gray-700);
    letter-spacing: 0.04em;
    transition: all 180ms var(--ease-out);
    cursor: pointer;
    text-transform: uppercase;
  }
  .map-filter-chip:hover {
    background: #fff;
    border-color: var(--ibi-navy-300);
    color: var(--ibi-navy);
  }
  .map-filter-chip.active {
    background: var(--ibi-red);
    color: #fff;
    border-color: var(--ibi-red);
  }
  .map-filter-chip.active svg { color: #fff; }
  .map-filter-chip svg { color: var(--ibi-red); }

  /* Map legend in header (replaces simple text) */
  .map-legend {
    display: none;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
  }
  @media (min-width: 768px) {
    .map-legend { display: flex; }
  }
  .map-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 10px;
    color: rgba(255,255,255,0.8);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .map-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .map-legend-dot-hq {
    background: var(--ibi-red);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--ibi-red);
  }
  .map-legend-dot-pin {
    background: var(--ibi-red);
  }
  .map-legend-dot-bakti {
    background: var(--ibi-red);
    box-shadow: 0 0 0 3px rgba(204,34,41,0.35);
  }

  /* Map SVG size constraint for very wide viewports */
  .map-svg { max-height: 560px; }

  /* Pin double-pulse for layered ripple effect */
  .pin-pulse {
    transform-origin: center;
    transform-box: fill-box;
    animation: pinPulse 2.4s var(--ease-out) infinite;
  }
  .pin-pulse-2 {
    transform-origin: center;
    transform-box: fill-box;
    animation: pinPulse 2.4s var(--ease-out) infinite;
    animation-delay: 0.6s;
  }
  /* Hide pulse for filtered-out pins */
  .map-pin.dimmed {
    opacity: 0.15;
    pointer-events: none;
  }
  .map-pin.dimmed .pin-pulse,
  .map-pin.dimmed .pin-pulse-2 {
    animation-play-state: paused;
  }

  /* Animated connection lines (data flow effect) */
  .map-connections .conn-line {
    stroke-dasharray: 8 6;
    animation: connFlow 4s linear infinite;
    opacity: 0;
    animation-name: connFlow, connFade;
    animation-duration: 4s, 4s;
    animation-iteration-count: infinite, infinite;
  }
  @keyframes connFlow {
    to { stroke-dashoffset: -56; }
  }
  @keyframes connFade {
    0%, 100% { opacity: 0; }
    20%, 80% { opacity: 0.55; }
  }

  /* Active region — glow effect */
  .map-region.active path,
  .map-region.active ellipse {
    fill: var(--ibi-navy-300);
    filter: drop-shadow(0 0 8px rgba(204,34,41,0.4));
  }

  /* Tooltip — appears on hover */
  .map-tooltip {
    position: absolute;
    pointer-events: none;
    background: rgba(11,23,46,0.95);
    backdrop-filter: blur(8px);
    color: #fff;
    padding: 8px 14px;
    border-radius: 6px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid rgba(204,34,41,0.5);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    opacity: 0;
    transform: translate(-50%, -130%);
    transition: opacity 160ms var(--ease-out);
    z-index: 8;
    white-space: nowrap;
  }
  .map-tooltip.show { opacity: 1; }
  .map-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(11,23,46,0.95);
  }

  /* Service icons row in detail panel */
  .map-detail-services {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 16px;
  }
  .map-detail-service {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--ibi-navy-50);
    color: var(--ibi-navy);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .map-detail-service svg {
    width: 12px;
    height: 12px;
    color: var(--ibi-red);
  }
  .map-detail-service.bakti {
    background: var(--ibi-red);
    color: #fff;
  }
  .map-detail-service.bakti svg { color: #fff; }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .pin-pulse, .pin-pulse-2 { animation: none; }
    .map-connections .conn-line { animation: none; opacity: 0.3; }
  }

  /* Client logo placeholder */
  .client-logo {
    height: 70px;
    border: 1px solid var(--ibi-gray-200);
    border-radius: 8px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--ibi-gray-400);
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: all 180ms var(--ease-out);
  }
  .client-logo:hover {
    border-color: var(--ibi-navy-300);
    color: var(--ibi-navy);
  }

  /* ===== CLIENTS — LOGO MARQUEE (ref: gambar 1) ===== */
  .logo-marquee {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .logo-marquee-track {
    display: flex;
    width: max-content;
    gap: 64px;
    align-items: center;
    animation: logoMarquee 42s linear infinite;
  }
  .logo-marquee:hover .logo-marquee-track { animation-play-state: paused; }
  @keyframes logoMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  .marquee-logo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(18px, 2.2vw, 28px);
    letter-spacing: 0.02em;
    color: var(--ibi-gray-300);
    white-space: nowrap;
    transition: color 200ms var(--ease-out);
    user-select: none;
    line-height: 1.1;
  }
  .marquee-logo small {
    display: block;
    font-size: 0.5em;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--ibi-gray-300);
  }
  .marquee-logo:hover { color: var(--ibi-navy); }
  .marquee-logo-img {
    height: clamp(28px, 3.4vw, 44px);
    width: auto;
    object-fit: contain;
    display: block;
    filter: grayscale(1);
    opacity: 0.55;
    transition: filter 200ms var(--ease-out), opacity 200ms var(--ease-out);
    user-select: none;
    -webkit-user-drag: none;
  }
  .marquee-logo-img:hover { filter: grayscale(0); opacity: 1; }
  @media (prefers-reduced-motion: reduce) {
    .logo-marquee-track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; }
    .logo-marquee { -webkit-mask-image: none; mask-image: none; }
  }

  /* ===== INFO — NEWS ROOM (ref: gambar 2) ===== */
  .news-filter {
    display: inline-flex;
    background: var(--ibi-navy-50);
    border-radius: 999px;
    padding: 5px;
    gap: 4px;
  }
  .news-filter button {
    border: 0;
    background: transparent;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: var(--ibi-navy);
    padding: 9px 22px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 180ms var(--ease-out);
  }
  .news-filter button.active {
    background: var(--ibi-navy);
    color: #fff;
  }
  .news-pill {
    border: 1px solid var(--ibi-gray-200);
    background: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: var(--ibi-gray-500);
    padding: 8px 18px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 180ms var(--ease-out);
  }
  .news-pill.active {
    background: var(--ibi-red);
    border-color: var(--ibi-red);
    color: #fff;
  }
  .news-pill:not(.active):hover { border-color: var(--ibi-navy-300); color: var(--ibi-navy); }

  .news-card {
    position: relative;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    background: var(--ibi-navy-900);
    isolation: isolate;
  }
  .news-card-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    transition: transform 600ms var(--ease-out);
  }
  .news-card:hover .news-card-media { transform: scale(1.05); }
  .news-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(11,23,46,0) 30%, rgba(11,23,46,0.55) 60%, rgba(11,23,46,0.92) 100%);
  }
  .news-card-body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    padding: 28px;
  }
  .news-badge {
    align-self: flex-start;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    background: var(--ibi-red);
    padding: 5px 11px;
    border-radius: 4px;
    margin-bottom: 14px;
  }
  .news-card h4 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    color: #fff;
    line-height: 1.22;
    margin-bottom: 14px;
  }
  .news-card .news-date {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
  }
  .news-card-featured { min-height: 520px; }
  .news-card-featured h4 { font-size: clamp(20px, 2.2vw, 28px); }
  .news-card-sm { min-height: 248px; }
  .news-card-sm h4 { font-size: 16px; }
  .news-card-sm .news-card-body { padding: 22px; }

  /* Header */
  header.site-header {
    background: rgba(28, 55, 102, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }

  /* Hero animation on load */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .fade-up { animation: fadeUp 600ms var(--ease-out) both; }
  .delay-1 { animation-delay: 80ms; }
  .delay-2 { animation-delay: 160ms; }
  .delay-3 { animation-delay: 240ms; }
  .delay-4 { animation-delay: 320ms; }

  /* Service icon container */
  .service-icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: var(--ibi-navy-50);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ibi-navy);
    transition: all 220ms var(--ease-out);
  }
  .service-card:hover .service-icon-wrap {
    background: var(--ibi-red-50);
    color: var(--ibi-red);
  }

  /* ===== SIMPLIFIED SERVICE CARDS ===== */
  .service-card-simple {
    position: relative;
    background: #fff;
    border: 1px solid var(--ibi-gray-200);
    border-radius: 12px;
    padding: 32px;
    overflow: hidden;
    transition: transform 220ms var(--ease-out),
                box-shadow 220ms var(--ease-out),
                border-color 220ms var(--ease-out);
  }
  .service-card-simple::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 0; height: 3px;
    background: var(--ibi-red);
    transition: width 280ms var(--ease-out);
  }
  .service-card-simple:hover {
    transform: translateY(-4px);
    border-color: var(--ibi-gray-200);
    box-shadow: 0 14px 32px -12px rgba(11,23,46,0.18);
  }
  .service-card-simple:hover::before { width: 100%; }
  .service-card-simple:hover .service-icon-wrap {
    background: var(--ibi-red-50);
    color: var(--ibi-red);
  }
  .service-card-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 19px;
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--ibi-gray-900);
    margin-bottom: 12px;
  }
  .service-card-desc {
    font-size: 14px;
    line-height: 1.65;
    color: var(--ibi-gray-500);
  }
  .service-card-wide { padding: 36px; }
  @media (prefers-reduced-motion: reduce) {
    .service-card-simple,
    .service-card-simple::before { transition: none; }
    .service-card-simple:hover { transform: none; }
  }

  /* Milestone */
  .milestone-line {
    background: linear-gradient(to bottom, var(--ibi-gray-200) 0%, var(--ibi-gray-200) 100%);
  }
  .milestone-dot {
    width: 14px;
    height: 14px;
    background: var(--ibi-red);
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px var(--ibi-red-50);
  }

  /* Mobile nav */
  .mobile-menu { display: none; }
  .mobile-menu.open { display: block; }

  /* ===== LANGUAGE DROPDOWN ===== */
  .lang-dropdown {
    position: relative;
    font-family: 'Montserrat', sans-serif;
  }
  .lang-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 6px;
    padding: 6px 10px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all 180ms var(--ease-out);
  }
  .lang-trigger:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.24);
  }
  .lang-trigger .lang-flag-mark {
    width: 18px;
    height: 12px;
    border-radius: 2px;
    overflow: hidden;
    display: inline-block;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.2);
  }
  .lang-trigger .chevron {
    transition: transform 200ms var(--ease-out);
  }
  .lang-dropdown.open .chevron {
    transform: rotate(180deg);
  }
  .lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background: #fff;
    border-radius: 8px;
    box-shadow: var(--shadow-3);
    border: 1px solid var(--ibi-gray-200);
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: all 220ms var(--ease-out);
    z-index: 100;
  }
  .lang-dropdown.open .lang-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .lang-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    width: 100%;
    border: none;
    background: transparent;
    color: var(--ibi-gray-700);
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: all 160ms var(--ease-out);
    border-left: 3px solid transparent;
  }
  .lang-option:hover {
    background: var(--ibi-gray-50);
    color: var(--ibi-navy);
  }
  .lang-option.active {
    background: var(--ibi-red-50);
    color: var(--ibi-red);
    border-left-color: var(--ibi-red);
  }
  .lang-option .lang-flag-mark {
    width: 22px;
    height: 14px;
    border-radius: 2px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--ibi-gray-200);
  }
  .lang-option-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
  }
  .lang-option-name { font-weight: 700; font-size: 13px; }
  .lang-option-code {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ibi-gray-400);
    font-weight: 600;
    margin-top: 2px;
  }
  .lang-option.active .lang-option-code { color: var(--ibi-red); }

  /* ===== SCROLL REVEAL ===== */
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
    will-change: opacity, transform;
  }
  .reveal.in-view {
    opacity: 1;
    transform: translateY(0);
  }
  .reveal.r-delay-1 { transition-delay: 80ms; }
  .reveal.r-delay-2 { transition-delay: 160ms; }
  .reveal.r-delay-3 { transition-delay: 240ms; }
  .reveal.r-delay-4 { transition-delay: 320ms; }
  .reveal.r-delay-5 { transition-delay: 400ms; }
  .reveal.r-delay-6 { transition-delay: 480ms; }
  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .pin-pulse { animation: none; }
  }

  /* ===== EXPANDABLE SERVICE CARDS ===== */
  .service-card { cursor: pointer; }
  .service-card.expanded {
    border-color: var(--ibi-red);
    box-shadow: 0 12px 32px rgba(204,34,41,0.12), 0 4px 8px rgba(11,23,46,0.08);
  }
  .service-card.expanded::before { width: 100%; }
  .service-detail {
    max-height: 0;
    overflow: hidden;
    transition: max-height 320ms var(--ease-out), margin-top 320ms var(--ease-out);
    margin-top: 0;
  }
  .service-card.expanded .service-detail {
    max-height: 600px;
    margin-top: 20px;
  }
  .service-detail-inner {
    padding-top: 20px;
    border-top: 1px dashed var(--ibi-gray-200);
  }
  .expand-indicator {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ibi-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ibi-gray-500);
    transition: all 220ms var(--ease-out);
  }
  .service-card:hover .expand-indicator {
    background: var(--ibi-red-50);
    color: var(--ibi-red);
  }
  .service-card.expanded .expand-indicator {
    background: var(--ibi-red);
    color: #fff;
    transform: rotate(45deg);
  }
  .service-card.expanded .service-icon-wrap {
    background: var(--ibi-red-50);
    color: var(--ibi-red);
  }

  /* ===== MAP DETAIL PANEL ===== */
  .map-svg-wrap { position: relative; }
  .map-region path,
  .map-region ellipse {
    transition: fill 220ms var(--ease-out);
    cursor: pointer;
  }
  .map-region:hover path,
  .map-region:hover ellipse,
  .map-region.active path,
  .map-region.active ellipse {
    fill: var(--ibi-navy-300);
  }
  .map-detail-panel {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 280px;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(8px);
    border-radius: 8px;
    padding: 20px;
    box-shadow: var(--shadow-3);
    border: 1px solid var(--ibi-gray-200);
    opacity: 0;
    transform: translateX(20px);
    pointer-events: none;
    transition: all 280ms var(--ease-out);
    z-index: 10;
  }
  .map-detail-panel.show {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
  }
  .map-detail-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ibi-gray-100);
    color: var(--ibi-gray-500);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 180ms var(--ease-out);
  }
  .map-detail-close:hover { background: var(--ibi-red); color: #fff; }
  @media (max-width: 768px) {
    .map-detail-panel {
      position: fixed;
      top: auto;
      bottom: 20px;
      left: 20px;
      right: 20px;
      width: auto;
    }
  }

  /* ===== BACK TO TOP ===== */
  .back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    background: var(--ibi-red);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-3);
    cursor: pointer;
    border: none;
    z-index: 40;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: all 280ms var(--ease-out);
  }
  .back-to-top.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .back-to-top:hover { background: var(--ibi-red-700); transform: translateY(-2px); }

  /* ===== FLOATING WHATSAPP BUTTON ===== */
  .floating-wa {
    position: fixed;
    bottom: 88px;
    right: 24px;
    width: 56px;
    height: 56px;
    background: #25D366;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
    z-index: 41;
    text-decoration: none;
    transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
    animation: floating-wa-pulse 2.4s ease-in-out infinite;
  }
  .floating-wa:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 28px rgba(37, 211, 102, 0.5);
    color: #fff;
  }
  .floating-wa svg { display: block; }
  @keyframes floating-wa-pulse {
    0%, 100% { box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4), 0 0 0 0 rgba(37, 211, 102, 0.45); }
    50%      { box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4), 0 0 0 12px rgba(37, 211, 102, 0); }
  }
  @media (max-width: 640px) {
    .floating-wa {
      width: 52px;
      height: 52px;
      bottom: 80px;
      right: 16px;
    }
    .floating-wa svg { width: 26px; height: 26px; }

    /* Map card sizing on mobile: prevent overflow, tighten paddings */
    .indonesia-map-wrap { max-width: 100%; }
    .map-card { max-width: 100%; }
    .map-header { padding: 14px 16px; }
    .map-header > div:first-child { gap: 10px; }
    .map-header .map-legend { display: none; }
    .map-svg-wrap { padding: 16px 8px; }
    .map-svg { max-height: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .floating-wa { animation: none; }
  }

  /* Custom scrollbar */
  ::selection { background: var(--ibi-red); color: #fff; }

  .lang-option-mobile {
    padding: 8px 16px;
    border-radius: 6px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    background: rgba(28,55,102,0.05);
    border: 1px solid rgba(28,55,102,0.15);
    color: var(--ibi-navy);
    cursor: pointer;
    transition: all 180ms var(--ease-out);
  }
  .lang-option-mobile.active {
    background: var(--ibi-red);
    border-color: var(--ibi-red);
    color: #fff;
  }

  /* ===== SERVICES DROPDOWN (Desktop) ===== */
  .services-dropdown {
    position: relative;
  }
  .services-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    text-transform: uppercase;
  }
  .services-trigger .chevron {
    transition: transform 220ms var(--ease-out);
    margin-top: 1px;
  }
  .services-dropdown.open .services-trigger .chevron { transform: rotate(180deg); }
  .services-dropdown.open .services-trigger { color: #fff; }

  .services-menu {
    position: absolute;
    top: calc(100% + 18px);
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    width: 340px;
    background: #fff;
    border-radius: 10px;
    box-shadow: var(--shadow-3);
    border: 1px solid var(--ibi-gray-200);
    padding: 8px;
    opacity: 0;
    pointer-events: none;
    transition: all 220ms var(--ease-out);
    z-index: 50;
  }
  .services-menu::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 14px;
    height: 14px;
    background: #fff;
    border-left: 1px solid var(--ibi-gray-200);
    border-top: 1px solid var(--ibi-gray-200);
  }
  .services-dropdown.open .services-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  .services-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    transition: background 160ms var(--ease-out);
    text-decoration: none;
  }
  .services-option:hover {
    background: var(--ibi-gray-50);
    text-decoration: none;
  }
  .services-icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: var(--ibi-navy-50);
    color: var(--ibi-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 160ms var(--ease-out);
  }
  .services-option:hover .services-icon-wrap {
    background: var(--ibi-red-50);
    color: var(--ibi-red);
  }
  .services-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.2;
  }
  .services-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: var(--ibi-gray-900);
    text-transform: none;
    letter-spacing: 0;
  }
  .services-desc {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: var(--ibi-gray-500);
    text-transform: none;
    letter-spacing: 0;
  }
  .services-option-all {
    border-top: 1px dashed var(--ibi-gray-200);
    margin-top: 6px;
    padding-top: 14px;
  }
  .services-option-all .services-name { color: var(--ibi-red); }

  /* ===== MOBILE NAV ===== */
  .mobile-nav-link {
    display: block;
    padding: 12px 4px;
    color: var(--ibi-navy);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(28,55,102,0.1);
    transition: color 160ms var(--ease-out);
  }
  .mobile-nav-link:hover { color: var(--ibi-red); }

  .mobile-services {
    border-bottom: 1px solid rgba(28,55,102,0.1);
  }
  .mobile-services-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 4px;
    color: var(--ibi-navy);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.05em;
    background: transparent;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
  }
  .mobile-services-trigger[aria-expanded="true"] .chevron { transform: rotate(180deg); }
  .mobile-services-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 280ms var(--ease-out);
  }
  .mobile-services.open .mobile-services-list {
    max-height: 320px;
  }
  .mobile-services-item {
    display: block;
    padding: 10px 16px;
    color: rgba(28,55,102,0.75);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    border-left: 2px solid var(--ibi-red);
    margin-left: 8px;
    transition: color 160ms var(--ease-out);
  }
  .mobile-services-item:hover { color: var(--ibi-navy); }

  /* Logo SVG inline (network globe) */
  .logo-mark {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
  }

  /* Watermark text */
  .big-bg-text {
    position: absolute;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(120px, 20vw, 280px);
    line-height: 0.9;
    color: rgba(255,255,255,0.025);
    letter-spacing: -0.04em;
    pointer-events: none;
    user-select: none;
    text-transform: uppercase;
  }

  /* ===== Contact CTA — animated network background ===== */
  #contact .cta-grid {
    position: absolute;
    inset: 0;
    opacity: 0.18;
    background-image:
      linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 48px 48px;
    animation: ctaGridPan 26s linear infinite;
    pointer-events: none;
  }
  @keyframes ctaGridPan {
    from { background-position: 0 0, 0 0; }
    to   { background-position: 48px 48px, 48px 48px; }
  }

  #contact .cta-glow {
    position: absolute;
    border-radius: 9999px;
    filter: blur(70px);
    opacity: 0.3;
    pointer-events: none;
  }
  #contact .cta-glow-1 {
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(28,123,194,0.65), transparent 70%);
    top: -90px; left: -70px;
    animation: ctaFloat1 16s ease-in-out infinite;
  }
  #contact .cta-glow-2 {
    width: 340px; height: 340px;
    background: radial-gradient(circle, rgba(204,34,41,0.5), transparent 70%);
    bottom: -110px; right: -60px;
    animation: ctaFloat2 20s ease-in-out infinite;
  }
  @keyframes ctaFloat1 {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(45px, 35px); }
  }
  @keyframes ctaFloat2 {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(-45px, -30px); }
  }

  /* Pulsing connectivity nodes (radar ping) */
  #contact .cta-node {
    position: absolute;
    width: 7px; height: 7px;
    border-radius: 9999px;
    background: rgba(255,255,255,0.55);
    box-shadow: 0 0 8px rgba(255,255,255,0.45);
    pointer-events: none;
  }
  #contact .cta-node::before,
  #contact .cta-node::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 7px; height: 7px;
    border-radius: 9999px;
    border: 1px solid rgba(255,255,255,0.35);
    transform: translate(-50%, -50%);
    animation: ctaPing 3.6s ease-out infinite;
  }
  #contact .cta-node::after { animation-delay: 1.8s; }
  @keyframes ctaPing {
    0%   { width: 7px;  height: 7px;  opacity: 0.6; }
    100% { width: 96px; height: 96px; opacity: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    #contact .cta-grid,
    #contact .cta-glow,
    #contact .cta-node::before,
    #contact .cta-node::after { animation: none; }
  }