@font-face{font-family:"Barlow";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/Barlow-Regular.ttf) format("truetype")}
@font-face{font-family:"Barlow";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/Barlow-Medium.ttf) format("truetype")}
@font-face{font-family:"Barlow";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/Barlow-Bold.ttf) format("truetype")}
@font-face{font-family:"Barlow Condensed";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/BarlowCondensed-Regular.ttf) format("truetype")}
@font-face{font-family:"Barlow Condensed";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/BarlowCondensed-SemiBold.ttf) format("truetype")}
/* Industry — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */

:root {
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-accent: #5980a6;
  --color-accent-2: #728fab;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f5f5f8;
  --color-neutral-200: #e7e7ea;
  --color-neutral-300: #d4d4d7;
  --color-neutral-400: #b7b7ba;
  --color-neutral-500: #98989b;
  --color-neutral-600: #7a7a7d;
  --color-neutral-700: #5d5d60;
  --color-neutral-800: #424244;
  --color-neutral-900: #2b2b2d;

  --color-accent-100: #eef6ff;
  --color-accent-200: #d6ebff;
  --color-accent-300: #b5d9fd;
  --color-accent-400: #94bce3;
  --color-accent-500: #749dc4;
  --color-accent-600: #597ea3;
  --color-accent-700: #416180;
  --color-accent-800: #2c455d;
  --color-accent-900: #1d2d3d;

  --color-accent-2-100: #eef6ff;
  --color-accent-2-200: #d6ebff;
  --color-accent-2-300: #bdd8f2;
  --color-accent-2-400: #9ebbd8;
  --color-accent-2-500: #7e9cb8;
  --color-accent-2-600: #627d98;
  --color-accent-2-700: #486077;
  --color-accent-2-800: #314457;
  --color-accent-2-900: #1f2d3a;

  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Barlow", system-ui, sans-serif;

  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;
  --space-6: 20.4px;
  --space-8: 27.2px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.blueprint {
  position: relative;
  border: 1px solid var(--color-divider);
  border-radius: 0;
}
/* The overlay image treatments (halftone, duotone) clip their overlay
   (overflow:hidden); a blueprint wrapper draws its registration marks
   outside the box, so when both classes share a wrapper the frame must
   win. */
.blueprint.halftone, .blueprint.plate, .blueprint.duotone { overflow: visible; }
.blueprint > .corner {
  position: absolute; width: 11px; height: 11px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.blueprint > .corner::before, .blueprint > .corner::after {
  content: ""; position: absolute; background: currentColor;
}
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }

.duotone{position:relative;overflow:hidden}
.duotone::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--color-accent);mix-blend-mode:color}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — rules — */
.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
     the pair sits side by side in sign-up rows */
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: none;
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* — blueprint frame: components are wireframe objects (see .blueprint
     and .corner above) — square, transparent, hairline-bordered — */
.card, .btn, .input, .tag, .seg, .dialog { border-radius: 0; }
.card, .dialog { background: transparent; border: 1px solid var(--color-divider); }
.btn { border: 1px solid var(--color-divider); }
.btn-primary { border-color: var(--color-accent); }
.btn-ghost { border-color: transparent; }



html{scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased;color:var(--color-text)}
a{color:var(--color-accent-700)} a:hover{color:var(--color-accent)}
main{max-width:1240px;margin:0 auto;padding:0 20px}
section{scroll-margin-top:110px}
.sec{margin-bottom:120px}
h1,h2{letter-spacing:-.02em;line-height:1;margin:0}
h2.big{font-size:clamp(38px,4.6vw,60px)}
.lead{margin:0;max-width:420px;font-size:17px;color:var(--color-neutral-700);text-wrap:pretty}
.p{margin:0;font-size:17px;line-height:1.6;color:var(--color-neutral-800);text-wrap:pretty}
.head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:36px}
.pill{display:inline-block;align-self:flex-start;padding:6px 14px;border-radius:999px;background:var(--color-accent-100);color:var(--color-accent-800);font-size:13px}
.hdr{position:sticky;top:14px;z-index:30;padding:0 20px}
.nav2{max-width:1180px;margin:14px auto 0;display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding:10px 10px 10px 22px;border-radius:999px;background:rgba(255,255,255,.72);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 1px 0 rgba(255,255,255,.8) inset,var(--shadow-md);border:1px solid rgba(29,31,32,.06)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--color-text);margin-right:auto}
.brand i{width:26px;height:26px;border-radius:8px;background:linear-gradient(145deg,var(--color-accent-500),var(--color-accent-800));display:grid;place-items:center}
.brand i b{width:10px;height:10px;border-radius:3px;background:var(--color-bg)}
.brand span{font-family:var(--font-heading);font-weight:600;font-size:23px;letter-spacing:.04em}
.links{display:flex;gap:26px;flex-wrap:wrap;font-size:15px}
.links a{color:var(--color-text);text-decoration:none} .links a:hover{color:var(--color-accent-600)}
.rb{border-radius:999px!important}
.btn-primary.rb{color:var(--color-bg)}
.cta{padding:14px 26px;font-size:17px}
.shadowbtn{box-shadow:0 8px 24px color-mix(in srgb,var(--color-accent) 35%,transparent)}
.hero{display:flex;flex-wrap:wrap;align-items:center;gap:40px;padding:64px 0 24px}
.hero-l{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.hero h1{font-size:clamp(42px,5.2vw,72px);line-height:.95;text-wrap:balance}
.badge{display:inline-flex;align-items:center;gap:10px;padding:7px 16px 7px 12px;border-radius:999px;background:rgba(255,255,255,.8);box-shadow:var(--shadow-sm);font-size:14px;color:var(--color-neutral-800)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--color-accent);animation:pulseDot 2s ease-in-out infinite}
.dot.g{background:#2bb24c;width:7px;height:7px}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.35}}
.stage{position:relative;border-radius:28px;overflow:hidden;background:radial-gradient(ellipse 70% 80% at 50% 30%,#fff 0%,var(--color-bg) 75%);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 30px 70px -40px rgba(29,45,61,.35);border:1px solid rgba(29,31,32,.05)}
.stage canvas{display:block;width:100%}
.glass{background:rgba(255,255,255,.75);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:var(--shadow-md)}
.live{position:absolute;left:16px;top:16px;display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;font-size:12px}
.stats{position:absolute;left:16px;bottom:16px;display:flex;gap:2px;padding:4px;border-radius:16px}
.stats div{padding:6px 13px} .stats small{display:block;font-size:11px;color:var(--color-neutral-700)}
.stats b{font-family:var(--font-heading);font-weight:600;font-size:22px;line-height:1.1}
.stats hr{width:1px;height:auto;border:0;background:var(--color-divider);margin:6px 0;padding:0}
.logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 44px;padding:36px 0 100px}
.logos span{font-family:var(--font-heading);font-weight:600;font-size:24px;color:var(--color-neutral-800)}
.logos span:first-child{font:400 14px var(--font-body);color:var(--color-neutral-700)}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr));gap:20px}
.card2{display:flex;flex-direction:column;gap:16px;padding:34px;border-radius:28px;background:#fff;box-shadow:var(--shadow-sm);border:1px solid rgba(29,31,32,.05)}
.hov{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s} .hov:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.card2 h3{font-size:32px;margin:6px 0 0;letter-spacing:-.01em;line-height:1.05;text-wrap:balance}
.card2 p{margin:0;font-size:16px;line-height:1.6;color:var(--color-neutral-800);text-wrap:pretty}
.num{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--color-accent-100);color:var(--color-accent-700);font-family:var(--font-heading);font-weight:600;font-size:22px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:8px}
.chips span{padding:5px 12px;border-radius:999px;background:var(--color-bg);font-size:13px}
.split{display:flex;flex-wrap:wrap;align-items:center;gap:40px}
.split>.stage{flex:1.2 1 440px;min-width:0}
.split>.txt{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:18px}
.split h2{font-size:clamp(36px,4.2vw,54px);text-wrap:balance}
.phases{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.phase{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.6);border:1px solid rgba(29,31,32,.06);font-size:15px;color:var(--color-neutral-700);transition:all .3s}
.phase b{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;background:var(--color-bg);flex:none}
.phase.on{background:var(--color-accent-900);color:#fff;border-color:var(--color-accent-900)}
.phase.on b{background:var(--color-accent-400);color:var(--color-accent-900)}
.bar{height:3px;border-radius:2px;background:rgba(29,31,32,.1);overflow:hidden;margin-top:4px}.bar i{display:block;height:100%;width:0;background:var(--color-accent)}
.big-card{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:36px;padding:clamp(28px,4vw,48px);border-radius:32px;background:#fff;box-shadow:var(--shadow-sm);border:1px solid rgba(29,31,32,.05)}
.big-card>div:first-child{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:16px}
.big-card h3{font-size:clamp(30px,3.2vw,42px);margin:0;letter-spacing:-.015em;line-height:1.05;text-wrap:balance}
.check{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:4px;padding:22px;border-radius:24px;background:var(--color-bg)}
.check>span{font-size:13px;color:var(--color-neutral-700);padding:4px 8px 10px}
.check div{display:flex;align-items:center;gap:14px;padding:11px 8px;border-bottom:1px solid var(--color-divider);font-size:16px}
.check div:last-child{border:0}
.check b{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--color-accent);color:#fff;font-size:13px}
.dark{background:radial-gradient(ellipse 90% 80% at 0% 0%,#2c4660 0%,var(--color-accent-900) 70%)!important;color:#fff;border:0!important;box-shadow:var(--shadow-md)}
.dark h3,.dark h2{color:#fff}.dark p{color:var(--color-accent-200)}
.dark .pill{background:rgba(255,255,255,.1);color:var(--color-accent-200)}
.demo{border-radius:36px;background:radial-gradient(ellipse 80% 60% at 30% 0%,#26405a 0%,var(--color-accent-900) 60%);color:var(--color-bg);padding:clamp(24px,4vw,52px);box-shadow:0 40px 90px -50px rgba(29,45,61,.7)}
.demo h2{color:#fff}
.demo .tagx{align-self:flex-start;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);font-size:13px;color:var(--color-accent-300)}
.demo-row{display:flex;flex-wrap:wrap;gap:20px;align-items:stretch}
.sim{flex:2.2 1 480px;min-width:0;position:relative;border-radius:24px;overflow:hidden;background:radial-gradient(ellipse 70% 70% at 50% 35%,#2c4660 0%,#1d2d3d 80%);border:1px solid rgba(255,255,255,.08)}
.sim canvas{display:block;width:100%;height:100%;min-height:400px;aspect-ratio:16/10;touch-action:pan-y}
.chipd{position:absolute;padding:7px 14px;border-radius:999px;background:rgba(10,20,30,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:13px;color:var(--color-accent-200)}
.ctl{flex:1 1 290px;min-width:0;display:flex;flex-direction:column;gap:18px;padding:22px;border-radius:24px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.status{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:16px;transition:background .3s}
.status i{width:12px;height:12px;border-radius:50%;flex:none}
.status small{display:block;font-size:12px;color:var(--color-accent-300)}
.status b{font-family:var(--font-heading);font-weight:600;font-size:26px;line-height:1.1;color:#fff}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.two .btn{border-radius:14px;padding:16px;font-size:19px}
.btn.start{background:var(--color-accent-400);border-color:var(--color-accent-400);color:var(--color-accent-900)}.btn.start:hover{background:var(--color-accent-300)}
.btn.stop{color:#fff;border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.04)}.btn.stop:hover{background:rgba(255,255,255,.1)}
.estop-row{display:flex;align-items:center;gap:16px;padding:12px 14px;border-radius:16px;background:rgba(0,0,0,.18)}
.estop{flex:none;width:76px;height:76px;border-radius:50%;border:none;cursor:pointer;padding:9px;background:#f2c218;box-shadow:0 3px 0 #b8900d,0 8px 18px rgba(0,0,0,.35)}
.estop span{display:block;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff6b5c,#c8231b 60%,#8f150f);box-shadow:inset 0 -4px 8px rgba(0,0,0,.35),0 3px 6px rgba(0,0,0,.3);transition:transform .15s,box-shadow .15s}
.estop.on span{transform:scale(.9);box-shadow:inset 0 3px 8px rgba(0,0,0,.5)}
.estop-row b{display:block;font-family:var(--font-heading);font-weight:600;font-size:21px;color:#fff}
.estop-row small{font-size:13px;color:var(--color-accent-300)}
.lbl{display:flex;justify-content:space-between;font-size:13px;color:var(--color-accent-200)}.lbl b{color:#fff;font-weight:500}
input[type=range]{width:100%;accent-color:var(--color-accent-400)}
.seg2{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:14px;background:rgba(0,0,0,.2)}
.seg2 button{border:none;cursor:pointer;padding:9px;border-radius:10px;font:inherit;font-size:14px;background:transparent;color:var(--color-accent-200)}
.seg2 button.on{background:var(--color-accent-400);color:var(--color-accent-900)}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:auto}
.kpis div{padding:12px;border-radius:14px;background:rgba(255,255,255,.05)}.kpis small{display:block;font-size:12px;color:var(--color-accent-300)}.kpis b{font-family:var(--font-heading);font-weight:600;font-size:26px;color:#fff}
.plc{margin-top:20px;border-radius:24px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.08);overflow:hidden}
.plc-h{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 22px;border-bottom:1px solid rgba(255,255,255,.08);font-size:13px}
.plc-h span:first-child{color:#fff;font-weight:500}.plc-h span:last-child{display:inline-flex;align-items:center;gap:8px;color:var(--color-accent-300)}
.plc-h i{width:7px;height:7px;border-radius:50%;background:#2bd45a;animation:pulseDot 1.2s ease-in-out infinite}
.plc-b{overflow-x:auto}.plc-b>div{min-width:780px;padding:6px 22px 10px}
.rung{display:grid;grid-template-columns:180px minmax(0,1fr);gap:20px;align-items:center;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.rung .n{font:600 11px ui-monospace,Menlo,monospace;color:var(--color-accent-400);display:block;margin-bottom:3px}
.rung .t{font-size:13px;line-height:1.35;color:var(--color-accent-100)}
.row{display:flex;align-items:center;min-width:0}
.rail{width:3px;align-self:stretch;border-radius:2px;background:var(--color-accent-400)}
.wire{flex:1 1 20px;min-width:14px;height:3px;border-radius:2px}
.grp{display:flex;flex-direction:column;gap:8px;padding:0 6px;border-left:2px solid transparent;border-right:2px solid transparent;border-radius:6px}
.ct{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:80px}
.ct .tg{font:600 10px ui-monospace,Menlo,monospace;color:var(--color-accent-300)}
.ct .sy{font:700 15px/1.2 ui-monospace,Menlo,monospace;padding:2px 8px;border-radius:6px}
.ct .lb{font-size:11px;white-space:nowrap;color:var(--color-accent-200)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:20px}
.step{display:flex;flex-direction:column;gap:12px;padding:30px;border-radius:24px;background:rgba(255,255,255,.6);border:1px solid rgba(29,31,32,.06)}
.step>b{font-family:var(--font-heading);font-weight:600;font-size:56px;line-height:1;background:linear-gradient(180deg,var(--color-accent-500),var(--color-accent-800));-webkit-background-clip:text;background-clip:text;color:transparent}
.step h4{font-size:25px;margin:0}.step p{margin:0;font-size:15px;line-height:1.6;color:var(--color-neutral-800)}
.about{display:flex;flex-wrap:wrap;gap:56px;align-items:center}
.about>div:first-child{flex:1 1 400px;min-width:0;display:flex;flex-direction:column;gap:20px}
.about p{font-size:18px;line-height:1.6;margin:0;text-wrap:pretty}
.tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}.tags span{padding:10px 18px;border-radius:999px;background:#fff;box-shadow:var(--shadow-sm);font-size:15px}
.photo{flex:1 1 400px;min-width:0;aspect-ratio:5/4;border-radius:32px;display:grid;place-items:center;background:repeating-linear-gradient(135deg,var(--color-accent-100) 0 14px,var(--color-neutral-100) 14px 28px);box-shadow:var(--shadow-md)}
.photo span{font:500 12px ui-monospace,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--color-neutral-700);background:rgba(255,255,255,.85);padding:8px 14px;border-radius:999px}
.contact{display:flex;flex-wrap:wrap;border-radius:36px;overflow:hidden;background:#fff;box-shadow:var(--shadow-lg);margin-bottom:64px}
.contact>.dark{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:18px;padding:clamp(28px,4vw,52px);border-radius:0!important}
.contact h2{font-size:clamp(36px,4vw,54px);text-wrap:balance}.contact .dark p{font-size:17px;line-height:1.6;margin:0}
.contact>.fw{flex:1.3 1 420px;min-width:0;padding:clamp(28px,4vw,52px)}
form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px}
form label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--color-neutral-700)}
form input:not([type=checkbox]),form textarea,form select{font:inherit;font-size:16px;color:var(--color-text);padding:13px 16px;border-radius:14px;border:1px solid transparent;background:var(--color-bg);outline:none}
form input:focus,form textarea:focus,form select:focus{border-color:var(--color-accent);background:#fff}
form select{appearance:none;cursor:pointer;padding-right:40px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235d5d60' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
form textarea{min-height:120px;resize:vertical}
.full{grid-column:1/-1}.tp{display:flex;gap:8px;flex-wrap:wrap}
.tp button{border:1px solid var(--color-divider);cursor:pointer;padding:9px 18px;border-radius:999px;font:inherit;font-size:15px;background:transparent;color:var(--color-text);transition:all .2s}
.tp button.on{background:var(--color-accent-900);color:#fff;border-color:var(--color-accent-900)}
.hp{position:absolute;left:-9999px}
.thanks{display:none;flex-direction:column;gap:12px;align-items:flex-start;padding:28px 0}
.thanks h3{font-size:36px;margin:0}.thanks .ok{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--color-accent-100);color:var(--color-accent-700);font-size:26px}
footer{max-width:1240px;margin:0 auto;padding:12px 20px 24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--color-neutral-700)}
footer b{font-family:var(--font-heading);font-weight:600;letter-spacing:.04em;color:var(--color-text)}

.legal{max-width:760px;margin:0 auto;padding:60px 20px 80px}.legal h1{font-size:clamp(40px,5vw,60px);margin-bottom:24px}.legal h2{font-size:30px;margin:36px 0 10px}.legal p,.legal li{font-size:17px;line-height:1.6;color:var(--color-neutral-800)}.legal .todo{background:#fff3cd;padding:0 4px}
footer .fl{display:flex;gap:18px;flex-wrap:wrap}footer a{color:var(--color-neutral-700)}footer a:hover{color:var(--color-accent-600)}

.btn{white-space:nowrap}
.nav2{flex-wrap:nowrap}
.brand{flex:none}
.links a[aria-current]{color:var(--color-accent-600);font-weight:600}
@media (max-width:1060px){.links{gap:18px}}
.links{flex-wrap:nowrap;white-space:nowrap}
@media (max-width:640px){.nav2{flex-wrap:wrap}.links{order:3;flex-basis:100%;justify-content:center;gap:22px;padding-top:4px}}
@media (max-width:520px){.nav2{padding:8px 8px 8px 16px;gap:12px}.cta{padding:12px 20px;font-size:16px;flex:1 1 auto}.hero{padding-top:36px}}

.brand img{height:26px;width:auto;display:block}
@media (max-width:520px){.brand img{height:22px}}

.hero2{position:relative;margin-top:-78px;padding:150px 20px 0;background:var(--color-accent-900);color:#fff;overflow:hidden;isolation:isolate}
.hero2::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 90% 80% at 70% 40%,#000 20%,transparent 80%);mask-image:radial-gradient(ellipse 90% 80% at 70% 40%,#000 20%,transparent 80%);animation:gridMove 12s linear infinite}
.hero2::after{content:"";position:absolute;left:0;right:0;top:-200px;height:200px;z-index:-1;background:linear-gradient(transparent,rgba(148,188,227,.14),transparent);animation:scan 7s linear infinite}
@keyframes gridMove{to{background-position:64px 64px}}
@keyframes scan{to{transform:translateY(900px)}}
.h2in{max-width:1240px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:48px;padding-bottom:72px}
.h2l{flex:1 1 440px;min-width:0;display:flex;flex-direction:column;gap:26px;align-items:flex-start}
.eyebrow{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 12px;border:1px solid rgba(255,255,255,.25);font-size:14px;color:var(--color-accent-100);opacity:0;animation:fadeUp .7s .05s forwards}
.h2t{font-size:clamp(46px,6.6vw,100px);line-height:.92;text-transform:uppercase;letter-spacing:-.005em;font-weight:600;text-wrap:balance}
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em}
.w>i{display:inline-block;font-style:normal;transform:translateY(115%);animation:rise .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*.08s + .15s)}
.w.acc{color:var(--color-accent-300)}
@keyframes rise{to{transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rot{display:flex;align-items:center;gap:14px;font-family:var(--font-heading);font-weight:600;font-size:clamp(22px,2.4vw,32px);text-transform:uppercase;letter-spacing:.02em;opacity:0;animation:fadeUp .7s 1.1s forwards}
.rot>span{color:var(--color-accent-200)}
.rotw{position:relative;height:1.3em;min-width:12em;overflow:hidden;border-bottom:2px solid var(--color-accent-300)}
.rotw b{position:absolute;left:0;top:0;opacity:0;white-space:nowrap;animation:rotate 12s infinite}
.rotw b:nth-child(2){animation-delay:3s}.rotw b:nth-child(3){animation-delay:6s}.rotw b:nth-child(4){animation-delay:9s}
@keyframes rotate{0%{opacity:0;transform:translateY(100%)}4%,22%{opacity:1;transform:none}27%,100%{opacity:0;transform:translateY(-100%)}}
.h2p{margin:0;max-width:520px;font-size:clamp(16px,1.4vw,19px);line-height:1.6;color:var(--color-accent-100);opacity:0;animation:fadeUp .7s 1.3s forwards}
.h2b{display:flex;gap:12px;flex-wrap:wrap;opacity:0;animation:fadeUp .7s 1.5s forwards}
.hb1{background:#fff;color:var(--color-accent-900);border:1px solid #fff}.hb1:hover{background:var(--color-accent-100);color:var(--color-accent-900)}
.hb2{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.6)}.hb2:hover{background:rgba(255,255,255,.12);color:#fff}
.hero2 .stage{background:#22364a;border:1px solid rgba(255,255,255,.18);border-radius:0;box-shadow:0 40px 80px -40px rgba(0,0,0,.6);opacity:0;animation:fadeUp .9s .5s forwards}
.hero2 .glass{background:rgba(29,45,61,.78);color:#fff;border-radius:0;box-shadow:none;border:1px solid rgba(255,255,255,.16)}
.hero2 .stats small{color:var(--color-accent-200)}.hero2 .stats hr{background:rgba(255,255,255,.2)}
.mk{position:absolute;z-index:2;width:16px;height:16px;border:0 solid #fff;pointer-events:none}
.mk.tl{top:8px;left:8px;border-width:2px 0 0 2px}.mk.tr{top:8px;right:8px;border-width:2px 2px 0 0}.mk.bl{bottom:8px;left:8px;border-width:0 0 2px 2px}.mk.br{bottom:8px;right:8px;border-width:0 2px 2px 0}
.mq{display:flex;overflow:hidden;margin:0 -20px;border-top:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.14)}
.mq>div{display:flex;flex:none;align-items:center;animation:mq 30s linear infinite}
.mq span{padding:22px 28px;font-family:var(--font-heading);font-weight:600;font-size:26px;text-transform:uppercase;letter-spacing:.03em;color:var(--color-accent-200);white-space:nowrap}
.mq span::after{content:"";display:inline-block;width:8px;height:8px;margin-left:56px;background:var(--color-accent-400)}
@keyframes mq{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.hero2::before,.hero2::after,.mq>div,.rotw b{animation:none}.w>i,.eyebrow,.rot,.h2p,.h2b,.hero2 .stage{animation:none;opacity:1;transform:none}.rotw b:first-child{opacity:1}}
@media (max-width:520px){.hero2{padding-top:130px}.rot{flex-wrap:wrap;gap:6px}}

.eyebrow,.hero2 .live,.hero2 .stats small{white-space:nowrap}
.nav2{background:rgba(255,255,255,.94)}

.hero2{background:linear-gradient(160deg,var(--color-accent-700),var(--color-accent-800))}
.hero2::before{animation:none}
.hero2::after{display:none}
.mq>div{animation-duration:70s}
.w>i{animation-duration:.7s;animation-delay:calc(var(--i)*.05s + .1s)}
.hero2 .stage{background:var(--color-accent-900)}

.hero2{background:transparent;color:var(--color-text)}
.hero2::before{background-image:linear-gradient(rgba(29,31,32,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(29,31,32,.05) 1px,transparent 1px)}
.eyebrow{border-color:rgba(29,31,32,.2);color:var(--color-neutral-800)}
.w.acc{color:var(--color-accent-600)}
.rot>span{color:var(--color-neutral-700)}
.rotw{border-bottom-color:var(--color-accent-500)}
.h2p{color:var(--color-neutral-800)}
.hb1{background:var(--color-accent-700);color:#fff;border-color:var(--color-accent-700)}.hb1:hover{background:var(--color-accent-800);color:#fff}
.hb2{background:rgba(255,255,255,.6);color:var(--color-text);border-color:rgba(29,31,32,.35)}.hb2:hover{background:#fff;color:var(--color-text)}
.hero2 .stage{background:radial-gradient(ellipse 70% 80% at 50% 30%,#fff 0%,var(--color-bg) 75%);border:1px solid rgba(29,31,32,.06);border-radius:28px;box-shadow:0 30px 70px -40px rgba(29,45,61,.35)}
.hero2 .glass{background:rgba(255,255,255,.78);color:var(--color-text);border:0;box-shadow:var(--shadow-md)}
.hero2 .live{border-radius:999px}.hero2 .stats{border-radius:16px}
.hero2 .stats small{color:var(--color-neutral-700)}.hero2 .stats hr{background:var(--color-divider)}
.mk{display:none}
.mq{border-top:1px solid rgba(29,31,32,.1);background:transparent}
.mq span{color:var(--color-neutral-800)}.mq span::after{display:none}.mq span{padding:22px 36px}

.gain{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:15px;line-height:1.45;color:var(--color-neutral-800)}
.gain li{display:flex;gap:10px}
.gain li::before{content:"✓";flex:none;color:var(--color-accent-700);font-weight:700}

@media (max-width:640px){
 main{padding:0 16px}
 .sec{margin-bottom:64px}
 #ydelser{margin-top:56px!important}
 .head{margin-bottom:20px;gap:10px}
 h2.big{font-size:34px}
 .lead{font-size:16px;line-height:1.45}
 .grid3,.steps{gap:12px}
 .card2{padding:20px;gap:10px;border-radius:20px}
 .card2 h3{font-size:25px;margin:0}
 .card2 .num{width:36px;height:36px;border-radius:11px;font-size:16px}
 .card2 p{font-size:15px;line-height:1.5}
 .card2 .gain,.card2 .chips{display:none}
 .card2.open .gain{display:flex}.card2.open .chips{display:flex}
 .card2 .more{align-self:flex-start;background:none;border:0;padding:6px 0;font:600 15px var(--font-body);color:var(--color-accent-700);cursor:pointer;display:flex;gap:6px;align-items:center}
 .card2 .more::after{content:"+";font-size:20px;line-height:1}
 .card2.open .more::after{content:"–"}
 .hov:hover{transform:none}
 .step{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:4px;padding:18px;border-radius:18px;align-items:start}
 .step>b{font-size:34px;grid-row:1/3}
 .step h4{font-size:21px}.step p{font-size:14px;line-height:1.45;grid-column:2}
 .big-card{padding:20px;gap:20px;border-radius:22px}
 .about{gap:24px}.about p{font-size:16px;line-height:1.5}
 .contact{border-radius:22px;margin-bottom:40px}
 .contact .dark p{font-size:15px}
 .contact>.dark,.contact>.fw{padding:22px}
 .contact h2{font-size:30px}
 .h2in{gap:28px;padding-bottom:40px}.h2l{gap:18px}
 .h2t{font-size:44px}
 .h2p{font-size:15px;line-height:1.5}
 .mq span{font-size:20px;padding:16px 22px}
 footer .fl{flex-direction:column;gap:6px;align-items:flex-start}
}

.stage{position:relative}
.why{position:absolute;inset:auto 14px 14px 14px;z-index:3;padding:18px 20px;border-radius:20px;background:rgba(255,255,255,.93);backdrop-filter:blur(8px);box-shadow:var(--shadow-lg);opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.2,1)}
.why.show{opacity:1;transform:none}
.why h3{margin:0 0 10px;font-size:26px;line-height:1.05}
.why ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px 18px}
.why li{display:flex;flex-direction:column;gap:2px;font-size:13px;line-height:1.35;color:var(--color-neutral-800)}
.why li b{font-family:var(--font-heading);font-weight:600;font-size:17px;color:var(--color-accent-700)}
.why p{margin:12px 0 0;font-size:14px;font-weight:600}
@media (max-width:900px){.why ul{grid-template-columns:repeat(2,1fr)}.why li:nth-child(n+5){display:none}}
@media (max-width:640px){.why{inset:auto 8px 8px 8px;padding:12px 14px;border-radius:14px}.why h3{font-size:20px;margin-bottom:6px}.why li{font-size:12px}.why li b{font-size:15px}.why p{display:none}}