/* Ported from handoff-2026/assets/vnce.css (2026-09-22). The Google Fonts @import is
   dropped: Public Sans and JetBrains Mono are self-hosted through theme.json. */
/* Public Sans is declared site-wide in theme.json (owner decision 2026-09-22:
   the whole site runs the new pages' typeface), so no @font-face here. */

/* Visual No Code Era – ljus lanseringssida för Visual Page Builder 2.0.
   Laddas efter styles.css + base-2026.css (header/footer i semilight). Allt sidinnehåll är prefixat .vn-/.vnce. */
.vnce{--ink:#1D1D1D;--ink-2:#4A4A4A;--mute:#7A7E83;--line:#E3E6E8;--paper:#F8F8F8;--blue:#007BFF;--blue-h:#0069D9;--violet:#6A3BFF;--font:"roc-grotesk","Public Sans",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace;--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body.vnce{background:#fff!important;color:var(--ink)}
body.vnce .mh-theme{display:none!important}
main.vnce{font-family:var(--font);color:var(--ink);background:#fff;overflow-x:clip;position:relative;isolation:isolate;--gridc:rgba(29,29,29,.05)}
/* rutnät som tonar ut efter ~2,5 skärmar, fin grain över hela sidan */
main.vnce::after{content:"";position:absolute;left:0;right:0;top:0;height:min(3000px,260vh);z-index:-1;pointer-events:none;background-image:linear-gradient(var(--gridc) 1px,transparent 1px),linear-gradient(90deg,var(--gridc) 1px,transparent 1px);background-size:88px 88px;-webkit-mask-image:linear-gradient(180deg,#000 45%,transparent 100%);mask-image:linear-gradient(180deg,#000 45%,transparent 100%)}
body.vnce::after{content:"";position:fixed;inset:0;z-index:9990;pointer-events:none;background:var(--grain);background-size:240px;opacity:.06;mix-blend-mode:soft-light}
body.vnce{--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* delade etiketter */
.vnce .eb{font:500 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--blue);margin-bottom:18px}
.vn-h2.sm{font-size:clamp(34px,4vw,60px)}
.vn-split .lead{margin:0}
.vn-actions.mt{margin-top:36px}
:where(main.vnce) :where(h1,h2,h3,h4){margin:0;color:var(--ink)}
.vnce :where(h1,h2,h3,h4){font-family:var(--font);font-weight:600}
:where(main.vnce p){margin:0}
main.vnce a{color:var(--blue)}main.vnce a:hover{color:var(--blue-h)}
.vw{max-width:1320px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.vn-grain::before{content:"";position:absolute;inset:0;background:var(--grain);background-size:240px;opacity:.55;mix-blend-mode:soft-light;pointer-events:none;z-index:2}
/* knappar */
.vbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 24px;border-radius:5px;font:600 16px/1 var(--font);text-decoration:none;transition:background .18s,color .18s;white-space:nowrap}
.vbtn.p{background:var(--blue);color:#fff}.vbtn.p:hover{background:var(--blue-h);color:#fff}
.vbtn.s{background:#F0F0F0;color:var(--ink)}.vbtn.s:hover{background:#E4E4E4;color:var(--ink)}
.vbtn.w{background:#fff;color:var(--ink)}.vbtn.w:hover{background:#F0F0F0;color:var(--ink)}
.vbtn.o{border:1px solid rgba(248,248,248,.28);color:#F8F8F8}.vbtn.o:hover{background:rgba(248,248,248,.08);color:#fff}
.vn-actions{display:flex;gap:12px;flex-wrap:wrap}
/* ---- hero ---- */
.vn-hero{padding-top:clamp(150px,16vw,220px)}
@media(max-width:900px){.vn-hero{padding-top:130px}}
.vn-hero-top{display:flex;flex-direction:column;align-items:center;gap:28px}
.vn-pill{animation:vn-rise .9s cubic-bezier(.2,.8,.2,1) both;display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 18px 0 14px;border:1px solid var(--line);border-radius:999px;font:500 15px/1 var(--font);color:var(--ink);white-space:nowrap}
.vn-pill svg{width:18px;height:18px;color:var(--blue)}
.vn-h1{text-align:center;font-size:clamp(50px,8.4vw,132px);font-weight:600;letter-spacing:-.05em;line-height:.94;text-wrap:balance}
.vn-h1 .w{display:inline-block;animation:vn-rise .9s cubic-bezier(.2,.8,.2,1) both}
.vn-h1 .w:nth-child(2){animation-delay:.1s}.vn-h1 .w:nth-child(3){animation-delay:.2s}.vn-h1 .w:nth-child(4){animation-delay:.3s}
@keyframes vn-rise{from{opacity:0;transform:translateY(.35em) skewY(2deg)}}
.vn-h1 .g{background:linear-gradient(90deg,#BDB2FF 0%,#7C5CFF 30%,#007BFF 50%,#7C5CFF 70%,#BDB2FF 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:vn-shimmer 6s linear infinite}
@keyframes vn-shimmer{to{background-position:-200% 0}}
.vn-hero-sub{margin:26px auto 0;text-align:center;font-size:clamp(17px,1.35vw,21px);line-height:1.5;color:var(--ink-2);max-width:56ch;animation:vn-rise .9s .45s cubic-bezier(.2,.8,.2,1) both}
.vn-hero .vn-actions{justify-content:center;margin-top:32px;animation:vn-rise .9s .55s cubic-bezier(.2,.8,.2,1) both}
/* jätteordmärke i heron */
.vn-heroword{position:relative;margin-top:clamp(40px,6vw,90px);height:clamp(90px,17vw,300px);overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 50%,transparent 100%);mask-image:linear-gradient(180deg,#000 50%,transparent 100%)}
.vn-heroword .trk{position:absolute;left:0;bottom:-.14em;display:flex;align-items:baseline;gap:.35em;width:max-content;padding-left:.35em;font-size:clamp(80px,16vw,280px);font-weight:600;letter-spacing:-.055em;line-height:1;white-space:nowrap;color:var(--ink);animation:vn-marq 46s linear infinite}
.vn-heroword span.o{color:transparent;-webkit-text-stroke:1.5px rgba(29,29,29,.8)}
.vn-heroword i{width:.18em;height:.18em;border-radius:50%;background:var(--blue);flex:none;align-self:center}
.vn-hero>.glow{display:none}
/* marquee */
.vn-marq{margin-top:clamp(56px,7vw,100px);overflow:hidden;border-block:1px solid var(--line);padding:clamp(14px,1.6vw,22px) 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.vn-marq .trk{display:flex;align-items:center;gap:clamp(24px,3vw,48px);width:max-content;animation:vn-marq 28s linear infinite}
.vn-marq span{font-size:clamp(34px,5vw,80px);font-weight:600;letter-spacing:-.045em;line-height:1;white-space:nowrap;color:var(--ink)}
.vn-marq span.g{color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.vn-marq span.b{color:var(--blue)}
.vn-marq i{width:10px;height:10px;border-radius:50%;background:var(--blue);flex:none}
@keyframes vn-marq{to{transform:translateX(-50%)}}
.vn-marq:hover .trk{animation-play-state:paused}
/* gradientpanel */
.vn-gp{position:relative;margin-top:clamp(56px,7vw,100px);border-radius:12px;overflow:hidden;min-height:clamp(480px,56vw,700px);background:#2A5CF6;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:clamp(40px,6vw,80px) 24px 0}
.vn-gp .bands{position:absolute;inset:-12% -30%;z-index:0;filter:blur(28px);background:linear-gradient(90deg,#2C5BFF 0 18%,#9B8CFF 21% 27%,#4A78FF 30% 43%,#D3C4F4 45% 51%,#3F6CFF 53% 63%,#8AA3FF 65% 69%,#2A5AF7 71% 100%);animation:vn-bands 22s ease-in-out infinite alternate}
@keyframes vn-bands{to{transform:translateX(12%)}}
.vn-gp .glow{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 40% 55% at 34% 42%,rgba(255,176,225,.7),transparent 70%),radial-gradient(ellipse 50% 40% at 70% 90%,rgba(0,60,255,.5),transparent 70%)}
html main.vnce .vn-gp h2{position:relative;z-index:3;color:#fff;text-align:center;font-size:clamp(36px,5.2vw,76px);font-weight:600;letter-spacing:-.04em;line-height:1;text-wrap:balance}
.vn-gp .sub{position:relative;z-index:3;color:rgba(255,255,255,.86);text-align:center;font-size:clamp(15px,1.2vw,18px);margin-top:18px;max-width:48ch}
.vn-prompt{position:relative;z-index:3;width:min(720px,100%);margin-top:clamp(40px,5vw,72px);margin-bottom:-56px;background:#2B2E38;border-radius:10px 10px 0 0;padding:26px 28px 70px;box-shadow:0 30px 80px rgba(20,20,60,.35);color:#fff;font-size:clamp(15px,1.25vw,19px);line-height:1.5}
.vn-prompt .ph{color:#9AA0AE}
.vn-prompt .cur{display:inline-block;width:2px;height:1.05em;background:#fff;vertical-align:-.18em;margin-left:2px;animation:vn-blink 1s steps(1) infinite}
.vn-prompt .go{position:absolute;right:20px;bottom:18px;height:38px;padding:0 16px;border-radius:5px;background:var(--blue);color:#fff;font:600 14px/38px var(--font)}
@keyframes vn-blink{50%{opacity:0}}
/* ---- två kolumner + duo ---- */
.vn-two{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,5vw,90px);align-items:start;padding-top:clamp(96px,13.2vw,192px)}
.vn-h2{font-size:clamp(38px,5vw,76px);font-weight:600;letter-spacing:-.045em;line-height:.98;text-wrap:balance}
.vn-two p{font-size:clamp(16px,1.3vw,20px);line-height:1.5;color:var(--ink-2);max-width:46ch;padding-top:.5em}
.vn-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px);margin-top:clamp(40px,5vw,72px)}
.vn-pane{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;isolation:isolate}
/* glasfönster i 3D */
.vn-pane.glass{background:linear-gradient(205deg,#2F4BFF 0%,#8B7BFF 28%,#F3F1FF 55%,#E9E7FF 100%)}
.vn-pane.glass .fog{position:absolute;inset:-10%;filter:blur(40px);background:radial-gradient(circle at 12% 82%,rgba(255,110,140,.85),transparent 35%),radial-gradient(circle at 92% 18%,rgba(40,60,255,.9),transparent 40%),radial-gradient(circle at 55% 50%,rgba(255,255,255,.8),transparent 45%)}
.vn-scene{position:absolute;inset:0;perspective:1100px;perspective-origin:20% 50%;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.8,.2,1);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.vn-win{position:absolute;top:50%;left:var(--x);width:var(--w);height:var(--h);transform:translateY(-50%) rotateY(-34deg);transform-origin:left center;border-radius:5px;overflow:hidden;box-shadow:0 24px 60px rgba(30,30,120,.28),0 0 0 1px rgba(255,255,255,.35) inset;animation:vn-drift var(--d,7s) ease-in-out infinite alternate;animation-delay:var(--dl,0s)}
@keyframes vn-drift{to{transform:translateY(calc(-50% - 10px)) rotateY(-34deg)}}
.vn-win.b{background:linear-gradient(180deg,#2E3BF0,#1B27B8)}
.vn-win.c{background:linear-gradient(180deg,#FF6E8E,#FF4F73)}
.vn-win.gl{background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.4));backdrop-filter:blur(6px)}
.vn-win.far{filter:blur(7px);opacity:.95}
.vn-win .tb{height:14%;display:flex;align-items:center;gap:6%;padding-left:6%}
.vn-win .tb i{width:6%;aspect-ratio:1;border-radius:50%;background:#3ED28A}.vn-win .tb i:nth-child(2){background:#3AB4D8}.vn-win .tb i:nth-child(3){background:#5C6BFF}
.vn-win.c .tb i,.vn-win.b .tb i{background:rgba(255,255,255,.7)}
.vn-win .ui{position:absolute;left:8%;right:8%;top:22%;bottom:8%;display:grid;grid-template-columns:1fr 2fr;gap:6%}
.vn-win .ui i{display:block;border-radius:3px;background:rgba(255,255,255,.35)}
.vn-win .ui .pic{background:linear-gradient(135deg,rgba(255,255,255,.7),rgba(120,120,255,.5))}
.vn-win.gl .ui i{background:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(255,255,255,.7) inset}
/* mörk panel med sparkle + kommandopalett */
.vn-pane.dark{background:#0E0E14;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(24px,4vw,44px)}
.vn-pane.dark .bands{position:absolute;inset:-12%;filter:blur(34px);background:linear-gradient(90deg,#0E0E14 0 28%,#5B3FD8 36% 42%,#141428 46% 58%,#1E5CFF 60% 66%,#0E1A5A 70% 78%,#2F6CFF 82% 100%)}
.vn-pane.dark .vig{position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 50%,transparent 40%,rgba(0,0,0,.55) 100%)}
.vn-spark{position:relative;z-index:3;width:clamp(120px,22%,190px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(160,190,255,.55),rgba(60,100,255,.35) 60%,rgba(60,100,255,.15));display:grid;place-items:center;box-shadow:0 0 60px rgba(90,140,255,.35)}
.vn-spark i{width:58%;aspect-ratio:1;border-radius:50%;background:linear-gradient(160deg,#4C8BFF,#2E5FE0);display:grid;place-items:center;box-shadow:0 0 0 1px rgba(255,255,255,.25) inset}
.vn-spark svg{width:46%;height:46%;color:#fff}
.vn-cmd{position:relative;z-index:3;width:min(78%,440px);background:rgba(40,40,60,.55);backdrop-filter:blur(14px);border-radius:8px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.08) inset;font-size:clamp(14px,1.4vw,20px);color:#fff}
.vn-cmd div{display:flex;align-items:center;gap:12px;padding:clamp(12px,1.4vw,18px) clamp(14px,1.6vw,22px)}
.vn-cmd div+div{border-top:1px solid rgba(255,255,255,.07);color:rgba(255,255,255,.5)}
.vn-cmd div+div b{color:#fff;font-weight:500}
.vn-cmd svg{width:1em;height:1em;flex:none}
/* statement */
.vn-stmt{padding-top:clamp(120px,16.8vw,240px)}
.vn-stmt .l{font-size:clamp(48px,9.5vw,150px);font-weight:600;letter-spacing:-.055em;line-height:.95;color:var(--ink)}
.vn-stmt .l.g{background:linear-gradient(90deg,#007BFF,#6A3BFF 60%,#BDB2FF);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.1em}
.vn-stmt [data-reveal]{transform:translateY(40px);transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .9s}
/* ---- demo ---- */
.vn-intro{text-align:center;padding-top:clamp(108px,14.4vw,204px)}
.vn-intro .eb{font-size:clamp(18px,1.6vw,26px);font-weight:400;color:var(--ink-2)}
.vn-intro h2{font-size:clamp(54px,9vw,140px);font-weight:600;letter-spacing:-.05em;line-height:.92;margin-top:6px}
.vn-intro h2 sup{font-size:.22em;font-weight:600;letter-spacing:0;vertical-align:top;margin-left:.15em;background:var(--blue);color:#fff;padding:.25em .5em;border-radius:5px;position:relative;top:.35em}
.vn-intro .by{font-size:clamp(18px,1.6vw,26px);color:var(--ink-2);margin-top:18px}
.vn-demo-slot{position:relative;z-index:2;aspect-ratio:16/10;border-radius:10px 10px 0 0;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.45);background:#F1F2F4;--slot-bg:#F1F2F4}
.vn-demo-slot image-slot{display:block;width:100%;height:100%}
.vn-stage .live{position:absolute;top:clamp(14px,2vw,28px);right:clamp(14px,2vw,28px);z-index:3;display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;background:rgba(20,20,22,.7);backdrop-filter:blur(8px);color:#F8F8F8;font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.vn-stage .live i{width:8px;height:8px;border-radius:50%;background:#29D583;box-shadow:0 0 0 3px rgba(41,213,131,.25);animation:vn-pulse 1.6s ease-in-out infinite}
@keyframes vn-pulse{50%{box-shadow:0 0 0 7px rgba(41,213,131,.05)}}
.vn-stage{position:relative;margin-top:clamp(36px,5vw,64px);border-radius:12px;overflow:hidden;padding:clamp(24px,6vw,110px) clamp(16px,6vw,110px) 0;background:#74777C;background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px);background-size:88px 88px;isolation:isolate}
.vn-stage::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 70% at 50% 40%,transparent 50%,rgba(0,0,0,.28));pointer-events:none;z-index:1}
.vn-stage .mark{position:absolute;left:4%;top:12%;width:22%;color:rgba(255,255,255,.12);z-index:0}
.demo{position:relative;z-index:2;display:grid;grid-template-columns:232px 350px minmax(0,1fr);height:clamp(600px,54vw,780px);background:#141416;border-radius:10px 10px 0 0;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.45);font-family:var(--font);font-size:13px;color:#C9CBD1;text-align:left}
.d-side{background:#161618;border-right:1px solid #26262A;padding:16px 12px;display:flex;flex-direction:column;gap:2px;overflow:hidden;min-width:0}
.d-tl{display:flex;gap:7px;margin:0 0 18px 6px}.d-tl i{width:11px;height:11px;border-radius:50%;background:#FF5F57}.d-tl i:nth-child(2){background:#FEBC2E}.d-tl i:nth-child(3){background:#28C840}
.d-ws{display:flex;align-items:center;gap:9px;padding:6px 8px;margin-bottom:8px;color:#F1F1F3;font-weight:500;font-size:14px}
.d-ws b{width:22px;height:22px;border-radius:5px;background:linear-gradient(135deg,var(--blue),var(--violet));flex:none}
.d-ws .pub{margin-left:auto;font-size:11px;color:#9A9CA3;font-weight:400}
.d-ws .pub em{font-style:normal;background:#2A2A30;color:#DADCE1;padding:1px 6px;border-radius:4px;margin-left:5px}
.d-nav a,.d-sess span{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:5px;color:#C9CBD1;text-decoration:none;font-size:13px;white-space:nowrap;overflow:hidden}
.d-nav a svg{width:15px;height:15px;flex:none;color:#9A9CA3}
.d-nav a.on{background:#25252B;color:#F1F1F3}
.d-nav a .dot{margin-left:auto;width:6px;height:6px;border-radius:50%;background:var(--blue)}
.d-h{font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#7A7E83;padding:18px 8px 8px}
.d-sess span{color:#A8ABB2;text-overflow:ellipsis;display:block;cursor:default;transition:background .2s}
.d-sess span.on{background:#25252B;color:#F1F1F3}
.d-chat{display:flex;flex-direction:column;border-right:1px solid #26262A;min-width:0}
.d-chat-h{height:48px;display:flex;align-items:center;gap:12px;padding:0 16px;color:#F1F1F3;font-weight:500;border-bottom:1px solid #26262A;white-space:nowrap;overflow:hidden}
.d-chat-h svg{width:14px;height:14px;color:#9A9CA3;flex:none}
.d-chat-h span{overflow:hidden;text-overflow:ellipsis}
.d-log{flex:1;overflow:hidden;padding:16px;display:flex;flex-direction:column;justify-content:flex-end;gap:14px}
.d-log .e{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.d-log .e.in{opacity:1;transform:none}
.e.step b{display:block;color:#DADCE1;font-weight:400;font-size:13px}
.e.step span{color:#7E8189;font-size:12px;display:block;margin-top:2px}
.e.card{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid #2C2C32;border-radius:6px;background:#1B1B1F}
.e.card .ic{width:36px;height:36px;border-radius:6px;background:rgba(0,123,255,.14);color:#58AAFF;display:grid;place-items:center;flex:none}
.e.card .ic svg{width:16px;height:16px}
.e.card b{display:block;color:#F1F1F3;font-weight:500}.e.card span{display:block;color:#7E8189;font-size:12px}
.e.card .ar{margin-left:auto;color:#7E8189}
.e.msg{color:#E4E6EA;line-height:1.55;font-size:13.5px}
.d-in{margin:12px;border-radius:8px;background:#1C1C21;border:1px solid #2C2C32;padding:12px 14px;min-height:104px;display:flex;flex-direction:column;gap:12px}
.d-in .txt{flex:1;color:#DADCE1;line-height:1.5;min-height:42px}
.d-in .txt:empty::before{content:"Fråga HDL Commerce…";color:#6E7178}
.d-in .cur{display:inline-block;width:1px;height:13px;background:#DADCE1;vertical-align:-2px;margin-left:1px;animation:vn-blink 1s steps(1) infinite}
.d-in .row{display:flex;gap:14px;color:#8A8D94;align-items:center}
.d-in .row svg{width:15px;height:15px}
.d-in .send{margin-left:auto;width:26px;height:26px;border-radius:50%;background:#2A2A30;display:grid;place-items:center;color:#F1F1F3}
.d-in .send svg{width:13px;height:13px}
.d-pv{display:flex;flex-direction:column;background:#0F0F11;min-width:0}
.d-tabs{height:48px;display:flex;align-items:center;gap:10px;padding:0 14px;color:#DADCE1;border-bottom:1px solid #26262A;white-space:nowrap}
.d-tabs .tab{display:flex;align-items:center;gap:8px;background:#1F1F24;padding:6px 10px;border-radius:6px}
.d-tabs svg{width:14px;height:14px;color:#9A9CA3}
.d-tabs .pin{margin-left:auto}
.d-url{height:44px;display:flex;align-items:center;gap:10px;padding:0 14px;border-bottom:1px solid #26262A}
.d-url span{flex:1;min-width:0;height:30px;border-radius:6px;background:#1C1C21;display:block;line-height:30px;padding:0 12px;font:12px/30px var(--mono);color:#B0B3BA;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.d-url .dev{display:flex;gap:4px}.d-url .dev i{width:26px;height:26px;border-radius:5px;display:grid;place-items:center;color:#8A8D94}.d-url .dev i.on{background:#25252B;color:#F1F1F3}
.d-url .dev svg{width:14px;height:14px}
.d-page{flex:1;margin:0 14px;border-radius:6px 6px 0 0;background:#fff;color:var(--ink);overflow:hidden;position:relative}
.sf-nav{display:flex;align-items:center;gap:18px;padding:14px 22px;border-bottom:1px solid #ECEEF0}
.sf-nav b{font-weight:700;font-size:13px;display:flex;align-items:center;gap:7px}
.sf-nav b i{width:14px;height:14px;border-radius:3px;background:var(--ink);display:block}
.sf-nav .l{display:flex;gap:14px;color:#6B6F76;text-transform:uppercase;letter-spacing:.08em;font-size:9px;margin-left:auto;min-width:0;overflow:hidden;white-space:nowrap}
.sf-nav .c{flex:none}
.sf-nav .c{background:var(--ink);color:#fff;padding:6px 10px;border-radius:3px;font-size:9px;font-weight:600}
.blk{padding:18px 22px;position:relative;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s,box-shadow .25s}
.blk.in{opacity:1;transform:none}
.blk::after{content:attr(data-label);position:absolute;top:0;left:22px;transform:translateY(-50%);font-size:9px;font-weight:600;color:#fff;background:var(--blue);padding:2px 6px;border-radius:3px;opacity:0;transition:opacity .25s;z-index:2}
.blk.sel{box-shadow:inset 0 0 0 2px var(--blue)}.blk.sel::after{opacity:1}
.blk.hid>*{opacity:.35}
.blk .chip{position:absolute;top:0;right:22px;transform:translateY(-50%);font-size:9px;font-weight:600;background:#F0F0F0;color:var(--ink-2);padding:2px 7px;border-radius:3px;z-index:2}
.sf-hero{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:center}
.sf-hero .im{aspect-ratio:4/3;border-radius:6px;background:linear-gradient(135deg,#FFB86B,#FF5E62 50%,#6A3BFF)}
.sf-hero .im.k{background:linear-gradient(135deg,#C2D6FF,#3E7BFF 50%,#0E2E8A)}
.sf-hero .im.b{background:linear-gradient(135deg,#1D1D1D,#3A3A3A 50%,#007BFF)}
.sf-hero h3{font-size:clamp(16px,1.7vw,26px);font-weight:600;letter-spacing:-.03em;line-height:1.05}
.sf-hero p{font-size:11px;color:#5C6572;margin:8px 0 12px;line-height:1.5}
.sf-hero .bt{display:inline-block;background:var(--ink);color:#fff;font-size:10px;font-weight:600;padding:7px 12px;border-radius:3px}
.sf-usp{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding-block:14px;border-block:1px solid #ECEEF0;margin-inline:22px;padding-inline:0}
.sf-usp div{font-size:10px;color:#3A3F47;display:flex;gap:8px;align-items:center}.sf-usp i{width:8px;height:8px;border-radius:50%;background:var(--blue);flex:none}
.sf-prods{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.sf-prods i{display:block;aspect-ratio:1;border-radius:6px;background:var(--c,#DDE3EA)}
.sf-prods b{display:block;font-size:10px;font-weight:600;margin-top:8px}.sf-prods span{font-size:10px;color:#6B6F76}
.sf-cta{margin:0 22px}.sf-cta>div{background:var(--ink);color:#fff;border-radius:6px;padding:18px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.sf-cta b{font-size:14px;font-weight:600}.sf-cta span{font-size:10px;font-weight:600;background:var(--blue);padding:7px 12px;border-radius:3px;white-space:nowrap}
.sf-filter{display:flex;gap:8px;flex-wrap:wrap}.sf-filter span{font-size:9px;font-weight:500;padding:5px 10px;border:1px solid #D7DBE2;border-radius:999px;color:#3A3F47}.sf-filter span.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.sf-price table{width:100%;border-collapse:collapse;font-size:10px}.sf-price td{padding:7px 0;border-bottom:1px solid #ECEEF0;color:#3A3F47}.sf-price td:last-child{text-align:right;font-family:var(--mono);color:var(--ink)}.sf-price td:last-child em{font-style:normal;color:#6B6F76;text-decoration:line-through;margin-right:8px}
.sf-price .t{font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#6B6F76;margin-bottom:6px;display:flex;justify-content:space-between}.sf-price .t span{color:var(--blue)}
.sf-puffs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.sf-puffs div{aspect-ratio:4/3;border-radius:6px;background:var(--c);display:flex;align-items:flex-end;padding:10px;color:#fff;font-size:11px;font-weight:600}
@media(prefers-reduced-motion:reduce){.vn-win,.vn-prompt .cur,.d-in .cur,.vn-h1 .w,.vn-h1 .g,.vn-hero-sub,.vn-hero .vn-actions,.vn-marq .trk,.vn-gp .bands,.vn-stage .live i,.vn-cta .glow{animation:none}}
/* ---- funktioner (kortrad) ---- */
.vn-next{padding-top:clamp(108px,14.4vw,204px)}
.vn-next .lead{font-size:clamp(17px,1.35vw,21px);line-height:1.5;color:var(--ink-2);max-width:52ch;margin-top:28px}
.vn-next .vn-actions{margin-top:32px}
.vn-cards{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:clamp(20px,3vw,48px);margin-top:clamp(48px,6vw,88px);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:none}
.vn-cards::-webkit-scrollbar{display:none}
.vn-card{scroll-snap-align:start;text-align:center}
.vn-card .vis{aspect-ratio:4/3;border-radius:8px;overflow:hidden;position:relative;background:#F1F2F4;display:grid;place-items:center;padding:12%}
.vn-card h3{margin-top:26px;font-size:clamp(17px,1.4vw,22px);font-weight:500;letter-spacing:-.01em;line-height:1.3;text-wrap:balance}
.vn-card h3 span{color:var(--mute)}
.vn-card p{margin-top:8px;font-size:14px;line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.vis .mini{width:100%;background:#fff;border-radius:6px;box-shadow:0 10px 30px rgba(16,24,40,.12);padding:10%;display:flex;flex-direction:column;gap:8%}
.vis .mini i{display:block;height:8px;border-radius:2px;background:#E3E6E8}.vis .mini i.w{width:60%}.vis .mini i.pic{height:34%;background:linear-gradient(135deg,#C2D6FF,#6A3BFF)}
.vis .tag{position:absolute;top:10%;left:50%;transform:translateX(-50%);background:#2B2E38;color:#fff;font-size:12px;font-weight:500;padding:8px 14px;border-radius:999px;display:flex;align-items:center;gap:8px;white-space:nowrap}
.vis .tag i{width:8px;height:8px;border-radius:50%;border:1.5px solid #fff}
.vis.v2{background:radial-gradient(circle at 50% 50%,#E9ECF1 1px,transparent 1.5px) 0 0/18px 18px,#F7F8FA}
.vis.v2 .mini{box-shadow:0 0 0 2px var(--blue),0 10px 30px rgba(16,24,40,.12)}
.vis .pop{position:absolute;right:8%;bottom:12%;background:var(--blue);color:#fff;font-size:12px;font-weight:600;padding:8px 12px;border-radius:4px}
.vis.v3{background:linear-gradient(180deg,#F1F2F4,#E4E7EC)}
.vis.v3 .dev{display:flex;gap:6%;align-items:flex-end;width:100%;height:100%}
.vis.v3 .dev i{display:block;background:#fff;border:2px solid #1D1D1D;border-radius:6px;position:relative}
.vis.v3 .dev .dk{flex:1;height:70%}.vis.v3 .dev .mb{width:22%;height:56%;border-radius:8px}
.vis.v3 .dev i::after{content:"";position:absolute;inset:12% 10% auto;height:18%;border-radius:2px;background:linear-gradient(90deg,#007BFF,#6A3BFF)}
.vis.v4{background:linear-gradient(160deg,#F7F8FA,#E9ECF1)}
.vis.v4 .ch{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.vis.v4 .ch span{font-size:13px;font-weight:600;padding:8px 14px;border-radius:5px;background:#fff;border:1px solid var(--line);color:var(--ink)}
.vis.v4 .ch span.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.vis.v4 .ch span.off{color:var(--mute);text-decoration:line-through}
.vis.v4 .tm{margin-top:14px;font:500 12px var(--mono);color:var(--ink-2);background:#fff;padding:8px 12px;border-radius:5px;border:1px solid var(--line)}
.vis.v5{background:linear-gradient(160deg,#EFF4FF,#F7F8FA)}
.vis.v5 .g{width:100%;background:#fff;border-radius:6px;box-shadow:0 10px 30px rgba(16,24,40,.12);padding:8%;display:grid;grid-template-columns:repeat(3,1fr);gap:8%;position:relative}
.vis.v5 .g i{display:block;height:8px;border-radius:2px;background:#E3E6E8;position:relative}.vis.v5 .g i::before{content:"";position:absolute;left:0;top:-14px;width:8px;height:8px;border-radius:50%;background:var(--blue)}
.vis.v5 .gt{position:absolute;top:-12px;right:-6px;background:var(--violet);color:#fff;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:3px}
.vis.v5 .ln{margin-top:14px;font-size:12px;color:var(--ink-2);display:flex;gap:16px}.vis.v5 .ln span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--violet);margin-right:6px}
/* ---- faq ---- */
.vn-faq{padding-top:clamp(108px,14.4vw,192px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(24px,5vw,90px)}
.vn-faq .sub{margin-top:16px;font-size:16px;color:var(--ink-2)}
.vn-faq details{border-top:1px solid var(--line)}
.vn-faq details:last-child{border-bottom:1px solid var(--line)}
.vn-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-size:clamp(17px,1.4vw,20px);font-weight:500;letter-spacing:-.01em}
.vn-faq summary::-webkit-details-marker{display:none}
.vn-faq summary .pm{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-weight:400;color:var(--ink-2);flex:none;transition:transform .2s}
.vn-faq details[open] summary .pm{transform:rotate(45deg)}
.vn-faq details p{padding:0 0 24px;font-size:16px;line-height:1.55;color:var(--ink-2);max-width:60ch}
/* ---- cta ---- */
.vn-cta{position:relative;margin:clamp(108px,14.4vw,192px) 0 clamp(48px,6vw,96px);border-radius:12px;overflow:hidden;background:#2A5CF6;color:#fff;padding:clamp(64px,9vw,140px) clamp(24px,5vw,80px);isolation:isolate;text-align:center}
.vn-cta .bands{position:absolute;inset:-12% -30%;z-index:0;filter:blur(30px);background:linear-gradient(90deg,#2A5AF7 0 22%,#8AA3FF 25% 30%,#3F6CFF 33% 45%,#D3C4F4 47% 53%,#4A78FF 56% 68%,#9B8CFF 70% 76%,#2C5BFF 79% 100%);animation:vn-bands 26s ease-in-out infinite alternate-reverse}
.vn-cta .glow{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 45% 60% at 62% 40%,rgba(255,176,225,.6),transparent 70%),radial-gradient(ellipse 60% 50% at 20% 100%,rgba(0,40,220,.55),transparent 70%);animation:vn-glow 18s ease-in-out infinite alternate}
@keyframes vn-glow{to{transform:translate(-4%,3%) scale(1.06)}}
.vn-cta>div{position:relative;z-index:3;max-width:820px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.vn-pill.lt{border-color:rgba(255,255,255,.35);color:#fff;background:rgba(255,255,255,.1);backdrop-filter:blur(8px);animation:none}
.vn-pill.lt svg{color:#fff}
html main.vnce .vn-cta h2{color:#fff;font-size:clamp(40px,5.8vw,88px);font-weight:600;letter-spacing:-.045em;line-height:.98;margin-top:28px;text-wrap:balance}
.vn-cta p{margin-top:22px;font-size:clamp(16px,1.3vw,20px);line-height:1.5;color:rgba(255,255,255,.88);max-width:54ch}
.vn-cta .vn-actions{margin-top:36px;justify-content:center}
.vn-cta .vbtn.o{border-color:rgba(255,255,255,.45);color:#fff}.vn-cta .vbtn.o:hover{background:rgba(255,255,255,.12)}
/* ---- sidfot (bara den här sidan) ---- */
body.vnce .ft{background:#08080C;font-family:var(--font);background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:88px 88px}
body.vnce .vn-ftline{margin-bottom:clamp(56px,7vw,100px);padding-bottom:clamp(40px,5vw,72px);border-bottom:1px solid rgba(255,255,255,.1)}
body.vnce .vn-ftline .eb{font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#7A7E83;margin:0}
body.vnce .vn-ftline .l{margin:22px 0 0;font-size:clamp(36px,5vw,76px);font-weight:600;letter-spacing:-.045em;line-height:1;color:#F8F8F8}
body.vnce .vn-ftline .l span{color:#7A7E83}
body.vnce .ft-col h4{font-family:var(--font);letter-spacing:.14em;color:#8A8F96}
body.vnce .ft-col a{font-family:var(--font);font-size:.9rem;color:#B6BCC4;grid-template-columns:1fr;transition:color .15s,transform .2s}
body.vnce .ft-col a::before{display:none}
body.vnce .ft-col a:hover{color:#fff;transform:translateX(4px)}
body.vnce .ft-social a{border-radius:5px;font-family:var(--font);font-weight:600}
body.vnce .ft-social a:hover{background:var(--blue)}
body.vnce .ft-copy{font-family:var(--font)}
body.vnce .ft-glow{height:clamp(260px,30vw,440px);margin-top:clamp(20px,3vw,40px)}
body.vnce .ft-bloom{background:radial-gradient(64% 82% at 48% 116%,#F3EEFF 0%,#C9B8FF 12%,#7C5CFF 30%,#3F6CFF 46%,rgba(0,123,255,.45) 62%,rgba(106,59,255,.18) 76%,transparent 88%)}
body.vnce .ft-bloom2{background:radial-gradient(46% 60% at 68% 126%,rgba(255,176,225,.7) 0%,rgba(106,59,255,.45) 34%,transparent 72%)}
body.vnce .ft-lava .blob:nth-child(1){background:radial-gradient(ellipse at 50% 60%,rgba(106,59,255,.7),rgba(106,59,255,0) 62%)!important}
body.vnce .ft-lava .blob:nth-child(3){background:radial-gradient(ellipse,rgba(0,123,255,.65),transparent 60%)!important}
body.vnce .vn-ftword{position:absolute;left:0;right:0;bottom:-.12em;z-index:3;font-size:clamp(64px,13.5vw,220px);font-weight:600;letter-spacing:-.055em;line-height:1;white-space:nowrap;color:#fff;pointer-events:none;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#fff 55%,transparent 100%);mask-image:linear-gradient(180deg,#fff 55%,transparent 100%)}
body.vnce .vn-ftword .trk{display:flex;align-items:baseline;gap:.35em;width:max-content;animation:vn-marq 40s linear infinite;padding-left:.35em}
body.vnce .vn-ftword span{display:inline-block;opacity:0;transform:translateY(.4em);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
body.vnce .vn-ftword span.o{color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.9);transition-delay:.12s}
body.vnce .vn-ftword i{width:.18em;height:.18em;border-radius:50%;background:var(--blue);flex:none;align-self:center}
body.vnce .vn-ftword.in span{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){body.vnce .vn-ftword span{opacity:1;transform:none;transition:none}body.vnce .vn-ftword .trk{animation:none}}
/* ---- delade moduler för AI-sidorna ---- */
.vn-chat{position:relative;z-index:3;width:min(760px,100%);margin-top:clamp(40px,5vw,72px);margin-bottom:-70px;background:#2B2E38;border-radius:10px 10px 0 0;box-shadow:0 30px 80px rgba(20,20,60,.35);color:#fff;font-size:clamp(14px,1.1vw,16px);line-height:1.5;text-align:left;overflow:hidden}
.vn-chat .bar{display:flex;align-items:center;gap:10px;height:44px;padding:0 16px;background:#23262F;font-size:12px;color:#9AA0AE}
.vn-chat .bar i{width:10px;height:10px;border-radius:50%;background:#3A3E4A}
.vn-chat .bar .t{margin-left:8px;padding:4px 10px;border-radius:5px;background:#2F333E;color:#fff;font-weight:500}
.vn-chat .bar .t+.t{background:none;color:#9AA0AE;font-weight:400}
.vn-chat .b{padding:22px 24px 40px;display:flex;flex-direction:column;gap:14px}
.vn-chat .m{max-width:78%;padding:12px 16px;border-radius:10px;background:#363A47}
.vn-chat .m.u{align-self:flex-end;background:var(--blue);border-bottom-right-radius:3px}
.vn-chat .m.a{align-self:flex-start;border-bottom-left-radius:3px}
.vn-chat .tools{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.vn-chat .tool{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:5px;background:rgba(0,0,0,.25);font:500 11px var(--mono);color:#C9CDD8}
.vn-chat .tool i{width:6px;height:6px;border-radius:50%;background:#29D583}
.vn-chat .typing{display:flex;gap:5px;padding:14px 16px}.vn-chat .typing i{width:6px;height:6px;border-radius:50%;background:#9AA0AE;animation:vn-dot 1.2s infinite}.vn-chat .typing i:nth-child(2){animation-delay:.2s}.vn-chat .typing i:nth-child(3){animation-delay:.4s}
@keyframes vn-dot{50%{opacity:.3;transform:translateY(-3px)}}
.vn-flow{position:absolute;inset:0;z-index:3;display:grid;grid-template-rows:auto 1fr auto 1fr auto;align-items:center;justify-items:center;padding:10%}
.vn-flow .row{display:flex;gap:6%;width:100%;justify-content:center}
.vn-flow .n{background:rgba(255,255,255,.7);backdrop-filter:blur(8px);border-radius:6px;padding:.6em 1em;font-size:clamp(11px,1.2vw,15px);font-weight:600;color:var(--ink);box-shadow:0 12px 30px rgba(30,30,120,.18),0 0 0 1px rgba(255,255,255,.7) inset;white-space:nowrap;animation:vn-float var(--d,6s) ease-in-out infinite alternate;animation-delay:var(--dl,0s)}
.vn-flow .n.hub{background:var(--ink);color:#fff;font-size:clamp(12px,1.4vw,17px);padding:.8em 1.4em;box-shadow:0 20px 50px rgba(0,0,0,.3);display:flex;align-items:center;gap:10px}
.vn-flow .n.hub svg{width:1.1em;height:1.1em}
.vn-flow .ln{width:1px;height:100%;min-height:24px;background:linear-gradient(180deg,rgba(29,29,29,.05),rgba(29,29,29,.5),rgba(29,29,29,.05));position:relative;overflow:hidden}
.vn-flow .ln::after{content:"";position:absolute;left:0;top:-30%;width:100%;height:30%;background:var(--blue);animation:vn-pulse-ln 1.8s linear infinite}
@keyframes vn-pulse-ln{to{top:100%}}
@keyframes vn-float{to{transform:translateY(-8px)}}
.vn-flow .cap{font:500 10px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:rgba(29,29,29,.55)}
.vn-grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);margin-top:clamp(48px,6vw,88px)}
.vn-grid4>div{background:var(--paper);border-radius:8px;padding:clamp(22px,2.4vw,34px);display:flex;flex-direction:column;gap:16px;transition:transform .3s,box-shadow .3s}
.vn-grid4>div:hover{transform:translateY(-4px);box-shadow:0 24px 60px rgba(16,24,40,.1)}
.vn-grid4 .n{font:500 11px var(--mono);letter-spacing:.18em;color:var(--blue)}
.vn-grid4 h3{font-size:clamp(18px,1.5vw,24px);font-weight:600;letter-spacing:-.02em;line-height:1.15}
.vn-grid4 ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.vn-grid4 li{font-size:14.5px;line-height:1.45;color:var(--ink-2);padding-left:16px;position:relative}
.vn-grid4 li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--blue)}
.vn-own{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,24px);margin-top:clamp(48px,6vw,88px)}
.vn-own>div{border-radius:10px;padding:clamp(28px,3vw,44px);display:flex;flex-direction:column;gap:22px;position:relative;overflow:hidden;isolation:isolate}
.vn-own .you{background:var(--paper)}
.vn-own .us{background:#141416;color:#F8F8F8}
.vn-own .us .glow{position:absolute;inset:-30%;z-index:0;filter:blur(60px);background:radial-gradient(circle at 85% 20%,rgba(0,123,255,.55),transparent 35%),radial-gradient(circle at 20% 100%,rgba(106,59,255,.5),transparent 35%)}
.vn-own>div>*{position:relative;z-index:1}
.vn-own .tag{align-self:flex-start;font:600 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;padding:8px 10px;border-radius:5px;background:var(--ink);color:#fff}
.vn-own .us .tag{background:var(--blue)}
html main.vnce .vn-own .us h3,html main.vnce .vn-own .us b{color:#F8F8F8}
.vn-own h3{font-size:clamp(24px,2.4vw,36px);font-weight:600;letter-spacing:-.03em;line-height:1.05}
.vn-own .d{font-size:16px;line-height:1.5;color:var(--ink-2);max-width:44ch}
.vn-own .us .d{color:#DAE0E4}
.vn-own ul{margin:0;padding:0;list-style:none;display:grid;gap:14px}
.vn-own li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding-top:14px;border-top:1px solid var(--line)}
.vn-own .us li{border-top-color:rgba(255,255,255,.12)}
.vn-own li i{width:22px;height:22px;border-radius:50%;background:var(--blue);display:grid;place-items:center;margin-top:1px}
.vn-own li i::after{content:"";width:5px;height:9px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg);margin-top:-2px}
.vn-own li b{display:block;font-weight:600;font-size:16px}
.vn-own li span{display:block;font-size:14.5px;line-height:1.5;color:var(--ink-2);margin-top:3px}
.vn-own .us li span{color:#B0B6BA}
.vn-own .us a{color:#58AAFF}
.vn-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);margin-top:clamp(36px,4vw,56px)}
.vn-steps.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.vn-steps>div{padding:clamp(24px,2.6vw,36px) 0 0;border-top:1px solid var(--ink);display:flex;flex-direction:column;gap:14px}
.vn-steps .s{font-size:clamp(48px,6vw,96px);font-weight:600;letter-spacing:-.05em;line-height:.9;background:linear-gradient(90deg,#007BFF,#6A3BFF);-webkit-background-clip:text;background-clip:text;color:transparent}
.vn-steps b{font-size:clamp(18px,1.5vw,24px);font-weight:600;letter-spacing:-.02em}
.vn-steps p{font-size:15px;line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.vn-steps .by{font:500 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-top:auto}
.vn-steps .url{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:4px}
.vn-steps code{font:13px var(--mono);background:var(--paper);border:1px solid var(--line);padding:8px 12px;border-radius:5px;color:var(--ink)}
.vn-steps .soon{font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:6px 8px;border-radius:5px;background:rgba(0,123,255,.12);color:var(--blue)}
.vn-seg{display:inline-flex;gap:2px;padding:3px;border-radius:6px;background:var(--paper);border:1px solid var(--line)}
.vn-seg button{appearance:none;border:0;margin:0;font:600 14px var(--font);padding:8px 16px;border-radius:4px;background:transparent;color:var(--ink-2);cursor:pointer}
.vn-seg button[aria-selected=true]{background:var(--ink);color:#fff}
.vn-split{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-top:clamp(48px,6vw,88px)}
.vn-prompts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);margin-top:clamp(40px,5vw,64px)}
.vn-prompts button{appearance:none;border:1px solid var(--line);margin:0;background:#fff;border-radius:8px;padding:22px 24px;text-align:left;font:inherit;color:var(--ink);display:flex;flex-direction:column;gap:14px;cursor:pointer;transition:border-color .2s,transform .3s,box-shadow .3s}
.vn-prompts button:hover{border-color:var(--blue);transform:translateY(-3px);box-shadow:0 20px 50px rgba(0,123,255,.12)}
.vn-prompts .k{font:600 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.vn-prompts .q{font-size:16px;line-height:1.5;color:var(--ink);text-wrap:pretty}
.vn-prompts .c{margin-top:auto;font-size:13px;font-weight:600;color:var(--mute)}
.vn-prompts button.done .c{color:#1E9E5F}
.vn-quote{padding-top:clamp(90px,12vw,160px);font-size:clamp(28px,3.6vw,56px);font-weight:500;letter-spacing:-.035em;line-height:1.12;max-width:22ch;text-wrap:balance}
.vn-quote .hl{background:var(--ink);color:#fff;padding:0 .18em;border-radius:4px}
.vn-quote .hg{background:linear-gradient(90deg,#007BFF,#6A3BFF);color:#fff;padding:0 .18em;border-radius:4px}
.vn-sec{padding-top:clamp(108px,14.4vw,204px)}
.vn-sec .lead{font-size:clamp(17px,1.35vw,21px);line-height:1.5;color:var(--ink-2);max-width:52ch;margin-top:24px}
@media(max-width:1100px){.vn-grid4,.vn-steps.c4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.vn-own,.vn-steps,.vn-prompts{grid-template-columns:1fr}}
@media(max-width:600px){.vn-grid4,.vn-steps.c4{grid-template-columns:1fr}}
.vis.v6{background:#0E0E14;color:#fff;padding:0;display:grid;place-items:center;isolation:isolate}
.vis.v6::before{content:"";position:absolute;inset:-30%;filter:blur(40px);background:var(--g);animation:vn-glow 16s ease-in-out infinite alternate}
.vis.v6 b{position:relative;z-index:1;font-size:clamp(28px,3vw,44px);font-weight:600;letter-spacing:-.045em;line-height:.95;text-align:center;text-wrap:balance;padding:0 8%}
.vis.v6 small{position:absolute;z-index:1;bottom:8%;left:0;right:0;text-align:center;font:600 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.vn-cmd div.ok b{color:#29D583}
/* ---- responsivt ---- */
@media(max-width:1180px){.demo{grid-template-columns:320px minmax(0,1fr)}.d-side{display:none}.sf-nav .l span:nth-child(n+3){display:none}}
@media(max-width:900px){.vn-two,.vn-duo,.vn-faq{grid-template-columns:1fr}.vn-two p{padding-top:0}}
@media(max-width:760px){.demo{grid-template-columns:1fr;grid-template-rows:340px 460px;height:auto}.d-chat{border-right:0;border-bottom:1px solid #26262A}.d-log{gap:10px}.sf-hero{grid-template-columns:1fr}.sf-hero .im{display:none}.sf-prods{grid-template-columns:repeat(2,1fr)}.vn-cards{grid-auto-columns:78%}}
@media(max-width:520px){.vn-pill{height:38px;font-size:13px}.vn-prompt{padding:20px 20px 64px}.vn-stage{padding:20px 12px 0}}
/* ---- mobil ---- */
@media(max-width:600px){
.vn-h1{font-size:clamp(40px,11.5vw,52px)}
.vn-pill{height:auto;min-height:38px;padding:9px 14px 9px 12px;white-space:normal;text-align:center;line-height:1.3}
.vn-sec,.vn-next,.vn-intro,.vn-two,.vn-faq{padding-top:72px}
.vn-stmt{padding-top:88px}
.vn-cta{margin-top:72px}
.vn-two{padding-top:64px}
.vn-gp{padding-left:16px;padding-right:16px}
.vn-cards{grid-auto-columns:84%}
.vn-flow{padding:8%}.vn-flow .row{flex-wrap:wrap;gap:6px}.vn-flow .n{font-size:11px;padding:.5em .8em}.vn-flow .n.hub{font-size:12px}
.vn-own>div,.vn-grid4>div{padding:22px}
.vn-steps .s{font-size:44px}
.vn-prompts button{padding:18px}
.vn-quote{font-size:clamp(24px,7.4vw,30px)}
.vbtn{height:48px;padding:0 20px;font-size:15px}
.vn-actions{width:100%}.vn-actions .vbtn{flex:1 1 auto}
}
/* ---- WP port: hdl-kit/vn-stage image slot (the design's <image-slot id="vpb-demo|agent-demo">) ----
   With a screenshot (.has-img): contained at any aspect ratio over a blurred copy of itself.
   Without one: the design's own .vis.v2 builder sketch fills the slot as a decorative fallback. */
.vn-demo-slot.has-img{background:#1D1D20}
.vn-demo-slot.has-img img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;object-position:center top}
.vn-demo-slot.has-img img.bg{object-fit:cover;filter:blur(40px) saturate(1.1);transform:scale(1.15);opacity:.9}
.vn-demo-slot>.vis{position:absolute;inset:0;display:grid;place-items:center;padding:9% 22%}
.vn-demo-slot>.vis .mini{padding:clamp(14px,2.4vw,32px);gap:clamp(8px,1.2vw,16px)}.vn-demo-slot>.vis .mini i{height:clamp(6px,1vw,12px)}.vn-demo-slot>.vis .mini i.pic{height:clamp(60px,14vw,200px)}

/* "Publiceras snart" chip — 2026-09-22, not in the handoff. Links whose target
   does not exist yet render as span.is-pending with an <em> chip (block-conventions
   rule 5); the design has no style for it on light pages. On the gradient panels
   (.vn-cta, .dm-cta) the chip turns white. */
.vnce .is-pending{cursor:default}
.vnce .is-pending em{font:500 10px/1 var(--mono);font-style:normal;letter-spacing:.14em;text-transform:uppercase;padding:4px 6px;border-radius:4px;background:rgba(0,123,255,.1);color:var(--blue);margin-left:6px;vertical-align:2px;white-space:nowrap}
.vnce :is(.vn-cta,.dm-cta,.vbtn.p) .is-pending em,.vnce .vbtn.p.is-pending em{background:rgba(255,255,255,.14);color:#fff}

/* Footer glow — 2026-09-22. The handoff's footer keeps .ft-glow in normal flow
   with a fixed height; this site anchored it to the footer's bottom edge
   instead (chrome.css, "OWNER CHANGE 2026-08-14"). The ported height above then
   pinned the absolute box to the footer's TOP, so the bloom sat over the link
   columns and the word mark landed in the middle of them. Height back to auto
   so inset:0 decides, which puts the word mark on the footer's bottom edge —
   where the design has it. */
body.vnce .ft-glow{height:auto;margin-top:0}