<!DOCTYPE html>
<html lang="fi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Big Plug-In — Megakytkentä | Synergi</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--navy: #031152;
--navy-deep: #020B35;
--navy-light: #0a1f7a;
--electric: #4A6CF7;
--electric-bright: #6C8FFF;
--white: #ffffff;
--off-white: #F6F7FB;
--text: #1A1A2E;
--muted: #6B7280;
--border: #E5E7EB;
--success: #16A34A;
}
html { scroll-behavior: smooth; }
body {
font-family: 'DM Sans', sans-serif;
color: var(--text);
background: var(--white);
line-height: 1.6;
overflow-x: hidden;
}
/* ── NAV ── */
nav {
position: sticky;
top: 0;
z-index: 100;
background: rgba(255,255,255,0.95);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
padding: 0 40px;
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-logo {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
}
.nav-logo-mark {
width: 32px;
height: 32px;
background: var(--navy);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 14px;
letter-spacing: -0.5px;
}
.nav-logo-text {
font-size: 16px;
font-weight: 600;
color: var(--navy);
letter-spacing: -0.3px;
}
.nav-cta {
background: var(--navy);
color: white;
padding: 9px 20px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
text-decoration: none;
transition: background 0.2s;
}
.nav-cta:hover { background: var(--navy-light); }
/* ── HERO ── */
.hero {
background: var(--navy);
color: white;
padding: 80px 40px 72px;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 70% at 80% 50%, rgba(74,108,247,0.25) 0%, transparent 70%),
radial-gradient(ellipse 40% 50% at 10% 80%, rgba(108,143,255,0.15) 0%, transparent 60%);
pointer-events: none;
}
/* Animated grid lines */
.hero::after {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 60px 60px;
pointer-events: none;
}
.hero-inner {
max-width: 700px;
position: relative;
z-index: 1;
}
.hero-partners {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 28px;
flex-wrap: wrap;
}
.partner-badge {
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.2);
color: rgba(255,255,255,0.85);
font-size: 12px;
font-weight: 500;
padding: 5px 12px;
border-radius: 100px;
letter-spacing: 0.3px;
}
.partner-dot {
color: rgba(255,255,255,0.3);
font-size: 12px;
}
.hero-eyebrow {
font-size: 13px;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--electric-bright);
margin-bottom: 16px;
}
.hero h1 {
font-family: 'DM Serif Display', serif;
font-size: clamp(44px, 6vw, 68px);
line-height: 1.05;
letter-spacing: -1px;
margin-bottom: 8px;
color: white;
}
.hero-subtitle-fi {
font-family: 'DM Serif Display', serif;
font-size: clamp(20px, 3vw, 28px);
color: rgba(255,255,255,0.5);
font-style: italic;
margin-bottom: 28px;
letter-spacing: -0.3px;
}
.hero-quote {
background: rgba(255,255,255,0.08);
border-left: 3px solid var(--electric-bright);
padding: 20px 24px;
border-radius: 0 12px 12px 0;
margin-bottom: 40px;
font-size: 16px;
line-height: 1.6;
color: rgba(255,255,255,0.88);
font-style: italic;
max-width: 620px;
}
.hero-meta {
display: flex;
gap: 32px;
flex-wrap: wrap;
}
.hero-meta-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.hero-meta-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: rgba(255,255,255,0.4);
}
.hero-meta-value {
font-size: 15px;
font-weight: 500;
color: rgba(255,255,255,0.9);
}
/* ── SIGNUP SECTION ── */
.signup-section {
background: var(--off-white);
padding: 72px 40px;
display: flex;
justify-content: center;
}
.signup-card {
background: white;
border-radius: 20px;
box-shadow: 0 4px 40px rgba(3,17,82,0.1);
padding: 52px 48px;
max-width: 560px;
width: 100%;
text-align: center;
}
.signup-icon {
width: 56px;
height: 56px;
background: var(--navy);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24px;
font-size: 26px;
}
.signup-card h2 {
font-family: 'DM Serif Display', serif;
font-size: 28px;
color: var(--navy);
margin-bottom: 12px;
letter-spacing: -0.5px;
line-height: 1.2;
}
.signup-card p {
color: var(--muted);
font-size: 15px;
margin-bottom: 32px;
line-height: 1.6;
}
.form-group {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 16px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
input[type="text"],
input[type="email"],
select {
width: 100%;
padding: 14px 16px;
border: 1.5px solid var(--border);
border-radius: 10px;
font-size: 15px;
font-family: 'DM Sans', sans-serif;
color: var(--text);
background: white;
transition: border-color 0.2s, box-shadow 0.2s;
appearance: none;
}
input:focus, select:focus {
outline: none;
border-color: var(--navy);
box-shadow: 0 0 0 3px rgba(3,17,82,0.08);
}
input::placeholder { color: #9CA3AF; }
.radio-group {
display: flex;
flex-direction: column;
gap: 10px;
text-align: left;
margin-bottom: 12px;
}
.radio-label {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
border: 1.5px solid var(--border);
border-radius: 10px;
cursor: pointer;
transition: border-color 0.2s, background 0.2s;
font-size: 14px;
color: var(--text);
line-height: 1.4;
}
.radio-label:hover {
border-color: var(--navy);
background: rgba(3,17,82,0.02);
}
.radio-label input[type="radio"] {
width: auto;
margin-top: 2px;
accent-color: var(--navy);
flex-shrink: 0;
}
.radio-label.selected {
border-color: var(--navy);
background: rgba(3,17,82,0.04);
}
.radio-label strong {
display: block;
font-weight: 600;
margin-bottom: 2px;
}
.submit-btn {
width: 100%;
background: var(--navy);
color: white;
border: none;
padding: 16px 24px;
border-radius: 10px;
font-size: 16px;
font-weight: 600;
font-family: 'DM Sans', sans-serif;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
margin-top: 8px;
letter-spacing: -0.2px;
}
.submit-btn:hover { background: var(--navy-light); }
.submit-btn:active { transform: scale(0.99); }
.form-consent {
font-size: 12px;
color: var(--muted);
margin-top: 14px;
line-height: 1.5;
}
.success-state {
display: none;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 20px 0;
}
.success-check {
width: 60px;
height: 60px;
background: #DCFCE7;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
}
.success-state h3 {
font-family: 'DM Serif Display', serif;
font-size: 22px;
color: var(--navy);
}
.success-state p {
color: var(--muted);
font-size: 14px;
margin-bottom: 0;
}
/* ── WHAT IS ── */
.section {
padding: 80px 40px;
max-width: 900px;
margin: 0 auto;
}
.section-label {
font-size: 12px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--electric);
margin-bottom: 16px;
}
.section h2 {
font-family: 'DM Serif Display', serif;
font-size: clamp(28px, 4vw, 40px);
color: var(--navy);
letter-spacing: -0.8px;
line-height: 1.15;
margin-bottom: 24px;
}
.section p {
font-size: 16px;
color: var(--muted);
line-height: 1.75;
max-width: 680px;
}
.section p + p { margin-top: 16px; }
/* ── STATS BAR ── */
.stats-bar {
background: var(--navy);
padding: 48px 40px;
}
.stats-inner {
max-width: 900px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 48px;
text-align: center;
}
.stat-item {
display: flex;
flex-direction: column;
gap: 8px;
}
.stat-number {
font-family: 'DM Serif Display', serif;
font-size: 44px;
color: white;
line-height: 1;
letter-spacing: -1px;
}
.stat-number span {
font-size: 28px;
color: var(--electric-bright);
}
.stat-label {
font-size: 14px;
color: rgba(255,255,255,0.55);
line-height: 1.4;
max-width: 180px;
margin: 0 auto;
}
/* ── WHY IT MATTERS ── */
.why-section {
background: var(--off-white);
padding: 80px 40px;
}
.why-inner {
max-width: 900px;
margin: 0 auto;
}
.bullets {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 32px;
}
.bullet-item {
display: flex;
align-items: flex-start;
gap: 16px;
background: white;
border-radius: 12px;
padding: 20px 24px;
border: 1px solid var(--border);
}
.bullet-dot {
width: 8px;
height: 8px;
background: var(--electric);
border-radius: 50%;
flex-shrink: 0;
margin-top: 8px;
}
.bullet-item p {
font-size: 15px;
color: var(--text);
line-height: 1.6;
max-width: none;
}
/* ── HOW IT WORKS ── */
.how-section {
padding: 80px 40px;
max-width: 900px;
margin: 0 auto;
}
.flow-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-top: 40px;
}
.flow-card {
background: var(--off-white);
border-radius: 16px;
padding: 32px 28px;
border: 1px solid var(--border);
}
.flow-card-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.flow-card-icon {
width: 40px;
height: 40px;
background: var(--navy);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.flow-card h3 {
font-family: 'DM Serif Display', serif;
font-size: 18px;
color: var(--navy);
letter-spacing: -0.3px;
}
.flow-steps {
display: flex;
flex-direction: column;
gap: 12px;
}
.flow-step {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 14px;
color: var(--muted);
line-height: 1.5;
}
.step-num {
width: 22px;
height: 22px;
background: var(--navy);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
flex-shrink: 0;
margin-top: 1px;
}
/* ── GOAL BAR ── */
.goal-section {
background: var(--navy);
padding: 64px 40px;
text-align: center;
}
.goal-inner {
max-width: 700px;
margin: 0 auto;
}
.goal-section .section-label {
color: var(--electric-bright);
margin-bottom: 20px;
}
.goal-number {
font-family: 'DM Serif Display', serif;
font-size: clamp(56px, 10vw, 96px);
color: white;
line-height: 1;
letter-spacing: -2px;
margin-bottom: 16px;
}
.goal-desc {
font-size: 16px;
color: rgba(255,255,255,0.65);
line-height: 1.7;
max-width: 520px;
margin: 0 auto 36px;
}
.goal-cta {
display: inline-block;
background: white;
color: var(--navy);
padding: 14px 32px;
border-radius: 10px;
font-size: 15px;
font-weight: 600;
text-decoration: none;
transition: opacity 0.2s;
}
.goal-cta:hover { opacity: 0.9; }
/* ── ABOUT SYNERGI ── */
.about-section {
background: var(--off-white);
padding: 80px 40px;
}
.about-inner {
max-width: 900px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
.about-content h2 {
font-family: 'DM Serif Display', serif;
font-size: 32px;
color: var(--navy);
letter-spacing: -0.6px;
margin-bottom: 16px;
line-height: 1.2;
}
.about-content p {
font-size: 15px;
color: var(--muted);
line-height: 1.75;
margin-bottom: 16px;
}
.app-badges {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 28px;
}
.app-badge {
display: inline-flex;
align-items: center;
gap: 12px;
background: var(--navy);
color: white;
padding: 12px 20px;
border-radius: 10px;
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: background 0.2s;
width: fit-content;
}
.app-badge:hover { background: var(--navy-light); }
.app-badge span { font-size: 20px; }
.credibility-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.cred-item {
background: white;
border-radius: 12px;
padding: 20px 22px;
border: 1px solid var(--border);
display: flex;
gap: 16px;
align-items: flex-start;
}
.cred-icon {
font-size: 22px;
flex-shrink: 0;
margin-top: 2px;
}
.cred-item h4 {
font-size: 14px;
font-weight: 600;
color: var(--navy);
margin-bottom: 4px;
}
.cred-item p {
font-size: 13px;
color: var(--muted);
margin: 0;
line-height: 1.5;
}
/* ── FOOTER ── */
footer {
background: var(--navy-deep);
color: rgba(255,255,255,0.5);
padding: 48px 40px 40px;
}
.footer-inner {
max-width: 900px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: 32px;
margin-bottom: 40px;
}
.footer-brand h3 {
font-family: 'DM Serif Display', serif;
font-size: 20px;
color: white;
margin-bottom: 8px;
}
.footer-brand p {
font-size: 13px;
line-height: 1.6;
max-width: 260px;
}
.footer-links h4 {
font-size: 12px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: rgba(255,255,255,0.3);
margin-bottom: 16px;
}
.footer-links a {
display: block;
color: rgba(255,255,255,0.55);
text-decoration: none;
font-size: 14px;
margin-bottom: 10px;
transition: color 0.2s;
}
.footer-links a:hover { color: white; }
.footer-bottom {
max-width: 900px;
margin: 0 auto;
padding-top: 24px;
border-top: 1px solid rgba(255,255,255,0.08);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
font-size: 12px;
}
/* ── DIVIDER ── */
.divider {
height: 1px;
background: var(--border);
max-width: 900px;
margin: 0 auto;
}
/* ── ANIMATIONS ── */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.hero-inner > * {
animation: fadeUp 0.6s ease both;
}
.hero-partners { animation-delay: 0s; }
.hero-eyebrow { animation-delay: 0.08s; }
.hero h1 { animation-delay: 0.15s; }
.hero-subtitle-fi { animation-delay: 0.2s; }
.hero-quote { animation-delay: 0.28s; }
.hero-meta { animation-delay: 0.35s; }
/* ── RESPONSIVE ── */
@media (max-width: 680px) {
nav { padding: 0 20px; }
.hero { padding: 56px 20px 56px; }
.section, .how-section { padding: 56px 20px; }
.signup-section { padding: 48px 20px; }
.signup-card { padding: 36px 24px; }
.stats-inner { grid-template-columns: 1fr; gap: 32px; }
.flow-grid { grid-template-columns: 1fr; }
.about-inner { grid-template-columns: 1fr; gap: 40px; }
.why-section, .about-section { padding: 56px 20px; }
.stats-bar, .goal-section { padding: 48px 20px; }
footer { padding: 40px 20px 32px; }
.footer-inner { flex-direction: column; gap: 24px; }
.form-row { grid-template-columns: 1fr; }
.hero-meta { gap: 20px; }
}
</style>
</head>
<body>
<!-- NAV -->
<nav>
<a href="https://www.synergi.so" class="nav-logo">
<div class="nav-logo-mark">S</div>
<span class="nav-logo-text">Synergi</span>
</a>
<a href="#signup" class="nav-cta">Ilmoittaudu →</a>
</nav>
<!-- HERO -->
<section class="hero">
<div class="hero-inner">
<div class="hero-partners">
<span class="partner-badge">Synergi</span>
<span class="partner-dot">·</span>
<span class="partner-badge">Tesla Club Finland</span>
<span class="partner-dot">·</span>
<span class="partner-badge">Sähköautoilijät</span>
</div>
<div class="hero-eyebrow">Toukokuu 2026 · Finland</div>
<h1>The Big Plug-In</h1>
<div class="hero-subtitle-fi">Megakytkentä</div>
<div class="hero-quote">
"Finnish EV drivers are not just consuming energy — together they represent multiple megawatts of live, controllable grid load. The Big Plug-In makes that visible for the first time."
</div>
<div class="hero-meta">
<div class="hero-meta-item">
<span class="hero-meta-label">Tapahtuma</span>
<span class="hero-meta-value">Toukokuu 2026 — päivä TBA</span>
</div>
<div class="hero-meta-item">
<span class="hero-meta-label">Kenelle</span>
<span class="hero-meta-value">Kaikki Synergi-yhteensopivat sähköautoilijat</span>
</div>
<div class="hero-meta-item">
<span class="hero-meta-label">Tavoite</span>
<span class="hero-meta-value">15 MW live-aktivaatio</span>
</div>
</div>
</div>
</section>
<!-- SIGNUP -->
<section class="signup-section" id="signup">
<div class="signup-card">
<div class="signup-icon">⚡</div>
<h2>Ilmoittaudu mukaan!</h2>
<p>Oletko valmis olemaan osa Suomen ensimmäistä julkista virtuaalivoimalan live-tapahtumaa? Jätä yhteystietosi — lähetämme sinulle ohjeet ja tapahtumapäivän tiedot heti kun ne ovat valmiit.</p>
<form id="signupForm">
<div class="form-group">
<div class="form-row">
<input type="text" placeholder="Etunimi" required>
<input type="text" placeholder="Sukunimi" required>
</div>
<input type="email" placeholder="Sähköpostiosoite" required>
<div class="radio-group">
<label class="radio-label" onclick="this.classList.add('selected');document.querySelectorAll('.radio-label').forEach(l=>l!==this&&l.classList.remove('selected'))">
<input type="radio" name="user_type" value="existing" required>
<div>
<strong>Olen jo Synergi-käyttäjä</strong>
Sähköautoni on jo yhdistetty — olen valmis osallistumaan
</div>
</label>
<label class="radio-label" onclick="this.classList.add('selected');document.querySelectorAll('.radio-label').forEach(l=>l!==this&&l.classList.remove('selected'))">
<input type="radio" name="user_type" value="new" required>
<div>
<strong>Olen uusi käyttäjä</strong>
Lataan sovelluksen ja yhdistän sähköautoni ennen tapahtumaa
</div>
</label>
</div>
<select>
<option value="" disabled selected>Sähköautosi merkki (valinnainen)</option>
<option>Tesla</option>
<option>Volkswagen ID</option>
<option>Hyundai / Kia</option>
<option>BMW</option>
<option>Mercedes-Benz EQ</option>
<option>Volvo</option>
<option>Polestar</option>
<option>Audi</option>
<option>Skoda</option>
<option>Muu</option>
</select>
</div>
<button type="submit" class="submit-btn">Ilmoittaudu mukaan ⚡</button>
<p class="form-consent">Jättämällä tietosi hyväksyt, että Synergi voi lähettää sinulle tapahtumaan liittyviä viestejä. Voit peruuttaa suostumuksesi milloin tahansa.</p>
</form>
<div class="success-state" id="successState">
<div class="success-check">✓</div>
<h3>Olet mukana!</h3>
<p>Lähetämme sinulle ohjeet ja tapahtumapäivän tiedot pian. Tarkista myös roskapostikansio.</p>
</div>
</div>
</section>
<!-- STATS BAR -->
<div class="stats-bar">
<div class="stats-inner">
<div class="stat-item">
<div class="stat-number">15<span>MW</span></div>
<div class="stat-label">Synergin hallittavissa oleva EV-kapasiteetti Suomessa tänään</div>
</div>
<div class="stat-item">
<div class="stat-number">6–7<span>MW</span></div>
<div class="stat-label">Päivittäin hyödynnettyä joustoa Synergi-alustan kautta</div>
</div>
<div class="stat-item">
<div class="stat-number">400<span>+</span></div>
<div class="stat-label">Yhteensopivaa sähköauto- ja laitemerkkiä</div>
</div>
</div>
</div>
<!-- WHAT IS SECTION -->
<section class="section">
<div class="section-label">01 — Mikä tapahtuma on?</div>
<h2>Suomen ensimmäinen julkinen live-VPP-tapahtuma</h2>
<p>Synergi järjestää yhdessä Tesla Club Finlandin ja Sähköautoilijat ry:n kanssa Suomen ensimmäisen julkisen virtuaalivoimalan live-tapahtuman — The Big Plug-In.</p>
<p style="margin-top:16px">Ennalta ilmoitettuna hetkenä toukokuussa 2026 sähköautoilijat ympäri Suomea kytkeytyvät samanaikaisesti — ja Synergi käynnistää ja pysäyttää latausta tuhansissa sähköautoissa yhdellä live-signaalilla. Reaaliaikainen dashboard näyttää MW-vasteen koko maailmalle.</p>
<p style="margin-top:16px">Tämä ei ole teoreettinen demonstraatio. Se on koordinoitu, todellinen verkkojoustomäärä — streamattuna livenä.</p>
</section>
<div class="divider"></div>
<!-- WHY IT MATTERS -->
<section class="why-section">
<div class="why-inner">
<div class="section-label">02 — Miksi tämä on tärkeää?</div>
<h2>Sähköauto ei ole vain kuluttaja — se on voimavara</h2>
<p>Julkinen keskustelu sähköautoista pyörii lähes aina energiankulutuksen ympärillä — kuinka paljon sähköä autot kuluttavat. Tämä kampanja muuttaa sen.</p>
<div class="bullets">
<div class="bullet-item">
<div class="bullet-dot"></div>
<p>Sähköautot ovat joustavia verkkoresursseja — eivät pelkästään kuluttajia.</p>
</div>
<div class="bullet-item">
<div class="bullet-dot"></div>
<p>Koordinoituna ne voivat aktiivisesti tasapainottaa sähköverkkoa ja tukea sen vakautta.</p>
</div>
<div class="bullet-item">
<div class="bullet-dot"></div>
<p>Suomi tarvitsee ohjelmistotoimijoita kuten Synergi, jotka voivat koota kotitalouksien energiavarat — sähköautot, lämpöpumput, aurinkopaneelit — hallittavaksi joustomassavaksi.</p>
</div>
</div>
</div>
</section>
<!-- GOAL -->
<section class="goal-section">
<div class="goal-inner">
<div class="section-label">Tavoite</div>
<div class="goal-number">15 MW</div>
<p class="goal-desc">Se vastaa kolmen Helsingin kaupunginosan keskimääräistä asuinrakennusten sähkönkulutusta — aktivoituna yhdessä koordinoidussa toimessa suomalaisten sähköautoilijoiden ja Synergi-alustan voimin.</p>
<a href="#signup" class="goal-cta">Olen mukana ⚡</a>
</div>
</section>
<!-- HOW IT WORKS -->
<section class="how-section">
<div class="section-label">03 — Miten osallistua?</div>
<h2>Kaksi tapaa osallistua</h2>
<div class="flow-grid">
<div class="flow-card">
<div class="flow-card-header">
<div class="flow-card-icon">🔋</div>
<h3>Olen jo Synergi-käyttäjä</h3>
</div>
<div class="flow-steps">
<div class="flow-step">
<div class="step-num">1</div>
<span>Sähköautosi on jo yhdistetty — olet valmis</span>
</div>
<div class="flow-step">
<div class="step-num">2</div>
<span>Ilmoittaudu yllä olevalla lomakkeella</span>
</div>
<div class="flow-step">
<div class="step-num">3</div>
<span>Saat tapahtumaohjeet suoraan sähköpostiisi</span>
</div>
<div class="flow-step">
<div class="step-num">4</div>
<span>Kytkeydyt mukaan tapahtumapäivänä sovelluksen kautta</span>
</div>
</div>
</div>
<div class="flow-card">
<div class="flow-card-header">
<div class="flow-card-icon">🆕</div>
<h3>Olen uusi käyttäjä</h3>
</div>
<div class="flow-steps">
<div class="flow-step">
<div class="step-num">1</div>
<span>Ilmoittaudu yllä olevalla lomakkeella</span>
</div>
<div class="flow-step">
<div class="step-num">2</div>
<span>Lataa Synergi-sovellus App Storesta tai Google Playsta</span>
</div>
<div class="flow-step">
<div class="step-num">3</div>
<span>Yhdistä yhteensopiva sähköautosi sovellukseen</span>
</div>
<div class="flow-step">
<div class="step-num">4</div>
<span>Saat tapahtumaohjeet ennen tapahtumapäivää</span>
</div>
</div>
</div>
</div>
</section>
<!-- ABOUT SYNERGI -->
<section class="about-section">
<div class="about-inner">
<div class="about-content">
<div class="section-label">Mikä on Synergi?</div>
<h2>Suomen ensimmäinen sähköautojen VPP-alusta</h2>
<p>Synergi oli ensimmäinen yritys Suomessa, joka otti käyttöön sähköautoihin perustuvan kotitalouksien virtuaalivoimalaitoksen — marraskuussa 2025.</p>
<p>Synergin ilmainen sovellus optimoi sähköautosi latauksen automaattisesti halvimmille ja verkon kannalta hiljaisimmille tunneille — kerryttäen sinulle säästöjä ja palkkioita. Ei ylimääräisiä laitteita, ei asennuksia.</p>
<div class="app-badges">
<a href="https://apps.apple.com/fi/app/synergi/id6471491063?l=fi" class="app-badge">
<span>🍎</span> Lataa App Storesta
</a>
<a href="https://play.google.com/store/apps/details?id=com.synergi.mobileapp" class="app-badge">
<span>▶</span> Lataa Google Playsta
</a>
</div>
</div>
<div class="credibility-list">
<div class="cred-item">
<div class="cred-icon">🏆</div>
<div>
<h4>Suomen ensimmäinen EV-VPP</h4>
<p>Lanseerattu marraskuussa 2025 — ensimmäinen sähköautoihin perustuva kotitalousvoimalaitos Suomessa.</p>
</div>
</div>
<div class="cred-item">
<div class="cred-icon">⚡</div>
<div>
<h4>15 MW hallittavaa kapasiteettia</h4>
<p>Synergin EV-laivasto edustaa tänään 15 MW:n hallittavaa kapasiteettia, josta 6–7 MW on päivittäisessä käytössä.</p>
</div>
</div>
<div class="cred-item">
<div class="cred-icon">🚗</div>
<div>
<h4>Yli 400 yhteensopivaa mallia</h4>
<p>Testaa <a href="https://www.synergi.so/fi/tuetut-laitteet" style="color:var(--navy);font-weight:500">täällä</a>, onko sinun autosi yhteensopiva Synergin kanssa.</p>
</div>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="footer-inner">
<div class="footer-brand">
<h3>The Big Plug-In</h3>
<p>Suomen ensimmäinen julkinen sähköautojen virtuaalivoimalalaitos live-tapahtuma. Toukokuu 2026.</p>
</div>
<div class="footer-links">
<h4>Synergi</h4>
<a href="https://www.synergi.so/fi/koti">Koti</a>
<a href="https://www.synergi.so/fi/miten-se-toimii">Miten se toimii?</a>
<a href="https://www.synergi.so/fi/tuetut-laitteet">Tuetut laitteet</a>
<a href="https://www.synergi.so/fi/blogit">Blogi</a>
</div>
<div class="footer-links">
<h4>Kumppanit</h4>
<a href="https://teslaclubfinland.fi">Tesla Club Finland</a>
<a href="https://www.sahkoautoilijat.fi">Sähköautoilijat ry</a>
</div>
<div class="footer-links">
<h4>Ota yhteyttä</h4>
<a href="mailto:support@synergi.so">support@synergi.so</a>
</div>
</div>
<div class="footer-bottom">
<span>© 2026 Synergi Solutions Oy · Y-tunnus: 3306817-5</span>
<div style="display:flex;gap:20px">
<a href="https://www.synergi.so/old-privacy-policy" style="color:rgba(255,255,255,0.4);text-decoration:none;font-size:12px">Tietosuoja</a>
<a href="https://www.synergi.so/old-terms-and-conditions" style="color:rgba(255,255,255,0.4);text-decoration:none;font-size:12px">Käyttöehdot</a>
</div>
</div>
</footer>
<script>
document.getElementById('signupForm').addEventListener('submit', function(e) {
e.preventDefault();
this.style.display = 'none';
document.getElementById('successState').style.display = 'flex';
});
// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(a => {
a.addEventListener('click', function(e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
});
});
</script>
</body>
</html>
