801 lines
34 KiB
HTML
801 lines
34 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Frontier Algorithmics – KI & Technology Consulting</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root {
|
||
--fa-navy: #1A1F5C;
|
||
--fa-navy-deep: #0F1340;
|
||
--fa-blue: #6B8FD4;
|
||
--fa-blue-light: #A8C0E8;
|
||
--fa-blue-pale: #EEF3FB;
|
||
--fa-off-white: #F7F8FC;
|
||
--fa-mid: #6B7280;
|
||
--fa-border: rgba(26,31,92,0.1);
|
||
}
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
html { scroll-behavior: smooth; }
|
||
body {
|
||
font-family: 'DM Sans', sans-serif;
|
||
color: var(--fa-navy);
|
||
background: #fff;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
/* ── NAV ── */
|
||
nav.fa-nav {
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
padding: 1.25rem 3.5rem;
|
||
border-bottom: 0.5px solid var(--fa-border);
|
||
background: rgba(255,255,255,0.97);
|
||
position: sticky; top: 0; z-index: 200;
|
||
backdrop-filter: blur(8px);
|
||
}
|
||
.fa-logo-area { display: flex; align-items: center; gap: 12px; }
|
||
.fa-logo-mark { font-family:'Syne',sans-serif; font-weight:800; font-size:24px; color:var(--fa-blue); letter-spacing:-1px; line-height:1; }
|
||
.fa-logo-divider { width:1px; height:30px; background:var(--fa-border); }
|
||
.fa-logo-text { font-family:'Syne',sans-serif; font-weight:600; font-size:12px; color:var(--fa-navy); text-transform:uppercase; letter-spacing:2.5px; line-height:1.3; }
|
||
.fa-nav-links { display:flex; gap:2.25rem; list-style:none; }
|
||
.fa-nav-links a { font-size:13px; font-weight:400; color:var(--fa-navy); text-decoration:none; letter-spacing:0.3px; opacity:0.65; transition:opacity 0.2s; }
|
||
.fa-nav-links a:hover { opacity:1; }
|
||
.fa-nav-cta { font-family:'DM Sans',sans-serif; font-size:13px; font-weight:500; color:#fff; background:var(--fa-navy); border:none; padding:0.6rem 1.4rem; cursor:pointer; transition:background 0.2s; }
|
||
.fa-nav-cta:hover { background:var(--fa-blue); }
|
||
|
||
/* ── HERO ── */
|
||
.fa-hero {
|
||
min-height: 92vh;
|
||
display: grid;
|
||
grid-template-columns: 1.1fr 0.9fr;
|
||
align-items: center;
|
||
padding: 6rem 3.5rem 5rem;
|
||
position: relative;
|
||
overflow: hidden;
|
||
background: #fff;
|
||
}
|
||
/* Canvas background */
|
||
#hero-canvas {
|
||
position: absolute;
|
||
inset: 0;
|
||
width: 100%; height: 100%;
|
||
z-index: 0;
|
||
opacity: 0.55;
|
||
}
|
||
.fa-hero-content { position:relative; z-index:2; padding-right:4rem; }
|
||
.fa-eyebrow {
|
||
font-size:11px; font-weight:500; letter-spacing:3px; text-transform:uppercase;
|
||
color:var(--fa-blue); margin-bottom:1.75rem;
|
||
display:flex; align-items:center; gap:12px;
|
||
}
|
||
.fa-eyebrow::before { content:''; display:block; width:36px; height:1px; background:var(--fa-blue); }
|
||
|
||
/* AI badge in hero */
|
||
.fa-ai-badge {
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
background: var(--fa-navy); color: #fff;
|
||
font-size: 11px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase;
|
||
padding: 0.45rem 1rem 0.45rem 0.7rem;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
.fa-ai-dot {
|
||
width: 7px; height: 7px; border-radius: 50%; background: var(--fa-blue);
|
||
animation: pulse 2s ease-in-out infinite;
|
||
}
|
||
@keyframes pulse {
|
||
0%,100% { opacity:1; transform:scale(1); }
|
||
50% { opacity:0.5; transform:scale(0.7); }
|
||
}
|
||
|
||
.fa-hero h1 {
|
||
font-family:'Syne',sans-serif;
|
||
font-size: clamp(2.4rem, 3.8vw, 3.6rem);
|
||
font-weight:700; line-height:1.05;
|
||
color:var(--fa-navy); letter-spacing:-2px; margin-bottom:2rem;
|
||
}
|
||
.fa-hero h1 em { font-style:normal; color:var(--fa-blue); }
|
||
.fa-hero-sub {
|
||
font-size:16px; font-weight:300; line-height:1.8;
|
||
color:var(--fa-mid); max-width:460px; margin-bottom:3rem;
|
||
}
|
||
.fa-hero-actions { display:flex; align-items:center; gap:1.75rem; }
|
||
.fa-btn-primary {
|
||
font-family:'DM Sans',sans-serif; font-size:14px; font-weight:500;
|
||
color:#fff; background:var(--fa-navy); border:none;
|
||
padding:0.9rem 2.25rem; cursor:pointer; transition:background 0.2s;
|
||
}
|
||
.fa-btn-primary:hover { background:var(--fa-blue); }
|
||
.fa-btn-ghost {
|
||
font-family:'DM Sans',sans-serif; font-size:14px; font-weight:400;
|
||
color:var(--fa-navy); background:none; border:none; cursor:pointer; opacity:0.6; transition:opacity 0.2s;
|
||
}
|
||
.fa-btn-ghost:hover { opacity:1; }
|
||
|
||
/* Hero right side – stat cards */
|
||
.fa-hero-visual {
|
||
position:relative; z-index:2;
|
||
display:flex; flex-direction:column; gap:1.25rem; align-items:flex-end;
|
||
}
|
||
.fa-stat-card {
|
||
background:var(--fa-navy); color:#fff;
|
||
padding:1.75rem 2.25rem; width:290px;
|
||
}
|
||
.fa-stat-card .num {
|
||
font-family:'Syne',sans-serif; font-size:2rem; font-weight:800;
|
||
letter-spacing:-0.5px; color:var(--fa-blue-light); line-height:1; margin-bottom:0.4rem;
|
||
}
|
||
.fa-stat-card .label { font-size:12px; font-weight:300; opacity:0.6; line-height:1.5; }
|
||
.fa-stat-card.light {
|
||
background:rgba(238,243,251,0.9); color:var(--fa-navy);
|
||
border:0.5px solid var(--fa-border); margin-right:2rem;
|
||
backdrop-filter: blur(4px);
|
||
}
|
||
.fa-stat-card.light .num { color:var(--fa-navy); }
|
||
.fa-stat-card.light .label { opacity:0.55; color:var(--fa-navy); }
|
||
.fa-hero-badge {
|
||
background:var(--fa-blue); color:#fff;
|
||
font-size:11px; font-weight:500; letter-spacing:2px; text-transform:uppercase;
|
||
padding:0.55rem 1.1rem; align-self:flex-start; margin-left:1rem;
|
||
}
|
||
|
||
/* ── TICKER / EXPERTISE BANNER ── */
|
||
.fa-ticker-wrap {
|
||
background: var(--fa-navy);
|
||
padding: 0;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
.fa-ticker-inner {
|
||
display: flex;
|
||
width: max-content;
|
||
animation: ticker 30s linear infinite;
|
||
padding: 1.1rem 0;
|
||
}
|
||
.fa-ticker-wrap:hover .fa-ticker-inner { animation-play-state: paused; }
|
||
@keyframes ticker {
|
||
0% { transform: translateX(0); }
|
||
100% { transform: translateX(-50%); }
|
||
}
|
||
.fa-ticker-item {
|
||
display: flex; align-items: center; gap: 1.25rem;
|
||
padding: 0 1.5rem;
|
||
font-family: 'Syne', sans-serif;
|
||
font-size: 11px; font-weight: 600;
|
||
letter-spacing: 2px; text-transform: uppercase;
|
||
color: rgba(255,255,255,0.45);
|
||
white-space: nowrap;
|
||
}
|
||
.fa-ticker-dot {
|
||
width: 4px; height: 4px; border-radius: 50%;
|
||
background: var(--fa-blue); flex-shrink: 0;
|
||
}
|
||
/* Fade edges */
|
||
.fa-ticker-wrap::before,
|
||
.fa-ticker-wrap::after {
|
||
content: '';
|
||
position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2;
|
||
pointer-events: none;
|
||
}
|
||
.fa-ticker-wrap::before { left:0; background: linear-gradient(to right, var(--fa-navy), transparent); }
|
||
.fa-ticker-wrap::after { right:0; background: linear-gradient(to left, var(--fa-navy), transparent); }
|
||
|
||
/* ── SERVICES ── */
|
||
.fa-services { padding:7rem 3.5rem; background:var(--fa-off-white); }
|
||
.fa-section-header {
|
||
display:grid; grid-template-columns:1fr 1fr;
|
||
gap:2rem; margin-bottom:4.5rem; align-items:end;
|
||
}
|
||
.fa-section-tag {
|
||
font-size:10px; font-weight:500; letter-spacing:3px; text-transform:uppercase;
|
||
color:var(--fa-blue); margin-bottom:1rem;
|
||
display:flex; align-items:center; gap:10px;
|
||
}
|
||
.fa-section-tag::before { content:''; display:block; width:24px; height:1px; background:var(--fa-blue); }
|
||
.fa-section-header h2 {
|
||
font-family:'Syne',sans-serif;
|
||
font-size:clamp(2rem,3vw,2.8rem); font-weight:700;
|
||
line-height:1.1; letter-spacing:-1.2px; color:var(--fa-navy);
|
||
}
|
||
.fa-section-desc {
|
||
font-size:15px; font-weight:300; line-height:1.8;
|
||
color:var(--fa-mid); max-width:420px; align-self:end;
|
||
}
|
||
|
||
/* AI indicator pill used inside cards */
|
||
.fa-ai-pill {
|
||
display:inline-flex; align-items:center; gap:5px;
|
||
background: rgba(107,143,212,0.12);
|
||
color: var(--fa-blue);
|
||
font-size:10px; font-weight:500; letter-spacing:1px; text-transform:uppercase;
|
||
padding:3px 9px; margin-bottom:1rem;
|
||
border: 0.5px solid rgba(107,143,212,0.3);
|
||
}
|
||
.fa-ai-pill-dot { width:5px; height:5px; border-radius:50%; background:var(--fa-blue); }
|
||
|
||
.fa-services-grid {
|
||
display:grid; grid-template-columns:repeat(4,1fr);
|
||
gap:1px; background:var(--fa-border); border:0.5px solid var(--fa-border);
|
||
}
|
||
.fa-service-card {
|
||
background:#fff; padding:2.25rem 2rem;
|
||
cursor:pointer; transition:background 0.25s; position:relative;
|
||
}
|
||
.fa-service-card:hover { background:var(--fa-navy); }
|
||
.fa-service-card:hover .fa-sc-num { color:var(--fa-blue-light); }
|
||
.fa-service-card:hover .fa-sc-title,
|
||
.fa-service-card:hover .fa-sc-desc { color:rgba(255,255,255,0.85); }
|
||
.fa-service-card:hover .fa-sc-tags span { color:rgba(255,255,255,0.6); border-color:rgba(255,255,255,0.15); }
|
||
.fa-service-card:hover .fa-ai-pill { background:rgba(168,192,232,0.15); color:var(--fa-blue-light); border-color:rgba(168,192,232,0.3); }
|
||
.fa-service-card:hover .fa-ai-pill-dot { background:var(--fa-blue-light); }
|
||
.fa-sc-num {
|
||
font-family:'Syne',sans-serif; font-size:11px; font-weight:700;
|
||
letter-spacing:2px; color:var(--fa-blue); margin-bottom:1rem; transition:color 0.25s;
|
||
}
|
||
.fa-sc-title {
|
||
font-family:'Syne',sans-serif; font-size:15px; font-weight:700;
|
||
color:var(--fa-navy); margin-bottom:0.75rem; line-height:1.25; transition:color 0.25s;
|
||
}
|
||
.fa-sc-desc {
|
||
font-size:13px; font-weight:300; line-height:1.7;
|
||
color:var(--fa-mid); margin-bottom:1.25rem; transition:color 0.25s;
|
||
}
|
||
.fa-sc-tags { display:flex; flex-wrap:wrap; gap:5px; }
|
||
.fa-sc-tags span {
|
||
font-size:10px; letter-spacing:0.5px; color:var(--fa-navy);
|
||
border:0.5px solid var(--fa-border); padding:2px 8px; opacity:0.7;
|
||
transition:color 0.25s, border-color 0.25s;
|
||
}
|
||
|
||
/* ── KI HIGHLIGHT SECTION ── */
|
||
.fa-ai-section {
|
||
padding: 7rem 3.5rem;
|
||
background: var(--fa-navy);
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 5rem;
|
||
align-items: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.fa-ai-section::before {
|
||
content: 'AI';
|
||
font-family: 'Syne', sans-serif;
|
||
font-size: 22rem;
|
||
font-weight: 800;
|
||
color: rgba(107,143,212,0.04);
|
||
position: absolute;
|
||
right: -2rem; bottom: -4rem;
|
||
line-height: 1;
|
||
pointer-events: none;
|
||
letter-spacing: -10px;
|
||
}
|
||
.fa-ai-content { position: relative; z-index: 1; }
|
||
.fa-ai-tag {
|
||
font-size:10px; font-weight:500; letter-spacing:3px; text-transform:uppercase;
|
||
color:var(--fa-blue-light); margin-bottom:1rem;
|
||
display:flex; align-items:center; gap:10px;
|
||
}
|
||
.fa-ai-tag::before { content:''; display:block; width:24px; height:1px; background:var(--fa-blue-light); }
|
||
.fa-ai-content h2 {
|
||
font-family:'Syne',sans-serif;
|
||
font-size:clamp(1.8rem,2.8vw,2.6rem); font-weight:700;
|
||
letter-spacing:-1px; line-height:1.1; color:#fff; margin-bottom:1.5rem;
|
||
}
|
||
.fa-ai-content h2 em { font-style:normal; color:var(--fa-blue-light); }
|
||
.fa-ai-content p {
|
||
font-size:15px; font-weight:300; line-height:1.8;
|
||
color:rgba(255,255,255,0.5); margin-bottom:2.5rem; max-width:440px;
|
||
}
|
||
.fa-ai-capabilities {
|
||
display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
|
||
background: rgba(107,143,212,0.15);
|
||
border: 0.5px solid rgba(107,143,212,0.2);
|
||
position: relative; z-index: 1;
|
||
}
|
||
.fa-ai-cap {
|
||
background: rgba(26,31,92,0.6);
|
||
padding: 1.75rem;
|
||
transition: background 0.2s;
|
||
}
|
||
.fa-ai-cap:hover { background: rgba(107,143,212,0.12); }
|
||
.fa-ai-cap-icon {
|
||
width: 32px; height: 32px;
|
||
background: rgba(107,143,212,0.15);
|
||
border: 0.5px solid rgba(107,143,212,0.3);
|
||
display: flex; align-items: center; justify-content: center;
|
||
margin-bottom: 0.85rem;
|
||
font-size: 14px; color: var(--fa-blue-light);
|
||
}
|
||
.fa-ai-cap h4 {
|
||
font-family:'Syne',sans-serif; font-size:13px; font-weight:700;
|
||
color:#fff; margin-bottom:0.4rem; letter-spacing:-0.2px;
|
||
}
|
||
.fa-ai-cap p {
|
||
font-size:12px; font-weight:300; line-height:1.6;
|
||
color:rgba(255,255,255,0.4); margin-bottom:0;
|
||
}
|
||
|
||
/* ── WHY ── */
|
||
.fa-why {
|
||
padding:7rem 3.5rem;
|
||
display:grid; grid-template-columns:1fr 1fr;
|
||
gap:6rem; align-items:center; background:#fff;
|
||
}
|
||
.fa-why-visual { position:relative; }
|
||
.fa-why-block { background:var(--fa-navy); padding:3.5rem; color:#fff; }
|
||
.fa-why-block-quote {
|
||
font-family:'Syne',sans-serif; font-size:1.5rem; font-weight:600;
|
||
line-height:1.35; letter-spacing:-0.3px; color:#fff; margin-bottom:1.5rem;
|
||
}
|
||
.fa-why-block-quote em { font-style:normal; color:var(--fa-blue-light); }
|
||
.fa-why-block-sub { font-size:13px; font-weight:300; line-height:1.75; color:rgba(255,255,255,0.5); }
|
||
.fa-accent-bar {
|
||
position:absolute; bottom:-1.75rem; right:-1.75rem;
|
||
width:130px; height:130px;
|
||
background:var(--fa-blue-pale); border:0.5px solid var(--fa-border);
|
||
display:flex; align-items:center; justify-content:center;
|
||
flex-direction:column; gap:3px;
|
||
}
|
||
.fa-accent-bar .city { font-family:'Syne',sans-serif; font-size:12px; font-weight:800; color:var(--fa-navy); letter-spacing:2px; text-transform:uppercase; }
|
||
.fa-accent-bar .tagline { font-size:9px; color:var(--fa-mid); letter-spacing:1px; text-transform:uppercase; }
|
||
.fa-why-content h2 {
|
||
font-family:'Syne',sans-serif; font-size:clamp(1.8rem,2.8vw,2.4rem);
|
||
font-weight:700; letter-spacing:-0.8px; line-height:1.15; color:var(--fa-navy); margin-bottom:2.75rem;
|
||
}
|
||
.fa-points { display:flex; flex-direction:column; gap:1.75rem; }
|
||
.fa-point { display:grid; grid-template-columns:2.5rem 1fr; gap:1rem; align-items:start; }
|
||
.fa-point-num { font-family:'Syne',sans-serif; font-size:11px; font-weight:700; color:var(--fa-blue); letter-spacing:1px; padding-top:3px; }
|
||
.fa-point-text strong { display:block; font-size:14px; font-weight:500; color:var(--fa-navy); margin-bottom:5px; }
|
||
.fa-point-text p { font-size:13px; font-weight:300; line-height:1.7; color:var(--fa-mid); }
|
||
|
||
/* ── KONTORION ── */
|
||
.fa-showcase {
|
||
padding:7rem 3.5rem; background:var(--fa-off-white);
|
||
display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center;
|
||
}
|
||
.fa-showcase-label { font-size:10px; font-weight:500; letter-spacing:3px; text-transform:uppercase; color:var(--fa-mid); margin-bottom:0.9rem; }
|
||
.fa-showcase h2 { font-family:'Syne',sans-serif; font-size:clamp(1.7rem,2.5vw,2.2rem); font-weight:700; letter-spacing:-0.8px; line-height:1.15; color:var(--fa-navy); margin-bottom:1.25rem; }
|
||
.fa-showcase > div > p { font-size:15px; font-weight:300; line-height:1.8; color:var(--fa-mid); margin-bottom:2.25rem; max-width:430px; }
|
||
.fa-kontorion-card { background:var(--fa-navy); padding:3rem; color:#fff; position:relative; overflow:hidden; }
|
||
.fa-kontorion-card::before { content:'K'; font-family:'Syne',sans-serif; font-size:16rem; font-weight:800; color:rgba(107,143,212,0.06); position:absolute; right:-1.5rem; top:-2rem; line-height:1; pointer-events:none; }
|
||
.fa-k-label { font-size:10px; font-weight:500; letter-spacing:3px; text-transform:uppercase; color:var(--fa-blue-light); margin-bottom:1rem; opacity:0.8; }
|
||
.fa-k-title { font-family:'Syne',sans-serif; font-size:1.8rem; font-weight:700; letter-spacing:-0.5px; margin-bottom:0.75rem; color:#fff; }
|
||
.fa-k-desc { font-size:13px; font-weight:300; line-height:1.75; color:rgba(255,255,255,0.5); margin-bottom:1.75rem; max-width:310px; }
|
||
.fa-k-pills { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:2rem; }
|
||
.fa-k-pill { font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--fa-blue-light); border:0.5px solid rgba(107,143,212,0.35); padding:4px 10px; }
|
||
.fa-k-link { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:500; letter-spacing:1px; text-transform:uppercase; color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,0.2); padding-bottom:3px; transition:border-color 0.2s; }
|
||
.fa-k-link:hover { border-color:rgba(255,255,255,0.6); }
|
||
|
||
/* ── CTA ── */
|
||
.fa-cta { background:var(--fa-navy); padding:7rem 3.5rem; display:grid; grid-template-columns:1fr auto; align-items:center; gap:4rem; }
|
||
.fa-cta h2 { font-family:'Syne',sans-serif; font-size:clamp(1.8rem,3vw,2.8rem); font-weight:700; letter-spacing:-1.2px; line-height:1.08; color:#fff; }
|
||
.fa-cta h2 em { font-style:normal; color:var(--fa-blue-light); }
|
||
.fa-cta-sub { font-size:14px; font-weight:300; color:rgba(255,255,255,0.4); margin-top:0.9rem; }
|
||
.fa-cta-actions { display:flex; flex-direction:column; gap:0.9rem; align-items:flex-end; }
|
||
.fa-btn-white { font-family:'DM Sans',sans-serif; font-size:14px; font-weight:500; color:var(--fa-navy); background:#fff; border:none; padding:0.9rem 2.25rem; cursor:pointer; white-space:nowrap; transition:background 0.2s; }
|
||
.fa-btn-white:hover { background:var(--fa-blue-light); }
|
||
.fa-cta-loc { font-size:10px; color:rgba(255,255,255,0.25); letter-spacing:2px; text-transform:uppercase; }
|
||
|
||
/* ── FOOTER ── */
|
||
footer.fa-footer { background:var(--fa-navy-deep); padding:2rem 3.5rem; display:flex; align-items:center; justify-content:space-between; }
|
||
.fa-footer-left { font-family:'Syne',sans-serif; font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,0.2); }
|
||
.fa-footer-links { display:flex; gap:1.75rem; }
|
||
.fa-footer-links a { font-size:11px; color:rgba(255,255,255,0.2); text-decoration:none; letter-spacing:0.5px; transition:color 0.2s; }
|
||
.fa-footer-links a:hover { color:rgba(255,255,255,0.6); }
|
||
|
||
/* ── RESPONSIVE ── */
|
||
@media (max-width:900px) {
|
||
.fa-hero, .fa-why, .fa-showcase, .fa-ai-section { grid-template-columns:1fr; }
|
||
.fa-hero { min-height:auto; padding:4rem 1.5rem; }
|
||
.fa-hero-content { padding-right:0; }
|
||
.fa-hero-visual { display:none; }
|
||
.fa-services-grid { grid-template-columns:1fr 1fr; }
|
||
.fa-section-header { grid-template-columns:1fr; }
|
||
.fa-why, .fa-showcase, .fa-ai-section { padding:4rem 1.5rem; gap:3rem; }
|
||
.fa-services { padding:4rem 1.5rem; }
|
||
.fa-cta { grid-template-columns:1fr; padding:4rem 1.5rem; }
|
||
.fa-cta-actions { align-items:flex-start; }
|
||
nav.fa-nav { padding:1rem 1.5rem; }
|
||
.fa-nav-links { display:none; }
|
||
footer.fa-footer { padding:1.5rem; flex-direction:column; gap:1rem; align-items:flex-start; }
|
||
.fa-ai-capabilities { grid-template-columns:1fr; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- NAV -->
|
||
<nav class="fa-nav">
|
||
<div class="fa-logo-area">
|
||
<div class="fa-logo-mark">FA</div>
|
||
<div class="fa-logo-divider"></div>
|
||
<div class="fa-logo-text">Frontier<br>Algorithmics</div>
|
||
</div>
|
||
<ul class="fa-nav-links">
|
||
<li><a href="#">Leistungen</a></li>
|
||
<li><a href="#">KI & Daten</a></li>
|
||
<li><a href="#">Kontorion</a></li>
|
||
<li><a href="#">Über uns</a></li>
|
||
<li><a href="#">DE / EN</a></li>
|
||
</ul>
|
||
<button class="fa-nav-cta">Kontakt</button>
|
||
</nav>
|
||
|
||
<!-- HERO -->
|
||
<section class="fa-hero">
|
||
<canvas id="hero-canvas"></canvas>
|
||
|
||
<div class="fa-hero-content">
|
||
<div class="fa-ai-badge">
|
||
<div class="fa-ai-dot"></div>
|
||
KI-getriebene Technologieberatung
|
||
</div>
|
||
<div class="fa-eyebrow">Regensburg · Bayern · International</div>
|
||
<h1>Komplexe Systeme.<br><em>Klare Lösungen.</em><br>Echter Fortschritt.</h1>
|
||
<p class="fa-hero-sub">Von intelligenten KI-Agenten bis zur regulierten Medizinsoftware – wir verbinden modernste Algorithmen mit der Präzision, die kritische Systeme verlangen.</p>
|
||
<div class="fa-hero-actions">
|
||
<button class="fa-btn-primary">Leistungen entdecken</button>
|
||
<button class="fa-btn-ghost">Kontorion ansehen ↗</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fa-hero-visual">
|
||
<div class="fa-stat-card">
|
||
<div class="num">LLM</div>
|
||
<div class="label">Agents · RAG · Fine-Tuning<br>Generative KI für Ihr Unternehmen</div>
|
||
</div>
|
||
<div class="fa-stat-card light">
|
||
<div class="num">MDR</div>
|
||
<div class="label">IEC 62304 · HL7 · FHIR · DICOM<br>Regulatorische Expertise</div>
|
||
</div>
|
||
<div class="fa-hero-badge">Seit Regensburg</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- TICKER -->
|
||
<div class="fa-ticker-wrap" aria-hidden="true">
|
||
<div class="fa-ticker-inner" id="ticker">
|
||
<!-- Items doubled for seamless loop -->
|
||
<span class="fa-ticker-item">KI-Strategie<div class="fa-ticker-dot"></div></span>
|
||
<span class="fa-ticker-item">LLM-Agents<div class="fa-ticker-dot"></div></span>
|
||
<span class="fa-ticker-item">Computer Vision<div class="fa-ticker-dot"></div></span>
|
||
<span class="fa-ticker-item">Predictive Analytics<div class="fa-ticker-dot"></div></span>
|
||
<span class="fa-ticker-item">RAG-Systeme<div class="fa-ticker-dot"></div></span>
|
||
<span class="fa-ticker-item">App-Entwicklung<div class="fa-ticker-dot"></div></span>
|
||
<span class="fa-ticker-item">Regulatory Affairs<div class="fa-ticker-dot"></div></span>
|
||
<span class="fa-ticker-item">HL7 / FHIR<div class="fa-ticker-dot"></div></span>
|
||
<span class="fa-ticker-item">DICOM<div class="fa-ticker-dot"></div></span>
|
||
<span class="fa-ticker-item">Software-Architektur<div class="fa-ticker-dot"></div></span>
|
||
<span class="fa-ticker-item">Agile Methoden<div class="fa-ticker-dot"></div></span>
|
||
<span class="fa-ticker-item">Data Science<div class="fa-ticker-dot"></div></span>
|
||
<span class="fa-ticker-item">MLOps<div class="fa-ticker-dot"></div></span>
|
||
<span class="fa-ticker-item">MDR / IEC 62304<div class="fa-ticker-dot"></div></span>
|
||
<span class="fa-ticker-item">Backend & APIs<div class="fa-ticker-dot"></div></span>
|
||
<span class="fa-ticker-item">Technologieberatung<div class="fa-ticker-dot"></div></span>
|
||
<!-- duplicate for seamless -->
|
||
<span class="fa-ticker-item">KI-Strategie<div class="fa-ticker-dot"></div></span>
|
||
<span class="fa-ticker-item">LLM-Agents<div class="fa-ticker-dot"></div></span>
|
||
<span class="fa-ticker-item">Computer Vision<div class="fa-ticker-dot"></div></span>
|
||
<span class="fa-ticker-item">Predictive Analytics<div class="fa-ticker-dot"></div></span>
|
||
<span class="fa-ticker-item">RAG-Systeme<div class="fa-ticker-dot"></div></span>
|
||
<span class="fa-ticker-item">App-Entwicklung<div class="fa-ticker-dot"></div></span>
|
||
<span class="fa-ticker-item">Regulatory Affairs<div class="fa-ticker-dot"></div></span>
|
||
<span class="fa-ticker-item">HL7 / FHIR<div class="fa-ticker-dot"></div></span>
|
||
<span class="fa-ticker-item">DICOM<div class="fa-ticker-dot"></div></span>
|
||
<span class="fa-ticker-item">Software-Architektur<div class="fa-ticker-dot"></div></span>
|
||
<span class="fa-ticker-item">Agile Methoden<div class="fa-ticker-dot"></div></span>
|
||
<span class="fa-ticker-item">Data Science<div class="fa-ticker-dot"></div></span>
|
||
<span class="fa-ticker-item">MLOps<div class="fa-ticker-dot"></div></span>
|
||
<span class="fa-ticker-item">MDR / IEC 62304<div class="fa-ticker-dot"></div></span>
|
||
<span class="fa-ticker-item">Backend & APIs<div class="fa-ticker-dot"></div></span>
|
||
<span class="fa-ticker-item">Technologieberatung<div class="fa-ticker-dot"></div></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SERVICES -->
|
||
<section class="fa-services">
|
||
<div class="fa-section-header">
|
||
<div>
|
||
<div class="fa-section-tag">Was wir tun</div>
|
||
<h2>Vier Disziplinen.<br>Ein Partner.</h2>
|
||
</div>
|
||
<p class="fa-section-desc">KI ist kein Add-on – sie ist der Antrieb hinter jedem unserer Leistungsbereiche. Wir decken den gesamten Projektzyklus ab, von der ersten Idee bis zur regulierten Lösung.</p>
|
||
</div>
|
||
<div class="fa-services-grid">
|
||
<div class="fa-service-card">
|
||
<div class="fa-sc-num">01</div>
|
||
<div class="fa-ai-pill"><div class="fa-ai-pill-dot"></div>KI-Kern</div>
|
||
<div class="fa-sc-title">Data Science & KI</div>
|
||
<p class="fa-sc-desc">LLM-Agents, RAG-Systeme, Computer Vision und Predictive Analytics – von der Datenpipeline bis zum produktiven KI-System.</p>
|
||
<div class="fa-sc-tags">
|
||
<span>LLM / RAG</span><span>Agents</span><span>Computer Vision</span><span>Forecasting</span>
|
||
</div>
|
||
</div>
|
||
<div class="fa-service-card">
|
||
<div class="fa-sc-num">02</div>
|
||
<div class="fa-ai-pill"><div class="fa-ai-pill-dot"></div>KI-gestützt</div>
|
||
<div class="fa-sc-title">Regulatorik</div>
|
||
<p class="fa-sc-desc">Medizinproduktesoftware nach MDR, ISO 13485 und IEC 62304 – von der technischen Dokumentation bis zur erfolgreichen Zulassung.</p>
|
||
<div class="fa-sc-tags">
|
||
<span>MDR</span><span>HL7 / FHIR</span><span>DICOM</span><span>IEC 62304</span>
|
||
</div>
|
||
</div>
|
||
<div class="fa-service-card">
|
||
<div class="fa-sc-num">03</div>
|
||
<div class="fa-ai-pill"><div class="fa-ai-pill-dot"></div>KI-integriert</div>
|
||
<div class="fa-sc-title">App-Entwicklung</div>
|
||
<p class="fa-sc-desc">Native und Cross-Platform Apps, Backend-Systeme und Web-Frontends – präzise implementiert, skalierbar gebaut, KI-ready von Anfang an.</p>
|
||
<div class="fa-sc-tags">
|
||
<span>Cross-Platform</span><span>Backend</span><span>Frontend</span><span>APIs</span>
|
||
</div>
|
||
</div>
|
||
<div class="fa-service-card">
|
||
<div class="fa-sc-num">04</div>
|
||
<div class="fa-ai-pill"><div class="fa-ai-pill-dot"></div>KI-Architektur</div>
|
||
<div class="fa-sc-title">Software Engineering</div>
|
||
<p class="fa-sc-desc">Systemarchitektur, Agile Methoden und technische Beratung für Projekte, bei denen Struktur über Erfolg oder Scheitern entscheidet.</p>
|
||
<div class="fa-sc-tags">
|
||
<span>Architektur</span><span>Scrum / SAFe</span><span>Tech Consulting</span><span>Reviews</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- KI HIGHLIGHT -->
|
||
<section class="fa-ai-section">
|
||
<div class="fa-ai-content">
|
||
<div class="fa-ai-tag">KI-Expertise</div>
|
||
<h2>Intelligente Systeme,<br>die <em>echte Arbeit</em> leisten.</h2>
|
||
<p>Wir entwickeln keine Demos – wir bauen KI-Systeme, die in produktiven Umgebungen funktionieren. Von autonomen Agenten bis zur regulierten medizinischen Bildanalyse.</p>
|
||
<button class="fa-btn-primary" style="background:#fff; color:var(--fa-navy);">KI-Leistungen ansehen</button>
|
||
</div>
|
||
<div class="fa-ai-capabilities">
|
||
<div class="fa-ai-cap">
|
||
<div class="fa-ai-cap-icon">⬡</div>
|
||
<h4>LLM-Agents & RAG</h4>
|
||
<p>Autonome Agenten und retrieval-gestützte Systeme für komplexe Unternehmensanwendungen.</p>
|
||
</div>
|
||
<div class="fa-ai-cap">
|
||
<div class="fa-ai-cap-icon">◎</div>
|
||
<h4>Computer Vision</h4>
|
||
<p>Bildanalyse und Objekterkennung – auch in regulierten Bereichen wie der Medizintechnik.</p>
|
||
</div>
|
||
<div class="fa-ai-cap">
|
||
<div class="fa-ai-cap-icon">⟁</div>
|
||
<h4>Predictive Analytics</h4>
|
||
<p>Forecasting-Modelle und Anomalieerkennung auf Basis realer Produktionsdaten.</p>
|
||
</div>
|
||
<div class="fa-ai-cap">
|
||
<div class="fa-ai-cap-icon">⊞</div>
|
||
<h4>MLOps & Deployment</h4>
|
||
<p>Vom Notebook zur skalierbaren Produktionsinfrastruktur – zuverlässig und wartbar.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- WHY -->
|
||
<section class="fa-why">
|
||
<div class="fa-why-visual">
|
||
<div class="fa-why-block">
|
||
<div class="fa-why-block-quote">„Wir bauen nicht nur Software – wir tragen <em>Verantwortung</em> für das System dahinter."</div>
|
||
<div class="fa-why-block-sub">Frontier Algorithmics verbindet Ingenieursdenken mit unternehmerischer Verantwortung. Regensburg ist unser Zuhause – Europa und darüber hinaus unser Markt.</div>
|
||
</div>
|
||
<div class="fa-accent-bar">
|
||
<div class="city">RGN</div>
|
||
<div class="tagline">Bayern · DE</div>
|
||
</div>
|
||
</div>
|
||
<div class="fa-why-content">
|
||
<h2>Warum Frontier<br>Algorithmics?</h2>
|
||
<div class="fa-points">
|
||
<div class="fa-point">
|
||
<div class="fa-point-num">01</div>
|
||
<div class="fa-point-text">
|
||
<strong>KI mit Substanz, nicht mit Buzzwords</strong>
|
||
<p>Wir implementieren LLM-Agents, RAG-Systeme und Computer-Vision-Lösungen, die in der Praxis funktionieren – nicht nur in der Demo.</p>
|
||
</div>
|
||
</div>
|
||
<div class="fa-point">
|
||
<div class="fa-point-num">02</div>
|
||
<div class="fa-point-text">
|
||
<strong>Regulatorik trifft Technologie</strong>
|
||
<p>Wir sind eine der wenigen Firmen, die KI-Expertise und regulatorisches Know-how (MDR, IEC 62304) unter einem Dach vereinen.</p>
|
||
</div>
|
||
</div>
|
||
<div class="fa-point">
|
||
<div class="fa-point-num">03</div>
|
||
<div class="fa-point-text">
|
||
<strong>Beweis statt Versprechen: Kontorion</strong>
|
||
<p>Wir haben ein eigenes Produkt entwickelt und am Markt platziert. Wir denken wie Unternehmer, nicht wie Dienstleister.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- KONTORION -->
|
||
<section class="fa-showcase">
|
||
<div>
|
||
<div class="fa-showcase-label">Eigenes Produkt · Referenz</div>
|
||
<h2>Kontorion – entwickelt von Frontier Algorithmics</h2>
|
||
<p>Kontorion ist der Beweis unserer Leistungsfähigkeit: ein vollständig intern entwickeltes Produkt, das zeigt, wie wir Ideen in skalierbare, marktreife Software überführen – von der ersten Zeile Code bis zum Live-Betrieb.</p>
|
||
<button class="fa-btn-primary">Mehr über Kontorion</button>
|
||
</div>
|
||
<div class="fa-kontorion-card">
|
||
<div class="fa-k-label">Produkt · kontorion.eu</div>
|
||
<div class="fa-k-title">Kontorion</div>
|
||
<p class="fa-k-desc">Von der Idee zur fertigen Plattform – entwickelt und betrieben von unserem Team in Regensburg.</p>
|
||
<div class="fa-k-pills">
|
||
<span class="fa-k-pill">App-Entwicklung</span>
|
||
<span class="fa-k-pill">Backend</span>
|
||
<span class="fa-k-pill">Cloud</span>
|
||
<span class="fa-k-pill">KI-integriert</span>
|
||
</div>
|
||
<a class="fa-k-link" href="https://kontorion.eu" target="_blank">kontorion.eu besuchen →</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA -->
|
||
<section class="fa-cta">
|
||
<div>
|
||
<h2>Bereit, das <em>nächste<br>komplexe Projekt</em> anzugehen?</h2>
|
||
<p class="fa-cta-sub">Wir hören zu, bevor wir reden. Kein Proposal ohne Verständnis.</p>
|
||
</div>
|
||
<div class="fa-cta-actions">
|
||
<button class="fa-btn-white">Gespräch anfragen</button>
|
||
<div class="fa-cta-loc">Regensburg · Bayern · International</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FOOTER -->
|
||
<footer class="fa-footer">
|
||
<div class="fa-footer-left">© 2025 Frontier Algorithmics · Regensburg</div>
|
||
<div class="fa-footer-links">
|
||
<a href="#">Impressum</a>
|
||
<a href="#">Datenschutz</a>
|
||
<a href="#">LinkedIn</a>
|
||
<a href="#">kontorion.eu</a>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
// ── NETWORK / PARTICLE CANVAS ANIMATION ──
|
||
(function() {
|
||
const canvas = document.getElementById('hero-canvas');
|
||
const ctx = canvas.getContext('2d');
|
||
|
||
const NAVY = '26, 31, 92';
|
||
const BLUE = '107, 143, 212';
|
||
|
||
let W, H, nodes, mouse = { x: -999, y: -999 };
|
||
|
||
function resize() {
|
||
const rect = canvas.parentElement.getBoundingClientRect();
|
||
W = canvas.width = rect.width;
|
||
H = canvas.height = rect.height;
|
||
}
|
||
|
||
function randBetween(a, b) { return a + Math.random() * (b - a); }
|
||
|
||
function initNodes(n) {
|
||
nodes = [];
|
||
for (let i = 0; i < n; i++) {
|
||
nodes.push({
|
||
x: randBetween(0, W),
|
||
y: randBetween(0, H),
|
||
vx: randBetween(-0.25, 0.25),
|
||
vy: randBetween(-0.2, 0.2),
|
||
r: randBetween(2, 5),
|
||
// some nodes are "data nodes" (larger, labeled)
|
||
isKey: Math.random() < 0.12,
|
||
label: ['LLM','RAG','CV','AI','ML','API','MDR'][Math.floor(Math.random()*7)]
|
||
});
|
||
}
|
||
}
|
||
|
||
function draw() {
|
||
ctx.clearRect(0, 0, W, H);
|
||
|
||
// Draw edges between nearby nodes
|
||
for (let i = 0; i < nodes.length; i++) {
|
||
for (let j = i + 1; j < nodes.length; j++) {
|
||
const dx = nodes[i].x - nodes[j].x;
|
||
const dy = nodes[i].y - nodes[j].y;
|
||
const dist = Math.sqrt(dx*dx + dy*dy);
|
||
const maxDist = 130;
|
||
if (dist < maxDist) {
|
||
const alpha = (1 - dist / maxDist) * 0.18;
|
||
ctx.beginPath();
|
||
ctx.strokeStyle = `rgba(${BLUE}, ${alpha})`;
|
||
ctx.lineWidth = 0.6;
|
||
ctx.moveTo(nodes[i].x, nodes[i].y);
|
||
ctx.lineTo(nodes[j].x, nodes[j].y);
|
||
ctx.stroke();
|
||
}
|
||
}
|
||
// Mouse interaction lines
|
||
const mdx = nodes[i].x - mouse.x;
|
||
const mdy = nodes[i].y - mouse.y;
|
||
const mdist = Math.sqrt(mdx*mdx + mdy*mdy);
|
||
if (mdist < 160) {
|
||
const alpha = (1 - mdist / 160) * 0.35;
|
||
ctx.beginPath();
|
||
ctx.strokeStyle = `rgba(${BLUE}, ${alpha})`;
|
||
ctx.lineWidth = 0.8;
|
||
ctx.moveTo(nodes[i].x, nodes[i].y);
|
||
ctx.lineTo(mouse.x, mouse.y);
|
||
ctx.stroke();
|
||
}
|
||
}
|
||
|
||
// Draw nodes
|
||
for (const n of nodes) {
|
||
// Glow halo
|
||
const g = ctx.createRadialGradient(n.x, n.y, 0, n.x, n.y, n.r * 4);
|
||
g.addColorStop(0, `rgba(${BLUE}, 0.12)`);
|
||
g.addColorStop(1, `rgba(${BLUE}, 0)`);
|
||
ctx.beginPath();
|
||
ctx.arc(n.x, n.y, n.r * 4, 0, Math.PI * 2);
|
||
ctx.fillStyle = g;
|
||
ctx.fill();
|
||
|
||
// Core dot
|
||
ctx.beginPath();
|
||
ctx.arc(n.x, n.y, n.r, 0, Math.PI * 2);
|
||
if (n.isKey) {
|
||
ctx.fillStyle = `rgba(${BLUE}, 0.75)`;
|
||
} else {
|
||
ctx.fillStyle = `rgba(${NAVY}, 0.35)`;
|
||
}
|
||
ctx.fill();
|
||
|
||
// Labels on key nodes
|
||
if (n.isKey) {
|
||
ctx.font = '600 9px "Syne", sans-serif';
|
||
ctx.letterSpacing = '1px';
|
||
ctx.fillStyle = `rgba(${BLUE}, 0.55)`;
|
||
ctx.fillText(n.label, n.x + n.r + 4, n.y + 3);
|
||
}
|
||
}
|
||
}
|
||
|
||
function update() {
|
||
for (const n of nodes) {
|
||
n.x += n.vx;
|
||
n.y += n.vy;
|
||
// Bounce off edges
|
||
if (n.x < 0 || n.x > W) n.vx *= -1;
|
||
if (n.y < 0 || n.y > H) n.vy *= -1;
|
||
}
|
||
}
|
||
|
||
function loop() {
|
||
update();
|
||
draw();
|
||
requestAnimationFrame(loop);
|
||
}
|
||
|
||
window.addEventListener('resize', () => {
|
||
resize();
|
||
initNodes(60);
|
||
});
|
||
|
||
canvas.parentElement.addEventListener('mousemove', e => {
|
||
const rect = canvas.getBoundingClientRect();
|
||
mouse.x = e.clientX - rect.left;
|
||
mouse.y = e.clientY - rect.top;
|
||
});
|
||
canvas.parentElement.addEventListener('mouseleave', () => {
|
||
mouse.x = -999; mouse.y = -999;
|
||
});
|
||
|
||
resize();
|
||
initNodes(60);
|
||
loop();
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|