<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./support.js"></script>
</head>
<body>
<x-dc>
<helmet data-dc-atomics>
<meta name="design_doc_mode" content="canvas">
<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=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap" rel="stylesheet">
<style>
  *{box-sizing:border-box}
  body{margin:0;background:#e9e6e0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}
  a{color:inherit;text-decoration:none}
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-thumb{background:rgba(0,0,0,.22);border-radius:8px}
  ::-webkit-scrollbar-track{background:transparent}
  .dv-turn{padding:44px 48px 40px}
  .dv-thd{display:flex;align-items:baseline;gap:10px;margin:0 0 22px}
  .dv-tid{font:600 10px ui-monospace,Menlo,monospace;padding:3px 7px;background:#1a1a1a;color:#fff;border-radius:4px}
  .dv-tname{font:600 13px/1.3 "Helvetica Neue",Helvetica,Arial,sans-serif;color:#1a1a1a}
  .dv-sub{font:400 12px/1.5 "Helvetica Neue",Helvetica,Arial,sans-serif;color:rgba(0,0,0,.5);max-width:520px}
  .dv-opts{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start}
  .dv-opt{flex:none;display:flex;flex-direction:column;gap:12px;scroll-margin-top:16px}
  .dv-olabel{display:flex;align-items:center;gap:9px;font:400 12px/1.3 "Helvetica Neue",Helvetica,Arial,sans-serif;color:rgba(0,0,0,.6)}
  .dv-oid{font:600 11px ui-monospace,Menlo,monospace;padding:3px 8px;background:rgba(0,0,0,.09);color:#1a1a1a;border-radius:5px}
  .dv-opt:target .dv-oid{background:#DA231C;color:#fff}
  .frame{width:1360px;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 30px 80px -20px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.12)}
  .fbar{height:42px;display:flex;align-items:center;gap:8px;padding:0 16px;background:#e8e5e0;border-bottom:1px solid rgba(0,0,0,.08)}
  .fdot{width:11px;height:11px;border-radius:50%}
  .furl{margin-left:12px;flex:1;max-width:340px;height:24px;border-radius:6px;background:#fff;border:1px solid rgba(0,0,0,.08);display:flex;align-items:center;padding:0 12px;font:400 11px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;color:#8a847c}
  .scr{height:830px;overflow-y:auto;overflow-x:hidden;position:relative;scroll-behavior:smooth}
  @keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}
</style>
</helmet>

<section class="dv-turn" id="t1">
  <div class="dv-thd"><span class="dv-tid">1</span><span class="dv-tname">EXALCO — Αρχική Ιδιωτών (B2C) · 2 κατευθύνσεις</span></div>
  <p class="dv-sub" style="margin:-14px 0 22px">Πλήρως διαδραστικές. Δοκιμάστε: εναλλαγή κοινού, mega-menu «Προϊόντα», εύρεση καταστήματος ανά νομό, φίλτρα έργων, και «Ζητήστε προσφορά». Κείμενα & εικόνες αντλήθηκαν από το υλικό EXALCO.</p>
  <div class="dv-opts">

    <!-- ============ OPTION 1A : EDITORIAL MINIMAL (LIGHT) ============ -->
    <div class="dv-opt" id="1a">
      <div class="dv-olabel"><span class="dv-oid">1a</span><b style="font-weight:600;color:#1a1a1a">Editorial Minimal</b><span>— φως, λευκό, αρχιτεκτονική καθαρότητα (Elvial-inspired)</span></div>
      <div class="frame">
        <div class="fbar"><span class="fdot" style="background:#f0605c"></span><span class="fdot" style="background:#f5bd4f"></span><span class="fdot" style="background:#61c454"></span><div class="furl">exalco.gr/idiotis</div></div>
        <div class="scr" style="background:#F6F4F0">

          <!-- HEADER -->
          <div style="position:sticky;top:0;z-index:40">
            <div style="background:#1A1714;color:rgba(255,255,255,.72);font-size:11.5px;letter-spacing:.03em">
              <div style="max-width:1200px;margin:0 auto;padding:8px 40px;display:flex;justify-content:space-between;align-items:center">
                <span>Από το 1973 · Κορυφαία συστήματα αλουμινίου, σχεδιασμένα στην Ελλάδα</span>
                <span style="display:flex;gap:20px;align-items:center">
                  <a href="#1a" style="color:rgba(255,255,255,.72)">Βρείτε κατάστημα</a>
                  <a href="#1a" style="color:rgba(255,255,255,.72)">Θερμοπερατότητα Uw</a>
                  <span style="color:rgba(255,255,255,.4)">GR / EN</span>
                </span>
              </div>
            </div>
            <div style="background:#fff">
              <div onMouseLeave="{{ a.closeMega }}">
                <div style="max-width:1200px;margin:0 auto;padding:16px 40px;display:flex;align-items:center;gap:34px">
                  <!-- logo -->
                  <a href="#1a" style="display:flex;flex-direction:column;line-height:1;flex:none">
                    <span style="font-weight:800;font-size:25px;letter-spacing:.02em;color:#DA231C">EXALCO</span>
                    <span style="font-weight:600;font-size:8px;letter-spacing:.42em;color:#1A1714;margin-top:3px">ALUMINIUM SYSTEMS</span>
                  </a>
                  <!-- audience segmented -->
                  <div style="display:flex;gap:3px;padding:3px;background:#EFEBE5;border-radius:9px;flex:none">
                    <button onClick="{{ a.pickIdiotis }}" style="{{ a.segIdiotis }}">Ιδιώτες</button>
                    <button onClick="{{ a.pickArch }}" style="{{ a.segArch }}">Αρχιτέκτονες</button>
                    <button onClick="{{ a.pickKat }}" style="{{ a.segKat }}">Κατασκευαστές</button>
                  </div>
                  <!-- nav -->
                  <nav style="display:flex;gap:26px;margin-left:auto;align-items:center;font-size:13.5px;font-weight:500;color:#1A1714">
                    <a href="#1a" onMouseEnter="{{ a.openMega }}" style="display:flex;align-items:center;gap:5px;padding:6px 0">Προϊόντα <span style="font-size:9px;color:#DA231C">▾</span></a>
                    <a href="#1a" onMouseEnter="{{ a.closeMega }}">Εμπνευστείτε</a>
                    <a href="#1a" onMouseEnter="{{ a.closeMega }}">Εξοικονόμηση</a>
                    <a href="#1a" onMouseEnter="{{ a.closeMega }}">Γιατί EXALCO</a>
                    <a href="#1a" onMouseEnter="{{ a.closeMega }}">Υποστήριξη</a>
                    <button onClick="{{ a.openQuote }}" style="border:0;background:#DA231C;color:#fff;font:600 13px/1 inherit;padding:11px 18px;border-radius:8px;cursor:pointer">Ζητήστε προσφορά</button>
                  </nav>
                </div>
                <!-- MEGA MENU -->
                <div style="{{ a.megaStyle }}">
                  <div style="max-width:1200px;margin:0 auto;padding:26px 40px;display:grid;grid-template-columns:repeat(4,1fr) 1.1fr;gap:20px">
                    <sc-for list="{{ a.cats }}" as="cat" hint-placeholder-count="4">
                      <a href="#1a" style="display:block">
                        <div style="height:120px;border-radius:8px;overflow:hidden;margin-bottom:10px;background:#eee"><img src="{{ cat.img }}" style="width:100%;height:100%;object-fit:cover" alt=""></div>
                        <div style="font-weight:600;font-size:13.5px;color:#1A1714">{{ cat.t }}</div>
                        <div style="font-size:12px;color:#8a847c;margin-top:3px;line-height:1.4">{{ cat.s }}</div>
                      </a>
                    </sc-for>
                    <div style="background:#F6F4F0;border-radius:10px;padding:22px;display:flex;flex-direction:column;justify-content:center">
                      <div style="font-family:'Cormorant Garamond',Georgia,serif;font-size:24px;font-style:italic;color:#1A1714;line-height:1.15">Δεν ξέρετε από πού να ξεκινήσετε;</div>
                      <p style="font-size:12.5px;color:#6B655E;line-height:1.5;margin:10px 0 16px">Κλείστε ραντεβού με πιστοποιημένο συνεργάτη κοντά σας.</p>
                      <button onClick="{{ a.openQuote }}" style="border:0;background:#1A1714;color:#fff;font:600 12.5px/1 inherit;padding:11px 16px;border-radius:8px;cursor:pointer;align-self:flex-start">Δωρεάν συμβουλευτική</button>
                    </div>
                  </div>
                </div>
                <div style="height:1px;background:rgba(0,0,0,.07)"></div>
              </div>
            </div>
            <!-- audience concept ribbon -->
            <div style="{{ a.noteStyle }}">
              <span>{{ a.noteText }}</span>
              <button onClick="{{ a.pickIdiotis }}" style="border:1px solid rgba(255,255,255,.6);background:transparent;color:#fff;font:600 11.5px/1 inherit;padding:6px 12px;border-radius:6px;cursor:pointer">Επιστροφή στους Ιδιώτες</button>
            </div>
          </div>

          <!-- HERO -->
          <div style="position:relative;height:600px;overflow:hidden">
            <img src="assets/photos/p13.jpg" alt="" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover">
            <div style="position:absolute;inset:0;background:linear-gradient(90deg,rgba(246,244,240,.96) 0%,rgba(246,244,240,.82) 34%,rgba(246,244,240,.15) 62%,rgba(246,244,240,0) 100%)"></div>
            <div style="position:relative;max-width:1200px;margin:0 auto;padding:0 40px;height:100%;display:flex;flex-direction:column;justify-content:center">
              <div style="max-width:560px;animation:fadeUp .8s ease both">
                <div style="display:flex;align-items:center;gap:10px;margin-bottom:20px"><span style="width:32px;height:1px;background:#DA231C"></span><span style="font-size:12px;letter-spacing:.22em;color:#DA231C;font-weight:600">ΓΙΑ ΤΟ ΣΠΙΤΙ ΣΑΣ</span></div>
                <h1 style="margin:0;font-weight:700;font-size:58px;line-height:1.02;letter-spacing:-.02em;color:#1A1714">Ζήστε με<br>περισσότερο <span style="font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-style:italic;color:#DA231C">φως.</span></h1>
                <p style="font-size:17px;line-height:1.6;color:#57514a;margin:22px 0 30px;max-width:460px">Πιστοποιημένα συστήματα αλουμινίου για κουφώματα που κρατούν το σπίτι σας ζεστό, ασφαλές και όμορφο — για δεκαετίες.</p>
                <div style="display:flex;gap:14px;align-items:center">
                  <button onClick="{{ a.openQuote }}" style="border:0;background:#DA231C;color:#fff;font:600 14.5px/1 inherit;padding:16px 26px;border-radius:9px;cursor:pointer;box-shadow:0 10px 24px -8px rgba(218,35,28,.6)">Ζητήστε δωρεάν προσφορά</button>
                  <a href="#1a" style="font-weight:600;font-size:14.5px;color:#1A1714;border-bottom:2px solid #1A1714;padding-bottom:3px">Εξερευνήστε τα συστήματα →</a>
                </div>
              </div>
            </div>
          </div>
          <!-- stat bar -->
          <div style="background:#1A1714;color:#fff">
            <div style="max-width:1200px;margin:0 auto;padding:22px 40px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px">
              <div style="display:flex;align-items:baseline;gap:12px"><span style="font-weight:700;font-size:30px;letter-spacing:-.02em">50+</span><span style="font-size:13px;color:rgba(255,255,255,.62);line-height:1.35">χρόνια εμπειρίας<br>& καινοτομίας</span></div>
              <div style="display:flex;align-items:baseline;gap:12px;border-left:1px solid rgba(255,255,255,.14);padding-left:20px"><span style="font-weight:700;font-size:30px;letter-spacing:-.02em">5</span><span style="font-size:13px;color:rgba(255,255,255,.62);line-height:1.35">ήπειροι — εξαγωγές<br>στο 75% της παραγωγής</span></div>
              <div style="display:flex;align-items:baseline;gap:12px;border-left:1px solid rgba(255,255,255,.14);padding-left:20px"><span style="font-weight:700;font-size:30px;letter-spacing:-.02em">CE</span><span style="font-size:13px;color:rgba(255,255,255,.62);line-height:1.35">πιστοποιημένα<br>συστήματα & βαφές</span></div>
            </div>
          </div>

          <!-- PRODUCTS -->
          <div style="max-width:1200px;margin:0 auto;padding:82px 40px 40px">
            <div style="display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:34px">
              <div>
                <div style="font-size:12px;letter-spacing:.2em;color:#DA231C;font-weight:600;margin-bottom:12px">ΤΑ ΣΥΣΤΗΜΑΤΑ ΜΑΣ</div>
                <h2 style="margin:0;font-weight:700;font-size:38px;letter-spacing:-.02em;color:#1A1714;line-height:1.05">Λύσεις για κάθε <span style="font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500">άνοιγμα</span> του σπιτιού</h2>
              </div>
              <a href="#1a" style="font-weight:600;font-size:14px;color:#1A1714;border-bottom:2px solid #DA231C;padding-bottom:3px;flex:none">Όλα τα προϊόντα →</a>
            </div>
            <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:20px">
              <sc-for list="{{ a.cats }}" as="cat" hint-placeholder-count="4">
                <a href="#1a" class="pcard" style="display:block;background:#fff;border-radius:12px;overflow:hidden;border:1px solid rgba(0,0,0,.07);transition:transform .3s,box-shadow .3s" style-hover="transform:translateY(-6px);box-shadow:0 20px 40px -16px rgba(0,0,0,.2)">
                  <div style="height:230px;overflow:hidden"><img src="{{ cat.img }}" alt="" style="width:100%;height:100%;object-fit:cover;transition:transform .5s" style-hover="transform:scale(1.06)"></div>
                  <div style="padding:20px">
                    <div style="font-weight:600;font-size:16px;color:#1A1714">{{ cat.t }}</div>
                    <p style="font-size:12.5px;color:#8a847c;line-height:1.5;margin:8px 0 14px;min-height:38px">{{ cat.s }}</p>
                    <span style="font-weight:600;font-size:13px;color:#DA231C">Ανακαλύψτε →</span>
                  </div>
                </a>
              </sc-for>
            </div>
          </div>

          <!-- WHY EXALCO -->
          <div style="background:#fff;border-top:1px solid rgba(0,0,0,.07);border-bottom:1px solid rgba(0,0,0,.07);margin-top:60px">
            <div style="max-width:1200px;margin:0 auto;padding:80px 40px;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center">
              <div style="border-radius:14px;overflow:hidden;height:440px"><img src="assets/photos/p14.jpg" alt="" style="width:100%;height:100%;object-fit:cover"></div>
              <div>
                <div style="font-size:12px;letter-spacing:.2em;color:#DA231C;font-weight:600;margin-bottom:14px">ΓΙΑΤΙ EXALCO</div>
                <h2 style="margin:0 0 30px;font-weight:700;font-size:36px;letter-spacing:-.02em;color:#1A1714;line-height:1.1">Μισός αιώνας <span style="font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500">εμπιστοσύνης</span></h2>
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:26px 34px">
                  <sc-for list="{{ a.pillars }}" as="p" hint-placeholder-count="4">
                    <div>
                      <div style="font-family:'Cormorant Garamond',Georgia,serif;font-size:24px;color:#DA231C;margin-bottom:6px">{{ p.k }}</div>
                      <div style="font-weight:600;font-size:16px;color:#1A1714;margin-bottom:6px">{{ p.t }}</div>
                      <p style="font-size:13px;color:#6B655E;line-height:1.55;margin:0">{{ p.s }}</p>
                    </div>
                  </sc-for>
                </div>
              </div>
            </div>
          </div>

          <!-- LOCATOR -->
          <div style="max-width:1200px;margin:0 auto;padding:82px 40px">
            <div style="background:#1A1714;border-radius:16px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr">
              <div style="padding:52px 48px;color:#fff">
                <div style="font-size:12px;letter-spacing:.2em;color:#ff9a95;font-weight:600;margin-bottom:14px">ΔΙΚΤΥΟ ΚΑΤΑΣΤΗΜΑΤΩΝ</div>
                <h2 style="margin:0 0 12px;font-weight:700;font-size:32px;letter-spacing:-.02em;line-height:1.1">Βρείτε συνεργάτη <span style="font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500;color:#ff9a95">κοντά σας</span></h2>
                <p style="font-size:14px;color:rgba(255,255,255,.6);line-height:1.6;margin:0 0 26px;max-width:380px">Πάνω από 500 πιστοποιημένοι συνεργάτες σε όλη την Ελλάδα. Επιλέξτε νομό για να δείτε εκθέσεις & κατασκευαστές.</p>
                <label style="font-size:12px;color:rgba(255,255,255,.5);display:block;margin-bottom:8px">Επιλέξτε Νομό</label>
                <select onChange="{{ a.onRegion }}" value="{{ a.region }}" style="width:100%;max-width:340px;background:#2a2622;color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:9px;padding:14px 16px;font:500 14px/1 inherit;cursor:pointer;appearance:none">
                  <option value="">— Επιλέξτε περιοχή —</option>
                  <sc-for list="{{ a.regions }}" as="r" hint-placeholder-count="6"><option value="{{ r }}">{{ r }}</option></sc-for>
                </select>
              </div>
              <div style="background:#221e1a;padding:32px;overflow:hidden">
                <div style="{{ a.emptyStyle }}">
                  <div style="font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:22px;color:rgba(255,255,255,.55)">Επιλέξτε νομό</div>
                  <p style="font-size:13px;margin:8px 0 0">για να εμφανιστούν τα σημεία πώλησης</p>
                </div>
                <div style="{{ a.hasStyle }}">
                  <div style="font-size:12px;color:rgba(255,255,255,.5);margin-bottom:14px">Σημεία στη περιοχή <b style="color:#fff">{{ a.region }}</b></div>
                  <div style="display:flex;flex-direction:column;gap:10px">
                    <sc-for list="{{ a.showrooms }}" as="s" hint-placeholder-count="2">
                      <div style="background:#2a2622;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:16px 18px">
                        <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:10px">
                          <div style="font-weight:600;font-size:14px;color:#fff">{{ s.n }}</div>
                          <span style="font-size:10px;font-weight:600;letter-spacing:.04em;color:#ff9a95;border:1px solid rgba(255,154,149,.4);border-radius:20px;padding:3px 9px;white-space:nowrap">{{ s.b }}</span>
                        </div>
                        <div style="font-size:12.5px;color:rgba(255,255,255,.6);margin-top:6px">{{ s.a }}</div>
                        <div style="font-size:12.5px;color:rgba(255,255,255,.6);margin-top:2px">τηλ. {{ s.p }}</div>
                      </div>
                    </sc-for>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- PROJECTS -->
          <div style="max-width:1200px;margin:0 auto;padding:20px 40px 40px">
            <div style="display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:28px;flex-wrap:wrap;gap:16px">
              <div>
                <div style="font-size:12px;letter-spacing:.2em;color:#DA231C;font-weight:600;margin-bottom:12px">ΕΜΠΝΕΥΣΤΕΙΤΕ</div>
                <h2 style="margin:0;font-weight:700;font-size:38px;letter-spacing:-.02em;color:#1A1714;line-height:1.05">Επιλεγμένα <span style="font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500">έργα</span></h2>
              </div>
              <div style="display:flex;gap:8px">
                <sc-for list="{{ a.galItems }}" as="it" hint-placeholder-count="4">
                  <button onClick="{{ it.onClick }}" style="{{ it.style }}">{{ it.label }}</button>
                </sc-for>
              </div>
            </div>
            <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:16px">
              <sc-for list="{{ a.projects }}" as="pr" hint-placeholder-count="6">
                <a href="#1a" style="position:relative;display:block;height:260px;border-radius:12px;overflow:hidden">
                  <img src="{{ pr.img }}" alt="" style="width:100%;height:100%;object-fit:cover;transition:transform .5s" style-hover="transform:scale(1.05)">
                  <div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(15,12,10,.82) 0%,rgba(15,12,10,.1) 55%,transparent 100%)"></div>
                  <div style="position:absolute;left:18px;bottom:16px;right:18px;color:#fff">
                    <span style="font-size:10px;font-weight:600;letter-spacing:.12em;color:#ff9a95">{{ pr.tag }}</span>
                    <div style="font-weight:600;font-size:17px;margin-top:4px">{{ pr.n }}</div>
                    <div style="font-size:12.5px;color:rgba(255,255,255,.7)">{{ pr.c }}</div>
                  </div>
                </a>
              </sc-for>
            </div>
          </div>

          <!-- ENERGY BAND -->
          <div style="margin-top:56px;background:linear-gradient(115deg,#122019 0%,#1c3527 52%,#14241b 100%)">
            <div style="position:relative;max-width:1200px;margin:0 auto;padding:72px 40px;color:#fff;display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center">
              <div>
                <div style="font-size:12px;letter-spacing:.2em;color:#8fdca0;font-weight:600;margin-bottom:14px">ΕΞΟΙΚΟΝΟΜΩ 2025</div>
                <h2 style="margin:0 0 14px;font-weight:700;font-size:34px;letter-spacing:-.02em;line-height:1.1">Αναβαθμίστε ενεργειακά <span style="font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500">το σπίτι σας</span></h2>
                <p style="font-size:14.5px;color:rgba(255,255,255,.72);line-height:1.6;margin:0;max-width:440px">Επιδοτούμενα ενεργειακά κουφώματα EXALCO ECONOMY με θερμοδιακοπή. Υπολογίστε τον συντελεστή θερμοπερατότητας Uw και δείτε πόσο εξοικονομείτε.</p>
              </div>
              <div style="display:flex;flex-direction:column;gap:12px;align-items:flex-start">
                <a href="#1a" style="background:#fff;color:#1A1714;font-weight:600;font-size:14px;padding:15px 24px;border-radius:9px">Υπολογισμός Uw →</a>
                <a href="#1a" style="color:#fff;font-weight:600;font-size:14px;border-bottom:2px solid rgba(255,255,255,.5);padding-bottom:3px">Μάθετε για το «Εξοικονομώ»</a>
              </div>
            </div>
          </div>

          <!-- FINAL CTA -->
          <div style="background:#F6F4F0;text-align:center;padding:88px 40px">
            <div style="font-size:12px;letter-spacing:.2em;color:#DA231C;font-weight:600;margin-bottom:16px">ΞΕΚΙΝΗΣΤΕ ΣΗΜΕΡΑ</div>
            <h2 style="margin:0 auto 14px;font-weight:700;font-size:44px;letter-spacing:-.02em;color:#1A1714;line-height:1.05;max-width:640px">Έτοιμοι να αλλάξετε <span style="font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500">όψη</span> στο σπίτι σας;</h2>
            <p style="font-size:15.5px;color:#6B655E;max-width:480px;margin:0 auto 30px;line-height:1.6">Λάβετε δωρεάν προσφορά & συμβουλευτική από πιστοποιημένο συνεργάτη EXALCO.</p>
            <button onClick="{{ a.openQuote }}" style="border:0;background:#DA231C;color:#fff;font:600 15px/1 inherit;padding:17px 30px;border-radius:10px;cursor:pointer;box-shadow:0 12px 28px -8px rgba(218,35,28,.55)">Ζητήστε προσφορά</button>
          </div>

          <!-- FOOTER -->
          <div style="background:#1A1714;color:rgba(255,255,255,.66)">
            <div style="max-width:1200px;margin:0 auto;padding:64px 40px 30px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px">
              <div>
                <div style="display:flex;flex-direction:column;line-height:1;margin-bottom:18px">
                  <span style="font-weight:800;font-size:24px;letter-spacing:.02em;color:#fff">EXALCO</span>
                  <span style="font-weight:600;font-size:8px;letter-spacing:.42em;color:rgba(255,255,255,.6);margin-top:3px">ALUMINIUM SYSTEMS</span>
                </div>
                <p style="font-size:13px;line-height:1.6;max-width:280px;margin:0 0 18px">Μία από τις μεγαλύτερες βιομηχανίες αλουμινίου στην Ελλάδα, με έδρα τη Λάρισα από το 1973.</p>
                <div style="display:flex;gap:10px">
                  <span style="width:34px;height:34px;border:1px solid rgba(255,255,255,.18);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px">f</span>
                  <span style="width:34px;height:34px;border:1px solid rgba(255,255,255,.18);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px">IG</span>
                  <span style="width:34px;height:34px;border:1px solid rgba(255,255,255,.18);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px">YT</span>
                </div>
              </div>
              <div>
                <div style="color:#fff;font-weight:600;font-size:13px;margin-bottom:14px">Προϊόντα</div>
                <div style="display:flex;flex-direction:column;gap:9px;font-size:13px">
                  <a href="#1a">Ανοιγόμενα συστήματα</a><a href="#1a">Συρόμενα συστήματα</a><a href="#1a">Πόρτες εισόδου</a><a href="#1a">Σκίαση & Πέργκολες</a><a href="#1a">Ειδικές βαφές</a>
                </div>
              </div>
              <div>
                <div style="color:#fff;font-weight:600;font-size:13px;margin-bottom:14px">Εταιρεία</div>
                <div style="display:flex;flex-direction:column;gap:9px;font-size:13px">
                  <a href="#1a">Εταιρικό προφίλ</a><a href="#1a">Ιστορικό</a><a href="#1a">Βιωσιμότητα</a><a href="#1a">Πιστοποιήσεις</a><a href="#1a">Έργα</a>
                </div>
              </div>
              <div>
                <div style="color:#fff;font-weight:600;font-size:13px;margin-bottom:14px">Επικοινωνία</div>
                <p style="font-size:13px;line-height:1.7;margin:0 0 14px">5ο χλμ Π.Ε.Ο. Λαρίσης – Αθηνών<br>ΤΚ 415 00, Λάρισα<br>τηλ. 2410 688 688</p>
                <div style="display:flex;gap:8px">
                  <input placeholder="Το email σας" style="flex:1;background:#2a2622;border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:10px 12px;color:#fff;font:400 12.5px/1 inherit">
                  <button style="border:0;background:#DA231C;color:#fff;border-radius:8px;padding:0 14px;font:600 12.5px/1 inherit;cursor:pointer">OK</button>
                </div>
              </div>
            </div>
            <div style="border-top:1px solid rgba(255,255,255,.12)">
              <div style="max-width:1200px;margin:0 auto;padding:18px 40px;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:rgba(255,255,255,.45);flex-wrap:wrap;gap:10px">
                <span>© 2026 EXALCO A.E. · Αρ.ΓΕΜΗ 26532640000</span>
                <span style="display:flex;gap:18px"><a href="#1a">Όροι χρήσης</a><a href="#1a">Απόρρητο</a><a href="#1a">CE · ISO 9001 · EPD</a></span>
              </div>
            </div>
          </div>

          <!-- QUOTE DRAWER -->
          <div style="{{ a.quoteStyle }}">
            <div onClick="{{ a.closeQuote }}" style="flex:1"></div>
            <div style="width:440px;background:#fff;height:100%;overflow-y:auto;padding:36px 34px;box-shadow:-20px 0 50px rgba(0,0,0,.25)">
              <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
                <div style="font-weight:700;font-size:22px;color:#1A1714;letter-spacing:-.01em">Ζητήστε προσφορά</div>
                <button onClick="{{ a.closeQuote }}" style="border:0;background:#F0EBE5;width:34px;height:34px;border-radius:8px;font-size:16px;cursor:pointer;color:#1A1714">✕</button>
              </div>
              <div style="{{ a.formStyle }}">
                <p style="font-size:13px;color:#8a847c;line-height:1.5;margin:0 0 22px">Συμπληρώστε τα στοιχεία σας και ένας πιστοποιημένος συνεργάτης θα επικοινωνήσει μαζί σας.</p>
                <div style="display:flex;flex-direction:column;gap:14px">
                  <input placeholder="Ονοματεπώνυμο" style="border:1px solid rgba(0,0,0,.14);border-radius:9px;padding:13px 14px;font:400 14px/1 inherit;color:#1A1714">
                  <input placeholder="Τηλέφωνο" style="border:1px solid rgba(0,0,0,.14);border-radius:9px;padding:13px 14px;font:400 14px/1 inherit;color:#1A1714">
                  <input placeholder="Email" style="border:1px solid rgba(0,0,0,.14);border-radius:9px;padding:13px 14px;font:400 14px/1 inherit;color:#1A1714">
                  <select style="border:1px solid rgba(0,0,0,.14);border-radius:9px;padding:13px 14px;font:400 14px/1 inherit;color:#1A1714;appearance:none">
                    <option>Ενδιαφέρομαι για…</option><option>Ανοιγόμενα συστήματα</option><option>Συρόμενα συστήματα</option><option>Πόρτες εισόδου</option><option>Σκίαση & Πέργκολες</option>
                  </select>
                  <textarea placeholder="Το μήνυμά σας (προαιρετικά)" rows="4" style="border:1px solid rgba(0,0,0,.14);border-radius:9px;padding:13px 14px;font:400 14px/1.4 inherit;color:#1A1714;resize:none"></textarea>
                  <button onClick="{{ a.submitQuote }}" style="border:0;background:#DA231C;color:#fff;font:600 14.5px/1 inherit;padding:15px;border-radius:9px;cursor:pointer;margin-top:4px">Αποστολή αιτήματος</button>
                </div>
              </div>
              <div style="{{ a.sentStyle }}">
                <div style="width:64px;height:64px;border-radius:50%;background:#e9f6ec;color:#1f8a3b;display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 20px">✓</div>
                <div style="font-weight:700;font-size:20px;color:#1A1714;margin-bottom:8px">Το αίτημα εστάλη!</div>
                <p style="font-size:13.5px;color:#8a847c;line-height:1.5">Θα επικοινωνήσουμε μαζί σας εντός 1 εργάσιμης ημέρας.</p>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>

    <!-- ============ OPTION 1B : placeholder ============ -->
    <div class="dv-opt" id="1b">
      <div class="dv-olabel"><span class="dv-oid">1b</span><b style="font-weight:600;color:#1a1a1a">Architectural Dark</b><span>— editorial, δραματική εικόνα, brand DNA από τα social (Alumil-inspired δομή)</span></div>
      <div class="frame">
        <div class="fbar"><span class="fdot" style="background:#f0605c"></span><span class="fdot" style="background:#f5bd4f"></span><span class="fdot" style="background:#61c454"></span><div class="furl">exalco.gr/idiotis</div></div>
        <div class="scr" style="background:#0E0E10">

          <!-- HEADER -->
          <div style="position:sticky;top:0;z-index:40">
            <div style="background:#000;color:rgba(255,255,255,.6);font-size:11px;letter-spacing:.06em">
              <div style="max-width:1200px;margin:0 auto;padding:8px 40px;display:flex;justify-content:space-between;align-items:center">
                <span style="text-transform:uppercase;letter-spacing:.14em;font-size:10.5px">Aluminium Systems · Since 1973</span>
                <span style="display:flex;gap:22px;align-items:center;text-transform:uppercase;letter-spacing:.1em;font-size:10.5px">
                  <a href="#1b" style="color:rgba(255,255,255,.6)">Βρείτε κατάστημα</a>
                  <a href="#1b" style="color:rgba(255,255,255,.6)">Uw</a>
                  <span style="color:rgba(255,255,255,.35)">GR / EN</span>
                </span>
              </div>
            </div>
            <div style="background:rgba(14,14,16,.9);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)">
              <div onMouseLeave="{{ b.closeMega }}">
                <div style="max-width:1200px;margin:0 auto;padding:16px 40px;display:flex;align-items:center;gap:34px">
                  <a href="#1b" style="display:flex;flex-direction:column;line-height:1;flex:none">
                    <span style="font-weight:800;font-size:25px;letter-spacing:.02em;color:#E2231A">EXALCO</span>
                    <span style="font-weight:600;font-size:8px;letter-spacing:.42em;color:rgba(255,255,255,.7);margin-top:3px">ALUMINIUM SYSTEMS</span>
                  </a>
                  <div style="display:flex;gap:3px;padding:3px;background:rgba(255,255,255,.07);border-radius:9px;flex:none">
                    <button onClick="{{ b.pickIdiotis }}" style="{{ b.segIdiotis }}">Ιδιώτες</button>
                    <button onClick="{{ b.pickArch }}" style="{{ b.segArch }}">Αρχιτέκτονες</button>
                    <button onClick="{{ b.pickKat }}" style="{{ b.segKat }}">Κατασκευαστές</button>
                  </div>
                  <nav style="display:flex;gap:26px;margin-left:auto;align-items:center;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.82)">
                    <a href="#1b" onMouseEnter="{{ b.openMega }}" style="display:flex;align-items:center;gap:5px;padding:6px 0">ΠΡΟΪΟΝΤΑ <span style="font-size:9px;color:#E2231A">▾</span></a>
                    <a href="#1b" onMouseEnter="{{ b.closeMega }}">Εμπνευστείτε</a>
                    <a href="#1b" onMouseEnter="{{ b.closeMega }}">ΕΞΟΙΚΟΝΟΜΗΣΗ</a>
                    <a href="#1b" onMouseEnter="{{ b.closeMega }}">ΓΙΑΤΙ</a>
                    <button onClick="{{ b.openQuote }}" style="border:0;background:#E2231A;color:#fff;font:600 11.5px/1 inherit;letter-spacing:.08em;text-transform:uppercase;padding:12px 18px;border-radius:7px;cursor:pointer">ΖΗΤΗΣΤΕ ΠΡΟΣΦΟΡΑ</button>
                  </nav>
                </div>
                <div style="{{ b.megaStyle }}">
                  <div style="max-width:1200px;margin:0 auto;padding:26px 40px;display:grid;grid-template-columns:repeat(4,1fr) 1.1fr;gap:20px">
                    <sc-for list="{{ b.cats }}" as="cat" hint-placeholder-count="4">
                      <a href="#1b" style="display:block">
                        <div style="height:120px;border-radius:8px;overflow:hidden;margin-bottom:10px;background:#222"><img src="{{ cat.img }}" style="width:100%;height:100%;object-fit:cover" alt=""></div>
                        <div style="font-weight:600;font-size:13.5px;color:#fff">{{ cat.t }}</div>
                        <div style="font-size:12px;color:rgba(255,255,255,.5);margin-top:3px;line-height:1.4">{{ cat.s }}</div>
                      </a>
                    </sc-for>
                    <div style="background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:22px;display:flex;flex-direction:column;justify-content:center">
                      <div style="font-family:'Cormorant Garamond',Georgia,serif;font-size:24px;font-style:italic;color:#fff;line-height:1.15">Χρειάζεστε καθοδήγηση;</div>
                      <p style="font-size:12.5px;color:rgba(255,255,255,.55);line-height:1.5;margin:10px 0 16px">Πιστοποιημένος συνεργάτης, κοντά σας.</p>
                      <button onClick="{{ b.openQuote }}" style="border:0;background:#fff;color:#0E0E10;font:600 12.5px/1 inherit;padding:11px 16px;border-radius:8px;cursor:pointer;align-self:flex-start">Δωρεάν συμβουλευτική</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div style="{{ b.noteStyle }}">
              <span>{{ b.noteText }}</span>
              <button onClick="{{ b.pickIdiotis }}" style="border:1px solid rgba(255,255,255,.6);background:transparent;color:#fff;font:600 11.5px/1 inherit;padding:6px 12px;border-radius:6px;cursor:pointer">Επιστροφή στους Ιδιώτες</button>
            </div>
          </div>

          <!-- HERO -->
          <div style="position:relative;height:660px;overflow:hidden;background:#0E0E10">
            <img src="assets/photos/p26.jpg" alt="" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover">
            <div style="position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,14,16,.55) 0%,rgba(14,14,16,.15) 32%,rgba(14,14,16,.5) 68%,rgba(14,14,16,.96) 100%)"></div>
            <div style="position:relative;max-width:1200px;margin:0 auto;padding:0 40px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:56px">
              <div style="max-width:820px;animation:fadeUp .9s ease both">
                <div style="display:flex;align-items:center;gap:12px;margin-bottom:22px"><span style="width:40px;height:2px;background:#E2231A"></span><span style="font-size:11.5px;letter-spacing:.28em;color:#fff;font-weight:600;text-transform:uppercase">ΓΙΑ ΤΟ ΣΠΙΤΙ ΣΑΣ</span></div>
                <h1 style="margin:0;font-weight:800;font-size:78px;line-height:.96;letter-spacing:-.03em;color:#fff;text-transform:uppercase">ΖΗΣΤΕ ΜΕ<br>ΠΕΡΙΣΣΟΤΕΡΟ <span style="font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-style:italic;text-transform:none;letter-spacing:0;color:#fff">φως.</span></h1>
                <p style="font-size:17.5px;line-height:1.6;color:rgba(255,255,255,.78);margin:26px 0 32px;max-width:520px">Πιστοποιημένα συστήματα αλουμινίου για κουφώματα που κρατούν το σπίτι σας ζεστό, ασφαλές και όμορφο — για δεκαετίες.</p>
                <div style="display:flex;gap:16px;align-items:center">
                  <button onClick="{{ b.openQuote }}" style="border:0;background:#E2231A;color:#fff;font:600 13px/1 inherit;letter-spacing:.06em;text-transform:uppercase;padding:17px 28px;border-radius:9px;cursor:pointer">ΖΗΤΗΣΤΕ ΠΡΟΣΦΟΡΑ</button>
                  <a href="#1b" style="font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#fff;border-bottom:2px solid #E2231A;padding-bottom:4px">ΕΞΕΡΕΥΝΗΣΤΕ →</a>
                </div>
              </div>
            </div>
          </div>
          <!-- stat strip -->
          <div style="background:#0E0E10;border-bottom:1px solid rgba(255,255,255,.08)">
            <div style="max-width:1200px;margin:0 auto;padding:26px 40px;display:grid;grid-template-columns:repeat(3,1fr)">
              <div style="display:flex;align-items:baseline;gap:12px"><span style="font-weight:800;font-size:32px;letter-spacing:-.02em;color:#fff">50+</span><span style="font-size:12px;color:rgba(255,255,255,.5);line-height:1.35;text-transform:uppercase;letter-spacing:.06em">χρόνια<br>εμπειρίας</span></div>
              <div style="display:flex;align-items:baseline;gap:12px;border-left:1px solid rgba(255,255,255,.12);padding-left:26px"><span style="font-weight:800;font-size:32px;letter-spacing:-.02em;color:#fff">75%</span><span style="font-size:12px;color:rgba(255,255,255,.5);line-height:1.35;text-transform:uppercase;letter-spacing:.06em">εξαγωγές<br>σε 5 ηπείρους</span></div>
              <div style="display:flex;align-items:baseline;gap:12px;border-left:1px solid rgba(255,255,255,.12);padding-left:26px"><span style="font-weight:800;font-size:32px;letter-spacing:-.02em;color:#E2231A">CE</span><span style="font-size:12px;color:rgba(255,255,255,.5);line-height:1.35;text-transform:uppercase;letter-spacing:.06em">πιστοποιημένα<br>συστήματα</span></div>
            </div>
          </div>

          <!-- PRODUCTS as image tiles -->
          <div style="max-width:1200px;margin:0 auto;padding:88px 40px 44px">
            <div style="display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:36px">
              <div>
                <div style="font-size:11px;letter-spacing:.24em;color:#E2231A;font-weight:600;text-transform:uppercase;margin-bottom:14px">ΤΑ ΣΥΣΤΗΜΑΤΑ ΜΑΣ</div>
                <h2 style="margin:0;font-weight:800;font-size:46px;letter-spacing:-.02em;color:#fff;line-height:1;text-transform:uppercase">ΓΙΑ ΚΑΘΕ <span style="font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500;text-transform:none;letter-spacing:0">άνοιγμα</span></h2>
              </div>
              <a href="#1b" style="font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#fff;border-bottom:2px solid #E2231A;padding-bottom:4px;flex:none">Όλα →</a>
            </div>
            <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:14px">
              <sc-for list="{{ b.cats }}" as="cat" hint-placeholder-count="4">
                <a href="#1b" style="position:relative;display:block;height:380px;border-radius:10px;overflow:hidden">
                  <img src="{{ cat.img }}" alt="" style="width:100%;height:100%;object-fit:cover;transition:transform .6s" style-hover="transform:scale(1.07)">
                  <div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(14,14,16,.92) 0%,rgba(14,14,16,.2) 55%,rgba(14,14,16,.1) 100%)"></div>
                  <div style="position:absolute;left:18px;right:18px;bottom:18px">
                    <div style="font-weight:700;font-size:16px;color:#fff;letter-spacing:.02em;line-height:1.15">{{ cat.t }}</div>
                    <p style="font-size:12px;color:rgba(255,255,255,.62);line-height:1.45;margin:8px 0 12px">{{ cat.s }}</p>
                    <span style="font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#E2231A">ΑΝΑΚΑΛΥΨΤΕ →</span>
                  </div>
                </a>
              </sc-for>
            </div>
          </div>

          <!-- WHY -->
          <div style="border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)">
            <div style="max-width:1200px;margin:0 auto;padding:88px 40px;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center">
              <div>
                <div style="font-size:11px;letter-spacing:.24em;color:#E2231A;font-weight:600;text-transform:uppercase;margin-bottom:16px">ΓΙΑΤΙ EXALCO</div>
                <h2 style="margin:0 0 34px;font-weight:800;font-size:44px;letter-spacing:-.02em;color:#fff;line-height:1.02;text-transform:uppercase">ΜΙΣΟΣ ΑΙΩΝΑΣ<br><span style="font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500;text-transform:none;letter-spacing:0;color:#E2231A">εμπιστοσύνης</span></h2>
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:30px 34px">
                  <sc-for list="{{ b.pillars }}" as="p" hint-placeholder-count="4">
                    <div style="border-top:1px solid rgba(255,255,255,.14);padding-top:16px">
                      <div style="font-family:'Cormorant Garamond',Georgia,serif;font-size:26px;color:#E2231A;margin-bottom:8px">{{ p.k }}</div>
                      <div style="font-weight:600;font-size:16px;color:#fff;margin-bottom:6px">{{ p.t }}</div>
                      <p style="font-size:13px;color:rgba(255,255,255,.55);line-height:1.55;margin:0">{{ p.s }}</p>
                    </div>
                  </sc-for>
                </div>
              </div>
              <div style="border-radius:12px;overflow:hidden;height:480px"><img src="assets/photos/p13.jpg" alt="" style="width:100%;height:100%;object-fit:cover"></div>
            </div>
          </div>

          <!-- LOCATOR -->
          <div style="max-width:1200px;margin:0 auto;padding:88px 40px">
            <div style="border:1px solid rgba(255,255,255,.1);border-radius:16px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr">
              <div style="padding:52px 48px;color:#fff">
                <div style="font-size:11px;letter-spacing:.24em;color:#E2231A;font-weight:600;text-transform:uppercase;margin-bottom:16px">ΔΙΚΤΥΟ ΚΑΤΑΣΤΗΜΑΤΩΝ</div>
                <h2 style="margin:0 0 12px;font-weight:800;font-size:36px;letter-spacing:-.02em;line-height:1.02;text-transform:uppercase">ΒΡΕΙΤΕ ΣΥΝΕΡΓΑΤΗ<br><span style="font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500;text-transform:none;letter-spacing:0;color:#E2231A">κοντά σας</span></h2>
                <p style="font-size:14px;color:rgba(255,255,255,.55);line-height:1.6;margin:14px 0 26px;max-width:380px">Πάνω από 500 πιστοποιημένοι συνεργάτες σε όλη την Ελλάδα.</p>
                <label style="font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45);display:block;margin-bottom:8px">ΕΠΙΛΕΞΤΕ ΝΟΜΟ</label>
                <select onChange="{{ b.onRegion }}" value="{{ b.region }}" style="width:100%;max-width:340px;background:#1a1a1e;color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:9px;padding:14px 16px;font:500 14px/1 inherit;cursor:pointer;appearance:none">
                  <option value="">— Επιλέξτε περιοχή —</option>
                  <sc-for list="{{ b.regions }}" as="r" hint-placeholder-count="6"><option value="{{ r }}">{{ r }}</option></sc-for>
                </select>
              </div>
              <div style="background:#141416;padding:32px;overflow:hidden;border-left:1px solid rgba(255,255,255,.08)">
                <div style="{{ b.emptyStyle }}">
                  <div style="font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:22px;color:rgba(255,255,255,.5)">Επιλέξτε νομό</div>
                  <p style="font-size:13px;margin:8px 0 0">για να εμφανιστούν τα σημεία πώλησης</p>
                </div>
                <div style="{{ b.hasStyle }}">
                  <div style="font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:14px">ΣΗΜΕΙΑ ΣΤΗ ΠΕΡΙΟΧΗ <b style="color:#fff">{{ b.region }}</b></div>
                  <div style="display:flex;flex-direction:column;gap:10px">
                    <sc-for list="{{ b.showrooms }}" as="s" hint-placeholder-count="2">
                      <div style="background:#1a1a1e;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:16px 18px">
                        <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:10px">
                          <div style="font-weight:600;font-size:14px;color:#fff">{{ s.n }}</div>
                          <span style="font-size:9.5px;font-weight:600;letter-spacing:.06em;color:#E2231A;border:1px solid rgba(226,35,26,.4);border-radius:20px;padding:3px 9px;white-space:nowrap">{{ s.b }}</span>
                        </div>
                        <div style="font-size:12.5px;color:rgba(255,255,255,.55);margin-top:6px">{{ s.a }}</div>
                        <div style="font-size:12.5px;color:rgba(255,255,255,.55);margin-top:2px">τηλ. {{ s.p }}</div>
                      </div>
                    </sc-for>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- PROJECTS -->
          <div style="max-width:1200px;margin:0 auto;padding:0 40px 44px">
            <div style="display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:30px;flex-wrap:wrap;gap:16px">
              <div>
                <div style="font-size:11px;letter-spacing:.24em;color:#E2231A;font-weight:600;text-transform:uppercase;margin-bottom:14px">Εμπνευστείτε</div>
                <h2 style="margin:0;font-weight:800;font-size:46px;letter-spacing:-.02em;color:#fff;line-height:1;text-transform:uppercase">ΕΠΙΛΕΓΜΕΝΑ <span style="font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500;text-transform:none;letter-spacing:0">έργα</span></h2>
              </div>
              <div style="display:flex;gap:8px">
                <sc-for list="{{ b.galItems }}" as="it" hint-placeholder-count="4">
                  <button onClick="{{ it.onClick }}" style="{{ it.style }}">{{ it.label }}</button>
                </sc-for>
              </div>
            </div>
            <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:14px">
              <sc-for list="{{ b.projects }}" as="pr" hint-placeholder-count="6">
                <a href="#1b" style="position:relative;display:block;height:270px;border-radius:10px;overflow:hidden">
                  <img src="{{ pr.img }}" alt="" style="width:100%;height:100%;object-fit:cover;transition:transform .6s" style-hover="transform:scale(1.06)">
                  <div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(14,14,16,.9) 0%,rgba(14,14,16,.1) 55%,transparent 100%)"></div>
                  <div style="position:absolute;left:18px;bottom:16px;right:18px;color:#fff">
                    <span style="font-size:10px;font-weight:600;letter-spacing:.14em;color:#E2231A">{{ pr.tag }}</span>
                    <div style="font-weight:700;font-size:17px;margin-top:4px;letter-spacing:.01em">{{ pr.n }}</div>
                    <div style="font-size:12.5px;color:rgba(255,255,255,.65)">{{ pr.c }}</div>
                  </div>
                </a>
              </sc-for>
            </div>
          </div>

          <!-- ENERGY -->
          <div style="margin-top:56px;background:linear-gradient(115deg,#0f1d16 0%,#172b20 52%,#101f18 100%);border-top:1px solid rgba(255,255,255,.06)">
            <div style="max-width:1200px;margin:0 auto;padding:76px 40px;color:#fff;display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center">
              <div>
                <div style="font-size:11px;letter-spacing:.24em;color:#8fdca0;font-weight:600;text-transform:uppercase;margin-bottom:16px">ΕΞΟΙΚΟΝΟΜΩ 2025</div>
                <h2 style="margin:0 0 14px;font-weight:800;font-size:38px;letter-spacing:-.02em;line-height:1.02;text-transform:uppercase">ΑΝΑΒΑΘΜΙΣΤΕ <span style="font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500;text-transform:none;letter-spacing:0">ενεργειακά</span></h2>
                <p style="font-size:14.5px;color:rgba(255,255,255,.7);line-height:1.6;margin:0;max-width:440px">Επιδοτούμενα ενεργειακά κουφώματα EXALCO ECONOMY με θερμοδιακοπή. Υπολογίστε τον συντελεστή Uw και δείτε πόσο εξοικονομείτε.</p>
              </div>
              <div style="display:flex;flex-direction:column;gap:12px;align-items:flex-start">
                <a href="#1b" style="background:#fff;color:#0E0E10;font-weight:600;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;padding:15px 24px;border-radius:9px">Υπολογισμός Uw →</a>
                <a href="#1b" style="color:#fff;font-weight:600;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;border-bottom:2px solid rgba(255,255,255,.5);padding-bottom:4px">Για το «Εξοικονομώ»</a>
              </div>
            </div>
          </div>

          <!-- CTA -->
          <div style="text-align:center;padding:96px 40px;background:#0E0E10">
            <div style="font-size:11px;letter-spacing:.24em;color:#E2231A;font-weight:600;text-transform:uppercase;margin-bottom:18px">ΞΕΚΙΝΗΣΤΕ ΣΗΜΕΡΑ</div>
            <h2 style="margin:0 auto 16px;font-weight:800;font-size:54px;letter-spacing:-.02em;color:#fff;line-height:1;max-width:720px;text-transform:uppercase">ΑΛΛΑΞΤΕ <span style="font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500;text-transform:none;letter-spacing:0">όψη</span> ΣΤΟ ΣΠΙΤΙ ΣΑΣ</h2>
            <p style="font-size:15.5px;color:rgba(255,255,255,.6);max-width:480px;margin:0 auto 32px;line-height:1.6">Δωρεάν προσφορά & συμβουλευτική από πιστοποιημένο συνεργάτη EXALCO.</p>
            <button onClick="{{ b.openQuote }}" style="border:0;background:#E2231A;color:#fff;font:600 13.5px/1 inherit;letter-spacing:.06em;text-transform:uppercase;padding:18px 32px;border-radius:10px;cursor:pointer">ΖΗΤΗΣΤΕ ΠΡΟΣΦΟΡΑ</button>
          </div>

          <!-- FOOTER -->
          <div style="background:#000;color:rgba(255,255,255,.6);border-top:1px solid rgba(255,255,255,.08)">
            <div style="max-width:1200px;margin:0 auto;padding:64px 40px 30px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px">
              <div>
                <div style="display:flex;flex-direction:column;line-height:1;margin-bottom:18px">
                  <span style="font-weight:800;font-size:24px;letter-spacing:.02em;color:#E2231A">EXALCO</span>
                  <span style="font-weight:600;font-size:8px;letter-spacing:.42em;color:rgba(255,255,255,.55);margin-top:3px">ALUMINIUM SYSTEMS</span>
                </div>
                <p style="font-size:13px;line-height:1.6;max-width:280px;margin:0 0 18px">Μία από τις μεγαλύτερες βιομηχανίες αλουμινίου στην Ελλάδα, με έδρα τη Λάρισα από το 1973.</p>
                <div style="display:flex;gap:10px">
                  <span style="width:34px;height:34px;border:1px solid rgba(255,255,255,.16);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px">f</span>
                  <span style="width:34px;height:34px;border:1px solid rgba(255,255,255,.16);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px">IG</span>
                  <span style="width:34px;height:34px;border:1px solid rgba(255,255,255,.16);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px">YT</span>
                </div>
              </div>
              <div>
                <div style="color:#fff;font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px">ΠΡΟΪΟΝΤΑ</div>
                <div style="display:flex;flex-direction:column;gap:9px;font-size:13px">
                  <a href="#1b">Ανοιγόμενα συστήματα</a><a href="#1b">Συρόμενα συστήματα</a><a href="#1b">Πόρτες εισόδου</a><a href="#1b">Σκίαση & Πέργκολες</a><a href="#1b">Ειδικές βαφές</a>
                </div>
              </div>
              <div>
                <div style="color:#fff;font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px">ΕΤΑΙΡΕΙΑ</div>
                <div style="display:flex;flex-direction:column;gap:9px;font-size:13px">
                  <a href="#1b">Εταιρικό προφίλ</a><a href="#1b">Ιστορικό</a><a href="#1b">Βιωσιμότητα</a><a href="#1b">Πιστοποιήσεις</a><a href="#1b">Έργα</a>
                </div>
              </div>
              <div>
                <div style="color:#fff;font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px">ΕΠΙΚΟΙΝΩΝΙΑ</div>
                <p style="font-size:13px;line-height:1.7;margin:0 0 14px">5ο χλμ Π.Ε.Ο. Λαρίσης – Αθηνών<br>ΤΚ 415 00, Λάρισα<br>τηλ. 2410 688 688</p>
                <div style="display:flex;gap:8px">
                  <input placeholder="Το email σας" style="flex:1;background:#1a1a1e;border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:10px 12px;color:#fff;font:400 12.5px/1 inherit">
                  <button style="border:0;background:#E2231A;color:#fff;border-radius:8px;padding:0 14px;font:600 12.5px/1 inherit;cursor:pointer">OK</button>
                </div>
              </div>
            </div>
            <div style="border-top:1px solid rgba(255,255,255,.1)">
              <div style="max-width:1200px;margin:0 auto;padding:18px 40px;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:rgba(255,255,255,.4);flex-wrap:wrap;gap:10px">
                <span>© 2026 EXALCO A.E. · Αρ.ΓΕΜΗ 26532640000</span>
                <span style="display:flex;gap:18px"><a href="#1b">Όροι χρήσης</a><a href="#1b">Απόρρητο</a><a href="#1b">CE · ISO 9001 · EPD</a></span>
              </div>
            </div>
          </div>

          <!-- QUOTE DRAWER -->
          <div style="{{ b.quoteStyle }}">
            <div onClick="{{ b.closeQuote }}" style="flex:1"></div>
            <div style="width:440px;background:#141416;height:100%;overflow-y:auto;padding:36px 34px;box-shadow:-20px 0 50px rgba(0,0,0,.5);border-left:1px solid rgba(255,255,255,.1)">
              <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
                <div style="font-weight:700;font-size:22px;color:#fff;letter-spacing:-.01em;text-transform:uppercase">ΖΗΤΗΣΤΕ ΠΡΟΣΦΟΡΑ</div>
                <button onClick="{{ b.closeQuote }}" style="border:0;background:rgba(255,255,255,.08);width:34px;height:34px;border-radius:8px;font-size:16px;cursor:pointer;color:#fff">✕</button>
              </div>
              <div style="{{ b.formStyle }}">
                <p style="font-size:13px;color:rgba(255,255,255,.5);line-height:1.5;margin:0 0 22px">Συμπληρώστε τα στοιχεία σας και ένας πιστοποιημένος συνεργάτης θα επικοινωνήσει μαζί σας.</p>
                <div style="display:flex;flex-direction:column;gap:14px">
                  <input placeholder="Ονοματεπώνυμο" style="background:#1a1a1e;border:1px solid rgba(255,255,255,.16);border-radius:9px;padding:13px 14px;font:400 14px/1 inherit;color:#fff">
                  <input placeholder="Τηλέφωνο" style="background:#1a1a1e;border:1px solid rgba(255,255,255,.16);border-radius:9px;padding:13px 14px;font:400 14px/1 inherit;color:#fff">
                  <input placeholder="Email" style="background:#1a1a1e;border:1px solid rgba(255,255,255,.16);border-radius:9px;padding:13px 14px;font:400 14px/1 inherit;color:#fff">
                  <select style="background:#1a1a1e;border:1px solid rgba(255,255,255,.16);border-radius:9px;padding:13px 14px;font:400 14px/1 inherit;color:#fff;appearance:none">
                    <option>Ενδιαφέρομαι για…</option><option>Ανοιγόμενα συστήματα</option><option>Συρόμενα συστήματα</option><option>Πόρτες εισόδου</option><option>Σκίαση & Πέργκολες</option>
                  </select>
                  <textarea placeholder="Το μήνυμά σας (προαιρετικά)" rows="4" style="background:#1a1a1e;border:1px solid rgba(255,255,255,.16);border-radius:9px;padding:13px 14px;font:400 14px/1.4 inherit;color:#fff;resize:none"></textarea>
                  <button onClick="{{ b.submitQuote }}" style="border:0;background:#E2231A;color:#fff;font:600 13px/1 inherit;letter-spacing:.06em;text-transform:uppercase;padding:15px;border-radius:9px;cursor:pointer;margin-top:4px">Αποστολή αιτήματος</button>
                </div>
              </div>
              <div style="{{ b.sentStyle }}">
                <div style="width:64px;height:64px;border-radius:50%;background:rgba(143,220,160,.15);color:#8fdca0;display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 20px">✓</div>
                <div style="font-weight:700;font-size:20px;color:#fff;margin-bottom:8px;text-transform:uppercase">ΤΟ ΑΙΤΗΜΑ ΕΣΤΑΛΗ!</div>
                <p style="font-size:13.5px;color:rgba(255,255,255,.5);line-height:1.5">Θα επικοινωνήσουμε μαζί σας εντός 1 εργάσιμης ημέρας.</p>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>

  </div>
  <p class="dv-sub" style="margin:26px 0 0">Δοκιμάστε στο <a class="dv-oid" href="#1a" style="text-decoration:none">1a</a>: το mega-menu «Προϊόντα», την εναλλαγή σε «Αρχιτέκτονες», την εύρεση καταστήματος (π.χ. Αττική), τα φίλτρα έργων και το «Ζητήστε προσφορά».</p>
</section>
</x-dc>
<script type="text/x-dc" data-dc-script>
class Component extends DCLogic {
  state = {
    a:{ aud:'idiotis', mega:false, region:'', gallery:'Όλα', quote:false, sent:false, scrolled:false },
    b:{ aud:'idiotis', mega:false, region:'', gallery:'Όλα', quote:false, sent:false, scrolled:false },
  };

  cats = [
    { t:'Ανοιγόμενα συστήματα', s:'Παράθυρα & μπαλκονόπορτες με απόλυτη στεγανότητα.', img:'assets/photos/p26.jpg' },
    { t:'Συρόμενα συστήματα', s:'Ελάχιστα προφίλ, μέγιστη θέα — χωρίς όρια.', img:'assets/photos/p13.jpg' },
    { t:'Πόρτες εισόδου', s:'Η πρώτη εντύπωση, με ασφάλεια & κύρος.', img:'assets/photos/p14.jpg' },
    { t:'Σκίαση & Πέργκολες', s:'Ζήστε τον εξωτερικό σας χώρο όλο τον χρόνο.', img:'assets/photos/p28.jpg' },
  ];

  pillars = [
    { k:'01', t:'Από το 1973', s:'Πάνω από 50 χρόνια τεχνογνωσίας στην ελληνική βιομηχανία αλουμινίου.' },
    { k:'02', t:'Πιστοποιημένη ποιότητα', s:'Όλα τα συστήματα φέρουν σήμανση CE και ελέγχονται κατά ISO.' },
    { k:'03', t:'Βιωσιμότητα', s:'Πλήρως ανακυκλώσιμο αλουμίνιο & EPD περιβαλλοντικές δηλώσεις.' },
    { k:'04', t:'Εγγύηση', s:'Γραπτή εγγύηση καλής λειτουργίας μέσω πιστοποιημένων συνεργατών.' },
  ];

  projects = [
    { n:'MOSAY All Suite Hotel', c:'Κως', tag:'Ξενοδοχεία', img:'assets/photos/p31.jpg' },
    { n:'The Modernist', c:'Αθήνα', tag:'Ξενοδοχεία', img:'assets/photos/p14.jpg' },
    { n:'UTOPIA Blu Hotel', c:'Κως', tag:'Ξενοδοχεία', img:'assets/photos/p32.jpg' },
    { n:'Ιδιωτική Κατοικία', c:'Χαλκιδική', tag:'Κατοικίες', img:'assets/photos/p13.jpg' },
    { n:'Παραθαλάσσια Βίλα', c:'Πάρος', tag:'Κατοικίες', img:'assets/photos/p28.jpg' },
    { n:'Ωνάσεια Σχολεία', c:'Αθήνα', tag:'Δημόσια', img:'assets/photos/p26.jpg' },
  ];

  regions = ['Αττική','Θεσσαλονίκη','Λάρισα','Ηράκλειο','Αχαΐα','Ιωάννινα','Μαγνησία','Χανιά'];

  byRegion = {
    'Αττική':[
      { n:'EXALCO Showroom Αθήνα', a:'Λ. Κηφισίας 210, Μαρούσι', p:'210 000 0000', b:'Έκθεση' },
      { n:'Πιστοποιημένος Συνεργάτης', a:'Γλυφάδα', p:'210 000 0000', b:'Κατασκευαστής' },
      { n:'Πιστοποιημένος Συνεργάτης', a:'Περιστέρι', p:'210 000 0000', b:'Έκθεση' },
    ],
    'Θεσσαλονίκη':[
      { n:'EXALCO Point Θεσσαλονίκη', a:'Ωραιόκαστρο', p:'2310 000 000', b:'Έκθεση' },
      { n:'Πιστοποιημένος Συνεργάτης', a:'Πυλαία', p:'2310 000 000', b:'Κατασκευαστής' },
    ],
    'Λάρισα':[
      { n:'EXALCO Κεντρικό', a:'5ο χλμ Π.Ε.Ο. Λαρίσης – Αθηνών', p:'2410 688 688', b:'Εργοστάσιο & Έκθεση' },
      { n:'Πιστοποιημένος Συνεργάτης', a:'Αμπελώνας', p:'2410 000 000', b:'Κατασκευαστής' },
    ],
    'Ηράκλειο':[
      { n:'EXALCO Point Ηράκλειο', a:'ΒΙ.ΠΕ. Ηρακλείου', p:'2810 000 000', b:'Έκθεση' },
    ],
    'Αχαΐα':[ { n:'Πιστοποιημένος Συνεργάτης', a:'Πάτρα', p:'2610 000 000', b:'Έκθεση' } ],
    'Ιωάννινα':[ { n:'Πιστοποιημένος Συνεργάτης', a:'Ιωάννινα', p:'26510 00 000', b:'Κατασκευαστής' } ],
    'Μαγνησία':[ { n:'Πιστοποιημένος Συνεργάτης', a:'Βόλος', p:'24210 00 000', b:'Έκθεση' } ],
    'Χανιά':[ { n:'Πιστοποιημένος Συνεργάτης', a:'Χανιά', p:'28210 00 000', b:'Κατασκευαστής' } ],
  };

  galTabs = ['Όλα','Κατοικίες','Ξενοδοχεία','Δημόσια'];

  audLabel(v){ return v==='idiotis'?'Ιδιώτες':v==='architektonas'?'Αρχιτέκτονες':'Κατασκευαστές'; }

  set(opt, patch){ this.setState(s=>({ [opt]:{ ...s[opt], ...patch } })); }

  bundle(opt){
    const st = this.state[opt];
    const filtered = st.gallery==='Όλα' ? this.projects : this.projects.filter(p=>p.tag===st.gallery);
    const showrooms = st.region ? (this.byRegion[st.region]||[]) : [];
    return {
      ...st,
      cats:this.cats, pillars:this.pillars, regions:this.regions, galTabs:this.galTabs,
      projects:filtered, showrooms,
      noteText: st.aud!=='idiotis' ? ('Προβάλλετε την εμπειρία «'+this.audLabel(st.aud)+'» — σχεδιάζεται στη Φάση 2. Η σελίδα των Ιδιωτών είναι ενεργή.') : '',
      isIdiotis: st.aud==='idiotis',
      pickIdiotis:()=>this.set(opt,{aud:'idiotis'}),
      pickArch:()=>this.set(opt,{aud:'architektonas'}),
      pickKat:()=>this.set(opt,{aud:'kataskevastis'}),
      openMega:()=>this.set(opt,{mega:true}),
      closeMega:()=>this.set(opt,{mega:false}),
      onRegion:(e)=>this.set(opt,{region:e.target.value}),
      pickGal:(v)=>this.set(opt,{gallery:v}),
      openQuote:()=>this.set(opt,{quote:true,sent:false}),
      closeQuote:()=>this.set(opt,{quote:false}),
      submitQuote:(e)=>{ if(e&&e.preventDefault)e.preventDefault(); this.set(opt,{sent:true}); },
      onScroll:(e)=>{ const sc=e.target.scrollTop>36; if(sc!==this.state[opt].scrolled) this.set(opt,{scrolled:sc}); },
    };
  }

  // active-state helpers (live runtime values -> full style objects, single style hole per element)
  segStyle(active, dark){
    const base={border:'0',font:'600 12.5px/1 inherit',padding:'8px 14px',borderRadius:'7px',cursor:'pointer',transition:'.15s',whiteSpace:'nowrap'};
    return active
      ? {...base, background: dark?'#DA231C':'#1A1714', color:'#fff', boxShadow:'0 1px 6px rgba(0,0,0,.2)'}
      : {...base, background:'transparent', color: dark?'rgba(255,255,255,.6)':'#6B655E'};
  }
  tabStyle(active, dark){
    const base={background:'transparent',border:'0',borderBottom:'2px solid',padding:'8px 4px',font:'600 13.5px/1 inherit',cursor:'pointer',transition:'.15s'};
    return active
      ? {...base, color: dark?'#fff':'#1A1714', borderBottomColor:'#DA231C'}
      : {...base, color: dark?'rgba(255,255,255,.5)':'#9a938a', borderBottomColor:'transparent'};
  }

  decorate(opt, o, dark){
    o.segIdiotis=this.segStyle(o.aud==='idiotis',dark);
    o.segArch=this.segStyle(o.aud==='architektonas',dark);
    o.segKat=this.segStyle(o.aud==='kataskevastis',dark);
    o.galItems=this.galTabs.map(t=>({ label:t, style:this.tabStyle(o.gallery===t,dark), onClick:()=>this.set(opt,{gallery:t}) }));
    o.megaStyle={ display:o.mega?'block':'none', position:'absolute', left:0, right:0, background: dark?'#141416':'#fff', borderTop:'1px solid '+(dark?'rgba(255,255,255,.08)':'rgba(0,0,0,.07)'), boxShadow:'0 24px 40px -12px rgba(0,0,0,'+(dark?'.6':'.18')+')' };
    o.noteStyle={ display:o.noteText?'flex':'none', background:'#DA231C', color:'#fff', alignItems:'center', justifyContent:'center', gap:'14px', padding:'9px 40px', fontSize:'12.5px' };
    o.quoteStyle={ display:o.quote?'flex':'none', position:'absolute', inset:0, zIndex:60, background:'rgba(15,12,10,.55)', alignItems:'stretch', justifyContent:'flex-end', animation:'fadeIn .2s ease both' };
    o.emptyStyle={ display:o.region?'none':'flex', height:'100%', flexDirection:'column', alignItems:'center', justifyContent:'center', textAlign:'center', color:'rgba(255,255,255,.4)' };
    o.hasStyle={ display:(o.region&&o.showrooms.length)?'block':'none' };
    o.sentStyle={ display:o.sent?'block':'none', textAlign:'center', padding:'50px 10px' };
    o.formStyle={ display:o.sent?'none':'block' };
    return o;
  }

  renderVals(){
    const a=this.decorate('a', this.bundle('a'), false);
    const b=this.decorate('b', this.bundle('b'), true);
    return { a, b };
  }
}
</script>
</body>
</html>
