@charset "UTF-8";
/* ==========================================================================
   LANTEK Computers - UI layer
   Preloader, header, hero, diagrams, section components, footer.
   Depends on lantek.css for tokens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PRELOADER
   The LANTEK cube-L assembles out of scattered pixels, then the curtain lifts.
   Fails safe: a hard 3s timeout removes it whatever happens.
   -------------------------------------------------------------------------- */
.lk-pre{
  position:fixed;inset:0;z-index:99999;
  background:var(--lk-void);
  display:grid;place-items:center;
  transition:opacity .5s var(--lk-ease),visibility .5s var(--lk-ease);
}
.lk-pre__inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:30px}

/* the assembling mark */
.lk-pre__mark{width:104px;height:104px;overflow:visible;filter:drop-shadow(0 0 26px rgba(32,187,252,.34))}
.lk-pre__mark rect{
  opacity:0;transform-box:fill-box;transform-origin:center;
  animation:lk-assemble .78s var(--lk-ease) forwards;
}
@keyframes lk-assemble{
  0%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2) rotate(-40deg)}
  60%{opacity:1}
  100%{opacity:1;transform:translate(0,0) scale(1) rotate(0)}
}
/* A slow sweep across the mark while the rest of the hold plays out. */
.lk-pre__inner::before{
  content:"";position:absolute;inset:-40px -60px auto;height:150px;
  background:linear-gradient(90deg,transparent,rgba(32,187,252,.13),transparent);
  animation:lk-presweep 2s var(--lk-ease) infinite;pointer-events:none;
}
@keyframes lk-presweep{0%{transform:translateX(-70%)}100%{transform:translateX(70%)}}

/* Second page onward in a session: no counting, no assembly, just a wipe.
   The full hold is a first-impression device, not something to sit through
   on every click. */
.lk-pre--quick .lk-pre__bar,
.lk-pre--quick .lk-pre__meta{display:none}
.lk-pre--quick .lk-pre__inner::before{animation:none}
.lk-pre--quick .lk-pre__mark rect{animation-duration:.3s;animation-delay:0s !important}
.lk-pre--quick{transition:opacity .28s var(--lk-ease),visibility .28s var(--lk-ease)}

/* progress */
.lk-pre__bar{
  width:190px;height:2px;background:rgba(79,180,245,.16);
  border-radius:2px;overflow:hidden;position:relative;
}
.lk-pre__fill{
  position:absolute;inset:0;transform-origin:left;transform:scaleX(0);
  background:var(--lk-grad);
  transition:transform .28s linear;
}
.lk-pre__meta{
  display:flex;justify-content:space-between;width:190px;
  font-family:var(--lk-mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--lk-ink-3);
}
.lk-pre__meta b{color:var(--lk-sky);font-weight:500;font-variant-numeric:tabular-nums}

/* the curtain: two panels that split away */
.lk-pre__curtain{position:fixed;inset:0;z-index:99998;pointer-events:none}
.lk-pre__curtain span{
  position:absolute;left:0;right:0;height:50.5%;background:var(--lk-void);
  transition:transform .78s var(--lk-ease);
}
.lk-pre__curtain span:first-child{top:0}
.lk-pre__curtain span:last-child{bottom:0}

/* done state */
html.lk-loaded .lk-pre{opacity:0;visibility:hidden}
html.lk-loaded .lk-pre__curtain span:first-child{transform:translateY(-100%)}
html.lk-loaded .lk-pre__curtain span:last-child{transform:translateY(100%)}
html.lk-loaded .lk-pre__curtain{transition:visibility 0s .8s;visibility:hidden}

/* lock scroll while loading */
html.lk-loading,html.lk-loading body{overflow:hidden !important;height:100%}

/* --------------------------------------------------------------------------
   2. SMOOTH SCROLL ENGINE
   Nothing is transformed and nothing is hijacked. The engine eases the real
   scroll position, so sticky, fixed, anchors, the admin bar and any plugin
   reading window.scrollY all keep working. The only thing this class does is
   hand scroll-behavior over to the engine, so the two do not fight.
   -------------------------------------------------------------------------- */
html.lk-smooth{scroll-behavior:auto}

/* Drawer open: hold the page still underneath it. */
html.lk-locked,html.lk-locked body{overflow:hidden}

/* --------------------------------------------------------------------------
   2b. SCROLL PROGRESS
   -------------------------------------------------------------------------- */
.lk-prog{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:transparent;overflow:hidden;pointer-events:none;
  opacity:0;transition:opacity var(--lk-med) var(--lk-ease);
}
.lk-hdr.is-stuck .lk-prog{opacity:1}
.lk-prog__fill{
  height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--lk-blue-lo),var(--lk-blue-hi) 45%,var(--lk-cyan));
  box-shadow:0 0 12px rgba(32,187,252,.55);
}

/* --------------------------------------------------------------------------
   3. REVEALS - transform + opacity only, never layout

   Every hidden state is gated behind html.lk-anim, which the engine only adds
   once it has an IntersectionObserver in hand. Without JavaScript, without an
   observer, or if the engine throws before that line, the class is never
   added and every element is simply visible. Content is never stranded at
   opacity 0 waiting for a callback that is not coming.
   -------------------------------------------------------------------------- */
.lk-anim .lk-rise{opacity:0;transform:translate3d(0,26px,0);transition:opacity .78s var(--lk-ease),transform .78s var(--lk-ease)}
.lk-anim .lk-rise.is-in{opacity:1;transform:none}
.lk-anim .lk-fade{opacity:0;transition:opacity .9s var(--lk-ease)}
.lk-anim .lk-fade.is-in{opacity:1}
.lk-anim .lk-scale{opacity:0;transform:translate3d(0,20px,0) scale(.97);transition:opacity .8s var(--lk-ease),transform .8s var(--lk-ease)}
.lk-anim .lk-scale.is-in{opacity:1;transform:none}
.lk-anim .lk-clip{clip-path:inset(0 100% 0 0);transition:clip-path 1s var(--lk-ease)}
.lk-anim .lk-clip.is-in{clip-path:inset(0 0 0 0)}
/* stagger children */
.lk-anim .lk-stagger > *{opacity:0;transform:translate3d(0,22px,0);transition:opacity .7s var(--lk-ease),transform .7s var(--lk-ease)}
.lk-anim .lk-stagger.is-in > *{opacity:1;transform:none}
.lk-anim .lk-stagger.is-in > *:nth-child(1){transition-delay:.02s}
.lk-anim .lk-stagger.is-in > *:nth-child(2){transition-delay:.08s}
.lk-anim .lk-stagger.is-in > *:nth-child(3){transition-delay:.14s}
.lk-anim .lk-stagger.is-in > *:nth-child(4){transition-delay:.2s}
.lk-anim .lk-stagger.is-in > *:nth-child(5){transition-delay:.26s}
.lk-anim .lk-stagger.is-in > *:nth-child(6){transition-delay:.32s}
.lk-anim .lk-stagger.is-in > *:nth-child(7){transition-delay:.38s}
.lk-anim .lk-stagger.is-in > *:nth-child(8){transition-delay:.44s}
.lk-anim .lk-stagger.is-in > *:nth-child(n+9){transition-delay:.5s}

/* Directional. Cards that arrive from the side they sit on read as settling
   into place rather than all rising in unison. */
.lk-anim .lk-in-l{opacity:0;transform:translate3d(-34px,0,0);transition:opacity .8s var(--lk-ease),transform .8s var(--lk-ease)}
.lk-anim .lk-in-r{opacity:0;transform:translate3d(34px,0,0);transition:opacity .8s var(--lk-ease),transform .8s var(--lk-ease)}
.lk-anim .lk-in-l.is-in,.lk-anim .lk-in-r.is-in{opacity:1;transform:none}

/* Focus pull. Used once, on the diagram frames. */
.lk-anim .lk-blur{opacity:0;filter:blur(11px);transform:scale(1.014);transition:opacity .95s var(--lk-ease),filter .95s var(--lk-ease),transform .95s var(--lk-ease)}
.lk-anim .lk-blur.is-in{opacity:1;filter:blur(0);transform:none}

/* Word reveal. Each word rises out of its own clipping box. The padding and
   negative margin give descenders room, otherwise overflow:hidden shears the
   tails off g, y and p. */
.lk-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.14em;margin-bottom:-.14em}
.lk-w > span{display:inline-block;will-change:transform}
.lk-anim .lk-w > span{transform:translate3d(0,110%,0);transition:transform .82s var(--lk-ease)}
.lk-anim .lk-words.is-in .lk-w > span{transform:none}

/* --------------------------------------------------------------------------
   4. HEADER
   -------------------------------------------------------------------------- */
/* Pinned to the top for the whole page. It never hides on the way down:
   the one control that matters most, the health check, has to stay reachable
   from anywhere. */
.lk-hdr{
  position:fixed;top:0;left:0;right:0;z-index:900;
  height:var(--lk-nav-h);display:flex;align-items:center;
  border-bottom:1px solid transparent;
  /* Compositor-only. The bar used to shrink 10px on scroll, but height is a
     layout property and animating it forced a relayout of the header subtree
     on the exact frames the page is already busy scrolling. Background, blur,
     border and shadow signal the stuck state on their own. */
  transition:
    background var(--lk-med) var(--lk-ease),
    border-color var(--lk-med) var(--lk-ease),
    box-shadow var(--lk-med) var(--lk-ease);
}
.lk-hdr.is-stuck{
  background:rgba(7,10,17,.86);
  -webkit-backdrop-filter:blur(18px) saturate(170%);
  backdrop-filter:blur(18px) saturate(170%);
  border-bottom-color:var(--lk-line-2);
  box-shadow:0 12px 40px -28px rgba(0,0,0,.9);
}

/* Seven links, a wordmark and a call to action do not fit inside the 1200px
   body measure, so the bar gets a wider one of its own. Every label is
   nowrap: a nav item that breaks across two lines wrecks the whole bar. */
.lk-hdr .lk-wrap{max-width:1400px}
.lk-hdr__in{display:flex;align-items:center;gap:20px;width:100%;min-width:0}
.lk-hdr__nav{display:flex;align-items:center;gap:2px;margin-left:auto;flex:none}
.lk-hdr__nav a{
  position:relative;white-space:nowrap;
  font-size:14.5px;font-weight:500;color:var(--lk-ink-2);
  padding:9px 12px;border-radius:var(--lk-r);
  transition:color var(--lk-fast) var(--lk-ease),background var(--lk-fast) var(--lk-ease);
}
.lk-hdr__nav a::after{
  content:"";position:absolute;left:12px;right:12px;bottom:4px;height:1px;
  background:var(--lk-cyan);transform:scaleX(0);transform-origin:right;
  transition:transform var(--lk-med) var(--lk-ease);
}
.lk-hdr__nav a:hover{color:#fff}
.lk-hdr__nav a:hover::after{transform:scaleX(1);transform-origin:left}
.lk-hdr__nav a[aria-current="page"]{color:#fff}
.lk-hdr__nav a[aria-current="page"]::after{transform:scaleX(1)}

.lk-hdr__cta{margin-left:8px;flex:none}
.lk-hdr__cta .lk-btn{white-space:nowrap}
.lk-logo__n,.lk-logo__s{white-space:nowrap}

/* Below 1240px the row is too tight to stay honest, so hand it to the drawer
   rather than let it crowd. */
@media(max-width:1240px){
  .lk-hdr__nav{display:none}
  .lk-hdr__cta{margin-left:auto}
}
@media(max-width:560px){.lk-hdr__cta .lk-btn{padding:10px 14px;font-size:13px}}
@media(max-width:400px){.lk-hdr__cta{display:none}}

/* Logo */
.lk-logo{display:flex;align-items:center;gap:12px;flex:none}
.lk-logo svg{height:34px;width:auto}
.lk-logo__txt{display:flex;flex-direction:column;line-height:1}
.lk-logo__n{font-size:19px;font-weight:800;letter-spacing:-.05em;color:#fff}
.lk-logo__s{font-family:var(--lk-mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--lk-ink-3);margin-top:4px}
@media(max-width:560px){.lk-logo__s{display:none}}

/* Burger + mobile drawer */
.lk-burger{
  display:none;width:42px;height:42px;background:transparent;border:1px solid var(--lk-line-2);
  border-radius:var(--lk-r);cursor:pointer;position:relative;flex:none;padding:0;
}
.lk-burger span{
  position:absolute;left:12px;right:12px;height:1.5px;background:var(--lk-ink);
  transition:transform var(--lk-med) var(--lk-ease),opacity var(--lk-fast) var(--lk-ease);
}
.lk-burger span:nth-child(1){top:15px}
.lk-burger span:nth-child(2){top:20px}
.lk-burger span:nth-child(3){top:25px}
.lk-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.lk-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.lk-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
@media(max-width:1240px){.lk-burger{display:block}}

.lk-drawer{
  position:fixed;inset:var(--lk-nav-h) 0 0;z-index:890;
  background:rgba(4,6,11,.97);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  padding:32px var(--lk-pad) 40px;
  display:flex;flex-direction:column;gap:6px;
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity var(--lk-med) var(--lk-ease),transform var(--lk-med) var(--lk-ease),visibility var(--lk-med);
  overflow-y:auto;overscroll-behavior:contain;
}
.lk-drawer.is-open{opacity:1;visibility:visible;transform:none}
.lk-drawer a{
  font-size:21px;font-weight:600;letter-spacing:-.03em;color:var(--lk-ink);
  padding:15px 0;border-bottom:1px solid var(--lk-line-2);
  display:flex;align-items:center;justify-content:space-between;
}
.lk-drawer a:hover{color:var(--lk-sky)}
.lk-drawer a span{font-family:var(--lk-mono);font-size:11px;color:var(--lk-ink-4)}
.lk-drawer .lk-btn{margin-top:26px}
.lk-drawer__foot{margin-top:auto;padding-top:30px;font-size:13.5px;color:var(--lk-ink-3);line-height:1.7}
.lk-drawer__foot a{font-size:13.5px;font-weight:500;border:0;padding:0;color:var(--lk-sky);display:inline}

/* --------------------------------------------------------------------------
   5. HERO
   -------------------------------------------------------------------------- */
.lk-hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding:calc(var(--lk-nav-h) + 60px) 0 90px;
  overflow:hidden;background:var(--lk-void);
}
.lk-hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.85}
.lk-hero__in{position:relative;z-index:2;width:100%}
.lk-hero__grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(36px,5vw,72px);align-items:center}
@media(max-width:1000px){.lk-hero__grid{grid-template-columns:1fr;gap:48px}}

/* No parallax. The hero holds still: the copy, the panel and the backdrop all
   stay exactly where they are painted, on scroll and under the pointer.
   Removed by request, and it also removes every will-change on this section. */
/* Foreground vignette. Sits closest, so it barely moves, and it keeps the
   headline legible over whatever the canvas is drawing behind it. */
.lk-hero__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg,var(--lk-void) 4%,rgba(4,6,11,.72) 34%,transparent 62%),
    radial-gradient(ellipse 90% 70% at 50% 118%,rgba(4,6,11,.9),transparent 62%);
}

.lk-hero h1{margin:22px 0 26px}
/* "watching" gets the scan */
.lk-scanword{position:relative;display:inline-block;color:transparent}
.lk-scanword span{
  background:var(--lk-grad-text);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.lk-scanword::after{
  content:"";position:absolute;left:-6%;right:-6%;top:8%;height:2px;
  background:linear-gradient(90deg,transparent,var(--lk-cyan),transparent);
  box-shadow:0 0 18px 2px rgba(32,187,252,.75);
  animation:lk-scan 3.6s var(--lk-ease) infinite;
}
@keyframes lk-scan{
  0%,100%{top:6%;opacity:0}
  10%{opacity:1}
  50%{top:86%;opacity:1}
  62%{opacity:0}
}

.lk-hero__actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:8px}
.lk-hero__note{font-size:14px;color:var(--lk-ink-3);max-width:26ch;line-height:1.45}
.lk-hero__note b{color:var(--lk-ink-2);font-weight:600}

/* trust strip under the fold line */
.lk-hero__trust{
  display:flex;flex-direction:column;gap:11px;
  margin-top:40px;padding-top:24px;border-top:1px solid var(--lk-line-2);
}
.lk-hero__trustrow{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.lk-hero__trust span{
  font-family:var(--lk-mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--lk-ink-4);white-space:nowrap;
}
.lk-hero__trust .lk-hero__k{color:var(--lk-ink-3)}
.lk-hero__trust .lk-sep{color:var(--lk-ink-4);opacity:.5}

/* Scroll cue */
.lk-cue{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:var(--lk-mono);font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--lk-ink-4);
  
}
.lk-cue__line{width:1px;height:38px;background:linear-gradient(to bottom,var(--lk-sky),transparent);position:relative;overflow:hidden}
.lk-cue__line::after{
  content:"";position:absolute;inset:0;background:var(--lk-cyan);
  animation:lk-cue 2.1s var(--lk-ease) infinite;
}
@keyframes lk-cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
@media(max-width:1000px){.lk-cue{display:none}}

/* --------------------------------------------------------------------------
   6. SOC PANEL - the "always watching" proof object
   -------------------------------------------------------------------------- */
.lk-soc{
  position:relative;background:linear-gradient(168deg,var(--lk-panel-2),var(--lk-panel));
  border:1px solid var(--lk-line);border-radius:var(--lk-r-lg);
  box-shadow:var(--lk-glow);overflow:hidden;
}
.lk-soc__bar{
  display:flex;align-items:center;gap:10px;padding:13px 18px;
  border-bottom:1px solid var(--lk-line-2);background:rgba(255,255,255,.018);
}
.lk-soc__dot{width:7px;height:7px;border-radius:50%;background:var(--lk-ok);flex:none;position:relative}
.lk-soc__dot::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--lk-ok);
  opacity:0;animation:lk-ping 2.4s var(--lk-ease) infinite;
}
@keyframes lk-ping{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.1);opacity:0}}
.lk-soc__t{font-family:var(--lk-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--lk-ink-2)}
.lk-soc__clock{margin-left:auto;font-family:var(--lk-mono);font-size:11.5px;color:var(--lk-sky);font-variant-numeric:tabular-nums}

.lk-soc__body{padding:20px 18px 22px}
.lk-soc__row{
  display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--lk-line-2);
  font-family:var(--lk-mono);font-size:12px;
}
.lk-soc__row:last-child{border-bottom:0}
.lk-soc__time{color:var(--lk-ink-4);font-variant-numeric:tabular-nums}
.lk-soc__ev{color:var(--lk-ink-2);font-family:var(--lk-sans);font-size:13.5px;letter-spacing:-.01em}
.lk-soc__tag{
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 9px;border-radius:2px;white-space:nowrap;
}
.lk-soc__tag--ok{color:var(--lk-ok);background:rgba(31,191,143,.1);border:1px solid rgba(31,191,143,.25)}
.lk-soc__tag--w{color:var(--lk-warn);background:rgba(242,163,60,.1);border:1px solid rgba(242,163,60,.25)}
.lk-soc__tag--h{color:var(--lk-hot);background:rgba(255,90,71,.1);border:1px solid rgba(255,90,71,.25)}

.lk-soc__foot{
  display:flex;align-items:center;gap:10px;padding:14px 18px;
  border-top:1px solid var(--lk-line-2);background:rgba(79,180,245,.035);
  font-size:12.5px;color:var(--lk-ink-3);
}
.lk-soc__foot b{color:var(--lk-sky);font-family:var(--lk-mono);font-variant-numeric:tabular-nums;font-weight:500}

/* --------------------------------------------------------------------------
   7. STATS
   -------------------------------------------------------------------------- */
.lk-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--lk-line-2)}
.lk-stat{background:var(--lk-black);padding:28px 24px 26px}
.lk-sec--panel .lk-stat{background:var(--lk-panel)}
.lk-stat__n{
  font-size:clamp(2.6rem,6.4vw,4rem);font-weight:700;letter-spacing:-.055em;line-height:.9;
  font-variant-numeric:tabular-nums;
  background:var(--lk-grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.lk-stat__t{margin-top:15px;font-size:14.5px;color:var(--lk-ink-2);line-height:1.45;max-width:26ch}

/* --------------------------------------------------------------------------
   8. DIAGRAMS - shared frame
   -------------------------------------------------------------------------- */
.lk-dia{
  position:relative;background:
    radial-gradient(ellipse 80% 60% at 50% 0%,rgba(15,118,196,.1),transparent 70%),
    var(--lk-panel);
  border:1px solid var(--lk-line);border-radius:var(--lk-r-lg);
  padding:clamp(20px,3vw,36px);overflow:hidden;
}
.lk-dia__grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(79,180,245,.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(79,180,245,.05) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000,transparent 82%);
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000,transparent 82%);
}
.lk-dia svg{position:relative;z-index:1;width:100%;height:auto;overflow:visible}
.lk-dia__cap{
  position:relative;z-index:1;margin-top:20px;padding-top:16px;
  border-top:1px solid var(--lk-line-2);
  font-family:var(--lk-mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--lk-ink-4);
}

/* SVG diagram primitives */
.lk-d-plate{fill:var(--lk-panel-2);stroke:var(--lk-line-3);stroke-width:1}
.lk-d-plate-2{fill:rgba(15,118,196,.07);stroke:rgba(79,180,245,.3);stroke-width:1}
.lk-d-lantek{fill:rgba(32,187,252,.09);stroke:var(--lk-cyan);stroke-width:1.5}
.lk-d-t{fill:#fff;font-family:var(--lk-sans);font-size:14px;font-weight:600;letter-spacing:-.02em}
.lk-d-s{fill:var(--lk-ink-2);font-family:var(--lk-sans);font-size:11.5px}
.lk-d-l{fill:var(--lk-sky);font-family:var(--lk-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase}
.lk-d-line{stroke:var(--lk-line-3);stroke-width:1;fill:none}
.lk-d-flow{
  stroke:var(--lk-cyan);stroke-width:1.5;fill:none;
  stroke-dasharray:5 9;
  animation:lk-flow 1.6s linear infinite;
}
@keyframes lk-flow{to{stroke-dashoffset:-28}}
.lk-d-node{fill:var(--lk-cyan)}
.lk-d-pulse{transform-box:fill-box;transform-origin:center;animation:lk-pulse 2.6s var(--lk-ease) infinite}
@keyframes lk-pulse{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:1;transform:scale(1.12)}}

/* draw-on-scroll for diagram strokes */
.lk-draw{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);transition:stroke-dashoffset 1.5s var(--lk-ease)}
.is-in .lk-draw{stroke-dashoffset:0}

/* --------------------------------------------------------------------------
   9. NIST WHEEL
   -------------------------------------------------------------------------- */
/* The table is far taller than the wheel. Centring the wheel against it left
   it stranded in the middle of a tall empty column, so it aligns to the top
   and then pins, staying beside whichever function you are reading. */
.lk-nist{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(28px,4vw,56px);align-items:start}
.lk-nist > .lk-dia{position:sticky;top:calc(var(--lk-nav-h) + 24px)}
@media(max-width:900px){
  .lk-nist{grid-template-columns:1fr}
  .lk-nist > .lk-dia{position:static}
}
.lk-nist__seg{cursor:pointer;transition:opacity var(--lk-med) var(--lk-ease)}
.lk-nist__seg path{transition:fill var(--lk-med) var(--lk-ease),stroke var(--lk-med) var(--lk-ease)}
.lk-nist__seg:hover path,.lk-nist__seg.is-on path{fill:rgba(32,187,252,.2);stroke:var(--lk-cyan)}
.lk-nist__seg:hover text,.lk-nist__seg.is-on text{fill:#fff}

.lk-nist__list{display:flex;flex-direction:column;gap:1px;background:var(--lk-line-2);border:1px solid var(--lk-line-2);border-radius:var(--lk-r-lg);overflow:hidden}
.lk-nist__row{
  background:var(--lk-panel-2);padding:17px 20px;display:grid;
  grid-template-columns:104px 1fr;gap:18px;align-items:start;
  transition:background var(--lk-med) var(--lk-ease);cursor:pointer;
}
.lk-nist__row:hover,.lk-nist__row.is-on{background:var(--lk-panel-3)}
/* Active row. A ring on all four sides rather than a bar down one edge: it
   reads as "this row is selected" from the corner of the eye while you are
   looking at the wheel, which is the whole point of the cross-link. */
.lk-nist__row.is-on{box-shadow:inset 0 0 0 1px rgba(32,187,252,.5)}
.lk-nist__row.is-on .lk-nist__f{color:var(--lk-cyan)}
.lk-nist__f{
  font-family:var(--lk-mono);font-size:11.5px;font-weight:600;letter-spacing:.14em;
  color:var(--lk-sky);transition:color var(--lk-med) var(--lk-ease);
}
.lk-nist__p{font-size:14px;font-weight:600;color:#fff;margin-bottom:5px;letter-spacing:-.02em}
.lk-nist__d{font-size:13.8px;line-height:1.55;color:var(--lk-ink-2)}
@media(max-width:520px){.lk-nist__row{grid-template-columns:1fr;gap:8px}}

/* --------------------------------------------------------------------------
   10. DARK WEB SCAN TERMINAL
   -------------------------------------------------------------------------- */
.lk-term{
  background:#04070D;border:1px solid var(--lk-line);border-radius:var(--lk-r-lg);
  overflow:hidden;box-shadow:var(--lk-glow);
}
.lk-term__bar{
  display:flex;align-items:center;gap:8px;padding:12px 16px;
  border-bottom:1px solid var(--lk-line-2);background:rgba(255,255,255,.02);
}
.lk-term__bar i{width:9px;height:9px;border-radius:50%;background:var(--lk-ink-4);display:block}
.lk-term__bar i:nth-child(1){background:rgba(255,90,71,.6)}
.lk-term__bar i:nth-child(2){background:rgba(242,163,60,.6)}
.lk-term__bar i:nth-child(3){background:rgba(31,191,143,.6)}
.lk-term__bar span{margin-left:8px;font-family:var(--lk-mono);font-size:11px;color:var(--lk-ink-3);letter-spacing:.08em}
.lk-term__body{
  padding:20px 18px;font-family:var(--lk-mono);font-size:12.5px;line-height:1.95;
  min-height:264px;color:var(--lk-ink-2);
}
.lk-term__body .g{color:var(--lk-ok)}
.lk-term__body .b{color:var(--lk-sky)}
.lk-term__body .w{color:var(--lk-warn)}
.lk-term__body .h{color:var(--lk-hot)}
.lk-term__body .d{color:var(--lk-ink-4)}
.lk-term__caret{
  display:inline-block;width:7px;height:14px;background:var(--lk-cyan);
  vertical-align:-2px;animation:lk-blink 1.05s steps(2) infinite;
}
@keyframes lk-blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* --------------------------------------------------------------------------
   11. MARQUEE - accreditations
   -------------------------------------------------------------------------- */
.lk-marq{
  position:relative;overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.lk-marq__track{display:flex;width:max-content;animation:lk-marq var(--dur,44s) linear infinite}
.lk-marq:hover .lk-marq__track{animation-play-state:paused}
.lk-marq--rev .lk-marq__track{animation-direction:reverse}
@keyframes lk-marq{to{transform:translate3d(-50%,0,0)}}
.lk-marq__item{
  flex:none;display:flex;align-items:center;gap:11px;
  margin-right:12px;padding:14px 22px;
  border:1px solid var(--lk-line-2);border-radius:var(--lk-r);
  background:var(--lk-panel-2);white-space:nowrap;
  transition:border-color var(--lk-fast) var(--lk-ease),background var(--lk-fast) var(--lk-ease);
}
.lk-marq__item:hover{border-color:var(--lk-line-3);background:var(--lk-panel-3)}
.lk-marq__item svg{width:18px;height:18px;flex:none;color:var(--lk-sky)}
.lk-marq__n{font-size:14.5px;font-weight:600;color:#fff;letter-spacing:-.02em}
.lk-marq__r{font-family:var(--lk-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--lk-ink-4)}

/* --------------------------------------------------------------------------
   12. QUOTES + CLIENTS
   -------------------------------------------------------------------------- */
.lk-quote{display:flex;flex-direction:column;gap:18px;height:100%}
.lk-quote__m{
  font-size:15.5px;line-height:1.6;color:var(--lk-ink);
  font-family:var(--lk-sans);letter-spacing:-.012em;
}
.lk-quote__w{
  width:26px;height:20px;color:var(--lk-blue-hi);opacity:.8;
}
.lk-quote__by{margin-top:auto;padding-top:16px;border-top:1px solid var(--lk-line-2)}
.lk-quote__n{font-size:14px;font-weight:600;color:#fff}
.lk-quote__r{font-size:12.5px;color:var(--lk-ink-3);margin-top:3px}

/* A noted fact, set apart from the surrounding copy.
   Differentiated by surface rather than by an accent rail on one edge: this
   one recesses below the section it sits in, where .lk-soft raises above it.
   The mono eyebrow already labels what it is, so a coloured stripe would be
   saying the same thing twice. */
.lk-flag{
  background:var(--lk-void);border:1px solid var(--lk-line-2);
  border-radius:var(--lk-r-lg);padding:28px 30px;overflow:hidden;position:relative;
}

/* --------------------------------------------------------------------------
   13. FAQ
   -------------------------------------------------------------------------- */
.lk-faq{border-top:1px solid var(--lk-line-2)}
.lk-faq details{border-bottom:1px solid var(--lk-line-2)}
.lk-faq summary{
  padding:21px 0;font-size:17px;font-weight:600;letter-spacing:-.024em;color:#fff;
  cursor:pointer;list-style:none;display:flex;gap:18px;align-items:center;
  transition:color var(--lk-fast) var(--lk-ease);
}
.lk-faq summary::-webkit-details-marker{display:none}
.lk-faq summary:hover{color:var(--lk-sky)}
.lk-faq summary::after{
  content:"";margin-left:auto;flex:none;width:11px;height:11px;
  border-right:1.5px solid var(--lk-sky);border-bottom:1.5px solid var(--lk-sky);
  transform:rotate(45deg) translateY(-3px);
  transition:transform var(--lk-med) var(--lk-ease);
}
.lk-faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.lk-faq .lk-faq__a{padding:0 0 24px;color:var(--lk-ink-2);font-size:15.5px;line-height:1.65;max-width:74ch}

/* --------------------------------------------------------------------------
   14. CTA BAND
   -------------------------------------------------------------------------- */
.lk-cta{position:relative;overflow:hidden;background:var(--lk-void)}
.lk-cta__box{
  position:relative;z-index:1;
  background:linear-gradient(155deg,rgba(15,118,196,.14),rgba(10,15,25,.5));
  border:1px solid var(--lk-line-3);border-radius:var(--lk-r-lg);
  padding:clamp(32px,5vw,64px);
  box-shadow:0 40px 120px -50px rgba(15,118,196,.8);
}
/* The counterpart to .lk-flag: raised rather than recessed. */
.lk-soft{
  background:rgba(255,255,255,.042);border:1px solid var(--lk-line-2);
  border-radius:var(--lk-r);padding:24px 26px;
}
.lk-soft h3{font-size:16.5px;margin-bottom:10px;letter-spacing:-.024em}
.lk-soft p{font-size:14.8px;color:var(--lk-ink-2);line-height:1.6}

/* --------------------------------------------------------------------------
   15. FOOTER
   -------------------------------------------------------------------------- */
.lk-foot{position:relative;background:var(--lk-void);border-top:1px solid var(--lk-line-2);overflow:hidden}
.lk-foot__in{position:relative;z-index:1;padding:clamp(56px,7vw,88px) 0 34px}
.lk-foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(24px,4vw,44px)}
@media(max-width:900px){.lk-foot__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.lk-foot__grid{grid-template-columns:1fr;gap:34px}}
.lk-foot h4{
  font-family:var(--lk-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--lk-sky);margin-bottom:16px;font-weight:500;
}
.lk-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.lk-foot li,.lk-foot p{font-size:14.5px;color:var(--lk-ink-2);line-height:1.55}
.lk-foot a{color:var(--lk-ink-2);transition:color var(--lk-fast) var(--lk-ease)}
.lk-foot a:hover{color:var(--lk-cyan)}
.lk-foot__brand p{max-width:36ch;margin-top:16px;font-size:14px;color:var(--lk-ink-3)}
.lk-foot__badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
.lk-foot__badge{
  font-family:var(--lk-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--lk-ink-3);border:1px solid var(--lk-line-2);border-radius:2px;padding:6px 10px;
}
.lk-foot__bottom{
  margin-top:clamp(40px,5vw,60px);padding-top:24px;border-top:1px solid var(--lk-line-2);
  display:flex;gap:12px 26px;flex-wrap:wrap;align-items:center;
  font-family:var(--lk-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--lk-ink-4);
}
.lk-foot__bottom .lk-sep{opacity:.4}
.lk-foot__top{margin-left:auto}

/* the oversized watermark wordmark */
.lk-foot__mark{
  position:absolute;left:50%;bottom:-4%;transform:translateX(-50%);
  width:min(1500px,132%);pointer-events:none;z-index:0;opacity:.05;
}
.lk-foot__mark svg{width:100%;height:auto}

/* --------------------------------------------------------------------------
   15b. DIAGRAM SCROLL
   An 860-unit viewBox rendered under about 800px shrinks the 11.5px labels
   below 9px, so from 900px down the diagram scrolls inside its own frame at a
   legible size instead of shrinking. The cards underneath carry the same
   information as text, so nothing is lost either way.
   -------------------------------------------------------------------------- */
.lk-dia__scroll{position:relative;z-index:1}
@media(max-width:900px){
  .lk-dia__scroll{
    overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    padding-bottom:12px;
    scrollbar-width:thin;scrollbar-color:var(--lk-line-3) transparent;
  }
  .lk-dia__scroll > svg{min-width:640px}
  .lk-dia__scroll::-webkit-scrollbar{height:5px}
  .lk-dia__scroll::-webkit-scrollbar-thumb{background:var(--lk-line-3);border-radius:3px}
  .lk-dia__scroll::-webkit-scrollbar-track{background:transparent}
}

/* --------------------------------------------------------------------------
   15c. CLIENT LOGOS
   Supplied logos are every colour under the sun. Knocking them to a single
   white silhouette is the only way a row of them reads as one thing on a
   dark ground. They lift to full white on hover.
   -------------------------------------------------------------------------- */
.lk-clients{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;
  background:var(--lk-line-2);border:1px solid var(--lk-line-2);border-radius:var(--lk-r-lg);overflow:hidden;
}
@media(max-width:900px){.lk-clients{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:520px){.lk-clients{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lk-client{
  background:var(--lk-panel);min-height:104px;
  display:grid;place-items:center;padding:22px 18px;
  transition:background var(--lk-med) var(--lk-ease);
}
.lk-client:hover{background:var(--lk-panel-3)}
.lk-client__logo{
  max-height:38px;width:auto;max-width:100%;object-fit:contain;
  filter:brightness(0) invert(1);
  opacity:.52;
  transition:opacity var(--lk-med) var(--lk-ease),filter var(--lk-med) var(--lk-ease);
}
.lk-client:hover .lk-client__logo{opacity:.95}
.lk-client__txt{
  font-size:14.5px;font-weight:600;letter-spacing:-.02em;color:var(--lk-ink-3);
  text-align:center;transition:color var(--lk-med) var(--lk-ease);
}
.lk-client:hover .lk-client__txt{color:#fff}

/* --------------------------------------------------------------------------
   15d. BACKDROP TEXTURES
   Drawn rather than photographed: an SVG data URI stays sharp at any density,
   weighs a fraction of a raster, and needs no network request. Each one is
   masked so it fades out instead of stopping at a hard edge.
   -------------------------------------------------------------------------- */
.lk-bg__topo{
  inset:-10%;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg fill='none' stroke='%234FB4F5' stroke-width='1' opacity='.17'%3E%3Cpath d='M-40 300c90-70 180-70 270 0s180 70 270 0 180-70 270 0'/%3E%3Cpath d='M-40 340c90-70 180-70 270 0s180 70 270 0 180-70 270 0'/%3E%3Cpath d='M-40 380c90-70 180-70 270 0s180 70 270 0 180-70 270 0'/%3E%3Cpath d='M-40 420c90-70 180-70 270 0s180 70 270 0 180-70 270 0'/%3E%3Cpath d='M-40 220c70-54 140-54 210 0s140 54 210 0 140-54 210 0'/%3E%3Cpath d='M-40 180c70-54 140-54 210 0s140 54 210 0 140-54 210 0'/%3E%3Cpath d='M-40 140c70-54 140-54 210 0s140 54 210 0 140-54 210 0'/%3E%3C/g%3E%3C/svg%3E");
  background-size:560px 560px;
  mask-image:radial-gradient(ellipse 76% 68% at 50% 50%,#000 10%,transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 76% 68% at 50% 50%,#000 10%,transparent 76%);
}
.lk-bg__circuit{
  inset:0;opacity:.62;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%234FB4F5' stroke-width='1' opacity='.2'%3E%3Cpath d='M20 0v54l30 30h64M240 96h-60l-26 26v58M0 168h48l30-30h72M120 240v-42l34-34h86M180 0v28l-24 24'/%3E%3C/g%3E%3Cg fill='%2320BBFC' opacity='.34'%3E%3Ccircle cx='114' cy='84' r='3'/%3E%3Ccircle cx='180' cy='96' r='3'/%3E%3Ccircle cx='150' cy='138' r='3'/%3E%3Ccircle cx='48' cy='168' r='3'/%3E%3Ccircle cx='156' cy='52' r='3'/%3E%3C/g%3E%3C/svg%3E");
  background-size:240px 240px;
  mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
}
.lk-bg__dots{
  inset:0;opacity:.7;
  background-image:radial-gradient(circle at 1px 1px,rgba(79,180,245,.24) 1px,transparent 0);
  background-size:26px 26px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000,transparent 74%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000,transparent 74%);
}
/* Aurora. Three offset radials that drift very slowly. */
.lk-bg__mesh{
  inset:-25%;
  background:
    radial-gradient(38% 44% at 22% 28%,rgba(32,187,252,.16),transparent 62%),
    radial-gradient(42% 40% at 78% 34%,rgba(15,118,196,.2),transparent 64%),
    radial-gradient(50% 46% at 50% 82%,rgba(10,79,134,.22),transparent 66%);
  filter:blur(26px);
  animation:lk-mesh 26s ease-in-out infinite alternate;
}
@keyframes lk-mesh{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(2%,-2.5%,0) scale(1.08)}
}

/* --------------------------------------------------------------------------
   15e. WEEK COVERAGE GRAPH
   168 cells, one per hour of the week. The lit block is a normal working
   week, which is arithmetic rather than a claim: 9 hours across 5 days.
   -------------------------------------------------------------------------- */
.lk-graph{
  position:relative;background:var(--lk-panel);border:1px solid var(--lk-line);
  border-radius:var(--lk-r-lg);padding:clamp(20px,3vw,34px);overflow:hidden;
}
.lk-graph__head{
  position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:14px;
  align-items:baseline;justify-content:space-between;margin-bottom:22px;
}
.lk-graph__t{font-size:16px;font-weight:600;letter-spacing:-.024em;color:#fff}
.lk-graph__key{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--lk-mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--lk-ink-3);white-space:nowrap;
}
.lk-graph__sw{
  width:10px;height:10px;border-radius:2px;flex:none;
  background:rgba(79,180,245,.07);box-shadow:inset 0 0 0 1px rgba(79,180,245,.3);
}
.lk-graph__sw--on{background:var(--lk-grad);box-shadow:none}
.lk-graph__scroll{position:relative;z-index:1}
@media(max-width:720px){
  .lk-graph__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:10px}
  .lk-graph__scroll > svg{min-width:600px}
}
.lk-graph svg{width:100%;height:auto;display:block}
.lk-g-day{fill:var(--lk-ink-4);font-family:var(--lk-mono);font-size:10px;letter-spacing:.1em}
.lk-g-hr{fill:var(--lk-ink-4);font-family:var(--lk-mono);font-size:9.5px;letter-spacing:.08em}

/* Two summary bars underneath, same arithmetic stated plainly. */
.lk-graph__bars{position:relative;z-index:1;margin-top:26px;display:flex;flex-direction:column;gap:16px}
.lk-gbar__top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;gap:12px}
.lk-gbar__n{font-size:13.5px;color:var(--lk-ink-2)}
.lk-gbar__v{font-family:var(--lk-mono);font-size:12.5px;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.lk-gbar__track{height:8px;border-radius:4px;background:rgba(79,180,245,.1);overflow:hidden}
.lk-gbar__fill{
  height:100%;border-radius:4px;transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.25s var(--lk-ease);
}
.is-in .lk-gbar__fill{transform:scaleX(var(--v,1))}
.lk-gbar__fill--dim{background:linear-gradient(90deg,var(--lk-blue-lo),var(--lk-blue))}
.lk-gbar__fill--full{background:var(--lk-grad);box-shadow:0 0 18px rgba(32,187,252,.4)}

/* --------------------------------------------------------------------------
   15f. BENTO
   Mixed-weight cells on a six column field. Each cell states its own span,
   so the arrangement is readable in the markup rather than implied.
   -------------------------------------------------------------------------- */
.lk-bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.lk-bento > *{grid-column:span 2}
.lk-bento__c--3{grid-column:span 3}
.lk-bento__c--4{grid-column:span 4}
.lk-bento__c--6{grid-column:span 6}
@media(max-width:1000px){
  .lk-bento{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lk-bento > *,.lk-bento__c--3{grid-column:span 2}
  .lk-bento__c--4,.lk-bento__c--6{grid-column:span 4}
}
@media(max-width:620px){
  .lk-bento{grid-template-columns:1fr}
  .lk-bento > *,.lk-bento__c--3,.lk-bento__c--4,.lk-bento__c--6{grid-column:span 1}
}
/* A cell that leads with a number rather than a title. */
.lk-bento__fig{
  font-size:clamp(2rem,4vw,2.9rem);font-weight:700;letter-spacing:-.05em;line-height:.95;
  font-variant-numeric:tabular-nums;
  background:var(--lk-grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.lk-bento__spark{margin-top:auto;padding-top:16px}
.lk-bento__spark svg{width:100%;height:auto;display:block}

/* --------------------------------------------------------------------------
   15g. SECTOR ROUTER
   Six rows rather than a pill cloud: the labels are long enough that pills
   wrap badly, and a list reads as a set of destinations rather than filters.
   -------------------------------------------------------------------------- */
.lk-sectors{display:flex;flex-direction:column;gap:1px;
  background:var(--lk-line-2);border:1px solid var(--lk-line-2);
  border-radius:var(--lk-r-lg);overflow:hidden}
.lk-sector{
  display:flex;align-items:center;gap:16px;justify-content:space-between;
  background:var(--lk-panel-2);padding:20px 24px;
  transition:background var(--lk-med) var(--lk-ease);
}
.lk-sector:hover{background:var(--lk-panel-3)}
/* The label steps forward on hover. This used to animate padding-left on the
   row, which is a layout property and relaid out the row on every frame of the
   transition. Translating the label is compositor-only and looks the same. */
.lk-sector__n{
  font-size:16.5px;font-weight:600;letter-spacing:-.024em;color:#fff;
  transition:transform var(--lk-med) var(--lk-ease);
}
.lk-sector:hover .lk-sector__n{transform:translateX(6px)}
.lk-sector svg{
  width:16px;height:16px;flex:none;color:var(--lk-sky);opacity:0;
  transform:translateX(-6px);
  transition:opacity var(--lk-med) var(--lk-ease),transform var(--lk-med) var(--lk-ease);
}
.lk-sector:hover svg{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .lk-sector:hover .lk-sector__n{transform:none}
  .lk-sector svg{opacity:1;transform:none}
}

/* --------------------------------------------------------------------------
   16. UTILITIES
   -------------------------------------------------------------------------- */
.lk-mt-s{margin-top:14px}.lk-mt-m{margin-top:26px}.lk-mt-l{margin-top:44px}
.lk-flex{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.lk-hairline{height:1px;background:linear-gradient(90deg,transparent,var(--lk-line-3),transparent);border:0;margin:0}

/* --------------------------------------------------------------------------
   17. REDUCED MOTION - the whole system degrades to static, still legible
   -------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  html.lk{scroll-behavior:auto}
  .lk *,.lk *::before,.lk *::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .lk-rise,.lk-fade,.lk-scale,.lk-stagger > *,
  .lk-in-l,.lk-in-r,.lk-blur,.lk-w > span{
    opacity:1 !important;transform:none !important;filter:none !important;
  }
  .lk-w{overflow:visible;padding-bottom:0;margin-bottom:0}
  .lk-clip{clip-path:none !important}
  .lk-draw{stroke-dashoffset:0 !important}
  .lk-prog{display:none}
  .lk-hero__copy,.lk-hero__panel,.lk-hero__canvas{transform:none !important;opacity:1 !important}
  .lk-cue{opacity:1 !important}
  .lk-marq__track{animation:none !important}
  .lk-scanword::after{display:none}
}

/* --------------------------------------------------------------------------
   18. PRINT
   -------------------------------------------------------------------------- */
@media print{
  .lk-pre,.lk-pre__curtain,.lk-hdr,.lk-cue,.lk-hero__canvas,.lk-bg{display:none !important}
  body.lk-body{background:#fff;color:#000}
  .lk h1,.lk h2,.lk h3{color:#000}
}