|
|
<!DOCTYPE html> |
|
|
<html lang="sv"> |
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<title>SafeSwitch – Tryggare bilaffärer</title> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" /> |
|
|
|
|
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
|
|
<style> |
|
|
:root { |
|
|
--primary: #4c32ff; |
|
|
--primary-dark: #3a1eff; |
|
|
--primary-light: #6c5ce7; |
|
|
--secondary: #34ace0; |
|
|
--dark: #050816; |
|
|
--light: #f5f5f7; |
|
|
--gray: #a0a3b1; |
|
|
--success: #2ecc71; |
|
|
--bg: #050816; |
|
|
--bg-alt: #070b1d; |
|
|
--card: #0d1024; |
|
|
--accent: #6c5ce7; |
|
|
--accent-soft: rgba(108, 92, 231, 0.18); |
|
|
--accent-strong: #4c4cff; |
|
|
--text: #f5f5f7; |
|
|
--muted: #a0a3b1; |
|
|
--border-subtle: rgba(255, 255, 255, 0.06); |
|
|
--radius-lg: 24px; |
|
|
--radius-xl: 32px; |
|
|
--shadow-soft: 0 24px 80px rgba(0,0,0,0.55); |
|
|
--nav-height: 72px; |
|
|
} |
|
|
|
|
|
* { |
|
|
box-sizing: border-box; |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; |
|
|
background: radial-gradient(circle at top left, #141631 0, #050816 40%, #02030a 100%); |
|
|
color: var(--text); |
|
|
line-height: 1.5; |
|
|
-webkit-font-smoothing: antialiased; |
|
|
} |
|
|
|
|
|
a { |
|
|
color: inherit; |
|
|
text-decoration: none; |
|
|
} |
|
|
|
|
|
img { |
|
|
max-width: 100%; |
|
|
display: block; |
|
|
} |
|
|
|
|
|
|
|
|
.page { |
|
|
min-height: 100vh; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
} |
|
|
|
|
|
.container { |
|
|
width: 100%; |
|
|
max-width: 1120px; |
|
|
margin: 0 auto; |
|
|
padding: 0 20px; |
|
|
} |
|
|
|
|
|
|
|
|
.bg-blob { |
|
|
position: fixed; |
|
|
z-index: -1; |
|
|
border-radius: 999px; |
|
|
filter: blur(60px); |
|
|
opacity: 0.55; |
|
|
} |
|
|
.bg-blob--1 { |
|
|
width: 280px; |
|
|
height: 280px; |
|
|
background: radial-gradient(circle, rgba(108,92,231,0.45), transparent 70%); |
|
|
top: -60px; |
|
|
left: -40px; |
|
|
} |
|
|
.bg-blob--2 { |
|
|
width: 320px; |
|
|
height: 320px; |
|
|
background: radial-gradient(circle, rgba(52,172,224,0.35), transparent 70%); |
|
|
bottom: -80px; |
|
|
right: -40px; |
|
|
} |
|
|
|
|
|
|
|
|
.header { |
|
|
position: sticky; |
|
|
top: 0; |
|
|
z-index: 20; |
|
|
backdrop-filter: blur(14px); |
|
|
background: linear-gradient(to bottom, rgba(5,8,22,0.9), rgba(5,8,22,0.75), transparent); |
|
|
border-bottom: 1px solid rgba(255,255,255,0.04); |
|
|
} |
|
|
|
|
|
.header-inner { |
|
|
height: var(--nav-height); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: space-between; |
|
|
gap: 16px; |
|
|
} |
|
|
|
|
|
.logo-wrap { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 10px; |
|
|
} |
|
|
|
|
|
.logo-mark { |
|
|
width: 32px; |
|
|
height: 32px; |
|
|
border-radius: 14px; |
|
|
background: radial-gradient(circle at top left, #8e44ff, #4c32ff); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
box-shadow: 0 10px 30px rgba(108,92,231,0.75); |
|
|
} |
|
|
|
|
|
.logo-mark span { |
|
|
width: 16px; |
|
|
height: 16px; |
|
|
border-radius: 6px; |
|
|
border: 2px solid rgba(255,255,255,0.88); |
|
|
border-top-right-radius: 2px; |
|
|
} |
|
|
|
|
|
.logo-text { |
|
|
font-weight: 600; |
|
|
letter-spacing: 0.02em; |
|
|
font-size: 1.05rem; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
} |
|
|
|
|
|
.logo-text small { |
|
|
font-size: 0.65rem; |
|
|
color: var(--muted); |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 0.16em; |
|
|
margin-top: -2px; |
|
|
} |
|
|
|
|
|
.nav { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 32px; |
|
|
color: var(--muted); |
|
|
font-size: 0.9rem; |
|
|
} |
|
|
|
|
|
.nav-links { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 26px; |
|
|
} |
|
|
|
|
|
.nav-link { |
|
|
position: relative; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.nav-link::after { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
left: 0; |
|
|
bottom: -6px; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
border-radius: 999px; |
|
|
background: linear-gradient(90deg, #8e44ff, #4c32ff); |
|
|
transition: width 0.18s ease-out; |
|
|
} |
|
|
|
|
|
.nav-link:hover { |
|
|
color: #e5e7ff; |
|
|
} |
|
|
|
|
|
.nav-link:hover::after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.btn { |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
gap: 8px; |
|
|
padding: 9px 18px; |
|
|
border-radius: 999px; |
|
|
font-size: 0.9rem; |
|
|
font-weight: 500; |
|
|
letter-spacing: 0.02em; |
|
|
border: 1px solid transparent; |
|
|
cursor: pointer; |
|
|
transition: all 0.18s ease-out; |
|
|
white-space: nowrap; |
|
|
} |
|
|
|
|
|
.btn-primary { |
|
|
background: linear-gradient(135deg, #8e44ff, #4c32ff); |
|
|
color: white; |
|
|
box-shadow: 0 10px 40px rgba(78, 56, 230, 0.75); |
|
|
} |
|
|
|
|
|
.btn-primary:hover { |
|
|
transform: translateY(-1px); |
|
|
box-shadow: 0 14px 45px rgba(78, 56, 230, 0.9); |
|
|
} |
|
|
|
|
|
.btn-ghost { |
|
|
background: transparent; |
|
|
color: var(--text); |
|
|
border-color: rgba(255,255,255,0.18); |
|
|
backdrop-filter: blur(10px); |
|
|
} |
|
|
|
|
|
.btn-ghost:hover { |
|
|
border-color: rgba(255,255,255,0.35); |
|
|
background: rgba(255,255,255,0.02); |
|
|
} |
|
|
|
|
|
.nav-actions { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 12px; |
|
|
} |
|
|
|
|
|
.nav-toggle { |
|
|
display: none; |
|
|
width: 32px; |
|
|
height: 32px; |
|
|
border-radius: 999px; |
|
|
border: 1px solid rgba(255,255,255,0.18); |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
cursor: pointer; |
|
|
background: rgba(3, 5, 16, 0.7); |
|
|
} |
|
|
|
|
|
.nav-toggle span, |
|
|
.nav-toggle span::before, |
|
|
.nav-toggle span::after { |
|
|
display: block; |
|
|
width: 16px; |
|
|
height: 1.5px; |
|
|
border-radius: 999px; |
|
|
background: #fff; |
|
|
position: relative; |
|
|
transition: all 0.18s ease-out; |
|
|
} |
|
|
.nav-toggle span::before, |
|
|
.nav-toggle span::after { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
left: 0; |
|
|
} |
|
|
.nav-toggle span::before { top: -5px; } |
|
|
.nav-toggle span::after { top: 5px; } |
|
|
|
|
|
.nav-toggle.open span { |
|
|
background: transparent; |
|
|
} |
|
|
.nav-toggle.open span::before { |
|
|
top: 0; |
|
|
transform: rotate(45deg); |
|
|
} |
|
|
.nav-toggle.open span::after { |
|
|
top: 0; |
|
|
transform: rotate(-45deg); |
|
|
} |
|
|
|
|
|
|
|
|
.hero { |
|
|
padding: 40px 0 56px; |
|
|
} |
|
|
|
|
|
.hero-grid { |
|
|
display: grid; |
|
|
grid-template-columns: minmax(0, 3fr) minmax(0, 2.6fr); |
|
|
gap: 40px; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.eyebrow { |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
padding: 4px 10px; |
|
|
border-radius: 999px; |
|
|
font-size: 0.76rem; |
|
|
letter-spacing: 0.14em; |
|
|
text-transform: uppercase; |
|
|
color: var(--muted); |
|
|
border: 1px solid rgba(255,255,255,0.08); |
|
|
background: radial-gradient(circle at top left, rgba(255,255,255,0.06), transparent 70%); |
|
|
} |
|
|
|
|
|
.eyebrow-dot { |
|
|
width: 7px; |
|
|
height: 7px; |
|
|
border-radius: 999px; |
|
|
background: #4c32ff; |
|
|
box-shadow: 0 0 0 6px rgba(76,50,255,0.35); |
|
|
} |
|
|
|
|
|
.hero-title { |
|
|
margin-top: 20px; |
|
|
font-size: clamp(2.2rem, 4vw, 3.1rem); |
|
|
line-height: 1.05; |
|
|
letter-spacing: -0.02em; |
|
|
} |
|
|
|
|
|
.hero-title span.highlight { |
|
|
background-image: linear-gradient(120deg, #8e44ff, #4c32ff, #34ace0); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
|
|
|
.hero-subtitle { |
|
|
margin-top: 16px; |
|
|
font-size: 0.98rem; |
|
|
color: var(--muted); |
|
|
max-width: 480px; |
|
|
} |
|
|
|
|
|
.hero-badges { |
|
|
display: flex; |
|
|
flex-wrap: wrap; |
|
|
gap: 12px; |
|
|
margin-top: 22px; |
|
|
} |
|
|
|
|
|
.badge { |
|
|
padding: 5px 10px; |
|
|
font-size: 0.78rem; |
|
|
border-radius: 999px; |
|
|
border: 1px solid rgba(255,255,255,0.08); |
|
|
color: var(--muted); |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
gap: 6px; |
|
|
} |
|
|
|
|
|
.badge strong { |
|
|
color: #e5e7ff; |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
.hero-actions { |
|
|
margin-top: 26px; |
|
|
display: flex; |
|
|
flex-wrap: wrap; |
|
|
gap: 12px; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.hero-footnote { |
|
|
font-size: 0.8rem; |
|
|
color: var(--muted); |
|
|
margin-top: 10px; |
|
|
} |
|
|
|
|
|
.hero-metadata { |
|
|
display: flex; |
|
|
flex-wrap: wrap; |
|
|
gap: 22px; |
|
|
margin-top: 28px; |
|
|
font-size: 0.82rem; |
|
|
color: var(--muted); |
|
|
} |
|
|
|
|
|
.meta-item { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 4px; |
|
|
} |
|
|
|
|
|
.meta-item span { |
|
|
font-size: 0.76rem; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 0.18em; |
|
|
color: rgba(160,163,177,0.8); |
|
|
} |
|
|
|
|
|
.meta-item strong { |
|
|
font-size: 0.9rem; |
|
|
color: #f9fafb; |
|
|
} |
|
|
|
|
|
|
|
|
.hero-visual-wrap { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.hero-card { |
|
|
position: relative; |
|
|
border-radius: var(--radius-xl); |
|
|
background: radial-gradient(circle at top left, #151a3b, #07091e); |
|
|
border: 1px solid rgba(255,255,255,0.06); |
|
|
box-shadow: var(--shadow-soft); |
|
|
overflow: hidden; |
|
|
padding: 18px 18px 16px; |
|
|
isolation: isolate; |
|
|
} |
|
|
|
|
|
.hero-card::before { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
inset: 0; |
|
|
background: radial-gradient(circle at top right, rgba(108,92,231,0.35), transparent 55%); |
|
|
mix-blend-mode: screen; |
|
|
opacity: 0.8; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
.hero-card-header { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: space-between; |
|
|
gap: 10px; |
|
|
margin-bottom: 12px; |
|
|
position: relative; |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
.hero-pill { |
|
|
padding: 5px 10px; |
|
|
border-radius: 999px; |
|
|
font-size: 0.75rem; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 0.18em; |
|
|
border: 1px solid rgba(255,255,255,0.18); |
|
|
color: var(--muted); |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
gap: 6px; |
|
|
background: radial-gradient(circle at top left, rgba(255,255,255,0.06), transparent 70%); |
|
|
} |
|
|
|
|
|
.hero-pill-dot { |
|
|
width: 8px; |
|
|
height: 8px; |
|
|
border-radius: 50%; |
|
|
background: #2ecc71; |
|
|
box-shadow: 0 0 0 5px rgba(46,204,113,0.37); |
|
|
} |
|
|
|
|
|
.hero-card-chip { |
|
|
font-size: 0.78rem; |
|
|
padding: 5px 10px; |
|
|
border-radius: 999px; |
|
|
border: 1px solid rgba(255,255,255,0.14); |
|
|
color: #e5e7ff; |
|
|
background: rgba(2,6,23,0.65); |
|
|
backdrop-filter: blur(8px); |
|
|
} |
|
|
|
|
|
.hero-img-shell { |
|
|
position: relative; |
|
|
border-radius: 22px; |
|
|
overflow: hidden; |
|
|
border: 1px solid rgba(255,255,255,0.14); |
|
|
background: radial-gradient(circle at top left, #242b4d, #050716); |
|
|
} |
|
|
|
|
|
.hero-img-shell img { |
|
|
width: 100%; |
|
|
height: 260px; |
|
|
object-fit: cover; |
|
|
transform: scale(1.04); |
|
|
transform-origin: center; |
|
|
} |
|
|
|
|
|
.hero-gradient-overlay { |
|
|
position: absolute; |
|
|
inset: 0; |
|
|
background: radial-gradient(circle at 70% 120%, rgba(76,50,255,0.9), transparent 60%); |
|
|
mix-blend-mode: screen; |
|
|
opacity: 0.9; |
|
|
} |
|
|
|
|
|
.hero-floating-card { |
|
|
position: absolute; |
|
|
left: -10px; |
|
|
bottom: -14px; |
|
|
padding: 10px 12px; |
|
|
border-radius: 16px; |
|
|
background: rgba(5,8,22,0.88); |
|
|
backdrop-filter: blur(18px); |
|
|
border: 1px solid rgba(255,255,255,0.16); |
|
|
box-shadow: 0 18px 50px rgba(0,0,0,0.75); |
|
|
display: flex; |
|
|
gap: 14px; |
|
|
align-items: center; |
|
|
font-size: 0.78rem; |
|
|
} |
|
|
|
|
|
.floating-badge { |
|
|
width: 32px; |
|
|
height: 32px; |
|
|
border-radius: 999px; |
|
|
border: 1px solid rgba(255,255,255,0.18); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
background: radial-gradient(circle at top left, #8e44ff, #4c32ff); |
|
|
} |
|
|
|
|
|
.floating-badge span { |
|
|
width: 16px; |
|
|
height: 16px; |
|
|
border-radius: 6px; |
|
|
border: 2px solid rgba(255,255,255,0.88); |
|
|
border-top-right-radius: 2px; |
|
|
} |
|
|
|
|
|
.floating-copy small { |
|
|
color: rgba(209,213,219,0.9); |
|
|
display: block; |
|
|
margin-bottom: 2px; |
|
|
} |
|
|
|
|
|
.floating-copy strong { |
|
|
color: #f9fafb; |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.hero-floating-metric { |
|
|
position: absolute; |
|
|
right: 10px; |
|
|
top: -14px; |
|
|
padding: 8px 10px; |
|
|
border-radius: 999px; |
|
|
font-size: 0.75rem; |
|
|
background: rgba(5,8,22,0.82); |
|
|
border: 1px solid rgba(255,255,255,0.16); |
|
|
display: flex; |
|
|
align-items: baseline; |
|
|
gap: 6px; |
|
|
backdrop-filter: blur(16px); |
|
|
} |
|
|
|
|
|
.hero-floating-metric span { |
|
|
color: #34d399; |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.hero-floating-metric small { |
|
|
color: var(--muted); |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 0.14em; |
|
|
font-size: 0.68rem; |
|
|
} |
|
|
|
|
|
|
|
|
.split-section { |
|
|
margin-top: 52px; |
|
|
} |
|
|
|
|
|
.split-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(2, minmax(0, 1fr)); |
|
|
gap: 18px; |
|
|
} |
|
|
|
|
|
.split-card { |
|
|
border-radius: var(--radius-lg); |
|
|
padding: 18px 18px 20px; |
|
|
background: radial-gradient(circle at top left, rgba(255,255,255,0.06), transparent 70%); |
|
|
border: 1px solid var(--border-subtle); |
|
|
backdrop-filter: blur(14px); |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 10px; |
|
|
} |
|
|
|
|
|
.split-badge { |
|
|
font-size: 0.78rem; |
|
|
color: var(--muted); |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 0.18em; |
|
|
} |
|
|
|
|
|
.split-title { |
|
|
font-size: 1.05rem; |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
.split-body { |
|
|
font-size: 0.9rem; |
|
|
color: var(--muted); |
|
|
} |
|
|
|
|
|
.split-footer { |
|
|
margin-top: 6px; |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
font-size: 0.82rem; |
|
|
color: var(--muted); |
|
|
gap: 10px; |
|
|
} |
|
|
|
|
|
.split-link { |
|
|
font-size: 0.85rem; |
|
|
color: #a5b4fc; |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
gap: 6px; |
|
|
} |
|
|
|
|
|
.split-link span { |
|
|
font-size: 1rem; |
|
|
} |
|
|
|
|
|
|
|
|
.trust { |
|
|
padding: 24px 0 48px; |
|
|
} |
|
|
|
|
|
.trust-inner { |
|
|
border-radius: 999px; |
|
|
border: 1px solid rgba(255,255,255,0.06); |
|
|
background: radial-gradient(circle at top left, rgba(255,255,255,0.06), transparent 70%); |
|
|
padding: 10px 18px; |
|
|
display: flex; |
|
|
flex-wrap: wrap; |
|
|
gap: 12px 20px; |
|
|
align-items: center; |
|
|
justify-content: space-between; |
|
|
font-size: 0.8rem; |
|
|
color: var(--muted); |
|
|
} |
|
|
|
|
|
.trust-label { |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 0.18em; |
|
|
font-size: 0.7rem; |
|
|
color: rgba(160,163,177,0.9); |
|
|
} |
|
|
|
|
|
.trust-logos { |
|
|
display: flex; |
|
|
flex-wrap: wrap; |
|
|
gap: 16px; |
|
|
} |
|
|
|
|
|
.trust-pill { |
|
|
padding: 6px 10px; |
|
|
border-radius: 999px; |
|
|
border: 1px dashed rgba(255,255,255,0.18); |
|
|
font-size: 0.78rem; |
|
|
color: rgba(229,231,235,0.92); |
|
|
} |
|
|
|
|
|
|
|
|
.section { |
|
|
padding: 0 0 60px; |
|
|
} |
|
|
|
|
|
.section-header { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: flex-end; |
|
|
gap: 20px; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.section-title { |
|
|
font-size: 1.4rem; |
|
|
font-weight: 500; |
|
|
letter-spacing: -0.01em; |
|
|
} |
|
|
|
|
|
.section-sub { |
|
|
font-size: 0.9rem; |
|
|
max-width: 360px; |
|
|
color: var(--muted); |
|
|
} |
|
|
|
|
|
.steps-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(3, minmax(0, 1fr)); |
|
|
gap: 18px; |
|
|
} |
|
|
|
|
|
.step-card { |
|
|
border-radius: var(--radius-lg); |
|
|
padding: 16px 16px 18px; |
|
|
background: linear-gradient(145deg, rgba(14,16,38,0.98), rgba(8,10,28,0.98)); |
|
|
border: 1px solid rgba(255,255,255,0.06); |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.step-card::after { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
inset: -40%; |
|
|
background: radial-gradient(circle at top left, rgba(108,92,231,0.3), transparent 55%); |
|
|
opacity: 0; |
|
|
transition: opacity 0.2s ease-out; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
.step-card:hover::after { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.step-index { |
|
|
width: 24px; |
|
|
height: 24px; |
|
|
border-radius: 999px; |
|
|
border: 1px solid rgba(255,255,255,0.2); |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-size: 0.8rem; |
|
|
color: rgba(229,231,235,0.92); |
|
|
margin-bottom: 10px; |
|
|
background: rgba(3,4,13,0.84); |
|
|
} |
|
|
|
|
|
.step-title { |
|
|
font-size: 0.98rem; |
|
|
margin-bottom: 6px; |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
.step-body { |
|
|
font-size: 0.86rem; |
|
|
color: var(--muted); |
|
|
} |
|
|
|
|
|
.step-tag { |
|
|
margin-top: 10px; |
|
|
font-size: 0.78rem; |
|
|
color: #a5b4fc; |
|
|
} |
|
|
|
|
|
|
|
|
.footer { |
|
|
border-top: 1px solid rgba(255,255,255,0.06); |
|
|
padding: 18px 0 24px; |
|
|
font-size: 0.78rem; |
|
|
color: var(--muted); |
|
|
} |
|
|
|
|
|
.footer-inner { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
gap: 16px; |
|
|
flex-wrap: wrap; |
|
|
} |
|
|
|
|
|
.footer-links { |
|
|
display: flex; |
|
|
gap: 14px; |
|
|
flex-wrap: wrap; |
|
|
} |
|
|
|
|
|
.footer-links a { |
|
|
color: var(--muted); |
|
|
} |
|
|
|
|
|
.footer-links a:hover { |
|
|
color: #e5e7ff; |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 900px) { |
|
|
.nav-links { |
|
|
display: none; |
|
|
} |
|
|
.nav-actions .btn-primary { |
|
|
display: none; |
|
|
} |
|
|
.nav-toggle { |
|
|
display: inline-flex; |
|
|
} |
|
|
|
|
|
.nav-menu-open .nav-links { |
|
|
position: absolute; |
|
|
inset: calc(var(--nav-height) + 10px) 16px auto 16px; |
|
|
background: rgba(4,6,20,0.96); |
|
|
border-radius: 18px; |
|
|
border: 1px solid rgba(255,255,255,0.12); |
|
|
padding: 12px 14px; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 10px; |
|
|
box-shadow: 0 20px 40px rgba(0,0,0,0.8); |
|
|
} |
|
|
|
|
|
.nav-menu-open .nav-actions .btn-primary { |
|
|
display: inline-flex; |
|
|
} |
|
|
|
|
|
.hero-grid { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
|
|
|
.hero-visual-wrap { |
|
|
order: -1; |
|
|
} |
|
|
|
|
|
.hero-card { |
|
|
max-width: 480px; |
|
|
margin: 0 auto; |
|
|
} |
|
|
|
|
|
.split-grid { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
|
|
|
.trust-inner { |
|
|
border-radius: 22px; |
|
|
align-items: flex-start; |
|
|
} |
|
|
|
|
|
.steps-grid { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
} |
|
|
|
|
|
@media (max-width: 600px) { |
|
|
.hero { |
|
|
padding-top: 28px; |
|
|
} |
|
|
.section-header { |
|
|
flex-direction: column; |
|
|
align-items: flex-start; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="page"> |
|
|
<div class="bg-blob bg-blob--1"></div> |
|
|
<div class="bg-blob bg-blob--2"></div> |
|
|
|
|
|
<custom-navbar></custom-navbar> |
|
|
|
|
|
<main> |
|
|
<section class="hero"> |
|
|
<div class="container hero-grid"> |
|
|
<div> |
|
|
<div class="eyebrow"> |
|
|
<span class="eyebrow-dot"></span> |
|
|
<span>Digital trygghet i bilaffären</span> |
|
|
</div> |
|
|
<h1 class="hero-title"> |
|
|
Revolutionerande säkerhet för <span class="highlight">bilaffärer</span> |
|
|
</h1> |
|
|
<p class="hero-subtitle"> |
|
|
Säker, enkel och laglig bilhandel mellan privatpersoner och företag. |
|
|
Vår plattform eliminerar risker med automatiserade kontrakt, säkra betalningar |
|
|
och verifierade identiteter. |
|
|
</p> |
|
|
<div class="hero-badges"> |
|
|
<div class="badge"> |
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"> |
|
|
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path> |
|
|
<polyline points="22 4 12 14.01 9 11.01"></polyline> |
|
|
</svg> |
|
|
<strong>BankID</strong> verifiering |
|
|
</div> |
|
|
<div class="badge"> |
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"> |
|
|
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path> |
|
|
<polyline points="22 4 12 14.01 9 11.01"></polyline> |
|
|
</svg> |
|
|
<strong>Spårbara</strong> betalningar |
|
|
</div> |
|
|
<div class="badge"> |
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"> |
|
|
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path> |
|
|
<polyline points="22 4 12 14.01 9 11.01"></polyline> |
|
|
</svg> |
|
|
<strong>Standardiserade</strong> avtal |
|
|
</div> |
|
|
</div> |
|
|
<div class="hero-actions" id="bokademo"> |
|
|
<button class="btn btn-primary"> |
|
|
Boka demo |
|
|
</button> |
|
|
<button class="btn btn-ghost" onclick="document.getElementById('hur-funkar').scrollIntoView({behavior:'smooth'})"> |
|
|
Se hur det funkar |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<p class="hero-footnote"> |
|
|
Framtagen för begagnataffärer – från privat-till-privat till professionella handlare. |
|
|
</p> |
|
|
|
|
|
<div class="hero-metadata"> |
|
|
<div class="meta-item"> |
|
|
<span>Pilotkunder</span> |
|
|
<strong>3 svenska bilhandlare</strong> |
|
|
</div> |
|
|
<div class="meta-item"> |
|
|
<span>Fokus</span> |
|
|
<strong>Trygghet & minskad administration</strong> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="hero-visual-wrap"> |
|
|
<div class="hero-card"> |
|
|
<div class="hero-card-header"> |
|
|
<div class="hero-pill"> |
|
|
<span class="hero-pill-dot"></span> |
|
|
Flöde pågår – verifierar parter |
|
|
</div> |
|
|
<div class="hero-card-chip"> |
|
|
Säker betalning & ägarbyte |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="hero-img-shell"> |
|
|
|
|
|
<img src="https://images.pexels.com/photos/210019/pexels-photo-210019.jpeg?auto=compress&cs=tinysrgb&w=1200" alt="Bilfront med strålkastare"> |
|
|
<div class="hero-gradient-overlay"></div> |
|
|
</div> |
|
|
|
|
|
<div class="hero-floating-card"> |
|
|
<div class="floating-badge"><span></span></div> |
|
|
<div class="floating-copy"> |
|
|
<small>SafeSwitch-flöde</small> |
|
|
<strong>Kontrakt signerat · Pengar låsta</strong> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="hero-floating-metric"> |
|
|
<span>–70 %</span> |
|
|
<small>risk & manuellt jobb</small> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="split-section" id="privat"> |
|
|
<div class="container split-grid"> |
|
|
<article class="split-card"> |
|
|
<div class="split-badge">För privatpersoner</div> |
|
|
<h2 class="split-title">Sälj eller köp bil utan magkänslan “hoppas det går bra”.</h2> |
|
|
<p class="split-body"> |
|
|
Vi guidar er genom affären steg för steg – legitimering, betalning och |
|
|
digitalt avtal. Allt på en länk, inga konstiga swishar eller kontanter. |
|
|
</p> |
|
|
<div class="split-footer"> |
|
|
<span>Perfekt för privat-till-privat-affärer.</span> |
|
|
<a href="#kontakt" class="split-link"> |
|
|
Läs mer |
|
|
<span>↗</span> |
|
|
</a> |
|
|
</div> |
|
|
</article> |
|
|
|
|
|
<article class="split-card" id="foretag"> |
|
|
<div class="split-badge">För bilhandlare & företag</div> |
|
|
<h2 class="split-title">Mindre administration – mer tid till affärerna.</h2> |
|
|
<p class="split-body"> |
|
|
Standardiserade flöden för inbyten, försäljning och kommissionsaffärer. |
|
|
SafeSwitch integreras i ert arbetssätt utan att störa befintliga system. |
|
|
</p> |
|
|
<div class="split-footer"> |
|
|
<span>Designad för nordiska bilhallar.</span> |
|
|
<a href="#bokademo" class="split-link"> |
|
|
Boka genomgång |
|
|
<span>↗</span> |
|
|
</a> |
|
|
</div> |
|
|
</article> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="trust"> |
|
|
<div class="container"> |
|
|
<div class="trust-inner"> |
|
|
<div> |
|
|
<div class="trust-label">Byggt i Sverige</div> |
|
|
<div>Utvecklat tillsammans med erfarna bilhandlare och jurister.</div> |
|
|
</div> |
|
|
<div class="trust-logos"> |
|
|
<div class="trust-pill">GDPR-anpassat</div> |
|
|
<div class="trust-pill">BankID-flöden</div> |
|
|
<div class="trust-pill">Standardiserade avtal</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="section" id="hur-funkar"> |
|
|
<div class="container"> |
|
|
<div class="section-header"> |
|
|
<div> |
|
|
<div class="trust-label">Så funkar SafeSwitch</div> |
|
|
<h2 class="section-title">Ett tydligt flöde från handslag till ägarbyte.</h2> |
|
|
</div> |
|
|
<p class="section-sub"> |
|
|
Inga PDF-mallar, inga lösa sms. Ett modernt gränssnitt där köpare |
|
|
och säljare ser samma information och blir guidade genom affären. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="steps-grid"> |
|
|
<article class="step-card"> |
|
|
<div class="step-index">1</div> |
|
|
<h3 class="step-title">Starta affären</h3> |
|
|
<p class="step-body"> |
|
|
Säljaren fyller i bil, pris och villkor. SafeSwitch skapar |
|
|
ett digitalt flöde och bjuder in köparen via länk eller QR-kod. |
|
|
</p> |
|
|
<div class="step-tag">Identitet via BankID</div> |
|
|
</article> |
|
|
|
|
|
<article class="step-card"> |
|
|
<div class="step-index">2</div> |
|
|
<h3 class="step-title">Verifiera & säkra betalningen</h3> |
|
|
<p class="step-body"> |
|
|
Parterna legitimerar sig, godkänner villkoren och genomför betalning. |
|
|
Medlen hålls säkra tills affären är klar. |
|
|
</p> |
|
|
<div class="step-tag">Spårbara transaktioner</div> |
|
|
</article> |
|
|
|
|
|
<article class="step-card"> |
|
|
<div class="step-index">3</div> |
|
|
<h3 class="step-title">Ägarbyte & kvitto</h3> |
|
|
<p class="step-body"> |
|
|
När allt är uppfyllt genomförs ägarbytet och båda får ett digitalt kvitto |
|
|
och avtal sparat – klart för bokföring och historik. |
|
|
</p> |
|
|
<div class="step-tag">Arkiverat & sökbart</div> |
|
|
</article> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="section" id="kontakt"> |
|
|
<div class="container"> |
|
|
<div class="section-header"> |
|
|
<div> |
|
|
<div class="trust-label" id="om-oss">Vill du se mer?</div> |
|
|
<h2 class="section-title">Låt oss visa hur SafeSwitch kan passa in i er vardag.</h2> |
|
|
</div> |
|
|
<p class="section-sub"> |
|
|
Berätta kort om era flöden – så anpassar vi en demo för privatpersoner, |
|
|
bilhandlare eller andra typer av fordonsaffärer. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="split-grid"> |
|
|
<div class="split-card"> |
|
|
<div class="split-badge">Kontakt</div> |
|
|
<h3 class="split-title">Boka ett 20-minuters videomöte.</h3> |
|
|
<p class="split-body"> |
|
|
Vi går igenom nuläge, visar plattformen och diskuterar möjliga pilotupplägg. |
|
|
</p> |
|
|
<div class="split-footer"> |
|
|
<span>Inga förpliktelser.</span> |
|
|
<a href="mailto:info@safeswitch.se" class="split-link"> |
|
|
Maila oss |
|
|
<span>↗</span> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="split-card"> |
|
|
<div class="split-badge">Snabb intresseanmälan</div> |
|
|
<h3 class="split-title">Skicka in dina uppgifter så hör vi av oss.</h3> |
|
|
<p class="split-body"> |
|
|
Namn, företag (om relevant) och hur ni jobbar med bilaffärer idag. |
|
|
</p> |
|
|
<div class="split-footer"> |
|
|
<span>Forma SafeSwitch tillsammans med oss.</span> |
|
|
<a href="#bokademo" class="split-link"> |
|
|
Fyll i formulär |
|
|
<span>↗</span> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
<testimonials-slider></testimonials-slider> |
|
|
|
|
|
|
|
|
<custom-footer></custom-footer> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('year').textContent = new Date().getFullYear(); |
|
|
|
|
|
|
|
|
const navToggle = document.getElementById('navToggle'); |
|
|
const headerInner = document.getElementById('headerInner'); |
|
|
|
|
|
navToggle.addEventListener('click', () => { |
|
|
navToggle.classList.toggle('open'); |
|
|
headerInner.classList.toggle('nav-menu-open'); |
|
|
}); |
|
|
</script> |
|
|
<script src="components/navbar.js"></script> |
|
|
<script src="components/footer.js"></script> |
|
|
<script src="components/testimonials.js"></script> |
|
|
</body> |
|
|
</html> |
|
|
|
