joh/AdvisoryBoardMeeting_june2026
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: joh:4270d13d1eb1fec0ea0224ed4acd1a28660bf880
Branches Tags
joh:main
..
compare: joh:eca79752f455a146e07b8fb38c1d9808ac1abb56
Branches Tags
joh:main

No commits in common. "4270d13d1eb1fec0ea0224ed4acd1a28660bf880" and "eca79752f455a146e07b8fb38c1d9808ac1abb56" have entirely different histories.
4270d13d1e ... eca79752f4

3 changed files with 147 additions and 302 deletions
Show stats Expand all files Collapse all files

290
assets/css/deck.css
View file

@ -276,20 +276,6 @@ img { display: block; max-width: 100%; }
.question-prompts span { white-space: nowrap; }
.question-prompts .sep { color: var(--ink-faint); font-style: normal; padding: 0 0.35em; }
/* Question slides: lift the text ~10% higher and drop a quiet Fenja
wordmark just above the menu. */
.q-slide .slide-inner { transform: translateY(-9vh); }
.q-fenja {
position: absolute;
left: 50%;
bottom: clamp(76px, 13vh, 128px);
transform: translateX(-50%);
width: clamp(96px, 10vw, 138px);
height: auto;
opacity: 0.82;
pointer-events: none;
}
/* ════════════════════ Logo lockups ════════════════════ */
/* The Bifrost logo: aurora arc above a Newsreader wordmark. Reusable. */
.bifrost-logo {
@ -377,13 +363,12 @@ img { display: block; max-width: 100%; }
}
.hero-eyebrow {
font-family: var(--font-sans);
font-size: clamp(1.5rem, 2.25vw, 2rem); /* +50% */
letter-spacing: 0.3em;
font-size: clamp(0.74rem, 1vw, 0.92rem);
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--ink-dim);
font-weight: 600;
/* Lifted higher above the wordmark. */
margin: 0 0 clamp(2.8rem, 8.5vh, 5.5rem);
margin: 0;
}
/* "Project Bifrost" wordmark — the old reveal's typography. */
.bifrost-name {
@ -393,7 +378,7 @@ img { display: block; max-width: 100%; }
line-height: 1.02;
letter-spacing: -0.03em;
color: var(--ink);
margin: clamp(1.3rem, 4vh, 2.8rem) 0 0; /* nudged lower */
margin: 0;
}
.bifrost-name .accent {
font-style: italic;
@ -403,16 +388,12 @@ img { display: block; max-width: 100%; }
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Lower line — same uppercase sans + ink-dim colour as the eyebrow. */
.hero-sub {
font-family: var(--font-sans);
font-style: normal;
font-size: clamp(1.5rem, 2.25vw, 2rem); /* matches the eyebrow, +50% */
letter-spacing: 0.3em;
text-transform: uppercase;
font-weight: 600;
color: var(--ink-dim);
margin: clamp(1.2rem, 3.5vh, 2.4rem) 0 0; /* dropped a little lower */
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(1.2rem, 2.1vw, 1.75rem);
color: var(--ink-soft);
margin: 0;
}
@media (prefers-reduced-motion: reduce) {
.js .bifrost-arc path { stroke-dashoffset: 0; }
@ -449,12 +430,8 @@ img { display: block; max-width: 100%; }
.agenda-row.is-break .agenda-label { color: var(--ink-dim); font-weight: 400; font-style: normal; }
/* ════════════════════ Slide 3 — Board / introductions ════════════════════ */
/* Wider container + slightly larger portraits keep the same air between
people (they just spread further out). */
#slide-board .slide-inner { max-width: 1320px; }
/* Only the title is lifted — transform leaves its layout box in place so
the portrait grid stays put. */
.board-head { text-align: center; margin-bottom: clamp(1.8rem, 4vh, 3rem); transform: translateY(-5vh); }
#slide-board .slide-inner { max-width: 1240px; }
.board-head { text-align: center; margin-bottom: clamp(1.8rem, 4vh, 3rem); }
.board-head .slide-title { margin-inline: auto; max-width: 20ch; }
.board-grid {
display: grid;
@ -462,9 +439,9 @@ img { display: block; max-width: 100%; }
gap: clamp(1rem, 2vw, 2rem) clamp(1rem, 2.2vw, 2.4rem);
}
.board-member { margin: 0; text-align: center; }
/* Portraits ~10% larger, centred in their (now wider) cell. */
/* Portraits at half size — sit centred in their cell, names lead. */
.board-portrait {
width: 52%;
width: 50%;
aspect-ratio: 1 / 1;
margin: 0 auto 0.9rem;
border-radius: var(--radius-lg);
@ -487,14 +464,14 @@ img { display: block; max-width: 100%; }
}
.bm-title {
font-family: var(--font-sans);
font-size: clamp(0.98rem, 1.21vw, 1.11rem); /* +20%, then +10% */
font-size: clamp(0.74rem, 0.92vw, 0.84rem);
color: var(--ink-soft);
margin: 0 0 0.15rem;
margin: 0 0 0.1rem;
line-height: 1.35;
}
.bm-company {
font-family: var(--font-sans);
font-size: clamp(0.87rem, 1.08vw, 1rem); /* +20%, then +10% */
font-size: clamp(0.66rem, 0.82vw, 0.76rem);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-dim);
@ -513,7 +490,7 @@ img { display: block; max-width: 100%; }
grid-template-rows: 1fr auto;
align-items: center;
justify-items: center;
padding-bottom: clamp(6rem, 12vh, 9rem); /* lift the supporter row off the bottom */
padding-bottom: clamp(4.5rem, 9vh, 6.5rem);
}
.mission-main {
align-self: center;
@ -523,29 +500,24 @@ img { display: block; max-width: 100%; }
gap: clamp(1.4rem, 3.5vh, 2.4rem);
}
.mission-fenja { width: clamp(240px, 32vw, 460px); height: auto; }
/* Values left-aligned under the wordmark — same box width as the logo,
one line (it may run a touch past the logo's right edge). */
.mission-values {
font-family: var(--font-sans);
font-weight: 600;
font-size: clamp(1.36rem, 2.42vw, 2.04rem); /* +40%, then -3% */
font-size: clamp(1rem, 1.8vw, 1.5rem);
letter-spacing: 0.01em;
color: var(--ink);
margin: 0;
width: clamp(240px, 32vw, 460px);
text-align: left;
white-space: nowrap;
}
/* Foot — pinned to the bottom row of the slide, full width so the logos
can spread out to the edges. */
.bifrost-logo.projbifrost { margin-top: clamp(0.3rem, 1.5vh, 1rem); }
.bifrost-logo.projbifrost .word em { font-style: italic; }
/* Foot — pinned to the bottom row of the slide. */
.mission-foot {
align-self: end;
justify-self: stretch;
width: 100%;
text-align: center;
display: grid;
justify-items: center;
gap: clamp(1.8rem, 4.5vh, 3rem); /* lift the caption a little off the logos */
gap: clamp(1.2rem, 3vh, 2rem);
}
.mission-foot .partner-caption {
font-size: clamp(0.85rem, 1.5vw, 1.2rem);
@ -555,31 +527,14 @@ img { display: block; max-width: 100%; }
font-weight: 600;
margin: 0;
}
/* Mission supporter logos — wide spacing between them, with per-logo
size adjustments. Innovationsfonden is the largest footprint, BII and
Datatilsynet held back. (Innovationsfonden's PNG is cropped tight so its
height reads true.) */
/* Spread across the full width, with an explicit horizontal margin on
every logo so each one carries its own breathing room (and the outer
marks no longer hug the screen edges). */
.partner-row.mission-logos {
width: 100%;
flex-wrap: nowrap;
justify-content: space-between;
gap: 0;
padding-inline: 5%; /* pull edges in → shrinks every space-between gap ~25% */
}
.mission-logos .partner-logo { margin-inline: clamp(0.32rem, 0.9vw, 1.09rem); } /* -20%, then -20% */
.mission-logos .partner-logo img {
height: clamp(34px, 4vw, 48px);
max-width: clamp(140px, 18vw, 230px);
/* Mission supporter logos — all the same height, bumped ~50%, with more air. */
.mission-logos { gap: clamp(2.4rem, 6vw, 5.5rem); }
.mission-logos .partner-logo img,
.mission-logos .partner-logo.tall img {
height: clamp(36px, 4.4vw, 56px);
max-width: clamp(150px, 22vw, 280px);
opacity: 0.82;
}
.mission-logos .partner-logo img.logo-inf { height: clamp(40px, 4.8vw, 58px); max-width: clamp(200px, 26vw, 300px); } /* +50% footprint */
.mission-logos .partner-logo img.logo-bii { height: clamp(27px, 3.2vw, 40px); } /* -20% */
.mission-logos .partner-logo img.logo-dt { height: clamp(41px, 4.84vw, 59px); } /* +5%, +10%, then +10% */
.mission-logos .partner-logo img.logo-ds { height: clamp(71px, 8.42vw, 101px); } /* +15%, +20%, +20%, then +15% */
.mission-logos .partner-logo img.logo-dcai { height: clamp(57px, 6.71vw, 80px); } /* +15%, +20%, then +10% */
/* Quiet partner-logo row (sandbox) */
.partner-row {
@ -609,22 +564,11 @@ img { display: block; max-width: 100%; }
optical weight matches the wide wordmark lockups beside them. */
.partner-logo.tall img { height: clamp(34px, 4vw, 52px); }
/* Larger, airier variant — sandbox slide. Logos are wide wordmarks, so
they're sized as large as fits side by side (width-capped); ds is the
bigger of the two. */
.partner-row.lg { gap: clamp(1.5rem, 4vw, 3rem); }
/* Larger, airier variant — sandbox slide: logos ~30% bigger than the
mission row, digitaliseringsstyrelsen a further 10% on top. */
.partner-row.lg { gap: clamp(2.4rem, 6vw, 5rem); }
.partner-row.lg .partner-logo img { height: clamp(39px, 4.7vw, 60px); opacity: 0.85; }
/* The two sandbox wordmarks sit side by side. */
.sandbox-logos {
width: 100%;
flex-direction: row;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
gap: clamp(1.5rem, 4vw, 3rem);
}
.partner-row.lg .partner-logo img.ds-logo { height: clamp(84px, 10.15vw, 125px); max-width: min(60vw, 580px); } /* -30% */
.partner-row.lg .partner-logo img.dt-logo { height: clamp(59px, 6.86vw, 83px); max-width: min(45vw, 367px); } /* -30% */
.partner-row.lg .partner-logo img.ds-logo { height: clamp(43px, 5.2vw, 66px); }
/* ════════════════════ Slide 6 — Pause ════════════════════ */
#slide-pause { }
@ -647,7 +591,7 @@ img { display: block; max-width: 100%; }
}
.pause-clock {
font-family: var(--font-sans);
font-size: clamp(1.08rem, 1.45vw, 1.26rem); /* +50% */
font-size: clamp(0.72rem, 0.95vw, 0.84rem);
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ink-dim);
@ -777,24 +721,47 @@ img { display: block; max-width: 100%; }
text-wrap: balance;
}
.section-title em { font-style: italic; font-weight: 460; color: var(--terracotta); }
/* One-line variant (Suverænitet divider) — fits on a single line, +25%. */
.section-title.one-line {
max-width: none;
white-space: nowrap;
font-size: clamp(1.55rem, 3.85vw, 3.6rem);
/* Reserved-points layout (slide 14) */
.approach-points {
list-style: none;
margin: clamp(1.5rem, 4vh, 2.5rem) 0 0;
padding: 0;
display: grid;
gap: clamp(0.7rem, 1.6vh, 1.1rem);
width: min(640px, 100%);
text-align: left;
}
.approach-points li {
display: flex;
align-items: center;
gap: 1rem;
padding: clamp(0.85rem, 1.8vh, 1.15rem) clamp(1.1rem, 2vw, 1.5rem);
border: 1px dashed rgba(56,56,49,0.2);
border-radius: var(--radius-md);
color: var(--ink-dim);
background: rgba(255,252,247,0.35);
}
.approach-points li::before {
content: "";
width: 8px; height: 8px;
border-radius: 50%;
background: linear-gradient(120deg, var(--aurora-2), var(--aurora-4));
flex: 0 0 auto;
}
.approach-points .ph-text {
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(0.95rem, 1.3vw, 1.1rem);
}
/* ════════════════════ Slide 13 — risk boxes (icon-art styling) ════════════════════
The original card: a coloured gradient header with a line icon, then a
body of number / name / lead / two bullets. */
.hl-inner { max-width: 1580px; }
.highlights-head { text-align: center; margin-bottom: clamp(1.2rem, 3vh, 2.2rem); }
.highlights-head .slide-title { font-size: clamp(2rem, 3.6vw, 3rem); }
/* ════════════════════ Slide 11 — Highlight boxes ════════════════════ */
#slide-highlights .slide-inner { max-width: 1140px; }
.highlights-head { text-align: center; margin-bottom: clamp(1.6rem, 4vh, 2.6rem); }
.highlight-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(0.9rem, 1.6vw, 1.4rem);
align-items: stretch;
gap: clamp(0.9rem, 1.8vw, 1.5rem);
}
.highlight-box {
position: relative;
@ -806,129 +773,52 @@ img { display: block; max-width: 100%; }
0 18px 36px -22px rgba(56,56,49,0.28);
display: flex;
flex-direction: column;
min-height: clamp(300px, 44vh, 420px);
}
.highlight-art {
position: relative;
height: clamp(160px, 23vh, 232px);
flex: 0 0 auto;
height: 42%;
display: grid;
place-items: center;
position: relative;
overflow: hidden;
}
.highlight-art svg { width: 38%; height: 38%; stroke: rgba(255,252,247,0.92); }
.highlight-art svg { width: 56%; height: 56%; }
.highlight-box[data-tone="terracotta"] .highlight-art { background: linear-gradient(150deg, #c98a78, #a4553b); }
.highlight-box[data-tone="indigo"] .highlight-art { background: linear-gradient(150deg, #7b91a6, #5a6d83); }
.highlight-box[data-tone="heather"] .highlight-art { background: linear-gradient(150deg, #a594a0, #6e5a86); }
.highlight-box[data-tone="ochre"] .highlight-art { background: linear-gradient(150deg, #d4b478, #b08a3e); }
.highlight-art svg { stroke: rgba(255,252,247,0.92); }
.highlight-body {
padding: clamp(1.3rem, 2.1vw, 1.9rem);
padding: clamp(1rem, 1.8vw, 1.4rem);
display: grid;
gap: 0.5rem;
align-content: start;
flex: 1;
}
.highlight-num {
position: absolute;
top: clamp(0.7rem, 1.4vh, 1.1rem);
left: clamp(0.9rem, 1.5vw, 1.4rem);
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(1.5rem, 2.1vw, 2rem);
line-height: 1;
color: rgba(255,252,247,0.9);
font-size: 0.85rem;
color: var(--ink-dim);
}
.highlight-name {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(1.55rem, 2.3vw, 2.1rem);
line-height: 1.1;
font-size: clamp(1.15rem, 1.7vw, 1.45rem);
line-height: 1.12;
letter-spacing: -0.015em;
color: var(--ink);
margin: 0;
}
.highlight-lead {
.highlight-note {
font-family: var(--font-sans);
font-weight: 600;
font-size: clamp(1.15rem, 1.5vw, 1.45rem);
line-height: 1.34;
color: var(--ink);
margin: 0.35rem 0 0;
}
.highlight-bullets { list-style: none; margin: 0.35rem 0 0; padding: 0; display: grid; gap: 0.55rem; }
.highlight-bullets li {
position: relative;
padding-left: 1.1rem;
font-family: var(--font-sans);
font-size: clamp(1.05rem, 1.35vw, 1.28rem);
line-height: 1.36;
font-size: clamp(0.78rem, 0.98vw, 0.9rem);
color: var(--ink-soft);
}
.highlight-bullets li::before {
content: "";
position: absolute;
left: 0; top: 0.55em;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--ink-faint);
}
/* ════════════════════ Slide 16 — solution boxes (green text cards) ════════════════════ */
.sol-inner { max-width: 1380px; }
.solution-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(0.8rem, 1.5vw, 1.4rem);
align-items: stretch;
}
.solution-box {
background: linear-gradient(180deg, rgba(109,140,124,0.12), rgba(255,252,247,0.65));
border-radius: var(--radius-md);
border-top: 3px solid var(--copper);
box-shadow:
0 0 0 0.5px rgba(56,56,49,0.06),
0 16px 32px -22px rgba(56,56,49,0.26);
padding: clamp(1.4rem, 2.1vw, 1.95rem) clamp(1.2rem, 1.7vw, 1.55rem);
display: grid;
gap: clamp(0.85rem, 1.7vh, 1.4rem);
align-content: start;
text-align: left;
}
.sol-head {
font-family: var(--font-sans);
font-weight: 700;
font-size: clamp(1.4rem, 1.85vw, 1.7rem);
letter-spacing: -0.01em;
line-height: 1.18;
color: var(--ink);
margin: 0;
}
.sol-head .sol-num { color: var(--copper); }
.sol-lead {
font-family: var(--font-serif);
font-size: clamp(1.4rem, 1.7vw, 1.62rem);
line-height: 1.3;
color: var(--ink);
margin: 0;
}
.sol-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(0.7rem, 1.4vh, 1.05rem); }
.sol-list li {
position: relative;
padding-left: 1.15rem;
font-family: var(--font-sans);
font-size: clamp(1.25rem, 1.5vw, 1.42rem);
line-height: 1.38;
color: var(--ink-soft);
}
.sol-list li::before {
content: "";
position: absolute;
left: 0; top: 0.6em;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--copper);
line-height: 1.45;
}
@media (max-width: 980px) {
.highlight-grid, .solution-grid { grid-template-columns: repeat(2, 1fr); }
.highlight-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ════════════════════ Slide 12 — Meme ════════════════════ */
@ -958,11 +848,11 @@ img { display: block; max-width: 100%; }
}
/* ════════════════════ Slide 15 — Regulatory sandbox ════════════════════ */
.sandbox-inner { text-align: center; display: grid; justify-items: center; gap: clamp(1.2rem, 3vh, 2rem); max-width: 980px; align-content: center; }
.sandbox-inner { text-align: center; display: grid; justify-items: center; gap: clamp(1.6rem, 4vh, 2.6rem); max-width: 980px; align-content: center; }
.sandbox-title {
font-family: var(--font-serif);
font-weight: 360;
font-size: clamp(2.86rem, 6.2vw, 5.1rem); /* +10% */
font-size: clamp(2.6rem, 5.6vw, 4.6rem);
line-height: 1.06;
letter-spacing: -0.025em;
color: var(--ink);
@ -972,7 +862,7 @@ img { display: block; max-width: 100%; }
}
.sandbox-body {
font-family: var(--font-serif);
font-size: clamp(1.38rem, 2.2vw, 1.8rem); /* +20% */
font-size: clamp(1.15rem, 1.8vw, 1.5rem);
line-height: 1.5;
color: var(--ink-soft);
margin: 0;
@ -981,9 +871,7 @@ img { display: block; max-width: 100%; }
}
/* ════════════════════ Slide 19 — Closing ════════════════════ */
/* "Tak for jeres rådgivning" sits above the arc; the full-size Project
Bifrost wordmark sits below it — a big gap splits them across the arc. */
.thanks-text { gap: clamp(11rem, 28vh, 19rem); transform: translateY(-6vh); }
#slide-thanks .hero-text { gap: clamp(1.6rem, 4vh, 2.8rem); }
.thanks-title {
font-family: var(--font-serif);
font-weight: 340;
@ -994,8 +882,6 @@ img { display: block; max-width: 100%; }
line-height: 1;
}
.thanks-title em { font-style: italic; font-weight: 440; }
/* "Project Bifrost" wordmark — same size as slide 1, sitting below the arc. */
.thanks-bifrost { font-size: clamp(3rem, 8vw, 6.5rem); margin: 0; }
/* Small responsive guard for very short viewports */
@media (max-height: 640px) {

BIN
assets/logos/innovationsfonden_logo_dk_teal_rgb_0.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 20 KiB

151
index.html
View file

@ -47,7 +47,7 @@
<div class="hero-text reveal">
<p class="hero-eyebrow">Velkommen til</p>
<h1 class="bifrost-name"><span>Project</span> <span class="accent">Bifrost</span></h1>
<p class="hero-sub">Advisory Meeting - 001</p>
<p class="hero-sub">001 Bifrost Advisory Meeting</p>
</div>
</section>
@ -88,7 +88,8 @@
<section class="slide" id="slide-board" data-label="Introduktioner">
<div class="slide-inner">
<div class="board-head reveal">
<h2 class="slide-title">Fenja AI&rsquo;s Advisory Board</h2>
<p class="eyebrow center">Rådgivning &amp; vejledning</p>
<h2 class="slide-title">Mød Fenja AI&rsquo;s <em>Advisory Board</em></h2>
</div>
<div class="board-grid reveal">
<figure class="board-member">
@ -108,9 +109,9 @@
</figcaption>
</figure>
<figure class="board-member">
<div class="board-portrait"><img src="assets/board/ulla-nygaard-eliassen.jpg" alt="Ulla Eliassen" /></div>
<div class="board-portrait"><img src="assets/board/ulla-nygaard-eliassen.jpg" alt="Ulla Nygaard Eliassen" /></div>
<figcaption>
<p class="bm-name">Ulla Eliassen</p>
<p class="bm-name">Ulla Nygaard Eliassen</p>
<p class="bm-title">Associeret direktør, forbedringsprojekter</p>
<p class="bm-company">Novo Nordisk</p>
</figcaption>
@ -164,27 +165,30 @@
<div class="mission-main reveal">
<img class="mission-fenja" src="assets/img/fenja-wordmark-black.svg" alt="Fenja AI" />
<p class="mission-values">Sovereign. Trusted. Innovative.</p>
<span class="bifrost-logo projbifrost">
<svg class="arc" viewBox="0 0 100 50"><path d="M5 45 Q50 -6 95 45" fill="none" stroke="url(#bifrostAurora)" stroke-width="3.5" stroke-linecap="round"/></svg>
<span class="word">Project <em>Bifrost</em></span>
</span>
</div>
<div class="mission-foot">
<p class="partner-caption">Støttet af &amp; i samarbejde med</p>
<div class="partner-row mission-logos">
<div class="partner-logo"><img class="logo-inf" src="assets/logos/innovationsfonden_logo_dk_teal_rgb_0.png" alt="Innovationsfonden" /></div>
<div class="partner-logo"><img class="logo-bii" src="assets/logos/BII_Logo_Petroleum_RGB.png" alt="BioInnovation Institute" /></div>
<div class="partner-logo"><img class="logo-dt" src="assets/logos/datatilsynet.png" alt="Datatilsynet" /></div>
<div class="partner-logo"><img class="logo-ds" src="assets/logos/digitaliseringsstyrelsen.png" alt="Digitaliseringsstyrelsen" /></div>
<div class="partner-logo"><img class="logo-dcai" src="assets/logos/dcai-logo-white.png" alt="Gefion · DCAI" /></div>
<div class="partner-logo"><img src="assets/logos/innovationsfonden_logo_dk_teal_rgb_0.png" alt="Innovationsfonden" /></div>
<div class="partner-logo"><img src="assets/logos/BII_Logo_Petroleum_RGB.png" alt="BioInnovation Institute" /></div>
<div class="partner-logo"><img src="assets/logos/datatilsynet.png" alt="Datatilsynet" /></div>
<div class="partner-logo"><img src="assets/logos/digitaliseringsstyrelsen.png" alt="Digitaliseringsstyrelsen" /></div>
<div class="partner-logo"><img src="assets/logos/dcai-logo-white.png" alt="Gefion · DCAI" /></div>
</div>
</div>
</section>
<!-- ░░░ 5 — Big question ░░░ -->
<section class="slide q-slide" id="slide-q1" data-label="Spørgsmål">
<section class="slide" id="slide-q1" data-label="Spørgsmål">
<div class="slide-inner reveal">
<div class="question">
<p class="question-text">&ldquo;Hvordan gør vi Projekt Bifrost til en <em>success</em> — for jer, for platformen, for dansk AI-suverænitet?&rdquo;</p>
</div>
</div>
<img class="q-fenja" src="assets/img/fenja-wordmark-black.svg" alt="Fenja AI" />
</section>
<!-- ░░░ 6 — Pause ░░░ -->
@ -209,7 +213,7 @@
<section class="arch-group">
<header class="arch-group-head">
<span class="arch-group-label">Foundation</span>
<span class="arch-group-caption">Din AI</span>
<span class="arch-group-caption">Suveræn af design</span>
</header>
<div class="arch-cards c3">
<article class="arch-card">
@ -299,13 +303,12 @@
</section>
<!-- ░░░ 9 — Question ░░░ -->
<section class="slide q-slide" id="slide-q2" data-label="Spørgsmål">
<section class="slide" id="slide-q2" data-label="Spørgsmål">
<div class="slide-inner reveal">
<div class="question">
<p class="question-text">&ldquo;Hvilke konkrete AI-features ville skabe størst <em>værdi</em> for dig eller din organisation, hvis I fik adgang til dem i morgen?&rdquo;</p>
</div>
</div>
<img class="q-fenja" src="assets/img/fenja-wordmark-black.svg" alt="Fenja AI" />
</section>
<!-- ░░░ 10 — Roadmap ░░░ -->
@ -316,87 +319,71 @@
</section>
<!-- ░░░ 11 — Question ░░░ -->
<section class="slide q-slide" id="slide-q3" data-label="Spørgsmål">
<section class="slide" id="slide-q3" data-label="Spørgsmål">
<div class="slide-inner reveal">
<div class="question">
<p class="question-text">&ldquo;Hvor ser I de største <em>barrierer</em> for praktisk anvendelse af AI i hverdagen?&rdquo;</p>
</div>
</div>
<img class="q-fenja" src="assets/img/fenja-wordmark-black.svg" alt="Fenja AI" />
</section>
<!-- ░░░ 12 — Section divider: Sovereignty ░░░ -->
<section class="slide section-divider" id="slide-sov" data-label="Suverænitet">
<div class="slide-inner reveal">
<h2 class="section-title one-line">Suverænitet, Sikkerhed &amp; Governance</h2>
<img class="divider-fenja" src="assets/img/fenja-wordmark-black.svg" alt="Fenja AI" />
<h2 class="section-title">Suverænitet, Sikkerhed &amp; Governance</h2>
</div>
</section>
<!-- ░░░ 13 — Highlight boxes ░░░ -->
<section class="slide" id="slide-highlights" data-label="Risici">
<div class="slide-inner hl-inner">
<div class="slide-inner">
<div class="highlights-head reveal">
<h2 class="slide-title">Hvorfor suverænitet er vigtigt når det gælder <em>AI</em></h2>
<p class="eyebrow center">Hvorfor suverænitet betyder noget</p>
<h2 class="slide-title">Fire grunde til at <em>tænke sig om</em></h2>
</div>
<div class="highlight-grid reveal">
<article class="highlight-box" data-tone="indigo">
<div class="highlight-art">
<span class="highlight-num">01</span>
<svg viewBox="0 0 24 24" fill="none" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 16a4 4 0 0 1 0-8 5 5 0 0 1 9.6-1.5A4.5 4.5 0 0 1 18 16z"/><path d="M9 20l1.5-3M13 20l1.5-3"/></svg>
</div>
<div class="highlight-body">
<span class="highlight-num">01</span>
<h3 class="highlight-name">US Cloud Act</h3>
<p class="highlight-lead">Amerikanske myndigheder kan få adgang til dine data. Også når de ligger i EU.</p>
<ul class="highlight-bullets">
<li>Vælger du en amerikansk udbyder, gælder amerikansk lov. Også når data står i EU.</li>
<li>Microsoft har under ed indrømmet, at de ikke kan garantere suverænitet. Heller ikke i deres egen &ldquo;sovereign cloud&rdquo;.</li>
</ul>
<p class="highlight-note">Amerikansk lovgivning kan give myndigheder adgang til data hos amerikanske udbydere — uanset hvor data fysisk ligger.</p>
</div>
</article>
<article class="highlight-box" data-tone="terracotta">
<div class="highlight-art">
<span class="highlight-num">02</span>
<svg viewBox="0 0 24 24" fill="none" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.8 2.6 2.8 15.4 0 18M12 3c-2.8 2.6-2.8 15.4 0 18"/></svg>
</div>
<div class="highlight-body">
<span class="highlight-num">02</span>
<h3 class="highlight-name">Geopolitisk uro</h3>
<p class="highlight-lead">Alliancer skifter. Det gør ét lands teknologi til en risiko, du ikke selv styrer.</p>
<ul class="highlight-bullets">
<li>Told og eksportrestriktioner kan ramme uden varsel og sende prisen op.</li>
<li>Er du afhængig af ét lands teknologi, bliver din drift en brik i andres forhandlinger.</li>
</ul>
<p class="highlight-note">Skiftende alliancer og handelspolitik gør afhængighed af enkelte landes teknologi til en strategisk risiko.</p>
</div>
</article>
<article class="highlight-box" data-tone="heather">
<div class="highlight-art">
<span class="highlight-num">03</span>
<svg viewBox="0 0 24 24" fill="none" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="3.4"/><path d="M5.5 20a6.5 6.5 0 0 1 13 0z"/><path d="M17 3l.9 1.9L20 5.3l-1.5 1.4.4 2.1L17 7.8l-1.9 1 .4-2.1L14 5.3l2.1-.4z"/></svg>
</div>
<div class="highlight-body">
<h3 class="highlight-name">Fable 5 / Mythos</h3>
<p class="highlight-lead">En regering kan lukke din AI med ét brev.</p>
<ul class="highlight-bullets">
<li>Den 1. juni 2026 lukkede USA adgangen til Anthropics bedste modeller, få dage efter de var udkommet.</li>
<li>Alle brugere uden for USA mistede adgangen på timer. Uanset hvad kontrakten sagde.</li>
</ul>
<span class="highlight-num">03</span>
<h3 class="highlight-name">Fable 5 — kun for amerikanske statsborgere</h3>
<p class="highlight-note">Når de mest avancerede modeller forbeholdes bestemte nationaliteter, står resten uden adgang til frontteknologien.</p>
</div>
</article>
<article class="highlight-box" data-tone="ochre">
<div class="highlight-art">
<span class="highlight-num">04</span>
<svg viewBox="0 0 24 24" fill="none" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/><circle cx="12" cy="15.5" r="1.2"/></svg>
</div>
<div class="highlight-body">
<span class="highlight-num">04</span>
<h3 class="highlight-name">Vendor lock-in</h3>
<p class="highlight-lead">Lock-in på data var til at leve med. På intelligensen er det en anden sag.</p>
<ul class="highlight-bullets">
<li>Vi så det med dataplatforme. Da udbyderne havde markedet, steg priserne.</li>
<li>Bind ikke hele forretningen til én udbyders model.</li>
</ul>
<p class="highlight-note">Bindes I til én leverandørs lukkede økosystem, mister I forhandlingskraft, fleksibilitet og kontrol over fremtiden.</p>
</div>
</article>
</div>
@ -414,7 +401,7 @@
</section>
<!-- ░░░ 15 — Question ░░░ -->
<section class="slide q-slide" id="slide-q4" data-label="Spørgsmål">
<section class="slide" id="slide-q4" data-label="Spørgsmål">
<div class="slide-inner reveal">
<div class="question">
<p class="question-text">&ldquo;Hvad er vigtigst for jer, når AI skal bruges <em>sikkert</em> og ansvarligt i en organisation?&rdquo;</p>
@ -423,76 +410,41 @@
</p>
</div>
</div>
<img class="q-fenja" src="assets/img/fenja-wordmark-black.svg" alt="Fenja AI" />
</section>
<!-- ░░░ 16 — Our approach (solution boxes) ░░░ -->
<section class="slide" id="slide-approach" data-label="Vores tilgang">
<div class="slide-inner sol-inner">
<div class="highlights-head reveal">
<p class="eyebrow center">Vores tilgang til suverænitet, sikkerhed &amp; governance</p>
<h2 class="slide-title">Fire <em>svar</em> på de samme bekymringer</h2>
</div>
<div class="solution-grid reveal">
<article class="solution-box">
<p class="sol-head">Datasuverænitet by design</p>
<p class="sol-lead">Svaret på Cloud Act. Et EU-datacenter er ikke nok.</p>
<ul class="sol-list">
<li>Kører i jeres eget miljø. Data forlader aldrig jeres perimeter.</li>
<li>Ingen ekstern udbyder mellem dig og din intelligens. Ingen Cloud Act-bagdør.</li>
<!-- ░░░ 16 — Section divider + reserved points ░░░ -->
<section class="slide section-divider" id="slide-approach" data-label="Vores tilgang">
<div class="slide-inner reveal">
<img class="divider-fenja" src="assets/img/fenja-wordmark-black.svg" alt="Fenja AI" />
<h2 class="section-title">Vores tilgang til <em>Suverænitet</em>, Sikkerhed &amp; Governance</h2>
<ul class="approach-points" aria-label="Punkter tilføjes senere">
<li><span class="ph-text">Punkt tilføjes</span></li>
<li><span class="ph-text">Punkt tilføjes</span></li>
<li><span class="ph-text">Punkt tilføjes</span></li>
<li><span class="ph-text">Punkt tilføjes</span></li>
</ul>
</article>
<article class="solution-box">
<p class="sol-head">Driftssikkerhed &amp; kontinuitet</p>
<p class="sol-lead">Svaret på Fable 5-lukningen. Ingen kill-switch udefra.</p>
<ul class="sol-list">
<li>Modellen og vægtene ligger hos dig. Ingen kan slukke den med et brev.</li>
<li>Drift og failover er jeres egen. Ingen ekstern API at miste.</li>
</ul>
</article>
<article class="solution-box">
<p class="sol-head">Sikkerhed i flere lag</p>
<p class="sol-lead">Sikkerhed er en del af fundamentet, ikke en feature ovenpå.</p>
<ul class="sol-list">
<li>Kører bag jeres egne firewalls. Jeres sikkerhedsstack gælder også AI&rsquo;en.</li>
<li>Fuldt auditspor lokalt. Loggene forlader aldrig huset.</li>
</ul>
</article>
<article class="solution-box">
<p class="sol-head">Governance &amp; frihed fra lock-in</p>
<p class="sol-lead">Svaret på vendor lock-in og geopolitisk afhængighed.</p>
<ul class="sol-list">
<li>Modelagnostisk. Skift eller kombinér modeller uden at bygge om.</li>
<li>Ingen forbrugsbaseret afhængighed. Prisen kan ikke skrues op udefra.</li>
</ul>
</article>
</div>
</div>
</section>
<!-- ░░░ 17 — Regulatory sandbox ░░░ -->
<section class="slide" id="slide-sandbox" data-label="Sandkasse">
<div class="slide-inner reveal sandbox-inner">
<h2 class="sandbox-title">Den Regulatoriske<br>AI-sandkasse</h2>
<h2 class="sandbox-title">Regulatorisk AI-sandkasse</h2>
<p class="sandbox-body">Fenja AI er optaget i Den Regulatoriske AI-sandkasse — et forløb under Datatilsynet og Digitaliseringsstyrelsen, hvor udvalgte virksomheder udvikler og afprøver deres AI i tæt dialog med myndighederne og inden for de regulatoriske rammer. Vi er en ud af kun to virksomheder, som er blevet optaget i år.</p>
<div class="partner-row lg sandbox-logos">
<div class="partner-logo"><img class="ds-logo" src="assets/logos/digitaliseringsstyrelsen.png" alt="Digitaliseringsstyrelsen" /></div>
<div class="partner-logo"><img class="dt-logo" src="assets/logos/datatilsynet.png" alt="Datatilsynet" /></div>
<div class="partner-logo"><img src="assets/logos/datatilsynet.png" alt="Datatilsynet" /></div>
</div>
</div>
</section>
<!-- ░░░ 18 — Question ░░░ -->
<section class="slide q-slide" id="slide-q5" data-label="Spørgsmål">
<section class="slide" id="slide-q5" data-label="Spørgsmål">
<div class="slide-inner reveal">
<div class="question">
<p class="question-text">&ldquo;Hvilke krav eller bekymringer skal være <em>håndteret</em>, før I ville være trygge ved at bruge en AI-platform på tværs af vigtige forretningsprocesser?&rdquo;</p>
</div>
</div>
<img class="q-fenja" src="assets/img/fenja-wordmark-black.svg" alt="Fenja AI" />
</section>
<!-- ░░░ 19 — Closing (inspired by the welcome arc) ░░░ -->
@ -504,9 +456,16 @@
<path class="arc-thin" pathLength="1" d="M 80 420 Q 700 -20 1320 420"/>
</svg>
</div>
<div class="hero-text reveal thanks-text">
<h2 class="thanks-title">Tak for <em>jeres rådgivning</em></h2>
<p class="bifrost-name thanks-bifrost"><span>Project</span> <span class="accent">Bifrost</span></p>
<div class="hero-text reveal">
<h2 class="thanks-title">Tak for <em>i dag</em></h2>
<div class="brand-lockup">
<img class="fenja-mark" src="assets/img/fenja-wordmark-black.svg" alt="Fenja AI" />
<span class="dot-sep">·</span>
<span class="bifrost-logo">
<svg class="arc" viewBox="0 0 100 50"><path d="M5 45 Q50 -6 95 45" fill="none" stroke="url(#bifrostAurora)" stroke-width="3.5" stroke-linecap="round"/></svg>
<span class="word"><em>Bifrost</em></span>
</span>
</div>
</div>
</section>