/* Katalys Media — homepage. Concept: the homepage joins the team page's "living map" language.
   Contour lines = the ground we build for; rising bars = growth, the brand mark. */
.dark { background: var(--navy-900); color: var(--white); position: relative; overflow: hidden; }
.dark::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .08; mix-blend-mode: overlay; pointer-events: none; }
.dark .eyebrow { color: var(--gold-400); }
.dark .btn-link { color: var(--white); box-shadow: inset 0 -2px 0 var(--gold-400); }
.big { font: 800 clamp(2.25rem, 1.2rem + 4vw, 4.5rem)/1 var(--font-display); letter-spacing: -.04em; }

/* ---------- Hero ---------- */
.hx { min-height: min(100vh, 900px); min-height: min(100svh, 900px); display: grid; grid-template-rows: 1fr auto; }
.hx .container { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--space-7); align-items: center; padding-block: var(--space-8); }
.hx h1 { font: 800 clamp(3.25rem, 1.2rem + 6.5vw, 7.25rem)/.92 var(--font-display); letter-spacing: -.05em; margin-block: var(--space-4) var(--space-5); }
.hx h1 span { display: inline-block; }
.hx h1 .gold { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hx .lede { color: var(--navy-200); max-width: 50ch; }
.hx .btns { margin-top: var(--space-6); }
.chart { position: relative; height: clamp(260px, 34vw, 440px); }
.chart-bars { position: absolute; inset: 0 0 32px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: end; border-bottom: 2px solid var(--gold-400); }
.chart-bars span { background: #22344f; border-radius: var(--radius-sm) var(--radius-sm) 0 0; transform-origin: bottom; }
.chart-bars span:nth-child(1) { height: 25%; } .chart-bars span:nth-child(2) { height: 45%; } .chart-bars span:nth-child(3) { height: 70%; }
.chart-bars span:nth-child(4) { height: 100%; background: var(--gold-grad); }
.chart svg { position: absolute; inset: 0 0 32px; width: 100%; height: calc(100% - 32px); overflow: visible; }
.chart polyline { fill: none; stroke: var(--white); stroke-width: 2; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; }
.chart-bars span { position: relative; }
.chart-bars span::before { content: ""; position: absolute; left: 50%; top: -7px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 4px var(--navy-900); }
.chart ol { position: absolute; inset: auto 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; list-style: none; padding: 0; font: 600 var(--text-xs)/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--navy-200); }
.chart ol li:last-child { color: var(--gold-400); }


/* ---------- Services: index rows that flood navy on hover ---------- */
.svc-list { border-top: 2px solid var(--navy-800); }
.svc { position: relative; display: grid; grid-template-columns: 120px 1fr 1fr 40px; gap: var(--space-6); align-items: center; padding: var(--space-6) var(--space-5); border-bottom: 1px solid var(--line); isolation: isolate; transition: color 300ms ease; }
.svc::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--navy-800); transform: scaleX(0); transform-origin: left; transition: transform 550ms var(--ease-out-expo); }
.svc:hover { color: var(--white); }
.svc:hover::before { transform: none; }
.svc h3 { font: 800 clamp(1.75rem, 1rem + 2.6vw, 3rem)/1 var(--font-display); letter-spacing: -.035em; }
.svc p { color: var(--muted); transition: color 300ms ease; }
.svc:hover p { color: var(--navy-200); }
.svc .go { font: 800 28px/1 var(--font-display); color: var(--gold-600); transition: transform 300ms var(--ease-out-expo); }
.svc:hover .go { transform: translateX(6px); color: var(--gold-400); }
.viz { width: 96px; height: 72px; }
.viz-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.viz-grid i { background: var(--navy-200); border-radius: 2px; }
.viz-grid i:nth-child(3n+2) { background: var(--gold-600); }
.viz-web { border: 2px solid currentColor; border-radius: 6px; padding: 16px 10px 10px; display: grid; gap: 6px; position: relative; }
.viz-web::before { content: ""; position: absolute; top: 5px; left: 7px; width: 22px; height: 5px; background: radial-gradient(circle, var(--gold-600) 2px, transparent 2.5px) 0 0 / 8px 5px repeat-x; }
.viz-web i { height: 6px; background: var(--navy-200); border-radius: 2px; }
.viz-web i:first-child { width: 60%; height: 10px; background: currentColor; }
.viz-web i:last-child { width: 40%; background: var(--gold-600); }
.viz-bars { display: flex; gap: 5px; align-items: end; border-bottom: 2px solid currentColor; }
.viz-bars i { flex: 1; background: var(--navy-200); border-radius: 2px 2px 0 0; transform-origin: bottom; }
.viz-bars i:nth-child(1) { height: 30%; } .viz-bars i:nth-child(2) { height: 55%; } .viz-bars i:nth-child(3) { height: 40%; } .viz-bars i:nth-child(4) { height: 80%; } .viz-bars i:nth-child(5) { height: 100%; background: var(--gold-600); }

/* ---------- Products: GRID on a live map ---------- */
.px { padding-block: var(--space-section); }
.px .container { position: relative; z-index: 1; }
.px .section-head p { color: var(--navy-200); }
.grid-card { display: grid; grid-template-columns: 1fr 1.1fr; border: 1px solid #2a3b55; border-radius: var(--radius-lg); overflow: hidden; background: rgba(24, 39, 58, .85); box-shadow: 0 40px 80px -40px #000; }
.grid-copy { padding: clamp(24px, 4vw, 56px); display: grid; gap: var(--space-4); align-content: start; }
.grid-copy > p:not(.live) { color: var(--navy-200); }
.grid-copy strong { color: var(--white); font-weight: 600; }
.grid-copy h3 { font: 800 clamp(2.5rem, 1.5rem + 3vw, 4rem)/1 var(--font-display); letter-spacing: -.04em; }
.ticks { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin-block: var(--space-3); font-size: var(--text-sm); font-weight: 600; }
.ticks li { display: flex; gap: 10px; align-items: baseline; }
.ticks li::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--gold-400); transform: rotate(45deg); }
.grid-map { position: relative; min-height: 420px; background: #0f2036; border-left: 1px solid #2a3b55; }
.grid-map .map-canvas { opacity: .9; }
.pin { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--gold-400); box-shadow: 0 0 0 3px rgba(11, 26, 46, .9); }
.pin::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--gold-400); opacity: 0; }
.pin.w { background: var(--white); } .pin.w::after { border-color: var(--white); }
.pin:nth-of-type(1) { left: 28%; top: 34%; } .pin:nth-of-type(2) { left: 62%; top: 22%; } .pin:nth-of-type(3) { left: 48%; top: 58%; }
.pin:nth-of-type(4) { left: 78%; top: 66%; } .pin:nth-of-type(5) { left: 18%; top: 74%; } .pin:nth-of-type(6) { left: 70%; top: 44%; }
.boundary { position: absolute; inset: 12% 10%; border: 2px dashed rgba(228, 183, 92, .5); border-radius: 38% 62% 47% 53% / 45% 38% 62% 55%; }

/* ---------- How we work: sticky chart grows with the scroll ---------- */
.hw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); }
.hw-visual { position: sticky; top: 0; height: 100vh; display: grid; align-content: center; gap: var(--space-5); }
.hw-bars { height: 52vh; max-height: 440px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: end; border-bottom: 2px solid var(--navy-800); }
.hw-bars span { border-radius: var(--radius-sm) var(--radius-sm) 0 0; border: 2px dashed var(--line-strong); border-bottom: 0; transform-origin: bottom; transition: background-color 400ms ease, border-color 400ms ease, transform 700ms var(--ease-out-expo); transform: scaleY(.15); }
.hw-bars span:nth-child(1) { height: 25%; } .hw-bars span:nth-child(2) { height: 45%; } .hw-bars span:nth-child(3) { height: 70%; } .hw-bars span:nth-child(4) { height: 100%; }
.hw-bars span.done { background: var(--navy-800); border-color: var(--navy-800); transform: none; }
.hw-bars span.on { background: var(--gold-grad); border-color: var(--gold-600); transform: none; }
.hw-labels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; list-style: none; padding: 0; font: 600 var(--text-xs)/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.hw-step { min-height: 75vh; display: grid; align-content: center; gap: var(--space-4); }
.hw-step:first-child { min-height: 60vh; }
.hw-step .n { font: 800 var(--text-xs)/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-700); }
.hw-step h3 { font: 800 clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem)/.95 var(--font-display); letter-spacing: -.045em; }
.hw-step p { font-size: var(--text-lg); color: #3c4659; max-width: 32ch; }
.hw-step:last-child h3 { color: var(--gold-700); }

/* ---------- About: one big line, facts strip, team teaser ---------- */
.ax-statement { font: 800 clamp(2.5rem, 1rem + 5.5vw, 6.5rem)/.95 var(--font-display); letter-spacing: -.05em; max-width: 13ch; }
.ax-statement span { color: var(--gold-700); }
.ax-body { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); margin-top: var(--space-7); align-items: start; }
.ax-body > p { font-size: var(--text-lg); color: #3c4659; }
.ax-facts { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--navy-800); }
.ax-facts div { padding: var(--space-4) var(--space-4) var(--space-4) 0; border-bottom: 1px solid var(--line); }
.ax-facts dt { font: 600 var(--text-xs)/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.ax-facts dd { font: 700 1.05rem/1.3 var(--font-display); }
.team-teaser { margin-top: var(--space-7); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); padding: var(--space-5); background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--gold-600); border-radius: var(--radius-md); text-decoration: none; transition: box-shadow 300ms ease, transform 300ms var(--ease-out-expo); }
.team-teaser:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.faces { display: flex; }
.faces img { width: 56px; height: 56px; object-fit: cover; object-position: center 20%; border-radius: 50%; border: 3px solid var(--white); }
.faces img + img { margin-left: -14px; }
.team-teaser b { font: 700 1.125rem/1.2 var(--font-display); display: block; }
.team-teaser small { color: var(--muted); }
.team-teaser .go { margin-left: auto; font: 800 24px/1 var(--font-display); color: var(--gold-600); }

/* ---------- Contact: live bars ---------- */
.cx { padding-block: var(--space-section); }
.cx .contact { position: relative; z-index: 1; }
.cx .lede { color: var(--navy-200); }
.cx .mail-card { color: var(--ink); box-shadow: 0 40px 80px -30px #000; }

/* ---------- Motion, only when the visitor allows it ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hx h1 span { animation: word-up 900ms var(--ease-out-expo) both; }
  .hx h1 span:nth-child(2) { animation-delay: 80ms; } .hx h1 span:nth-child(3) { animation-delay: 160ms; } .hx h1 span:nth-child(4) { animation-delay: 240ms; } .hx h1 span:nth-child(5) { animation-delay: 320ms; } .hx h1 span:nth-child(6) { animation-delay: 400ms; } .hx h1 span:nth-child(7) { animation-delay: 480ms; }
  .chart-bars span { animation: bar-rise var(--duration-bars) var(--ease-out-expo) both; }
  .chart-bars span:nth-child(2) { animation-delay: 120ms; } .chart-bars span:nth-child(3) { animation-delay: 240ms; } .chart-bars span:nth-child(4) { animation-delay: 360ms; }
  .chart polyline { stroke-dashoffset: 0; animation: draw 1600ms 700ms var(--ease-out-expo) both; }
  .viz-grid i { animation: cell 3.2s ease-in-out infinite; }
  .viz-grid i:nth-child(2) { animation-delay: .4s; } .viz-grid i:nth-child(5) { animation-delay: .8s; } .viz-grid i:nth-child(7) { animation-delay: 1.2s; } .viz-grid i:nth-child(10) { animation-delay: 1.6s; } .viz-grid i:nth-child(12) { animation-delay: 2s; }
  .viz-bars i { animation: viz-eq 1.6s ease-in-out infinite alternate; }
  .viz-bars i:nth-child(2) { animation-delay: -.4s; } .viz-bars i:nth-child(3) { animation-delay: -.8s; } .viz-bars i:nth-child(4) { animation-delay: -1.2s; }
  .viz-web i:nth-child(2) { animation: type 2.4s steps(6) infinite alternate; transform-origin: left; }
  .pin::after { animation: ping 2.4s ease-out infinite; }
  .pin:nth-of-type(2)::after { animation-delay: .4s; } .pin:nth-of-type(3)::after { animation-delay: .8s; } .pin:nth-of-type(4)::after { animation-delay: 1.2s; } .pin:nth-of-type(5)::after { animation-delay: 1.6s; } .pin:nth-of-type(6)::after { animation-delay: 2s; }
}
@keyframes draw { from { stroke-dasharray: 0 2000; } to { stroke-dasharray: 2000 0; } }
@keyframes cell { 0%, 70%, 100% { background: var(--navy-200); } 35% { background: var(--gold-400); } }
@keyframes bar-rise { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
@keyframes viz-eq { to { transform: scaleY(.45); } }
@keyframes type { from { transform: scaleX(.2); } to { transform: scaleX(1); } }
@keyframes ping { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }

@media (max-width: 900px) {
  .hx .container, .grid-card, .hw-grid, .ax-body { grid-template-columns: 1fr; }
  .chart { height: 240px; }
  .svc { grid-template-columns: 72px 1fr; gap: var(--space-3) var(--space-4); padding-inline: 0; }
  .svc .viz { width: 64px; height: 48px; grid-row: span 2; }
  .svc p { grid-column: 2; }
  .svc .go { display: none; }
  .svc:hover { color: inherit; } .svc:hover::before { transform: scaleX(0); } .svc:hover p { color: var(--muted); }
  .grid-map { min-height: 280px; border-left: 0; border-top: 1px solid #2a3b55; }
  .ticks { grid-template-columns: 1fr; }
  .hw-visual { display: none; }
  .hw-steps { padding: 0; }
  .hw-step, .hw-step:first-child { min-height: 0; padding-block: var(--space-5); border-top: 2px solid var(--navy-800); }
  .ax-facts { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .team-teaser { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--space-4); }
  .faces { grid-column: 1 / -1; }
}