/* ═══════════════════════════════════════════════════════
   SEIPO CORPORATION — SHARED DESIGN SYSTEM
   Brand: dark #1D1F1E · gold #C4BD97 · blue #37C6FF
═══════════════════════════════════════════════════════ */

/* ── Reset ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  background: #1D1F1E;
  color: #EEECE1;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }

/* ── Nav ────────────────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 56px; height: 72px;
  background: rgba(29,31,30,0.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(196,189,151,0.10);
}
.nav-logo-link { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.nav-logo-link svg { height: 44px; width: auto; }
/* Legacy text logo fallback */
.nav-logo { font-size: 21px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.nav-logo span { color: #37C6FF; }
.nav-links { display: flex; gap: 34px; list-style: none; align-items: center; }
.nav-links > li { position: relative; display: flex; align-items: center; height: 72px; }
.nav-links a {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(238,236,225,0.6); transition: color 0.2s;
}
.nav-links a:hover, .nav-links a.active { color: #C4BD97; }

/* ── Capabilities dropdown ──────────────────────────── */
.nav-dropdown-trigger {
  display: flex; align-items: center; gap: 5px; cursor: pointer;
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(238,236,225,0.6); transition: color 0.2s;
  background: none; border: none; padding: 0; font-family: inherit;
  height: 72px;
}
.nav-dropdown-trigger:hover,
.nav-dropdown-trigger.active { color: #C4BD97; }
.nav-dropdown-arrow {
  font-size: 9px; transition: transform 0.25s;
  display: inline-block; margin-top: 1px;
}
.nav-dropdown-item:hover .nav-dropdown-arrow,
.nav-dropdown-item.open .nav-dropdown-arrow { transform: rotate(180deg); color: #C4BD97; }

.nav-dropdown-menu {
  display: none;
  position: fixed; top: 72px; left: auto;
  background: rgba(22,24,23,0.99);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(196,189,151,0.2);
  border-top: 2px solid #C4BD97;
  border-radius: 0 0 4px 4px;
  min-width: 220px;
  padding: 8px 0;
  box-shadow: 0 20px 48px rgba(0,0,0,0.7);
  z-index: 9999;
}
/* Show on hover OR when .open class is toggled by JS */
.nav-dropdown-item:hover .nav-dropdown-menu,
.nav-dropdown-item.open .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a {
  display: block; padding: 11px 22px;
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(238,236,225,0.6); transition: all 0.15s;
  border-left: 2px solid transparent;
}
.nav-dropdown-menu a:hover {
  color: #C4BD97; background: rgba(196,189,151,0.06);
  border-left-color: #C4BD97; padding-left: 26px;
}
.nav-dropdown-menu a.active { color: #C4BD97; border-left-color: #C4BD97; }

.nav-cta {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 9px 22px; border: 1px solid #37C6FF; color: #37C6FF;
  border-radius: 2px; transition: all 0.2s;
}
.nav-cta:hover { background: #37C6FF; color: #1D1F1E; }

/* Hamburger (mobile) */
.nav-hamburger { display: none; background: none; border: none; cursor: pointer; padding: 4px; }
.nav-hamburger span {
  display: block; width: 22px; height: 2px;
  background: #EEECE1; margin: 5px 0; border-radius: 2px; transition: all 0.3s;
}

/* ── Page Hero (inner pages) ────────────────────────── */
.page-hero {
  padding: 152px 56px 64px;
  max-width: 1380px; margin: 0 auto;
}
.eyebrow {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: #37C6FF; margin-bottom: 18px;
}
.page-hero h1 {
  font-size: clamp(48px, 6.5vw, 88px);
  font-weight: 800; line-height: 1.0; letter-spacing: -0.025em;
  color: #EEECE1;
}
.page-hero h1 em { font-style: normal; color: #C4BD97; }
.hero-sub {
  margin-top: 24px; font-size: 15px; line-height: 1.75;
  color: rgba(238,236,225,0.52); max-width: 500px;
}

/* ── Section Utilities ──────────────────────────────── */
.section { padding: 96px 56px; max-width: 1380px; margin: 0 auto; }
.section-sm { padding: 64px 56px; max-width: 1380px; margin: 0 auto; }
.divider {
  width: 100%; height: 1px;
  background: rgba(196,189,151,0.12);
  margin: 0 56px; width: calc(100% - 112px);
}
.section-label {
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(238,236,225,0.28); margin-bottom: 48px;
}

/* ── Typography ─────────────────────────────────────── */
.h2 {
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 700; line-height: 1.1; letter-spacing: -0.02em;
}
.h2 em { font-style: normal; color: #C4BD97; }
.h3 { font-size: clamp(20px, 2.2vw, 28px); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.lead { font-size: 16px; line-height: 1.8; color: rgba(238,236,225,0.65); }
.small { font-size: 13px; color: rgba(238,236,225,0.5); line-height: 1.7; }

/* ── Gold tag ───────────────────────────────────────── */
.tag {
  display: inline-block;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #C4BD97; border: 1px solid rgba(196,189,151,0.32);
  padding: 4px 11px; border-radius: 2px;
}

/* ── Buttons ────────────────────────────────────────── */
.btn-primary {
  display: inline-block; padding: 14px 34px;
  background: #37C6FF; color: #1D1F1E;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  border-radius: 2px; transition: background 0.2s, transform 0.15s;
}
.btn-primary:hover { background: #5dd3ff; transform: translateY(-1px); }
.btn-outline {
  display: inline-block; padding: 13px 32px;
  border: 1px solid rgba(238,236,225,0.35); color: #EEECE1;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  border-radius: 2px; transition: all 0.2s;
}
.btn-outline:hover { border-color: #C4BD97; color: #C4BD97; }

/* ── Full-width image strip ─────────────────────────── */
.img-full {
  width: 100%; aspect-ratio: 21/8; overflow: hidden; background: #111;
}
.img-full img { width: 100%; height: 100%; object-fit: cover; }

/* ── 2-column layouts ───────────────────────────────── */
.col2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.col3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
.col4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split-3-2 { display: grid; grid-template-columns: 3fr 2fr; gap: 80px; align-items: start; }

/* ── Capability card ────────────────────────────────── */
.cap-card {
  border: 1px solid rgba(196,189,151,0.14);
  padding: 36px 32px; border-radius: 3px;
  transition: border-color 0.25s, background 0.25s;
}
.cap-card:hover { border-color: rgba(196,189,151,0.4); background: rgba(196,189,151,0.04); }
.cap-card .icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(55,198,255,0.1); display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.cap-card .icon svg { width: 20px; height: 20px; stroke: #37C6FF; }
.cap-card h4 { font-size: 16px; font-weight: 700; margin-bottom: 10px; color: #EEECE1; }
.cap-card p { font-size: 13px; color: rgba(238,236,225,0.5); line-height: 1.7; }

/* ── Stat block ─────────────────────────────────────── */
.stat { text-align: center; padding: 40px 24px; }
.stat-num { font-size: clamp(44px,6vw,72px); font-weight: 800; color: #C4BD97; line-height: 1; letter-spacing: -0.02em; }
.stat-label { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(238,236,225,0.45); margin-top: 10px; }

/* ── Image card (hover zoom) ────────────────────────── */
.img-card { overflow: hidden; background: #111; }
.img-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.65s cubic-bezier(0.25,0.46,0.45,0.94); }
.img-card:hover img { transform: scale(1.05); }

/* ── CTA Strip ──────────────────────────────────────── */
.cta-strip {
  background: #C4BD97; padding: 88px 56px; text-align: center;
}
.cta-strip h2 { font-size: clamp(28px,4vw,48px); font-weight: 800; color: #1D1F1E; letter-spacing: -0.02em; margin-bottom: 14px; }
.cta-strip p { font-size: 15px; color: rgba(29,31,30,0.62); max-width: 460px; margin: 0 auto 32px; line-height: 1.75; }
.btn-dark { display: inline-block; padding: 14px 36px; background: #1D1F1E; color: #EEECE1; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; border-radius: 2px; transition: background 0.2s; }
.btn-dark:hover { background: #37C6FF; color: #1D1F1E; }

/* ── Footer ─────────────────────────────────────────── */
footer {
  padding: 56px; display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 48px; border-top: 1px solid rgba(196,189,151,0.10);
}
.footer-brand .logo { font-size: 18px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 12px; }
.footer-brand .logo span { color: #37C6FF; }
.footer-brand p { font-size: 12px; color: rgba(238,236,225,0.35); line-height: 1.8; max-width: 240px; }
.footer-col h5 { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(238,236,225,0.35); margin-bottom: 18px; }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a { font-size: 13px; color: rgba(238,236,225,0.55); transition: color 0.2s; }
.footer-col ul li a:hover { color: #C4BD97; }
.footer-bottom { padding: 20px 56px; border-top: 1px solid rgba(196,189,151,0.07); display: flex; justify-content: space-between; align-items: center;