/* glace.id design tokens — adapted from Antimetal style reference,
   accent recolored to monochrome black/silver to match the "glace" logo wordmark */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Instrument+Serif:ital,wght@0,400;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Colors */
  --color-midnight-navy: #0F0F0F;
  --color-deep-cosmos: #000000;
  --color-mint-pulse: #0F0F0F;       /* glace accent — deep logo black */
  --color-mint-deep: #000000;        /* pure black, for emphasis on light surfaces */
  --color-mint-soft: #E8EAEE;        /* soft silver, for chip / icon backgrounds on light */
  --color-accent-shine: #D6DAE0;     /* metallic silver — accent that stays visible on dark surfaces */
  --color-ice-veil: #e0f6ff;
  --color-ghost-canvas: #f8f9fc;
  --color-pure-surface: #ffffff;
  --color-slate-ink: #6b7184;
  --color-ash-medium: #7c8293;
  --color-storm-gray: #596075;
  --color-fog-border: #b1b5c0;
  --color-paper-light: #fafeff;

  --gradient-hero: linear-gradient(180deg, #ffffff 0%, #f6f8fb 55%, #e8ecf1 100%);
  --gradient-glow-mint: radial-gradient(50% 50%, rgba(214, 218, 224, 0.32) 0%, rgba(214, 218, 224, 0.16) 35%, rgba(214, 218, 224, 0) 75%);
  --gradient-glow-blue: radial-gradient(50% 50%, rgba(0, 128, 248, 0.32) 0%, rgba(95, 189, 247, 0.20) 35%, rgba(248, 249, 252, 0) 100%);

  /* Type */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Instrument Serif', 'Freight Display Pro', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --text-caption: 13px;
  --text-body: 16px;
  --text-subheading: 18px;
  --text-heading-sm: 22px;
  --text-heading: 28px;
  --text-heading-lg: 40px;
  --text-display: 56px;
  --text-display-xl: 72px;

  /* Spacing */
  --s-4: 4px;  --s-8: 8px;   --s-12: 12px; --s-16: 16px;
  --s-20: 20px; --s-24: 24px; --s-28: 28px; --s-32: 32px;
  --s-40: 40px; --s-56: 56px; --s-60: 60px; --s-72: 72px;
  --s-96: 96px; --s-120: 120px; --s-160: 160px;

  /* Radius */
  --radius-card: 20px;
  --radius-card-sm: 6px;
  --radius-card-md: 16px;
  --radius-badge: 16px;
  --radius-pill: 9999px;
  --radius-input: 0px;

  /* Shadows */
  --shadow-card: rgba(0, 0, 0, 0.03) 0px 56px 72px -16px, rgba(0, 0, 0, 0.03) 0px 32px 32px -16px, rgba(0, 0, 0, 0.04) 0px 6px 12px -3px, rgba(0, 0, 0, 0.04) 0px 0px 0px 1px;
  --shadow-badge: rgba(0, 0, 0, 0.08) 0px 6px 16px -3px, rgba(0, 0, 0, 0.04) 0px 0px 0px 1px;
  --shadow-light-ghost: rgba(255, 255, 255, 0.72) 0px 1px 1px 0px inset, rgba(0, 0, 0, 0.02) 0px 8px 16px 0px, rgba(0, 0, 0, 0.03) 0px 4px 12px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px, rgba(0, 0, 0, 0.04) 0px 0px 0px 1px;
  --shadow-mint-cta: rgba(0, 0, 0, 0.32) 0px 1px 3px 0px, rgba(0, 0, 0, 0.12) 0px 0.5px 0.5px 0px, rgba(0, 0, 0, 0.44) 0px 12px 24px -12px, rgba(219, 247, 255, 0.06) 0px 8px 16px 0px inset, rgba(219, 247, 255, 0.48) 0px 0.5px 0.5px 0px inset;
  --shadow-dark-ghost: rgba(255, 255, 255, 0.08) 0px 0px 16px 8px inset, rgba(255, 255, 255, 0.08) 0px 0px 8px 4px inset, rgba(255, 255, 255, 0.08) 0px 0px 4px 2px inset, rgba(255, 255, 255, 0.12) 0px 0px 2px 1px inset;
  --shadow-announce: rgba(255, 255, 255, 0.88) 0px 1px 1px 0px inset, rgba(0, 0, 0, 0.04) 0px 48px 72px -12px, rgba(0, 0, 0, 0.03) 0px 28px 40px 0px, rgba(0, 0, 0, 0.02) 0px 4px 12px 0px, rgba(0, 0, 0, 0.04) 0px 0px 0px 1px;

  /* Layout */
  --page-max-width: 1200px;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
/* Horizontal-overflow guard on body only — keeping html clear so `position: sticky`
   descendants (nav) anchor properly against the viewport. */
html, body { margin: 0; padding: 0; width: 100%; max-width: 100%; }
body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Prevent iOS Safari auto-zoom on input focus — needs >=16px */
@media (max-width: 1023px) {
  input, select, textarea { font-size: 16px !important; }
}
/* Better touch targets on mobile only */
@media (max-width: 1023px) {
  .btn { height: 44px; padding: 0 20px; }
  .btn-sm { height: 36px; padding: 0 14px; }
}
img { max-width: 100%; height: auto; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.5;
  letter-spacing: -0.16px;
  color: var(--color-midnight-navy);
  background: var(--color-ghost-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; color: inherit; cursor: pointer; padding: 0; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }

/* Type helpers */
.t-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-display);
  line-height: 1.04;
  letter-spacing: -1.5px;
  font-feature-settings: "ss04", "ss06", "ss09", "ss10", "ss11";
}
.t-display-xl {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-display-xl);
  line-height: 1.02;
  letter-spacing: -2.5px;
  font-feature-settings: "ss04", "ss06", "ss09", "ss10", "ss11";
}
.t-heading-lg {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-heading-lg);
  line-height: 1.05;
  letter-spacing: -0.8px;
  font-feature-settings: "ss04", "ss06", "ss09", "ss10", "ss11";
}
.t-heading {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-heading);
  line-height: 1.17;
  letter-spacing: -0.5px;
}
.t-heading-sm {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-heading-sm);
  line-height: 1.29;
  letter-spacing: -0.3px;
}
.t-subheading {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-subheading);
  line-height: 1.45;
  letter-spacing: -0.09px;
}
.t-body { font-size: var(--text-body); line-height: 1.55; }
.t-caption {
  font-size: var(--text-caption);
  line-height: 1;
  letter-spacing: -0.21px;
  font-weight: 500;
}
.t-mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0;
}
.t-mint { color: var(--color-accent-shine); }
.t-muted { color: var(--color-slate-ink); }
.t-light { color: var(--color-paper-light); }
.t-faded { color: rgba(250, 254, 255, 0.65); }

/* Container */
.container {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 var(--s-24);
}

/* === BUTTONS === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.015em;
  height: 40px;
  padding: 0 22px;
  white-space: nowrap;
  transition: transform .25s cubic-bezier(.2,.9,.3,1.2), box-shadow .25s ease, background .2s, color .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-mint {
  background: var(--color-mint-pulse);
  color: var(--color-paper-light);
  box-shadow: var(--shadow-mint-cta);
}
.btn-mint:hover { background: #262626; }

.btn-dark-solid {
  background: var(--color-deep-cosmos);
  color: var(--color-paper-light);
}
.btn-dark-solid:hover { background: #1a1a1a; }

.btn-dark-ghost {
  background: transparent;
  color: var(--color-paper-light);
  box-shadow: var(--shadow-dark-ghost);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.btn-dark-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.45);
}

.btn-light-ghost {
  background: #ffffff;
  color: var(--color-midnight-navy);
  box-shadow: var(--shadow-light-ghost);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.btn-light-ghost:hover {
  background: var(--color-ghost-canvas);
  border-color: rgba(0, 0, 0, 0.16);
}

.btn-link-dark {
  color: var(--color-paper-light);
  height: 40px;
  padding: 0 12px;
  background: transparent;
}
.btn-link-dark:hover { color: var(--color-accent-shine); }

.btn-sm { height: 32px; padding: 0 16px; font-size: 13px; }
.btn-lg { height: 48px; padding: 0 28px; font-size: 16px; }

/* === CARDS === */
.card {
  background: var(--color-pure-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.card-padded { padding: var(--s-32); }

.card-flat {
  background: var(--color-ghost-canvas);
  border-radius: var(--radius-card-md);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  padding: 10px 16px 10px 12px;
  border-radius: var(--radius-badge);
  background: rgba(255,255,255,0.95);
  color: var(--color-midnight-navy);
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-badge);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-card-sm);
  background: rgba(12, 38, 77, 0.04);
  color: var(--color-midnight-navy);
  font-family: var(--font-mono);
  font-size: 11px;
}

.chip-mint {
  background: var(--color-mint-soft);
  color: var(--color-midnight-navy);
}

.announcement {
  display: inline-flex;
  align-items: center;
  gap: var(--s-12);
  background: rgba(15, 15, 15, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 6px 16px 6px 6px;
  border-radius: var(--radius-pill);
  color: var(--color-paper-light);
  font-size: 13px;
  letter-spacing: -0.005em;
  backdrop-filter: blur(10px);
  transition: border-color .2s, background .2s;
}
.announcement:hover { border-color: rgba(255, 255, 255, 0.4); background: rgba(15, 15, 15, 0.5); }
.announcement .tag {
  background: var(--color-accent-shine);
  color: var(--color-midnight-navy);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* === NAV === */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  transition: background .3s ease, backdrop-filter .3s;
}
.nav-dark { background: rgba(15, 15, 15, 0.72); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.nav-light { background: rgba(248, 249, 252, 0.85); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 var(--s-24);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
}
.nav-link {
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 450;
  letter-spacing: -0.015em;
  transition: color .2s, background .2s;
}
.nav-dark .nav-link { color: var(--color-paper-light); }
.nav-light .nav-link { color: var(--color-midnight-navy); }
.nav-dark .nav-link:hover { color: var(--color-accent-shine); }
.nav-light .nav-link:hover { background: rgba(0, 0, 0, 0.04); }
.nav-link.active {
  background: rgba(0, 0, 0, 0.06);
  color: var(--color-mint-pulse);
  font-weight: 500;
}
.nav-light .nav-link.active:hover { background: rgba(0, 0, 0, 0.09); }
.nav-dark .nav-link.active {
  background: rgba(255, 255, 255, 0.10);
  color: var(--color-paper-light);
}
.nav-dark .nav-link.active:hover { background: rgba(255, 255, 255, 0.14); }

.nav-right { display: flex; align-items: center; gap: var(--s-8); }

/* Mobile hamburger button */
.nav-burger {
  display: none;
  background: transparent;
  border: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  padding: 0;
  cursor: pointer;
  color: inherit;
  place-items: center;
  margin-left: 4px;
}
.nav-burger:hover { background: rgba(0, 0, 0, 0.04); }
.nav-dark .nav-burger:hover { background: rgba(255, 255, 255, 0.08); }
.burger-icon {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 18px;
  height: 14px;
  position: relative;
}
.burger-icon span {
  display: block;
  width: 100%;
  height: 1.8px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .25s, opacity .2s;
  transform-origin: center;
}
.burger-icon.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger-icon.open span:nth-child(2) { opacity: 0; }
.burger-icon.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.nav-drawer.open { opacity: 1; pointer-events: auto; }
.nav-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100dvh;
  height: 100vh;
  width: 86vw;
  max-width: 360px;
  background: var(--color-pure-surface);
  display: flex;
  flex-direction: column;
  /* Bottom padding: 24px + safe-area inset untuk system UI bar. */
  padding: 56px 24px calc(24px + env(safe-area-inset-bottom, 16px));
  /* Whole panel scrolls if total content > viewport height. */
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.2,.9,.3,1.05);
  box-shadow: -12px 0 32px rgba(0, 0, 0, 0.12);
}
.nav-drawer.open .nav-drawer-panel { transform: translateX(0); }
.nav-drawer-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* No flex-grow + no own scroll — let drawer panel scroll if content exceeds.
     Prevents scroll-position bug where top items get hidden out of view. */
  flex: 0 0 auto;
  padding-bottom: 8px;
}
.nav-drawer-link {
  display: block;
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 450;
  color: var(--color-midnight-navy);
  text-decoration: none;
  border-radius: 10px;
  transition: background .15s, color .15s;
}
.nav-drawer-link:hover { background: rgba(0, 0, 0, 0.04); }
.nav-drawer-link.active {
  background: rgba(0, 0, 0, 0.06);
  color: var(--color-mint-pulse);
  font-weight: 500;
}
.nav-drawer-foot {
  margin-top: auto;          /* push to bottom when content fits */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* === AI Powered badge === */
.ai-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #ffffff 0%, #f1f3f7 50%, #e3e6ec 100%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  font-family: var(--font-sans);
  line-height: 1;
  overflow: hidden;
  isolation: isolate;
  transition: transform .2s, box-shadow .2s;
}
.ai-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.ai-badge-icon {
  width: 14px;
  height: 14px;
  color: var(--color-mint-pulse);
  animation: ai-spin 8s linear infinite;
  flex-shrink: 0;
}
.ai-badge-label {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.ai-badge-label strong {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-mint-pulse);
}
.ai-badge-label em {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12px;
  letter-spacing: -0.01em;
  color: var(--color-slate-ink);
  font-weight: 400;
}
.ai-badge-shimmer {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.7) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: ai-shimmer 4.5s ease-in-out infinite;
  pointer-events: none;
}

/* Dark variant (for dark nav/footer) */
.ai-badge-dark {
  background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
}
.ai-badge-dark .ai-badge-icon { color: var(--color-accent-shine); }
.ai-badge-dark .ai-badge-label strong { color: var(--color-paper-light); }
.ai-badge-dark .ai-badge-label em { color: rgba(250, 254, 255, 0.65); }
.ai-badge-dark .ai-badge-shimmer {
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.18) 50%, transparent 70%);
}

@keyframes ai-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes ai-shimmer {
  0%   { transform: translateX(-100%); }
  55%  { transform: translateX(110%); }
  100% { transform: translateX(110%); }
}

/* === Smart Proc badge (same visual pattern as AI Powered) === */
.sp-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #ffffff 0%, #f1f3f7 50%, #e3e6ec 100%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  font-family: var(--font-sans);
  line-height: 1;
  overflow: hidden;
  isolation: isolate;
  transition: transform .2s, box-shadow .2s;
}
.sp-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.sp-badge-icon {
  width: 14px;
  height: 14px;
  color: var(--color-mint-pulse);
  flex-shrink: 0;
  animation: sp-pulse 3s ease-in-out infinite;
}
.sp-badge-label {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.sp-badge-label strong {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-mint-pulse);
}
.sp-badge-label em {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12px;
  letter-spacing: -0.01em;
  color: var(--color-slate-ink);
  font-weight: 400;
}
.sp-badge-shimmer {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.7) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: ai-shimmer 4.5s ease-in-out infinite;
  animation-delay: 2.25s;
  pointer-events: none;
}

/* Dark variant */
.sp-badge-dark {
  background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
}
.sp-badge-dark .sp-badge-icon { color: var(--color-accent-shine); }
.sp-badge-dark .sp-badge-label strong { color: var(--color-paper-light); }
.sp-badge-dark .sp-badge-label em { color: rgba(250, 254, 255, 0.65); }
.sp-badge-dark .sp-badge-shimmer {
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.18) 50%, transparent 70%);
}

@keyframes sp-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(0.9); opacity: 0.72; }
}

/* Logo wordmark */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.5px;
  font-feature-settings: "ss04", "ss06", "ss09", "ss10";
}
.wordmark-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-accent-shine);
  box-shadow: 0 0 12px var(--color-accent-shine), 0 0 24px rgba(214, 218, 224, 0.5);
}
.wordmark .tld { color: var(--color-accent-shine); font-style: italic; }

/* === SECTIONS === */
.section { padding: 96px 0; }
.section-sm { padding: 56px 0; }
.section-lg { padding: 120px 0; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-slate-ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-mint-deep);
}
.eyebrow-light { color: rgba(250, 254, 255, 0.7); }
.eyebrow-light::before { background: var(--color-accent-shine); box-shadow: 0 0 10px var(--color-accent-shine); }

/* === HERO === */
.hero {
  position: relative;
  background: #0a0a0a;
  color: var(--color-paper-light);
  overflow: hidden;
  isolation: isolate;
}

/* Video background — fills hero, plays muted loop. Blur + darken untuk samarkan
   pattern video sehingga tidak distract dari teks. */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  filter: blur(3px) brightness(0.55) saturate(0.85);
  transform: scale(1.03); /* hide blur edge artifacts */
}

/* Uniform dark overlay — memastikan teks readable di seluruh hero */
.hero-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.25) 40%, rgba(0, 0, 0, 0.30) 70%, rgba(0, 0, 0, 0.55) 100%);
}

/* Aurora mesh — five soft blobs drifting at different rates, with a diagonal
   ribbon and a barely-visible dot grid for organic depth */
.hero-bg-animate {
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 32% at 18% 18%, rgba(15, 15, 15, 0.07) 0%, transparent 70%),
    radial-gradient(45% 38% at 86% 24%, rgba(120, 145, 200, 0.12) 0%, transparent 70%),
    radial-gradient(55% 42% at 78% 82%, rgba(184, 190, 200, 0.24) 0%, transparent 70%),
    radial-gradient(40% 36% at 22% 78%, rgba(80, 90, 120, 0.07) 0%, transparent 72%),
    radial-gradient(30% 26% at 50% 50%, rgba(15, 15, 15, 0.05) 0%, transparent 78%);
  filter: blur(48px);
  animation: hero-drift 26s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}

/* Diagonal aurora ribbon — slow translucent sweep */
.hero-bg-animate::before {
  content: "";
  position: absolute;
  top: 12%;
  left: -25%;
  width: 150%;
  height: 55%;
  background: linear-gradient(115deg,
    transparent 0%,
    rgba(184, 190, 200, 0.14) 38%,
    rgba(15, 15, 15, 0.05) 52%,
    rgba(120, 145, 200, 0.10) 64%,
    transparent 85%);
  filter: blur(36px);
  transform: skewY(-8deg);
  mix-blend-mode: multiply;
  animation: aurora-drift 18s ease-in-out infinite alternate;
}

/* Subtle dot grid texture, masked to fade at edges */
.hero-bg-animate::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(15, 15, 15, 0.10) 1px, transparent 1.5px);
  background-size: 28px 28px;
  opacity: 0.45;
  -webkit-mask-image: radial-gradient(ellipse 65% 55% at center, black 30%, transparent 80%);
          mask-image: radial-gradient(ellipse 65% 55% at center, black 30%, transparent 80%);
  animation: grid-pan 40s linear infinite;
}

.hero-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(50% 40% at 50% 60%, rgba(15, 15, 15, 0.06) 0%, rgba(15, 15, 15, 0.02) 50%, transparent 80%);
  opacity: 0.9;
  pointer-events: none;
  animation: hero-pulse 9s ease-in-out infinite alternate;
}

/* Particle layer — multi-tier depth: sharp small + soft blurred large */
.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.hero-particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(15, 15, 15, 0.42);
  box-shadow: 0 0 4px rgba(15, 15, 15, 0.18);
  animation: particle-drift linear infinite;
  will-change: transform, opacity;
}
.hero-particle:nth-child(3n) {
  background: rgba(15, 15, 15, 0.16);
  filter: blur(2px);
  box-shadow: 0 0 14px rgba(15, 15, 15, 0.08);
}
.hero-particle:nth-child(5n) {
  background: rgba(120, 140, 180, 0.30);
  filter: blur(1.2px);
}
.hero-particle:nth-child(7n) {
  background: rgba(15, 15, 15, 0.10);
  filter: blur(3px);
  box-shadow: 0 0 22px rgba(15, 15, 15, 0.06);
}

.hero-scan {
  position: absolute;
  top: 0;
  left: -50%;
  width: 70%;
  height: 100%;
  background: linear-gradient(105deg, transparent 0%, rgba(15, 15, 15, 0.03) 40%, rgba(15, 15, 15, 0.06) 50%, rgba(15, 15, 15, 0.03) 60%, transparent 100%);
  transform: skewX(-15deg);
  filter: blur(8px);
  animation: scan-sweep 18s ease-in-out infinite;
  mix-blend-mode: multiply;
}

@keyframes hero-drift {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  33%  { transform: translate(-3%, 2%) scale(1.04) rotate(0.5deg); }
  66%  { transform: translate(2%, -2%) scale(1.02) rotate(-0.4deg); }
  100% { transform: translate(3%, 1%) scale(1.06) rotate(0.6deg); }
}
@keyframes hero-pulse {
  0%   { opacity: 0.55; transform: scale(0.94); }
  50%  { opacity: 0.95; transform: scale(1.05); }
  100% { opacity: 0.7; transform: scale(0.98); }
}
@keyframes aurora-drift {
  0%   { transform: skewY(-8deg) translate(0, 0); opacity: 0.65; }
  50%  { transform: skewY(-5deg) translate(3%, 2%); opacity: 1; }
  100% { transform: skewY(-10deg) translate(-3%, -1%); opacity: 0.55; }
}
@keyframes grid-pan {
  0%   { background-position: 0 0; }
  100% { background-position: 28px 28px; }
}
@keyframes particle-drift {
  0%   { transform: translate(0, 0); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translate(24px, -140px); opacity: 0; }
}
@keyframes scan-sweep {
  0%   { left: -70%; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { left: 130%; opacity: 0; }
}

/* Partner logo strip */
.partner-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px 56px;
  max-width: 920px;
  margin: 0 auto;
}
.partner-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  transition: opacity .25s ease, transform .25s ease;
}
/* Light context (e.g. Solutions "Authorized Partner") — show real brand colors */
.partner-logo img { opacity: var(--strip-dim, 0.92); transition: opacity .25s ease, filter .25s ease; }
/* Dark context (home hero) — monochrome white silhouette */
.partner-logo-dark img { filter: brightness(0) invert(1); opacity: 0.78; }
.partner-logo:hover { transform: translateY(-2px); }
.partner-logo:hover img { opacity: 1 !important; }

.hero-inner {
  position: relative;
  z-index: 2;
  padding: 80px 24px 120px;
  text-align: center;
  max-width: 960px;
  margin: 0 auto;
}

.hero h1 { margin-bottom: 28px; }
.hero p.subtitle {
  font-size: 19px;
  color: rgba(250, 254, 255, 0.78);
  max-width: 640px;
  margin: 0 auto 36px;
  line-height: 1.5;
  letter-spacing: -0.005em;
}
.hero-cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* === GRID === */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-32); align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-24); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-24); }
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .nav-burger { display: grid; }
  /* Burger on the LEFT of nav, before wordmark */
  .nav-burger-left { margin-right: 8px; margin-left: -4px; }
  /* Hide text-only login on mobile (drawer punya tombol login) */
  .nav-login { display: none; }
}
@media (max-width: 1023px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .hero h1 { font-size: 44px !important; }
  .t-display { font-size: 36px !important; letter-spacing: -1px !important; }
  .t-display-xl { font-size: 44px !important; letter-spacing: -1.2px !important; }
  .t-heading-lg { font-size: 28px !important; }
  .section { padding: 56px 0; }
  .section-sm { padding: 40px 0; }
  .section-lg { padding: 72px 0; }
  .nav-inner { height: 64px !important; padding: 0 16px; }
  .container { padding: 0 16px; }
  .lang-toggle { display: none; }
  .hero-inner { padding: 56px 16px 80px; }
  .hero p.subtitle { font-size: 16px; }
  .ai-badge-label em { display: none; }
  .ai-badge { padding: 4px 8px 4px 6px; }
  .ai-badge-icon { width: 12px; height: 12px; }
  .ai-badge-label strong { font-size: 10px; }
}
@media (max-width: 480px) {
  .ai-badge { display: none; }
  .wordmark img { height: 40px !important; }
}

/* ====== MOBILE GRID COLLAPSE ======
   Inline `style={{ gridTemplateColumns }}` tidak respond ke media queries,
   jadi paksa semua pattern multi-column ke single column di mobile. */
@media (max-width: 1023px) {
  /* 2-col patterns → 1-col */
  *[style*="grid-template-columns: 2fr 1fr"],
  *[style*="grid-template-columns:2fr 1fr"],
  *[style*="grid-template-columns: 1fr 2fr"],
  *[style*="grid-template-columns:1fr 2fr"],
  *[style*="grid-template-columns: 1.2fr 1fr"],
  *[style*="grid-template-columns:1.2fr 1fr"],
  *[style*="grid-template-columns: 1fr 1.2fr"],
  *[style*="grid-template-columns:1fr 1.2fr"],
  *[style*="grid-template-columns: 1.6fr 1fr"],
  *[style*="grid-template-columns:1.6fr 1fr"],
  *[style*="grid-template-columns: 1fr 1fr"],
  *[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* 3-col patterns → 1-col */
  *[style*="grid-template-columns: repeat(3"],
  *[style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr !important;
  }
  /* 4-col patterns → 2-col */
  *[style*="grid-template-columns: repeat(4"],
  *[style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Hero CTA row & generic flex rows with gap */
  .hero-cta-row { flex-direction: column; align-items: stretch; }
  .hero-cta-row .btn { width: 100%; justify-content: center; }
  /* Stat numbers gap inside case study card — case study studio panel */
  .suite-half div[style*="display: flex"][style*="gap: 20"] { flex-wrap: wrap; gap: 16px !important; }
}
@media (max-width: 480px) {
  /* 3-col patterns at very small → also collapse */
  *[style*="grid-template-columns: repeat(4"],
  *[style*="grid-template-columns:repeat(4"] {
    grid-template-columns: 1fr !important;
  }
}

/* ====== MOBILE PADDING & OVERFLOW SAFETY ====== */
@media (max-width: 1023px) {
  /* Cards/sections dengan inline padding besar → kurangi */
  .suite-management > div { padding: 24px !important; }
  .suite-half { padding: 28px !important; }
  div[style*="padding: 40"] { padding: 24px !important; }
  div[style*="padding: 48"] { padding: 28px !important; }
  div[style*="padding: 56"] { padding: 32px !important; }
  div[style*="padding: '72px 48px'"],
  div[style*="padding: \"72px 48px\""] { padding: 40px 24px !important; }
  /* Section dark CTA card with big padding */
  section[style*="margin: '0 24px 96px'"],
  section[style*='margin: "0 24px 96px"'] { margin: 0 12px 64px !important; }
  /* Display gap between stat numbers in case study */
  div[style*="display: 'flex'"][style*="gap: 20"] { gap: 14px !important; }
  /* Prevent any element overflowing horizontally on mobile.
     Apply to html too — some mobile browsers ignore body-only clip.
     `clip` (vs `hidden`) preserves sticky positioning; fallback to `hidden`
     where clip isn't supported. */
  html, body { overflow-x: hidden; overflow-x: clip; }
  /* Long words / SKUs / emails — allow break */
  td, .app-product-name, .app-table td { word-break: break-word; }
}
@media (max-width: 480px) {
  div[style*="padding: 40"] { padding: 20px !important; }
  div[style*="padding: 48"] { padding: 24px !important; }
  .suite-management > div { padding: 20px !important; }
  .suite-half { padding: 24px !important; }
  /* Hero h1 smaller di very small */
  .hero h1 { font-size: 36px !important; }
  .t-display { font-size: 30px !important; }
  .t-display-xl { font-size: 36px !important; }
}

.flow-col { display: flex; flex-direction: column; }
.gap-8 { gap: var(--s-8); }
.gap-12 { gap: var(--s-12); }
.gap-16 { gap: var(--s-16); }
.gap-20 { gap: var(--s-20); }
.gap-24 { gap: var(--s-24); }
.gap-32 { gap: var(--s-32); }
.gap-40 { gap: var(--s-40); }

/* Product Suite Tabs */
.suite-tabs {
  display: inline-flex;
  padding: 4px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
  gap: 4px;
}
.suite-tab {
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  color: rgba(250,254,255,0.75);
  font-weight: 450;
  letter-spacing: -0.01em;
  transition: all .2s;
  cursor: pointer;
}
.suite-tab.active {
  background: var(--color-accent-shine);
  color: var(--color-midnight-navy);
  font-weight: 500;
}
.suite-tab:not(.active):hover { color: var(--color-paper-light); }

/* Product cards on dark */
.product-card-dark {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-card);
  padding: var(--s-32);
  color: var(--color-paper-light);
  transition: transform .3s ease, border-color .25s, background .25s;
  position: relative;
  overflow: hidden;
}
.product-card-dark:hover {
  transform: translateY(-4px);
  border-color: rgba(214, 218, 224, 0.35);
  background: rgba(255,255,255,0.06);
}
.product-card-dark .pc-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: rgba(214, 218, 224, 0.12);
  border: 1px solid rgba(214, 218, 224, 0.25);
  display: grid; place-items: center;
  margin-bottom: 20px;
  color: var(--color-accent-shine);
}
.product-card-dark h3 { margin-bottom: 8px; }

/* Feature cards on light */
.feature-card {
  background: var(--color-pure-surface);
  border-radius: var(--radius-card);
  padding: var(--s-32);
  box-shadow: var(--shadow-card);
  transition: transform .25s ease;
}
.feature-card:hover { transform: translateY(-2px); }
.feature-card .fc-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--color-mint-soft);
  display: grid; place-items: center;
  margin-bottom: 16px;
  color: var(--color-midnight-navy);
}

/* Logo strip */
.logo-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-40);
  flex-wrap: wrap;
  opacity: 0.65;
}
.logo-strip .logo-item {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--color-paper-light);
  letter-spacing: -0.02em;
}

/* Stats */
.stat-num {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1;
  letter-spacing: -2px;
  color: var(--color-midnight-navy);
  font-feature-settings: "ss04", "ss06", "ss09", "ss10";
}

/* Pricing card */
.price-card {
  background: var(--color-pure-surface);
  border-radius: var(--radius-card);
  padding: 32px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: transform .25s ease;
}
.price-card:hover { transform: translateY(-3px); }
.price-card.featured {
  background: var(--color-deep-cosmos);
  color: var(--color-paper-light);
}
.price-card.featured h3 { color: var(--color-paper-light); }
.price-card .price-amount {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 1;
  letter-spacing: -1.5px;
}
.price-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.price-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.4;
}
.price-list li svg { flex-shrink: 0; margin-top: 2px; color: var(--color-mint-pulse); }
.price-card.featured .price-list li svg { color: var(--color-accent-shine); }

/* Footer */
.footer {
  background: var(--color-deep-cosmos);
  color: var(--color-paper-light);
  padding: 88px 0 28px;
  font-feature-settings: "ss01";
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr;
  gap: 40px 28px;
  margin-bottom: 56px;
}
.footer-brand { max-width: 340px; }
.footer-tagline {
  margin-top: 18px;
  font-size: 14px;
  color: rgba(250, 254, 255, 0.65);
  line-height: 1.55;
  max-width: 320px;
}
.footer-status {
  margin-top: 18px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(250, 254, 255, 0.65);
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.footer-status .pulse-dot {
  margin-top: 5px;
}
.footer-socials {
  display: flex;
  gap: 8px;
  margin-top: 24px;
}
.footer-socials a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(250, 254, 255, 0.75);
  transition: background .2s, color .2s, transform .2s;
}
.footer-socials a:hover {
  background: var(--color-accent-shine);
  color: var(--color-midnight-navy);
  transform: translateY(-2px);
}

.footer h4 {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent-shine);
  font-family: var(--font-mono);
  margin: 0 0 18px;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.footer ul a {
  font-size: 14px;
  color: rgba(250, 254, 255, 0.72);
  transition: color .15s, padding-left .15s;
  display: inline-block;
}
.footer ul a:hover {
  color: var(--color-paper-light);
  padding-left: 4px;
}

/* Contact strip */
.footer-contact {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 24px;
}
.footer-contact-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.footer-contact-item .label {
  font-size: 11px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(250, 254, 255, 0.5);
}
.footer-contact-item a, .footer-contact-item span:not(.label) {
  font-size: 14px;
  color: rgba(250, 254, 255, 0.88);
  transition: color .15s;
}
.footer-contact-item a:hover { color: var(--color-accent-shine); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 8px;
  font-size: 12px;
  color: rgba(250, 254, 255, 0.5);
  flex-wrap: wrap;
}
.footer-bottom-links {
  display: flex;
  gap: 24px;
}
.footer-bottom-links a {
  color: rgba(250, 254, 255, 0.6);
  transition: color .15s;
}
.footer-bottom-links a:hover { color: var(--color-paper-light); }

@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }
  .footer-brand { grid-column: 1 / -1; max-width: none; }
  .footer-brand .footer-tagline { max-width: 480px; }
}
@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-contact { grid-template-columns: 1fr 1fr; gap: 20px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .footer-bottom-links { gap: 16px; flex-wrap: wrap; }
}

/* Light section heading */
.section-head {
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
}
.section-head .eyebrow { margin-bottom: 16px; justify-content: center; }
.section-head h2 { margin-bottom: 16px; }
.section-head p { color: var(--color-slate-ink); font-size: 18px; line-height: 1.5; }

/* Input */
.input {
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--color-midnight-navy);
  padding: 14px 4px;
  background: transparent;
  font-size: 16px;
  letter-spacing: -0.005em;
  color: var(--color-midnight-navy);
  width: 100%;
  outline: none;
  font-family: inherit;
  transition: border-color .2s;
}
.input:focus { border-color: var(--color-mint-pulse); }
.input::placeholder { color: var(--color-ash-medium); }

textarea.input { resize: vertical; min-height: 100px; border: 1px solid var(--color-midnight-navy); padding: 14px; }

/* Splitter — divides hero from light canvas with smooth seam */
.section-light-top {
  background: var(--color-ghost-canvas);
  border-radius: 32px 32px 0 0;
  margin-top: -32px;
  position: relative;
  z-index: 5;
}

/* Animations */
@keyframes float-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse-mint {
  0%, 100% { box-shadow: 0 0 0 0 rgba(214, 218, 224, 0.6); }
  50% { box-shadow: 0 0 0 16px rgba(214, 218, 224, 0); }
}
.fade-in { animation: float-in .8s cubic-bezier(.2,.9,.3,1.05) both; }
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }

.pulse-dot {
  width: 8px; height: 8px;
  min-width: 8px; min-height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--color-accent-shine);
  animation: pulse-mint 2s infinite;
}

/* Page transition */
.page-enter { animation: float-in .5s ease-out; }

/* Suite triple — 3-column product cards (Marketplace / Solutions / Management) */
.suite-triple {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.suite-card {
  position: relative;
  background: var(--color-pure-surface);
  border-radius: var(--radius-card);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
  transition: transform .25s ease, box-shadow .25s ease;
}
.suite-card:hover {
  transform: translateY(-4px);
  box-shadow: rgba(0, 0, 0, 0.04) 0px 12px 32px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}
.suite-card.suite-card-dark {
  background: var(--color-deep-cosmos);
  color: var(--color-paper-light);
}
.suite-card.suite-card-dark h3 { color: var(--color-paper-light); }
.suite-card.suite-card-dark .suite-card-body { color: rgba(250, 254, 255, 0.72); }
.suite-card.suite-card-dark .suite-feature-list li { color: rgba(250, 254, 255, 0.82); }
.suite-card.suite-card-dark .suite-feature-list .dot { background: var(--color-accent-shine); }

.suite-card h3 {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.6px;
  margin: 0 0 12px;
  line-height: 1.1;
}
.suite-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.suite-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 9999px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.suite-badge.amber { background: rgba(217, 119, 6, 0.10); color: #b45309; }

.suite-card-body {
  font-size: 15px;
  color: var(--color-slate-ink);
  line-height: 1.55;
  margin: 0 0 24px;
}
.suite-feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.suite-feature-list li {
  font-size: 13px;
  color: var(--color-storm-gray);
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.suite-feature-list .dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-mint-pulse);
  margin-top: 6px;
}
.suite-feature-list .dot.green { background: #059669; }
.suite-feature-list strong { color: var(--color-midnight-navy); font-weight: 500; }
.suite-card.suite-card-dark .suite-feature-list strong { color: var(--color-paper-light); }

.suite-card-cta {
  margin-top: auto;
  display: flex;
}
.suite-card-cta .btn { width: 100%; justify-content: center; }

@media (max-width: 1100px) {
  .suite-triple { grid-template-columns: 1fr; gap: 16px; }
  .suite-card { padding: 28px 24px; }
}

/* Legacy 2-col split (kept for safety, no longer used in home) */
.suite-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-pure-surface);
  box-shadow: var(--shadow-card);
}
.suite-half { padding: 40px; }
.suite-half.platform {
  background: var(--color-pure-surface);
  border-right: 1px solid rgba(0,0,0,0.06);
}
.suite-half.studio {
  background: var(--color-deep-cosmos);
  color: var(--color-paper-light);
}
.suite-half h3 {
  font-family: var(--font-display);
  font-size: 32px;
  letter-spacing: -0.8px;
  margin-bottom: 12px;
  font-weight: 400;
  font-feature-settings: "ss04", "ss06", "ss09", "ss10", "ss11";
}
@media (max-width: 1023px) {
  .suite-split { grid-template-columns: 1fr; }
  .suite-half.platform { border-right: none; border-bottom: 1px solid rgba(0,0,0,0.06); }
  .suite-management { grid-template-columns: 1fr !important; }
  .suite-management > div:nth-child(2) { border-left: none !important; border-top: 1px solid rgba(0,0,0,0.06); }
}

/* Mockup dashboard frame */
.mockup {
  background: var(--color-pure-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  position: relative;
}
.mockup-bar {
  display: flex; align-items: center;
  padding: 12px 16px;
  gap: 6px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: var(--color-ghost-canvas);
}
.mockup-bar .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--color-fog-border);
}
.mockup-bar .url-chip {
  margin-left: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-slate-ink);
  background: rgba(255,255,255,0.7);
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.mockup-body { padding: 20px; }

/* === LANG TOGGLE === */
.lang-toggle {
  display: inline-flex;
  padding: 3px;
  border-radius: var(--radius-pill);
  gap: 2px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.nav-light .lang-toggle { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); }
.lang-toggle button {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: inherit;
  opacity: 0.6;
  transition: all .2s;
}
.lang-toggle button.on { background: var(--color-accent-shine); color: var(--color-midnight-navy); opacity: 1; }
.nav-light .lang-toggle button.on { background: var(--color-mint-pulse); color: var(--color-paper-light); }

/* === Form states === */
.form-card { display: flex; flex-direction: column; gap: 24px; }
.form-row { display: flex; flex-direction: column; gap: 6px; }
.form-row label { font-size: 13px; color: var(--color-slate-ink); }

.contact-success {
  background: var(--color-mint-soft);
  border-radius: var(--radius-card-md);
  padding: 32px;
  text-align: center;
}

/* Misc */
.divider-thin { height: 1px; background: rgba(0, 0, 0, 0.06); margin: 32px 0; }
.dot-sep { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; margin: 0 8px; opacity: 0.5; vertical-align: middle; }
.kbd {
  display: inline-block; font-family: var(--font-mono);
  font-size: 11px; padding: 2px 6px;
  background: rgba(0,0,0,0.05);
  border-radius: 4px;
}