/* =========================================================================
   Shared shell for the three hero directions.

   Same brand tokens as the live site (navy #0D1B2A, blue #2563EB, green
   #059669, amber #F59E0B, Inter + Manrope) so the comparison is about the
   design direction and nothing else.

   Everything here is CSS. The live hero currently loads 254 KB of three.js to
   render an empty black rectangle; none of these three need a 3D library at
   all, and all of them are fully painted on the first frame.
   ========================================================================= */

:root {
  --navy: #0d1b2a;
  --navy-deep: #070c16;
  --blue: #2563eb;
  --blue-bright: #3b82f6;
  --blue-deep: #1d4ed8;
  --green: #059669;
  --amber: #f59e0b;
  --ink: #0f172a;
  --ink-soft: #475569;
  --paper: #ffffff;

  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Manrope", var(--font-body);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

body { overflow-x: hidden; }

.wrap {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --- shared type ------------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

h1 {
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.04;
  margin: 18px 0 0;
  font-size: clamp(2.1rem, 5.2vw, 3.7rem);
}

.lede {
  margin: 20px 0 0;
  max-width: 34em;
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  line-height: 1.65;
}

/* --- shared buttons ---------------------------------------------------- */

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 999px;
  padding: 14px 26px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn .arw { transition: transform 0.18s ease; }
.btn:hover .arw { transform: translateX(3px); }

.btn-primary {
  background: linear-gradient(135deg, var(--blue-bright), var(--blue-deep));
  color: #fff;
  box-shadow: 0 10px 30px -8px rgba(37, 99, 235, 0.6);
}
.btn-primary:hover { box-shadow: 0 16px 40px -10px rgba(37, 99, 235, 0.75); }

/* --- accessibility ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}