src/ApplicationBundle/Modules/HoneybeeWeb/Resources/views/pages/trust_governance.html.twig line 1

Open in your IDE?
  1. {% include '@Application/inc/central_header.html.twig' %}
  2. {% include '@HoneybeeWeb/inc/_web_design_system.html.twig' %}
  4. {# ─── HONEYBEE — TRUST & GOVERNANCE ──────────────────────────────────────────── #}
  5. <style>
  6. /* ── Design Tokens (shared n-* system) ─────────────────────────────────────── */
  7. :root {
  8.     --n-cream:      #F7F5F0;
  9.     --n-cream-2:    #F0EDE5;
  10.     --n-cream-3:    #E8E3D9;
  11.     --n-white:      #FFFFFF;
  12.     --n-dark:       #1A1D2E;
  13.     --n-dark-2:     #252840;
  14.     --n-navy:       #1E3A6E;
  15.     --n-amber:      #C07D2A;
  16.     --n-amber-lt:   #D4954A;
  17.     --n-amber-dim:  rgba(192,125,42,.10);
  18.     --n-sage:       #3D6B52;
  19.     --n-sage-dim:   rgba(61,107,82,.09);
  20.     --n-slate:      #3D4F72;
  21.     --n-slate-dim:  rgba(61,79,114,.08);
  22.     --n-muted:      #6B6E7F;
  23.     --n-muted-2:    #9395A5;
  24.     --n-border:     rgba(26,29,46,.07);
  25.     --n-border-md:  rgba(26,29,46,.12);
  26.     --n-shadow-xs:  0 1px 4px rgba(26,29,46,.05);
  27.     --n-shadow-sm:  0 2px 12px rgba(26,29,46,.07);
  28.     --n-shadow-md:  0 8px 32px rgba(26,29,46,.09);
  29.     --n-shadow-lg:  0 20px 64px rgba(26,29,46,.10);
  30.     --n-radius-sm:  8px;
  31.     --n-radius:     12px;
  32.     --n-radius-lg:  20px;
  33.     --n-font:       'DM Sans', 'Poppins', system-ui, sans-serif;
  34. }
  35. *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  36. body { background: var(--n-cream); font-family: var(--n-font); color: var(--n-dark); }
  37. a { text-decoration: none; }
  39. /* ── Utilities ─────────────────────────────────────────────────────────────── */
  40. .n-wrap    { max-width: 1160px; margin: 0 auto; padding: 0 28px; }
  41. .n-wrap-sm { max-width: 880px;  margin: 0 auto; padding: 0 28px; }
  42. .n-sec     { padding: 92px 0; }
  43. .n-sec-sm  { padding: 60px 0; }
  44. .n-label   {
  45.     display: inline-flex; align-items: center; gap: 8px;
  46.     font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  47.     color: var(--n-amber); margin-bottom: 16px;
  48. }
  49. .n-label::before { content:''; width: 18px; height: 1.5px; background: currentColor; border-radius: 2px; }
  50. .n-h2      { font-family:'Montserrat',sans-serif; font-size: clamp(24px,3.2vw,38px); font-weight: 800; line-height: 1.14; letter-spacing: -.02em; }
  51. .n-h3      { font-family:'Montserrat',sans-serif; font-size: 18px; font-weight: 700; line-height: 1.3; }
  52. .n-body    { font-size: 16px; line-height: 1.75; color: var(--n-muted); }
  53. .n-body-sm { font-size: 14px; line-height: 1.7;  color: var(--n-muted); }
  54. .n-center  { text-align: center; }
  55. .n-center .n-label { justify-content: center; }
  56. .n-center .n-body  { max-width: 640px; margin: 0 auto; }
  57. .n-mt-4    { margin-top: 16px; }
  58. .n-mt-6    { margin-top: 24px; }
  59. .n-mt-8    { margin-top: 32px; }
  60. .n-mt-12   { margin-top: 48px; }
  61. em.n-em    { font-style: normal; color: var(--n-amber); }
  63. /* ── Buttons ───────────────────────────────────────────────────────────────── */
  64. .n-btn {
  65.     display: inline-flex; align-items: center; gap: 8px;
  66.     padding: 13px 26px; border-radius: var(--n-radius-sm);
  67.     font-size: 14px; font-weight: 600; letter-spacing: .01em;
  68.     border: none; cursor: pointer; text-decoration: none; transition: all .18s;
  69.     white-space: nowrap; font-family: var(--n-font);
  70. }
  71. .n-btn-primary { background: var(--n-dark);  color: #fff; }
  72. .n-btn-primary:hover  { background: var(--n-dark-2); color: #fff; transform: translateY(-1px); box-shadow: var(--n-shadow-md); }
  73. .n-btn-amber   { background: var(--n-amber); color: #fff; }
  74. .n-btn-amber:hover    { background: var(--n-amber-lt); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(192,125,42,.3); }
  75. .n-btn-outline { background: transparent; border: 1.5px solid var(--n-border-md); color: var(--n-dark); }
  76. .n-btn-outline:hover  { border-color: var(--n-dark); color: var(--n-dark); transform: translateY(-1px); }
  77. .n-btn-light   { background: #fff; color: var(--n-dark); }
  78. .n-btn-light:hover    { background: var(--n-cream-2); color: var(--n-dark); }
  79. .n-btn i, .n-btn .fa  { font-size: 15px; }
  81. /* ── Navbar overrides ──────────────────────────────────────────────────────── */
  82. .navbar {
  83.     background: rgba(247,245,240,.96) !important;
  84.     backdrop-filter: blur(16px) saturate(180%);
  85.     border-bottom: 1px solid var(--n-border) !important;
  86.     box-shadow: none !important;
  87. }
  88. .navbar .nav-link        { color: var(--n-dark) !important; font-size: 13.5px; font-weight: 500; opacity: .8; transition: opacity .15s; }
  89. .navbar .nav-link:hover,
  90. .navbar .nav-link.active { opacity: 1; color: var(--n-dark) !important; }
  91. .navbar .login-btn {
  92.     background: var(--n-dark) !important; color: #fff !important;
  93.     border: none !important; border-radius: var(--n-radius-sm) !important;
  94.     padding: 8px 20px !important; font-size: 13px !important; font-weight: 600 !important;
  95. }
  96. .navbar .login-btn:hover { background: var(--n-dark-2) !important; }
  98. /* ── Hero ──────────────────────────────────────────────────────────────────── */
  99. .tg-hero {
  100.     background: var(--n-cream);
  101.     padding: 132px 0 72px;
  102.     position: relative; overflow: hidden;
  103. }
  104. .tg-hero::before {
  105.     content: '';
  106.     position: absolute; top: 0; right: 0; width: 55%; height: 100%;
  107.     background: radial-gradient(ellipse 80% 70% at 80% 30%, rgba(192,125,42,.07) 0%, transparent 65%),
  108.                 radial-gradient(ellipse 50% 60% at 95% 80%, rgba(61,107,82,.06) 0%, transparent 60%);
  109.     pointer-events: none;
  110. }
  111. .tg-hero::after {
  112.     content: '';
  113.     position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  114.     background: linear-gradient(90deg, transparent, var(--n-border-md), transparent);
  115. }
  116. .tg-hero-inner { position: relative; max-width: 820px; }
  117. .tg-hero-tag {
  118.     display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  119.     background: var(--n-amber-dim); border: 1px solid rgba(192,125,42,.2);
  120.     color: var(--n-amber); font-size: 11px; font-weight: 700;
  121.     letter-spacing: .16em; text-transform: uppercase;
  122.     padding: 6px 14px 6px 10px; border-radius: 4px; margin-bottom: 26px;
  123. }
  124. .tg-hero-tag span:first-child { width: 6px; height: 6px; background: var(--n-amber); border-radius: 50%; display: block; flex-shrink: 0; }
  125. .tg-hero-h1 {
  126.     font-family: 'Montserrat', sans-serif;
  127.     font-size: clamp(36px, 5vw, 60px);
  128.     font-weight: 900; line-height: 1.05; letter-spacing: -.025em;
  129.     color: var(--n-dark); margin-bottom: 22px;
  130. }
  131. .tg-hero-h1 em { font-style: normal; color: var(--n-amber); }
  132. .tg-hero-desc { font-size: 17px; line-height: 1.75; color: var(--n-muted); max-width: 660px; }
  134. /* ── Section scaffolding ───────────────────────────────────────────────────── */
  135. .tg-band      { border-top: 1px solid var(--n-border); }
  136. .tg-band-white{ background: var(--n-white); }
  137. .tg-sec-head  { max-width: 680px; margin-bottom: 44px; }
  138. .tg-sec-num   {
  139.     font-family: monospace; font-size: 12px; font-weight: 700; color: var(--n-amber);
  140.     letter-spacing: .14em; text-transform: uppercase; display: block; margin-bottom: 10px;
  141. }
  143. /* ── Entity / generic cards ────────────────────────────────────────────────── */
  144. .tg-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  145. .tg-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
  146. .tg-card {
  147.     background: var(--n-white); border: 1px solid var(--n-border);
  148.     border-radius: var(--n-radius); padding: 28px;
  149.     transition: box-shadow .2s, border-color .2s;
  150. }
  151. .tg-band-white .tg-card { background: var(--n-cream); }
  152. .tg-card:hover { border-color: var(--n-border-md); box-shadow: var(--n-shadow-md); }
  153. .tg-card-flag { font-size: 11px; font-weight: 700; color: var(--n-amber); letter-spacing: .1em; text-transform: uppercase; font-family: monospace; margin-bottom: 8px; }
  154. .tg-card h3   { font-family:'Montserrat',sans-serif; font-size: 16px; font-weight: 700; color: var(--n-dark); margin-bottom: 6px; }
  155. .tg-card .tg-card-uen { font-size: 11px; color: var(--n-muted-2); font-family: monospace; letter-spacing: .04em; margin-bottom: 12px; }
  156. .tg-card p    { font-size: 13.5px; color: var(--n-muted); line-height: 1.7; }
  158. /* ── Feature list (checks) ─────────────────────────────────────────────────── */
  159. .tg-checklist { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; }
  160. .tg-checklist li { font-size: 14px; color: var(--n-dark); display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; }
  161. .tg-checklist li i { color: var(--n-sage); font-size: 13px; margin-top: 3px; flex-shrink: 0; }
  163. /* ── NIS2 callout ──────────────────────────────────────────────────────────── */
  164. .tg-nis2 {
  165.     background: var(--n-dark);
  166.     border-radius: var(--n-radius-lg);
  167.     padding: 44px 48px; position: relative; overflow: hidden;
  168. }
  169. .tg-nis2::before {
  170.     content: '';
  171.     position: absolute; top: -40%; right: -5%; width: 55%; height: 160%;
  172.     background: radial-gradient(ellipse 70% 60% at 70% 50%, rgba(192,125,42,.14) 0%, transparent 65%);
  173.     pointer-events: none;
  174. }
  175. .tg-nis2-tag {
  176.     display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .14em;
  177.     text-transform: uppercase; color: var(--n-amber); font-family: monospace; margin-bottom: 16px;
  178. }
  179. .tg-nis2 blockquote {
  180.     font-family:'Montserrat',sans-serif; font-size: clamp(17px,2vw,22px); font-weight: 600;
  181.     line-height: 1.5; color: #fff; position: relative; border: none; margin: 0; padding: 0;
  182. }
  183. .tg-nis2 blockquote em { font-style: normal; color: var(--n-amber); }
  184. .tg-nis2-note {
  185.     margin-top: 22px; font-size: 13px; color: rgba(255,255,255,.6); line-height: 1.6;
  186.     display: flex; align-items: flex-start; gap: 8px; position: relative;
  187. }
  188. .tg-nis2-note i { color: var(--n-amber); margin-top: 2px; flex-shrink: 0; }
  190. /* ── Standards alignment list + chips ──────────────────────────────────────── */
  191. .tg-std-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--n-border-md);
  192.     border: 1px solid var(--n-border-md); border-radius: var(--n-radius); overflow: hidden; }
  193. .tg-std-row {
  194.     background: var(--n-white); padding: 16px 20px;
  195.     display: flex; align-items: center; justify-content: space-between; gap: 16px;
  196.     transition: background .18s;
  197. }
  198. .tg-band-white .tg-std-row { background: var(--n-cream); }
  199. .tg-std-row:hover { background: var(--n-cream-2); }
  200. .tg-std-name { font-size: 13.5px; color: var(--n-dark); font-weight: 500; line-height: 1.4; }
  202. /* ── Claim-control chips ───────────────────────────────────────────────────── */
  203. .tg-chip {
  204.     display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex-shrink: 0;
  205.     font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  206.     font-family: monospace; padding: 4px 10px; border-radius: 100px; border: 1px solid;
  207. }
  208. .tg-chip::before { content:''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
  209. .tg-chip-now    { color: var(--n-sage);  background: var(--n-sage-dim);  border-color: rgba(61,107,82,.28); }
  210. .tg-chip-module { color: var(--n-slate); background: var(--n-slate-dim); border-color: rgba(61,79,114,.28); }
  211. .tg-chip-config { color: var(--n-navy);  background: rgba(30,58,110,.08); border-color: rgba(30,58,110,.25); }
  212. .tg-chip-context{ color: #7a5b1f; background: rgba(192,125,42,.10); border-color: rgba(192,125,42,.30); }
  213. .tg-chip-self   { color: #8a5a2b; background: rgba(192,125,42,.07); border-color: rgba(192,125,42,.22); }
  214. .tg-chip-roadmap{ color: var(--n-muted); background: rgba(107,110,127,.08); border-color: rgba(107,110,127,.25); }
  215. .tg-chip-cert   { color: #9a3b2f; background: rgba(154,59,47,.07); border-color: rgba(154,59,47,.25); }
  216. .tg-chip-scope  { color: #5a4a8a; background: rgba(90,74,138,.08); border-color: rgba(90,74,138,.25); }
  217. .tg-chip-legal  { color: #6b6e7f; background: rgba(26,29,46,.05); border-color: var(--n-border-md); }
  219. /* ── Claim-control matrix table ────────────────────────────────────────────── */
  220. .tg-matrix-wrap { border: 1px solid var(--n-border-md); border-radius: var(--n-radius); overflow: hidden; background: var(--n-white); }
  221. .tg-band-white .tg-matrix-wrap { background: var(--n-cream); }
  222. .tg-matrix { width: 100%; border-collapse: collapse; font-size: 13.5px; }
  223. .tg-matrix thead th {
  224.     text-align: left; font-family: monospace; font-size: 11px; font-weight: 700;
  225.     letter-spacing: .08em; text-transform: uppercase; color: var(--n-muted-2);
  226.     padding: 14px 20px; background: var(--n-cream-2); border-bottom: 1px solid var(--n-border-md);
  227. }
  228. .tg-matrix tbody td { padding: 16px 20px; border-bottom: 1px solid var(--n-border); vertical-align: top; }
  229. .tg-matrix tbody tr:last-child td { border-bottom: none; }
  230. .tg-matrix tbody tr:hover td { background: var(--n-cream-2); }
  231. .tg-matrix .tg-m-cat { width: 22%; }
  232. .tg-matrix .tg-m-mean { width: 26%; color: var(--n-muted); line-height: 1.6; }
  233. .tg-matrix .tg-m-ex { color: var(--n-dark); line-height: 1.65; }
  234. .tg-matrix .tg-m-cat .tg-chip { margin-bottom: 2px; }
  236. /* ── Not-claim callout ─────────────────────────────────────────────────────── */
  237. .tg-notclaim { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; list-style: none; }
  238. .tg-notclaim li { font-size: 14.5px; color: var(--n-dark); display: flex; align-items: flex-start; gap: 12px; line-height: 1.55; }
  239. .tg-notclaim li i { color: #9a3b2f; font-size: 14px; margin-top: 3px; flex-shrink: 0; }
  241. /* ── Trust copy strip ──────────────────────────────────────────────────────── */
  242. .tg-trustline {
  243.     background: var(--n-amber-dim); border: 1px solid rgba(192,125,42,.18);
  244.     border-radius: var(--n-radius); padding: 26px 32px;
  245.     font-size: 15px; line-height: 1.7; color: var(--n-dark);
  246. }
  247. .tg-trustline strong { color: var(--n-amber); font-weight: 700; }
  249. /* ── CTA band ──────────────────────────────────────────────────────────────── */
  250. .tg-cta {
  251.     background: var(--n-cream-2); padding: 96px 0; text-align: center;
  252.     border-top: 1px solid var(--n-border);
  253. }
  254. .tg-cta h2 { font-family:'Montserrat',sans-serif; font-size: clamp(26px,3.2vw,40px); font-weight: 900; color: var(--n-dark); margin-bottom: 14px; }
  255. .tg-cta h2 em { font-style: normal; color: var(--n-amber); }
  256. .tg-cta p { max-width: 56ch; margin: 0 auto 30px; color: var(--n-muted); font-size: 16px; line-height: 1.7; }
  257. .tg-cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
  259. /* ── Responsive ────────────────────────────────────────────────────────────── */
  260. @media (max-width: 1040px) {
  261.     .tg-grid-3 { grid-template-columns: 1fr; }
  262.     .tg-grid-2 { grid-template-columns: 1fr; }
  263.     .tg-checklist { grid-template-columns: 1fr; }
  264.     .tg-std-list { grid-template-columns: 1fr; }
  265.     .tg-notclaim { grid-template-columns: 1fr; }
  266. }
  267. @media (max-width: 760px) {
  268.     .tg-nis2 { padding: 32px 24px; }
  269.     .tg-matrix, .tg-matrix thead, .tg-matrix tbody, .tg-matrix tr, .tg-matrix td, .tg-matrix th { display: block; }
  270.     .tg-matrix thead { display: none; }
  271.     .tg-matrix tbody td { width: 100% !important; border-bottom: none; padding: 4px 20px; }
  272.     .tg-matrix tbody tr { border-bottom: 1px solid var(--n-border-md); padding: 14px 0; }
  273.     .tg-matrix tbody tr:last-child { border-bottom: none; }
  274.     .tg-matrix .tg-m-cat { padding-top: 16px; }
  275.     .tg-matrix .tg-m-ex { padding-bottom: 16px; }
  276. }
  277. </style>
  279. {# ══ HERO ═════════════════════════════════════════════════════════════════════ #}
  280. <section class="tg-hero">
  281.     <div class="n-wrap">
  282.         <div class="tg-hero-inner">
  283.             <div class="tg-hero-tag">
  284.                 <span></span>
  285.                 <span>Trust &amp; Governance</span>
  286.             </div>
  287.             <h1 class="tg-hero-h1">Trust &amp; <em>Governance.</em></h1>
  288.             <p class="tg-hero-desc">
  289.                 Operator-owned data, role-based access, audit trails, NIS2-aware governance, and a clear standards map — we separate marketing claims from verified claims.
  290.             </p>
  291.         </div>
  292.     </div>
  293. </section>
  295. {# ══ 1. COMPANY STRUCTURE ═════════════════════════════════════════════════════ #}
  296. <section class="n-sec">
  297.     <div class="n-wrap">
  298.         <div class="tg-sec-head">
  299.             <span class="tg-sec-num">01 / Company structure</span>
  300.             <h2 class="n-h2">Three entities, one ecosystem.</h2>
  301.             <p class="n-body n-mt-4">A Germany/EU product and R&amp;D base, a Singapore international SaaS and commercial entity, and a Bangladesh engineering and implementation team.</p>
  302.         </div>
  303.         <div class="tg-grid-3">
  304.             <div class="tg-card">
  305.                 <div class="tg-card-flag">Germany</div>
  306.                 <h3>HoneyBee Technologies GmbH</h3>
  307.                 <div class="tg-card-uen">Germany</div>
  308.                 <p>European product development, R&amp;D, AI/ML, edge computing, energy-management, mobility/transport, automation, digital infrastructure, partner coordination, and EU/Germany market development.</p>
  309.             </div>
  310.             <div class="tg-card">
  311.                 <div class="tg-card-flag">Singapore</div>
  312.                 <h3>HoneyBee IoT (Pte.) Ltd.</h3>
  313.                 <div class="tg-card-uen">UEN 202507612D</div>
  314.                 <p>International SaaS, commercial, strategic, and Asia-Pacific entity.</p>
  315.             </div>
  316.             <div class="tg-card">
  317.                 <div class="tg-card-flag">Bangladesh</div>
  318.                 <h3>HoneyBee IoT Ltd.</h3>
  319.                 <div class="tg-card-uen">Bangladesh</div>
  320.                 <p>Engineering, development, implementation, and regional support.</p>
  321.             </div>
  322.         </div>
  323.     </div>
  324. </section>
  326. {# ══ 2. DATA OWNERSHIP ════════════════════════════════════════════════════════ #}
  327. <section class="n-sec tg-band tg-band-white">
  328.     <div class="n-wrap">
  329.         <div class="tg-grid-2" style="align-items:center;gap:48px">
  330.             <div>
  331.                 <span class="tg-sec-num">02 / Data ownership</span>
  332.                 <h2 class="n-h2">Your data stays yours.</h2>
  333.                 <p class="n-body n-mt-4">Operator-owned data, export on demand, and no unnecessary lock-in. You decide where your data lives and you can take it with you.</p>
  334.             </div>
  335.             <ul class="tg-checklist">
  336.                 <li><i class="fa-solid fa-check"></i> Operator-owned data</li>
  337.                 <li><i class="fa-solid fa-check"></i> Export on demand</li>
  338.                 <li><i class="fa-solid fa-check"></i> No unnecessary lock-in</li>
  339.                 <li><i class="fa-solid fa-check"></i> You choose what to export and when</li>
  340.             </ul>
  341.         </div>
  342.     </div>
  343. </section>
  345. {# ══ 3. SECURITY & GOVERNANCE ═════════════════════════════════════════════════ #}
  346. <section class="n-sec">
  347.     <div class="n-wrap">
  348.         <div class="tg-sec-head">
  349.             <span class="tg-sec-num">03 / Security &amp; governance</span>
  350.             <h2 class="n-h2">Governed by design.</h2>
  351.             <p class="n-body n-mt-4">Access, approvals, and accountability are built into everyday workflows — including a human-approval step for AI actions.</p>
  352.         </div>
  353.         <ul class="tg-checklist">
  354.             <li><i class="fa-solid fa-check"></i> Role-based access control (RBAC)</li>
  355.             <li><i class="fa-solid fa-check"></i> Approval flows</li>
  356.             <li><i class="fa-solid fa-check"></i> Audit trails</li>
  357.             <li><i class="fa-solid fa-check"></i> MFA where applicable</li>
  358.             <li><i class="fa-solid fa-check"></i> Data export</li>
  359.             <li><i class="fa-solid fa-check"></i> Human approval for AI actions</li>
  360.         </ul>
  361.     </div>
  362. </section>
  364. {# ══ 4. NIS2 ══════════════════════════════════════════════════════════════════ #}
  365. <section class="n-sec tg-band tg-band-white">
  366.     <div class="n-wrap">
  367.         <div class="tg-sec-head">
  368.             <span class="tg-sec-num">04 / NIS2-aware governance</span>
  369.             <h2 class="n-h2">NIS2-aware cybersecurity governance.</h2>
  370.         </div>
  371.         <div class="tg-nis2">
  372.             <span class="tg-nis2-tag">NIS2 — safe wording</span>
  373.             <blockquote>
  374.                 HoneyBee supports <em>NIS2-aware cybersecurity governance</em> for applicable customers and deployments through role-based access control, audit trails, approval workflows, operator-owned data, export controls, incident visibility, infrastructure monitoring, and security-conscious deployment architecture. Applicability depends on the customer's sector, size, country, legal status, and national implementation of NIS2.
  375.             </blockquote>
  376.             <p class="tg-nis2-note">
  377.                 <i class="fa-solid fa-circle-info"></i>
  378.                 <span>Note: NIS2 is an EU directive, not a product certification.</span>
  379.             </p>
  380.         </div>
  381.     </div>
  382. </section>
  384. {# ══ 5. STANDARDS ALIGNMENT ═══════════════════════════════════════════════════ #}
  385. <section class="n-sec">
  386.     <div class="n-wrap">
  387.         <div class="tg-sec-head">
  388.             <span class="tg-sec-num">05 / Standards alignment</span>
  389.             <h2 class="n-h2">A clear standards map.</h2>
  390.             <p class="n-body n-mt-4">Each item carries a claim-control tag so you can tell, at a glance, what is available now, what is configurable or scoped, what is an internal mapping or self-assessment, and what is still on the roadmap or requires third-party certification.</p>
  391.         </div>
  392.         <div class="tg-std-list">
  393.             <div class="tg-std-row"><span class="tg-std-name">NIS2-aware governance support</span><span class="tg-chip tg-chip-context">Supported where applicable</span></div>
  394.             <div class="tg-std-row"><span class="tg-std-name">GDPR-aligned data handling</span><span class="tg-chip tg-chip-now">Available now</span></div>
  395.             <div class="tg-std-row"><span class="tg-std-name">Article 28 DPA available, if applicable</span><span class="tg-chip tg-chip-context">Supported where applicable</span></div>
  396.             <div class="tg-std-row"><span class="tg-std-name">GoBD-aligned audit trail (Germany accounting)</span><span class="tg-chip tg-chip-module">Module-scoped</span></div>
  397.             <div class="tg-std-row"><span class="tg-std-name">DATEV-ready export where implemented</span><span class="tg-chip tg-chip-module">Module-scoped</span></div>
  398.             <div class="tg-std-row"><span class="tg-std-name">IEC 62443 self-assessment where applicable</span><span class="tg-chip tg-chip-self">Self-assessment</span></div>
  399.             <div class="tg-std-row"><span class="tg-std-name">IEC 61724 KPI support (solar PV) where applicable</span><span class="tg-chip tg-chip-module">Module-scoped</span></div>
  400.             <div class="tg-std-row"><span class="tg-std-name">ISO/IEC 27001-aligned ISMS roadmap</span><span class="tg-chip tg-chip-roadmap">Roadmap</span></div>
  401.             <div class="tg-std-row"><span class="tg-std-name">ISO/IEC 27002-aligned control-mapping roadmap</span><span class="tg-chip tg-chip-roadmap">Roadmap</span></div>
  402.             <div class="tg-std-row"><span class="tg-std-name">ISO/IEC 27701-aligned privacy roadmap</span><span class="tg-chip tg-chip-roadmap">Roadmap</span></div>
  403.             <div class="tg-std-row"><span class="tg-std-name">ISO 9001 readiness/roadmap</span><span class="tg-chip tg-chip-roadmap">Roadmap</span></div>
  404.             <div class="tg-std-row"><span class="tg-std-name">ISO 14001 readiness/roadmap where relevant</span><span class="tg-chip tg-chip-roadmap">Roadmap</span></div>
  405.             <div class="tg-std-row"><span class="tg-std-name">ISO 50001 readiness/roadmap where relevant</span><span class="tg-chip tg-chip-roadmap">Roadmap</span></div>
  406.             <div class="tg-std-row"><span class="tg-std-name">SOC 2 roadmap/in-progress</span><span class="tg-chip tg-chip-roadmap">Roadmap</span></div>
  407.             <div class="tg-std-row"><span class="tg-std-name">OWASP ASVS/Top 10 roadmap</span><span class="tg-chip tg-chip-roadmap">Roadmap</span></div>
  408.             <div class="tg-std-row"><span class="tg-std-name">CIS Controls baseline checklist</span><span class="tg-chip tg-chip-self">Self-assessment</span></div>
  409.             <div class="tg-std-row"><span class="tg-std-name">CSA CCM mapping roadmap for cloud</span><span class="tg-chip tg-chip-roadmap">Roadmap</span></div>
  410.             <div class="tg-std-row"><span class="tg-std-name">EN 50549/VDE/IEEE 1547 grid-code profile support where implemented &amp; project-scoped</span><span class="tg-chip tg-chip-scope">Project-scoped</span></div>
  411.             <div class="tg-std-row"><span class="tg-std-name">CE/EMC/electrical safety for certified hardware only</span><span class="tg-chip tg-chip-cert">Third-party cert</span></div>
  412.             <div class="tg-std-row"><span class="tg-std-name">Cyber Resilience Act readiness roadmap if applicable</span><span class="tg-chip tg-chip-roadmap">Roadmap</span></div>
  413.         </div>
  414.     </div>
  415. </section>
  417. {# ══ 6. CLAIM-CONTROL MATRIX ══════════════════════════════════════════════════ #}
  418. <section class="n-sec tg-band tg-band-white">
  419.     <div class="n-wrap">
  420.         <div class="tg-sec-head">
  421.             <span class="tg-sec-num">06 / Claim-control matrix</span>
  422.             <h2 class="n-h2">Every claim, classified.</h2>
  423.             <p class="n-body n-mt-4">Each category below tells you exactly what kind of claim a control represents. Every standards or compliance mention on this page carries one of these tags. We never present a roadmap or self-assessment item as a certification.</p>
  424.         </div>
  425.         <div class="tg-matrix-wrap">
  426.             <table class="tg-matrix">
  427.                 <thead>
  428.                     <tr>
  429.                         <th>Category</th>
  430.                         <th>Meaning</th>
  431.                         <th>Example items</th>
  432.                     </tr>
  433.                 </thead>
  434.                 <tbody>
  435.                     <tr>
  436.                         <td class="tg-m-cat"><span class="tg-chip tg-chip-now">Available now</span></td>
  437.                         <td class="tg-m-mean">Live in product today</td>
  438.                         <td class="tg-m-ex">RBAC, audit trails, approval workflows, data export, MFA where applicable, human approval for AI actions</td>
  439.                     </tr>
  440.                     <tr>
  441.                         <td class="tg-m-cat"><span class="tg-chip tg-chip-module">Implemented for specific modules only</span></td>
  442.                         <td class="tg-m-mean">Real but scoped</td>
  443.                         <td class="tg-m-ex">GoBD-aligned audit trail (accounting), IEC 61724 KPI support (solar PV monitoring), DATEV-ready export (where implemented)</td>
  444.                     </tr>
  445.                     <tr>
  446.                         <td class="tg-m-cat"><span class="tg-chip tg-chip-config">Configurable</span></td>
  447.                         <td class="tg-m-mean">Per-deployment setup</td>
  448.                         <td class="tg-m-ex">Approval matrices, role scopes, retention, export controls, dashboard scope</td>
  449.                     </tr>
  450.                     <tr>
  451.                         <td class="tg-m-cat"><span class="tg-chip tg-chip-context">Supported where applicable</span></td>
  452.                         <td class="tg-m-mean">Depends on context</td>
  453.                         <td class="tg-m-ex">NIS2-aware governance, EN 50549/VDE/IEEE 1547 grid-code profiles (project-scoped), Article 28 DPA</td>
  454.                     </tr>
  455.                     <tr>
  456.                         <td class="tg-m-cat"><span class="tg-chip tg-chip-self">Self-assessment / internal control mapping</span></td>
  457.                         <td class="tg-m-mean">Internal, not third-party</td>
  458.                         <td class="tg-m-ex">IEC 62443-oriented self-assessment, CIS Controls baseline checklist, ISO 27002 control mapping</td>
  459.                     </tr>
  460.                     <tr>
  461.                         <td class="tg-m-cat"><span class="tg-chip tg-chip-roadmap">Roadmap</span></td>
  462.                         <td class="tg-m-mean">Planned, not yet</td>
  463.                         <td class="tg-m-ex">ISO/IEC 27001/27701, ISO 9001/14001/50001, OWASP ASVS, CSA CCM, Cyber Resilience Act readiness</td>
  464.                     </tr>
  465.                     <tr>
  466.                         <td class="tg-m-cat"><span class="tg-chip tg-chip-cert">Requires third-party certification</span></td>
  467.                         <td class="tg-m-mean">External audit needed</td>
  468.                         <td class="tg-m-ex">SOC 2, ISO 27001 certificate, IEC 62443 certificate, CE/EMC for hardware</td>
  469.                     </tr>
  470.                     <tr>
  471.                         <td class="tg-m-cat"><span class="tg-chip tg-chip-scope">Requires customer / project scoping</span></td>
  472.                         <td class="tg-m-mean">Site/deal dependent</td>
  473.                         <td class="tg-m-ex">HoneyCore Edge+ hardware, integrations, grid-code profiles, on-prem/private cloud</td>
  474.                     </tr>
  475.                     <tr>
  476.                         <td class="tg-m-cat"><span class="tg-chip tg-chip-legal">Requires local legal review</span></td>
  477.                         <td class="tg-m-mean">Jurisdiction dependent</td>
  478.                         <td class="tg-m-ex">NIS2 applicability, country tax/accounting localization, data-residency commitments</td>
  479.                     </tr>
  480.                 </tbody>
  481.             </table>
  482.         </div>
  483.     </div>
  484. </section>
  486. {# ══ 7. WHAT HONEYBEE DOES NOT CLAIM ══════════════════════════════════════════ #}
  487. <section class="n-sec">
  488.     <div class="n-wrap">
  489.         <div class="tg-sec-head">
  490.             <span class="tg-sec-num">07 / What HoneyBee does not claim</span>
  491.             <h2 class="n-h2">Where we draw the line.</h2>
  492.         </div>
  493.         <ul class="tg-notclaim">
  494.             <li><i class="fa-solid fa-xmark"></i> HoneyBee is not an EPC contractor.</li>
  495.             <li><i class="fa-solid fa-xmark"></i> HoneyBee does not replace engineers, accountants, or project managers.</li>
  496.             <li><i class="fa-solid fa-xmark"></i> No certification unless officially verified.</li>
  497.             <li><i class="fa-solid fa-xmark"></i> No client impact numbers without approval.</li>
  498.         </ul>
  499.         <div class="tg-trustline n-mt-12">
  500.             <strong>HoneyBee separates marketing claims from verified claims.</strong> Some controls are available now, some are configurable per deployment, some are internal mappings or self-assessments, and some require third-party certification or local legal review.
  501.         </div>
  502.         <p class="n-body-sm n-mt-6">
  503.             See also our <a href="{{ url('honeybee_dpa') }}" style="color:var(--n-amber);font-weight:600">Data Processing Agreement</a> and our <a href="{{ url('honeybee_experience') }}" style="color:var(--n-amber);font-weight:600">Experience</a> page.
  504.         </p>
  505.     </div>
  506. </section>
  508. {# ══ CTA ══════════════════════════════════════════════════════════════════════ #}
  509. <section class="tg-cta">
  510.     <div class="n-wrap-sm">
  511.         <h2>Talk to us about <em>company &amp; partnership.</em></h2>
  512.         <p>For enterprise buyers, investors, banks, partners, and regulated customers — let's discuss governance, structure, and how HoneyBee fits your requirements.</p>
  513.         <div class="tg-cta-actions">
  514.             <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-primary">
  515.                 Request Company / Partnership Discussion <i class="fa-solid fa-arrow-right"></i>
  516.             </a>
  517.         </div>
  518.     </div>
  519. </section>
  521. {% include '@HoneybeeWeb/footer/central_footer.html.twig' %}