:root {
  --orange-active: #f68538;
  --orange-soft: #e7a35f;
  --blue: #5b6fb3;
  --red: #db454e;
  --green: #00be84;
  --white: #ffffff;
  --black: #000000;
  --text-dark: #545454;
  --bg-light: #f3f3f3;
  --border-gray: #d9dade;
  --text-mid: #707070;
  --shadow: #00000029;
  --nav-inactive: #dfdfdf;
  --nav-dim: #8c8c8c;
  --font:
    'Noto Sans KR', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    sans-serif;
  --header-h: 90px;
  /* Shared section padding - every section rule (and its inner wrapper)
     pulls from these instead of repeating literal values, so the gutter
     and top/bottom rhythm stay identical across sections at every
     breakpoint. */
  --section-pad-x: 7.8vw;
  /* Shared min-height floor for the full-bleed sections (stack-strip,
     core-tech, applications, leadership, contact) - one place to change
     instead of editing every section file. */
  --section-min-h: 110dvh;
  /* Fixed distance from section start to section title, same across every
     section at a given breakpoint (rem, not viewport-relative). Any extra
     free space beyond a section's content goes to the bottom, not here -
     see .applications::after etc. below. */
  --section-pad-top: 6rem;
  --section-pad-bottom: 4.2rem;
  /* Font-size scale - 5 tiers, every font-size in the site pulls from one of
     these instead of a one-off literal. Responsive overrides live in the
     1100px/760px breakpoints below and in each section's own media query. */
  --fs-title: 2.375rem;
  --fs-heading: 1.875rem;
  --fs-body: 1rem;
  --fs-small: 0.9375rem;
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: var(--font);
  color: var(--black);
  background: var(--black);
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
  display: block;
}
img[hidden] {
  display: none;
}
a {
  text-decoration: none;
  color: inherit;
}
h1,
h2,
h3,
p,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.section-title {
  font-size: var(--fs-title);
  line-height: 1.4474;
  font-weight: 700;
  color: var(--black);
}
.section-title.center {
  text-align: center;
}
.section-subtitle {
  margin-top: 0.75rem;
  color: var(--black);
  font-size: var(--fs-body);
  line-height: 1.45;
  font-weight: 500;
}
.section-subtitle.center {
  text-align: center;
}

/* SCROLL REVEAL */
.reveal {
  opacity: 0;
  transform: translateY(48px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.contact-cards .reveal:nth-child(2) {
  transition-delay: 0.1s;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* FULL-BLEED SECTION SHELL
   Shared shape for the full-bleed sections (tech-section, applications,
   leadership, contact): flex column at min-height var(--section-min-h).
   Top gap is the fixed padding-top (--section-pad-top) so section-start-
   to-title distance is identical across sections; a single spacer
   pseudo-element after the content absorbs 100% of whatever free space
   is left, so any slack goes to the bottom, never the top. Background +
   max-width are set per-section since they differ. */
.applications,
.leadership,
.contact {
  min-height: var(--section-min-h);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--section-pad-top) var(--section-pad-x) var(--section-pad-bottom);
  scroll-margin-top: var(--header-h);
}
.applications::after,
.leadership::after,
.contact::after {
  content: '';
  flex: 1 0 0;
}
.applications > *,
.contact > * {
  width: 100%;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
}

/* TECHNOLOGIES + CORE TECHNOLOGIES - one section holding both blocks, so
   jumping to #technologies shows the start of Core Technologies too
   instead of stranding it a full min-height below. Vertical rhythm only
   (no horizontal padding, no centering spacers) - each inner block
   (.stack-strip, .core-tech) carries its own horizontal padding and
   full-bleed background. */
.tech-section {
  min-height: var(--section-min-h);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  scroll-margin-top: var(--header-h);
  background: var(--bg-light);
}
.stack-strip > * {
  width: 100%;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1100px) {
  :root {
    --header-h: 72px;
    --section-pad-x: 8vw;
    --section-pad-top: 5rem;
    --section-pad-bottom: 3rem;
    --fs-title: 1.875rem;
    --fs-heading: 1.5rem;
    --fs-body: 0.9375rem;
    --fs-small: 0.875rem;
  }
}

@media (max-width: 760px) {
  :root {
    --header-h: 64px;
    --section-pad-top: 3.5rem;
    --section-pad-bottom: 3rem;
    --fs-title: 1.5rem;
    --fs-heading: 1.25rem;
    --fs-body: 0.9375rem;
    --fs-small: 0.8rem;
  }
}