/* Eikeland design system 2026 — shared by the home page and product pages.
   Everything is scoped under .ek so the legacy styles.css keeps driving the navbar, footer and blog cards. */
/* ── Eikeland home 2026 — scoped under .ek so nothing else on the site shifts ── */
.ek{
  --ink:#060910; --panel:#0b1019; --panel-2:#0e1420; --line:#1a2333; --line-lit:#2b3b54;
  --fg:#eaf0f8; --mut:#8a99b0; --acc:#4da3ff; --acc-2:#8b5cf6; --live:#34d399;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --disp:'Archivo',system-ui,-apple-system,sans-serif;
  --body:'Archivo',system-ui,-apple-system,sans-serif;
  background:var(--ink); color:var(--fg); font-family:var(--body); font-size:17px; line-height:1.6;
  position:relative; overflow-x:hidden;
}
.ek *{box-sizing:border-box}
.ek h1,.ek h2,.ek h3{font-family:var(--disp); font-weight:800; letter-spacing:-.022em; line-height:1.1; text-wrap:balance; margin:0}
.ek p{margin:0}
.ek a{color:inherit}
.ek .wrapx{width:min(1180px,92vw); margin:0 auto}
.ek .eyeb{font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--acc); display:inline-flex; align-items:center; gap:.55em}
.ek .eyeb::before{content:''; width:22px; height:1px; background:linear-gradient(90deg,transparent,var(--acc))}
.ek .grad{background:linear-gradient(103deg,var(--acc) 8%,var(--acc-2) 92%); -webkit-background-clip:text; background-clip:text; color:transparent}

/* hero */
.ek-hero{position:relative; padding:clamp(3.5rem,9vw,7rem) 0 clamp(2.5rem,5vw,4rem); overflow:hidden; border-bottom:1px solid var(--line)}
#ek-net{position:absolute; inset:0; width:100%; height:100%; opacity:.55}
.ek-hero::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 75% at 78% 0%,rgba(77,163,255,.16),transparent 60%),radial-gradient(90% 60% at 8% 100%,rgba(139,92,246,.13),transparent 62%)}
.ek-hero .wrapx{position:relative; z-index:2}
.ek-h1{font-size:clamp(2.35rem,5.2vw,4.05rem); margin:.55em 0 .42em; max-width:20ch}
.ek-lead{font-size:clamp(1.06rem,1.9vw,1.28rem); color:var(--mut); max-width:60ch}
.ek-lead strong{color:var(--fg); font-weight:600}
.ek-cta{display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.1rem}
.ek-btn{display:inline-flex; align-items:center; gap:.6em; padding:.92em 1.6em; border-radius:10px; font-weight:600; font-size:1rem;
  text-decoration:none; border:1px solid var(--line-lit); color:var(--fg); background:rgba(14,20,32,.72); transition:.22s ease; backdrop-filter:blur(6px)}
.ek-btn:hover{border-color:var(--acc); transform:translateY(-1px)}
.ek-btn.pri{background:linear-gradient(103deg,var(--acc),var(--acc-2)); border-color:transparent; color:#05080f}
.ek-btn.pri:hover{filter:brightness(1.08)}
.ek-ticker{display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; margin-top:2.6rem; padding-top:1.5rem; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.78rem; color:var(--mut); letter-spacing:.04em}
.ek-ticker b{color:var(--fg); font-weight:500}
.ek-dot{width:7px;height:7px;border-radius:50%;background:var(--live);display:inline-block;margin-right:.5em;box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:ekpulse 2.6s infinite}
@keyframes ekpulse{70%{box-shadow:0 0 0 7px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}

/* sections */
.ek-sec{padding:clamp(3.2rem,7vw,5.6rem) 0; border-bottom:1px solid var(--line); scroll-margin-top:90px}  /* clear the fixed navbar on anchor jumps */
.ek-sec.tint{background:linear-gradient(180deg,var(--panel),var(--ink))}
.ek-head{max-width:62ch; margin-bottom:clamp(1.8rem,4vw,2.8rem)}
.ek-head h2{font-size:clamp(1.65rem,3.2vw,2.45rem); margin:.6rem 0 .6rem; max-width:22ch}
.ek-head p{color:var(--mut)}

/* product deck */
.ek-deck{display:grid; grid-template-columns:minmax(230px,300px) 1fr; gap:clamp(1.2rem,3vw,2.4rem); align-items:start}
.ek-rail{display:flex; flex-direction:column; gap:.4rem; position:sticky; top:1.5rem}
.ek-tab{display:flex; gap:.9rem; align-items:flex-start; width:100%; text-align:left; padding:.95rem 1rem; border-radius:12px;
  background:transparent; border:1px solid transparent; color:var(--mut); cursor:pointer; font-family:var(--body); font-size:.97rem; transition:.2s ease}
.ek-tab:hover{background:var(--panel-2); color:var(--fg)}
.ek-tab .num{font-family:var(--mono); font-size:.72rem; color:var(--line-lit); padding-top:.2em}
.ek-tab .nm{font-family:var(--disp); font-weight:700; font-size:1rem; color:var(--fg); letter-spacing:-.01em; display:flex; align-items:center; gap:.5em}
.ek-tab .sub{font-size:.84rem; color:var(--mut); margin-top:.15em; line-height:1.35}
.ek-tab[aria-selected="true"]{background:var(--panel-2); border-color:var(--line-lit); color:var(--fg);
  box-shadow:inset 3px 0 0 0 var(--acc)}
.ek-tab[aria-selected="true"] .num{color:var(--acc)}
.ek-live{width:6px;height:6px;border-radius:50%;background:var(--live);flex:0 0 auto}
.ek-priv{font-family:var(--mono); font-size:.6rem; letter-spacing:.09em; text-transform:uppercase; color:var(--mut);
  border:1px solid var(--line-lit); border-radius:999px; padding:.15em .5em; font-weight:400}

/* spec-sheet panel (for the platforms with no public site to show) */
.ek-spec{padding:clamp(1.5rem,3.4vw,2.3rem)}
.ek-spec-head h3{font-size:clamp(1.25rem,2.2vw,1.7rem); margin:.75rem 0 .6rem}
.ek-spec-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:12px; overflow:hidden; margin:0 0 1.5rem}
.ek-spec-grid div{background:var(--panel-2); padding:.9rem 1.05rem; display:flex; flex-direction:column; gap:.3rem}
.ek-spec-grid .k{font-family:var(--mono); font-size:.68rem; letter-spacing:.11em; text-transform:uppercase; color:var(--acc)}
.ek-spec-grid .v{font-size:.93rem; color:var(--fg); line-height:1.45}
.ek-note{font-size:.86rem; color:var(--mut); border-left:2px solid var(--line-lit); padding-left:.9rem; margin-bottom:1.4rem}

.ek-panel{background:var(--panel); border:1px solid var(--line); border-radius:18px; overflow:hidden; min-height:420px}
.ek-panel-in{display:none}
.ek-panel-in.on{display:block; animation:ekfade .4s ease both}
@keyframes ekfade{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.ek-shot{position:relative; background:#05080f; border-bottom:1px solid var(--line)}
.ek-shot::after{content:''; position:absolute; left:0; right:0; bottom:0; height:70px; pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--panel))}   /* the screenshot is cropped — fade it out on purpose */
.ek-shot img{display:block; width:100%; height:auto; max-height:min(46vh,380px); object-fit:cover; object-position:top center}
.ek-chrome{display:flex; align-items:center; gap:.45rem; padding:.7rem .95rem; border-bottom:1px solid var(--line); background:var(--panel-2)}
.ek-chrome i{width:9px;height:9px;border-radius:50%;background:var(--line-lit);display:block}
.ek-chrome span{font-family:var(--mono); font-size:.74rem; color:var(--mut); margin-left:.6rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ek-body{padding:clamp(1.3rem,3vw,2rem)}
.ek-body h3{font-size:clamp(1.25rem,2.2vw,1.7rem); margin-bottom:.55rem}
.ek-body .blurb{color:var(--mut); margin-bottom:1.3rem; max-width:62ch}
.ek-chips{display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:1.4rem}
.ek-chip{font-size:.82rem; padding:.42em .8em; border-radius:999px; border:1px solid var(--line); background:var(--panel-2); color:var(--mut)}
.ek-metrics{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-bottom:1.5rem}
.ek-metrics div{background:var(--panel); padding:.95rem 1rem}
.ek-metrics .v{font-family:var(--disp); font-weight:800; font-size:1.34rem; color:var(--fg); font-variant-numeric:tabular-nums}
.ek-metrics .k{font-family:var(--mono); font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; color:var(--mut); margin-top:.25em}
.ek-actions{display:flex; flex-wrap:wrap; gap:.7rem}

/* capability grid */
.ek-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(265px,1fr)); gap:1rem}
.ek-card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:1.5rem; transition:.22s ease}
.ek-card:hover{border-color:var(--line-lit); transform:translateY(-2px)}
.ek-card h3{font-size:1.12rem; margin-bottom:.5rem}
.ek-card p{color:var(--mut); font-size:.95rem}
.ek-card .ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;margin-bottom:1rem;
  background:linear-gradient(140deg,rgba(77,163,255,.18),rgba(139,92,246,.14)); border:1px solid var(--line-lit)}

/* process */
.ek-steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden}
.ek-step{background:var(--panel); padding:1.6rem}
.ek-step .n{font-family:var(--mono); font-size:.72rem; color:var(--acc); letter-spacing:.14em}
.ek-step h3{font-size:1.05rem; margin:.7rem 0 .45rem}
.ek-step p{color:var(--mut); font-size:.93rem}

/* cta */
.ek-cta-band{background:linear-gradient(135deg,rgba(77,163,255,.1),rgba(139,92,246,.09)); border:1px solid var(--line-lit); border-radius:20px;
  padding:clamp(2.2rem,5vw,3.4rem); text-align:center}
.ek-cta-band h2{font-size:clamp(1.5rem,2.9vw,2.1rem); margin-bottom:.7rem}
.ek-cta-band p{color:var(--mut); max-width:52ch; margin:0 auto 1.9rem}
.ek-cta-band .ek-cta{justify-content:center}

@media (max-width:900px){
  .ek-deck{grid-template-columns:1fr}
  .ek-rail{position:static; flex-direction:row; overflow-x:auto; gap:.5rem; padding-bottom:.5rem; scrollbar-width:none}
  .ek-rail::-webkit-scrollbar{display:none}
  .ek-tab{flex:0 0 auto; min-width:190px; flex-direction:column; gap:.3rem}
  .ek-tab[aria-selected="true"]{box-shadow:inset 0 -3px 0 0 var(--acc)}
  .ek-tab .num{padding-top:0}
}
@media (prefers-reduced-motion:reduce){
  .ek *,.ek *::before,.ek *::after{animation:none!important; transition:none!important}
}