Add tarjouspyynto page with price calculator, update contact info and nav links

- New tarjouspyynto.html with real-time price calculator sidebar
- Updated company info: Web1 Oy, Latokarinkatu 3, 20200 Turku
- Nav links point to dedicated tarjouspyynto page across all pages
- CTA buttons on yhteydet.html link to tarjouspyynto page
- Calculator CSS for responsive two-column layout

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

index.html

@@ -41,7 +41,7 @@
                 <a href="#hinnat">Hinnat</a>
                 <a href="konesali.html">Konesali</a>
                 <a href="yhteydet.html">Yhteydet</a>
-                <a href="#yhteystiedot" class="nav-cta">Jätä tarjouspyyntö</a>
+                <a href="tarjouspyynto.html" class="nav-cta">Jätä tarjouspyyntö</a>
             </nav>
             <button class="nav-toggle" id="nav-toggle" aria-label="Avaa valikko">
                 <span></span>
@@ -1034,7 +1034,7 @@
                         </svg>
                         <div>
                             <strong>Osoite</strong>
-                            <p>Esimerkkikatu 1<br>20100 Turku</p>
+                            <p>Web1 Oy<br>Latokarinkatu 3<br>20200 Turku</p>
                         </div>
                     </div>
                     <div class="contact-item">
@@ -1043,7 +1043,7 @@
                         </svg>
                         <div>
                             <strong>Sähköposti</strong>
-                            <p>info@konesaliturku.fi</p>
+                            <p>support@konesaliturku.fi</p>
                         </div>
                     </div>
                     <div class="contact-item">
@@ -1098,14 +1098,14 @@
                 <a href="konesali.html">Konesali</a>
                 <a href="yhteydet.html">Yhteydet</a>
                 <a href="#hinnat">Hinnat</a>
-                <a href="#yhteystiedot">Yhteystiedot</a>
+                <a href="tarjouspyynto.html">Tarjouspyyntö</a>
             </div>
             <div class="footer-links">
-                <h4>Palvelut</h4>
+                <h4>Yhteystiedot</h4>
-                <a href="#hinnat">1U Laitepaikka</a>
+                <a href="mailto:support@konesaliturku.fi">support@konesaliturku.fi</a>
-                <a href="#hinnat">2U Laitepaikka</a>
+                <span>Web1 Oy</span>
-                <a href="#hinnat">4U Laitepaikka</a>
+                <span>Latokarinkatu 3</span>
-                <a href="yhteydet.html">Yhteydet</a>
+                <span>20200 Turku</span>
             </div>
         </div>
         <div class="footer-bottom">

konesali.html

@@ -36,7 +36,7 @@
                 <a href="index.html#hinnat">Hinnat</a>
                 <a href="konesali.html" class="active">Konesali</a>
                 <a href="yhteydet.html">Yhteydet</a>
-                <a href="index.html#yhteystiedot" class="nav-cta">Jätä tarjouspyyntö</a>
+                <a href="tarjouspyynto.html" class="nav-cta">Jätä tarjouspyyntö</a>
             </nav>
             <button class="nav-toggle" id="nav-toggle" aria-label="Avaa valikko">
                 <span></span>
@@ -520,13 +520,14 @@
                 <a href="konesali.html">Konesali</a>
                 <a href="yhteydet.html">Yhteydet</a>
                 <a href="index.html#hinnat">Hinnat</a>
-                <a href="index.html#yhteystiedot">Yhteystiedot</a>
+                <a href="tarjouspyynto.html">Tarjouspyyntö</a>
             </div>
             <div class="footer-links">
-                <h4>Palvelut</h4>
+                <h4>Yhteystiedot</h4>
-                <a href="index.html#hinnat">1U Laitepaikka</a>
+                <a href="mailto:support@konesaliturku.fi">support@konesaliturku.fi</a>
-                <a href="index.html#hinnat">2U Laitepaikka</a>
+                <span>Web1 Oy</span>
-                <a href="yhteydet.html">Yhteydet</a>
+                <span>Latokarinkatu 3</span>
+                <span>20200 Turku</span>
             </div>
         </div>
         <div class="footer-bottom">

style.css

@@ -1505,6 +1505,188 @@ a:hover {
     height: 100%;
 }
 
+/* === Calculator Layout === */
+.calculator-layout {
+    display: grid;
+    grid-template-columns: 1fr 360px;
+    gap: 40px;
+    align-items: start;
+}
+
+.calculator-form {
+    min-width: 0;
+}
+
+.calculator-form .form-section-title {
+    border-top: 1px solid var(--color-border);
+    padding-top: 20px;
+    margin-top: 24px;
+    font-weight: 700;
+    font-size: 1rem;
+    color: var(--color-text-heading);
+}
+
+.calculator-form .form-section-title:first-child {
+    border-top: none;
+    margin-top: 0;
+    padding-top: 0;
+}
+
+.calculator-form .form-group {
+    margin-bottom: 16px;
+}
+
+.calculator-form .form-group label {
+    display: block;
+    font-size: 0.88rem;
+    font-weight: 500;
+    margin-bottom: 6px;
+    color: var(--color-text-heading);
+}
+
+.calculator-form .checkbox-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-bottom: 16px;
+}
+
+.calculator-sidebar {
+    position: sticky;
+    top: 100px;
+}
+
+.price-calculator {
+    background: var(--color-dark);
+    color: var(--color-white);
+    border-radius: var(--radius-lg);
+    padding: 30px;
+    margin-bottom: 20px;
+}
+
+.price-calculator h3 {
+    font-size: 0.9rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    opacity: 0.7;
+    margin-bottom: 10px;
+}
+
+.calculator-total {
+    display: flex;
+    align-items: baseline;
+    gap: 4px;
+    margin-bottom: 6px;
+}
+
+.calculator-amount {
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: var(--color-primary);
+    font-family: 'Space Grotesk', sans-serif;
+}
+
+.calculator-period {
+    font-size: 1.1rem;
+    opacity: 0.6;
+}
+
+.calculator-vat {
+    font-size: 0.8rem;
+    opacity: 0.5;
+    margin-bottom: 20px;
+}
+
+.calculator-breakdown {
+    border-top: 1px solid rgba(255,255,255,0.1);
+    padding-top: 16px;
+}
+
+.calculator-empty {
+    font-size: 0.88rem;
+    opacity: 0.5;
+    font-style: italic;
+}
+
+.calc-line {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.88rem;
+    padding: 6px 0;
+    border-bottom: 1px solid rgba(255,255,255,0.05);
+}
+
+.calc-line span:first-child {
+    opacity: 0.8;
+}
+
+.calc-line span:last-child {
+    font-weight: 600;
+    color: var(--color-primary);
+}
+
+.calculator-note {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    margin-top: 16px;
+    padding: 12px;
+    background: rgba(240,112,96,0.1);
+    border-radius: var(--radius);
+    font-size: 0.8rem;
+    line-height: 1.4;
+}
+
+.calculator-note svg {
+    flex-shrink: 0;
+    margin-top: 1px;
+    color: var(--color-primary);
+}
+
+.calculator-contact {
+    background: var(--color-white);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    padding: 24px;
+}
+
+.calculator-contact h4 {
+    font-size: 1rem;
+    margin-bottom: 8px;
+    color: var(--color-text-heading);
+}
+
+.calculator-contact p {
+    font-size: 0.88rem;
+    color: var(--color-text-muted);
+    margin-bottom: 12px;
+}
+
+.calculator-email {
+    display: block;
+    color: var(--color-primary);
+    font-weight: 600;
+    margin-bottom: 16px;
+}
+
+.calculator-address {
+    font-size: 0.85rem;
+    color: var(--color-text-muted);
+    line-height: 1.6;
+    padding-top: 12px;
+    border-top: 1px solid var(--color-border);
+}
+
+@media (max-width: 900px) {
+    .calculator-layout {
+        grid-template-columns: 1fr;
+    }
+    .calculator-sidebar {
+        position: static;
+        order: -1;
+    }
+}
+
 /* === Animations === */
 .fade-in {
     opacity: 0;

tarjouspyynto.html

@@ -0,0 +1,421 @@
+<!DOCTYPE html>
+<html lang="fi">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Jätä tarjouspyyntö | Konesali Turku</title>
+    <meta name="description" content="Pyydä tarjous konesalipalveluista. Automaattinen hintalaskuri auttaa arvioimaan kuukausikustannukset.">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <!-- Header -->
+    <header class="header" id="header">
+        <div class="container header-inner">
+            <a href="/" class="logo">
+                <svg class="logo-icon" viewBox="0 0 32 38" width="28" height="33" fill="none">
+                    <path d="M12.5 5.5a5.5 5.5 0 017 0" stroke="#f07060" stroke-width="1.6" stroke-linecap="round"/>
+                    <path d="M9.5 2.5a9.5 9.5 0 0113 0" stroke="#f07060" stroke-width="1.4" stroke-linecap="round" opacity="0.4"/>
+                    <rect x="5" y="10" width="22" height="26" rx="3" stroke="currentColor" stroke-width="1.5"/>
+                    <rect x="9" y="14" width="14" height="4.5" rx="1.5" stroke="currentColor" stroke-width="0.8" fill="currentColor" fill-opacity="0.06"/>
+                    <rect x="9" y="21" width="14" height="4.5" rx="1.5" stroke="currentColor" stroke-width="0.8" fill="currentColor" fill-opacity="0.06"/>
+                    <rect x="9" y="28" width="14" height="4.5" rx="1.5" stroke="currentColor" stroke-width="0.8" fill="currentColor" fill-opacity="0.06"/>
+                    <circle cx="12.5" cy="16.25" r="1.4" fill="#f07060"/>
+                    <circle cx="12.5" cy="23.25" r="1.4" fill="#f07060"/>
+                    <circle cx="12.5" cy="30.25" r="1.4" fill="#f07060"/>
+                    <line x1="17" y1="16.25" x2="21" y2="16.25" stroke="currentColor" stroke-width="0.8" opacity="0.3"/>
+                    <line x1="17" y1="23.25" x2="21" y2="23.25" stroke="currentColor" stroke-width="0.8" opacity="0.3"/>
+                    <line x1="17" y1="30.25" x2="21" y2="30.25" stroke="currentColor" stroke-width="0.8" opacity="0.3"/>
+                </svg>
+                <span>Konesali<strong>Turku</strong></span>
+            </a>
+            <nav class="nav" id="nav">
+                <a href="index.html#palvelut">Palvelut</a>
+                <a href="index.html#hinnat">Hinnat</a>
+                <a href="konesali.html">Konesali</a>
+                <a href="yhteydet.html">Yhteydet</a>
+                <a href="tarjouspyynto.html" class="nav-cta active">Jätä tarjouspyyntö</a>
+            </nav>
+            <button class="nav-toggle" id="nav-toggle" aria-label="Avaa valikko">
+                <span></span>
+                <span></span>
+                <span></span>
+            </button>
+        </div>
+    </header>
+
+    <!-- Page Hero -->
+    <section class="page-hero">
+        <div class="container">
+            <h1>Jätä tarjouspyyntö</h1>
+            <p>Valitse tarvitsemasi palvelut ja näet arviohinnan heti. Lähetä tarjouspyyntö niin otamme yhteyttä vuorokauden sisällä.</p>
+        </div>
+    </section>
+
+    <!-- Calculator + Form -->
+    <section class="section">
+        <div class="container">
+            <div class="calculator-layout">
+                <!-- Form side -->
+                <div class="calculator-form">
+                    <form id="quote-form">
+                        <!-- Yhteystiedot -->
+                        <div class="form-section-title">Yhteystiedot</div>
+                        <div class="form-group">
+                            <label for="name">Nimi *</label>
+                            <input type="text" id="name" name="name" required>
+                        </div>
+                        <div class="form-group">
+                            <label for="company">Yritys</label>
+                            <input type="text" id="company" name="company">
+                        </div>
+                        <div class="form-group">
+                            <label for="email">Sähköposti *</label>
+                            <input type="email" id="email" name="email" required>
+                        </div>
+                        <div class="form-group">
+                            <label for="phone">Puhelinnumero</label>
+                            <input type="tel" id="phone" name="phone">
+                        </div>
+
+                        <!-- Laitepaikat -->
+                        <div class="form-section-title">Laitepaikat</div>
+                        <div class="form-group form-group-full">
+                            <label for="units-1u">1U laitepaikka &mdash; &euro;49/kk</label>
+                            <select id="units-1u" name="units_1u" data-price="49">
+                                <option value="0">Ei tarvetta</option>
+                                <option value="1">1 kpl</option>
+                                <option value="2">2 kpl</option>
+                                <option value="3">3 kpl</option>
+                                <option value="4">4 kpl</option>
+                                <option value="5">5+ kpl</option>
+                            </select>
+                        </div>
+                        <div class="form-group form-group-full">
+                            <label for="units-2u">2U laitepaikka &mdash; &euro;79/kk</label>
+                            <select id="units-2u" name="units_2u" data-price="79">
+                                <option value="0">Ei tarvetta</option>
+                                <option value="1">1 kpl</option>
+                                <option value="2">2 kpl</option>
+                                <option value="3">3 kpl</option>
+                                <option value="4">4 kpl</option>
+                                <option value="5">5+ kpl</option>
+                            </select>
+                        </div>
+                        <div class="form-group form-group-full">
+                            <label for="units-4u">4U laitepaikka &mdash; &euro;139/kk</label>
+                            <select id="units-4u" name="units_4u" data-price="139">
+                                <option value="0">Ei tarvetta</option>
+                                <option value="1">1 kpl</option>
+                                <option value="2">2 kpl</option>
+                                <option value="3">3 kpl</option>
+                                <option value="5">5+ kpl</option>
+                            </select>
+                        </div>
+                        <div class="form-group form-group-full">
+                            <label for="units-rack">Kokokaappi (42U)</label>
+                            <select id="units-rack" name="units_rack" data-price="0">
+                                <option value="0">Ei tarvetta</option>
+                                <option value="1" data-custom>1 kpl (pyydä tarjous)</option>
+                                <option value="2" data-custom>2 kpl (pyydä tarjous)</option>
+                                <option value="3" data-custom>3+ kpl (pyydä tarjous)</option>
+                            </select>
+                        </div>
+
+                        <!-- Yhteysnopeus -->
+                        <div class="form-section-title">Yhteysnopeus</div>
+                        <div class="form-group form-group-full">
+                            <label for="connection">Haluttu yhteysnopeus</label>
+                            <select id="connection" name="connection" data-type="connection">
+                                <option value="0">1 Gbit/s jaettu (sis. hintaan)</option>
+                                <option value="99">1 Gbit/s dedicated (&euro;99/kk)</option>
+                                <option value="299">10 Gbit/s dedicated (&euro;299/kk)</option>
+                                <option value="custom">100 Gbit/s (räätälöity)</option>
+                            </select>
+                        </div>
+                        <div class="checkbox-group">
+                            <label class="checkbox-label">
+                                <input type="checkbox" name="redundant_port" value="1" data-modifier="1.5" data-applies="connection">
+                                <span>Varmennettu portti (+50%)</span>
+                            </label>
+                            <label class="checkbox-label">
+                                <input type="checkbox" name="bgp" value="1" data-price="49">
+                                <span>BGP-reititys / oma AS (&euro;49/kk)</span>
+                            </label>
+                        </div>
+
+                        <!-- VPN -->
+                        <div class="form-section-title">Site-to-Site VPN</div>
+                        <div class="form-group form-group-full">
+                            <label for="vpn">VPN toimitilan ja konesalin väliin</label>
+                            <select id="vpn" name="vpn">
+                                <option value="0">Ei tarvetta</option>
+                                <option value="95">1G Site-to-Site (alk. &euro;95/kk)</option>
+                                <option value="129">10G Site-to-Site (alk. &euro;129/kk)</option>
+                                <option value="custom">Dedicated L2/MPLS (räätälöity)</option>
+                            </select>
+                        </div>
+
+                        <!-- Lisäpalvelut -->
+                        <div class="form-section-title">Lisäpalvelut</div>
+                        <div class="checkbox-group">
+                            <label class="checkbox-label">
+                                <input type="checkbox" name="anycast_dns" value="1" data-price="19">
+                                <span>Anycast DNS (&euro;19/kk)</span>
+                            </label>
+                            <label class="checkbox-label">
+                                <input type="checkbox" name="block_storage" value="1" data-price="29">
+                                <span>Blokkitason storage (alk. &euro;29/kk)</span>
+                            </label>
+                            <label class="checkbox-label">
+                                <input type="checkbox" name="s3_storage" value="1" data-price="19">
+                                <span>S3-levypinta (alk. &euro;19/kk)</span>
+                            </label>
+                            <label class="checkbox-label">
+                                <input type="checkbox" name="remote_hands" value="1" data-price="0">
+                                <span>Remote Hands (tuntiveloitus)</span>
+                            </label>
+                        </div>
+
+                        <!-- Lisätiedot -->
+                        <div class="form-section-title">Lisätiedot</div>
+                        <div class="form-group form-group-full">
+                            <label for="message">Viesti</label>
+                            <textarea id="message" name="message" rows="4" placeholder="Kerro lisää tarpeistasi: tehovaatimukset, aikataulu, erityistoiveet..."></textarea>
+                        </div>
+
+                        <!-- Honeypot -->
+                        <div style="display:none" aria-hidden="true">
+                            <input type="text" name="website" tabindex="-1" autocomplete="off">
+                        </div>
+
+                        <button type="submit" class="btn btn-primary btn-submit">Lähetä tarjouspyyntö</button>
+                        <div class="form-status" id="form-status"></div>
+                    </form>
+                </div>
+
+                <!-- Price calculator side (sticky) -->
+                <div class="calculator-sidebar">
+                    <div class="price-calculator" id="price-calculator">
+                        <h3>Arvioitu kuukausihinta</h3>
+                        <div class="calculator-total">
+                            <span class="calculator-amount" id="calc-total">&euro;0</span>
+                            <span class="calculator-period">/kk</span>
+                        </div>
+                        <p class="calculator-vat">Hinnat alv 0%</p>
+                        <div class="calculator-breakdown" id="calc-breakdown">
+                            <p class="calculator-empty">Valitse palvelut vasemmalta niin näet arviohinnan täällä.</p>
+                        </div>
+                        <div class="calculator-note" id="calc-note" style="display:none;">
+                            <svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/></svg>
+                            <span>Osa valituista palveluista on räätälöitäviä &mdash; lopullinen hinta tarjouksessa.</span>
+                        </div>
+                    </div>
+                    <div class="calculator-contact">
+                        <h4>Tarvitsetko apua?</h4>
+                        <p>Soita tai lähetä sähköpostia, autamme mielellämme.</p>
+                        <a href="mailto:support@konesaliturku.fi" class="calculator-email">support@konesaliturku.fi</a>
+                        <div class="calculator-address">
+                            <strong>Web1 Oy</strong><br>
+                            Latokarinkatu 3<br>
+                            20200 Turku
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="footer">
+        <div class="container footer-inner">
+            <div class="footer-brand">
+                <a href="/" class="logo">
+                    <svg class="logo-icon" viewBox="0 0 32 38" width="22" height="26" fill="none">
+                        <path d="M12.5 5.5a5.5 5.5 0 017 0" stroke="#f07060" stroke-width="1.6" stroke-linecap="round"/>
+                        <path d="M9.5 2.5a9.5 9.5 0 0113 0" stroke="#f07060" stroke-width="1.4" stroke-linecap="round" opacity="0.4"/>
+                        <rect x="5" y="10" width="22" height="26" rx="3" stroke="currentColor" stroke-width="1.5"/>
+                        <rect x="9" y="14" width="14" height="4.5" rx="1.5" stroke="currentColor" stroke-width="0.8" fill="currentColor" fill-opacity="0.06"/>
+                        <rect x="9" y="21" width="14" height="4.5" rx="1.5" stroke="currentColor" stroke-width="0.8" fill="currentColor" fill-opacity="0.06"/>
+                        <rect x="9" y="28" width="14" height="4.5" rx="1.5" stroke="currentColor" stroke-width="0.8" fill="currentColor" fill-opacity="0.06"/>
+                        <circle cx="12.5" cy="16.25" r="1.4" fill="#f07060"/>
+                        <circle cx="12.5" cy="23.25" r="1.4" fill="#f07060"/>
+                        <circle cx="12.5" cy="30.25" r="1.4" fill="#f07060"/>
+                        <line x1="17" y1="16.25" x2="21" y2="16.25" stroke="currentColor" stroke-width="0.8" opacity="0.3"/>
+                        <line x1="17" y1="23.25" x2="21" y2="23.25" stroke="currentColor" stroke-width="0.8" opacity="0.3"/>
+                        <line x1="17" y1="30.25" x2="21" y2="30.25" stroke="currentColor" stroke-width="0.8" opacity="0.3"/>
+                    </svg>
+                    <span>Konesali<strong>Turku</strong></span>
+                </a>
+                <p>Luotettavat konesalipalvelut Turussa.</p>
+            </div>
+            <div class="footer-links">
+                <h4>Sivusto</h4>
+                <a href="index.html#palvelut">Palvelut</a>
+                <a href="konesali.html">Konesali</a>
+                <a href="yhteydet.html">Yhteydet</a>
+                <a href="index.html#hinnat">Hinnat</a>
+                <a href="tarjouspyynto.html">Tarjouspyyntö</a>
+            </div>
+            <div class="footer-links">
+                <h4>Yhteystiedot</h4>
+                <a href="mailto:support@konesaliturku.fi">support@konesaliturku.fi</a>
+                <span>Web1 Oy</span>
+                <span>Latokarinkatu 3</span>
+                <span>20200 Turku</span>
+            </div>
+        </div>
+        <div class="footer-bottom">
+            <div class="container">
+                <p>&copy; 2026 Konesali Turku. Kaikki oikeudet pidätetään.</p>
+            </div>
+        </div>
+    </footer>
+
+    <script src="script.js"></script>
+    <script>
+    // Price Calculator
+    (function() {
+        const form = document.getElementById('quote-form');
+        const totalEl = document.getElementById('calc-total');
+        const breakdownEl = document.getElementById('calc-breakdown');
+        const noteEl = document.getElementById('calc-note');
+
+        function calculate() {
+            let total = 0;
+            let lines = [];
+            let hasCustom = false;
+
+            // Laitepaikat
+            const units = [
+                { el: document.getElementById('units-1u'), name: '1U laitepaikka', price: 49 },
+                { el: document.getElementById('units-2u'), name: '2U laitepaikka', price: 79 },
+                { el: document.getElementById('units-4u'), name: '4U laitepaikka', price: 139 },
+            ];
+            units.forEach(u => {
+                const qty = parseInt(u.el.value) || 0;
+                if (qty > 0) {
+                    const subtotal = qty * u.price;
+                    total += subtotal;
+                    lines.push({ label: u.name + ' x' + qty, amount: subtotal });
+                }
+            });
+
+            // Kokokaappi
+            const rackQty = parseInt(document.getElementById('units-rack').value) || 0;
+            if (rackQty > 0) {
+                hasCustom = true;
+                lines.push({ label: 'Kokokaappi x' + rackQty, amount: null });
+            }
+
+            // Yhteysnopeus
+            const connEl = document.getElementById('connection');
+            const connVal = connEl.value;
+            let connPrice = 0;
+            if (connVal === 'custom') {
+                hasCustom = true;
+                lines.push({ label: '100 Gbit/s yhteys', amount: null });
+            } else {
+                connPrice = parseInt(connVal) || 0;
+                if (connPrice > 0) {
+                    total += connPrice;
+                    lines.push({ label: connEl.options[connEl.selectedIndex].text.split('(')[0].trim(), amount: connPrice });
+                }
+            }
+
+            // Varmennettu portti
+            const redundant = form.querySelector('[name="redundant_port"]');
+            if (redundant.checked && connPrice > 0) {
+                const extra = Math.round(connPrice * 0.5);
+                total += extra;
+                lines.push({ label: 'Varmennettu portti (+50%)', amount: extra });
+            }
+
+            // BGP
+            const bgp = form.querySelector('[name="bgp"]');
+            if (bgp.checked) {
+                total += 49;
+                lines.push({ label: 'BGP-reititys / oma AS', amount: 49 });
+            }
+
+            // VPN
+            const vpnEl = document.getElementById('vpn');
+            const vpnVal = vpnEl.value;
+            if (vpnVal === 'custom') {
+                hasCustom = true;
+                lines.push({ label: 'Dedicated L2/MPLS', amount: null });
+            } else {
+                const vpnPrice = parseInt(vpnVal) || 0;
+                if (vpnPrice > 0) {
+                    total += vpnPrice;
+                    lines.push({ label: vpnEl.options[vpnEl.selectedIndex].text.split('(')[0].trim(), amount: vpnPrice });
+                }
+            }
+
+            // Lisäpalvelut
+            const extras = [
+                { name: 'anycast_dns', label: 'Anycast DNS', price: 19 },
+                { name: 'block_storage', label: 'Blokkitason storage', price: 29 },
+                { name: 's3_storage', label: 'S3-levypinta', price: 19 },
+                { name: 'remote_hands', label: 'Remote Hands', price: 0, custom: true },
+            ];
+            extras.forEach(e => {
+                const cb = form.querySelector('[name="' + e.name + '"]');
+                if (cb && cb.checked) {
+                    if (e.custom || e.price === 0) {
+                        hasCustom = true;
+                        lines.push({ label: e.label, amount: null });
+                    } else {
+                        total += e.price;
+                        lines.push({ label: e.label, amount: e.price });
+                    }
+                }
+            });
+
+            // Render
+            totalEl.textContent = '€' + total;
+
+            if (lines.length === 0) {
+                breakdownEl.innerHTML = '<p class="calculator-empty">Valitse palvelut vasemmalta niin näet arviohinnan täällä.</p>';
+            } else {
+                let html = '';
+                lines.forEach(l => {
+                    html += '<div class="calc-line">';
+                    html += '<span>' + l.label + '</span>';
+                    html += '<span>' + (l.amount !== null ? '€' + l.amount : 'Tarjouksessa') + '</span>';
+                    html += '</div>';
+                });
+                breakdownEl.innerHTML = html;
+            }
+
+            noteEl.style.display = hasCustom ? 'flex' : 'none';
+        }
+
+        // Listen to all form changes
+        form.addEventListener('change', calculate);
+        form.addEventListener('input', calculate);
+
+        // Form submit
+        form.addEventListener('submit', function(e) {
+            e.preventDefault();
+            const status = document.getElementById('form-status');
+            const honeypot = form.querySelector('[name="website"]');
+            if (honeypot && honeypot.value) return;
+
+            status.textContent = 'Lähetetään...';
+            status.className = 'form-status';
+
+            // Simulate send
+            setTimeout(function() {
+                status.textContent = 'Kiitos! Tarjouspyyntösi on vastaanotettu. Otamme yhteyttä vuorokauden sisällä.';
+                status.className = 'form-status form-status-success';
+                form.reset();
+                calculate();
+            }, 1000);
+        });
+    })();
+    </script>
+</body>
+</html>

yhteydet.html

@@ -36,7 +36,7 @@
                 <a href="index.html#hinnat">Hinnat</a>
                 <a href="konesali.html">Konesali</a>
                 <a href="yhteydet.html" class="active">Yhteydet</a>
-                <a href="index.html#yhteystiedot" class="nav-cta">Jätä tarjouspyyntö</a>
+                <a href="tarjouspyynto.html" class="nav-cta">Jätä tarjouspyyntö</a>
             </nav>
             <button class="nav-toggle" id="nav-toggle" aria-label="Avaa valikko">
                 <span></span>
@@ -137,7 +137,7 @@
                             Taattu kaistanleveys
                         </li>
                     </ul>
-                    <a href="index.html#yhteystiedot" class="btn btn-primary">Jätä tarjouspyyntö</a>
+                    <a href="tarjouspyynto.html" class="btn btn-primary">Jätä tarjouspyyntö</a>
                 </div>
                 <div class="pricing-card fade-in">
                     <div class="pricing-header">
@@ -169,7 +169,7 @@
                             BGP-reititys saatavilla
                         </li>
                     </ul>
-                    <a href="index.html#yhteystiedot" class="btn btn-outline">Jätä tarjouspyyntö</a>
+                    <a href="tarjouspyynto.html" class="btn btn-outline">Jätä tarjouspyyntö</a>
                 </div>
                 <div class="pricing-card pricing-custom fade-in">
                     <div class="pricing-header">
@@ -200,7 +200,7 @@
                             Oma AS-numero + BGP
                         </li>
                     </ul>
-                    <a href="index.html#yhteystiedot" class="btn btn-outline">Jätä tarjouspyyntö</a>
+                    <a href="tarjouspyynto.html" class="btn btn-outline">Jätä tarjouspyyntö</a>
                 </div>
             </div>
             <p class="pricing-note">Lisä-IP-osoitteet: &euro;3/kk per IPv4. BGP-reititys: &euro;49/kk. Kaikki hinnat alv 0%.</p>
@@ -308,7 +308,7 @@
                             Konfigurointiapu
                         </li>
                     </ul>
-                    <a href="index.html#yhteystiedot" class="btn btn-outline">Jätä tarjouspyyntö</a>
+                    <a href="tarjouspyynto.html" class="btn btn-outline">Jätä tarjouspyyntö</a>
                 </div>
                 <div class="pricing-card pricing-featured fade-in">
                     <div class="pricing-badge">Suosituin</div>
@@ -341,7 +341,7 @@
                             Failover-tuki
                         </li>
                     </ul>
-                    <a href="index.html#yhteystiedot" class="btn btn-primary">Jätä tarjouspyyntö</a>
+                    <a href="tarjouspyynto.html" class="btn btn-primary">Jätä tarjouspyyntö</a>
                 </div>
                 <div class="pricing-card pricing-custom fade-in">
                     <div class="pricing-header">
@@ -372,7 +372,7 @@
                             SLA-takuu
                         </li>
                     </ul>
-                    <a href="index.html#yhteystiedot" class="btn btn-outline">Jätä tarjouspyyntö</a>
+                    <a href="tarjouspyynto.html" class="btn btn-outline">Jätä tarjouspyyntö</a>
                 </div>
             </div>
         </div>
@@ -441,7 +441,7 @@
             <h2 class="section-title">Tarvitsetko räätälöidyn yhteysratkaisun?</h2>
             <p class="section-subtitle">Kerro tarpeistasi ja suunnittelemme yhdessä optimaalisen tietoliikenneratkaisun</p>
             <div style="display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;">
-                <a href="index.html#yhteystiedot" class="btn btn-primary">Jätä tarjouspyyntö</a>
+                <a href="tarjouspyynto.html" class="btn btn-primary">Jätä tarjouspyyntö</a>
                 <a href="index.html#hinnat" class="btn btn-secondary">Katso laitepaikat</a>
             </div>
         </div>
@@ -476,14 +476,14 @@
                 <a href="konesali.html">Konesali</a>
                 <a href="yhteydet.html">Yhteydet</a>
                 <a href="index.html#hinnat">Hinnat</a>
-                <a href="index.html#yhteystiedot">Yhteystiedot</a>
+                <a href="tarjouspyynto.html">Tarjouspyyntö</a>
             </div>
             <div class="footer-links">
-                <h4>Palvelut</h4>
+                <h4>Yhteystiedot</h4>
-                <a href="index.html#hinnat">1U Laitepaikka</a>
+                <a href="mailto:support@konesaliturku.fi">support@konesaliturku.fi</a>
-                <a href="index.html#hinnat">2U Laitepaikka</a>
+                <span>Web1 Oy</span>
-                <a href="index.html#hinnat">4U Laitepaikka</a>
+                <span>Latokarinkatu 3</span>
-                <a href="#yhteyspaketit">Yhteydet</a>
+                <span>20200 Turku</span>
             </div>
         </div>
         <div class="footer-bottom">