/*
 * Breakpoints (Tailwind default — use in @media min-width)
 * sm:  640px
 * md:  768px
 * lg:  1024px
 * xl:  1280px  (= --container-max)
 * 2xl: 1536px
 */

:root {
  --color-primary: #0a66c2;
  --color-primary-dark: #084d94;
  --color-text: #010804;
  --color-text-muted: #373737;
  --color-surface: #ffffff;
  --color-surface-alt: #e6eff8;
  --color-surface-muted: #f2f2f2;
  --color-border: rgba(1, 8, 4, 0.15);
  --color-neutral-lighter: #d8d9d9;

  /* base (< sm): mobile */
  --space-page-x: 20px;
  --space-page-x-md: 32px;
  --space-page-x-lg: 64px;
  --space-section-y: 64px;
  --space-section-y-sm: 48px;
  --space-section-y-xs: 32px;
  --container-max: 1280px;
  --contact-chevron-size: 16px;

  --radius-card: 16px;
  --radius-pill: 110px;
  --radius-btn: 24px;

  --font-family: "Inter", ui-sans-serif, system-ui, sans-serif;

  --text-h1: 36px;
  --text-h2: 32px;
  --text-h3: 28px;
  --text-h4: 24px;
  --text-h5: 20px;
  --text-h6: 20px;
  --text-md: 18px;
  --text-base: 16px;
  --text-sm: 14px;

  --nav-font-size: 20px;
  --nav-signin-padding: 8px 20px;
  --nav-outline-padding: 10px 24px;
  --nav-register-padding: 8px 20px;
  --nav-register-width: 160px;
  --radius-nav-register: 33px;
  --nav-logo-height: 56px;
  --nav-pill-max: 1360px;
  --nav-pill-pad-x: 8px;
  --nav-inner-pad-x: 24px;
  --nav-brand-pad-left: 10px;
  --nav-logo-inset: calc(
    var(--nav-pill-pad-x) + var(--nav-inner-pad-x) + var(--nav-brand-pad-left)
  );
  --nav-start-gap: 48px;
  --nav-links-gap: 32px;

  --nav-sticky-top: 0;
  --nav-sticky-block: 96px;
  --scroll-offset-top: calc(var(--nav-sticky-top) + var(--nav-sticky-block) + 16px);
  --z-nav-sticky: 1000;
  --nav-transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease,
    border-color 0.2s ease;

  /* Entrance motion — Apple-inspired */
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-duration: 1s;
  --motion-duration-fast: 0.8s;
  --motion-duration-slow: 1.2s;
  --motion-y: 24px;
  --motion-y-sm: 12px;
  --motion-blur: 6px;
  --motion-stagger-step: 0.08s;
  --motion-image-scale-from: 0.98;
  /* Navbar biru (fitur–kontak) — default */
  --nav-pill-bg-content: var(--color-primary);
  --nav-pill-shadow-content: 0 8px 12px 6px rgba(0, 0, 0, 0.15), 0 4px 4px rgba(0, 0, 0, 0.3);
  --nav-link-color-content: var(--color-surface);
  --nav-signin-color-content: var(--color-surface);
  --nav-register-bg-content: var(--color-surface);
  --nav-register-color-content: var(--color-primary);
  --nav-toggle-color-content: var(--color-surface);
  --nav-outline-border-content: var(--color-neutral-lighter);
  /* Navbar putih (home) — Figma 540:10296 */
  --nav-pill-bg-home: var(--color-surface);
  --nav-pill-shadow-home: 0 8px 12px 6px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06);
  --nav-link-color-home: var(--color-text-muted);
  --nav-signin-color-home: var(--color-primary);
  --nav-register-bg-home: var(--color-primary);
  --nav-register-color-home: var(--color-surface);
  --nav-toggle-color-home: var(--color-primary);
  --nav-outline-border-home: var(--color-neutral-lighter);
  --shadow-nav: 0 8px 12px 6px rgba(0, 0, 0, 0.15), 0 4px 4px rgba(0, 0, 0, 0.3);
  --shadow-card-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
  --shadow-card-md: 0 12px 16px -4px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03);

  /* Step cards — Figma 540:10453 (hover) / 540:10427 (section) */
  --step-card-flex-basis: 320px;
  --step-card-max-width: 405px;
  --step-card-hover-max-width: 680px;
  --step-card-min-height: 436px;
  --step-card-gap: 32px;
  --step-card-padding: 48px;
  --step-card-slot-min-width: 280px;
  --step-card-content-ratio: 40%;
  --step-card-figure-ratio: 60%;
  --step-card-hover-radius: 24px;
  --step-card-hover-border: 1px solid var(--color-text);
  --step-card-content-bg: var(--color-surface);
  --step-card-content-gap: 24px;
  --step-card-watermark-opacity: 0.12;
  --step-card-bg-watermark-opacity: 0.2;
  --step-card-figure-watermark-opacity: 0.65;
  --step-card-transition:
    width 0.4s ease,
    max-width 0.4s ease,
    box-shadow 0.3s ease,
    filter 0.35s ease,
    opacity 0.35s ease,
    transform 0.35s ease;
  --step-card-shadow-hover:
    0 16px 32px -8px rgba(0, 0, 0, 0.12),
    0 8px 16px -4px rgba(0, 0, 0, 0.08);
  --step-card-sibling-blur: 6px;
  --step-card-sibling-opacity: 0.55;

  /* Benefit cards — Figma 540:10482 (hover) */
  --benefit-card-min-height: 420px;
  --benefit-card-min-height-lg: 500px;
  --benefit-card-hover-scale: 1.1;
  --benefit-card-hover-scale-mobile: 1.02;
  --benefit-card-hover-transition:
    transform 0.4s ease,
    box-shadow 0.3s ease;
  --benefit-card-shadow-hover:
    0 16px 32px -8px rgba(0, 0, 0, 0.12),
    0 8px 16px -4px rgba(0, 0, 0, 0.08);

  --hero-height: 100dvh;
  --hero-body-min-height: 0;
  --hero-content-offset-x: 0;
  --hero-content-offset-y: 0;
  --hero-gap-below-nav: 32px;
  --hero-nav-wrap-pad-block: 24px;
  --hero-nav-pill-block: 92px;
  --hero-nav-overlap: calc(var(--hero-nav-wrap-pad-block) + var(--hero-nav-pill-block));
  --hero-home-bg-color: rgba(204, 234, 255, 0.45);
  --hero-home-bg-top: linear-gradient(
    180deg,
    rgba(163, 235, 255, 0.92) 0%,
    rgba(190, 240, 255, 0.65) 35%,
    rgba(204, 234, 255, 0) min(280px, 32vh)
  );
  --hero-copy-max: 620px;
  --hero-title-max: 622px;
  --hero-subtitle-max: 576px;
  --hero-cta-gap: 16px;
  --hero-cta-primary-width: 242px;
  --hero-cta-secondary-width: 155px;
  --hero-cta-height: 48px;

  --hero-gradient: radial-gradient(
    ellipse 120% 90% at 68% 40%,
    rgba(42, 241, 255, 1) 0%,
    rgba(82, 239, 255, 0.85) 18%,
    rgba(123, 237, 255, 0.65) 35%,
    rgba(163, 235, 255, 0.45) 53%,
    rgba(204, 234, 255, 0.25) 71%,
    rgba(255, 255, 255, 1) 100%
  );
  --hero-gradient-wide: radial-gradient(
    ellipse 160% 100% at 72% 42%,
    rgba(42, 241, 255, 1) 0%,
    rgba(82, 239, 255, 0.85) 18%,
    rgba(123, 237, 255, 0.65) 35%,
    rgba(163, 235, 255, 0.45) 53%,
    rgba(204, 234, 255, 0.25) 71%,
    rgba(255, 255, 255, 1) 100%
  );
}

/* sm: 640px */
@media (min-width: 640px) {
  :root {
    --hero-cta-primary-width: 242px;
    --hero-cta-secondary-width: 155px;
  }
}

/* md: 768px */
@media (min-width: 768px) {
  :root {
    --hero-gap-below-nav: 40px;
    --space-page-x: var(--space-page-x-md);
    --space-section-y: 80px;
    --text-h1: 44px;
    --text-h2: 40px;
    --text-h3: 32px;
    --text-h4: 28px;
    --text-h5: 24px;
    --text-h6: 20px;
  }
}

/* Mobile/tablet: nav-wrap extra bottom pad */
@media (max-width: 1023px) {
  :root {
    --hero-nav-wrap-pad-block: 32px;
  }
}

/* lg: 1024px */
@media (min-width: 1024px) {
  :root {
    --hero-nav-wrap-pad-block: 32px;
    --space-page-x: var(--space-page-x-lg);
    --space-section-y: 112px;
    --text-h1: 56px;
    --text-h2: 48px;
    --text-h3: 40px;
    --text-h4: 32px;
    --text-h5: 24px;
    --hero-gap-below-nav: 0;
    --hero-content-offset-x: 110px;
    --hero-content-offset-y: 138px;
    --hero-content-pad-left: calc(
      var(--space-page-x)
      + max(
        0px,
        (100vw - 2 * var(--space-page-x) - var(--nav-pill-max)) / 2
      )
      + var(--nav-logo-inset)
    );
    --hero-gradient: var(--hero-gradient-wide);
  }
}

/* 2xl: 1536px */
@media (min-width: 1536px) {
  :root {
    --space-section-y: 120px;
  }
}