/* ==========================================================================
   FinLytTech — site shell, navigation and responsive layer
   Pairs with assets/colors_and_type.css (design tokens + web fonts).
   Page bodies keep the inline styles from the approved design, so the
   responsive overrides below use !important deliberately — inline styles
   would otherwise win over every rule here.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--emerald-600);text-decoration:none}
a:hover{color:var(--emerald-700)}
img{max-width:100%}
details summary::-webkit-details-marker{display:none}
:focus-visible{outline:2px solid var(--brand-emerald);outline-offset:3px;border-radius:4px}

/* Skip link — keyboard users land past the nav */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--brand-navy);color:#fff;
  padding:12px 18px;border-radius:0 0 8px 0;font:600 13px var(--font-sans)}
.skip:focus{left:0;color:#fff}

/* ---------- Animations carried over from the design ---------- */
@keyframes fl-lane{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes fl-ring{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.85);opacity:0}}
@keyframes fl-draw{to{stroke-dashoffset:0}}
@keyframes fl-arc{from{stroke-dashoffset:301.6}to{stroke-dashoffset:241}}
@keyframes fl-rise{from{transform:scaleY(.15)}to{transform:scaleY(1)}}
@keyframes fl-tick{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes fl-sweep{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}

/* ==========================================================================
   Navigation
   ========================================================================== */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.nav-bar{min-height:72px;display:flex;align-items:center;gap:10px;padding:10px 28px;
  max-width:1440px;margin:0 auto;position:relative}
.nav-logo{display:flex;align-items:center;flex-shrink:0}
.nav-logo img{height:34px;width:auto;object-fit:contain;display:block}
.nav-links{display:flex;align-items:center;flex-wrap:wrap;row-gap:2px;margin-left:16px;
  flex:1 1 auto;min-width:0}
.nav-link,.nav-trigger{padding:8px 9px;font:500 12.5px var(--font-sans);color:var(--fg-2);
  white-space:nowrap;border:0;background:transparent;cursor:pointer;display:inline-flex;
  align-items:center;gap:5px;border-radius:6px;transition:color .15s,background .15s}
.nav-link:hover,.nav-trigger:hover{color:var(--ink);background:var(--paper-3)}
.nav-link.is-active,.nav-trigger.is-active{color:var(--ink);font-weight:600}
.nav-trigger svg{width:13px;height:13px;transition:transform .18s ease}
.nav-trigger[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-trigger[aria-expanded="true"]{color:var(--ink);background:var(--paper-3)}
.nav-cta{display:flex;align-items:center;gap:10px;flex-shrink:0}
.nav-signin{font:500 12.5px var(--font-sans);color:var(--fg-2);white-space:nowrap;padding:8px 6px}
.nav-signin:hover{color:var(--ink)}
.nav-primary{font:600 12.5px var(--font-sans);color:#fff;background:var(--brand-navy);
  padding:10px 15px;border-radius:8px;white-space:nowrap;transition:background .15s}
.nav-primary:hover{background:var(--navy-700);color:#fff}

/* Dropdown panels */
.nav-panel{display:none;border-top:1px solid var(--rule);background:var(--paper-2);padding:24px 28px 26px}
.nav-panel.is-open{display:block}
.nav-panel-inner{max-width:1280px;margin:0 auto;display:grid;gap:36px}
.nav-panel-products .nav-panel-inner{grid-template-columns:1.1fr 1fr 1fr}
.nav-panel-cas .nav-panel-inner{grid-template-columns:repeat(3,1fr)}
.nav-panel h3{font:600 10.5px var(--font-sans);text-transform:uppercase;letter-spacing:.12em;
  color:var(--fg-3);margin:0 0 14px}
.np-row{display:flex;justify-content:space-between;gap:16px;padding:4px 6px;border-radius:5px;
  transition:background .13s;margin:0 -6px}
.np-row:hover{background:var(--paper-3)}
.np-name{font:600 13px var(--font-sans);color:var(--ink)}
.np-name.muted{color:var(--fg-3)}
.np-meta{font:500 11.5px var(--font-mono);color:var(--fg-3)}
.np-meta.amber{color:var(--amber-600)}
.np-item{display:block;padding:5px 6px;border-radius:5px;transition:background .13s;margin:0 -6px}
.np-item:hover{background:var(--paper-3)}
.np-item .np-name{display:block}
.np-desc{font:400 11.5px/1.5 var(--font-sans);color:var(--fg-3);margin-top:2px;display:block}
.np-stack{display:flex;flex-direction:column;gap:6px}
.np-chips{display:flex;flex-wrap:wrap;gap:6px}
.np-chip{font:500 11.5px var(--font-sans);color:var(--fg-2);border:1px solid var(--rule);
  background:var(--paper);padding:4px 9px;border-radius:999px}
a.np-chip:hover{border-color:var(--brand-emerald);color:var(--ink)}

/* Mobile toggle — hidden on desktop */
.nav-burger{display:none;border:1px solid var(--rule-strong);background:var(--paper);
  border-radius:8px;padding:9px 11px;cursor:pointer;flex-shrink:0;align-items:center;gap:8px;
  font:600 12px var(--font-sans);color:var(--ink)}
.nav-burger svg{width:16px;height:16px;display:block}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{background:var(--paper);padding:80px 40px 40px}
.footer-inner{max-width:1280px;margin:0 auto}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:44px;
  padding-top:36px;border-top:1px solid var(--rule)}
.footer-col{display:flex;flex-direction:column;gap:8px}
.footer-col h4{font:600 11px var(--font-sans);text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink);margin:0 0 4px}
.footer-col a{font:400 13px var(--font-sans);color:var(--fg-3)}
.footer-col a:hover{color:var(--brand-emerald)}
.footer-note{font:400 13px/1.65 var(--font-sans);color:var(--fg-3);margin:0}
.footer-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:28px;
  padding-top:22px;border-top:1px solid var(--rule);font:500 11px var(--font-mono);
  letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3)}

/* ==========================================================================
   Shared page furniture
   ========================================================================== */
.section{padding:76px 40px 0}
.section-inner{max-width:1280px;margin:0 auto}
.wrap{max-width:1280px;margin:0 auto}
.lede{font:400 17px/1.6 var(--font-sans);color:var(--fg-2);margin:0 0 40px;max-width:740px}
.btn-dark{font:600 15px var(--font-sans);color:#fff;background:var(--brand-navy);
  padding:14px 22px;border-radius:8px;display:inline-block;transition:background .15s}
.btn-dark:hover{background:var(--navy-700);color:#fff}
.btn-green{font:600 15px var(--font-sans);color:#fff;background:var(--brand-emerald);
  padding:13px 22px;border-radius:8px;display:inline-block;transition:background .15s}
.btn-green:hover{background:var(--emerald-600);color:#fff}
.btn-ghost{font:600 15px var(--font-sans);color:var(--ink);border:1px solid var(--rule-strong);
  padding:14px 22px;border-radius:8px;display:inline-block;background:var(--paper);
  transition:border-color .15s,background .15s}
.btn-ghost:hover{border-color:var(--brand-emerald);background:var(--paper-2);color:var(--ink)}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}
.card-link{display:block;color:inherit}
.card-link:hover{color:inherit}
.card-hover{transition:border-color .16s,box-shadow .16s,transform .16s}
.card-hover:hover{border-color:var(--rule-strong);box-shadow:var(--shadow-md);transform:translateY(-2px)}

/* Circular arrow on the product cards — a real link, not decoration */
.card-arrow{transition:background .15s,border-color .15s,transform .15s}
.card-arrow:hover{background:var(--brand-navy);border-color:var(--brand-navy);transform:translateX(2px)}
.card-arrow:hover svg{stroke:#fff}

/* Contact dialog */
#contactDialog{border:0;padding:0;background:transparent;max-width:640px;width:calc(100% - 32px)}
#contactDialog::backdrop{background:rgba(13,27,42,.55);backdrop-filter:blur(3px)}
.dlg{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-xl);
  box-shadow:var(--shadow-pop);padding:30px;max-height:88vh;overflow-y:auto}
.dlg-close{position:absolute;top:16px;right:16px;border:1px solid var(--rule-strong);background:var(--paper);
  width:32px;height:32px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;color:var(--fg-2);font:400 18px/1 var(--font-sans)}
.dlg-close:hover{background:var(--paper-3);color:var(--ink)}
.fld{display:block}
.fld span{display:block;font:600 11px var(--font-sans);text-transform:uppercase;letter-spacing:.07em;
  color:var(--fg-3);margin-bottom:7px}
.fld input,.fld select,.fld textarea{width:100%;font:400 14px var(--font-sans);color:var(--ink);
  padding:11px 13px;border:1px solid var(--rule-strong);border-radius:var(--r-md);background:var(--paper)}
.fld textarea{line-height:1.6;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid var(--brand-emerald);
  outline-offset:1px;border-color:var(--brand-emerald)}

/* Anchored sections clear the sticky nav */
[id]{scroll-margin-top:92px}

/* ==========================================================================
   Responsive — collapses the design's fixed grids.
   Page markup tags each grid with g2 / g3 / g4 / split so these apply.
   ========================================================================== */
/* Horizontal escape hatch for content that genuinely cannot stack -- numeric
   tables, comparison grids. Not viewport-scoped: an 800px tablet needs it as
   much as a 360px phone. */
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}

@media (max-width:1180px){
  .nav-links{display:none}
  .nav-burger{display:inline-flex}
  .nav-bar{padding:10px 20px}
  .nav-links.is-open{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;
    align-items:stretch;background:var(--paper);border-bottom:1px solid var(--rule);
    padding:12px 20px 18px;margin:0;gap:2px;box-shadow:var(--shadow-lg);
    max-height:calc(100vh - 72px);overflow-y:auto;z-index:60}
  .nav-links.is-open .nav-link,.nav-links.is-open .nav-trigger{width:100%;
    justify-content:space-between;padding:13px 10px;font-size:15px;border-radius:8px}
  .nav-panel-inner{grid-template-columns:1fr!important;gap:26px}
}
@media (max-width:1024px){
  .g4{grid-template-columns:repeat(2,1fr)!important}
  .g3{grid-template-columns:repeat(2,1fr)!important}
  .g2,.split{grid-template-columns:1fr!important}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .section{padding:60px 24px 0}
  .footer{padding:60px 24px 32px}
}
@media (max-width:760px){
  .g2,.g3,.g4,.split{grid-template-columns:1fr!important}
  .footer-grid{grid-template-columns:1fr}
  .hide-sm{display:none!important}
  .stack-sm{flex-direction:column!important;align-items:flex-start!important}
  .section{padding:48px 18px 0}
  .footer{padding:48px 18px 28px}
  .nav-bar{padding:10px 16px}
  .nav-logo img{height:28px}
  h1{font-size:clamp(32px,8.5vw,44px)!important;line-height:1.08!important}
  h2{font-size:clamp(26px,6.5vw,32px)!important;line-height:1.12!important}
  .lede{font-size:15.5px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}

/* ─── Brand tagline ──────────────────────────────────────────────────────
   Sits under the lockup in the footer and in the home hero eyebrow. It is
   deliberately NOT part of the logo artwork — the lockup travels alone. */
.footer-tagline {
  font: 600 13px/1.5 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--emerald-300);
  margin: 0 0 10px;
}
.hero-tagline {
  display: inline-block;
  font: 600 11.5px/1 var(--font-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--emerald-700);
  background: var(--emerald-50);
  border: 1px solid var(--emerald-200);
  border-radius: var(--r-pill);
  padding: 6px 13px;
  margin-bottom: 20px;
}

/* ─── Home hero visual ───────────────────────────────────────────────────
   Stacks below 1024px. The fixed 300px height is a desktop-only geometry:
   once the three panes become three rows it has to be released, or every
   pane gets a third of it. The ledger lane keeps a height of its own so its
   scroll animation still has something to scroll inside. */
@media (max-width:1024px){
  .hero-flow{height:auto!important;min-height:0!important}
  .hero-flow > *{border-right:0!important}
  .hero-flow > *:not(:last-child){border-bottom:1px solid var(--rule)}
  .hero-flow > :first-child{height:210px}
  .hero-flow > :nth-child(2){min-height:132px;padding:18px 0}
}
@media (max-width:760px){
  .hero-flow > :first-child{height:180px}
  /* The connector curves are drawn between side-by-side columns. Stacked,
     they point at nothing. */
  .hero-flow > :nth-child(2) svg{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   PHASE TIMELINE — serpentine road
   ═══════════════════════════════════════════════════════════════════════
   A winding track that reads left-to-right, turns, and comes back. Built
   from a CSS grid rather than one big SVG so the nodes stay real text:
   selectable, translatable, and readable by a screen reader in order.

   The road is drawn per row — a horizontal spine behind the nodes, plus a
   U-turn cap at the row end that carries the eye down to the next row. Rows
   alternate direction, so the turn is on the right of odd rows and the left
   of even ones.

   Below 900px the whole thing becomes a plain vertical rail. A serpentine
   is a wide-screen idea; on a phone it is just a broken one.
   ═══════════════════════════════════════════════════════════════════════ */
.road {
  --road: 4px;                 /* track thickness */
  --road-col: var(--navy-600);
  --road-lit: var(--brand-amber);
  background: linear-gradient(180deg, var(--navy-800), var(--navy-900));
  border-radius: var(--r-2xl);
  padding: 54px 46px 46px;
  position: relative;
  overflow: hidden;
}
/* Faint dot field, the same device the light sections use. */
.road::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1.5px);
  background-size: 26px 26px;
}

.road-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n, 4), 1fr);
  gap: 26px;
  padding-bottom: 68px;
}
.road-row:last-child { padding-bottom: 0; }
.road-row.is-rev { direction: rtl; }
.road-row.is-rev > * { direction: ltr; }

/* The spine, threaded behind the nodes at the height of the phase badge. */
.road-row::before {
  content: ""; position: absolute; z-index: 0;
  left: 6%; right: 6%; top: 26px; height: var(--road);
  background: var(--road-col);
  border-radius: var(--r-pill);
}
/* The U-turn. A three-sided rounded box hanging off the end of the row,
   reaching down to meet the next row's spine. */
.road-row:not(:last-child)::after {
  content: ""; position: absolute; z-index: 0;
  top: 26px; height: 68px; width: 54px;
  border: var(--road) solid var(--road-col);
}
.road-row:not(.is-rev):not(:last-child)::after {
  right: 6%; transform: translateX(50%);
  border-left: 0;
  border-radius: 0 999px 999px 0;
}
.road-row.is-rev:not(:last-child)::after {
  left: 6%; transform: translateX(-50%);
  border-right: 0;
  border-radius: 999px 0 0 999px;
}

.stop { position: relative; z-index: 1; }

.stop-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 54px; height: 34px; padding: 0 12px;
  border-radius: var(--r-sm);
  font: 700 13px/1 var(--font-mono); letter-spacing: .04em;
  background: var(--road-lit); color: var(--navy-900);
  box-shadow: 0 0 0 5px var(--navy-800);
  margin-bottom: 16px;
}
.stop[data-built] .stop-badge { background: var(--brand-emerald); color: #fff; }

.stop-word {
  font: 700 26px/1 var(--font-display); letter-spacing: -.022em;
  color: #fff; margin: 0 0 7px;
}
.stop[data-built] .stop-word { color: var(--emerald-300); }

.stop-name { font: 600 13px/1.4 var(--font-sans); color: var(--navy-200); margin: 0 0 9px; }

.stop-meta {
  font: 500 11px/1.45 var(--font-mono); color: var(--navy-300);
  display: block;
}
.stop-tag {
  display: inline-block; margin-top: 9px;
  font: 600 9px var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--r-pill);
  border: 1px solid var(--navy-600); color: var(--navy-300);
}
.stop[data-built] .stop-tag {
  border-color: var(--emerald-700); color: var(--emerald-300);
  background: rgba(29,158,117,.12);
}

@media (max-width:1180px){
  .road-row { --n: 2 !important; }
}
@media (max-width:900px){
  .road { padding: 34px 22px; }
  /* Vertical rail. The serpentine turns and alternating rows do not survive
     a narrow column, so they are dropped rather than squeezed. */
  .road-row { --n: 1 !important; gap: 0; padding-bottom: 0; direction: ltr; }
  .road-row::before, .road-row::after { display: none; }
  .road-row > * { padding: 0 0 30px 46px; }
  .road-row > *:last-child { padding-bottom: 0; }
  .stop::before {
    content: ""; position: absolute; left: 16px; top: 8px; bottom: -8px;
    width: var(--road); background: var(--road-col);
  }
  .road-row:last-child .stop:last-child::before { display: none; }
  .stop-badge { position: absolute; left: 0; top: 0; min-width: 36px; height: 26px;
    padding: 0 7px; font-size: 11px; margin: 0; box-shadow: 0 0 0 4px var(--navy-800); }
  .stop-word { font-size: 21px; }
}

/* At-a-glance phase chips, used in the home hero above the fold. Wraps
   rather than scrolls, so it never asks for a horizontal gesture. */
.phase-strip { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 10px; padding: 0; list-style: none; }
.phase-strip li {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--rule); background: var(--paper);
  font: 500 11.5px var(--font-sans); color: var(--fg-2); white-space: nowrap;
}
.phase-strip li b { font: 700 10px var(--font-mono); color: var(--fg-3); }
.phase-strip li[data-built] { border-color: var(--emerald-200); background: var(--emerald-50); color: var(--emerald-800); }
.phase-strip li[data-built] b { color: var(--emerald-700); }