site: polish R4 beginner onboarding hierarchy

landing/home.css

@@ -167,10 +167,35 @@ body[data-page="overview"] .start-choice-card {
 }
 
 body[data-page="overview"] .start-choice-card.highlight {
-  border-color: rgba(77, 190, 255, .26);
+  position: relative;
+  border-color: rgba(77, 190, 255, .42);
   background:
-    radial-gradient(circle at 0 0, rgba(56, 189, 248, .12), transparent 22rem),
-    linear-gradient(145deg, rgba(17, 42, 72, .8), rgba(8, 23, 44, .62));
+    radial-gradient(circle at 0 0, rgba(56, 189, 248, .18), transparent 22rem),
+    linear-gradient(145deg, rgba(17, 46, 78, .88), rgba(8, 24, 46, .68));
+  box-shadow: 0 20px 52px rgba(0, 26, 54, .2), inset 0 1px 0 rgba(255,255,255,.035);
+}
+
+body[data-page="overview"] .start-choice-topline {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: .65rem;
+  flex-wrap: wrap;
+}
+
+body[data-page="overview"] .recommended-badge {
+  display: inline-flex;
+  align-items: center;
+  min-height: 1.7rem;
+  padding: .26rem .52rem;
+  border: 1px solid rgba(86, 205, 255, .28);
+  border-radius: 999px;
+  color: #dff7ff;
+  background: rgba(43, 175, 234, .11);
+  font-size: .69rem;
+  font-weight: 700;
+  letter-spacing: -.006em;
+  white-space: nowrap;
 }
 
 body[data-page="overview"] .start-choice-card h3 {

landing/templates/id.html

@@ -80,11 +80,11 @@ <h1>ARSAS adalah tester IEC 61850 Windows gratis untuk <span class="gradient-tex
         <div class="section-head center">
           <span class="kicker">Mulai di sini</span>
           <h2>Dua cara masuk. Satu jalur jelas menuju data IEC 61850 yang berguna.</h2>
-          <p>Gunakan relay live jika device dapat dijangkau, atau buka file SCL jika Anda ingin memeriksa model engineering secara offline.</p>
+          <p>Pilih berdasarkan apa yang sudah Anda punya: relay yang dapat dijangkau untuk live discovery, atau file engineering IEC 61850 untuk inspeksi offline.</p>
         </div>
         <div class="start-choice-grid" aria-label="Dua cara memulai ARSAS">
           <article class="start-choice-card highlight">
-            <span class="kicker">Saya punya relay atau IED live</span>
+            <div class="start-choice-topline"><span class="kicker">Saya punya relay atau IED live</span><span class="recommended-badge">Disarankan untuk koneksi pertama</span></div>
             <h3>Hubungkan lewat alamat IP</h3>
             <p>Gunakan alamat IP relay pada network test, FAT, SAT atau commissioning yang memang Anda berwenang gunakan. ARSAS terhubung melalui IEC 61850 MMS, discovery live model, lalu Anda memilih apa yang ingin dimonitor.</p>
             <div class="start-flow">Alamat IP → Smart Discovery → DataSet atau signal → Live Monitor</div>
@@ -155,7 +155,7 @@ <h2>Mulai dari pekerjaan—bukan dari jargon protokol.</h2>
         <div class="section-head center">
           <span class="kicker">Evidence produk nyata</span>
           <h2>Lihat engineering surface yang benar-benar bekerja.</h2>
-          <p>Tampilan terkurasi dari workflow ARSAS v1.6.40. Halaman capability membawa detail engineering yang lebih dalam.</p>
+          <p>Setelah alur koneksi pertama terasa jelas, surface ARSAS nyata ini menunjukkan bagaimana konteks IED yang sama berkembang ke alarm, FAT, Reporting, SCL, fault record, dan analisis gangguan.</p>
         </div>
         <div class="product-tour-grid feature-evidence">
           <figure class="screenshot-card"><a class="screenshot-link" href="assets/screenshots/arsas-alarm-annunciator-v1.6.40.webp" target="_blank" rel="noopener"><img src="assets/screenshots/arsas-alarm-annunciator-v1.6.40.webp" srcset="assets/screenshots/responsive/arsas-alarm-annunciator-v1.6.40-480.webp 480w, assets/screenshots/responsive/arsas-alarm-annunciator-v1.6.40-768.webp 768w, assets/screenshots/responsive/arsas-alarm-annunciator-v1.6.40-960.webp 960w, assets/screenshots/responsive/arsas-alarm-annunciator-v1.6.40-1280.webp 1280w, assets/screenshots/arsas-alarm-annunciator-v1.6.40.webp 1920w" sizes="(max-width: 980px) 94vw, 68vw" width="1920" height="1032" alt="Alarm Annunciator ARSAS untuk beberapa IED IEC 61850" loading="lazy" decoding="async" /></a><figcaption class="screenshot-caption"><h3><span class="screenshot-number">01</span>Alarm Annunciator</h3><p>Lihat alarm dari beberapa IED di satu tempat. State active, unacknowledged dan returned tetap terpisah serta terkait ke device yang menghasilkannya.</p></figcaption></figure>

landing/templates/index.html

@@ -81,11 +81,11 @@ <h1>ARSAS is a free Windows <span class="gradient-text">IEC 61850 tester for rel
         <div class="section-head center">
           <span class="kicker">Start here</span>
           <h2>Two ways in. One clear path to useful IEC 61850 data.</h2>
-          <p>Use a live relay when you can reach the device, or open an SCL file when you want to inspect the configured engineering model offline.</p>
+          <p>Choose based on what you already have: a reachable relay for live discovery, or an IEC 61850 engineering file for offline inspection.</p>
         </div>
         <div class="start-choice-grid" aria-label="Two ways to start ARSAS">
           <article class="start-choice-card highlight">
-            <span class="kicker">I have a live relay or IED</span>
+            <div class="start-choice-topline"><span class="kicker">I have a live relay or IED</span><span class="recommended-badge">Recommended first connection</span></div>
             <h3>Connect by IP address</h3>
             <p>Use the relay IP address on your authorized test, FAT, SAT or commissioning network. ARSAS connects over IEC 61850 MMS, discovers the live model and lets you choose what to monitor.</p>
             <div class="start-flow">IP address → Smart Discovery → DataSet or signals → Live Monitor</div>
@@ -157,7 +157,7 @@ <h2>Start with the job—not the protocol vocabulary.</h2>
         <div class="section-head center">
           <span class="kicker">Real product evidence</span>
           <h2>See the working engineering surfaces.</h2>
-          <p>A curated view of current ARSAS v1.6.40 workflows. Full capability pages carry the deeper engineering detail.</p>
+          <p>Once the first connection makes sense, these real ARSAS surfaces show how the same IED context expands into alarms, FAT, Reporting, SCL, fault records and disturbance analysis.</p>
         </div>
         <div class="product-tour-grid feature-evidence">
           <figure class="screenshot-card"><a class="screenshot-link" href="assets/screenshots/arsas-alarm-annunciator-v1.6.40.webp" target="_blank" rel="noopener"><img src="assets/screenshots/arsas-alarm-annunciator-v1.6.40.webp" srcset="assets/screenshots/responsive/arsas-alarm-annunciator-v1.6.40-480.webp 480w, assets/screenshots/responsive/arsas-alarm-annunciator-v1.6.40-768.webp 768w, assets/screenshots/responsive/arsas-alarm-annunciator-v1.6.40-960.webp 960w, assets/screenshots/responsive/arsas-alarm-annunciator-v1.6.40-1280.webp 1280w, assets/screenshots/arsas-alarm-annunciator-v1.6.40.webp 1920w" sizes="(max-width: 980px) 94vw, 68vw" width="1920" height="1032" alt="ARSAS Alarm Annunciator for multiple IEC 61850 IEDs" loading="lazy" decoding="async" /></a><figcaption class="screenshot-caption"><h3><span class="screenshot-number">01</span>Alarm Annunciator</h3><p>See alarms from multiple IEDs in one place. Active, unacknowledged and returned states stay separate and tied to the device that produced them.</p></figcaption></figure>

scripts/validate-product-build.py

@@ -189,9 +189,9 @@ def main() -> int:
         for value in premium_contract:
             if value not in home_text: errors.append(f"{home}: missing premium homepage contract value {value}")
         onboarding_contract = (
-            ("I have a live relay or IED", "I have an engineering file", "Substation Configuration Language", "ICD", "CID", "IID", "SCD", "Open the complete Quick Start")
+            ("I have a live relay or IED", "Recommended first connection", "I have an engineering file", "Substation Configuration Language", "ICD", "CID", "IID", "SCD", "Open the complete Quick Start")
             if home == "index.html" else
-            ("Saya punya relay atau IED live", "Saya punya file engineering", "Substation Configuration Language", "ICD", "CID", "IID", "SCD", "Buka Quick Start lengkap")
+            ("Saya punya relay atau IED live", "Disarankan untuk koneksi pertama", "Saya punya file engineering", "Substation Configuration Language", "ICD", "CID", "IID", "SCD", "Buka Quick Start lengkap")
         )
         for value in onboarding_contract:
             if value not in home_text: errors.append(f"{home}: missing guided-onboarding contract value {value}")

scripts/validate-product-source.py

@@ -234,9 +234,9 @@ def main() -> int:
                 if value not in rendered:
                     errors.append(f"{label}: missing premium homepage contract value {value}")
             onboarding_contract = (
-                ("I have a live relay or IED", "I have an engineering file", "Substation Configuration Language", "ICD", "CID", "IID", "SCD", "Open the complete Quick Start")
+                ("I have a live relay or IED", "Recommended first connection", "I have an engineering file", "Substation Configuration Language", "ICD", "CID", "IID", "SCD", "Open the complete Quick Start")
                 if path == "" else
-                ("Saya punya relay atau IED live", "Saya punya file engineering", "Substation Configuration Language", "ICD", "CID", "IID", "SCD", "Buka Quick Start lengkap")
+                ("Saya punya relay atau IED live", "Disarankan untuk koneksi pertama", "Saya punya file engineering", "Substation Configuration Language", "ICD", "CID", "IID", "SCD", "Buka Quick Start lengkap")
             )
             for value in onboarding_contract:
                 if value not in rendered: