/* ============================================= */
/* dev-style.css - Central stylesheet for iCanText */
/* ============================================= */

/* ==================== */
/* 1. VARIABLES & THEME */
/* ==================== */
:root {
  --primary-color: #2c3e50;
  --success-color: #27ae60;
  --danger-color: #e74c3c;
  --light-gray-color: #ecf0f1;
  --medium-gray-color: #bdc3c7;
  --dark-gray-color: #7f8c8d;
  --text-color: #34495e;
  --background-color: #f8f9fa;
  --container-bg-color: #ffffff;
  --border-radius: 8px;
  --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  --code-bg-color: #2d2d2d;
  --code-text-color: #f1f1f1;
  --highlight-color: #e74c3c;
  --warning-bg: #fffbe6;
  --warning-border: #f39c12;
}

/* ======================== */
/* 2. GLOBAL STYLES & RESET */
/* ======================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background-color: var(--background-color);
  color: var(--text-color);
  line-height: 1.7;
}

a, a:visited { color: var(--primary-color); text-decoration: none; font-weight: bold; transition: opacity 0.2s ease; }
a:hover, a:focus { text-decoration: underline; opacity: 0.8; }

h1, h2, h3, h4 { color: var(--primary-color); margin: 0; }
h1 { font-size: 2.2rem; line-height: 1.2; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.3rem; margin-top: 2rem; margin-bottom: 1rem; }
h4 { font-size: 1.1rem; margin-bottom: 0.5rem; color: var(--text-color); }

p { margin-bottom: 1rem; color: #555; }
ul, ol { list-style-position: inside; padding-left: 1.5rem; margin-bottom: 1rem; color: #555; }
li { margin-bottom: 0.5rem; }
strong { color: var(--text-color); }

/* ============================================= */
/* 3. LAYOUT CONTAINERS                          */
/* ============================================= */
.app-container {
  max-width: 900px;
  margin: 2rem auto;
  padding: 2rem;
  background-color: var(--container-bg-color);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}

.main-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1rem;
}

section { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--light-gray-color); }
section:first-of-type { margin-top: 2.5rem; padding-top: 0; border-top: none; }

/* ============================================= */
/* 4. HEADER & FOOTER                            */
/* ============================================= */
.page-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  margin-bottom: 3rem;
}

.page-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 0;
}

.page-header-nav {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.page-header-nav a { font-size: 0.95rem; }

.page-footer {
  text-align: center;
  padding: 3rem 0;
  border-top: 1px solid var(--light-gray-color);
  color: var(--dark-gray-color);
  font-size: 0.9rem;
  margin-top: 3rem;
}

.page-footer-text {
  text-align: center;
  margin-top: 2rem;
  color: var(--dark-gray-color);
  font-size: 0.9rem;
}

.page-footer-text a { font-weight: bold; }

/* --- SVG Logos --- */
.app-logo {
  display: block;
  width: 133px;
  height: 32px;
  background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27%232c3e50%27 viewBox=%270 0 132.82 29.1%27%3e%3cpath d=%27M57.75 0C53.9 0 50.8 2.83 50.8 6.35v16.4c0 3.52 3.1 6.35 6.95 6.35h52.43l12.2-12.2a.54.54 0 0 0 0-.76l-.58-.58a.55.55 0 0 0-.8 0l-2.77 2.8a7.36 7.36 0 0 1-10.46 0l.62-.62.4-.4a5.9 5.9 0 0 0 8.42 0l2.8-2.8a1.97 1.97 0 0 1 2.78 0l.58.58a1.97 1.97 0 0 1 0 2.8L112.18 29.1h.8l10.8-10.77a2.55 2.55 0 0 0 0-3.6l-.6-.6a2.52 2.52 0 0 0-3.56 0l-2.8 2.81a5.36 5.36 0 0 1-7.62 0l-.66-.62a5.36 5.36 0 0 1 0-7.61l8.7-8.71zm63.54 0-10.7 10.71a2.55 2.55 0 0 0 0 3.61l.61.62a2.55 2.55 0 0 0 3.6 0l2.78-2.8a5.4 5.4 0 0 1 7.65 0l.58.58a5.4 5.4 0 0 1 0 7.61l-8.78 8.77h8.84c3.85 0 6.95-2.83 6.95-6.35V6.35c0-3.52-3.1-6.35-6.95-6.35h-1.77l-12.13 12.1c-.11.1-.15.25-.15.4s.04.29.15.4l.62.62c.1.1.25.14.4.14s.29-.03.4-.14l2.8-2.8a7.36 7.36 0 0 1 10.42 0l-.98 1.01a5.94 5.94 0 0 0-8.45 0l-2.77 2.8a1.97 1.97 0 0 1-2.8 0l-.63-.65a1.97 1.97 0 0 1 0-2.77L122.1 0zM52.77 5.68h11.65v2.4h-4.45V22.5h-2.75V8.09h-4.45zm46.14.7v3.56h2.57v1.85H98.9v7.09c0 .95.46 1.42 1.38 1.42h.92v2.19h-1.35a3.53 3.53 0 0 1-2.57-.93 3.49 3.49 0 0 1-.92-2.54v-7.23h-1.81V9.94h1.8v-2.6zm-27.16 3.4c1.52 0 2.73.46 3.63 1.4.92.91 1.38 2.3 1.38 4.13v1.62h-7.5v.47c0 1.1.22 1.87.68 2.33.47.46 1.14.7 2 .7.7 0 1.24-.17 1.64-.48.4-.34.6-.77.61-1.31v-.07h2.48v.12c0 1.19-.44 2.14-1.31 2.87a5.37 5.37 0 0 1-3.54 1.07c-1.56 0-2.8-.45-3.73-1.35-.92-.9-1.38-2.3-1.38-4.2V15.3c0-1.85.45-3.24 1.35-4.16a4.98 4.98 0 0 1 3.69-1.38zm9.08.16h2.71l2.33 3.92 2.17-3.92h2.7l-3.65 5.99 3.87 6.56h-2.68l-2.57-4.3-2.4 4.3h-2.69l3.83-6.47zM71.75 12c-.78 0-1.39.23-1.83.69s-.67 1.22-.67 2.3v.14h4.94v-.38c0-.96-.2-1.66-.64-2.09-.4-.44-1.01-.66-1.8-.66zm-58.3 10.67c-1.87 0-3.34-.52-4.4-1.57-1.05-1.06-1.57-2.7-1.57-4.94v-4.19c0-2.23.52-3.87 1.57-4.92 1.06-1.06 2.54-1.6 4.42-1.6 1.18 0 2.2.22 3.07.65a4.72 4.72 0 0 1 2.02 1.83 5 5 0 0 1 .74 2.74v.09h-2.26v-.1c0-.98-.32-1.75-.95-2.32a3.7 3.7 0 0 0-2.62-.88c-1.25 0-2.18.36-2.8 1.09-.62.71-.93 1.9-.93 3.54v4.11c0 2.96 1.25 4.45 3.76 4.45a3.7 3.7 0 0 0 2.59-.86c.63-.57.95-1.31.95-2.23v-.12h2.21v.12c0 1.53-.5 2.77-1.52 3.7s-2.44 1.4-4.28 1.4zm14.57-.05a4.4 4.4 0 0 1-3.02-.95 3.59 3.59 0 0 1-1.07-2.78c0-1.1.38-1.98 1.12-2.61s1.77-.96 3.09-.96h3.11v-1.28c0-1.65-.84-2.47-2.52-2.47a2.8 2.8 0 0 0-1.78.52c-.43.35-.64.83-.64 1.43v.07h-2.02v-.12c0-1.1.4-1.97 1.19-2.62a5 5 0 0 1 3.23-.97c1.5 0 2.66.36 3.45 1.07.8.71 1.21 1.77 1.21 3.16v8.37H31.3v-1.24c-.4.48-.85.83-1.38 1.05-.5.22-1.14.33-1.9.33zm-2-3.75c0 1.38.8 2.06 2.4 2.06 1 0 1.72-.23 2.17-.68s.66-1.15.66-2.05v-1.38h-2.78c-1.63 0-2.44.68-2.44 2.05zm12.77 3.6v-12.4h2.04v1.38a3.43 3.43 0 0 1 1.38-1.14 4.3 4.3 0 0 1 1.86-.4c1.31 0 2.32.39 3.02 1.18a4.64 4.64 0 0 1 1.07 3.26v8.15h-2.12v-7.87c0-.93-.23-1.64-.69-2.11a2.37 2.37 0 0 0-1.85-.74 2.5 2.5 0 0 0-1.9.76 2.9 2.9 0 0 0-.72 2.1v7.86zM.01 10.06v2.12h2.11v-2.12zM0 13.75v8.74h2.12v-8.73z%27 paint-order=%27fill markers stroke%27/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.app-logo-lg {
  width: 160px;
  height: 40px;
}

.app-logo-sm {
  height: 45px;
  width: auto;
}

.footer-logo-link {
  display: block;
  width: 140px;
  height: 47px;
  margin: 2rem auto 0;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%237f8c8d' viewBox='0 0 172.2 58.4'%3e%3cpath d='M0 51V8.7h8.4v2.2C9.2 10 10 9.4 11 9c1-.4 2-.6 3.2-.6 2.7 0 5 1 6.7 3 1.7 1.9 2.6 4.8 2.6 8.7v5.4c0 3.8-.9 6.7-2.6 8.7s-4 3-6.6 3c-2.3 0-4.3-.7-5.8-2v16zm8.5-25.8c0 1.6.3 2.7 1 3.4.5.6 1.4 1 2.4 1 2 0 3.1-1.5 3.1-4.4v-5c0-1.7-.3-2.8-1-3.4a3.1 3.1 0 0 0-2.2-.9c-.9 0-1.6.3-2.3 1s-1 1.7-1 3.2zm20 11.6V8.6H37V11c.6-1 1.4-1.9 2.5-2.4 1-.5 2.3-.7 3.6-.7h1.3a5.6 5.6 0 0 1 1.1.2v8c-.7-.4-1.4-.5-2-.6a9.1 9.1 0 0 0-1.6-.2c-1.4 0-2.6.5-3.5 1.3a6 6 0 0 0-1.2 4v16.2zm21.1 0V8.6h8.5v28.2zm-.1-31.1V0h8.6v5.7zm22.1 31-9.8-28h9l4.4 14.7 4.1-14.8h9l-9.8 28.2zm28.5.4c-2.8 0-5-.8-6.6-2.5s-2.3-3.9-2.3-6.6c0-2.6.8-4.6 2.5-6 1.7-1.5 4.1-2.2 7.2-2.2h5v-1.6c0-1.2-.3-2-.9-2.6s-1.3-.8-2.5-.8a3 3 0 0 0-2 .6c-.6.5-.8 1.1-.8 1.9v.1h-7.9v-.1c0-2.8 1-5 3-6.6s4.6-2.4 7.9-2.4c3.7 0 6.6.9 8.6 2.6 2 1.8 3 4.4 3 7.8v18H106v-2c-1 .8-1.9 1.4-2.7 1.8s-1.8.6-3.2.6zm-.7-9.4c0 1.7 1 2.5 2.8 2.5 2.4 0 3.6-1.3 3.6-3.7v-1h-3.5c-2 0-3 .8-3 2.2zm31.6 9.4a12 12 0 0 1-8.6-3c-2-2-3-5-3-9v-4.9c0-4 1-7 3-9s5-3 8.6-3 6.5 1 8.5 2.9c2 1.8 3 4.4 3 7.7v.7h-8.2V19c0-1-.3-1.7-.8-2.3s-1.4-.9-2.4-.9c-1.2 0-2 .4-2.6 1.3-.5.8-.7 1.8-.7 3v5c0 2.9 1.1 4.3 3.3 4.3 2.1 0 3.2-1 3.2-3v-.3h8.2v.5c0 3.2-1 5.8-3 7.6S134.7 37 131 37zm16.6 14v-7.7h2.6c.9 0 1.5-.1 2-.4.3-.3.7-.9.9-1.8l1.9-5.5-9.4-27h9l4.4 14.6 4.4-14.7h8.8l-12.6 36.2a9 9 0 0 1-3.4 4.7c-1.4 1-3.4 1.5-5.9 1.5zm-119 7.2v-15H34q2 0 3.2 1.1 1.2 1 1.2 3 0 1-.7 2-.6.8-1.6 1.2 1.2.4 1.9 1.3.6 1 .6 2.3 0 1.9-1.2 3-1.2 1-3.3 1zm1.5-1.5h3.8q1.5 0 2.3-.7.8-.7.8-2 0-1.4-.8-2-.8-.7-2.3-.7h-3.8zm0-6.8h3.7q1.4 0 2.2-.7.8-.6.8-1.9 0-1.3-.8-2-.8-.6-2.2-.6h-3.7zM45 58.3V52l-4.5-8.6h1.7l3.5 7.1 3.6-7.1H51L46.5 52v6.3zm13.7 0v-15h5q2.4 0 3.8 1.5Q69 46 69 49v3.5q0 3-1.4 4.3-1.4 1.4-3.7 1.4zm1.6-1.5h3.5q3.5 0 3.5-4.1v-3.5q0-2.3-.9-3.3t-2.6-1h-3.5zm12.3 1.5v-15h9v1.5h-7.4V50h6.4v1.4h-6.4v5.4h7.4v1.5zm16.3 0q-2.2 0-3.5-1-1.2-1-1.4-3.2v-.2h1.5v.2q.4 3 3.6 3 1.6 0 2.5-.8.9-.7.9-2t-.7-2q-.7-.5-2.1-.8l-1.7-.3q-1.8-.3-2.8-1.2-1-1-1-2.6 0-2 1.4-3 1.3-1.2 3.5-1.2 2 0 3.2 1 1.2 1 1.5 3.1v.5h-1.6v-.5q-.2-2.7-3.2-2.7-1.5 0-2.3.7-.9.7-.9 2 0 1 .7 1.7.6.6 2 .8l1.7.3q1.9.3 2.8 1.3 1 1 1 2.7 0 2-1.3 3.2-1.4 1-3.8 1zm8.6 0v-15h1.6v15zm10.7.1q-2.4 0-3.8-1.3-1.4-1.4-1.4-4.4V49q0-3 1.4-4.3 1.4-1.4 3.8-1.4 1.5 0 2.6.6 1.2.5 1.8 1.6.6 1 .6 2.3h-1.6q0-1.4-.9-2.2-1-.9-2.5-.9-1.8 0-2.7 1-1 1-1 3.4v3.8q0 4.2 3.7 4.2 1.7 0 2.6-1 .9-.9.9-2.9V52H108v-1.4h5.2v2.2q0 3-1.4 4.3-1.4 1.3-3.7 1.3zm8.8-.1v-15h1.6l7.6 12v-12h1.6v15h-1.6l-7.6-12v12z' paint-order='fill markers stroke'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.6;
  transition: opacity 0.2s ease-in-out;
}

.footer-logo-link:hover, .footer-logo-link:focus { opacity: 1; }

/* ============================================= */
/* 5. ARTICLE STYLES                              */
/* ============================================= */
.article-header {
  text-align: left;
  border-bottom: 1px solid var(--light-gray-color);
  padding-bottom: 3rem;
  padding-top: 2rem;
}

.article-header h1 { font-size: 2.8rem; margin-bottom: 1.5rem; }
.article-header .intro-paragraph { font-size: 1.2rem; color: var(--dark-gray-color); max-width: 75ch; }

.article-body { padding-top: 3rem; padding-bottom: 3rem; }

.article-body h2 {
  font-size: 1.8rem;
  margin-top: 2.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--light-gray-color);
}
.article-body h2:first-of-type { margin-top: 0; }

.article-body h3 { font-size: 1.4rem; color: var(--text-color); margin-top: 2rem; margin-bottom: 1rem; }
.article-body h4 { font-size: 1.2rem; font-weight: bold; margin-top: 1.5rem; margin-bottom: 0.8rem; }

.article-body p, .article-body ul, .article-body ol { margin-bottom: 1.2rem; max-width: 75ch; }
.article-body ul, .article-body ol { list-style-position: outside; padding-left: 1.5rem; }
.article-body li { margin-bottom: 0.5rem; padding-left: 0.5rem; }
.article-body blockquote {
  border-left: 4px solid var(--primary-color);
  padding-left: 1rem;
  margin: 1.5rem 0;
  color: var(--dark-gray-color);
  font-style: italic;
}
.article-body code {
  font-family: "SF Mono", "Courier New", monospace;
  background-color: var(--light-gray-color);
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 0.9em;
}

/* ============================================= */
/* 6. INDEX PAGE                                  */
/* ============================================= */
.page-subtitle { font-size: 1.2rem; color: var(--dark-gray-color); font-weight: 400; max-width: 65ch; }

.coming-soon-badge {
  display: inline-block;
  background-color: var(--light-gray-color);
  color: var(--dark-gray-color);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: bold;
  margin-bottom: 2.5rem;
}

.cta-button {
  display: inline-block;
  background-color: var(--primary-color);
  color: #ffffff;
  padding: 1rem 2.5rem;
  border-radius: var(--border-radius);
  font-size: 1.1rem;
  font-weight: bold;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.cta-button:hover, .cta-button:focus {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(44, 62, 80, 0.2);
  text-decoration: none;
  opacity: 1;
}
.cta-button:visited { color: #ffffff; }

.footer-text { margin-top: 3rem; font-size: 0.9rem; color: var(--dark-gray-color); }

#countdown-container {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin: 2.5rem 0 3rem 0;
  text-align: center;
}

.time-unit {
  background-color: var(--light-gray-color);
  padding: 1rem 1.5rem;
  border-radius: var(--border-radius);
  min-width: 90px;
}

.time-unit span {
  display: block;
  font-size: 2.5rem;
  font-weight: bold;
  color: var(--primary-color);
  line-height: 1.1;
}

.time-unit label {
  font-size: 0.8rem;
  text-transform: uppercase;
  color: var(--dark-gray-color);
  letter-spacing: 1px;
}

/* ============================================= */
/* 7. SECURITY PAGES                            */
/* ============================================= */
.section-title { font-size: 1.8rem; margin-bottom: 0.5rem; }
.section-subtitle { font-size: 1.1rem; color: var(--dark-gray-color); font-weight: 400; max-width: 70ch; margin: 0 auto 2.5rem auto; }

.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2.5rem; margin-top: 2rem; }
.feature-item { display: flex; flex-direction: column; text-align: left; }
.feature-item p { font-size: 0.95rem; color: #555; }

.feature-icon {
  width: 32px;
  height: 32px;
  background-color: var(--primary-color);
  margin-bottom: 1rem;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Security SVG icons */
.icon-sovereign-id { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path><path d="M12 7V13"></path><path d="M12 17.01V17.01"></path></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path><path d="M12 7V13"></path><path d="M12 17.01V17.01"></path></svg>'); }
.icon-secure-storage { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>'); }
.icon-ephemeral-id { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3H6a2 2 0 0 0-4 4v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V13"></path><path d="M14 2.5a2.5 2.5 0 0 1 5 0V5l-5 5V7.5z"></path><path d="M8 18h1.5a1.5 1.5 0 0 0 0-3H8v-2h2a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2h-2v-2z"></path></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3H6a2 2 0 0 0-4 4v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V13"></path><path d="M14 2.5a2.5 2.5 0 0 1 5 0V5l-5 5V7.5z"></path><path d="M8 18h1.5a1.5 1.5 0 0 0 0-3H8v-2h2a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2h-2v-2z"></path></svg>'); }
.icon-web-of-trust { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>'); }
.icon-group-crypto { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>'); }
.icon-integrity { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>'); }
.icon-no-server { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22.61 16.95A5 5 0 0 0 18 10h-1.26a8 8 0 0 0-7.05-6M5 5a8 8 0 0 0 4 15h9a5 5 0 0 0 1.7-.3"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22.61 16.95A5 5 0 0 0 18 10h-1.26a8 8 0 0 0-7.05-6M5 5a8 8 0 0 0 4 15h9a5 5 0 0 0 1.7-.3"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>'); }
.icon-onion-routing { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.24 12.24a2.99 2.99 0 0 0-4.48 0 2.99 2.99 0 0 0 0 4.48 2.99 2.99 0 0 0 4.48 0 2.99 2.99 0 0 0 0-4.48z"></path><path d="M16.71 7.76a7.01 7.01 0 0 0-9.92 0 7.01 7.01 0 0 0 0 9.92 7.01 7.01 0 0 0 9.92 0 7.01 7.01 0 0 0 0-9.92z"></path><path d="M20 4a11 11 0 0 0-16 0 11 11 0 0 0 0 16 11 11 0 0 0 16 0 11 11 0 0 0 0-16z"></path></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.24 12.24a2.99 2.99 0 0 0-4.48 0 2.99 2.99 0 0 0 0 4.48 2.99 2.99 0 0 0 4.48 0 2.99 2.99 0 0 0 0-4.48z"></path><path d="M16.71 7.76a7.01 7.01 0 0 0-9.92 0 7.01 7.01 0 0 0 0 9.92 7.01 7.01 0 0 0 9.92 0 7.01 7.01 0 0 0 0-9.92z"></path><path d="M20 4a11 11 0 0 0-16 0 11 11 0 0 0 0 16 11 11 0 0 0 16 0 11 11 0 0 0 0-16z"></path></svg>'); }
.icon-flooding { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4.93 4.93a10 10 0 0 1 14.14 0"></path><path d="M7.76 7.76a6 6 0 0 1 8.48 0"></path><line x1="12" y1="18" x2="12.01" y2="18"></line></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4.93 4.93a10 10 0 0 1 14.14 0"></path><path d="M7.76 7.76a6 6 0 0 1 8.48 0"></path><line x1="12" y1="18" x2="12.01" y2="18"></line></svg>'); }
.icon-self-healing { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v1.5a2.5 2.5 0 0 0 2.5 2.5h1.5"></path><path d="M21 3v1.5a2.5 2.5 0 0 1-2.5 2.5h-1.5"></path><path d="M3 21v-1.5a2.5 2.5 0 0 1 2.5-2.5h1.5"></path><path d="M21 21v-1.5a2.5 2.5 0 0 0-2.5-2.5h-1.5"></path><path d="M7 12a5 5 0 0 0 10 0 5 5 0 0 0-10 0z"></path></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v1.5a2.5 2.5 0 0 0 2.5 2.5h1.5"></path><path d="M21 3v1.5a2.5 2.5 0 0 1-2.5 2.5h-1.5"></path><path d="M3 21v-1.5a2.5 2.5 0 0 1 2.5-2.5h1.5"></path><path d="M21 21v-1.5a2.5 2.5 0 0 0-2.5-2.5h-1.5"></path><path d="M7 12a5 5 0 0 0 10 0 5 5 0 0 0-10 0z"></path></svg>'); }
.icon-data-persistence { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 17h-1a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2z"></path><path d="M7 3h-1a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z"></path><path d="M7 17h-1a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2z"></path><path d="M17 3h-1a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z"></path></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 17h-1a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2z"></path><path d="M7 3h-1a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z"></path><path d="M7 17h-1a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2z"></path><path d="M17 3h-1a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z"></path></svg>'); }
.icon-no-install { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>'); }
.icon-volatile { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>'); }

/* Error page icons */
.icon-blocked-webrtc { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16.88 16.88a1.5 1.5 0 0 1-2.12 0l-1.77-1.77-1.77 1.77a1.5 1.5 0 1 1-2.12-2.12l1.77-1.77-1.77-1.77a1.5 1.5 0 1 1 2.12-2.12l1.77 1.77 1.77-1.77a1.5 1.5 0 1 1 2.12 2.12L14.77 12l1.77 1.77a1.5 1.5 0 0 1 0 2.12z"></path><path d="M10 17.5a7.5 7.5 0 0 0 5.4-2.2M18 10a7.5 7.5 0 0 0-2.2-5.4"></path><path d="M4 4l16 16"></path></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16.88 16.88a1.5 1.5 0 0 1-2.12 0l-1.77-1.77-1.77 1.77a1.5 1.5 0 1 1-2.12-2.12l1.77-1.77-1.77-1.77a1.5 1.5 0 1 1 2.12-2.12l1.77 1.77 1.77-1.77a1.5 1.5 0 1 1 2.12 2.12L14.77 12l1.77 1.77a1.5 1.5 0 0 1 0 2.12z"></path><path d="M10 17.5a7.5 7.5 0 0 0 5.4-2.2M18 10a7.5 7.5 0 0 0-2.2-5.4"></path><path d="M4 4l16 16"></path></svg>'); }
.icon-local-network { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 13.36V21h6v-5.65M16 21h6v-7.65M12 3v13M9 13H5M19 13h-4M9 9l3-3 3 3"></path></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 13.36V21h6v-5.65M16 21h6v-7.65M12 3v13M9 13H5M19 13h-4M9 9l3-3 3 3"></path></svg>'); }
.icon-intermediary { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8V5"></path><path d="M12 19v-3"></path><path d="M18.36 12h3"></path><path d="M2.64 12h3"></path><path d="M16.24 16.24l2.12 2.12"></path><path d="M3.51 5.64l2.13 2.12"></path><path d="M18.36 5.64l-2.12 2.12"></path><path d="M5.64 18.36l-2.13-2.12"></path><circle cx="12" cy="12" r="2"></circle></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8V5"></path><path d="M12 19v-3"></path><path d="M18.36 12h3"></path><path d="M2.64 12h3"></path><path d="M16.24 16.24l2.12 2.12"></path><path d="M3.51 5.64l2.13 2.12"></path><path d="M18.36 5.64l-2.12 2.12"></path><path d="M5.64 18.36l-2.13-2.12"></path><circle cx="12" cy="12" r="2"></circle></svg>'); }

/* Threat Table */
.threat-table { width: 100%; border-collapse: collapse; margin-top: 2rem; border: 1px solid var(--medium-gray-color); border-radius: var(--border-radius); overflow: hidden; }
.threat-table th, .threat-table td { padding: 1rem; text-align: left; border-bottom: 1px solid var(--light-gray-color); }
.threat-table th { background-color: var(--light-gray-color); color: var(--primary-color); font-size: 1rem; }
.threat-table td { color: var(--dark-gray-color); vertical-align: top; }
.threat-table tbody tr:last-child td { border-bottom: none; }
.threat-table td:first-child { font-weight: bold; color: var(--text-color); min-width: 180px; }

/* Comparison Table */
.comparison-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 2rem; border: 1px solid var(--medium-gray-color); border-radius: var(--border-radius); }
.detailed-comparison-table { width: 100%; border-collapse: collapse; min-width: 800px; }
.detailed-comparison-table th, .detailed-comparison-table td { padding: 0.8rem 1rem; text-align: center; border-bottom: 1px solid var(--light-gray-color); vertical-align: middle; }
.detailed-comparison-table th { background-color: var(--light-gray-color); color: var(--primary-color); font-size: 0.9rem; font-weight: bold; }
.detailed-comparison-table td { color: var(--dark-gray-color); font-size: 0.95rem; }
.detailed-comparison-table tbody tr:last-child td { border-bottom: none; }
.detailed-comparison-table td:first-child, .detailed-comparison-table th:first-child { text-align: left; font-weight: bold; color: var(--text-color); }
.detailed-comparison-table .col-icantext { background-color: #eaf4ff; }
.detailed-comparison-table .col-icantext td { font-weight: bold; }
.detailed-comparison-table .icon-check, .detailed-comparison-table .icon-cross, .detailed-comparison-table .icon-partial { font-weight: bold; font-size: 1.2rem; line-height: 1; }
.detailed-comparison-table .icon-check { color: var(--success-color); }
.detailed-comparison-table .icon-cross { color: var(--highlight-color); }
.detailed-comparison-table .icon-partial { color: var(--warning-border); }

/* Article table */
.table-container { overflow-x: auto; margin-bottom: 1.5rem; }
.article-body table { width: 100%; border-collapse: collapse; font-size: 0.95em; }
.article-body th, .article-body td { border: 1px solid var(--light-gray-color); padding: 0.8rem; text-align: left; vertical-align: top; }
.article-body th { background-color: var(--background-color); color: var(--primary-color); font-weight: bold; }
.article-body tbody tr:nth-child(even) { background-color: #fcfcfc; }
.article-body td:first-child { font-weight: bold; color: var(--text-color); }

/* Final quote section */
.final-quote-section { margin-top: 4rem; padding: 4rem 2rem; background-color: var(--primary-color); color: white; border-radius: var(--border-radius); text-align: center; }
.final-quote-section h2 { color: white; font-size: 2rem; line-height: 1.4; max-width: 25ch; margin: 0 auto; }

/* Diagram */
.diagram-container { margin: 3rem 0; text-align: center; background-color: var(--light-gray-color); padding: 2rem 1rem; border-radius: var(--border-radius); }
.diagram-svg { max-width: 100%; height: auto; width: 600px; }

/* ============================================= */
/* 8. ERROR PAGES                                 */
/* ============================================= */
.solution-box { margin-top: 2.5rem; padding: 2rem; border: 1px solid var(--light-gray-color); border-radius: var(--border-radius); background-color: white; text-align: center; }
.solution-box p { color: var(--dark-gray-color); margin-bottom: 1.5rem; }

.reload-button { display: inline-block; padding: 0.8rem 1.8rem; background-color: var(--primary-color); color: white; font-weight: bold; border-radius: var(--border-radius); text-decoration: none; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: all 0.2s ease; }
.reload-button:hover { text-decoration: none; opacity: 1; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
.reload-button:visited { color: white; }

/* ============================================= */
/* 9. LEGAL PAGE                                  */
/* ============================================= */
.legal-content { margin-top: 2rem; }
.legal-content h1 { font-size: 1.8rem; text-align: left; margin-top: 0; }
.legal-content h2 { font-size: 1.5rem; border-bottom: 2px solid var(--light-gray-color); padding-bottom: 0.3em; margin-top: 1.5em; margin-bottom: 0.8em; }
.legal-content h3 { font-size: 1.2rem; margin-top: 1.5em; margin-bottom: 0.8em; }
.legal-content p, .legal-content ul, .legal-content ol { margin-bottom: 1em; }
.legal-content ul, .legal-content ol { padding-left: 2em; }

.toc { background-color: #f9f9f9; border: 1px solid var(--light-gray-color); border-radius: var(--border-radius); padding: 1rem 1.5rem; margin-bottom: 2rem; }
.toc h3 { margin-top: 0; margin-bottom: 0.8rem; border-bottom: none; }
.toc ul { list-style: none; padding-left: 0; }
.toc li a { font-weight: bold; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }

/* ============================================= */
/* 10. BUSINESS CONFIG & TECHNICAL DOCS           */
/* ============================================= */
.config-section { margin-top: 3rem; }
.config-card { background: var(--container-bg-color); padding: 1.5rem; border-radius: var(--border-radius); box-shadow: var(--box-shadow); margin-bottom: 1.5rem; border-left: 5px solid var(--primary-color); }
.config-card h3 { font-family: monospace; font-size: 1.2rem; margin-bottom: 0.5rem; margin-top: 0; }
.config-meta { font-size: 0.85rem; color: var(--dark-gray-color); margin-bottom: 1rem; }
.config-meta span { font-weight: bold; color: var(--text-color); }

.code-block { background-color: var(--code-bg-color); color: var(--code-text-color); padding: 1rem; border-radius: 4px; overflow-x: auto; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 0.9em; line-height: 1.5; margin-top: 1rem; }
.code-block-header { margin-bottom: 0; font-size: 1rem; color: var(--dark-gray-color); font-family: sans-serif; border-bottom: 1px solid #444; padding-bottom: 0.5rem; margin-bottom: 1rem; }
.code-block pre { white-space: pre-wrap; word-wrap: break-word; margin: 0; }
.code-block .comment { color: #8292a2; font-style: italic; }
.code-block .keyword { color: #c678dd; }
.code-block .string { color: #98c379; }
.code-block .variable { color: #e06c75; }
.code-block .function { color: #61afef; }
.code-block .number { color: #d19a66; }
.code-block .directive { color: #e5c07b; }

.url-display { background-color: var(--light-gray-color); padding: 1rem; border-radius: var(--border-radius); font-family: monospace; word-break: break-all; text-align: center; margin-top: 1rem; }
.notice { padding: 1.5rem; background-color: var(--warning-bg); border-left: 5px solid var(--warning-border); border-radius: var(--border-radius); margin: 2rem 0; }

.step { margin-bottom: 2.5rem; }
.step { margin-bottom: 2.5rem; }

/* ============================================= */
/* 11. DEV PORTAL CARDS                          */
/* ============================================= */
.dev-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  margin: 2rem 0 5rem;
}

.dev-card {
  background: var(--container-bg-color);
  padding: 2.5rem;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid transparent;
}
.dev-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-color: var(--medium-gray-color);
}

.card-icon {
  width: 48px;
  height: 48px;
  background-color: var(--primary-color);
  margin-bottom: 1.5rem;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

.icon-bridge { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><path d="m2 11 10-9 10 9"/><path d="m9 21 3-3 3 3"/></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><path d="m2 11 10-9 10 9"/><path d="m9 21 3-3 3 3"/></svg>'); }
.icon-auth { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>'); }
.icon-endpoint { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 17l6-6-6-6"/><path d="M12 19h8"/></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 17l6-6-6-6"/><path d="M12 19h8"/></svg>'); }
.icon-security { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>'); }
.icon-config { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="2" y1="14" x2="6" y2="14"/><line x1="10" y1="8" x2="14" y2="8"/><line x1="18" y1="16" x2="22" y2="16"/></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="2" y1="14" x2="6" y2="14"/><line x1="10" y1="8" x2="14" y2="8"/><line x1="18" y1="16" x2="22" y2="16"/></svg>'); }

.dev-card h2 { font-size: 1.6rem; color: var(--primary-color); margin-bottom: 1rem; }
.dev-card p { color: #555; margin-bottom: 2rem; flex-grow: 1; }

.hero-subtitle { font-size: 1.3rem; color: var(--dark-gray-color); max-width: 60ch; }

.btn-cta {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  background: var(--primary-color);
  color: #fff;
  border-radius: 4px;
  font-weight: bold;
  text-align: center;
}
.btn-cta:hover { background: var(--text-color); }
.btn-cta:visited { color: #fff; }

@media (max-width: 768px) {
  .dev-grid { grid-template-columns: 1fr; }
}

/* ============================================= */
/* 11. MULTI-LANGUAGE                             */
/* ============================================= */
[class^="lang-"] { display: none; }

body > div[lang] { display: none; }
body > div[lang].visible { display: block; }

.language-section { display: none; }

/* ============================================= */
/* 12. ANIMATIONS                                 */
/* ============================================= */
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================= */
/* 13. RESPONSIVENESS                             */
/* ============================================= */
@media (max-width: 768px) {
  html { font-size: 15px; }
  .main-container { padding: 0 1.5rem; }
  .app-container { margin: 0.5rem; padding: 1rem; }
  .page-header { flex-direction: column; gap: 1rem; }
  .page-header-nav { margin-top: 1rem; }
  .page-header-nav a { margin: 0 1rem; }
  h1 { font-size: 1.8rem; }
  h2.page-subtitle { font-size: 1.1rem; }
  h2.section-title { font-size: 1.5rem; }
  .article-header h1 { font-size: 2.2rem; }
  .article-header .intro-paragraph { font-size: 1.1rem; }
  .article-body h2 { font-size: 1.6rem; }
  .article-body h3 { font-size: 1.3rem; }

  .threat-table { display: block; width: 100%; }
  .threat-table thead { display: none; }
  .threat-table tbody, .threat-table tr, .threat-table td { display: block; width: 100%; }
  .threat-table tr { border-bottom: 2px solid var(--primary-color); margin-bottom: 1.5rem; padding-bottom: 1rem; }
  .threat-table tr:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
  .threat-table td { text-align: left; padding: 0.75rem; border: none; }
  .threat-table td::before { content: attr(data-label); font-weight: bold; display: block; margin-bottom: 0.5rem; color: var(--primary-color); }
}

@media (max-width: 600px) {
  .app-container { padding: 2.5rem 1.5rem; }
  h1 { font-size: 2rem; }
  .page-subtitle { font-size: 1.1rem; }
  .cta-button { width: 100%; }
  #countdown-container { gap: 0.75rem; margin-bottom: 2.5rem; }
  .time-unit { padding: 0.75rem; min-width: 70px; }
  .time-unit span { font-size: 2rem; }
}

@media (min-width: 768px) {
  .legal-content h1 { font-size: 2rem; }
  .legal-content .app-container { margin: 2rem auto; padding: 2.5rem 3rem; }
}