@charset "UTF-8";
/* ==========================================================================
   LANTEK Computers - design system
   Dark ground, hard blue. Every value is a token: change a token, change the site.
   Loaded by the lantek-child theme. Divi Code modules carry markup only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Ground - black with a blue undertone, never a flat #000 */
  --lk-void:#04060B;
  --lk-black:#070A11;
  --lk-panel:#0A0F19;
  --lk-panel-2:#0E1524;
  --lk-panel-3:#131C2E;
  --lk-raise:#162034;

  /* Blue - sampled from the LANTEK logo gradient */
  --lk-navy:#16233C;
  --lk-blue-lo:#0A4F86;
  --lk-blue:#0F76C4;        /* the one action colour */
  --lk-blue-hi:#2E93DE;
  --lk-sky:#4FB4F5;
  --lk-cyan:#20BBFC;        /* logo bright. Sparingly. */
  --lk-ice:#8FD8FF;

  /* Ink
     Every step is measured against --lk-black. The two quiet greys used to
     read 2.8:1, which fails AA at the 10-11px sizes they are used at, so both
     were lifted. Contrast against #070A11:
       ink 17.4:1   ink-2 8.9:1   ink-3 6.9:1   ink-4 5.2:1
     ink-4 is also checked against the lightest panel it ever sits on,
     --lk-panel-2, where it still clears AA at 4.8:1.                          */
  --lk-ink:#E9F1FA;
  --lk-ink-2:#9FB3CE;
  --lk-ink-3:#8296B4;
  --lk-ink-4:#7383A0;

  /* Lines */
  --lk-line:rgba(79,180,245,.13);
  --lk-line-2:rgba(255,255,255,.065);
  --lk-line-3:rgba(79,180,245,.28);

  /* Semantic - used only inside the threat panels */
  --lk-ok:#1FBF8F;
  --lk-warn:#F2A33C;
  --lk-hot:#FF5A47;

  /* Gradients */
  --lk-grad:linear-gradient(135deg,var(--lk-cyan) 0%,var(--lk-blue-hi) 42%,var(--lk-blue-lo) 100%);
  --lk-grad-soft:linear-gradient(135deg,rgba(32,187,252,.16),rgba(15,118,196,.05));
  --lk-grad-text:linear-gradient(96deg,var(--lk-ice) 0%,var(--lk-cyan) 34%,var(--lk-blue-hi) 72%,var(--lk-blue) 100%);

  /* Glow */
  --lk-glow:0 0 0 1px rgba(79,180,245,.16), 0 18px 60px -22px rgba(15,118,196,.55);
  --lk-glow-hi:0 0 0 1px rgba(79,180,245,.34), 0 24px 80px -20px rgba(32,187,252,.5);
  --lk-inset:inset 0 1px 0 rgba(255,255,255,.05);

  /* Metrics */
  --lk-maxw:1200px;
  --lk-pad:40px;
  --lk-r:3px;             /* the house radius. Hard, technical, not rounded. */
  --lk-r-lg:6px;
  --lk-nav-h:76px;

  /* Type */
  --lk-sans:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --lk-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Motion */
  --lk-ease:cubic-bezier(.22,1,.36,1);
  --lk-ease-in:cubic-bezier(.65,0,.35,1);
  --lk-fast:.18s;
  --lk-med:.42s;
  --lk-slow:.9s;
}
@media(max-width:1024px){:root{--lk-pad:28px;--lk-nav-h:68px}}
@media(max-width:640px){:root{--lk-pad:20px;--lk-nav-h:62px}}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
html.lk{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.lk.lk-smooth{scroll-behavior:auto}   /* JS engine owns it once active */

body.lk-body{
  background:var(--lk-black);
  color:var(--lk-ink);
  font-family:var(--lk-sans);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* Divi resets that fight a dark ground */
body.lk-body #page-container,
body.lk-body #et-main-area,
body.lk-body #main-content{background:transparent}
body.lk-body .et_pb_section{background-color:transparent}
body.lk-body .et_pb_row{width:100%;max-width:none;padding:0}
body.lk-body a{text-decoration:none}

.lk *,.lk *::before,.lk *::after{box-sizing:border-box}
.lk h1,.lk h2,.lk h3,.lk h4{
  margin:0;font-family:var(--lk-sans);font-weight:600;
  letter-spacing:-.032em;line-height:1.06;color:#fff;text-wrap:balance;
}
.lk p{margin:0}
.lk img,.lk svg{max-width:100%;height:auto;display:block}
.lk ::selection{background:var(--lk-blue);color:#fff}

.lk a:focus-visible,.lk button:focus-visible,.lk summary:focus-visible,
.lk [tabindex]:focus-visible{
  outline:2px solid var(--lk-cyan);outline-offset:3px;border-radius:2px;
}

.lk-skip{position:absolute;left:-9999px}
.lk-skip:focus{
  left:16px;top:16px;z-index:9999;background:var(--lk-blue);color:#fff;
  padding:12px 20px;border-radius:var(--lk-r);font-weight:600;
}

/* Layout helpers */
.lk-wrap{max-width:var(--lk-maxw);margin:0 auto;padding-inline:var(--lk-pad);width:100%}
.lk-wrap--wide{max-width:1400px}
.lk-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --------------------------------------------------------------------------
   3. TYPE SCALE
   -------------------------------------------------------------------------- */
/* The blue rule-and-caps label that used to sit above every heading is gone.
   Headings carry their own sections now. What is left are two quiet neutral
   captions: one for a divider, one for a callout. Neither is blue, and
   neither reads as a second heading. */
.lk-rule__t,.lk-flag__t{
  font-family:var(--lk-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--lk-ink-4);
}
.lk-flag__t{display:block;margin-bottom:12px}

.lk-h1{font-size:clamp(2.6rem,7.2vw,5.6rem);letter-spacing:-.045em;line-height:.98}
.lk-h2{font-size:clamp(1.95rem,4.4vw,3.1rem);letter-spacing:-.038em;line-height:1.06}
.lk-h3{font-size:clamp(1.2rem,2.3vw,1.55rem);letter-spacing:-.026em;line-height:1.2}
.lk-lead{font-size:clamp(1.05rem,1.9vw,1.28rem);line-height:1.58;color:var(--lk-ink-2);max-width:60ch}
.lk-body-t{font-size:16.5px;line-height:1.62;color:var(--lk-ink-2)}
.lk-small{font-size:14px;line-height:1.55;color:var(--lk-ink-3)}
.lk-mono-t{font-family:var(--lk-mono);font-size:12.5px;letter-spacing:.04em}

.lk-grad-text{
  background:var(--lk-grad-text);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* Section shell.
   scroll-margin keeps the pinned header from covering the top of whatever an
   anchor jumps to. */
.lk-sec,.lk-hero,.lk [id]{scroll-margin-top:calc(var(--lk-nav-h) + 20px)}
.lk-sec{position:relative;padding:clamp(72px,9vw,132px) 0}
.lk-sec--tight{padding:clamp(52px,6vw,84px) 0}
.lk-sec--line{border-top:1px solid var(--lk-line-2)}
.lk-sec--panel{background:var(--lk-panel)}
.lk-sec--void{background:var(--lk-void)}
.lk-head{max-width:64ch;margin-bottom:clamp(38px,5vw,62px)}
.lk-head .lk-h2{margin:16px 0 18px}

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.lk-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--lk-sans);font-size:15.5px;font-weight:600;letter-spacing:-.01em;
  padding:16px 28px;border:0;border-radius:var(--lk-r);cursor:pointer;
  color:#fff;background:var(--lk-blue);isolation:isolate;overflow:hidden;
  transition:transform var(--lk-fast) var(--lk-ease),box-shadow var(--lk-med) var(--lk-ease);
  box-shadow:0 0 0 1px rgba(79,180,245,.25),0 10px 30px -14px rgba(15,118,196,.9);
  will-change:transform;
}
.lk-btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--lk-grad);
  opacity:0;transition:opacity var(--lk-med) var(--lk-ease);
}
.lk-btn:hover{transform:translateY(-2px);box-shadow:var(--lk-glow-hi)}
.lk-btn:hover::before{opacity:1}
.lk-btn:active{transform:translateY(0)}
.lk-btn__ic{width:16px;height:16px;flex:none;transition:transform var(--lk-med) var(--lk-ease)}
.lk-btn:hover .lk-btn__ic{transform:translateX(4px)}

.lk-btn--ghost{
  background:transparent;color:var(--lk-ink);
  box-shadow:inset 0 0 0 1px var(--lk-line-3);
}
.lk-btn--ghost::before{background:rgba(79,180,245,.09)}
.lk-btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--lk-sky),0 12px 34px -18px rgba(79,180,245,.7)}
.lk-btn--sm{padding:11px 19px;font-size:14px}
.lk-btn--lg{padding:19px 34px;font-size:16.5px}

/* Text link with a rule that draws in */
.lk-link{
  display:inline-flex;align-items:center;gap:8px;color:var(--lk-sky);
  font-weight:600;font-size:15px;position:relative;padding-bottom:2px;
}
.lk-link::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform var(--lk-med) var(--lk-ease);
}
.lk-link:hover::after{transform:scaleX(1);transform-origin:left}
.lk-link svg{width:14px;height:14px;transition:transform var(--lk-med) var(--lk-ease)}
.lk-link:hover svg{transform:translateX(3px)}

/* --------------------------------------------------------------------------
   5. SURFACES
   -------------------------------------------------------------------------- */
.lk-card{
  position:relative;background:var(--lk-panel-2);border:1px solid var(--lk-line-2);
  border-radius:var(--lk-r-lg);padding:26px 24px 28px;
  transition:border-color var(--lk-med) var(--lk-ease),background var(--lk-med) var(--lk-ease),transform var(--lk-med) var(--lk-ease);
  overflow:hidden;
}
.lk-card::before{ /* hairline top light */
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(79,180,245,.5),transparent);
  opacity:0;transition:opacity var(--lk-med) var(--lk-ease);
}
a.lk-card:hover,.lk-card--hover:hover{
  border-color:var(--lk-line-3);background:var(--lk-panel-3);transform:translateY(-3px);
}
a.lk-card:hover::before,.lk-card--hover:hover::before{opacity:1}

/* Cursor-tracked sheen. --mx/--my set by JS, degrades to nothing without it. */
.lk-card--sheen::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(79,180,245,.12),transparent 62%);
  transition:opacity var(--lk-med) var(--lk-ease);
}
.lk-card--sheen:hover::after{opacity:1}

.lk-grid{display:grid;gap:14px}
.lk-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.lk-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.lk-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:960px){
  .lk-grid--3,.lk-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .lk-grid--2,.lk-grid--3,.lk-grid--4{grid-template-columns:1fr}
}
.lk-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}
.lk-cols--wide{grid-template-columns:1.15fr .85fr}
.lk-cols--narrow{grid-template-columns:.85fr 1.15fr}
.lk-cols--top{align-items:start}
@media(max-width:900px){
  .lk-cols,.lk-cols--wide,.lk-cols--narrow{grid-template-columns:1fr;gap:36px}
}

/* Numbered cell, the workhorse */
.lk-cell{display:flex;flex-direction:column;gap:10px;height:100%}
.lk-cell__n{font-family:var(--lk-mono);font-size:11.5px;font-weight:600;letter-spacing:.16em;color:var(--lk-blue-hi)}
.lk-cell__t{font-size:18px;font-weight:600;letter-spacing:-.024em;line-height:1.22;color:#fff}
.lk-cell__d{font-size:14.8px;line-height:1.55;color:var(--lk-ink-2)}
.lk-cell__go{margin-top:auto;padding-top:14px;font-size:13px;font-weight:600;color:var(--lk-sky);font-family:var(--lk-mono);letter-spacing:.06em}

/* Chips */
.lk-chips{display:flex;flex-wrap:wrap;gap:8px}
.lk-chip{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;color:var(--lk-ink-2);background:rgba(79,180,245,.055);
  border:1px solid var(--lk-line);border-radius:var(--lk-r);padding:8px 14px;
  transition:border-color var(--lk-fast) var(--lk-ease),color var(--lk-fast) var(--lk-ease),background var(--lk-fast) var(--lk-ease);
}
.lk-chip:hover{border-color:var(--lk-line-3);color:#fff;background:rgba(79,180,245,.11)}
.lk-chip__dot{width:5px;height:5px;border-radius:50%;background:var(--lk-cyan);flex:none}

/* Rule with a label */
.lk-rule{display:flex;align-items:center;gap:16px;margin:0 0 26px}
.lk-rule::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--lk-line-3),transparent)}

/* --------------------------------------------------------------------------
   6. BACKDROPS - grid, glow, noise. All decorative, all aria-hidden.
   -------------------------------------------------------------------------- */
.lk-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.lk-bg > *{position:absolute}
.lk-sec > .lk-wrap{position:relative;z-index:1}

.lk-bg__grid{
  inset:0;
  background-image:
    linear-gradient(to right,rgba(79,180,245,.055) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(79,180,245,.055) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 20%,transparent 78%);
}
.lk-bg__glow{
  width:min(1100px,120vw);height:min(1100px,120vw);border-radius:50%;
  background:radial-gradient(circle,rgba(15,118,196,.22) 0%,rgba(32,187,252,.08) 34%,transparent 68%);
  filter:blur(30px);
}
.lk-bg__glow--tl{top:-46%;left:-22%}
.lk-bg__glow--br{bottom:-52%;right:-24%;background:radial-gradient(circle,rgba(32,187,252,.14) 0%,transparent 66%)}
.lk-bg__glow--c{top:50%;left:50%;transform:translate(-50%,-50%)}

.lk-bg__scan{
  inset:0;
  background:repeating-linear-gradient(to bottom,transparent 0 3px,rgba(79,180,245,.028) 3px 4px);
  opacity:.6;
}
.lk-bg__noise{
  inset:0;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.lk-bg__hair{ /* top hairline that catches the eye */
  top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(79,180,245,.45),transparent);
}