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

deck: third round — content boxes, hero/logo polish

Browse source 
- Slides 13 & 16: redesign the boxes as text-forward cards (number +
  title, bold lead, three bullets) with full new Danish copy; slide 16
  becomes the green 'solutions' answer to slide 13's concerns.
- Slide 1: 'Bifrost Advisory Meeting - 001' now matches 'Velkommen til'
  (uppercase sans, ink-dim); both +50%; eyebrow lifted, wordmark lowered.
- Slide 3: title lifted, titles/companies +10%, portraits +10% spread
  wider (same air between people).
- Slide 4: 'Sovereign. Trusted. Innovative.' +40%; logos spread edge to
  edge; DCAI + Digitaliseringsstyrelsen +10%, Datatilsynet +5%.
- Slide 12: title above the logo, +25%.
- Slide 17: title 'Den Regulatoriske AI-sandkasse' on two lines;
  Digitaliseringsstyrelsen +50%, Datatilsynet +30%.
- Slide 19: full-size Project Bifrost wordmark below the arc.
- Remove the dead reserved-points layout.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jonathan Hvid 2026-06-18 15:10:24 +02:00
parent b95999bc04
commit c775e02d3d
2 changed files with 184 additions and 155 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

208
assets/css/deck.css
View file

@ -377,13 +377,13 @@ img { display: block; max-width: 100%; }
} }
.hero-eyebrow { .hero-eyebrow {
font-family: var(--font-sans); font-family: var(--font-sans);
font-size: clamp(1rem, 1.5vw, 1.35rem); /* larger */ font-size: clamp(1.5rem, 2.25vw, 2rem); /* +50% */
letter-spacing: 0.32em; letter-spacing: 0.3em;
text-transform: uppercase; text-transform: uppercase;
color: var(--ink-dim); color: var(--ink-dim);
font-weight: 600; font-weight: 600;
/* Lifted higher above the wordmark. */ /* Lifted higher above the wordmark. */
margin: 0 0 clamp(1rem, 4vh, 2.6rem); margin: 0 0 clamp(1.8rem, 5.5vh, 3.6rem);
} }
/* "Project Bifrost" wordmark — the old reveal's typography. */ /* "Project Bifrost" wordmark — the old reveal's typography. */
.bifrost-name { .bifrost-name {
@ -393,7 +393,7 @@ img { display: block; max-width: 100%; }
line-height: 1.02; line-height: 1.02;
letter-spacing: -0.03em; letter-spacing: -0.03em;
color: var(--ink); color: var(--ink);
margin: clamp(0.4rem, 1.8vh, 1.4rem) 0 0; /* nudged slightly lower */ margin: clamp(1.3rem, 4vh, 2.8rem) 0 0; /* nudged lower */
} }
.bifrost-name .accent { .bifrost-name .accent {
font-style: italic; font-style: italic;
@ -403,12 +403,15 @@ img { display: block; max-width: 100%; }
background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
/* Lower line — same uppercase sans + ink-dim colour as the eyebrow. */
.hero-sub { .hero-sub {
font-family: var(--font-serif); font-family: var(--font-sans);
font-style: normal; /* italic removed */ font-style: normal;
font-size: clamp(2.4rem, 4.2vw, 3.5rem); /* ~double */ font-size: clamp(1.5rem, 2.25vw, 2rem); /* matches the eyebrow, +50% */
letter-spacing: -0.02em; letter-spacing: 0.3em;
color: var(--ink-soft); text-transform: uppercase;
font-weight: 600;
color: var(--ink-dim);
margin: 0; margin: 0;
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
@ -446,7 +449,9 @@ img { display: block; max-width: 100%; }
.agenda-row.is-break .agenda-label { color: var(--ink-dim); font-weight: 400; font-style: normal; } .agenda-row.is-break .agenda-label { color: var(--ink-dim); font-weight: 400; font-style: normal; }
/* ════════════════════ Slide 3 — Board / introductions ════════════════════ */ /* ════════════════════ Slide 3 — Board / introductions ════════════════════ */
#slide-board .slide-inner { max-width: 1240px; } /* Wider container + slightly larger portraits keep the same air between
people (they just spread further out). Whole block lifted a touch. */
#slide-board .slide-inner { max-width: 1320px; transform: translateY(-4vh); }
.board-head { text-align: center; margin-bottom: clamp(1.8rem, 4vh, 3rem); } .board-head { text-align: center; margin-bottom: clamp(1.8rem, 4vh, 3rem); }
.board-head .slide-title { margin-inline: auto; max-width: 20ch; } .board-head .slide-title { margin-inline: auto; max-width: 20ch; }
.board-grid { .board-grid {
@ -455,9 +460,9 @@ img { display: block; max-width: 100%; }
gap: clamp(1rem, 2vw, 2rem) clamp(1rem, 2.2vw, 2.4rem); gap: clamp(1rem, 2vw, 2rem) clamp(1rem, 2.2vw, 2.4rem);
} }
.board-member { margin: 0; text-align: center; } .board-member { margin: 0; text-align: center; }
/* Portraits at half size — sit centred in their cell, names lead. */ /* Portraits ~10% larger, centred in their (now wider) cell. */
.board-portrait { .board-portrait {
width: 50%; width: 52%;
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
margin: 0 auto 0.9rem; margin: 0 auto 0.9rem;
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
@ -480,14 +485,14 @@ img { display: block; max-width: 100%; }
} }
.bm-title { .bm-title {
font-family: var(--font-sans); font-family: var(--font-sans);
font-size: clamp(0.89rem, 1.1vw, 1.01rem); /* +20% */ font-size: clamp(0.98rem, 1.21vw, 1.11rem); /* +20%, then +10% */
color: var(--ink-soft); color: var(--ink-soft);
margin: 0 0 0.15rem; margin: 0 0 0.15rem;
line-height: 1.35; line-height: 1.35;
} }
.bm-company { .bm-company {
font-family: var(--font-sans); font-family: var(--font-sans);
font-size: clamp(0.79rem, 0.98vw, 0.91rem); /* +20% */ font-size: clamp(0.87rem, 1.08vw, 1rem); /* +20%, then +10% */
letter-spacing: 0.14em; letter-spacing: 0.14em;
text-transform: uppercase; text-transform: uppercase;
color: var(--ink-dim); color: var(--ink-dim);
@ -519,7 +524,7 @@ img { display: block; max-width: 100%; }
.mission-values { .mission-values {
font-family: var(--font-sans); font-family: var(--font-sans);
font-weight: 600; font-weight: 600;
font-size: clamp(1rem, 1.8vw, 1.5rem); font-size: clamp(1.4rem, 2.5vw, 2.1rem); /* +40% */
letter-spacing: 0.01em; letter-spacing: 0.01em;
color: var(--ink); color: var(--ink);
margin: 0; margin: 0;
@ -544,15 +549,24 @@ img { display: block; max-width: 100%; }
size adjustments. Innovationsfonden is the largest footprint, BII and size adjustments. Innovationsfonden is the largest footprint, BII and
Datatilsynet held back. (Innovationsfonden's PNG is cropped tight so its Datatilsynet held back. (Innovationsfonden's PNG is cropped tight so its
height reads true.) */ height reads true.) */
.mission-logos { gap: clamp(2.75rem, 5.8vw, 5.8rem); } /* Spread the logos across the full width — they push out to the sides
with maximum air between them. */
.mission-logos {
width: 100%;
flex-wrap: nowrap;
justify-content: space-between;
gap: clamp(1rem, 2.5vw, 2.5rem);
}
.mission-logos .partner-logo img { .mission-logos .partner-logo img {
height: clamp(34px, 4vw, 48px); height: clamp(34px, 4vw, 48px);
max-width: clamp(140px, 20vw, 250px); max-width: clamp(140px, 18vw, 230px);
opacity: 0.82; opacity: 0.82;
} }
.mission-logos .partner-logo img.logo-inf { height: clamp(40px, 4.8vw, 58px); max-width: clamp(200px, 28vw, 320px); } /* +50% footprint */ .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-bii { height: clamp(27px, 3.2vw, 40px); } /* -20% */
.mission-logos .partner-logo img.logo-dt { height: clamp(30px, 3.6vw, 45px); } /* -10% */ .mission-logos .partner-logo img.logo-dt { height: clamp(32px, 3.8vw, 47px); } /* -10%, then +5% */
.mission-logos .partner-logo img.logo-ds { height: clamp(37px, 4.4vw, 53px); } /* +10% */
.mission-logos .partner-logo img.logo-dcai { height: clamp(37px, 4.4vw, 53px); } /* +10% */
/* Quiet partner-logo row (sandbox) */ /* Quiet partner-logo row (sandbox) */
.partner-row { .partner-row {
@ -586,7 +600,8 @@ img { display: block; max-width: 100%; }
mission row, digitaliseringsstyrelsen a further 10% on top. */ mission row, digitaliseringsstyrelsen a further 10% on top. */
.partner-row.lg { gap: clamp(2.4rem, 6vw, 5rem); } .partner-row.lg { gap: clamp(2.4rem, 6vw, 5rem); }
.partner-row.lg .partner-logo img { height: clamp(39px, 4.7vw, 60px); opacity: 0.85; } .partner-row.lg .partner-logo img { height: clamp(39px, 4.7vw, 60px); opacity: 0.85; }
.partner-row.lg .partner-logo img.ds-logo { height: clamp(47px, 5.7vw, 73px); } .partner-row.lg .partner-logo img.ds-logo { height: clamp(70px, 8.5vw, 110px); } /* +50% */
.partner-row.lg .partner-logo img.dt-logo { height: clamp(51px, 6.1vw, 78px); } /* +30% */
/* ════════════════════ Slide 6 — Pause ════════════════════ */ /* ════════════════════ Slide 6 — Pause ════════════════════ */
#slide-pause { } #slide-pause { }
@ -739,107 +754,88 @@ img { display: block; max-width: 100%; }
text-wrap: balance; text-wrap: balance;
} }
.section-title em { font-style: italic; font-weight: 460; color: var(--terracotta); } .section-title em { font-style: italic; font-weight: 460; color: var(--terracotta); }
/* One-line variant (Suverænitet divider) — fits on a single line. */ /* One-line variant (Suverænitet divider) — fits on a single line, +25%. */
.section-title.one-line { .section-title.one-line {
max-width: none; max-width: none;
white-space: nowrap; white-space: nowrap;
font-size: clamp(1.3rem, 3.1vw, 2.9rem); font-size: clamp(1.55rem, 3.85vw, 3.6rem);
} }
/* Reserved-points layout (slide 14) */ /* ════════════════════ Highlight / solution boxes (slides 13 & 16) ════════════════════
.approach-points { Text-forward cards: number + title, a bold lead, three supporting
list-style: none; bullets. A coloured top rule carries the category; the green-washed
margin: clamp(1.5rem, 4vh, 2.5rem) 0 0; `.solutions` variant signals "these are the answers". */
padding: 0; .hl-inner { max-width: 1460px; }
display: grid; .highlights-head { text-align: center; margin-bottom: clamp(0.8rem, 2.2vh, 1.6rem); }
gap: clamp(0.7rem, 1.6vh, 1.1rem); .highlights-head .slide-title { font-size: clamp(1.5rem, 2.8vw, 2.3rem); }
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 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 { .highlight-grid {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
gap: clamp(0.9rem, 1.8vw, 1.5rem); gap: clamp(0.8rem, 1.5vw, 1.4rem);
align-items: stretch;
} }
.highlight-box { .highlight-box {
position: relative; --tone: var(--ink-dim);
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--paper-high); background: var(--paper-high);
border-radius: var(--radius-md);
border-top: 3px solid var(--tone);
box-shadow: box-shadow:
0 0 0 0.5px rgba(56,56,49,0.06), 0 0 0 0.5px rgba(56,56,49,0.06),
0 18px 36px -22px rgba(56,56,49,0.28); 0 16px 32px -22px rgba(56,56,49,0.26);
display: flex; padding: clamp(1rem, 1.6vw, 1.45rem) clamp(1rem, 1.5vw, 1.3rem) clamp(1.1rem, 1.8vw, 1.5rem);
flex-direction: column;
min-height: clamp(300px, 44vh, 420px);
}
.highlight-art {
height: 42%;
display: grid; display: grid;
place-items: center; gap: clamp(0.5rem, 1vh, 0.85rem);
position: relative;
overflow: hidden;
}
.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(1rem, 1.8vw, 1.4rem);
display: grid;
gap: 0.5rem;
align-content: start; align-content: start;
flex: 1; text-align: left;
} }
.highlight-num { .highlight-box[data-tone="indigo"] { --tone: var(--indigo); }
font-family: var(--font-serif); .highlight-box[data-tone="terracotta"] { --tone: var(--terracotta); }
font-style: italic; .highlight-box[data-tone="heather"] { --tone: var(--heather); }
font-size: 0.85rem; .highlight-box[data-tone="ochre"] { --tone: var(--ochre); }
color: var(--ink-dim); .highlight-box[data-tone="copper"] { --tone: var(--copper); }
/* Solutions — quiet green wash so the slide reads as the answers. */
.highlight-grid.solutions .highlight-box {
--tone: var(--copper);
background: linear-gradient(180deg, rgba(109,140,124,0.12), rgba(255,252,247,0.65));
} }
.highlight-name { .hl-head {
font-family: var(--font-serif); font-family: var(--font-sans);
font-weight: 400; font-weight: 700;
font-size: clamp(1.15rem, 1.7vw, 1.45rem); font-size: clamp(0.92rem, 1.2vw, 1.12rem);
line-height: 1.12; letter-spacing: -0.01em;
letter-spacing: -0.015em;
color: var(--ink); color: var(--ink);
margin: 0; margin: 0;
} }
.highlight-note { .hl-head .hl-num { color: var(--tone); }
font-family: var(--font-sans); .hl-lead {
font-size: clamp(0.78rem, 0.98vw, 0.9rem); font-family: var(--font-serif);
color: var(--ink-soft); font-size: clamp(0.9rem, 1.12vw, 1.06rem);
line-height: 1.32;
color: var(--ink);
margin: 0; margin: 0;
line-height: 1.45; }
.hl-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: clamp(0.4rem, 0.9vh, 0.7rem);
}
.hl-list li {
position: relative;
padding-left: 0.95rem;
font-family: var(--font-sans);
font-size: clamp(0.72rem, 0.9vw, 0.84rem);
line-height: 1.4;
color: var(--ink-soft);
}
.hl-list li::before {
content: "";
position: absolute;
left: 0; top: 0.5em;
width: 5px; height: 5px;
border-radius: 50%;
background: var(--tone);
} }
@media (max-width: 980px) { @media (max-width: 980px) {
.highlight-grid { grid-template-columns: repeat(2, 1fr); } .highlight-grid { grid-template-columns: repeat(2, 1fr); }
@ -895,9 +891,9 @@ img { display: block; max-width: 100%; }
} }
/* ════════════════════ Slide 19 — Closing ════════════════════ */ /* ════════════════════ Slide 19 — Closing ════════════════════ */
/* Closing text lifted ~20% so it sits clear above the aurora arc. */ /* "Tak for jeres rådgivning" sits above the arc; the full-size Project
#slide-thanks .hero-text { gap: clamp(1.2rem, 3vh, 2rem); } Bifrost wordmark sits below it — a big gap splits them across the arc. */
.thanks-text { transform: translateY(-19vh); } .thanks-text { gap: clamp(11rem, 28vh, 19rem); transform: translateY(-6vh); }
.thanks-title { .thanks-title {
font-family: var(--font-serif); font-family: var(--font-serif);
font-weight: 340; font-weight: 340;
@ -908,8 +904,8 @@ img { display: block; max-width: 100%; }
line-height: 1; line-height: 1;
} }
.thanks-title em { font-style: italic; font-weight: 440; } .thanks-title em { font-style: italic; font-weight: 440; }
/* "Project Bifrost" wordmark on the closing slide — smaller than slide 1. */ /* "Project Bifrost" wordmark — same size as slide 1, sitting below the arc. */
.thanks-bifrost { font-size: clamp(1.8rem, 4vw, 3.2rem); margin: 0; } .thanks-bifrost { font-size: clamp(3rem, 8vw, 6.5rem); margin: 0; }
/* Small responsive guard for very short viewports */ /* Small responsive guard for very short viewports */
@media (max-height: 640px) { @media (max-height: 640px) {

131
index.html
View file

@ -171,8 +171,8 @@
<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-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-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-dt" 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 class="logo-ds" 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 class="partner-logo"><img class="logo-dcai" src="assets/logos/dcai-logo-white.png" alt="Gefion · DCAI" /></div>
</div> </div>
</div> </div>
</section> </section>
@ -328,61 +328,57 @@
<!-- ░░░ 12 — Section divider: Sovereignty ░░░ --> <!-- ░░░ 12 — Section divider: Sovereignty ░░░ -->
<section class="slide section-divider" id="slide-sov" data-label="Suverænitet"> <section class="slide section-divider" id="slide-sov" data-label="Suverænitet">
<div class="slide-inner reveal"> <div class="slide-inner reveal">
<img class="divider-fenja" src="assets/img/fenja-wordmark-black.svg" alt="Fenja AI" />
<h2 class="section-title one-line">Suverænitet, Sikkerhed &amp; Governance</h2> <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" />
</div> </div>
</section> </section>
<!-- ░░░ 13 — Highlight boxes ░░░ --> <!-- ░░░ 13 — Highlight boxes ░░░ -->
<section class="slide" id="slide-highlights" data-label="Risici"> <section class="slide" id="slide-highlights" data-label="Risici">
<div class="slide-inner"> <div class="slide-inner hl-inner">
<div class="highlights-head reveal"> <div class="highlights-head reveal">
<p class="eyebrow center">Hvorfor suverænitet betyder noget</p> <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> <h2 class="slide-title">Fire grunde til at <em>tænke sig om</em></h2>
</div> </div>
<div class="highlight-grid reveal"> <div class="highlight-grid reveal">
<article class="highlight-box" data-tone="indigo"> <article class="highlight-box" data-tone="indigo">
<div class="highlight-art"> <p class="hl-head"><span class="hl-num">01</span> — US Cloud Act</p>
<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> <p class="hl-lead">Amerikanske myndigheder kan få adgang til dine data. Også når de ligger i EU.</p>
</div> <ul class="hl-list">
<div class="highlight-body"> <li>Vælger du en amerikansk udbyder, gælder amerikansk lov. Også selvom dine data står i et datacenter i EU.</li>
<span class="highlight-num">01</span> <li>Microsoft har under ed i fransk ret indrømmet, at de ikke kan garantere suverænitet. Heller ikke i deres egen &ldquo;sovereign cloud&rdquo;.</li>
<h3 class="highlight-name">US Cloud Act</h3> <li>Et datacenter i EU er bare en adresse. Det er ejeren, der afgør, hvilken lov der gælder, ikke hvor maskinen står.</li>
<p class="highlight-note">Amerikansk lovgivning kan give myndigheder adgang til data hos amerikanske udbydere — uanset hvor data fysisk ligger.</p> </ul>
</div>
</article> </article>
<article class="highlight-box" data-tone="terracotta"> <article class="highlight-box" data-tone="terracotta">
<div class="highlight-art"> <p class="hl-head"><span class="hl-num">02</span> — Geopolitisk uro</p>
<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> <p class="hl-lead">Alliancer skifter. Det gør ét lands teknologi til en risiko, du ikke selv styrer.</p>
</div> <ul class="hl-list">
<div class="highlight-body"> <li>Handelspolitik kan vende hurtigt. Det gælder også hos nære partnere som USA.</li>
<span class="highlight-num">02</span> <li>Told og eksportrestriktioner kan ramme uden varsel og sende prisen op.</li>
<h3 class="highlight-name">Geopolitisk uro</h3> <li>Er du afhængig af ét lands teknologi, bliver din drift en brik i forhandlinger, du ikke selv sidder med i.</li>
<p class="highlight-note">Skiftende alliancer og handelspolitik gør afhængighed af enkelte landes teknologi til en strategisk risiko.</p> </ul>
</div>
</article> </article>
<article class="highlight-box" data-tone="heather"> <article class="highlight-box" data-tone="heather">
<div class="highlight-art"> <p class="hl-head"><span class="hl-num">03</span> — Fable 5 / Mythos</p>
<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> <p class="hl-lead">En regering kan lukke din AI med ét brev.</p>
</div> <ul class="hl-list">
<div class="highlight-body"> <li>Den 1. juni 2026 lukkede den amerikanske regering adgangen til Anthropics bedste modeller, få dage efter de var udkommet.</li>
<span class="highlight-num">03</span> <li>Det ramte alle brugere uden for USA. Sad du i Europa, mistede du adgangen, uanset hvad din kontrakt sagde.</li>
<h3 class="highlight-name">Fable 5 — kun for amerikanske statsborgere</h3> <li>Der kom intet varsel og ingen overgangsperiode. På få timer holdt integrationer og produkter op med at virke.</li>
<p class="highlight-note">Når de mest avancerede modeller forbeholdes bestemte nationaliteter, står resten uden adgang til frontteknologien.</p> </ul>
</div>
</article> </article>
<article class="highlight-box" data-tone="ochre"> <article class="highlight-box" data-tone="ochre">
<div class="highlight-art"> <p class="hl-head"><span class="hl-num">04</span> — Vendor lock-in</p>
<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> <p class="hl-lead">Lock-in på data var til at leve med. På intelligensen er det en anden sag.</p>
</div> <ul class="hl-list">
<div class="highlight-body"> <li>Lock-in på dataplatforme var slemt nok. Nu er det selve den intelligens, der driver forretningen, der bliver bundet.</li>
<span class="highlight-num">04</span> <li>Vi så det med dataplatforme. Så snart udbyderne havde markedet, steg priserne.</li>
<h3 class="highlight-name">Vendor lock-in</h3> <li>Er din kerneproces bundet til én udbyders model, er det dem, der sætter prisen. Og du betaler.</li>
<p class="highlight-note">Bindes I til én leverandørs lukkede økosystem, mister I forhandlingskraft, fleksibilitet og kontrol over fremtiden.</p> </ul>
</div>
</article> </article>
</div> </div>
</div> </div>
@ -411,28 +407,65 @@
<img class="q-fenja" src="assets/img/fenja-wordmark-black.svg" alt="Fenja AI" /> <img class="q-fenja" src="assets/img/fenja-wordmark-black.svg" alt="Fenja AI" />
</section> </section>
<!-- ░░░ 16 — Section divider + reserved points ░░░ --> <!-- ░░░ 16 — Our approach (solution boxes) ░░░ -->
<section class="slide section-divider" id="slide-approach" data-label="Vores tilgang"> <section class="slide" id="slide-approach" data-label="Vores tilgang">
<div class="slide-inner reveal"> <div class="slide-inner hl-inner">
<img class="divider-fenja" src="assets/img/fenja-wordmark-black.svg" alt="Fenja AI" /> <div class="highlights-head reveal">
<h2 class="section-title">Vores tilgang til <em>Suverænitet</em>, Sikkerhed &amp; Governance</h2> <p class="eyebrow center">Vores tilgang til suverænitet, sikkerhed &amp; governance</p>
<ul class="approach-points" aria-label="Punkter tilføjes senere"> <h2 class="slide-title">Fire <em>svar</em> på de samme bekymringer</h2>
<li><span class="ph-text">Punkt tilføjes</span></li> </div>
<li><span class="ph-text">Punkt tilføjes</span></li> <div class="highlight-grid solutions reveal">
<li><span class="ph-text">Punkt tilføjes</span></li> <article class="highlight-box" data-tone="copper">
<li><span class="ph-text">Punkt tilføjes</span></li> <p class="hl-head"><span class="hl-num">01</span> — Datasuverænitet by design</p>
</ul> <p class="hl-lead">Svaret på Cloud Act, og på at et EU-datacenter ikke er nok.</p>
<ul class="hl-list">
<li>Kører i jeres eget miljø, on-prem eller i egen sky. Data forlader aldrig jeres perimeter.</li>
<li>Vi ser aldrig jeres prompts eller data. Der er ingen kæde at lække igennem.</li>
<li>Ingen Cloud Act-eksponering. Der står ingen amerikansk udbyder mellem dig og din intelligens. For den sags skyld ingen ekstern udbyder overhovedet.</li>
</ul>
</article>
<article class="highlight-box" data-tone="copper">
<p class="hl-head"><span class="hl-num">02</span> — Driftssikkerhed &amp; kontinuitet</p>
<p class="hl-lead">Svaret på Fable 5-lukningen. Ingen kill-switch udefra.</p>
<ul class="hl-list">
<li>Modellen og vægtene ligger hos dig. Ingen kan slukke den udefra med et brev. Fable 5-scenariet kan ikke ske her.</li>
<li>Ingen ekstern API-afhængighed. Drift og failover ligger inden for jeres egen kontrol.</li>
<li>Du ejer livscyklussen. Ingen udefra kan tvinge dig til at opgradere eller lukke ned.</li>
</ul>
</article>
<article class="highlight-box" data-tone="copper">
<p class="hl-head"><span class="hl-num">03</span> — Sikkerhed i flere lag</p>
<p class="hl-lead">Her er sikkerhed en del af fundamentet. Ikke noget, der er sat ovenpå bagefter.</p>
<ul class="hl-list">
<li>Det hele kører bag jeres egne firewalls og adgangskontroller. Jeres eksisterende sikkerhedsstack gælder også for AI&rsquo;en.</li>
<li>Fuldt auditspor lokalt. I kan se, hvem der spurgte om hvad, hvornår, og hvilken model der svarede. Loggene forlader aldrig huset.</li>
<li>Løbende red-teaming og hærdede modeller leveret til jer, så sårbarheder bliver fanget, før de bliver til hændelser.</li>
</ul>
</article>
<article class="highlight-box" data-tone="copper">
<p class="hl-head"><span class="hl-num">04</span> — Governance &amp; frihed fra lock-in</p>
<p class="hl-lead">Svaret på vendor lock-in og geopolitisk afhængighed.</p>
<ul class="hl-list">
<li>Modelagnostisk, og det er dit at beholde. Skift eller kombinér modeller i dit eget miljø uden at bygge om.</li>
<li>Ingen forbrugsbaseret afhængighed. Prisen kan ikke skrues op, for driften ligger ikke i vores hænder.</li>
<li>Compliance, der kan revideres og ligger inden for jeres egen kontrol. Klar til EU AI Act og GDPR fra dag ét.</li>
</ul>
</article>
</div>
</div> </div>
</section> </section>
<!-- ░░░ 17 — Regulatory sandbox ░░░ --> <!-- ░░░ 17 — Regulatory sandbox ░░░ -->
<section class="slide" id="slide-sandbox" data-label="Sandkasse"> <section class="slide" id="slide-sandbox" data-label="Sandkasse">
<div class="slide-inner reveal sandbox-inner"> <div class="slide-inner reveal sandbox-inner">
<h2 class="sandbox-title">Regulatorisk AI-sandkasse</h2> <h2 class="sandbox-title">Den Regulatoriske<br>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> <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-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="ds-logo" src="assets/logos/digitaliseringsstyrelsen.png" alt="Digitaliseringsstyrelsen" /></div>
<div class="partner-logo"><img src="assets/logos/datatilsynet.png" alt="Datatilsynet" /></div> <div class="partner-logo"><img class="dt-logo" src="assets/logos/datatilsynet.png" alt="Datatilsynet" /></div>
</div> </div>
</div> </div>
</section> </section>