/* ──────────────────────────────────────────────────────────────────────
   Seifert Dynamics — shared page design system
   Matches the homepage aesthetic: pure black, Inter/DM Sans/JetBrains Mono,
   white-to-gray gradient headings, corner-dotted cards, bordered footer.
   ────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&family=DM+Sans:wght@200;300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --sd-bg:           #000001;
  --sd-bg-elev:      #010101;
  --sd-bg-card:      rgba(217,217,217,0.07);
  --sd-ink:          #E6E9ED;
  --sd-ink-2:        rgba(230,233,237,0.80);
  --sd-ink-3:        rgba(230,233,237,0.60);
  --sd-ink-4:        rgba(230,233,237,0.40);
  --sd-line:         rgba(255,255,255,0.05);
  --sd-line-strong:  rgba(255,255,255,0.10);
  --sd-divider:      #424453;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--sd-bg); color: var(--sd-ink);
             font-family: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
             -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; height: auto; }

.font-sans    { font-family: 'Inter', system-ui, sans-serif; }
.font-dm      { font-family: 'DM Sans', system-ui, sans-serif; }
.font-mono    { font-family: 'JetBrains Mono', monospace; }

/* Gradient white→gray text used for big display headings */
.sd-gradient {
  background: linear-gradient(90deg, #E6E9ED 0%, rgba(230,233,237,0.6) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ─── Display typography ─── */
.sd-h1 { font-size: clamp(40px, 7vw, 84px); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; margin: 0; }
.sd-h2 { font-size: clamp(28px, 4.5vw, 56px); font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; margin: 0; }
.sd-h3 { font-size: clamp(18px, 1.8vw, 24px); font-weight: 500; line-height: 1.2; margin: 0; }
.sd-eyebrow { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
              color: var(--sd-ink-3); display: flex; flex-direction: column; gap: 8px; }
.sd-eyebrow::after { content: ''; display: block; width: 96px; height: 1px; background: rgba(230,233,237,0.6); }

/* ─── Layout container ─── */
.sd-wrap { max-width: 1340px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 768px) { .sd-wrap { padding: 0 48px; } }

/* ─── Navbar ─── */
.sd-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 60;
          padding: 20px 0; transition: background 0.25s ease, border-color 0.25s ease, padding 0.25s ease;
          border-bottom: 1px solid transparent; }
.sd-nav.is-scrolled { background: rgba(0,0,1,0.9); backdrop-filter: blur(20px);
                      -webkit-backdrop-filter: blur(20px); border-bottom-color: rgba(255,255,255,0.05);
                      padding: 16px 0; box-shadow: 0 20px 40px rgba(0,0,0,0.4); }
.sd-nav-row { max-width: 1700px; margin: 0 auto; padding: 0 20px; display: flex;
              align-items: center; justify-content: space-between; gap: 16px; }
@media (min-width: 640px) { .sd-nav-row { padding: 0 32px; } }
.sd-nav-logo img { height: 32px; width: auto; }
@media (min-width: 1024px) { .sd-nav-logo img { height: 39px; } }
.sd-nav-links { display: none; align-items: center; gap: 44px; }
@media (min-width: 1024px) { .sd-nav-links { display: flex; } }
.sd-nav-links a { font-family: 'DM Sans', sans-serif; font-weight: 200; font-size: 14px;
                  color: rgba(230,233,237,0.6); letter-spacing: 0.05em; transition: color 0.25s ease; }
.sd-nav-links a:hover, .sd-nav-links a.is-active { color: #ffffff; }

/* Contract button — full border + corner dots */
.sd-contract-btn {
  position: relative; display: none; align-items: center;
  padding: 10px 32px;
  border: 0.6px solid rgba(230,233,237,0.4);
  font-family: 'DM Sans', sans-serif; font-weight: 300; font-size: 14px;
  color: #ffffff; background: transparent;
  transition: background 0.25s ease;
}
@media (min-width: 1024px) { .sd-contract-btn { display: inline-flex; } }
.sd-contract-btn:hover { background: rgba(255,255,255,0.05); }
.sd-contract-btn::before, .sd-contract-btn::after {
  content: ''; position: absolute; width: 4px; height: 4px; background: white;
  transition: transform 0.5s ease;
}
.sd-contract-btn::before { top: -1px; left: -1px; }
.sd-contract-btn::after  { bottom: -1px; right: -1px; }
.sd-contract-btn:hover::before, .sd-contract-btn:hover::after { transform: scale(1.5); }

/* Mobile menu trigger */
.sd-burger { display: inline-flex; align-items: center; justify-content: center;
             padding: 4px; color: #E6E9ED; background: transparent; border: 0; cursor: pointer; }
@media (min-width: 1024px) { .sd-burger { display: none; } }

/* Mobile dropdown */
.sd-mob-menu {
  position: fixed; top: 64px; left: 0; right: 0; z-index: 50;
  background: rgba(3,5,8,0.98); border-bottom: 1px solid rgba(255,255,255,0.10);
  padding: 8px 24px 32px; transform-origin: top;
  clip-path: inset(0 0 100% 0); transition: clip-path 0.4s cubic-bezier(0.16,1,0.3,1);
}
.sd-mob-menu.is-open { clip-path: inset(0 0 0 0); }
.sd-mob-menu a.item { display: flex; align-items: center; justify-content: space-between;
                       padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
                       color: rgba(230,233,237,0.9); transition: color 0.25s ease; }
.sd-mob-menu a.item:hover { color: #fff; }
.sd-mob-menu a.item .num { font-family: 'JetBrains Mono', monospace; font-size: 10px;
                            letter-spacing: 0.15em; color: rgba(230,233,237,0.4); margin-right: 20px; }
.sd-mob-menu .cta { display: block; width: 100%; text-align: center; margin-top: 24px;
                     padding: 14px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10);
                     color: #fff; font-size: 14px; font-weight: 500; position: relative; transition: background 0.25s ease, color 0.25s ease; }
.sd-mob-menu .cta:hover { background: #fff; color: #000; }
.sd-mob-menu .cta::before { content: ''; position: absolute; top: -1px; left: -1px; width: 6px; height: 6px; background: white; }
.sd-mob-menu .cta::after  { content: ''; position: absolute; bottom: -1px; right: -1px; width: 6px; height: 6px; background: white; }

/* ─── Buttons ─── */
.sd-btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 32px; background: #E6E9ED; color: #010101;
  font-size: 14px; font-weight: 500; transition: background 0.25s ease;
  border: 1px solid #E6E9ED;
}
.sd-btn-primary:hover { background: #ffffff; }
.sd-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 32px; background: transparent; color: var(--sd-ink);
  border: 1px solid rgba(230,233,237,0.3);
  font-size: 14px; font-weight: 400;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.sd-btn-ghost:hover { background: #ffffff; color: #000000; }

/* ─── Card (corner-dotted) ─── */
.sd-card { position: relative; padding: 24px 20px;
           background: var(--sd-bg-card); border: 1px solid rgba(255,255,255,0.05);
           backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
           transition: background 0.25s ease, border-color 0.25s ease; }
.sd-card:hover { background: rgba(217,217,217,0.10); border-color: rgba(255,255,255,0.12); }
.sd-card::before, .sd-card::after { content: ''; position: absolute; width: 6px; height: 6px; background: #ffffff; }
.sd-card::before { top: -3px; right: -3px; }
.sd-card::after  { bottom: -3px; left: -3px; }

/* ─── Page hero ─── */
.sd-page-hero { padding: 160px 0 96px; border-bottom: 1px solid var(--sd-line); position: relative; overflow: hidden; }
.sd-page-hero .sd-eyebrow { margin-bottom: 32px; }
.sd-page-hero .lede { font-size: 15px; line-height: 1.7; color: var(--sd-ink-2); max-width: 680px; margin-top: 32px; font-weight: 300; }
@media (min-width: 768px) { .sd-page-hero { padding: 200px 0 120px; } }

/* ─── Generic section ─── */
.sd-section { padding: 80px 0; position: relative; }
.sd-section + .sd-section { border-top: 1px solid var(--sd-line); }
.sd-section-h { margin-bottom: 48px; }
@media (min-width: 768px) { .sd-section { padding: 120px 0; } .sd-section-h { margin-bottom: 64px; } }

/* ─── Grid + list utilities ─── */
.sd-grid { display: grid; gap: 16px; }
@media (min-width: 768px) { .sd-grid { gap: 24px; } }
.sd-grid-2 { grid-template-columns: 1fr; }
.sd-grid-3 { grid-template-columns: 1fr; }
.sd-grid-4 { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .sd-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .sd-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .sd-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .sd-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .sd-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.sd-row {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 20px;
  padding: 24px 0; border-top: 1px solid rgba(255,255,255,0.05);
  align-items: center; transition: padding-left 0.3s ease;
}
.sd-row:first-child { border-top: 0; }
.sd-row .num { font-size: 13px; color: var(--sd-ink-4); font-family: 'JetBrains Mono', monospace; }
.sd-row .title { font-size: 18px; font-weight: 500; color: #fff; }
.sd-row .sub { font-size: 13px; color: var(--sd-ink-3); margin-top: 4px; }
.sd-row .arrow { color: var(--sd-ink-3); transition: color 0.25s ease, transform 0.25s ease; }
.sd-row:hover { padding-left: 8px; }
.sd-row:hover .arrow { color: #fff; transform: translate(4px, -4px); }

/* ─── Footer console (matching homepage) ─── */
.sd-footer { background: var(--sd-bg-elev); margin-top: 80px; padding-top: 0; position: relative; z-index: 20; }
@media (min-width: 1024px) { .sd-footer { margin-top: 128px; } }
.sd-footer-frame { max-width: 1340px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 768px) { .sd-footer-frame { padding: 0 48px; } }
@media (min-width: 1024px) { .sd-footer-frame { padding: 0; } .sd-footer { border-top: 1px solid var(--sd-divider); border-bottom: 1px solid var(--sd-divider); } }
.sd-footer-console {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--sd-divider); min-height: auto;
}
@media (min-width: 1024px) {
  .sd-footer-console { display: grid; grid-template-columns: 1fr auto 1fr; min-height: 400px; border: 0; max-width: 1340px; margin: 0 auto; }
}
.sd-footer-dot { position: absolute; width: 5px; height: 5px; background: white; z-index: 10; }

.sd-footer-left, .sd-footer-right {
  position: relative; display: flex; flex-direction: column;
}
@media (min-width: 1024px) {
  .sd-footer-left, .sd-footer-right { border-left: 1px solid var(--sd-divider); border-right: 1px solid var(--sd-divider); }
}
.sd-footer-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  padding: 16px 16px; gap: 24px;
}
@media (min-width: 768px) { .sd-footer-grid { padding: 32px 40px; gap: 32px; } }
@media (min-width: 1024px) { .sd-footer-grid { padding: 24px 32px 64px; gap: 32px; flex-grow: 1; border-bottom: 1px solid var(--sd-divider); } }
.sd-footer-grid h4 { color: #fff; font-size: 18px; font-weight: 400; margin: 0 0 12px; letter-spacing: -0.01em; }
@media (min-width: 1024px) { .sd-footer-grid h4 { font-size: 20px; } }
.sd-footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 1024px) { .sd-footer-grid ul { gap: 14px; } }
.sd-footer-grid a { font-size: 12px; color: rgba(230,233,237,0.8); font-weight: 300; transition: color 0.25s ease; }
@media (min-width: 1024px) { .sd-footer-grid a { font-size: 14px; } }
.sd-footer-grid a:hover { color: #fff; }

/* Center logo (desktop only) */
.sd-footer-center {
  display: none; align-items: center; justify-content: center;
  padding: 24px 64px;
}
@media (min-width: 1024px) { .sd-footer-center { display: flex; } }
.sd-footer-center img { width: 240px; height: auto; }

/* Mobile top block: logo + location + socials */
.sd-footer-mob {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 20px 24px; border-bottom: 1px solid var(--sd-divider);
}
@media (min-width: 1024px) { .sd-footer-mob { display: none; } }
.sd-footer-mob img { width: 200px; height: auto; }
.sd-footer-mob .loc { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sd-ink-2); }
.sd-footer-mob .socials { display: flex; align-items: center; gap: 24px; color: rgba(230,233,237,0.6); margin-top: 8px; }
.sd-footer-mob .socials a:hover { color: #fff; }

/* Desktop bottom-left: location + socials */
.sd-footer-locsoc { display: none; flex-direction: column; gap: 24px; padding: 24px 32px; position: relative; }
@media (min-width: 1024px) { .sd-footer-locsoc { display: flex; } }
.sd-footer-locsoc .loc { display: flex; align-items: center; gap: 8px; font-size: 16px; color: var(--sd-ink-2); }
.sd-footer-locsoc .socials { display: flex; align-items: center; gap: 20px; color: rgba(230,233,237,0.6); padding-top: 4px; }
.sd-footer-locsoc .socials a:hover { color: #fff; }

/* Legal bar */
.sd-footer-legal {
  max-width: 1340px; margin: 0 auto;
  padding: 40px 24px 64px;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}
@media (min-width: 768px) { .sd-footer-legal { padding: 40px 48px 64px; } }
@media (min-width: 1024px) { .sd-footer-legal { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; padding: 32px 0 64px; } }
.sd-footer-legal .copy { font-size: 12.5px; color: var(--sd-ink-2); font-weight: 300; text-align: center; }
.sd-footer-legal .links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 20px; max-width: 90%; text-align: center; }
.sd-footer-legal .links a { font-size: 12px; color: var(--sd-ink-2); font-weight: 300; transition: color 0.25s ease; }
.sd-footer-legal .links a:hover { color: #fff; }
