@font-face { font-family:'Manrope'; font-weight:400; font-display:swap; src:url(fonts/manrope-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family:'Manrope'; font-weight:600; font-display:swap; src:url(fonts/manrope-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family:'Manrope'; font-weight:800; font-display:swap; src:url(fonts/manrope-latin-800-normal.woff2) format('woff2'); }
@font-face { font-family:'Unbounded'; font-weight:600; font-display:swap; src:url(fonts/unbounded-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family:'Unbounded'; font-weight:800; font-display:swap; src:url(fonts/unbounded-latin-800-normal.woff2) format('woff2'); }

:root {
  --bg:#07080c; --bg2:#0d0f16; --panel:#12151d; --panel2:#181c27; --line:#232938; --text:#eef1f6; --muted:#939db3;
  --green:#2ee6a6; --blue:#5ab0ff; --purple:#a37ae0; --ok:#3ddc84; --bad:#ff5a5f;
  --display:'Unbounded','Segoe UI Variable Display','Segoe UI',system-ui,sans-serif; --body:'Manrope','Segoe UI Variable Text','Segoe UI',system-ui,sans-serif;
  --r:20px; --wrap:1180px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:84px; }
body { margin:0; background:var(--bg); color:var(--text); font:400 17px/1.6 var(--body); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
.wrap { width:min(var(--wrap), calc(100% - 40px)); margin:0 auto; }
:focus-visible { outline:2px solid var(--blue); outline-offset:3px; border-radius:6px; }

/* ---------- navigation ---------- */
.nav { position:sticky; top:0; z-index:50; backdrop-filter:blur(16px) saturate(1.4); background:rgba(7,8,12,.72); border-bottom:1px solid rgba(255,255,255,.06); }
.nav .wrap { display:flex; align-items:center; justify-content:space-between; height:68px; gap:20px; }
.nav img.logo { height:24px; width:auto; }
.nav ul { display:flex; gap:30px; list-style:none; margin:0; padding:0; font-size:15px; font-weight:600; color:var(--muted); }
.nav ul a:hover { color:var(--text); }
.nav .cta { display:flex; gap:10px; align-items:center; }
.menu-btn { display:none; background:none; border:1px solid var(--line); color:var(--text); border-radius:10px; width:42px; height:42px; font-size:20px; cursor:pointer; }
@media (max-width:880px) { .nav ul { display:none; } .menu-btn { display:block; } .nav.open ul { display:flex; flex-direction:column; position:absolute; top:68px; left:0; right:0; background:var(--bg2); padding:18px 24px; gap:16px; border-bottom:1px solid var(--line); } .nav .cta .btn.ghost { display:none; } }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 24px; border-radius:999px; font:700 15px/1 var(--body); border:1px solid transparent; cursor:pointer; transition:transform .2s, box-shadow .25s, background .2s, border-color .2s; white-space:nowrap; }
.btn.primary { background:linear-gradient(100deg,var(--green),var(--blue) 55%,var(--purple)); color:#05110d; box-shadow:0 8px 30px -8px rgba(90,176,255,.55); }
.btn.primary:hover { transform:translateY(-2px); box-shadow:0 14px 38px -8px rgba(90,176,255,.7); }
.btn.ghost { background:rgba(255,255,255,.04); border-color:var(--line); color:var(--text); }
.btn.ghost:hover { background:rgba(255,255,255,.09); border-color:#3a4258; }
.btn.small { min-height:40px; padding:0 18px; font-size:14px; }

/* ---------- hero ---------- */
.hero { position:relative; padding:96px 0 40px; text-align:center; isolation:isolate; }
.hero::before { content:''; position:absolute; inset:-200px 0 auto 0; height:900px; z-index:-1; background:radial-gradient(600px 380px at 20% 30%,rgba(46,230,166,.16),transparent 70%),radial-gradient(640px 420px at 80% 20%,rgba(163,122,224,.22),transparent 70%),radial-gradient(700px 400px at 50% 70%,rgba(90,176,255,.14),transparent 70%); }
.eyebrow { display:inline-flex; gap:10px; align-items:center; padding:7px 16px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.03); font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.eyebrow i { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 12px var(--green); }
h1, h2, h3 { font-family:var(--display); line-height:1.12; margin:0; letter-spacing:-.01em; text-wrap:balance; }
.hero h1 { font-size:clamp(34px,6.4vw,76px); font-weight:800; margin:26px auto 22px; max-width:15ch; }
.grad { background:linear-gradient(100deg,var(--green),var(--blue) 50%,var(--purple)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p.lead { font-size:clamp(17px,2.1vw,21px); color:var(--muted); max-width:46em; margin:0 auto 34px; }
.hero .actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.hero .meta { margin-top:22px; font-size:14px; color:var(--muted); display:flex; gap:22px; justify-content:center; flex-wrap:wrap; }
.hero .meta span::before { content:'✓'; color:var(--ok); margin-right:8px; font-weight:800; }

.stage { position:relative; margin:64px auto 0; width:min(1080px,100%); }
.screen { border-radius:18px; overflow:hidden; border:1px solid rgba(255,255,255,.1); background:#000; box-shadow:0 40px 120px -30px rgba(163,122,224,.55), 0 0 0 8px rgba(255,255,255,.03); }
.screen img { width:100%; }
.stage .portrait { position:absolute; right:-3%; bottom:-9%; width:21%; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.14); box-shadow:0 30px 70px -20px rgba(0,0,0,.8); }
.stage .portrait img { width:100%; }
.stage .tag { position:absolute; left:-2%; top:11%; padding:10px 16px; border-radius:14px; background:rgba(18,21,29,.85); backdrop-filter:blur(10px); border:1px solid var(--line); font-size:14px; font-weight:700; display:flex; gap:10px; align-items:center; box-shadow:0 20px 50px -20px #000; animation:float 6s ease-in-out infinite; }
.stage .tag b { color:var(--green); }
@keyframes float { 50% { transform:translateY(-10px); } }
@media (max-width:760px) { .stage .portrait, .stage .tag { display:none; } }

/* ---------- sections ---------- */
section { padding:112px 0; position:relative; }
.kicker { font-size:13px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--blue); margin-bottom:16px; }
h2 { font-size:clamp(28px,4.2vw,48px); font-weight:800; max-width:20ch; }
.sub { color:var(--muted); font-size:clamp(17px,1.9vw,20px); max-width:44em; margin:18px 0 0; }
.center { text-align:center; } .center h2, .center .sub { margin-left:auto; margin-right:auto; }

.logos { display:flex; gap:30px; justify-content:center; align-items:center; flex-wrap:wrap; padding:34px 0 0; color:var(--muted); font-size:14px; letter-spacing:.04em; }
.logos b { color:var(--text); font-family:var(--display); font-weight:600; letter-spacing:.02em; }

.products { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:56px; }
@media (max-width:980px) { .products { grid-template-columns:1fr; } }
.pcard { --c:var(--green); position:relative; padding:32px; border-radius:var(--r); background:linear-gradient(180deg,var(--panel),var(--bg2)); border:1px solid var(--line); overflow:hidden; transition:transform .3s, border-color .3s; display:flex; flex-direction:column; gap:14px; }
.pcard::before { content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1px; background:linear-gradient(160deg,var(--c),transparent 40%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.55; pointer-events:none; }
.pcard::after { content:''; position:absolute; width:300px; height:300px; right:-120px; top:-120px; background:radial-gradient(circle,var(--c),transparent 65%); opacity:.18; pointer-events:none; }
.pcard:hover { transform:translateY(-6px); }
.pcard.b { --c:var(--green); } .pcard.o { --c:var(--blue); } .pcard.f { --c:var(--purple); }
.pcard img.icon { width:64px; height:64px; border-radius:16px; }
.pcard h3 { font-size:26px; }
.pcard .role { color:var(--c); font-weight:800; font-size:13px; letter-spacing:.14em; text-transform:uppercase; }
.pcard p { color:var(--muted); margin:0; font-size:16px; }
.pcard ul { list-style:none; margin:6px 0 0; padding:0; display:grid; gap:9px; font-size:15px; }
.pcard li { padding-left:26px; position:relative; }
.pcard li::before { content:''; position:absolute; left:0; top:.5em; width:14px; height:14px; border-radius:5px; background:color-mix(in srgb,var(--c) 28%,transparent); border:1px solid var(--c); }
.pcard li::after { content:''; position:absolute; left:4px; top:calc(.5em + 4px); width:6px; height:6px; border-radius:2px; background:var(--c); }

/* flow */
.flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:14px; align-items:stretch; margin-top:56px; }
@media (max-width:980px) { .flow { grid-template-columns:1fr; } .flow .arrow { transform:rotate(90deg); justify-self:center; } }
.step { padding:26px; border-radius:var(--r); background:var(--panel); border:1px solid var(--line); }
.step small { color:var(--muted); font-weight:800; letter-spacing:.14em; font-size:12px; }
.step h3 { font-size:20px; margin:8px 0 10px; }
.step p { margin:0; color:var(--muted); font-size:15.5px; }
.arrow { align-self:center; color:var(--muted); font-size:26px; }

/* floor showcase */
.showcase { display:grid; grid-template-columns:1.05fr 1fr; gap:60px; align-items:center; margin-top:60px; }
@media (max-width:980px) { .showcase { grid-template-columns:1fr; gap:36px; } }
.showcase.rev { grid-template-columns:1fr 1.05fr; } .showcase.rev .shots { order:2; }
@media (max-width:980px) { .showcase.rev .shots { order:0; } }
.shots .screen { box-shadow:0 30px 90px -30px rgba(163,122,224,.5), 0 0 0 6px rgba(255,255,255,.025); }
.feat { display:grid; gap:20px; }
.feat h3 { font-size:clamp(22px,2.6vw,30px); font-weight:600; }
.feat p { color:var(--muted); margin:10px 0 0; }
.feat ul { list-style:none; padding:0; margin:14px 0 0; display:grid; gap:10px; }
.feat li { padding-left:30px; position:relative; }
.feat li::before { content:'✓'; position:absolute; left:0; color:var(--ok); font-weight:800; }
.pair { display:grid; grid-template-columns:1fr 38%; gap:18px; align-items:end; }
@media (max-width:560px) { .pair { grid-template-columns:1fr; } }

.chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:36px; }
.chip { padding:9px 16px; border-radius:999px; border:1px solid var(--line); background:var(--panel); font-size:14.5px; font-weight:600; color:#cfd6e6; }

/* pricing */
.pricing { background:linear-gradient(180deg,transparent,rgba(90,176,255,.05) 30%,transparent); }
.toggle { display:inline-flex; padding:5px; gap:2px; background:var(--panel); border:1px solid var(--line); border-radius:999px; }
.toggle button { border:0; background:transparent; color:var(--muted); padding:10px 22px; border-radius:999px; font:700 14px var(--body); cursor:pointer; }
.toggle button[aria-pressed="true"] { background:var(--text); color:#07080c; }
.toggle .save { color:var(--ok); font-size:12px; margin-left:6px; font-weight:800; }
.tabs { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:30px 0 8px; }
.tabs button { display:flex; gap:10px; align-items:center; border:1px solid var(--line); background:var(--panel); color:var(--muted); border-radius:14px; padding:10px 18px 10px 12px; font:700 15px var(--body); cursor:pointer; transition:.2s; }
.tabs button img { width:28px; height:28px; border-radius:8px; }
.tabs button[aria-selected="true"] { color:var(--text); border-color:#46506a; background:var(--panel2); box-shadow:0 8px 30px -14px #000; }
.plans { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:20px; margin-top:30px; text-align:left; }
.plan { position:relative; padding:30px; border-radius:var(--r); background:linear-gradient(180deg,var(--panel),var(--bg2)); border:1px solid var(--line); display:flex; flex-direction:column; gap:12px; }
.plan.top { border-color:#4b5a86; box-shadow:0 30px 80px -40px rgba(90,176,255,.7); }
.plan .ribbon { position:absolute; top:-12px; right:22px; background:linear-gradient(100deg,var(--green),var(--blue)); color:#04100c; font-size:12px; font-weight:800; letter-spacing:.08em; padding:5px 12px; border-radius:999px; }
.plan h3 { font-size:22px; } .plan .tag { color:var(--muted); font-size:15px; min-height:46px; margin:0; }
.plan .price { font-family:var(--display); font-size:44px; font-weight:800; line-height:1; letter-spacing:-.02em; }
.plan .price small { font:600 15px var(--body); color:var(--muted); margin-left:6px; letter-spacing:0; }
.plan .eq { color:var(--muted); font-size:13px; min-height:18px; }
.plan ul { list-style:none; margin:6px 0 10px; padding:0; display:grid; gap:9px; font-size:15px; flex:1; }
.plan li { padding-left:26px; position:relative; } .plan li::before { content:'✓'; position:absolute; left:0; color:var(--ok); font-weight:800; }
.plan li.inh { color:var(--muted); } .plan li.inh::before { content:'+'; color:var(--blue); }
.plan .btn { width:100%; }
.plan .soon { text-align:center; color:var(--muted); font-size:14px; padding:14px; border:1px dashed var(--line); border-radius:999px; }
.cloudbox { margin-top:30px; padding:34px; border-radius:var(--r); border:1px solid #5a4aa8; background:linear-gradient(135deg,#142038,#2a1c4d); display:grid; grid-template-columns:1fr auto; gap:26px; align-items:center; text-align:left; }
@media (max-width:760px) { .cloudbox { grid-template-columns:1fr; } }
.cloudbox h3 { font-size:28px; margin:10px 0 8px; } .cloudbox p { margin:0; color:#c9d0e2; }
.note { color:var(--muted); font-size:14px; margin-top:26px; }
.loading { color:var(--muted); padding:60px 0; }

/* launcher + faq */
.launcher { display:grid; grid-template-columns:1.1fr 1fr; gap:50px; align-items:center; padding:46px; border-radius:28px; background:linear-gradient(135deg,var(--panel),#161a2a); border:1px solid var(--line); }
@media (max-width:900px) { .launcher { grid-template-columns:1fr; padding:30px; } }
.launcher h2 { font-size:clamp(26px,3.4vw,40px); }
.launcher ol { margin:22px 0 28px; padding:0; list-style:none; display:grid; gap:14px; counter-reset:s; }
.launcher li { counter-increment:s; padding-left:46px; position:relative; color:#cfd6e6; }
.launcher li::before { content:counter(s); position:absolute; left:0; top:-2px; width:32px; height:32px; border-radius:50%; background:var(--panel2); border:1px solid var(--line); display:grid; place-items:center; font-weight:800; font-size:14px; color:var(--blue); }
.faq { max-width:820px; margin:50px auto 0; display:grid; gap:12px; text-align:left; }
details { border:1px solid var(--line); border-radius:16px; background:var(--panel); padding:0 24px; transition:border-color .2s; }
details[open] { border-color:#3a4766; }
summary { list-style:none; cursor:pointer; padding:20px 0; font-weight:700; font-size:17px; display:flex; justify-content:space-between; gap:16px; }
summary::-webkit-details-marker { display:none; } summary::after { content:'+'; color:var(--blue); font-size:24px; line-height:1; transition:transform .2s; }
details[open] summary::after { transform:rotate(45deg); }
details p { color:var(--muted); margin:0 0 22px; }

.final { text-align:center; }
.final .box { padding:72px 30px; border-radius:32px; border:1px solid var(--line); background:radial-gradient(500px 300px at 15% 0%,rgba(46,230,166,.14),transparent 70%),radial-gradient(500px 300px at 90% 100%,rgba(163,122,224,.2),transparent 70%),var(--panel); }
.final h2 { margin:0 auto; max-width:16ch; }

footer { border-top:1px solid var(--line); padding:46px 0 60px; color:var(--muted); font-size:14.5px; }
footer .row { display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; align-items:flex-start; }
footer img { height:22px; width:auto; margin-bottom:12px; }
footer nav { display:flex; gap:26px; flex-wrap:wrap; }
footer nav a:hover { color:var(--text); }
footer small { display:block; margin-top:28px; color:#6d768b; }

/* reveal */
.rv { opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.rv.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { .rv { opacity:1; transform:none; transition:none; } .stage .tag { animation:none; } html { scroll-behavior:auto; } }

/* legal pages */
.doc { max-width:780px; padding:70px 0 100px; }
.doc h1 { font-size:clamp(30px,5vw,46px); margin-bottom:24px; }
.doc h2 { font-size:22px; margin:36px 0 10px; max-width:none; } .doc p, .doc li { color:#c2cadb; } .doc .todo { padding:14px 18px; border:1px dashed #6b5a2a; background:#241e0e; color:#f0d58a; border-radius:12px; margin:0 0 26px; font-size:15px; }

/* ---------- product pages ---------- */
body { --c:var(--blue); }
.c { color:var(--c); }
.phero { position:relative; padding:84px 0 30px; isolation:isolate; }
.phero::before { content:''; position:absolute; inset:-160px 0 auto 0; height:760px; z-index:-1; background:radial-gradient(640px 380px at 15% 25%,color-mix(in srgb,var(--c) 22%,transparent),transparent 70%),radial-gradient(600px 400px at 85% 10%,rgba(163,122,224,.16),transparent 70%); }
.phead { max-width:860px; }
.prole { display:inline-flex; gap:12px; align-items:center; font-size:13px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--c); margin-bottom:20px; }
.prole img { width:40px; height:40px; border-radius:11px; }
.phero h1 { font-size:clamp(32px,5.6vw,66px); font-weight:800; margin:0 0 20px; max-width:18ch; }
.phero p.lead { font-size:clamp(17px,2vw,21px); color:var(--muted); max-width:42em; margin:0 0 28px; }
.phero .actions { display:flex; gap:14px; flex-wrap:wrap; }
figure.screen { margin:0; cursor:zoom-in; }
.screen.big { margin-top:52px; box-shadow:0 40px 120px -30px color-mix(in srgb,var(--c) 55%,transparent), 0 0 0 8px rgba(255,255,255,.03); }
.fgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:44px; }
@media (max-width:980px) { .fgrid { grid-template-columns:repeat(2,1fr); } } @media (max-width:620px) { .fgrid { grid-template-columns:1fr; } }
.fcard { padding:26px; border-radius:var(--r); background:linear-gradient(180deg,var(--panel),var(--bg2)); border:1px solid var(--line); position:relative; overflow:hidden; }
.fcard::before { content:''; position:absolute; left:0; top:22px; bottom:22px; width:3px; border-radius:3px; background:var(--c); }
.fcard h3 { font-size:18px; margin:0 0 8px; padding-left:8px; } .fcard p { margin:0; color:var(--muted); font-size:15.5px; padding-left:8px; }
.showcase .shots .screen { box-shadow:0 30px 90px -30px color-mix(in srgb,var(--c) 50%,transparent), 0 0 0 6px rgba(255,255,255,.025); }
.vsec { padding:80px 0; }
.vwrap { margin:36px auto 0; max-width:1040px; border-radius:18px; overflow:hidden; border:1px solid rgba(255,255,255,.1); background:#000; box-shadow:0 40px 110px -30px color-mix(in srgb,var(--c) 50%,transparent); }
.vwrap video { display:block; width:100%; height:auto; aspect-ratio:16/9; background:#000; }
.scns { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; }
@media (max-width:980px) { .scns { grid-template-columns:1fr; } }
.scn { padding:28px; border-radius:var(--r); background:linear-gradient(180deg,var(--panel),var(--bg2)); border:1px solid var(--line); display:flex; flex-direction:column; gap:14px; }
.scn .ex { align-self:flex-start; padding:4px 12px; border-radius:999px; font-size:12px; font-weight:800; letter-spacing:.06em; color:var(--c); border:1px solid color-mix(in srgb,var(--c) 45%,transparent); background:color-mix(in srgb,var(--c) 10%,transparent); }
.scn h3 { font-size:21px; } .scn .who { color:var(--muted); margin:0; font-size:15px; }
.scn ol { margin:0; padding:0; list-style:none; display:grid; gap:12px; counter-reset:n; }
.scn li { counter-increment:n; padding-left:40px; position:relative; color:#cfd6e6; font-size:15.5px; }
.scn li::before { content:counter(n); position:absolute; left:0; top:-1px; width:28px; height:28px; border-radius:50%; background:var(--panel2); border:1px solid var(--line); display:grid; place-items:center; font-weight:800; font-size:13px; color:var(--c); }
.scn .res { margin:auto 0 0; padding-top:14px; border-top:1px solid var(--line); color:var(--text); font-weight:600; font-size:15px; }
.scns:has(.scn.big) { grid-template-columns:1fr; } .scn.big { max-width:900px; margin:0 auto; width:100%; }
.chips2 { display:flex; gap:8px; flex-wrap:wrap; } .chips2 a { padding:5px 13px; border-radius:999px; font-size:13px; font-weight:800; color:var(--c); border:1px solid color-mix(in srgb,var(--c) 45%,transparent); background:color-mix(in srgb,var(--c) 10%,transparent); }
.tgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:18px; margin:40px auto 0; max-width:900px; text-align:left; }
.tcard { display:flex; gap:18px; align-items:center; padding:22px; border-radius:var(--r); background:var(--panel); border:1px solid var(--line); transition:transform .25s,border-color .25s; }
.tcard:hover { transform:translateY(-4px); border-color:#46506a; } .tcard img { width:52px; height:52px; border-radius:14px; flex:none; }
.tcard b { display:block; font-size:19px; font-family:var(--display); font-weight:600; } .tcard span { color:var(--muted); font-size:15px; } .tcard i { margin-left:auto; font-style:normal; color:var(--muted); font-size:22px; }
.lightbox { position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.88); display:grid; place-items:center; padding:30px; cursor:zoom-out; } .lightbox[hidden] { display:none; } .lightbox img { max-width:100%; max-height:100%; border-radius:12px; box-shadow:0 30px 100px #000; }
.night { list-style:none; margin:50px auto 0; padding:0; max-width:820px; position:relative; }
.night::before { content:''; position:absolute; left:67px; top:8px; bottom:8px; width:2px; background:linear-gradient(180deg,var(--green),var(--blue),var(--purple)); opacity:.5; }
.night li { display:grid; grid-template-columns:64px 1fr; gap:36px; padding:0 0 34px; position:relative; }
.night li::before { content:''; position:absolute; left:61px; top:8px; width:14px; height:14px; border-radius:50%; background:var(--bg); border:3px solid var(--blue); }
.night time { font:600 18px var(--display); color:var(--text); text-align:right; padding-top:2px; } .night h3 { font-size:20px; margin:0 0 6px; } .night p { margin:0 0 10px; color:var(--muted); }
.eyebrow { margin-bottom:0; }

/* ---------- home: links to the product pages ---------- */
a.more { display:inline-flex; gap:8px; align-items:center; margin-top:10px; font-weight:800; font-size:15px; color:var(--c,var(--blue)); } a.more i { font-style:normal; transition:transform .2s; } a.more:hover i { transform:translateX(5px); }
.pcard a.more { margin-top:auto; padding-top:8px; }
.tagc { display:inline-flex; gap:10px; align-items:center; font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--c); margin-bottom:14px; } .tagc img { width:28px; height:28px; border-radius:8px; }
.p-b .shots .screen { --c:#2ee6a6; } .p-o .shots .screen { --c:#5ab0ff; } .p-f .shots .screen { --c:#a37ae0; }
.p-b .shots .screen, .p-o .shots .screen, .p-f .shots .screen { box-shadow:0 30px 90px -30px color-mix(in srgb,var(--c) 55%,transparent), 0 0 0 6px rgba(255,255,255,.025); cursor:zoom-in; }
section#bilder .showcase { margin-top:84px; }
.phero ~ section .showcase { grid-template-columns:1.5fr 1fr; } .phero ~ section .showcase.rev { grid-template-columns:1fr 1.5fr; }
@media (max-width:980px) { .phero ~ section .showcase, .phero ~ section .showcase.rev { grid-template-columns:1fr; } }
.scn .who { margin:0; color:var(--muted); font-size:15px; }
/* a screen that stands upright (portrait) is shown at a sensible size */
figure.screen.portrait { max-width:360px; margin:0 auto; border-radius:22px; }
figure.screen.portrait img { width:100%; height:auto; }

/* video: the frame has a fixed 16:9 size and the video fills it, so the size never depends on the video itself */
.vwrap { position:relative; width:100%; max-width:1040px; aspect-ratio:16/9; overflow:visible; contain:layout; }
.vwrap video { position:absolute; left:0; top:0; width:100% !important; height:100% !important; max-width:100%; min-width:0; aspect-ratio:auto; object-fit:contain; border-radius:18px; background:#000; }