/* Inter — the exact file specified for this project, self-hosted so the site
   has no runtime dependency on Google's CDN. Variable axis 100–900, so every
   weight on the site comes from this one 85 KB download.
   Source: fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2 */
@font-face {
  font-family: "InterHatric";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/inter-variable.woff2") format("woff2");
}

/* ==========================================================================
   HATRIC — Company Profile
   ========================================================================== */

/* Brand palette — locked to the three colours in the project brief.
   Everything else in this file is a tint/shade of these, never a new hue. */
:root {
  --navy: #0e204e;   /* primary   — header, footer, hero, headings */
  --blue: #1e6ec8;   /* accent    — buttons, links, icons, active state */
  --mist: #f4f6f9;   /* neutral   — page background */

  --navy-900: var(--navy);
  --navy-800: #162f6b;   /* lighter shade of navy, for gradients */
  --navy-950: #081536;   /* darker shade of navy, dark-theme ground */
  --accent: var(--blue);
  --accent-light: #5b9ce0;

  --bg: var(--mist);
  --bg-alt: #ffffff;
  --surface: #ffffff;
  --surface-2: #e9eef6;
  --text: var(--navy);
  --text-muted: #4d5b78;
  --border: #dde4ef;

  /* Glass — the reference site's signature: translucent panel over a blurred backdrop.
     Light mode needs a high opacity to keep text at 4.5:1; dark mode can stay sheer. */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(14, 32, 78, 0.08);
  --glass-blur: 24px;

  --shadow: 0 10px 30px -12px rgba(14, 32, 78, 0.16);
  --shadow-sm: 0 4px 14px -6px rgba(14, 32, 78, 0.14);
  --shadow-lg: 0 24px 60px -18px rgba(14, 32, 78, 0.3);

  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;

  --container: 1180px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* z-index scale: 5 backdrop · 20 back-to-top · 30 sticky header · 50 modals (future) */
  --z-backdrop: 0;
  --z-fab: 20;
  --z-header: 30;
}

[data-theme="dark"] {
  --bg: var(--navy-950);
  --bg-alt: #0b1c44;
  --surface: rgba(255, 255, 255, 0.06);
  --surface-2: rgba(255, 255, 255, 0.1);
  --text: var(--mist);
  --text-muted: #9fb0cd;
  --border: rgba(255, 255, 255, 0.12);
  --accent: #4d92e8;
  --accent-light: #8ab8f0;

  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.14);

  --shadow: 0 10px 34px -12px rgba(0, 0, 0, 0.6);
  --shadow-sm: 0 4px 16px -6px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 60px -18px rgba(0, 0, 0, 0.7);
}

* { box-sizing: border-box; }
button, input, textarea, select { font-family: inherit; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "InterHatric", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  transition: background .35s var(--ease), color .35s var(--ease);
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }

/* ---------- Fixed backdrop ----------
   The reference site scrolls its content over one stationary dark render.
   We get the same depth with a fixed gradient + two blurred brand-blue glows —
   no image to download, and it recolours itself per theme. */
.site-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-backdrop);
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 78% 8%, color-mix(in srgb, var(--accent) 26%, transparent) 0%, transparent 70%),
    radial-gradient(50% 45% at 8% 72%, color-mix(in srgb, var(--navy-800) 22%, transparent) 0%, transparent 72%),
    var(--bg);
  transition: background .35s var(--ease);
}
.site-backdrop::after {
  /* faint dot grid, masked so it fades out toward the edges */
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--text) 12%, transparent) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 70% 12%, #000 0%, transparent 75%);
          mask-image: radial-gradient(ellipse 75% 60% at 70% 12%, #000 0%, transparent 75%);
  opacity: .45;
}
[data-theme="dark"] .site-backdrop {
  background:
    radial-gradient(60% 50% at 78% 8%, color-mix(in srgb, var(--accent) 30%, transparent) 0%, transparent 70%),
    radial-gradient(55% 50% at 6% 76%, color-mix(in srgb, var(--navy-800) 60%, transparent) 0%, transparent 72%),
    var(--bg);
}
[data-theme="dark"] .site-backdrop::after { opacity: .3; }

/* Content rides above the backdrop; sections stay transparent so it shows through. */
.site-header, main, .site-footer, .to-top, .wa-float { position: relative; }
main, .site-footer { z-index: 1; }

/* ---------- Cinematic scene canvas ----------
   Sits between the CSS backdrop and the content. If the 3D never boots (small
   screen, reduced motion, no WebGL) the canvas stays empty and the backdrop
   alone carries the design. */
.scene-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}
/* Deliberately held well below full strength: the scene is atmosphere behind the
   copy, not a competing image. Text legibility wins over spectacle. */
.scene-canvas.ready { opacity: .28; }
/* A glowing lattice sits comfortably on a dark ground; the same lattice on a light
   ground reads as grey clutter behind body copy, so light mode gets far less of it. */
[data-theme="dark"] .scene-canvas.ready { opacity: .5; }

/* Readability scrim — paints above the canvas (same stacking level, later in the
   DOM) but below main content, so body copy always has a calm ground to sit on. */
.scene-scrim {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg) 62%, transparent) 0%,
      color-mix(in srgb, var(--bg) 48%, transparent) 45%,
      color-mix(in srgb, var(--bg) 70%, transparent) 100%);
}
@media (max-width: 899px) { .scene-scrim { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .scene-canvas { transition: none; }
}
@media (max-width: 899px) {
  .scene-canvas { display: none; }
}

/* ---------- Glass panel ---------- */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur));
          backdrop-filter: blur(var(--glass-blur));
}

.container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 clamp(16px, 2vw, 28px);
}

section { position: relative; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2.5px solid var(--accent);
  /* soft halo in the same brand blue, so the bullet reads as a marker, not a stray dot */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

.section-head { max-width: 640px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 {
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.section-head p {
  margin-top: 14px;
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1.6;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 16px; height: 16px; }

.btn-primary {
  background: var(--navy-900);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .btn-primary { background: var(--accent); color: #06101f; }
.btn-primary:hover { box-shadow: var(--shadow); }

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn-ghost:hover { background: var(--surface-2); }

.btn-sm { padding: 9px 16px; font-size: 13px; }

/* Circular arrow badge tucked inside the pill — the reference site's CTA signature.
   Only the primary button carries it, so one arrow colour covers every case. */
.btn-arrow { padding-right: 8px; }
.btn-arrow::after {
  content: "";
  width: 28px; height: 28px;
  flex: none;
  border-radius: 999px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e204e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
  transition: transform .3s var(--ease);
}
.btn-arrow:hover::after { transform: translateX(3px); }
.btn-arrow.btn-sm { padding-right: 6px; }
.btn-arrow.btn-sm::after { width: 22px; height: 22px; background-size: 11px 11px; }

/* ---------- Editorial section head ----------
   Big headline left, supporting copy right — the reference's section rhythm,
   instead of a centred stack of text. */
.section-head.editorial {
  max-width: none;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 24px 56px;
  align-items: end;
}
.section-head.editorial .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.section-head.editorial h2 {
  font-size: clamp(30px, 4.3vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 800;
}
.section-head.editorial p { margin-top: 0; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 112px;
  z-index: var(--z-header);
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .3s var(--ease), background .3s var(--ease);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: initial;
  height: 112px;
  gap: 20px;
  max-width: none;
}
.site-header.scrolled { box-shadow: var(--shadow-sm); }

/* ---------- Brand lockup ----------
   Client-supplied artwork. Painted as a background rather than two <img> tags so
   the browser only downloads the file for the active theme instead of both.
   The source files were trimmed to their artwork (no pixels of the mark lost),
   which is what lets the "PT. HASTA TRI CAKRA" line read at this size — the old
   files spent ~20% of their height on transparent padding. Each theme's file has
   its own ratio, so each is declared separately rather than padded to match. */
.brand {
  display: block;
  flex: none;
  width: auto;
  height: 99px;
  aspect-ratio: 1687 / 669;
  background-image: url("../assets/hatric%20light%20logo.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}
[data-theme="dark"] .brand {
  background-image: url("../assets/hatric%20dark%20logo.png");
  aspect-ratio: 1794 / 733;
}

.main-nav { flex: 1; min-width: 0; margin-left: 36px; }
.main-nav > ul { display: flex; align-items: center; justify-content: flex-end; width: 100%; gap: 30px; }
.main-nav > ul > .nav-cta { margin-left: 0; }
.main-nav a {
  font-size: 16.5px;
  font-weight: 500;
  color: var(--text-muted);
  transition: color .2s var(--ease);
  position: relative;
}
.main-nav > ul > li:not(.nav-cta) > a {
  font-size: 18px;
  font-weight: 600;
}
.main-nav > ul > .nav-cta > a { font-size: 18px; font-weight: 600; }
.main-nav a:hover { color: var(--text); }
/* Button-styled nav links keep their own palette, not the nav's muted link colour. */
.main-nav a.btn-primary { color: #fff; }
[data-theme="dark"] .main-nav a.btn-primary { color: #06101f; }
.main-nav a.btn-primary:hover { color: #fff; }
[data-theme="dark"] .main-nav a.btn-primary:hover { color: #06101f; }
.main-nav a .nav-ic { display: none; } /* icons are only shown in the full-screen mobile panel */
.main-nav a.active { color: var(--accent); }
.main-nav a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -8px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.header-actions { display: flex; align-items: center; gap: 10px; }

.icon-btn {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
          backdrop-filter: blur(var(--glass-blur));
  color: var(--text);
  cursor: pointer;
  transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.icon-btn:hover { background: var(--surface-2); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.icon-btn svg { width: 18px; height: 18px; }

.lang-btn {
  width: auto;
  padding: 0 14px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  gap: 6px;
}

.theme-icon-dark { display: none; }
[data-theme="dark"] .theme-icon-light { display: none; }
[data-theme="dark"] .theme-icon-dark { display: block; }

.nav-toggle {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--glass-bg);
  color: var(--text);
  -webkit-backdrop-filter: blur(var(--glass-blur));
          backdrop-filter: blur(var(--glass-blur));
  align-items: center; justify-content: center;
  cursor: pointer;
}
[data-theme="dark"] .nav-toggle,
[data-theme="dark"] .nav-toggle svg { color: #fff; stroke: #fff; }
.nav-toggle svg {
  position: absolute;
  width: 20px; height: 20px;
  transition: opacity .25s var(--ease), transform .35s var(--ease-spring);
}
.nav-toggle .icon-close { opacity: 0; transform: rotate(-90deg) scale(.5); }
.nav-toggle[aria-expanded="true"] .icon-menu { opacity: 0; transform: rotate(90deg) scale(.5); }
.nav-toggle[aria-expanded="true"] .icon-close { opacity: 1; transform: rotate(0) scale(1); }

/* ---------- Hero ----------
   The ambient glow and dot grid now come from .site-backdrop, so the hero
   itself stays clean — no duplicated decoration layered on top of it. */
.hero {
  padding: 72px 0 100px;
  position: relative;
}
.hero .container { position: relative; z-index: 1; }
.hero-inner { max-width: 980px; }
.hero h1 {
  /* Sized so the longest line ("Reliable IT Solutions for a") still fits on one
     line — the headline must read as two lines in both languages, never three. */
  font-size: clamp(34px, 5.1vw, 62px);
  line-height: 1.06;
  letter-spacing: -0.035em;
  font-weight: 800;
}
/* Each half of the headline is its own unbroken line; the <br> does the only wrapping. */
.hero h1 span { display: inline-block; white-space: nowrap; }
.hero h1 span.accent { color: var(--accent); }
.hero-desc {
  margin-top: 22px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 620px;
}
.hero-actions { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Homepage banner slider ----------
   The slides are finished client artwork (headline, chips and product shots are
   all baked into the JPG), so this is purely a picture frame: no overlay copy,
   nothing painted on top that could fight the artwork. */
.hero-slider { padding: 112px 0 0; }
.hero-slider > .container { max-width: none; padding: 0; }
.slider {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  background: #0a1c46;   /* matches the artwork ground while it decodes */
  isolation: isolate;
}
.slider-track {
  position: relative;
  aspect-ratio: 1900 / 633;
}
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s var(--ease), visibility 0s linear .6s;
}
.slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity .6s var(--ease), visibility 0s;
}
.slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ---- controls ---- */
.slider-arrow {
  position: absolute;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  z-index: 3;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  background: rgba(8,19,42,.62);
  border: 1px solid rgba(255,255,255,.3);
  box-shadow: 0 2px 12px rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.slider-arrow:hover { background: rgba(8,19,42,.85); border-color: rgba(255,255,255,.55); }
.slider-arrow:active { transform: translateY(-50%) scale(.94); }
.slider-arrow svg { width: 18px; height: 18px; }
.slider-arrow.prev { left: 0; right: auto; }
.slider-arrow.next { right: 0; }

.slider-dots {
  position: absolute;
  right: 22px;
  bottom: 68px;
  z-index: 3;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(8,19,42,.62);
  border: 1px solid rgba(255,255,255,.3);
  box-shadow: 0 2px 12px rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.slider-dots button {
  width: 9px; height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(255,255,255,.5);
  transition: width .3s var(--ease), background .3s var(--ease);
}
.slider-dots button:hover { background: rgba(255,255,255,.8); }
.slider-dots button[aria-selected="true"] { width: 26px; background: #6fd2ff; }

/* The artwork puts its message in the left third and the product shots on the
   right. Below the desktop layout we crop toward the message rather than let a
   3:1 strip shrink the baked-in type to nothing. */
@media (max-width: 900px) {
  .slider-track { aspect-ratio: 2.3 / 1; }
  .slide-img { object-position: 22% center; }
}
@media (max-width: 620px) {
  /* 3:2 shows the left ~50% of the artwork, which is exactly what it takes to
     fit the longest headline ("untuk Jaringan Bisnis Modern") without clipping. */
  .slider-track { aspect-ratio: 3 / 2; }
  .slide-img { object-position: left center; }

  /* Match the mobile reference: carousel arrows sit over the image edges. */
  .slider { padding-bottom: 0; }
  .slider-arrow {
    top: 50%; bottom: auto;
    width: 42px; height: 46px;
    border: 0;
    border-radius: 0;
    background: rgba(5, 13, 30, .78);
    box-shadow: 0 2px 12px rgba(0,0,0,.25);
    transform: translateY(-50%);
  }
  .slider-arrow:hover { background: rgba(5, 13, 30, .92); }
  .slider-arrow:active { transform: translateY(-50%) scale(.94); }
  .slider-arrow.prev { left: 0; right: auto; }
  .slider-arrow.next { right: 0; }
  .slider-dots { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .slide { transition: opacity .01ms linear, visibility 0s; }
}

/* ---------- Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* Elegant cascade: cards in the same grid reveal a beat apart instead of all at once */
.why-grid .why-card:nth-child(1), .services-grid .service-card:nth-child(1), .partners-grid .partner-card:nth-child(1) { transition-delay: 0ms; }
.why-grid .why-card:nth-child(2), .services-grid .service-card:nth-child(2), .partners-grid .partner-card:nth-child(2) { transition-delay: 70ms; }
.why-grid .why-card:nth-child(3), .services-grid .service-card:nth-child(3), .partners-grid .partner-card:nth-child(3) { transition-delay: 140ms; }
.why-grid .why-card:nth-child(4), .services-grid .service-card:nth-child(4), .partners-grid .partner-card:nth-child(4) { transition-delay: 210ms; }
.why-grid .why-card:nth-child(5), .services-grid .service-card:nth-child(5) { transition-delay: 280ms; }
.why-grid .why-card:nth-child(6), .services-grid .service-card:nth-child(6) { transition-delay: 350ms; }
.approach-list .approach-item:nth-child(1) { transition-delay: 0ms; }
.approach-list .approach-item:nth-child(2) { transition-delay: 60ms; }
.approach-list .approach-item:nth-child(3) { transition-delay: 120ms; }
.approach-list .approach-item:nth-child(4) { transition-delay: 180ms; }
.approach-list .approach-item:nth-child(5) { transition-delay: 240ms; }

/* Respect user motion preference: keep the fade, drop the travel distance and stagger */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal {
    transform: none;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  .marquee-track { animation: none !important; }
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- Focus visibility (keyboard navigation) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.icon-btn:focus-visible,
.btn:focus-visible {
  outline-offset: 3px;
}

/* ---------- About ---------- */
.about { padding: 110px 0; }
.about-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 64px;
  align-items: start;
}
.about-body p { color: var(--text-muted); font-size: 16.5px; line-height: 1.75; margin-top: 16px; }
.about-body p:first-of-type { margin-top: 20px; }
.about-quote {
  margin-top: 26px;
  padding: 22px 24px;
  border-left: 3px solid var(--accent);
  background: var(--surface-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 16.5px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--text);
}

.about-side { display: flex; flex-direction: column; gap: 20px; }
.side-card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
          backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}
.side-card .label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
.side-card .vision-text {
  margin-top: 12px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
}
.mission-list { display: flex; flex-direction: column; gap: 18px; margin-top: 14px; }
.mission-item { display: flex; gap: 14px; }
.mission-item .num {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--navy-900);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
}
[data-theme="dark"] .mission-item .num { background: var(--accent); color: #06101f; }
.mission-item h4 { font-size: 15px; font-weight: 700; }
.mission-item p { margin-top: 3px; font-size: 14px; color: var(--text-muted); line-height: 1.55; }

/* ---------- Why / cards grid ---------- */
.why { padding: 110px 0; }
.why-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(250px, auto);
  gap: 18px;
}
.why-card {
  position: relative;
  display: flex;
  flex-direction: column;
  grid-column: span 2;
  min-height: 250px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
          backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0;
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.why-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--navy-800));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}
.why-card-art {
  --art-panel: color-mix(in srgb, var(--accent) 7%, var(--surface));
  --art-line: color-mix(in srgb, var(--accent) 23%, var(--border));
  --art-muted: color-mix(in srgb, var(--text-muted) 28%, var(--border));
  --art-soft: color-mix(in srgb, var(--accent) 13%, transparent);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 138px;
  height: 138px;
  padding: 12px 20px 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 78% 18%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 42%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 72%, transparent), transparent 72%);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 10%, var(--border));
}
.why-card-art svg { width: 100%; height: 100%; max-width: 480px; overflow: visible; }
.why-card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  padding: 19px 22px 22px;
  background: var(--glass-bg);
}
.why-card--lead {
  grid-column: span 3;
  grid-row: span 2;
  min-height: 518px;
}
.why-card--lead .why-card-art { flex-basis: 244px; height: 244px; padding: 18px 30px 0; }
.why-card--lead .why-card-content { padding: 26px 32px 32px; }
.why-card:nth-child(2),
.why-card:nth-child(3) { grid-column: span 3; }
.why-card:nth-child(n+4) { grid-column: span 2; }
.why-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.why-card:hover::before { transform: scaleX(1); }
.why-card-art svg { transition: transform .45s var(--ease); }
.why-card:hover .why-card-art svg { transform: scale(1.035); }
.why-card h3 { font-size: 18px; font-weight: 700; }
.why-card--lead h3 { font-size: clamp(25px, 3vw, 36px); letter-spacing: -.035em; line-height: 1.12; max-width: 420px; }
.why-card p { margin-top: 8px; font-size: 14.5px; color: var(--text-muted); line-height: 1.6; }
.why-card--lead p { font-size: 16px; max-width: 420px; line-height: 1.7; }

.why-quote {
  margin-top: 48px;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  max-width: 700px;
  margin-left: auto; margin-right: auto;
}

/* ---------- Services ---------- */
.services { padding: 110px 0; }
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
/* Home shows a 4-card preview; the full catalogue lives on the Solusi page. */
.services-grid.services-grid-4 { grid-template-columns: repeat(4, 1fr); }
.services-more { margin-top: 34px; display: flex; justify-content: center; }
.service-card {
  position: relative;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
          backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 26px 26px;
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.service-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--navy-800));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.service-card:hover::before { transform: scaleX(1); }
.service-card .tag {
  position: absolute;
  top: 22px; right: 22px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  opacity: .5;
}
.service-card .ic {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--navy-900);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  transition: transform .35s var(--ease-spring);
}
.service-card:hover .ic { transform: translateY(-2px) scale(1.06); }
[data-theme="dark"] .service-card .ic { background: var(--accent); color: #06101f; }
.service-card .ic svg { width: 26px; height: 26px; }
.service-card h3 { font-size: 18px; font-weight: 700; }
.service-card p { margin-top: 8px; font-size: 14.5px; color: var(--text-muted); line-height: 1.6; }

/* ---------- Approach ---------- */
.approach { padding: 110px 0; }
.approach-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-inline: calc(-1 * clamp(16px, 2vw, 28px));
}
.approach-item {
  --step-size: clamp(21px, 2.2vw, 28px);
  display: grid;
  grid-template-columns: clamp(84px, 10.5vw, 124px) 1fr;
  gap: clamp(22px, 2.6vw, 32px);
  align-items: center;
  min-height: 142px;
  padding: 28px clamp(16px, 2vw, 28px);
  background: color-mix(in srgb, var(--text) 4%, var(--bg-alt));
}
.approach-item .step-num {
  font-size: clamp(30px, 3vw, 38px);
  font-weight: 800;
  color: var(--accent);
  opacity: .95;
  line-height: 1.1;
}
.approach-item .step-body { display: grid; gap: 6px; }
.approach-item .step-title {
  font-size: var(--step-size);
  font-weight: 800;
  letter-spacing: .035em;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--text);
}
.approach-item .step-summary { color: var(--accent); font-size: clamp(15px, 1.45vw, 17px); font-weight: 650; line-height: 1.4; }
.approach-item .step-detail { color: var(--text-muted); font-size: 15px; font-weight: 400; line-height: 1.6; max-width: 900px; }

/* ---------- Partners ---------- */
.partners { padding: 90px 0; }
.partners-grid {
  display: grid;
  /* two partners — keep the cards from stretching the full container width */
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  max-width: 720px;
  margin: 0 auto;
}
.partner-card {
  position: relative;
  border: 1px solid var(--border);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
          backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius-md);
  padding: 26px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 132px;
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.partner-card::after {
  /* diagonal light sweep — a quiet premium flourish on hover, not a loop */
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--accent) 16%, transparent), transparent);
  transform: skewX(-18deg);
  transition: left .6s var(--ease);
  pointer-events: none;
}
.partner-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.partner-card:hover::after { left: 130%; }
.partner-logo {
  /* The marks now fill the card: the SVGs are cropped tight to the artwork, so
     width is what drives the size and height just caps very wide lockups. */
  width: 100%;
  max-width: 260px;
  height: auto;
  max-height: 76px;
  object-fit: contain;
}
[data-theme="dark"] .partner-card {
  /* red/green brand marks need a light ground to stay legible on the dark theme */
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.22);
}
[data-theme="dark"] .partner-card .verified {
  background: color-mix(in srgb, var(--blue) 16%, transparent);
  color: var(--blue);
}

.partner-card .wordmark {
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--text-muted);
  transition: color .3s var(--ease);
}
.partner-card:hover .wordmark { color: var(--accent); }
.partner-card.soon .wordmark { font-size: 14px; font-weight: 600; opacity: .5; text-transform: uppercase; letter-spacing: .06em; }
.partner-card .verified {
  position: absolute;
  top: 10px; right: 10px;
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}
.partner-card .verified svg { width: 12px; height: 12px; }

/* ---------- Contact ---------- */
.contact { padding: 110px 0; }
.contact .eyebrow { color: var(--accent-light); }
.contact .eyebrow::before { border-color: var(--accent-light); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-light) 18%, transparent); }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
.contact h2 {
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.contact-desc { margin-top: 16px; color: var(--text-muted); font-size: 16.5px; line-height: 1.65; max-width: 460px; }

.contact-info { margin-top: 34px; display: flex; flex-direction: column; gap: 20px; }
.contact-info .item { display: flex; gap: 14px; align-items: flex-start; }
.contact-info .ic {
  flex: none;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
}
.contact-info .ic svg { width: 20px; height: 20px; color: var(--accent-light); }
.contact-info .label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.contact-info .value { margin-top: 3px; font-size: 15.5px; font-weight: 500; line-height: 1.5; }
.contact-info a.value:hover { color: var(--accent-light); }


/* ---------- Footer ---------- */
.site-footer { padding: 56px 0; border-top: 1px solid var(--border); }
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
.footer-brand { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.footer-brand .brand { height: 64px; }
.footer-copy { font-size: 13px; color: var(--text-muted); text-align: right; }

/* ---------- Back to top ---------- */
.to-top {
  position: fixed;
  right: 24px; bottom: 24px;
  width: 46px; height: 46px;
  border-radius: 999px;
  background: var(--navy-900);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  z-index: var(--z-fab);
  cursor: pointer;
  border: none;
}
[data-theme="dark"] .to-top { background: var(--accent); color: #06101f; }
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top svg { width: 18px; height: 18px; }

/* ---------- Mobile nav ---------- */
@media (max-width: 940px) {
  .site-header, .site-header .container { height: 88px; }
  .brand { height: 77px; }
  .hero-slider { padding-top: 88px; }
  .main-nav { flex: initial; }
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  .header-actions { margin-left: auto; }
  .mobile-nav-tools { display: flex; align-items: center; gap: 10px; margin-top: 22px; }
  .about-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(250px, auto); }
  .why-card, .why-card:nth-child(2), .why-card:nth-child(3), .why-card:nth-child(n+4) { grid-column: span 2; }
  .why-card--lead { grid-column: span 2; grid-row: span 2; min-height: 518px; }
  .services-grid, .services-grid.services-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .partners-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; gap: 44px; }

  .main-nav.open {
    display: block;
    position: fixed;
    top: 88px; left: auto; right: 0; bottom: 0;
    width: min(84vw, 360px);
    min-width: min(276px, 84vw);
    max-width: 84vw;
    margin-left: 0;
    background: rgba(255, 255, 255, .82);
    border-left: 1px solid rgba(255, 255, 255, .55);
    border-radius: 18px 0 0 18px;
    box-shadow: -18px 0 44px rgba(14, 32, 78, .18);
    -webkit-backdrop-filter: blur(24px);
            backdrop-filter: blur(24px);
    padding: 30px 24px;
    overflow-y: auto;
  }
  [data-theme="dark"] .main-nav.open {
    background: rgba(8, 21, 54, .82);
    border-left-color: rgba(255, 255, 255, .16);
    box-shadow: -18px 0 44px rgba(0, 0, 0, .28);
  }
  .main-nav.open ul { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; width: 100%; }
  .main-nav.open a {
    display: block;
    width: 100%;
    padding: 14px 4px;
    font-size: 18px;
    border-bottom: 1px solid var(--border);
  }
  .main-nav.open > ul > li:not(.nav-cta) > a {
    font-size: 18px;
    font-weight: 600;
  }
  .main-nav.open a:not(.btn) {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--text);
    transition: color .2s var(--ease), padding-left .25s var(--ease);
  }
  .main-nav.open a:not(.btn) .nav-ic {
    display: block;
    flex: none;
    width: 20px; height: 20px;
    color: var(--text-muted);
    transition: color .2s var(--ease);
  }
  .main-nav.open a:not(.btn):hover,
  .main-nav.open a:not(.btn):hover .nav-ic { color: var(--accent); }
  .main-nav.open a:not(.btn).active { color: var(--accent); padding-left: 12px; }
  .main-nav.open a:not(.btn).active .nav-ic { color: var(--accent); }
  .main-nav.open a:not(.btn).active::after {
    content: "";
    margin-left: auto;
    width: 6px; height: 6px;
    border-radius: 999px;
    background: var(--accent);
  }
  .main-nav.open .nav-cta { margin: 18px 0 0; }
  .main-nav.open > ul > .nav-cta { margin-left: 0; align-self: stretch; }

  /* Staggered entrance for the mobile panel's own items (not scroll-triggered) */
  .main-nav.open ul > li {
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity .35s var(--ease), transform .35s var(--ease);
  }
  .main-nav.open.nav-anim ul > li { opacity: 1; transform: translateX(0); }
  .main-nav.open ul > li:nth-child(1) { transition-delay: .02s; }
  .main-nav.open ul > li:nth-child(2) { transition-delay: .06s; }
  .main-nav.open ul > li:nth-child(3) { transition-delay: .10s; }
  .main-nav.open ul > li:nth-child(4) { transition-delay: .14s; }
  .main-nav.open ul > li:nth-child(5) { transition-delay: .18s; }
  .main-nav.open ul > li:nth-child(6) { transition-delay: .22s; }
}

@media (prefers-reduced-motion: reduce) {
  .main-nav.open ul > li { transition: none; opacity: 1; transform: none; }
}

@media (max-width: 600px) {
  .site-header, .site-header .container { height: 76px; }
  .site-header .container { gap: 8px; padding: 0 16px; }
  .brand { height: 61px; }
  .header-actions { gap: 6px; }
  .icon-btn, .nav-toggle { width: 40px; height: 40px; }
  .lang-btn { width: auto; padding: 0 10px; }
  .hero-slider { padding-top: 76px; }
  .why-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .why-card, .why-card:nth-child(2), .why-card:nth-child(3), .why-card:nth-child(n+4), .why-card--lead { grid-column: 1; grid-row: auto; min-height: 0; }
  .why-card-art { flex-basis: 156px; height: 156px; padding: 14px 20px 0; }
  .why-card-content { padding: 18px 20px 22px; }
  .why-card--lead { min-height: 0; }
  .why-card--lead .why-card-art { flex-basis: 190px; height: 190px; }
  .why-card--lead .why-card-content { padding: 22px 24px 26px; }
  .services-grid, .services-grid.services-grid-4, .partners-grid, .products-grid { grid-template-columns: 1fr; }
  .approach-item { grid-template-columns: 84px 1fr; gap: 22px; }
  .hero { padding-top: 58px; }
  /* Keep mobile headings readable without the extra-heavy display weight that
     makes capital glyphs (especially A) stand out from the rest of a word. */
  .hero h1,
  .page-hero h1,
  .detail-copy h1,
  .section-head h2,
  .section-head.editorial h2,
  .contact h2,
  .related-products-heading {
    font-weight: 600;
    letter-spacing: -0.02em;
  }
  /* Too narrow to hold a full headline line — let it wrap again rather than overflow. */
  .hero h1 span { white-space: normal; }
  .lang-btn span.full { display: none; }
  .page-hero { padding-top: 140px; }
  .main-nav.open { top: 76px; }
}

@media (max-width: 360px) {
  .site-header, .site-header .container { height: 70px; }
  .site-header .container { padding: 0 12px; gap: 8px; }
  .brand { height: 53px; }
  .header-actions { gap: 4px; }
  .icon-btn, .nav-toggle { width: 36px; height: 36px; }
  .lang-btn { padding: 0 8px; }
  .hero-slider { padding-top: 70px; }
  .main-nav.open { top: 70px; }
}

/* ---------- Solutions navigation ---------- */
.main-nav > ul > .nav-solutions { position: relative; }
.main-nav .solutions-parent { display: inline-flex; align-items: center; gap: 12px; }
.main-nav .nav-chevron { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.main-nav .nav-solutions:hover .nav-chevron,
.main-nav .nav-solutions:focus-within .nav-chevron { transform: rotate(180deg); }
.main-nav .solutions-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: -20px;
  z-index: 3;
  min-width: 260px;
  padding: 10px;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
          backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-lg);
}
.main-nav .nav-solutions:hover .solutions-menu,
.main-nav .nav-solutions:focus-within .solutions-menu { display: flex; }
.main-nav .solutions-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 9px;
  color: var(--text-muted);
  font-size: 13px;
  white-space: nowrap;
  transition: color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease),
    text-shadow .2s var(--ease), font-size .2s var(--ease);
}
.main-nav .solutions-menu a:hover,
.main-nav .solutions-menu a:focus-visible {
  background: var(--surface-2);
  color: #111;
  font-size: calc(13px + 1pt);
  font-weight: 600;
  text-shadow: 0 0 4px rgba(0, 0, 0, .3);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 0 9px rgba(0, 0, 0, .24);
}
.main-nav .solutions-menu a::after { display: none; }
.main-nav .solutions-menu .menu-ic {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--accent);
}
[data-theme="dark"] .main-nav .solutions-menu a:hover,
[data-theme="dark"] .main-nav .solutions-menu a:focus-visible {
  color: #fff;
  text-shadow: 0 0 5px rgba(255, 255, 255, .72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4), 0 0 12px rgba(255, 255, 255, .4);
}
.main-nav .solutions-menu a:hover .menu-ic,
.main-nav .solutions-menu a:focus-visible .menu-ic { color: #111; }
[data-theme="dark"] .main-nav .solutions-menu .menu-ic { color: #fff; }
[data-theme="dark"] .main-nav .solutions-menu a:hover .menu-ic,
[data-theme="dark"] .main-nav .solutions-menu a:focus-visible .menu-ic {
  color: #fff;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, .8));
}

/* ---------- Six-solution preview cards ---------- */
.services-grid.services-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.service-card { display: flex; flex-direction: column; min-height: 278px; }
.service-card .service-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-top: auto;
  padding-top: 20px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}
.service-card .service-more span:last-child { transition: transform .2s var(--ease); }
.service-card .service-more:hover span:last-child { transform: translate(2px, -2px); }
.service-card .service-more:focus-visible { outline-offset: 4px; border-radius: 2px; }
.solutions-hero { padding-bottom: 54px; }
.solutions-index { padding-top: 48px; }

/* ---------- Technology partner marquee ---------- */
.partner-marquee {
  overflow: hidden;
  width: 100%;
  margin: 42px auto 0;
  padding: 22px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.partner-marquee-track {
  display: flex;
  width: max-content;
  animation: partner-marquee-scroll 34s linear infinite;
}
.partner-marquee:hover .partner-marquee-track,
.partner-marquee:focus-within .partner-marquee-track { animation-play-state: paused; }
.partner-marquee-set {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-around;
  gap: clamp(42px, 7vw, 104px);
  min-width: min(100vw, 1180px);
  padding: 0 clamp(24px, 4vw, 58px);
}
[data-theme="dark"] .partner-marquee {
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(255, 255, 255, .58);
  border-radius: 18px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
}
.partner-wordmark {
  flex: none;
  color: var(--text-muted);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.045em;
  font-size: clamp(22px, 2.2vw, 29px);
  opacity: .82;
  white-space: nowrap;
}
.partner-wordmark.h3c { color: #1873c9; letter-spacing: -.06em; }
.partner-wordmark.lenovo { padding: 7px 9px 8px; background: #e2231a; color: #fff; font-size: clamp(17px, 1.8vw, 22px); letter-spacing: -.04em; }
.partner-wordmark.hpe { color: #01a982; }
.partner-wordmark.fortinet { color: #d73527; letter-spacing: -.055em; }
.partner-logo-mark { display: block; flex: none; width: auto; height: 40px; max-width: 132px; object-fit: contain; }
.partner-logo-mark.h3c { height: 42px; max-width: 56px; padding: 2px; border-radius: 50%; background: #fff; }
.partner-logo-mark.hpe { max-width: 126px; }
.partner-logo-mark.ruckus { height: 42px; max-width: 110px; }
.partner-logo-mark.fortinet { height: 34px; max-width: 138px; }
.partner-logo-mark.f5 { height: 44px; max-width: 48px; }
.partner-logo-mark.huawei { height: 44px; max-width: 48px; }
.partner-logo-mark.eaton { height: 36px; max-width: 124px; }
.partner-logo-mark.proxmox { height: 48px; max-width: 72px; }
.partner-logo-mark.synology { height: 38px; max-width: 132px; }
.partner-logo-mark.apc { height: 38px; max-width: 124px; }
.partner-logo-mark.belden { height: 34px; max-width: 132px; }
.partner-logo-mark.canon { height: 36px; max-width: 126px; }
.partner-logo-mark.dell { height: 38px; max-width: 120px; }
.partner-logo-mark.indorack { height: 34px; max-width: 128px; }
.partner-logo-mark.ls_cable { height: 32px; max-width: 130px; }
.partner-logo-mark.maipu { height: 36px; max-width: 122px; }
.partner-logo-mark.mshyperV { height: 40px; max-width: 130px; }
@keyframes partner-marquee-scroll { to { transform: translateX(-50%); } }

/* ---------- Expanded footer ---------- */
.site-footer { padding: 52px 0 28px; }
.footer-main {
  display: grid;
  grid-template-columns: minmax(240px, 1.5fr) minmax(130px, .7fr) minmax(190px, .8fr);
  gap: clamp(28px, 7vw, 96px);
  padding-bottom: 42px;
}
.footer-about .brand { height: 54px; }
.footer-about p { max-width: 340px; margin-top: 18px; color: var(--text-muted); font-size: 13px; line-height: 1.7; }
.footer-links, .footer-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.footer-label { margin-bottom: 4px; color: var(--text-muted); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.footer-links a, .footer-contact a, .footer-contact span { color: var(--text); font-size: 13px; transition: color .2s var(--ease); }
.footer-links a:hover, .footer-contact a:hover { color: var(--accent); }
.footer-contact span { color: var(--text-muted); }
.footer-bottom { display: flex; justify-content: space-between; gap: 12px 24px; padding-top: 22px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 12px; }

/* ---------- Solution detail pages ---------- */
.solution-detail-hero { position: relative; overflow: hidden; padding: 172px 0 72px; }
.solution-detail-hero::before {
  content: "";
  position: absolute;
  top: 8%; right: -16%;
  width: min(68vw, 850px); aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 50px color-mix(in srgb, var(--accent) 3%, transparent), 0 0 0 100px color-mix(in srgb, var(--accent) 2%, transparent);
  pointer-events: none;
}
.detail-breadcrumb { display: flex; align-items: center; gap: 10px; margin: 0 0 38px; color: var(--text-muted); font-size: 12px; }
.detail-breadcrumb a:hover { color: var(--accent); }
.detail-breadcrumb .crumb-sep { opacity: .45; }
.solution-detail-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); align-items: center; gap: clamp(38px, 8vw, 118px); }
.detail-copy { max-width: 680px; }
.detail-overline { margin-bottom: 18px; color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.detail-kicker { margin: 0 0 12px; color: var(--text-muted); font-size: 11px; font-weight: 750; letter-spacing: .13em; }
.detail-copy h1 { max-width: 760px; font-size: clamp(40px, 6vw, 68px); line-height: 1.02; letter-spacing: -.055em; font-weight: 800; }
.detail-copy .detail-lead { margin-top: 22px; max-width: 620px; color: var(--text-muted); font-size: clamp(16px, 1.7vw, 19px); line-height: 1.75; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.detail-visual { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 20px; border: 1px solid var(--border); border-radius: 24px; background: color-mix(in srgb, var(--surface) 78%, transparent); box-shadow: var(--shadow-lg); transform: rotate(2deg); }
.detail-visual::before { content: ""; position: absolute; inset: 12px; border: 1px dashed color-mix(in srgb, var(--accent) 25%, transparent); border-radius: 16px; pointer-events: none; }
.detail-visual-label { grid-column: 1 / -1; padding: 6px 4px 14px; color: var(--text-muted); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.detail-visual-node { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 92px; padding: 13px; border: 1px solid var(--border); border-radius: 14px; background: var(--glass-bg); color: var(--text); font-size: 12px; font-weight: 750; line-height: 1.25; }
.detail-visual-node svg { display: block; width: 34px; height: 34px; margin-bottom: 12px; padding: 7px; border-radius: 50%; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.detail-visual-node span { margin-top: 0; color: var(--text); font-size: 12px; font-weight: 750; }
.detail-section { padding: 74px 0 110px; }
.detail-section-grid { display: grid; grid-template-columns: minmax(220px, .78fr) minmax(0, 1.22fr); gap: clamp(36px, 8vw, 110px); }
.detail-section-intro { position: sticky; top: 130px; align-self: start; }
.detail-section-intro h2 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.1; letter-spacing: -.035em; }
.detail-section-intro p { margin-top: 16px; color: var(--text-muted); font-size: 15px; line-height: 1.75; }
.detail-capabilities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.detail-capability { min-height: 170px; padding: 22px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--glass-bg); }
.detail-capability .cap-index { color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.detail-capability h3 { margin-top: 22px; font-size: 16px; line-height: 1.35; }
.detail-capability p { margin-top: 8px; color: var(--text-muted); font-size: 13px; line-height: 1.6; }
.detail-partners { padding: 48px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.detail-partners > .container { display: block; }
.related-products-heading { margin-bottom: 28px; font-size: clamp(26px, 3vw, 34px); line-height: 1.15; }
.related-product-list { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 14px; }
.related-product-list { justify-content: center; }
.related-product-logo { flex: 1 1 116px; max-width: 172px; min-width: 0; min-height: 104px; padding: 16px; display: flex; justify-content: center; align-items: center; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.related-product-logo img { display: block; width: 100%; height: 58px; object-fit: contain; }
.detail-bottom { padding: 24px 0 104px; }
.detail-bottom-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: clamp(26px, 5vw, 48px); border: 1px solid var(--border); border-radius: 24px; background: var(--glass-bg); }
.detail-bottom-card h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.12; letter-spacing: -.03em; }
.detail-bottom-card p { max-width: 640px; margin-top: 12px; color: var(--text-muted); font-size: 15px; line-height: 1.65; }
.detail-bottom-card .actions { display: flex; flex-wrap: wrap; gap: 10px; }
.related-solutions { padding: 0 0 94px; }
.related-solutions .section-head { margin-bottom: 28px; }
.related-links { display: flex; flex-wrap: wrap; gap: 10px; }
.related-links a { padding: 10px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--glass-bg); color: var(--text-muted); font-size: 12px; transition: color .2s var(--ease), border-color .2s var(--ease); }
.related-links a:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 940px) {
  .main-nav.open .solutions-menu { display: none; position: static; min-width: 0; width: 100%; margin: 0; padding: 0 0 6px 34px; border: 0; border-radius: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .main-nav.open .nav-solutions.submenu-open > .solutions-menu { display: flex; }
  .main-nav.open .solutions-parent .nav-chevron { margin-left: auto; }
  .main-nav.open .solutions-menu a { padding: 8px 0; border-bottom: 0; color: var(--text-muted); font-size: 14px; }
  .main-nav.open .solutions-menu a:hover,
  .main-nav.open .solutions-menu a:focus-visible { font-size: calc(14px + 1pt); font-weight: 600; }
  .services-grid.services-grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .solution-detail-grid { grid-template-columns: minmax(0, 1fr) minmax(240px, .8fr); gap: 34px; }
  .detail-section-grid { grid-template-columns: 1fr; }
  .detail-section-intro { position: static; }
  .detail-bottom-card { grid-template-columns: 1fr; }
}

[data-theme="dark"] .detail-visual-node svg,
[data-theme="dark"] .detail-capability svg {
  color: #a8d1ff;
  background: rgba(168, 209, 255, .16);
}

[data-theme="dark"] .btn-primary,
[data-theme="dark"] .main-nav a.btn-primary {
  background: var(--blue);
  color: #fff;
}
[data-theme="dark"] .contact-cta h3,
[data-theme="dark"] .contact-cta p { color: #fff; }
@media (max-width: 600px) {
  .services-grid.services-grid-6 { grid-template-columns: 1fr; }
  .partner-marquee-set { min-width: 100vw; gap: 32px; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .footer-about { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; }
  .solution-detail-hero { padding-top: 132px; }
  .detail-breadcrumb { margin-bottom: 24px; }
  .solution-detail-grid { grid-template-columns: 1fr; }
  .detail-copy h1 { font-size: clamp(38px, 13vw, 56px); }
  .detail-visual { max-width: 460px; width: 100%; margin: 0 auto; transform: none; }
  .detail-capabilities { grid-template-columns: 1fr; }
  .detail-bottom-card .actions { flex-direction: column; align-items: stretch; }
  .detail-bottom-card .actions .btn { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .partner-marquee-track { animation: none; transform: none; }
}

.page-hero.solutions-hero { padding: 150px 0 24px; }
.page-hero.solutions-hero .container { max-width: none; }
.page-hero.solutions-hero h1 { max-width: 860px; }
.page-hero.solutions-hero p { max-width: 760px; font-size: 16px; }

/* ---------- Page hero (Solutions / Contact) ---------- */
.page-hero {
  padding: 180px 0 70px;
  position: relative;
  overflow: hidden;
}
.page-hero .container { position: relative; z-index: 1; max-width: none; }
.page-hero h1 {
  font-size: clamp(32px, 4.6vw, 48px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 800;
}
.page-hero p {
  margin-top: 18px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-muted);
}

/* ---------- Products (catalog-style list, distinct from Services cards) ---------- */
.products { padding: 110px 0; }
.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.product-row {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 24px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
          backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.product-row:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.product-row .ic {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.product-row .ic svg { width: 22px; height: 22px; }
.product-row h3 { font-size: 16.5px; font-weight: 700; }
.product-row p { margin-top: 5px; font-size: 14px; color: var(--text-muted); line-height: 1.55; }
.products-note {
  margin-top: 28px;
  text-align: center;
  font-size: 13.5px;
  color: var(--text-muted);
}
.products-note strong { color: var(--text); font-weight: 700; }

/* ---------- Become a Partner CTA ---------- */
.partner-cta { padding: 90px 0; }
.partner-cta .card {
  background: linear-gradient(135deg, var(--navy-900), var(--navy-800));
  border-radius: var(--radius-lg);
  padding: 56px 48px;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.partner-cta .card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 55%);
  pointer-events: none;
}
.partner-cta .card > * { position: relative; z-index: 1; }
.partner-cta .eyebrow { color: var(--accent-light); }
.partner-cta .eyebrow::before { border-color: var(--accent-light); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-light) 18%, transparent); }
.partner-cta h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; letter-spacing: -0.01em; }
.partner-cta p { margin: 14px auto 0; max-width: 560px; color: rgba(255,255,255,.75); font-size: 16px; line-height: 1.65; }
.partner-cta .actions { margin-top: 28px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.partner-cta .btn-primary { background: var(--accent); color: #06101f; }
.partner-cta .btn-ghost { color: #fff; border-color: rgba(255,255,255,.3); }
.partner-cta .btn-ghost:hover { background: rgba(255,255,255,.08); }

/* ---------- Slim contact CTA strip (Solutions page) ---------- */
.contact-cta { padding: 70px 0 100px; }
.contact-cta .card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
          backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 34px 40px;
  box-shadow: var(--shadow-sm);
}
.contact-cta h3 { font-size: 20px; font-weight: 700; }
.contact-cta p { margin-top: 4px; color: var(--text-muted); font-size: 14.5px; }
.contact-cta .actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Bottom CTA banner (Home) ---------- */
.home-cta { padding: 40px 0 100px; }
.home-cta .card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
          backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 48px 40px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.home-cta h2 { font-size: clamp(22px, 2.8vw, 30px); font-weight: 800; letter-spacing: -0.01em; }
.home-cta p { margin: 12px auto 0; max-width: 520px; color: var(--text-muted); font-size: 15.5px; line-height: 1.6; }
.home-cta .actions { margin-top: 26px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- Map embed ---------- */
.map-section { padding: 10px 0 40px; }
.map-embed {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  height: 380px;
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.15); }
[data-theme="dark"] .map-embed iframe { filter: grayscale(.3) invert(.92) contrast(.9); }

/* ---------- Direct contact question form ---------- */
.contact-direct {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur));
          backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius-lg);
  padding: 34px;
  box-shadow: var(--shadow-sm);
}
.contact-direct h3 { font-size: 21px; font-weight: 700; }
.contact-direct p { margin-top: 10px; color: var(--text-muted); font-size: 15px; line-height: 1.65; }
.contact-question-form { display: grid; gap: 16px; margin-top: 24px; }
.contact-form-field { display: grid; gap: 7px; }
.contact-form-field label { color: var(--text); font-size: 14px; font-weight: 600; }
.contact-form-field input,
.contact-form-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  outline: none;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.contact-form-field textarea { min-height: 116px; resize: vertical; line-height: 1.5; }
.contact-form-field input::placeholder,
.contact-form-field textarea::placeholder { color: var(--text-muted); opacity: .8; font-style: italic; }
.contact-form-field input:focus,
.contact-form-field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.question-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.question-actions .btn { min-height: 48px; }
.question-actions .btn-ghost svg { width: 19px; height: 19px; }
.btn-wa { background: #25d366; color: #05230f; }
.btn-wa:hover { box-shadow: 0 12px 28px -10px rgba(37, 211, 102, .6); }
.btn-wa svg { width: 20px; height: 20px; }
.direct-hours {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--glass-border);
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.direct-hours .label {
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted);
}
.direct-hours .value { font-size: 15px; font-weight: 600; }

/* ---------- Social row (contact page) ---------- */
.social-row { display: flex; gap: 10px; margin-top: 4px; }
.social-icon {
  width: 38px; height: 38px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2);
  color: var(--text-muted);
  position: relative;
}
.social-icon svg { width: 17px; height: 17px; }
.social-icon.soon { cursor: not-allowed; }
.social-row .soon-label { font-size: 11px; color: var(--text-muted); align-self: center; margin-left: 2px; }

/* ---------- Floating WhatsApp ---------- */
.wa-float {
  position: fixed;
  right: 24px; bottom: 84px;
  left: auto;
  width: 56px; height: 56px;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px -8px rgba(37, 211, 102, 0.55);
  z-index: var(--z-fab);
  transition: transform .25s var(--ease-spring), box-shadow .25s var(--ease);
  animation: wa-pop .5s var(--ease-spring) .6s both;
}
.wa-float:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 14px 32px -8px rgba(37, 211, 102, 0.65); }
.wa-float svg { width: 27px; height: 27px; }
@keyframes wa-pop {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-float { animation: none; }
}

@media (max-width: 940px) {
  .products-grid { grid-template-columns: 1fr; }
  .section-head.editorial { grid-template-columns: 1fr; gap: 18px; align-items: start; }
  .partner-cta .card { padding: 40px 26px; }
  .contact-cta .card { justify-content: center; text-align: center; flex-direction: column; }
}

@media (max-width: 600px) {
  .wa-float, .to-top { width: 48px; height: 48px; left: 16px; right: 16px; }
  .wa-float { left: auto; right: 16px; bottom: 76px; }
  .to-top { left: auto; }
  .wa-float svg { width: 23px; height: 23px; }
  .map-embed { height: 280px; }
}

/* Accent headlines need extra contrast on the dark background. */
[data-theme="dark"] .hero h1 span.accent { color: #a8d1ff; }

/* Eyebrows and their circular markers should stay bright in dark mode. */
[data-theme="dark"] .eyebrow,
[data-theme="dark"] .detail-overline,
[data-theme="dark"] .detail-kicker { color: #fff; }
[data-theme="dark"] .eyebrow::before {
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .2);
}

/* Dark-mode contact actions retain clear white labels on the blue CTA. */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .main-nav a.btn-primary,
[data-theme="dark"] .partner-cta .btn-primary,
[data-theme="dark"] .contact-cta .btn-primary {
  background: var(--blue);
  color: #fff;
}