@import url("../../design/tokens.css");

/* VEXT-29 — io lab skin (Designchef). Company co/dk/se untouched. */
:root {
  --io-olive: #11120c;
  --io-paper: #f2f0e9;
  --io-line: rgba(242, 240, 233, 0.54);
  --io-panel: #141510;
  --io-label: 0.6875rem; /* 11px mono uppercase */
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  background:var(--io-olive);
  color:var(--io-paper);
  font-family:var(--vextr-font-copy);
  font-size:var(--vextr-text-md);
  letter-spacing:var(--vextr-tracking-tight);
  line-height:var(--vextr-leading-copy);
}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--io-paper);outline-offset:4px}
.site{min-height:100vh;display:flex;flex-direction:column;position:relative}

.header{
  height:var(--vextr-header-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--vextr-page-x);
  border-bottom:1px solid var(--io-line);
  position:sticky;top:0;z-index:20;
  background:rgba(17,18,12,0.94);
  backdrop-filter:blur(8px);
}

.brand{display:inline-flex;align-items:center;gap:var(--vextr-space-3);color:var(--io-paper)}
.brand-mark{width:26px;height:28px;flex-shrink:0;display:block}
/* Color Circuit Seed on olive — no invert */
.brand-mark--lab{filter:none}

.wordmark{
  font-family:var(--vextr-font-display);
  font-weight:700;font-size:1.75rem;
  letter-spacing:var(--vextr-tracking-display);
  text-transform:uppercase;
}
.wordmark .tld{font-weight:600;text-transform:lowercase;letter-spacing:0;font-size:0.85em;opacity:0.7}
.tag{
  font-size:var(--io-label);text-transform:uppercase;letter-spacing:0.14em;
  border:1px solid var(--io-line);padding:var(--vextr-space-1) var(--vextr-space-3);
}

.hero{
  position:relative;
  padding:var(--vextr-space-9) var(--vextr-page-x) var(--vextr-space-7);
  isolation:isolate;
  overflow:hidden;
}
/* ONE texture: photocopy grain on hero only (4–8%) */
.hero::before{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;z-index:0;
  opacity:0.06;
  mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E");
  background-size:180px 180px;
}
/* Discrete CRT/scanline detail — hero only, ambient */
.hero::after{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;z-index:1;
  background:repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    rgba(242,240,233,0.07) 2px,
    rgba(242,240,233,0.07) 3px
  );
  opacity:0.55;
}
.hero > *{position:relative;z-index:2}

@media (prefers-reduced-motion: reduce){
  .hero::before,
  .hero::after{display:none}
}

.hero-kicker{
  margin:0 0 var(--vextr-space-3);
  font-size:var(--io-label);text-transform:uppercase;letter-spacing:0.16em;opacity:0.7;
}
.hero-title{
  margin:0;font-family:var(--vextr-font-display);font-weight:700;
  font-size:clamp(3.25rem,11vw,7.25rem);line-height:0.82;
  letter-spacing:var(--vextr-tracking-display);text-transform:uppercase;max-width:12ch;
}
.hero-lead{margin:var(--vextr-space-5) 0 0;max-width:36rem;opacity:0.9}
.hero-lead code{
  font-family:var(--vextr-font-copy);
  font-size:0.95em;
  border-bottom:1px solid var(--io-line);
}
.hero-lead a{border-bottom:1px solid var(--io-line)}
.hero-lead a:hover{background:var(--io-paper);color:var(--io-olive)}

.lab{
  margin:0 var(--vextr-page-x) var(--vextr-space-8);
  border:1px solid var(--io-line);
  background:var(--io-panel);
}
.lab-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--vextr-space-4);
  padding:var(--vextr-space-3) var(--vextr-space-5);
  border-bottom:1px solid var(--io-line);
  font-size:var(--io-label);text-transform:uppercase;letter-spacing:0.12em;
}
.lab-title{
  font-family:var(--vextr-font-display);font-weight:700;
  font-size:1.15rem;letter-spacing:var(--vextr-tracking-tight);text-transform:uppercase;
}
.exp{
  display:grid;grid-template-columns:auto 1fr auto;gap:var(--vextr-space-4);align-items:center;
  min-height:3.5rem;padding:0 var(--vextr-space-5);
  border-bottom:1px solid var(--io-line);
  transition:background var(--vextr-duration) var(--vextr-ease),color var(--vextr-duration) var(--vextr-ease);
}
.exp:last-child{border-bottom:none}
.exp:hover{background:var(--io-paper);color:var(--io-olive)}
.exp[aria-disabled="true"]{opacity:0.55;pointer-events:none}
.exp-id{font-size:var(--io-label);letter-spacing:0.12em;opacity:0.7}
.exp-name{font-family:var(--vextr-font-display);font-weight:700;font-size:1.25rem;text-transform:uppercase}
.exp-meta{font-size:var(--io-label);text-transform:uppercase;letter-spacing:0.08em;opacity:0.75}
.exp-arrow{opacity:0.8}

.note{
  padding:0 var(--vextr-page-x) var(--vextr-space-6);
  max-width:40rem;opacity:0.75;font-size:var(--vextr-text-sm);
}

.section{padding:0 var(--vextr-page-x) var(--vextr-space-8)}
.section-head{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:var(--vextr-space-3);
  border-bottom:1px solid var(--io-line);padding-bottom:var(--vextr-space-2);
}
.section-title{
  margin:0;font-family:var(--vextr-font-display);font-weight:700;
  font-size:1.35rem;text-transform:uppercase;letter-spacing:var(--vextr-tracking-display);
}
.industries-note{margin:0;max-width:40rem;opacity:0.8;font-size:var(--vextr-text-sm)}
.industries-note a{border-bottom:1px solid var(--io-line)}
.industries-note a:hover{background:var(--io-paper);color:var(--io-olive)}

.cta{
  display:inline-flex;align-items:center;
  padding:var(--vextr-space-2) var(--vextr-space-4);
  border:1px solid var(--io-paper);
  font-size:var(--io-label);text-transform:uppercase;letter-spacing:0.08em;
  transition:background var(--vextr-duration) var(--vextr-ease),color var(--vextr-duration) var(--vextr-ease);
}
.cta:hover,.cta-fill{background:var(--io-paper);color:var(--io-olive)}

.footer{
  margin-top:auto;min-height:var(--vextr-footer-h);
  display:flex;align-items:center;justify-content:space-between;gap:var(--vextr-space-4);
  padding:var(--vextr-space-5) var(--vextr-page-x);
  border-top:1px solid var(--io-line);
  font-size:var(--io-label);text-transform:uppercase;letter-spacing:0.08em;
}
.footer-links{display:inline-flex;align-items:center;gap:var(--vextr-space-4);flex-wrap:wrap}
.footer-links a{opacity:0.85}
.footer-links a:hover{opacity:1;text-decoration:underline}
.footer-mark{display:inline-flex;align-items:center;gap:var(--vextr-space-2)}
.footer-mark img{width:14px;height:15px;display:block;filter:none}

@media (max-width:700px){
  .exp{grid-template-columns:1fr;gap:var(--vextr-space-2);padding:var(--vextr-space-4) var(--vextr-space-5)}
  .exp-arrow{display:none}
}