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

Open in your IDE?
  1. {% include '@Application/inc/central_header.html.twig' %}
  3. {# ─── HONEYBEE HOMEPAGE — ERP Ecosystem + Native AI ──────────────────────── #}
  4. <style>
  5. /* ── Design Tokens ─────────────────────────────────────────────────────────── */
  6. :root {
  7.     --n-cream:      #F7F5F0;
  8.     --n-cream-2:    #F0EDE5;
  9.     --n-cream-3:    #E8E3D9;
  10.     --n-white:      #FFFFFF;
  11.     --n-dark:       #1A1D2E;
  12.     --n-dark-2:     #252840;
  13.     --n-navy:       #1E3A6E;
  14.     --n-amber:      #C07D2A;
  15.     --n-amber-lt:   #D4954A;
  16.     --n-amber-dim:  rgba(192,125,42,.10);
  17.     --n-sage:       #3D6B52;
  18.     --n-sage-dim:   rgba(61,107,82,.09);
  19.     --n-slate:      #3D4F72;
  20.     --n-slate-dim:  rgba(61,79,114,.08);
  21.     --n-muted:      #6B6E7F;
  22.     --n-muted-2:    #9395A5;
  23.     --n-border:     rgba(26,29,46,.07);
  24.     --n-border-md:  rgba(26,29,46,.12);
  25.     --n-shadow-xs:  0 1px 4px rgba(26,29,46,.05);
  26.     --n-shadow-sm:  0 2px 12px rgba(26,29,46,.07);
  27.     --n-shadow-md:  0 8px 32px rgba(26,29,46,.09);
  28.     --n-shadow-lg:  0 20px 64px rgba(26,29,46,.10);
  29.     --n-radius-sm:  8px;
  30.     --n-radius:     12px;
  31.     --n-radius-lg:  20px;
  32.     --n-font:       'DM Sans', 'Poppins', system-ui, sans-serif;
  33. }
  35. /* ── Base ──────────────────────────────────────────────────────────────────── */
  36. *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  37. body { background: var(--n-cream); font-family: var(--n-font); color: var(--n-dark); }
  38. a { text-decoration: none; }
  40. /* ── Utilities ─────────────────────────────────────────────────────────────── */
  41. .n-wrap    { max-width: 1160px; margin: 0 auto; padding: 0 28px; }
  42. .n-wrap-sm { max-width: 820px;  margin: 0 auto; padding: 0 28px; }
  43. .n-sec     { padding: 100px 0; }
  44. .n-sec-sm  { padding: 64px 0; }
  45. .n-label   {
  46.     display: inline-flex; align-items: center; gap: 8px;
  47.     font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  48.     color: var(--n-amber); margin-bottom: 16px;
  49. }
  50. .n-label::before { content:''; width: 18px; height: 1.5px; background: currentColor; border-radius: 2px; }
  51. .n-h1      { font-family:'Montserrat',sans-serif; font-size: clamp(36px,5vw,62px); font-weight: 800; line-height: 1.06; letter-spacing: -.02em; }
  52. .n-h2      { font-family:'Montserrat',sans-serif; font-size: clamp(26px,3.5vw,42px); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; }
  53. .n-h3      { font-family:'Montserrat',sans-serif; font-size: 18px; font-weight: 700; line-height: 1.3; }
  54. .n-body    { font-size: 16px; line-height: 1.75; color: var(--n-muted); }
  55. .n-body-sm { font-size: 14px; line-height: 1.7;  color: var(--n-muted); }
  56. .n-center  { text-align: center; }
  57. .n-center .n-label { justify-content: center; }
  58. .n-center .n-body  { max-width: 560px; margin: 0 auto; }
  59. .n-mt-4    { margin-top: 16px; }
  60. .n-mt-6    { margin-top: 24px; }
  61. .n-mt-8    { margin-top: 32px; }
  62. .n-mt-12   { margin-top: 48px; }
  63. em.n-em    { font-style: normal; color: var(--n-amber); }
  64. /* Maturity pills */
  65. .n-mat-pill {
  66.     display: inline-flex; align-items: center; gap: 5px;
  67.     font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  68.     font-family: monospace; padding: 2px 9px; border-radius: 100px;
  69.     border: 1px solid var(--n-border-md); margin-left: 8px; vertical-align: middle;
  70. }
  71. .n-mat-pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
  72. .n-mat-now    { color: var(--n-sage);  background: var(--n-sage-dim);  border-color: rgba(61,107,82,.25); }
  73. .n-mat-site   { color: var(--n-slate); background: var(--n-slate-dim); border-color: rgba(61,79,114,.22); }
  74. .n-mat-roll   { color: var(--n-amber); background: var(--n-amber-dim); border-color: rgba(192,125,42,.25); }
  75. .n-mat-road   { color: var(--n-muted); background: rgba(26,29,46,.04);  border-color: var(--n-border-md); }
  77. /* ── Buttons ────────────────────────────────────────────────────────────────── */
  78. .n-btn {
  79.     display: inline-flex; align-items: center; gap: 8px;
  80.     padding: 13px 26px; border-radius: var(--n-radius-sm);
  81.     font-size: 14px; font-weight: 600; letter-spacing: .01em;
  82.     border: none; cursor: pointer; text-decoration: none; transition: all .18s;
  83.     white-space: nowrap; font-family: var(--n-font);
  84. }
  85. .n-btn-primary { background: var(--n-dark);  color: #fff; }
  86. .n-btn-primary:hover  { background: var(--n-dark-2); color: #fff; transform: translateY(-1px); box-shadow: var(--n-shadow-md); }
  87. .n-btn-amber   { background: var(--n-amber); color: #fff; }
  88. .n-btn-amber:hover    { background: var(--n-amber-lt); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(192,125,42,.3); }
  89. .n-btn-outline { background: transparent; border: 1.5px solid var(--n-border-md); color: var(--n-dark); }
  90. .n-btn-outline:hover  { border-color: var(--n-dark); color: var(--n-dark); transform: translateY(-1px); }
  91. .n-btn-ghost-light    { background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.2); color: #fff; }
  92. .n-btn-ghost-light:hover { background: rgba(255,255,255,.2); color: #fff; }
  93. .n-btn-light   { background: #fff; color: var(--n-dark); }
  94. .n-btn-light:hover    { background: var(--n-cream-2); color: var(--n-dark); }
  95. .n-btn i, .n-btn .fa  { font-size: 15px; }
  97. /* ── Navbar overrides ───────────────────────────────────────────────────────── */
  98. .navbar {
  99.     background: rgba(247,245,240,.96) !important;
  100.     backdrop-filter: blur(16px) saturate(180%);
  101.     border-bottom: 1px solid var(--n-border) !important;
  102.     box-shadow: none !important;
  103. }
  104. .navbar .nav-link        { color: var(--n-dark) !important; font-size: 13.5px; font-weight: 500; opacity: .8; transition: opacity .15s; }
  105. .navbar .nav-link:hover,
  106. .navbar .nav-link.active { opacity: 1; color: var(--n-dark) !important; }
  107. .navbar .login-btn {
  108.     background: var(--n-dark) !important; color: #fff !important;
  109.     border: none !important; border-radius: var(--n-radius-sm) !important;
  110.     padding: 8px 20px !important; font-size: 13px !important; font-weight: 600 !important;
  111. }
  112. .navbar .login-btn:hover { background: var(--n-dark-2) !important; }
  114. /* ────────────────────────────────────────────────────────────────────────────
  115.    1. HERO
  116.    ──────────────────────────────────────────────────────────────────────────── */
  117. .n-hero {
  118.     background: var(--n-cream);
  119.     padding: 130px 0 80px;
  120.     position: relative;
  121.     overflow: hidden;
  122.     min-height: 92vh;
  123.     display: flex;
  124.     align-items: center;
  125. }
  126. .n-hero::before {
  127.     content: '';
  128.     position: absolute; top: 0; right: 0;
  129.     width: 55%; height: 100%;
  130.     background: radial-gradient(ellipse 80% 70% at 80% 40%, rgba(192,125,42,.07) 0%, transparent 65%),
  131.                 radial-gradient(ellipse 50% 60% at 95% 80%, rgba(61,107,82,.06) 0%, transparent 60%);
  132.     pointer-events: none;
  133. }
  134. .n-hero::after {
  135.     content: '';
  136.     position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  137.     background: linear-gradient(90deg, transparent, var(--n-border-md), transparent);
  138. }
  139. .n-hero-layout { display: grid; grid-template-columns: 1fr 1.05fr; gap: 72px; align-items: center; position: relative; }
  140. .n-hero-tag {
  141.     display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  142.     background: var(--n-amber-dim); border: 1px solid rgba(192,125,42,.2);
  143.     color: var(--n-amber); font-size: 11px; font-weight: 700;
  144.     letter-spacing: .16em; text-transform: uppercase;
  145.     padding: 6px 14px 6px 10px; border-radius: 4px; margin-bottom: 28px;
  146. }
  147. .n-hero-tag span:first-child { width: 6px; height: 6px; background: var(--n-amber); border-radius: 50%; display: block; flex-shrink: 0; }
  148. .n-hero-h1 {
  149.     font-family: 'Montserrat', sans-serif;
  150.     font-size: clamp(38px, 5.5vw, 66px);
  151.     font-weight: 900; line-height: 1.04; letter-spacing: -.025em;
  152.     color: var(--n-dark); margin-bottom: 24px;
  153. }
  154. .n-hero-h1 em { font-style: normal; color: var(--n-amber); }
  155. .n-hero-desc {
  156.     font-size: 17px; line-height: 1.75; color: var(--n-muted);
  157.     max-width: 480px; margin-bottom: 32px;
  158. }
  159. .n-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
  160. .n-micro-checks {
  161.     display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 40px;
  162. }
  163. .n-micro-checks span {
  164.     font-size: 13px; color: var(--n-muted); display: inline-flex; align-items: center; gap: 6px;
  165. }
  166. .n-micro-checks span i { color: var(--n-sage); font-size: 12px; }
  167. .n-hero-metrics { display: flex; gap: 0; }
  168. .n-metric {
  169.     padding: 0 24px; display: flex; flex-direction: column; gap: 3px;
  170.     border-right: 1px solid var(--n-border-md);
  171. }
  172. .n-metric:first-child { padding-left: 0; }
  173. .n-metric:last-child  { border-right: none; }
  174. .n-metric-val { font-family:'Montserrat',sans-serif; font-size: 22px; font-weight: 800; color: var(--n-dark); letter-spacing: -.02em; }
  175. .n-metric-lbl { font-size: 11.5px; color: var(--n-muted-2); font-weight: 500; }
  177. /* Hero dashboard mock */
  178. .n-hero-visual { position: relative; }
  179. .n-dash-mock {
  180.     background: var(--n-white);
  181.     border: 1px solid var(--n-border-md);
  182.     border-radius: var(--n-radius-lg);
  183.     box-shadow: var(--n-shadow-lg);
  184.     overflow: hidden;
  185. }
  186. .n-dash-header {
  187.     background: var(--n-dark);
  188.     padding: 14px 18px;
  189.     display: flex; align-items: center; justify-content: space-between;
  190. }
  191. .n-dash-header-title {
  192.     font-size: 11px; font-weight: 600; color: rgba(255,255,255,.55);
  193.     letter-spacing: .08em; text-transform: uppercase; font-family: monospace;
  194. }
  195. .n-dash-tabs {
  196.     display: flex; gap: 2px; padding: 2px;
  197.     background: rgba(255,255,255,.07); border-radius: 5px;
  198. }
  199. .n-dash-tab {
  200.     padding: 3px 10px; font-size: 11px; font-weight: 600; border-radius: 3px;
  201.     letter-spacing: .06em; cursor: pointer; color: rgba(255,255,255,.4);
  202.     font-family: monospace; border: 1px solid transparent; background: transparent;
  203.     transition: color .18s, background .18s, border-color .18s;
  204. }
  205. .n-dash-tab:hover { color: rgba(255,255,255,.75); }
  206. .n-dash-tab.active { background: rgba(192,125,42,.18); color: var(--n-amber); border-color: rgba(192,125,42,.4); }
  207. .n-dash-body { transition: opacity .18s; }
  208. .n-dash-body.fading { opacity: 0; }
  209. .n-dash-body { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
  210. .n-dash-stats {
  211.     display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  212. }
  213. .n-dash-stat {
  214.     background: var(--n-cream); border: 1px solid var(--n-border);
  215.     border-radius: var(--n-radius-sm); padding: 12px 14px;
  216. }
  217. .n-dash-stat-lbl { font-size: 10px; color: var(--n-muted-2); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 5px; font-family: monospace; }
  218. .n-dash-stat-val { font-family:'Montserrat',sans-serif; font-size: 17px; font-weight: 800; color: var(--n-dark); line-height: 1; }
  219. .n-dash-stat-trend { font-size: 11px; color: var(--n-sage); font-weight: 600; margin-top: 3px; }
  220. .n-dash-stat-trend.neg { color: #d9534f; }
  221. .n-dash-chart {
  222.     background: var(--n-cream); border: 1px solid var(--n-border);
  223.     border-radius: var(--n-radius-sm); padding: 12px 14px;
  224. }
  225. .n-dash-chart-lbl { font-size: 10px; color: var(--n-muted-2); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 8px; font-family: monospace; }
  226. .n-dash-feed { display: flex; flex-direction: column; gap: 6px; }
  227. .n-dash-feed-row {
  228.     display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  229.     background: var(--n-cream); border: 1px solid var(--n-border);
  230.     border-radius: 6px; font-size: 12px; color: var(--n-muted);
  231. }
  232. .n-dash-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
  233. .n-dash-dot.amber { background: var(--n-amber); }
  234. .n-dash-dot.sage  { background: var(--n-sage); }
  235. .n-dash-dot.muted { background: var(--n-muted-2); }
  237. /* ────────────────────────────────────────────────────────────────────────────
  238.    2. TRUST RIBBON
  239.    ──────────────────────────────────────────────────────────────────────────── */
  240. .n-trust {
  241.     background: var(--n-white);
  242.     border-top: 1px solid var(--n-border);
  243.     border-bottom: 1px solid var(--n-border);
  244.     padding: 20px 0;
  245. }
  246. .n-trust-row {
  247.     display: flex; align-items: center; justify-content: center;
  248.     gap: 48px; flex-wrap: wrap;
  249. }
  250. .n-trust-item {
  251.     display: flex; align-items: center; gap: 8px;
  252.     font-size: 13px; color: var(--n-muted);
  253. }
  254. .n-trust-item .n-trust-dot {
  255.     width: 6px; height: 6px; background: var(--n-sage); border-radius: 50%; flex-shrink: 0;
  256. }
  257. .n-trust-item strong { color: var(--n-dark); font-weight: 600; }
  259. /* ────────────────────────────────────────────────────────────────────────────
  260.    3. REGIONS
  261.    ──────────────────────────────────────────────────────────────────────────── */
  262. .n-region-grid {
  263.     display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 48px;
  264. }
  265. .n-region-card {
  266.     background: var(--n-white); border: 1px solid var(--n-border);
  267.     border-radius: var(--n-radius); padding: 32px;
  268.     transition: box-shadow .2s, border-color .2s;
  269. }
  270. .n-region-card:hover { border-color: var(--n-border-md); box-shadow: var(--n-shadow-md); }
  271. .n-region-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
  272. .n-region-flag { font-size: 11px; font-weight: 700; color: var(--n-amber); letter-spacing: .1em; text-transform: uppercase; font-family: monospace; margin-bottom: 6px; }
  273. .n-region-loc  { font-size: 11px; color: var(--n-muted-2); font-family: monospace; letter-spacing: .04em; }
  274. .n-region-card h3 { font-family:'Montserrat',sans-serif; font-size: 17px; font-weight: 700; color: var(--n-dark); margin-bottom: 10px; }
  275. .n-region-card p  { font-size: 14px; color: var(--n-muted); line-height: 1.7; margin-bottom: 20px; }
  276. .n-region-feats { list-style: none; padding-top: 16px; border-top: 1px solid var(--n-border); display: flex; flex-direction: column; gap: 8px; }
  277. .n-region-feats li { font-size: 13px; color: var(--n-dark); display: flex; align-items: flex-start; gap: 10px; }
  278. .n-region-feats li::before { content: ''; width: 5px; height: 5px; background: var(--n-sage); border-radius: 50%; margin-top: 7px; flex-shrink: 0; }
  280. /* ────────────────────────────────────────────────────────────────────────────
  281.    4. SIX SYSTEMS GRID
  282.    ──────────────────────────────────────────────────────────────────────────── */
  283. .n-six-grid {
  284.     display: grid; grid-template-columns: repeat(3, 1fr);
  285.     gap: 1px; background: var(--n-border-md);
  286.     border: 1px solid var(--n-border-md); border-radius: var(--n-radius); overflow: hidden;
  287.     margin-top: 48px;
  288. }
  289. .n-sys-card { background: var(--n-white); padding: 28px; transition: background .2s; }
  290. .n-sys-card:hover { background: var(--n-cream); }
  291. .n-sys-tag {
  292.     font-size: 11px; font-weight: 700; color: var(--n-amber); letter-spacing: .1em;
  293.     text-transform: uppercase; margin-bottom: 14px; display: block; font-family: monospace;
  294. }
  295. .n-sys-card h3 { font-family:'Montserrat',sans-serif; font-size: 16px; font-weight: 700; color: var(--n-dark); margin-bottom: 10px; }
  296. .n-sys-card p  { font-size: 13.5px; color: var(--n-muted); line-height: 1.65; margin-bottom: 14px; }
  297. .n-sys-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 5px; }
  298. .n-sys-chips li {
  299.     font-size: 11px; color: var(--n-muted); padding: 3px 10px;
  300.     background: var(--n-cream); border: 1px solid var(--n-border-md);
  301.     border-radius: 4px; font-family: monospace;
  302. }
  304. /* ────────────────────────────────────────────────────────────────────────────
  305.    5. NATIVE AI SECTION
  306.    ──────────────────────────────────────────────────────────────────────────── */
  307. .n-ai-section {
  308.     background: var(--n-dark);
  309.     padding: 100px 0;
  310.     position: relative;
  311.     overflow: hidden;
  312.     text-align: left;
  313. }
  314. .n-ai-section::before {
  315.     content: '';
  316.     position: absolute; top: -40%; right: -5%; width: 60%; height: 150%;
  317.     background: radial-gradient(ellipse 70% 60% at 70% 50%, rgba(192,125,42,.12) 0%, transparent 65%);
  318.     pointer-events: none;
  319. }
  320. .n-ai-section::after {
  321.     content: '';
  322.     position: absolute; bottom: -30%; left: -5%; width: 50%; height: 100%;
  323.     background: radial-gradient(ellipse 60% 60% at 30% 70%, rgba(61,107,82,.10) 0%, transparent 60%);
  324.     pointer-events: none;
  325. }
  326. .n-ai-label { color: var(--n-amber); }
  327. .n-ai-label::before { background: var(--n-amber); }
  328. .n-ai-h2 { font-family:'Montserrat',sans-serif; font-size: clamp(28px,3.5vw,44px); font-weight: 900; color: #fff; line-height: 1.1; letter-spacing: -.025em; margin-bottom: 16px; }
  329. .n-ai-h2 em { font-style: normal; color: var(--n-amber); }
  330. .n-ai-lead { font-size: 16px; line-height: 1.75; color: rgba(255,255,255,.6); max-width: 520px; margin-bottom: 48px; text-align: left; }
  331. .n-ai-use-cases {
  332.     display: flex; flex-direction: column; gap: 16px; margin-bottom: 40px;
  333. }
  334. .n-ai-use {
  335.     display: flex; align-items: flex-start; gap: 14px;
  336.     padding: 16px 20px;
  337.     background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  338.     border-radius: var(--n-radius-sm); transition: border-color .2s;
  339. }
  340. .n-ai-use:hover { border-color: rgba(192,125,42,.3); }
  341. .n-ai-use-icon {
  342.     width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
  343.     background: var(--n-amber-dim); border: 1px solid rgba(192,125,42,.2);
  344.     display: flex; align-items: center; justify-content: center;
  345.     color: var(--n-amber); font-size: 15px;
  346. }
  347. .n-ai-use h4 { font-family:'Montserrat',sans-serif; font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 4px; }
  348. .n-ai-use p  { font-size: 13px; color: rgba(255,255,255,.55); line-height: 1.6; margin: 0; }
  350. /* Two deployment paths */
  351. .n-ai-paths { display: flex; flex-direction: column; gap: 12px; }
  352. .n-ai-path {
  353.     border-radius: var(--n-radius);
  354.     padding: 24px 28px;
  355.     position: relative;
  356.     text-align: left;
  357. }
  358. .n-ai-path-cloud {
  359.     background: rgba(255,255,255,.05);
  360.     border: 1px solid rgba(255,255,255,.12);
  361.     display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center;
  362. }
  363. .n-ai-path-native {
  364.     background: rgba(192,125,42,.06);
  365.     border: 1px solid rgba(192,125,42,.3);
  366.     border-top: 2px solid var(--n-amber);
  367. }
  368. .n-ai-path-badge {
  369.     font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  370.     font-family: monospace; margin-bottom: 10px; display: inline-block;
  371. }
  372. .n-ai-path-cloud .n-ai-path-badge  { color: rgba(255,255,255,.4); }
  373. .n-ai-path-native .n-ai-path-badge { color: var(--n-amber); }
  374. .n-ai-path h3  { font-family:'Montserrat',sans-serif; font-size: 16px; font-weight: 800; color: #fff; margin-bottom: 6px; text-align: left; }
  375. .n-ai-path p   { font-size: 13px; color: rgba(255,255,255,.5); line-height: 1.6; margin-bottom: 0; text-align: left; }
  376. .n-ai-price-block { text-align: right; flex-shrink: 0; }
  377. .n-ai-price-num { font-family:'Montserrat',sans-serif; font-size: 30px; font-weight: 900; color: #fff; line-height: 1; display: block; }
  378. .n-ai-price-unit { font-size: 11px; color: rgba(255,255,255,.4); font-family: monospace; display: block; margin-top: 3px; white-space: nowrap; }
  379. .n-ai-path-feats { list-style: none; display: flex; flex-direction: column; gap: 7px; }
  380. .n-ai-path-feats li {
  381.     font-size: 12.5px; color: rgba(255,255,255,.6);
  382.     display: flex; align-items: flex-start; gap: 8px; text-align: left;
  383. }
  384. .n-ai-path-feats li::before { content: '→'; color: var(--n-amber); font-family: monospace; font-size: 11px; flex-shrink: 0; margin-top: 2px; }
  385. .n-ai-hw-badge {
  386.     display: inline-flex; align-items: center; gap: 6px;
  387.     padding: 4px 10px; background: rgba(192,125,42,.12);
  388.     border: 1px solid rgba(192,125,42,.3); border-radius: 4px;
  389.     font-size: 11px; font-weight: 600; color: var(--n-amber); font-family: monospace;
  390.     margin-right: 6px;
  391. }
  392. /* Native card inner layout */
  393. .n-native-top {
  394.     display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: flex-start; margin-bottom: 20px;
  395. }
  396. .n-native-hw-row {
  397.     display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  398.     padding: 14px 16px; margin: 16px 0;
  399.     background: rgba(0,0,0,.2); border-radius: 8px; border: 1px solid rgba(255,255,255,.06);
  400. }
  401. .n-native-hw-label {
  402.     font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  403.     color: rgba(255,255,255,.3); font-family: monospace; width: 100%; margin-bottom: 8px;
  404. }
  405. .n-hw-chip {
  406.     display: inline-flex; align-items: center; gap: 7px;
  407.     padding: 6px 12px; border-radius: 6px;
  408.     font-size: 12px; font-weight: 700; font-family: monospace; letter-spacing: .02em;
  409. }
  410. .n-hw-chip-gpu {
  411.     background: linear-gradient(135deg, rgba(118,185,0,.15), rgba(118,185,0,.08));
  412.     border: 1px solid rgba(118,185,0,.3); color: #76b900;
  413. }
  414. .n-hw-chip-gpu i { color: #76b900; font-size: 13px; }
  415. .n-hw-chip-thor {
  416.     background: linear-gradient(135deg, rgba(0,115,207,.15), rgba(0,115,207,.08));
  417.     border: 1px solid rgba(0,115,207,.3); color: #60a8e8;
  418. }
  419. .n-hw-chip-thor i { color: #60a8e8; font-size: 13px; }
  420. .n-native-divider { height: 1px; background: rgba(255,255,255,.08); margin: 16px 0; }
  421. .n-native-grid {
  422.     display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px;
  423. }
  424. .n-native-fact { display: flex; flex-direction: column; gap: 2px; }
  425. .n-native-fact-lbl { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.3); font-family: monospace; }
  426. .n-native-fact-val { font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.75); }
  428. /* ────────────────────────────────────────────────────────────────────────────
  429.    6. MOBILE APP
  430.    ──────────────────────────────────────────────────────────────────────────── */
  431. .n-mobile-layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: center; }
  432. .n-mobile-pill {
  433.     display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px;
  434.     background: var(--n-white); border: 1px solid var(--n-border-md); border-radius: 100px;
  435.     font-size: 11px; color: var(--n-muted); font-family: monospace; font-weight: 600;
  436.     margin-bottom: 20px; letter-spacing: .04em;
  437. }
  438. .n-mobile-pill::before { content: ''; width: 5px; height: 5px; background: var(--n-sage); border-radius: 50%; }
  439. .n-mobile-list {
  440.     list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin: 24px 0 28px;
  441. }
  442. .n-mobile-list li {
  443.     font-size: 13.5px; color: var(--n-dark); display: flex; align-items: flex-start; gap: 8px;
  444. }
  445. .n-mobile-list li::before { content: '→'; color: var(--n-amber); font-family: monospace; font-size: 12px; flex-shrink: 0; margin-top: 2px; }
  446. .n-mobile-stores { display: flex; gap: 10px; flex-wrap: wrap; }
  447. .n-phone-frame {
  448.     aspect-ratio: 9/18; max-width: 280px; margin: 0 auto;
  449.     background: var(--n-dark); border-radius: 32px; padding: 14px;
  450.     box-shadow: 0 32px 64px -24px rgba(26,29,46,.3), 0 0 0 1px var(--n-border-md);
  451.     position: relative;
  452. }
  453. .n-phone-notch {
  454.     position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  455.     width: 70px; height: 16px; background: var(--n-dark);
  456.     border-radius: 0 0 12px 12px; z-index: 2;
  457. }
  458. .n-phone-screen {
  459.     width: 100%; height: 100%; background: var(--n-cream);
  460.     border-radius: 22px; padding: 28px 14px 14px;
  461.     display: flex; flex-direction: column; gap: 8px; overflow: hidden;
  462. }
  463. .n-phone-greet   { font-size: 10px; color: var(--n-muted-2); font-family: monospace; text-transform: uppercase; letter-spacing: .08em; }
  464. .n-phone-greet-h { font-family:'Montserrat',sans-serif; font-size: 16px; font-weight: 800; color: var(--n-dark); margin-top: 2px; }
  465. .n-phone-clock   { background: var(--n-dark); color: #fff; padding: 12px; border-radius: 10px; text-align: center; }
  466. .n-phone-clock .time  { font-family: monospace; font-size: 20px; font-weight: 600; letter-spacing: .06em; }
  467. .n-phone-clock .label { font-size: 9px; color: var(--n-amber); margin-top: 3px; text-transform: uppercase; letter-spacing: .08em; font-family: monospace; }
  468. .n-phone-row {
  469.     display: flex; align-items: center; gap: 7px; padding: 7px 10px;
  470.     background: var(--n-white); border: 0.5px solid var(--n-border-md);
  471.     border-radius: 6px; font-size: 11px; color: var(--n-muted);
  472. }
  473. .n-phone-pip { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
  474. .n-phone-pip.amber { background: var(--n-amber); }
  475. .n-phone-pip.sage  { background: var(--n-sage); }
  476. .n-phone-pip.muted { background: var(--n-muted-2); }
  477. .n-phone-amt { margin-left: auto; font-family: monospace; font-size: 10px; color: var(--n-dark); font-weight: 600; }
  479. /* ────────────────────────────────────────────────────────────────────────────
  480.    7. PRICING
  481.    ──────────────────────────────────────────────────────────────────────────── */
  482. .n-price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 48px; align-items: stretch; }
  483. .n-plan {
  484.     background: var(--n-white); border: 1px solid var(--n-border-md);
  485.     border-radius: var(--n-radius); padding: 32px; position: relative;
  486.     transition: box-shadow .2s;
  487.     display: flex; flex-direction: column; height: 100%;
  488. }
  489. .n-plan:hover { box-shadow: var(--n-shadow-md); }
  490. .n-plan.featured {
  491.     background: var(--n-dark);
  492.     border-color: var(--n-dark);
  493.     box-shadow: var(--n-shadow-lg);
  494. }
  495. .n-plan-tag {
  496.     position: absolute; top: -1px; right: 24px;
  497.     font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  498.     background: var(--n-amber); color: #fff;
  499.     padding: 4px 12px; border-radius: 0 0 8px 8px; font-family: monospace;
  500. }
  501. .n-plan h3 { font-family:'Montserrat',sans-serif; font-size: 17px; font-weight: 800; margin-bottom: 6px; }
  502. .n-plan .n-plan-audience { font-size: 13px; color: var(--n-muted); margin-bottom: 20px; line-height: 1.5; }
  503. .n-plan.featured h3,
  504. .n-plan.featured .n-plan-audience { color: rgba(255,255,255,.7); }
  505. .n-plan.featured h3 { color: #fff; }
  506. .n-plan-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 6px; }
  507. .n-plan-price .num { font-family:'Montserrat',sans-serif; font-size: 36px; font-weight: 900; color: var(--n-dark); line-height: 1; }
  508. .n-plan.featured .n-plan-price .num { color: #fff; }
  509. .n-plan-price .unit { font-size: 13px; color: var(--n-muted-2); }
  510. .n-plan.featured .n-plan-price .unit { color: rgba(255,255,255,.5); }
  511. .n-plan-billing { font-size: 12px; color: var(--n-muted-2); margin-bottom: 24px; font-family: monospace; }
  512. .n-plan.featured .n-plan-billing { color: rgba(255,255,255,.4); }
  513. .n-plan-div { height: 1px; background: var(--n-border-md); margin-bottom: 20px; }
  514. .n-plan.featured .n-plan-div { background: rgba(255,255,255,.1); }
  515. .n-plan-feats { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; flex: 1; }
  516. .n-plan-feats li { font-size: 13.5px; display: flex; align-items: flex-start; gap: 10px; color: var(--n-dark); }
  517. .n-plan-feats li i { color: var(--n-sage); font-size: 13px; margin-top: 2px; flex-shrink: 0; }
  518. .n-plan.featured .n-plan-feats li { color: rgba(255,255,255,.8); }
  519. .n-plan.featured .n-plan-feats li i { color: var(--n-amber); }
  520. .n-price-note { text-align: center; font-size: 13px; color: var(--n-muted-2); margin-top: 28px; }
  521. /* Early-adopter pricing on home cards */
  522. .n-plan-early-badge {
  523.     display: inline-flex; align-items: center; gap: 4px;
  524.     font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  525.     color: var(--n-amber); background: var(--n-amber-dim);
  526.     border: 1px solid rgba(192,125,42,.25); border-radius: 100px;
  527.     padding: 2px 8px; margin-bottom: 6px;
  528. }
  529. .n-plan-early-badge::before { content: '⚡'; }
  530. .n-plan-regular-price {
  531.     font-family: monospace; font-size: 11px; color: var(--n-muted-2);
  532.     text-decoration: line-through; opacity: .7; margin-bottom: 2px;
  533. }
  534. .n-plan.featured .n-plan-early-badge { color: var(--n-amber); background: rgba(192,125,42,.18); border-color: rgba(192,125,42,.3); }
  535. .n-plan.featured .n-plan-regular-price { color: rgba(255,255,255,.3); }
  536. .n-plan-lock-note {
  537.     font-size: 11px; color: var(--n-amber); margin-top: 2px; margin-bottom: 20px;
  538.     display: flex; align-items: flex-start; gap: 4px; line-height: 1.45;
  539. }
  540. .n-plan-lock-note::before { content: '🔒'; flex-shrink: 0; }
  541. .n-plan.featured .n-plan-lock-note { color: rgba(192,125,42,.8); }
  543. /* AI pricing add-on callout */
  544. .n-ai-pricing-note {
  545.     margin-top: 20px;
  546.     padding: 20px 24px;
  547.     background: rgba(192,125,42,.07);
  548.     border: 1px solid rgba(192,125,42,.18);
  549.     border-radius: var(--n-radius-sm);
  550.     display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  551. }
  552. .n-ai-pricing-note p { font-size: 13.5px; color: var(--n-dark); line-height: 1.6; flex: 1; }
  553. .n-ai-pricing-note p strong { color: var(--n-amber); }
  555. /* ────────────────────────────────────────────────────────────────────────────
  556.    8. CLIENTS
  557.    ──────────────────────────────────────────────────────────────────────────── */
  558. .n-logo-strip {
  559.     background: var(--n-white); border: 1px solid var(--n-border);
  560.     border-radius: var(--n-radius); padding: 36px; margin-top: 48px;
  561. }
  562. .n-logo-strip-label { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--n-muted-2); margin-bottom: 20px; font-family: monospace; }
  563. .n-logo-row { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
  564. .n-logo-item {
  565.     flex: 1; text-align: center; font-size: 14px; font-weight: 600;
  566.     color: var(--n-muted); padding: 12px 20px; letter-spacing: .01em;
  567.     border-right: 1px solid var(--n-border); transition: color .2s;
  568. }
  569. .n-logo-item:last-child { border-right: none; }
  570. .n-logo-item:hover { color: var(--n-dark); }
  572. /* ────────────────────────────────────────────────────────────────────────────
  573.    9. CTA / NEWSLETTER
  574.    ──────────────────────────────────────────────────────────────────────────── */
  575. .n-cta-final {
  576.     background: var(--n-cream-2);
  577.     padding: 120px 0;
  578.     text-align: center;
  579.     border-top: 1px solid var(--n-border);
  580. }
  581. .n-cta-final h2 { font-family:'Montserrat',sans-serif; font-size: clamp(28px,3.5vw,44px); font-weight: 900; color: var(--n-dark); margin-bottom: 16px; }
  582. .n-cta-final h2 em { font-style: normal; color: var(--n-amber); }
  583. .n-cta-final p { max-width: 52ch; margin: 0 auto 32px; color: var(--n-muted); font-size: 16px; line-height: 1.7; }
  584. .n-cta-form { max-width: 480px; margin: 0 auto; }
  585. .n-cta-row  { display: flex; gap: 10px; }
  586. .n-cta-row input {
  587.     flex: 1; padding: 13px 18px; font-family: var(--n-font); font-size: 14px;
  588.     background: var(--n-white); border: 1.5px solid var(--n-border-md);
  589.     border-radius: var(--n-radius-sm); color: var(--n-dark);
  590. }
  591. .n-cta-row input:focus { outline: none; border-color: var(--n-amber); }
  592. .n-cta-row button {
  593.     background: var(--n-dark); color: #fff; border: none;
  594.     padding: 13px 24px; font-family: var(--n-font); font-size: 14px; font-weight: 600;
  595.     border-radius: var(--n-radius-sm); cursor: pointer; transition: background .2s; white-space: nowrap;
  596. }
  597. .n-cta-row button:hover { background: var(--n-amber); }
  598. .n-cta-note { font-size: 12px; color: var(--n-muted-2); margin-top: 10px; }
  600. /* ────────────────────────────────────────────────────────────────────────────
  601.    Responsive
  602.    ──────────────────────────────────────────────────────────────────────────── */
  603. @media (max-width: 880px) {
  604.     .n-paths-grid     { grid-template-columns: 1fr; }
  605.     .n-problem-grid   { grid-template-columns: 1fr; }
  606.     .n-vs-grid        { grid-template-columns: 1fr; }
  607.     .n-ba-grid        { grid-template-columns: 1fr; }
  608. }
  609. @media (max-width: 1040px) {
  610.     .n-hero-layout    { grid-template-columns: 1fr; gap: 48px; }
  611.     .n-hero-visual    { display: none; }
  612.     .n-region-grid    { grid-template-columns: 1fr; }
  613.     .n-six-grid       { grid-template-columns: 1fr 1fr; }
  614.     .n-native-top     { grid-template-columns: 1fr; }
  615.     .n-native-grid    { grid-template-columns: 1fr 1fr; }
  616.     .n-mobile-layout  { grid-template-columns: 1fr; gap: 40px; }
  617.     .n-phone-frame    { display: none; }
  618.     .n-mobile-list    { grid-template-columns: 1fr; }
  619.     .n-price-grid     { grid-template-columns: 1fr; }
  620.     .n-dash-stats     { grid-template-columns: repeat(2,1fr); }
  621. }
  622. @media (max-width: 720px) {
  623.     .n-six-grid { grid-template-columns: 1fr; }
  624.     .n-hero-metrics { flex-wrap: wrap; gap: 20px; }
  625.     .n-metric { padding: 0; border-right: none; }
  626.     .n-trust-row { gap: 20px; }
  627.     .n-cta-row { flex-direction: column; }
  628. }
  629. </style>
  631. {# ══ 1. HERO ══════════════════════════════════════════════════════════════════ #}
  632. <section class="n-hero">
  633.     <div class="n-wrap" style="width:100%">
  634.         <div class="n-hero-layout">
  636.             {# Left: copy #}
  637.             <div>
  638.                 <div class="n-hero-tag">
  639.                     <span></span>
  640.                     <span class="trn" data-trn-key="_H_HERO_TAG_">New — AI email classifier · Spotlight Search · Persistent AI reports</span>
  641.                 </div>
  642.                 <h1 class="n-hero-h1">
  643.                     <span class="trn" data-trn-key="_H_HERO_H1_">Business + Energy Infrastructure.</span><br><em class="trn" data-trn-key="_H_HERO_H1_EM_">One Operating System.</em>
  644.                 </h1>
  645.                 <p class="n-hero-desc trn" data-trn-key="_H_HERO_DESC_">
  646.                     HoneyBee connects Business ERP, Project ERP, HoneyCore Edge EMS, AI and mobile field operations in one ecosystem — so business, project, finance, site, asset and energy data work together.
  647.                 </p>
  648.                 <div class="n-hero-actions">
  649.                     <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-primary">
  650.                         <span class="trn" data-trn-key="_H_BTN_TRIAL_">Request Project Workflow Audit</span> <i class="fa-solid fa-arrow-right"></i>
  651.                     </a>
  652.                     <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-outline trn" data-trn-key="_H_BTN_DEMO_">
  653.                         Book Business ERP Demo
  654.                     </a>
  655.                 </div>
  656.                 <div class="n-micro-checks">
  657.                     <span><i class="fa-solid fa-check"></i> <span class="trn" data-trn-key="_H_CHECK_COLLAB_">DATEV-ready export for tax consultants and client-side A&amp;F workflows · EU data residency · HoneyCore Edge EMS hardware available · Germany/EU product focus with Singapore-based international SaaS operations and engineering support from Bangladesh</span></span>
  658.                 </div>
  659.                 <div class="n-hero-metrics">
  660.                     <div class="n-metric">
  661.                         <span class="n-metric-val">6+</span>
  662.                         <span class="n-metric-lbl trn" data-trn-key="_H_METRIC_TOOLS_">Tools replaced</span>
  663.                     </div>
  664.                     <div class="n-metric">
  665.                         <span class="n-metric-val">4</span>
  666.                         <span class="n-metric-lbl trn" data-trn-key="_H_METRIC_MARKETS_">Markets live</span>
  667.                     </div>
  668.                     <div class="n-metric">
  669.                         <span class="n-metric-val">€0</span>
  670.                         <span class="n-metric-lbl trn" data-trn-key="_H_METRIC_TRIAL_">Free Starter</span>
  671.                     </div>
  672.                     <div class="n-metric">
  673.                         {% set _heroUserPrice = '' %}
  674.                         {% for pd in packageDetails %}{% if _heroUserPrice == '' and pd.freeFlag is defined and pd.freeFlag != '1' and pd.contactSalesFlag is defined and pd.contactSalesFlag != '1' and pd.euPerUserPrice is defined %}{% set _heroUserPrice = pd.euPerUserPrice.monthlyPrice %}{% endif %}{% endfor %}
  675.                         <span class="n-metric-val">€{{ _heroUserPrice }}</span>
  676.                         <span class="n-metric-lbl trn" data-trn-key="_H_METRIC_PRICE_">per user / mo</span>
  677.                     </div>
  678.                 </div>
  679.             </div>
  681.             {# Right: dashboard mock #}
  682.             <div class="n-hero-visual">
  683.                 <div class="n-dash-mock">
  684.                     <div class="n-dash-header">
  685.                         <div class="n-dash-header-title trn" data-trn-key="_H_DASH_TITLE_">HoneyBee / Command Center</div>
  686.                         <div class="n-dash-tabs">
  687.                             <button class="n-dash-tab active">DE</button>
  688.                             <button class="n-dash-tab">SG</button>
  689.                             <button class="n-dash-tab">NO</button>
  690.                             <button class="n-dash-tab">EU</button>
  691.                         </div>
  692.                     </div>
  693.                     <div class="n-dash-body" id="n-dash-body">
  694.                         <div class="n-dash-stats">
  695.                             <div class="n-dash-stat">
  696.                                 <div class="n-dash-stat-lbl" id="dm-s1-lbl">Revenue MTD</div>
  697.                                 <div class="n-dash-stat-val" id="dm-s1-val">€284k</div>
  698.                                 <div class="n-dash-stat-trend" id="dm-s1-trend">↑ 12.4%</div>
  699.                             </div>
  700.                             <div class="n-dash-stat">
  701.                                 <div class="n-dash-stat-lbl" id="dm-s2-lbl">Pipeline</div>
  702.                                 <div class="n-dash-stat-val" id="dm-s2-val">€1.4M</div>
  703.                                 <div class="n-dash-stat-trend" id="dm-s2-trend">42 deals</div>
  704.                             </div>
  705.                             <div class="n-dash-stat">
  706.                                 <div class="n-dash-stat-lbl" id="dm-s3-lbl">Projects</div>
  707.                                 <div class="n-dash-stat-val" id="dm-s3-val">18</div>
  708.                                 <div class="n-dash-stat-trend neg" id="dm-s3-trend">3 at risk</div>
  709.                             </div>
  710.                             <div class="n-dash-stat">
  711.                                 <div class="n-dash-stat-lbl" id="dm-s4-lbl">DATEV Sync</div>
  712.                                 <div class="n-dash-stat-val" id="dm-s4-val">OK</div>
  713.                                 <div class="n-dash-stat-trend" id="dm-s4-trend">2 min ago</div>
  714.                             </div>
  715.                         </div>
  716.                         <div class="n-dash-chart">
  717.                             <div class="n-dash-chart-lbl" id="dm-chart-lbl">Cash flow — 30 days · Germany</div>
  718.                             <svg viewBox="0 0 320 56" preserveAspectRatio="none" style="width:100%;height:56px;display:block">
  719.                                 <defs>
  720.                                     <linearGradient id="cashGrad" x1="0" x2="0" y1="0" y2="1">
  721.                                         <stop offset="0%" stop-color="#C07D2A" stop-opacity="0.25"/>
  722.                                         <stop offset="100%" stop-color="#C07D2A" stop-opacity="0"/>
  723.                                     </linearGradient>
  724.                                 </defs>
  725.                                 <path id="dm-chart-fill" d="M0,44 Q40,40 60,34 T120,24 T175,28 T230,14 T320,9 L320,56 L0,56 Z" fill="url(#cashGrad)"/>
  726.                                 <path id="dm-chart-line" d="M0,44 Q40,40 60,34 T120,24 T175,28 T230,14 T320,9" stroke="#C07D2A" stroke-width="1.5" fill="none" stroke-linecap="round"/>
  727.                             </svg>
  728.                         </div>
  729.                         <div class="n-dash-feed">
  730.                             <div class="n-dash-feed-row">
  731.                                 <div class="n-dash-dot amber" id="dm-f1-dot"></div>
  732.                                 <span id="dm-f1-txt">Lead → Opportunity moved by Kanban (€45k)</span>
  733.                             </div>
  734.                             <div class="n-dash-feed-row">
  735.                                 <div class="n-dash-dot muted" id="dm-f2-dot"></div>
  736.                                 <span id="dm-f2-txt">DATEV export ready for tax consultant</span>
  737.                             </div>
  738.                             <div class="n-dash-feed-row">
  739.                                 <div class="n-dash-dot sage" id="dm-f3-dot"></div>
  740.                                 <span id="dm-f3-txt">AI report: Q2 project margins generated ✓</span>
  741.                             </div>
  742.                         </div>
  743.                     </div>
  744.                 </div>
  745.             </div>
  747.         </div>
  748.     </div>
  749. </section>
  751. {# ══ 2. TRUST RIBBON ══════════════════════════════════════════════════════════ #}
  752. <div class="n-trust">
  753.     <div class="n-wrap">
  754.         <div class="n-trust-row">
  755.             <div class="n-trust-item"><span class="n-trust-dot"></span><strong>DATEV</strong>&nbsp;integration</div>
  756.             <div class="n-trust-item"><span class="n-trust-dot"></span><strong>Multi-company</strong>&nbsp;ready</div>
  757.             <div class="n-trust-item"><span class="n-trust-dot"></span><strong>Cloud</strong>&nbsp;or on-premise</div>
  758.             <div class="n-trust-item"><span class="n-trust-dot"></span><strong>Native AI</strong>&nbsp;built-in</div>
  759.             <div class="n-trust-item"><span class="n-trust-dot"></span><strong>Free</strong>&nbsp;Starter</div>
  760.             <div class="n-trust-item"><span class="n-trust-dot"></span><strong>GDPR</strong>&nbsp;aligned</div>
  761.         </div>
  762.     </div>
  763. </div>
  765. {# ══ 2b. THREE BUYER PATHS ═════════════════════════════════════════════════════ #}
  766. <section class="n-sec">
  767.     <div class="n-wrap">
  768.         <div class="n-center">
  769.             <div class="n-label trn" data-trn-key="_H_PATHS_LABEL_">Choose your path</div>
  770.             <h2 class="n-h2"><span class="trn" data-trn-key="_H_PATHS_H2_">One ecosystem,</span> <em class="n-em">four ways to start.</em></h2>
  771.             <p class="n-body n-mt-4 trn" data-trn-key="_H_PATHS_DESC_">Project ERP for project-based companies, Business ERP for everyday operations, and HoneyCore Edge EMS for site and energy intelligence — connected by HoneyBee AI, Cloud and Mobile.</p>
  772.         </div>
  773.         <div class="n-paths-grid" style="display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:40px;align-items:stretch;">
  774.             {# Project ERP — emphasized #}
  775.             <div style="border:2px solid var(--n-amber);border-radius:16px;padding:28px;background:#fff;display:flex;flex-direction:column;box-shadow:0 8px 30px rgba(192,125,42,.08);">
  776.                 <span style="align-self:flex-start;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--n-amber);margin-bottom:12px;">Best for EPC / Projects</span>
  777.                 <h3 style="font-size:21px;margin:0 0 8px;color:var(--n-dark);">Project ERP</h3>
  778.                 <p style="font-size:14.5px;color:var(--n-muted);flex:1;margin:0 0 18px;line-height:1.55;">Control every project from quotation to cash collection — BoQ, cost, procurement, inventory, site progress, milestone billing, retention, supplier payments, and final margin in one cockpit, including HoneyCore Edge+ project workflows.</p>
  779.                 <a href="{{ url('honeybee_project_erp') }}" class="n-btn n-btn-primary" style="align-self:flex-start;">Explore Project ERP <i class="fa-solid fa-arrow-right"></i></a>
  780.             </div>
  781.             {# Business ERP #}
  782.             <div style="border:1px solid var(--n-line,#e6e0d6);border-radius:16px;padding:28px;background:#fff;display:flex;flex-direction:column;">
  783.                 <h3 style="font-size:21px;margin:0 0 8px;color:var(--n-dark);">Business ERP</h3>
  784.                 <p style="font-size:14.5px;color:var(--n-muted);flex:1;margin:0 0 18px;line-height:1.55;">Not an EPC or energy company? Start with HR, accounts, inventory, sales, purchase, CRM, approvals, and reporting — then expand only when needed.</p>
  785.                 <a href="{{ url('honeybee_business_erp') }}" class="n-btn n-btn-outline" style="align-self:flex-start;">Explore Business ERP</a>
  786.             </div>
  787.             {# HoneyCore Edge EMS #}
  788.             <div style="border:1px solid var(--n-line,#e6e0d6);border-radius:16px;padding:28px;background:#fff;display:flex;flex-direction:column;">
  789.                 <h3 style="font-size:21px;margin:0 0 8px;color:var(--n-dark);">HoneyCore Edge EMS</h3>
  790.                 <p style="font-size:14.5px;color:var(--n-muted);flex:1;margin:0 0 18px;line-height:1.55;">For companies that need IoT, solar PV, grid, generator, battery, meter, sensor, utility, cold-chain, EMS, SCADA, and infrastructure intelligence connected to O&amp;M, billing, finance, and reporting.</p>
  791.                 <a href="{{ url('honeybee_edge') }}" class="n-btn n-btn-outline" style="align-self:flex-start;">Explore HoneyCore Edge EMS</a>
  792.             </div>
  793.             {# Custom Business + Energy Solution #}
  794.             <div style="border:1px solid var(--n-line,#e6e0d6);border-radius:16px;padding:28px;background:#fff;display:flex;flex-direction:column;">
  795.                 <h3 style="font-size:21px;margin:0 0 8px;color:var(--n-dark);">Custom Business + Energy Solution</h3>
  796.                 <p style="font-size:14.5px;color:var(--n-muted);flex:1;margin:0 0 18px;line-height:1.55;">Build a tailored Business + Energy solution. For companies needing ERP, project workflows, HoneyCore, IoT, AI, dashboards, private cloud or energy infrastructure integration in one tailored solution.</p>
  797.                 <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-outline" style="align-self:flex-start;">Request Custom Quote</a>
  798.             </div>
  799.         </div>
  800.         {# HoneyCore Edge+ design capability strip #}
  801.         <div style="margin-top:28px;border-radius:16px;padding:24px 28px;background:var(--n-cream);display:flex;gap:20px;align-items:center;flex-wrap:wrap;justify-content:space-between;">
  802.             <div style="max-width:680px;">
  803.                 <h4 style="margin:0 0 6px;font-size:16px;color:var(--n-dark);">HoneyCore Edge+ projects, from site design to quote to O&amp;M.</h4>
  804.                 <p style="margin:0;font-size:14px;color:var(--n-muted);line-height:1.55;">Turn site requirements into sensor and meter schedules, gateway plans, Edge controller sizing, protocol maps, BoQ, quotation, deployment plan, commissioning checklist, O&amp;M workflow, and recurring monitoring subscription — all within the HoneyCore Edge+ layer.</p>
  805.             </div>
  806.             <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-primary" style="white-space:nowrap;">Request HoneyCore Edge+ Design Assessment</a>
  807.         </div>
  808.     </div>
  809. </section>
  811. {# ══ 2c. THE REAL PROBLEM ══════════════════════════════════════════════════════ #}
  812. <section class="n-sec" style="background:var(--n-white);border-top:1px solid var(--n-border)">
  813.     <div class="n-wrap">
  814.         <div class="n-center">
  815.             <div class="n-label">The real problem</div>
  816.             <h2 class="n-h2">Your business isn't failing from lack of effort. It's slowed by <em class="n-em">disconnected systems.</em></h2>
  817.         </div>
  818.         <div class="n-problem-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:12px 32px;margin-top:48px;max-width:880px;margin-left:auto;margin-right:auto;">
  819.             <div style="display:flex;align-items:flex-start;gap:12px;padding:14px 18px;background:var(--n-cream);border:1px solid var(--n-border);border-radius:var(--n-radius-sm);"><span style="width:7px;height:7px;border-radius:50%;background:var(--n-amber);flex-shrink:0;margin-top:7px;"></span><span style="font-size:14.5px;color:var(--n-dark);line-height:1.5;">Projects managed in Excel</span></div>
  820.             <div style="display:flex;align-items:flex-start;gap:12px;padding:14px 18px;background:var(--n-cream);border:1px solid var(--n-border);border-radius:var(--n-radius-sm);"><span style="width:7px;height:7px;border-radius:50%;background:var(--n-amber);flex-shrink:0;margin-top:7px;"></span><span style="font-size:14.5px;color:var(--n-dark);line-height:1.5;">Approvals happen in WhatsApp</span></div>
  821.             <div style="display:flex;align-items:flex-start;gap:12px;padding:14px 18px;background:var(--n-cream);border:1px solid var(--n-border);border-radius:var(--n-radius-sm);"><span style="width:7px;height:7px;border-radius:50%;background:var(--n-amber);flex-shrink:0;margin-top:7px;"></span><span style="font-size:14.5px;color:var(--n-dark);line-height:1.5;">Accounts disconnected from project reality</span></div>
  822.             <div style="display:flex;align-items:flex-start;gap:12px;padding:14px 18px;background:var(--n-cream);border:1px solid var(--n-border);border-radius:var(--n-radius-sm);"><span style="width:7px;height:7px;border-radius:50%;background:var(--n-amber);flex-shrink:0;margin-top:7px;"></span><span style="font-size:14.5px;color:var(--n-dark);line-height:1.5;">Procurement not linked to BoQ and site demand</span></div>
  823.             <div style="display:flex;align-items:flex-start;gap:12px;padding:14px 18px;background:var(--n-cream);border:1px solid var(--n-border);border-radius:var(--n-radius-sm);"><span style="width:7px;height:7px;border-radius:50%;background:var(--n-amber);flex-shrink:0;margin-top:7px;"></span><span style="font-size:14.5px;color:var(--n-dark);line-height:1.5;">Inventory not connected to project execution</span></div>
  824.             <div style="display:flex;align-items:flex-start;gap:12px;padding:14px 18px;background:var(--n-cream);border:1px solid var(--n-border);border-radius:var(--n-radius-sm);"><span style="width:7px;height:7px;border-radius:50%;background:var(--n-amber);flex-shrink:0;margin-top:7px;"></span><span style="font-size:14.5px;color:var(--n-dark);line-height:1.5;">HR and payroll not linked to project costing</span></div>
  825.             <div style="display:flex;align-items:flex-start;gap:12px;padding:14px 18px;background:var(--n-cream);border:1px solid var(--n-border);border-radius:var(--n-radius-sm);"><span style="width:7px;height:7px;border-radius:50%;background:var(--n-amber);flex-shrink:0;margin-top:7px;"></span><span style="font-size:14.5px;color:var(--n-dark);line-height:1.5;">O&amp;M reports don't connect to billing</span></div>
  826.             <div style="display:flex;align-items:flex-start;gap:12px;padding:14px 18px;background:var(--n-cream);border:1px solid var(--n-border);border-radius:var(--n-radius-sm);"><span style="width:7px;height:7px;border-radius:50%;background:var(--n-amber);flex-shrink:0;margin-top:7px;"></span><span style="font-size:14.5px;color:var(--n-dark);line-height:1.5;">Energy assets sit in isolated dashboards</span></div>
  827.             <div style="display:flex;align-items:flex-start;gap:12px;padding:14px 18px;background:var(--n-cream);border:1px solid var(--n-border);border-radius:var(--n-radius-sm);"><span style="width:7px;height:7px;border-radius:50%;background:var(--n-amber);flex-shrink:0;margin-top:7px;"></span><span style="font-size:14.5px;color:var(--n-dark);line-height:1.5;">Management sees late or incomplete reports</span></div>
  828.             <div style="display:flex;align-items:flex-start;gap:12px;padding:14px 18px;background:var(--n-cream);border:1px solid var(--n-border);border-radius:var(--n-radius-sm);"><span style="width:7px;height:7px;border-radius:50%;background:var(--n-amber);flex-shrink:0;margin-top:7px;"></span><span style="font-size:14.5px;color:var(--n-dark);line-height:1.5;">AI can't help when business data is fragmented</span></div>
  829.         </div>
  830.     </div>
  831. </section>
  833. {# ══ 2d. A NEW CATEGORY ════════════════════════════════════════════════════════ #}
  834. <section class="n-sec" style="background:var(--n-cream)">
  835.     <div class="n-wrap">
  836.         <div class="n-center">
  837.             <div class="n-label">A new category</div>
  838.             <h2 class="n-h2">One operating system where business, projects and <em class="n-em">energy assets work together.</em></h2>
  839.             <p class="n-body n-mt-4">Generic ERP manages records. Project tools manage tasks. SCADA and EMS tools monitor assets. HoneyBee connects all three: business operations, project execution and energy-infrastructure intelligence.</p>
  840.         </div>
  841.         <div class="n-vs-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:48px;">
  842.             <div style="background:#fff;border:1px solid var(--n-border);border-radius:var(--n-radius);padding:28px;">
  843.                 <span style="font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--n-amber);font-family:monospace;">HoneyBee vs Generic ERP</span>
  844.                 <p style="margin:12px 0 0;font-size:14.5px;color:var(--n-muted);line-height:1.6;">Generic ERP manages business records. HoneyBee connects business records, project execution, finance, field operations and energy infrastructure.</p>
  845.             </div>
  846.             <div style="background:#fff;border:1px solid var(--n-border);border-radius:var(--n-radius);padding:28px;">
  847.                 <span style="font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--n-amber);font-family:monospace;">HoneyBee vs Excel</span>
  848.                 <p style="margin:12px 0 0;font-size:14.5px;color:var(--n-muted);line-height:1.6;">Excel is flexible but fragile. HoneyBee gives structure, audit trail, approvals, real-time data and automation.</p>
  849.             </div>
  850.             <div style="background:#fff;border:1px solid var(--n-border);border-radius:var(--n-radius);padding:28px;">
  851.                 <span style="font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--n-amber);font-family:monospace;">HoneyBee vs Project tools</span>
  852.                 <p style="margin:12px 0 0;font-size:14.5px;color:var(--n-muted);line-height:1.6;">Project tools manage tasks. HoneyBee connects tasks with quotation, BoQ, procurement, inventory, billing, HR, accounts and profitability.</p>
  853.             </div>
  854.             <div style="background:#fff;border:1px solid var(--n-border);border-radius:var(--n-radius);padding:28px;">
  855.                 <span style="font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--n-amber);font-family:monospace;">HoneyBee vs SCADA / EMS / IoT dashboards</span>
  856.                 <p style="margin:12px 0 0;font-size:14.5px;color:var(--n-muted);line-height:1.6;">SCADA/EMS tools monitor assets. HoneyBee connects asset data with ERP, O&amp;M, billing, reporting and AI.</p>
  857.             </div>
  858.         </div>
  859.     </div>
  860. </section>
  862. {# ══ 3. BUILT FOR WHERE YOU WORK ═══════════════════════════════════════════════ #}
  863. <section class="n-sec" style="background:var(--n-cream)">
  864.     <div class="n-wrap">
  865.         <div class="n-center">
  866.             <div class="n-label trn" data-trn-key="_H_REGIONS_LABEL_">Built for your industry</div>
  867.             <h2 class="n-h2"><span class="trn" data-trn-key="_H_REGIONS_H2_">Built for how your projects and sites</span> <em class="n-em trn" data-trn-key="_H_REGIONS_H2_EM_">actually run.</em></h2>
  868.             <p class="n-body n-mt-4 trn" data-trn-key="_H_REGIONS_DESC_">EPC and system integration companies, energy asset operators, and multi-site industrial businesses.</p>
  869.         </div>
  870.         <div class="n-region-grid">
  871.             <div class="n-region-card">
  872.                 <div class="n-region-head">
  873.                     <div>
  874.                         <h3 class="trn" data-trn-key="_H_REG_DE_H3_">EPC Companies</h3>
  875.                     </div>
  876.                 </div>
  877.                 <p class="trn" data-trn-key="_H_REG_DE_P_">Manage proposals, procurement, site execution, commissioning, cost control, and O&M handover from one platform.</p>
  878.                 <ul class="n-region-feats">
  879.                     <li class="trn" data-trn-key="_H_REG_DE_F1_">Proposal &amp; bid management</li>
  880.                     <li class="trn" data-trn-key="_H_REG_DE_F2_">Procurement &amp; site logistics</li>
  881.                     <li class="trn" data-trn-key="_H_REG_DE_F3_">Project cost control</li>
  882.                     <li class="trn" data-trn-key="_H_REG_DE_F4_">Commissioning documentation</li>
  883.                     <li class="trn" data-trn-key="_H_REG_DE_F5_">O&amp;M handover workflow</li>
  884.                 </ul>
  885.             </div>
  886.             <div class="n-region-card">
  887.                 <div class="n-region-head">
  888.                     <div>
  889.                         <h3 class="trn" data-trn-key="_H_REG_SG_H3_">System Integrators</h3>
  890.                     </div>
  891.                 </div>
  892.                 <p class="trn" data-trn-key="_H_REG_SG_P_">Coordinate hardware deployment, software configuration, support, and customer-specific integration workflows.</p>
  893.                 <ul class="n-region-feats">
  894.                     <li class="trn" data-trn-key="_H_REG_SG_F1_">Hardware &amp; software delivery</li>
  895.                     <li class="trn" data-trn-key="_H_REG_SG_F2_">Technical configuration</li>
  896.                     <li class="trn" data-trn-key="_H_REG_SG_F3_">Integration project management</li>
  897.                     <li class="trn" data-trn-key="_H_REG_SG_F4_">Customer support workflows</li>
  898.                     <li class="trn" data-trn-key="_H_REG_SG_F5_">Recurring service operations</li>
  899.                 </ul>
  900.             </div>
  901.             <div class="n-region-card">
  902.                 <div class="n-region-head">
  903.                     <div>
  904.                         <h3 class="trn" data-trn-key="_H_REG_NO_H3_">Energy Project Developers</h3>
  905.                     </div>
  906.                 </div>
  907.                 <p class="trn" data-trn-key="_H_REG_NO_P_">Track development pipelines, contractors, asset performance, financial reporting, and investor-facing visibility.</p>
  908.                 <ul class="n-region-feats">
  909.                     <li class="trn" data-trn-key="_H_REG_NO_F1_">Project pipeline management</li>
  910.                     <li class="trn" data-trn-key="_H_REG_NO_F2_">EPC contractor coordination</li>
  911.                     <li class="trn" data-trn-key="_H_REG_NO_F3_">Asset performance tracking</li>
  912.                     <li class="trn" data-trn-key="_H_REG_NO_F4_">Financial modelling support</li>
  913.                     <li class="trn" data-trn-key="_H_REG_NO_F5_">Investor reporting</li>
  914.                 </ul>
  915.             </div>
  916.             <div class="n-region-card">
  917.                 <div class="n-region-head">
  918.                     <div>
  919.                         <h3 class="trn" data-trn-key="_H_REG_BD_H3_">IPP / OPEX / PPA Operators</h3>
  920.                     </div>
  921.                 </div>
  922.                 <p class="trn" data-trn-key="_H_REG_BD_P_">Connect site-level HoneyCore Edge+ IoT data with ERP billing, O&M, performance reporting, and project finance workflows.</p>
  923.                 <ul class="n-region-feats">
  924.                     <li class="trn" data-trn-key="_H_REG_BD_F1_">HoneyCore Edge+ IoT integration</li>
  925.                     <li class="trn" data-trn-key="_H_REG_BD_F2_">Consumption-based billing</li>
  926.                     <li class="trn" data-trn-key="_H_REG_BD_F3_">O&amp;M workflow management</li>
  927.                     <li class="trn" data-trn-key="_H_REG_BD_F4_">Performance &amp; availability tracking</li>
  928.                     <li class="trn" data-trn-key="_H_REG_BD_F5_">Project finance visibility</li>
  929.                 </ul>
  930.             </div>
  931.             <div class="n-region-card">
  932.                 <div class="n-region-head">
  933.                     <div>
  934.                         <h3 class="trn" data-trn-key="_H_REG_MS_H3_">Multi-Site Industrial Operators</h3>
  935.                     </div>
  936.                 </div>
  937.                 <p class="trn" data-trn-key="_H_REG_MS_P_">Control multiple plants, projects, teams, assets, and workflows across locations from one command layer.</p>
  938.                 <ul class="n-region-feats">
  939.                     <li class="trn" data-trn-key="_H_REG_MS_F1_">Multi-site command center</li>
  940.                     <li class="trn" data-trn-key="_H_REG_MS_F2_">Cross-team project control</li>
  941.                     <li class="trn" data-trn-key="_H_REG_MS_F3_">Asset &amp; maintenance management</li>
  942.                     <li class="trn" data-trn-key="_H_REG_MS_F4_">Finance across locations</li>
  943.                     <li class="trn" data-trn-key="_H_REG_MS_F5_">Operational performance dashboards</li>
  944.                 </ul>
  945.             </div>
  946.             <div class="n-region-card">
  947.                 <div class="n-region-head">
  948.                     <div>
  949.                         <h3 class="trn" data-trn-key="_H_REG_LP_H3_">Local Deployment Partners</h3>
  950.                     </div>
  951.                 </div>
  952.                 <p class="trn" data-trn-key="_H_REG_LP_P_">Support country-level rollout, infrastructure setup, training, hardware integration, and first-level customer support.</p>
  953.                 <ul class="n-region-feats">
  954.                     <li class="trn" data-trn-key="_H_REG_LP_F1_">Country-level ERP rollout</li>
  955.                     <li class="trn" data-trn-key="_H_REG_LP_F2_">Hardware &amp; HoneyCore Edge EMS setup</li>
  956.                     <li class="trn" data-trn-key="_H_REG_LP_F3_">Customer training &amp; onboarding</li>
  957.                     <li class="trn" data-trn-key="_H_REG_LP_F4_">First-level support</li>
  958.                     <li class="trn" data-trn-key="_H_REG_LP_F5_">DATEV collaboration</li>
  959.                 </ul>
  960.             </div>
  961.         </div>
  962.     </div>
  963. </section>
  965. {# ══ 4. SIX SYSTEMS ════════════════════════════════════════════════════════════ #}
  966. <section class="n-sec" style="background:var(--n-white);border-top:1px solid var(--n-border);border-bottom:1px solid var(--n-border)">
  967.     <div class="n-wrap">
  968.         <div class="n-center">
  969.             <div class="n-label trn" data-trn-key="_H_SYSTEMS_LABEL_">What's inside</div>
  970.             <h2 class="n-h2"><span class="trn" data-trn-key="_H_SYSTEMS_H2_">Nine modules,</span> <em class="n-em trn" data-trn-key="_H_SYSTEMS_H2_EM_">one source of truth.</em></h2>
  971.             <p class="n-body n-mt-4 trn" data-trn-key="_H_SYSTEMS_DESC_">From proposal to project execution, site data, billing, and O&amp;M — all in one system. HoneyCore Edge EMS connects site-level data directly to billing, O&amp;M, reporting, and operational decisions.</p>
  972.         </div>
  973.         <div class="n-six-grid">
  974.             <div class="n-sys-card">
  975.                 <span class="n-sys-tag trn" data-trn-key="_H_SYS1_TAG_">01 / Sales &amp; CRM</span>
  976.                 <h3 class="trn" data-trn-key="_H_SYS1_H3_">Sales &amp; CRM</h3>
  977.                 <p class="trn" data-trn-key="_H_SYS1_P_">Lead to cash in Kanban. Proposals with Incoterm breakdown, margin rules, and cost pie charts — all in one visual workspace.</p>
  978.                 <ul class="n-sys-chips"><li>Pipeline Kanban</li><li>Proposal builder</li><li>Margin rules</li><li>Unified quote + invoice</li></ul>
  979.             </div>
  980.             <div class="n-sys-card">
  981.                 <span class="n-sys-tag trn" data-trn-key="_H_SYS2_TAG_">02 / Projects</span>
  982.                 <h3 class="trn" data-trn-key="_H_SYS2_H3_">Project Management</h3>
  983.                 <p class="trn" data-trn-key="_H_SYS2_P_">WBS, RACI, live costing. Break projects into work packages, assign RACI at the task level, track budget burn in real time.</p>
  984.                 <ul class="n-sys-chips"><li>WBS tree</li><li>RACI matrix</li><li>Workplan</li><li>Cost reports</li></ul>
  985.             </div>
  986.             <div class="n-sys-card">
  987.                 <span class="n-sys-tag trn" data-trn-key="_H_SYS3_TAG_">03 / Procurement</span>
  988.                 <h3 class="trn" data-trn-key="_H_SYS3_H3_">Procurement &amp; Supply Chain</h3>
  989.                 <p class="trn" data-trn-key="_H_SYS3_P_">Purchase orders, vendor management, site logistics, and delivery tracking — connected to projects and finance without duplicate entry.</p>
  990.                 <ul class="n-sys-chips"><li>Purchase orders</li><li>Vendor management</li><li>Site logistics</li><li>Delivery tracking</li></ul>
  991.             </div>
  992.             <div class="n-sys-card">
  993.                 <span class="n-sys-tag trn" data-trn-key="_H_SYS4_TAG_">04 / Finance</span>
  994.                 <h3 class="trn" data-trn-key="_H_SYS4_H3_">Finance &amp; Accounting</h3>
  995.                 <p class="trn" data-trn-key="_H_SYS4_P_">Bank reconciliation, chart of accounts, loan &amp; EMI schedules, expenses, and DATEV export for company and tax consultant.</p>
  996.                 <ul class="n-sys-chips"><li>Auto bank rec</li><li>Loan / EMI</li><li>DATEV dual-view</li><li>Expenses</li></ul>
  997.             </div>
  998.             <div class="n-sys-card">
  999.                 <span class="n-sys-tag trn" data-trn-key="_H_SYS5_TAG_">05 / O&amp;M</span>
  1000.                 <h3 class="trn" data-trn-key="_H_SYS5_H3_">O&amp;M &amp; Field Operations</h3>
  1001.                 <p class="trn" data-trn-key="_H_SYS5_P_">Maintenance scheduling, field team dispatch, work orders, and asset uptime tracking — all connected to billing and reporting.</p>
  1002.                 <ul class="n-sys-chips"><li>Maintenance scheduling</li><li>Work orders</li><li>Asset tracking</li><li>Field dispatch</li></ul>
  1003.             </div>
  1004.             <div class="n-sys-card">
  1005.                 <span class="n-sys-tag trn" data-trn-key="_H_SYS6_TAG_">06 / HoneyCore Edge EMS</span>
  1006.                 <h3 class="trn" data-trn-key="_H_SYS6_H3_">HoneyCore Edge EMS Monitoring <span class="n-mat-pill n-mat-site">Site-scoped</span></h3>
  1007.                 <p class="trn" data-trn-key="_H_SYS6_P_">InfluxDB-backed cloud dashboards with HoneyCore Edge EMS site intelligence. Sensor and PLC data flows into the same analytics layer as finance and projects.</p>
  1008.                 <ul class="n-sys-chips"><li>InfluxDB</li><li>Time-series viz</li><li>HoneyCore Edge EMS</li><li>PLC + sensor ready</li></ul>
  1009.             </div>
  1010.             <div class="n-sys-card">
  1011.                 <span class="n-sys-tag trn" data-trn-key="_H_SYS7_TAG_">07 / AI</span>
  1012.                 <h3 class="trn" data-trn-key="_H_SYS7_H3_">AI Reporting <span class="n-mat-pill n-mat-now">Available now</span></h3>
  1013.                 <p class="trn" data-trn-key="_H_SYS7_P_">Native LLM layer with persistent outputs — generated reports save to history, rerun, share, and audit. Ask anything across your live data.</p>
  1014.                 <ul class="n-sys-chips"><li>Persistent AI outputs</li><li>Email auto-classify</li><li>Transaction tagging</li><li>Spotlight search</li></ul>
  1015.             </div>
  1016.             <div class="n-sys-card">
  1017.                 <span class="n-sys-tag trn" data-trn-key="_H_SYS8_TAG_">08 / Command Center</span>
  1018.                 <h3 class="trn" data-trn-key="_H_SYS8_H3_">Multi-company Command Center</h3>
  1019.                 <p class="trn" data-trn-key="_H_SYS8_P_">One console to monitor every entity, switch companies, consolidate, and audit activity — with auto-tickets when errors fire.</p>
  1020.                 <ul class="n-sys-chips"><li>Multi-company</li><li>Activity audit</li><li>Auto-ticket on error</li><li>Central monitoring</li></ul>
  1021.             </div>
  1022.             <div class="n-sys-card">
  1023.                 <span class="n-sys-tag trn" data-trn-key="_H_SYS9_TAG_">09 / Mobile</span>
  1024.                 <h3 class="trn" data-trn-key="_H_SYS9_H3_">Mobile App</h3>
  1025.                 <p class="trn" data-trn-key="_H_SYS9_P_">Field teams approve POs on-site. Sales reps clock in from client meetings. The Beezeness app brings the full workspace to wherever work happens.</p>
  1026.                 <ul class="n-sys-chips"><li>iOS + Android</li><li>Offline clock-in</li><li>Bulk approvals</li><li>QR onboarding</li></ul>
  1027.             </div>
  1028.         </div>
  1029.     </div>
  1030. </section>
  1032. {# ══ 5. NATIVE AI / LLM — featured product section ════════════════════════════ #}
  1033. <section class="n-ai-section">
  1034.     <div class="n-wrap" style="position:relative;z-index:2">
  1035.         <div style="display:grid;grid-template-columns:1fr 1.1fr;gap:72px;align-items:start">
  1037.             {# Left: copy + use cases #}
  1038.             <div>
  1039.                 <div class="n-label n-ai-label trn" data-trn-key="_H_AI_LABEL_">Native AI &amp; LLM</div>
  1040.                 <h2 class="n-ai-h2"><span class="trn" data-trn-key="_H_AI_H2_">Your operating system,</span><br><span class="trn" data-trn-key="_H_AI_H2_CONT_">now with</span> <em class="trn" data-trn-key="_H_AI_H2_EM_">intelligence.</em></h2>
  1041.                 <p class="n-ai-lead trn" data-trn-key="_H_AI_LEAD_">
  1042.                     HoneyBee ships with a native AI and LLM layer that works directly on your company data. Ask it to build a sales proposal, plan a project from scratch, or generate any report across your live financials — in plain language, with no prompt engineering required.
  1043.                 </p>
  1044.                 <div style="display:flex;gap:14px;align-items:flex-start;padding:18px 22px;margin-bottom:40px;background:rgba(192,125,42,.08);border:1px solid rgba(192,125,42,.3);border-left:3px solid var(--n-amber);border-radius:var(--n-radius-sm);">
  1045.                     <i class="fa-solid fa-shield-halved" style="color:var(--n-amber);font-size:16px;margin-top:2px;flex-shrink:0;"></i>
  1046.                     <p style="margin:0;font-size:14.5px;line-height:1.6;color:#fff;font-weight:600;">AI suggests. Humans approve. HoneyBee keeps the ERP record, audit trail, role permissions and approval workflow as the source of truth.</p>
  1047.                 </div>
  1048.                 <div class="n-ai-use-cases">
  1049.                     <div class="n-ai-use">
  1050.                         <div class="n-ai-use-icon"><i class="fa-solid fa-file-invoice-dollar"></i></div>
  1051.                         <div>
  1052.                             <h4 class="trn" data-trn-key="_H_AI_UC1_H_">Generate sales proposals</h4>
  1053.                             <p class="trn" data-trn-key="_H_AI_UC1_P_">Describe the client, scope, and pricing intent. The AI assistant drafts a full proposal with your company branding, Incoterm breakdown, and margin analysis — ready to send.</p>
  1054.                         </div>
  1055.                     </div>
  1056.                     <div class="n-ai-use">
  1057.                         <div class="n-ai-use-icon"><i class="fa-solid fa-diagram-project"></i></div>
  1058.                         <div>
  1059.                             <h4 class="trn" data-trn-key="_H_AI_UC2_H_">Create projects from scratch</h4>
  1060.                             <p class="trn" data-trn-key="_H_AI_UC2_P_">Describe the project outcome. The AI generates a WBS tree, assigns RACI roles, sets milestones, and populates a full workplan — weeks of planning in seconds.</p>
  1061.                         </div>
  1062.                     </div>
  1063.                     <div class="n-ai-use">
  1064.                         <div class="n-ai-use-icon"><i class="fa-solid fa-chart-bar"></i></div>
  1065.                         <div>
  1066.                             <h4 class="trn" data-trn-key="_H_AI_UC3_H_">Generate reports on demand</h4>
  1067.                             <p class="trn" data-trn-key="_H_AI_UC3_P_">Ask for any business report — cash flow projections, project margin analysis, sales pipeline health, HR cost breakdown — built on your live company data, not sample data.</p>
  1068.                         </div>
  1069.                     </div>
  1070.                     <div class="n-ai-use">
  1071.                         <div class="n-ai-use-icon"><i class="fa-solid fa-envelope-open-text"></i></div>
  1072.                         <div>
  1073.                             <h4 class="trn" data-trn-key="_H_AI_UC4_H_">Classify &amp; act on emails <span class="n-mat-pill n-mat-roll" style="color:var(--n-amber);border-color:rgba(192,125,42,.35);background:rgba(192,125,42,.12);">Controlled rollout</span></h4>
  1074.                             <p class="trn" data-trn-key="_H_AI_UC4_P_">Connect Gmail or Outlook. The AI tags every incoming message (proposal, support, general) with a confidence score and surfaces the ones that need action today.</p>
  1075.                         </div>
  1076.                     </div>
  1077.                 </div>
  1078.             </div>
  1080.             {# Right: two deployment paths #}
  1081.             <div>
  1082.                 <div style="margin-bottom:20px">
  1083.                     <span style="font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.35);font-family:monospace" class="trn" data-trn-key="_H_AI_DEPLOY_LABEL_">Choose your deployment</span>
  1084.                 </div>
  1085.                 <div class="n-ai-paths">
  1086.                     {# Cloud LLM — horizontal compact row #}
  1087.                     <div class="n-ai-path n-ai-path-cloud">
  1088.                         <div>
  1089.                             <div class="n-ai-path-badge trn" data-trn-key="_H_AI_CLOUD_BADGE_">Option 01 — Cloud AI</div>
  1090.                             <h3 class="trn" data-trn-key="_H_AI_CLOUD_TITLE_">Hosted LLM by HoneyBee</h3>
  1091.                             <p class="trn" data-trn-key="_H_AI_CLOUD_P_">Managed infrastructure on EU servers. No hardware, no setup. Activate individually per user — standard seats stay at €7.99/mo.</p>
  1092.                             <div style="display:flex;gap:8px;flex-wrap:wrap;margin-top:12px">
  1093.                                 <span style="font-size:11px;padding:3px 9px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:4px;color:rgba(255,255,255,.5);font-family:monospace" class="trn" data-trn-key="_H_AI_CLOUD_TAG1_">EU-hosted</span>
  1094.                                 <span style="font-size:11px;padding:3px 9px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:4px;color:rgba(255,255,255,.5);font-family:monospace" class="trn" data-trn-key="_H_AI_CLOUD_TAG2_">GDPR-aligned</span>
  1095.                                 <span style="font-size:11px;padding:3px 9px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:4px;color:rgba(255,255,255,.5);font-family:monospace" class="trn" data-trn-key="_H_AI_CLOUD_TAG3_">Always latest model</span>
  1096.                             </div>
  1097.                         </div>
  1098.                         <div class="n-ai-price-block">
  1099.                             <span class="n-ai-price-num">€25</span>
  1100.                             <span class="n-ai-price-unit trn" data-trn-key="_H_AI_CLOUD_UNIT_">/ AI user / mo</span>
  1101.                         </div>
  1102.                     </div>
  1104.                     {# Native LLM — full card, premium treatment #}
  1105.                     <div class="n-ai-path n-ai-path-native">
  1106.                         <div class="n-native-top">
  1107.                             <div>
  1108.                                 <div class="n-ai-path-badge trn" data-trn-key="_H_AI_NATIVE_BADGE_">Option 02 — Native / On-Premise</div>
  1109.                                 <span class="n-mat-pill n-mat-road" style="margin-left:0;margin-bottom:8px;color:rgba(255,255,255,.55);background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.15);">Roadmap</span>
  1110.                                 <h3 style="font-size:20px;margin-bottom:8px"><span class="trn" data-trn-key="_H_AI_NATIVE_H3_">Your own GPU server.</span><br><span style="color:var(--n-amber)" class="trn" data-trn-key="_H_AI_NATIVE_H3_EM_">Your data. Full stop.</span></h3>
  1111.                                 <p style="max-width:340px" class="trn" data-trn-key="_H_AI_NATIVE_P_">A dedicated LLM server installed on your compound by our engineering team. Fully air-gapped — your business data never touches an external network.</p>
  1112.                             </div>
  1113.                             <div style="text-align:right;flex-shrink:0">
  1114.                                 <div style="font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.35);font-family:monospace;margin-bottom:6px" class="trn" data-trn-key="_H_AI_NATIVE_OTI_">One-time investment</div>
  1115.                                 <div style="font-family:'Montserrat',sans-serif;font-size:34px;font-weight:900;color:#fff;line-height:1">from €6k</div>
  1116.                                 <div style="font-size:11px;color:rgba(255,255,255,.35);font-family:monospace;margin-top:4px" class="trn" data-trn-key="_H_AI_NATIVE_INST_">hardware + installation · 1× or 2× RTX 5090</div>
  1117.                                 <div style="margin-top:8px;display:inline-flex;align-items:center;gap:5px;padding:4px 10px;background:rgba(61,107,82,.2);border:1px solid rgba(61,107,82,.4);border-radius:4px">
  1118.                                     <i class="fa-solid fa-circle" style="font-size:6px;color:#7DC4A0"></i>
  1119.                                     <span style="font-size:10px;font-weight:700;color:#7DC4A0;font-family:monospace;letter-spacing:.06em;text-transform:uppercase" class="trn" data-trn-key="_H_AI_NATIVE_UNLIM_">Unlimited AI users</span>
  1120.                                 </div>
  1121.                             </div>
  1122.                         </div>
  1124.                         {# Hardware options #}
  1125.                         <div class="n-native-hw-row">
  1126.                             <div class="n-native-hw-label trn" data-trn-key="_H_AI_HW_LABEL_">Hardware options</div>
  1127.                             <span class="n-hw-chip n-hw-chip-gpu">
  1128.                                 <i class="fa-solid fa-microchip"></i> 2× NVIDIA RTX 5090 · ~€10k
  1129.                             </span>
  1130.                             <span class="n-hw-chip n-hw-chip-gpu">
  1131.                                 <i class="fa-solid fa-microchip"></i> 1× NVIDIA RTX 5090 · ~€6k
  1132.                             </span>
  1133.                             <span class="n-hw-chip n-hw-chip-thor">
  1134.                                 <i class="fa-solid fa-bolt"></i> NVIDIA Jetson Thor · Edge-ready
  1135.                             </span>
  1136.                         </div>
  1138.                         <div class="n-native-divider"></div>
  1140.                         <div class="n-native-grid">
  1141.                             <div class="n-native-fact">
  1142.                                 <span class="n-native-fact-lbl trn" data-trn-key="_H_AI_FACT1_LBL_">Data residency</span>
  1143.                                 <span class="n-native-fact-val trn" data-trn-key="_H_AI_FACT1_VAL_">100% on your premises</span>
  1144.                             </div>
  1145.                             <div class="n-native-fact">
  1146.                                 <span class="n-native-fact-lbl trn" data-trn-key="_H_AI_FACT2_LBL_">Deployment</span>
  1147.                                 <span class="n-native-fact-val trn" data-trn-key="_H_AI_FACT2_VAL_">By our engineering team</span>
  1148.                             </div>
  1149.                             <div class="n-native-fact">
  1150.                                 <span class="n-native-fact-lbl trn" data-trn-key="_H_AI_FACT3_LBL_">Recurring cost</span>
  1151.                                 <span class="n-native-fact-val trn" data-trn-key="_H_AI_FACT3_VAL_">€0 per user / month</span>
  1152.                             </div>
  1153.                             <div class="n-native-fact">
  1154.                                 <span class="n-native-fact-lbl trn" data-trn-key="_H_AI_FACT4_LBL_">Best for</span>
  1155.                                 <span class="n-native-fact-val trn" data-trn-key="_H_AI_FACT4_VAL_">GoBD, GDPR, strict regimes</span>
  1156.                             </div>
  1157.                         </div>
  1159.                         <div style="padding-top:14px;border-top:1px solid rgba(255,255,255,.07)">
  1160.                             <ul class="n-ai-path-feats">
  1161.                                 <li class="trn" data-trn-key="_H_AI_FEAT1_">Full air-gap — no internet required for AI queries</li>
  1162.                                 <li class="trn" data-trn-key="_H_AI_FEAT2_">Works on your existing ERP data in real-time</li>
  1163.                                 <li class="trn" data-trn-key="_H_AI_FEAT3_">Runs open-weight models tuned for business tasks</li>
  1164.                             </ul>
  1165.                         </div>
  1166.                     </div>
  1167.                 </div>
  1168.                 <div style="margin-top:20px;padding:16px 20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--n-radius-sm)">
  1169.                     <p style="font-size:13px;color:rgba(255,255,255,.45);line-height:1.65;margin:0">
  1170.                         <strong style="color:rgba(255,255,255,.7)" class="trn" data-trn-key="_H_AI_HOW_STRONG_">How it works:</strong> <span class="trn" data-trn-key="_H_AI_HOW_P_">The AI assistant runs inside your HoneyBee workspace, connected to your live ERP data — financials, projects, CRM, HR. Ask it anything. It reads your actual records, not anonymized samples. On-premise deployments include a full installation visit from our engineering team.</span>
  1171.                     </p>
  1172.                 </div>
  1173.                 <div style="margin-top:16px">
  1174.                     <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-amber">
  1175.                         <i class="fa-solid fa-brain"></i> <span class="trn" data-trn-key="_H_AI_BTN_">Talk to us about AI deployment</span>
  1176.                     </a>
  1177.                 </div>
  1178.             </div>
  1180.         </div>
  1181.     </div>
  1182. </section>
  1184. {# ══ 6. MOBILE APP — BEEZENESS ════════════════════════════════════════════════ #}
  1185. <section class="n-sec" style="background:var(--n-cream)">
  1186.     <div class="n-wrap">
  1187.         <div class="n-mobile-layout">
  1188.             <div>
  1189.                 <span class="n-mobile-pill trn" data-trn-key="_H_MOBILE_PILL_">Nectar Beezeness · iOS + Android · included</span>
  1190.                 <h2 class="n-h2"><span class="trn" data-trn-key="_H_MOBILE_H2_">The same system,</span> <em class="n-em trn" data-trn-key="_H_MOBILE_H2_EM_">in your team's pocket.</em></h2>
  1191.                 <div style="width:40px;height:2px;background:var(--n-amber);border-radius:2px;margin:20px 0"></div>
  1192.                 <p class="n-body trn" data-trn-key="_H_MOBILE_P_">Field teams approve POs from a job site. Sales reps clock in from a client meeting. New hires onboard by scanning a QR code at induction. The Beezeness app brings the workspace your team already knows to wherever the work actually happens.</p>
  1193.                 <ul class="n-mobile-list">
  1194.                     <li class="trn" data-trn-key="_H_MOBILE_F1_">On-site expense capture with photo evidence</li>
  1195.                     <li class="trn" data-trn-key="_H_MOBILE_F2_">QR-based employee onboarding (scan to join)</li>
  1196.                     <li class="trn" data-trn-key="_H_MOBILE_F3_">Bulk approvals with notes, on phone</li>
  1197.                     <li class="trn" data-trn-key="_H_MOBILE_F4_">Biometric login (Face ID / fingerprint)</li>
  1198.                     <li class="trn" data-trn-key="_H_MOBILE_F5_">Plan visit: route optimization, team sharing</li>
  1199.                     <li class="trn" data-trn-key="_H_MOBILE_F6_">Stripe, bKash, and bank payment integration</li>
  1200.                     <li class="trn" data-trn-key="_H_MOBILE_F7_">Offline-capable clock-in and attendance</li>
  1201.                     <li class="trn" data-trn-key="_H_MOBILE_F8_">Real-time dashboard via socket connection</li>
  1202.                 </ul>
  1203.                 <div class="n-mobile-stores">
  1204.                     <button type="button" class="n-btn n-btn-outline" id="hbIosBtn" style="cursor:pointer;position:relative"
  1205.                             onclick="hbShowIosToast()" aria-label="iOS App Store — coming soon">
  1206.                         <i class="fa-brands fa-apple"></i>
  1207.                         <span class="trn" data-trn-key="_H_MOBILE_BTN_IOS_">iOS App Store</span>
  1208.                         <span style="position:absolute;top:-8px;right:-8px;background:var(--n-amber);color:#fff;font-size:9px;font-weight:700;letter-spacing:.04em;padding:2px 6px;border-radius:20px;line-height:1.4;white-space:nowrap">Soon</span>
  1209.                     </button>
  1210.                     <a href="https://play.google.com/store/search?q=nectar+beezness&c=apps" target="_blank" rel="noopener" class="n-btn n-btn-outline"><i class="fa-brands fa-google-play"></i> <span class="trn" data-trn-key="_H_MOBILE_BTN_ANDROID_">Google Play</span></a>
  1211.                 </div>
  1213.                 {# iOS coming-soon toast #}
  1214.                 <div id="hbIosToast" style="
  1215.                     display:none;position:fixed;bottom:32px;left:50%;transform:translateX(-50%);
  1216.                     background:var(--n-dark);color:#fff;font-family:'DM Sans',sans-serif;
  1217.                     font-size:.875rem;font-weight:500;padding:13px 22px;border-radius:10px;
  1218.                     box-shadow:0 8px 28px rgba(26,29,46,.22);z-index:99999;
  1219.                     display:flex;align-items:center;gap:10px;white-space:nowrap;
  1220.                     opacity:0;transition:opacity .2s;pointer-events:none;
  1221.                 " role="status" aria-live="polite">
  1222.                     <i class="fa-brands fa-apple" style="font-size:16px;color:var(--n-amber)"></i>
  1223.                     iOS app coming soon — available on Google Play now.
  1224.                 </div>
  1225.                 <script>
  1226.                 (function () {
  1227.                     var toast   = document.getElementById('hbIosToast');
  1228.                     var timer   = null;
  1229.                     window.hbShowIosToast = function () {
  1230.                         if (!toast) return;
  1231.                         clearTimeout(timer);
  1232.                         toast.style.display = 'flex';
  1233.                         /* force reflow so transition fires */
  1234.                         toast.offsetHeight;
  1235.                         toast.style.opacity = '1';
  1236.                         timer = setTimeout(function () {
  1237.                             toast.style.opacity = '0';
  1238.                             setTimeout(function () { toast.style.display = 'none'; }, 200);
  1239.                         }, 3500);
  1240.                     };
  1241.                 }());
  1242.                 </script>
  1243.             </div>
  1244.             <div class="n-phone-frame">
  1245.                 <div class="n-phone-notch"></div>
  1246.                 <div class="n-phone-screen" style="background:#f5f6f8;gap:5px;padding:18px 11px 11px">
  1247.                     <!-- status bar -->
  1248.                     <div style="display:flex;justify-content:space-between;margin-bottom:2px">
  1249.                         <span style="font-size:8px;color:var(--n-dark);font-weight:700;font-family:monospace">09:14</span>
  1250.                         <span style="font-size:8px;color:var(--n-dark);font-family:monospace">▲ 87%</span>
  1251.                     </div>
  1252.                     <!-- header -->
  1253.                     <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:5px">
  1254.                         <span style="font-size:12px;color:var(--n-muted);line-height:1">☰</span>
  1255.                         <span style="font-family:'Montserrat',sans-serif;font-size:12px;font-weight:800;color:var(--n-dark)">Dashboard</span>
  1256.                         <span style="font-size:11px;color:var(--n-muted)">🔔</span>
  1257.                     </div>
  1258.                     <!-- balance card -->
  1259.                     <div style="background:#fff;border-radius:9px;padding:9px 11px;border:0.5px solid var(--n-border-md)">
  1260.                         <div style="font-size:8px;color:var(--n-muted);margin-bottom:3px">Current Balance</div>
  1261.                         <div style="display:flex;align-items:center;justify-content:space-between">
  1262.                             <span style="font-family:'Montserrat',sans-serif;font-size:18px;font-weight:800;color:var(--n-dark)">€24,180</span>
  1263.                             <span style="background:rgba(192,125,42,.1);color:var(--n-amber);border-radius:20px;padding:2px 7px;font-size:7px;font-weight:700">▲ €3.2K Past Week</span>
  1264.                         </div>
  1265.                         <div style="display:inline-block;background:rgba(61,107,82,.12);color:var(--n-sage);border-radius:4px;padding:2px 6px;font-size:7px;font-weight:600;margin-top:3px">€12.5K Left to Budget</div>
  1266.                     </div>
  1267.                     <!-- clock counter -->
  1268.                     <div style="background:var(--n-dark);border-radius:9px;padding:9px 11px;text-align:center">
  1269.                         <div style="font-size:8px;color:rgba(255,255,255,.45);margin-bottom:3px;font-family:monospace;letter-spacing:.04em">CLOCK IN TIME COUNTER</div>
  1270.                         <div style="font-family:monospace;font-size:17px;font-weight:700;color:#fff;letter-spacing:.1em">03 : 24 : 51</div>
  1271.                         <div style="margin-top:7px;background:#22a76d;border-radius:7px;padding:5px;display:flex;align-items:center;justify-content:center;gap:4px">
  1272.                             <span style="font-size:9px;color:#fff;font-weight:700">⏱ Clock Out</span>
  1273.                         </div>
  1274.                     </div>
  1275.                     <!-- stats row -->
  1276.                     <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px">
  1277.                         <div style="background:#fff;border-radius:7px;padding:6px 7px;border:0.5px solid var(--n-border-md);text-align:center">
  1278.                             <div style="font-size:7px;color:var(--n-muted)">Revenue</div>
  1279.                             <div style="font-size:10px;font-weight:800;color:var(--n-dark)">€58K</div>
  1280.                             <div style="font-size:9px;color:var(--n-sage)">↗</div>
  1281.                         </div>
  1282.                         <div style="background:#fff;border-radius:7px;padding:6px 7px;border:0.5px solid var(--n-border-md);text-align:center">
  1283.                             <div style="font-size:7px;color:var(--n-muted)">Cash-Flow</div>
  1284.                             <div style="font-size:10px;font-weight:800;color:var(--n-dark)">€12K</div>
  1285.                             <div style="font-size:9px;color:var(--n-amber)">→</div>
  1286.                         </div>
  1287.                         <div style="background:#fff;border-radius:7px;padding:6px 7px;border:0.5px solid var(--n-border-md);text-align:center">
  1288.                             <div style="font-size:7px;color:var(--n-muted)">Assets</div>
  1289.                             <div style="font-size:10px;font-weight:800;color:var(--n-dark)">€142K</div>
  1290.                             <div style="font-size:9px;color:var(--n-sage)">↗</div>
  1291.                         </div>
  1292.                     </div>
  1293.                     <!-- bottom cards -->
  1294.                     <div style="display:grid;grid-template-columns:1fr 1fr;gap:4px">
  1295.                         <div style="background:#fff;border-radius:7px;padding:7px 9px;border:0.5px solid var(--n-border-md)">
  1296.                             <div style="font-size:7px;color:var(--n-muted)">Today's Expense</div>
  1297.                             <div style="font-size:13px;font-weight:800;color:var(--n-dark);margin-top:3px">€340</div>
  1298.                             <div style="font-size:7px;color:var(--n-muted-2)">Since this morning</div>
  1299.                         </div>
  1300.                         <div style="background:#fff;border-radius:7px;padding:7px 9px;border:0.5px solid var(--n-border-md)">
  1301.                             <div style="font-size:7px;color:var(--n-muted)">Weekly Activity</div>
  1302.                             <div style="font-size:9px;color:var(--n-amber);margin-top:3px;font-weight:700">+€8.4K</div>
  1303.                             <div style="font-size:7px;color:var(--n-muted-2)">Daily avg cash</div>
  1304.                         </div>
  1305.                     </div>
  1306.                     <!-- nav bar -->
  1307.                     <div style="display:flex;justify-content:space-around;margin-top:auto;border-top:0.5px solid var(--n-border-md);padding-top:7px">
  1308.                         <span style="font-size:13px;color:var(--n-amber)">⌂</span>
  1309.                         <span style="font-size:12px;color:var(--n-muted)">▦</span>
  1310.                         <span style="font-size:12px;color:var(--n-muted)">◎</span>
  1311.                         <span style="font-size:12px;color:var(--n-muted)">📷</span>
  1312.                         <span style="font-size:12px;color:var(--n-muted)">👤</span>
  1313.                     </div>
  1314.                 </div>
  1315.             </div>
  1316.         </div>
  1317.     </div>
  1318. </section>
  1320. {# ══ 6b. WHAT YOU CAN DO TODAY ═══════════════════════════════════════════════ #}
  1321. <section style="background:var(--n-white);padding:72px 0;border-top:1px solid var(--n-border)">
  1322.     <div class="n-wrap">
  1323.         <div class="n-center" style="margin-bottom:40px">
  1324.             <div class="n-label">What you can do today</div>
  1325.             <h2 class="n-h2">What you can do with <em class="n-em">HoneyBee today</em></h2>
  1326.         </div>
  1327.         <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;max-width:960px;margin:0 auto">
  1328.             <div style="display:flex;align-items:flex-start;gap:12px;padding:18px 20px;background:var(--n-cream);border:1px solid var(--n-border);border-radius:10px">
  1329.                 <i class="fa-solid fa-file-invoice-dollar" style="color:var(--n-amber);font-size:15px;margin-top:3px;flex-shrink:0"></i>
  1330.                 <span style="font-size:14px;color:var(--n-dark);line-height:1.6">Run projects from proposal to billing</span>
  1331.             </div>
  1332.             <div style="display:flex;align-items:flex-start;gap:12px;padding:18px 20px;background:var(--n-cream);border:1px solid var(--n-border);border-radius:10px">
  1333.                 <i class="fa-solid fa-chart-line" style="color:var(--n-amber);font-size:15px;margin-top:3px;flex-shrink:0"></i>
  1334.                 <span style="font-size:14px;color:var(--n-dark);line-height:1.6">Track cost, margin, and execution</span>
  1335.             </div>
  1336.             <div style="display:flex;align-items:flex-start;gap:12px;padding:18px 20px;background:var(--n-cream);border:1px solid var(--n-border);border-radius:10px">
  1337.                 <i class="fa-solid fa-building" style="color:var(--n-amber);font-size:15px;margin-top:3px;flex-shrink:0"></i>
  1338.                 <span style="font-size:14px;color:var(--n-dark);line-height:1.6">Manage multi-site operations</span>
  1339.             </div>
  1340.             <div style="display:flex;align-items:flex-start;gap:12px;padding:18px 20px;background:var(--n-cream);border:1px solid var(--n-border);border-radius:10px">
  1341.                 <i class="fa-solid fa-xmark" style="color:var(--n-amber);font-size:15px;margin-top:3px;flex-shrink:0"></i>
  1342.                 <span style="font-size:14px;color:var(--n-dark);line-height:1.6">Replace Excel, WhatsApp, and fragmented tools</span>
  1343.             </div>
  1344.             <div style="display:flex;align-items:flex-start;gap:12px;padding:18px 20px;background:var(--n-cream);border:1px solid var(--n-border);border-radius:10px">
  1345.                 <i class="fa-solid fa-brain" style="color:var(--n-amber);font-size:15px;margin-top:3px;flex-shrink:0"></i>
  1346.                 <span style="font-size:14px;color:var(--n-dark);line-height:1.6">Generate reports with AI</span>
  1347.             </div>
  1348.             <div style="display:flex;align-items:flex-start;gap:12px;padding:18px 20px;background:var(--n-cream);border:1px solid var(--n-border);border-radius:10px">
  1349.                 <i class="fa-solid fa-microchip" style="color:var(--n-amber);font-size:15px;margin-top:3px;flex-shrink:0"></i>
  1350.                 <span style="font-size:14px;color:var(--n-dark);line-height:1.6">Connect site data through HoneyCore Edge+ <span style="color:var(--n-muted);font-size:12px">(project-based deployment)</span></span>
  1351.             </div>
  1352.         </div>
  1353.     </div>
  1354. </section>
  1356. {# ══ 7. SPEED TO VALUE ════════════════════════════════════════════════════════ #}
  1357. <section style="background:var(--n-cream);padding:96px 0 0">
  1358.     <div class="n-wrap">
  1359.         <div class="n-center" style="margin-bottom:56px">
  1360.             <div class="n-label trn" data-trn-key="_H_SPEED_LABEL_">Speed to value</div>
  1361.             <h2 class="n-h2"><span class="trn" data-trn-key="_H_SPEED_H2_">From signup to first invoice:</span> <em class="n-em trn" data-trn-key="_H_SPEED_H2_EM_">days, not months.</em></h2>
  1362.         </div>
  1363.         <div style="background:var(--n-dark);border-radius:20px;padding:56px 48px">
  1364.             <div style="display:flex;flex-direction:column;gap:0">
  1365.                 <div style="display:grid;grid-template-columns:56px 1fr auto;gap:24px;align-items:start;padding:24px 0;border-top:1px solid rgba(255,255,255,.1)">
  1366.                     <span style="font-family:'Montserrat',sans-serif;font-size:2rem;font-weight:900;color:var(--n-amber);line-height:1">1</span>
  1367.                     <div>
  1368.                         <h4 style="color:#fff;font-family:'Montserrat',sans-serif;font-weight:700;margin-bottom:6px" class="trn" data-trn-key="_H_STEP1_TITLE_">Sign up, no card</h4>
  1369.                         <p style="color:rgba(255,255,255,.55);font-size:.95rem;margin:0" class="trn" data-trn-key="_H_STEP1_P_">Enter your email. You're in. No sales qualification, no demo wall.</p>
  1370.                     </div>
  1371.                     <span style="font-family:monospace;font-size:.75rem;color:var(--n-amber);white-space:nowrap;padding-top:4px" class="trn" data-trn-key="_H_STEP1_TIME_">~ 2 minutes</span>
  1372.                 </div>
  1373.                 <div style="display:grid;grid-template-columns:56px 1fr auto;gap:24px;align-items:start;padding:24px 0;border-top:1px solid rgba(255,255,255,.1)">
  1374.                     <span style="font-family:'Montserrat',sans-serif;font-size:2rem;font-weight:900;color:var(--n-amber);line-height:1">2</span>
  1375.                     <div>
  1376.                         <h4 style="color:#fff;font-family:'Montserrat',sans-serif;font-weight:700;margin-bottom:6px" class="trn" data-trn-key="_H_STEP2_TITLE_">Migration call</h4>
  1377.                         <p style="color:rgba(255,255,255,.55);font-size:.95rem;margin:0" class="trn" data-trn-key="_H_STEP2_P_">A real person reaches out to schedule your migration. Your first three days of migration work are included — complex setups (SAP, heavy customization, legacy data) are billed hourly, estimated up-front, never after.</p>
  1378.                     </div>
  1379.                     <span style="font-family:monospace;font-size:.75rem;color:var(--n-amber);white-space:nowrap;padding-top:4px" class="trn" data-trn-key="_H_STEP2_TIME_">Within a day or two</span>
  1380.                 </div>
  1381.                 <div style="display:grid;grid-template-columns:56px 1fr auto;gap:24px;align-items:start;padding:24px 0;border-top:1px solid rgba(255,255,255,.1)">
  1382.                     <span style="font-family:'Montserrat',sans-serif;font-size:2rem;font-weight:900;color:var(--n-amber);line-height:1">3</span>
  1383.                     <div>
  1384.                         <h4 style="color:#fff;font-family:'Montserrat',sans-serif;font-weight:700;margin-bottom:6px" class="trn" data-trn-key="_H_STEP3_TITLE_">Go live</h4>
  1385.                         <p style="color:rgba(255,255,255,.55);font-size:.95rem;margin:0" class="trn" data-trn-key="_H_STEP3_P_">Chart of accounts, customers, suppliers, and open invoices imported. Invite your team. Issue your first invoice.</p>
  1386.                     </div>
  1387.                     <span style="font-family:monospace;font-size:.75rem;color:var(--n-amber);white-space:nowrap;padding-top:4px" class="trn" data-trn-key="_H_STEP3_TIME_">Days 2–4</span>
  1388.                 </div>
  1389.                 <div style="display:grid;grid-template-columns:56px 1fr auto;gap:24px;align-items:start;padding:24px 0;border-top:1px solid rgba(255,255,255,.1)">
  1390.                     <span style="font-family:'Montserrat',sans-serif;font-size:2rem;font-weight:900;color:var(--n-amber);line-height:1">4</span>
  1391.                     <div>
  1392.                         <h4 style="color:#fff;font-family:'Montserrat',sans-serif;font-weight:700;margin-bottom:6px" class="trn" data-trn-key="_H_STEP4_TITLE_">14 days on real work</h4>
  1393.                         <p style="color:rgba(255,255,255,.55);font-size:.95rem;margin:0" class="trn" data-trn-key="_H_STEP4_P_">Run it against your actual operations. If it doesn't fit, we export your data and you walk away. No pressure, no follow-ups.</p>
  1394.                     </div>
  1395.                     <span style="font-family:monospace;font-size:.75rem;color:var(--n-amber);white-space:nowrap;padding-top:4px" class="trn" data-trn-key="_H_STEP4_TIME_">Days 5–14</span>
  1396.                 </div>
  1397.             </div>
  1398.         </div>
  1399.     </div>
  1400. </section>
  1402. {# ══ 8. CUSTOMER STORIES ══════════════════════════════════════════════════════ #}
  1403. <section style="background:var(--n-cream);padding:96px 0">
  1404.     <div class="n-wrap">
  1405.         <div class="n-center" style="margin-bottom:48px">
  1406.             <div class="n-label trn" data-trn-key="_H_CUSTOMERS_LABEL_">Customers</div>
  1407.             <h2 class="n-h2"><span class="trn" data-trn-key="_H_CUSTOMERS_H2_">Teams running HoneyBee</span> <em class="n-em trn" data-trn-key="_H_CUSTOMERS_H2_EM_">today.</em></h2>
  1408.             <p class="n-body n-mt-4" style="max-width:60ch;margin-left:auto;margin-right:auto">References below describe operational, implementation and field experience — each labelled by deployment status. Verified metrics and full case studies are available on request.</p>
  1409.         </div>
  1411.         {# SSG #}
  1412.         <div style="background:var(--n-dark);border-radius:16px;padding:52px;position:relative;overflow:hidden;margin-bottom:24px">
  1413.             <div style="position:absolute;top:-30%;right:-10%;width:55%;height:140%;background:radial-gradient(ellipse,rgba(192,125,42,.15),transparent 60%);pointer-events:none"></div>
  1414.             <div style="display:grid;grid-template-columns:1.3fr 1fr;gap:52px;position:relative;z-index:2">
  1415.                 <div>
  1416.                     <span style="font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--n-amber);display:block;margin-bottom:16px">Super Star Group · Energy · Bangladesh</span>
  1417.                     <h3 style="font-family:'Montserrat',sans-serif;font-size:clamp(1.5rem,2.5vw,2.2rem);font-weight:800;color:#fff;margin-bottom:20px">From <em style="font-style:italic;color:var(--n-amber)">SAP</em> to HoneyBee.</h3>
  1418.                     <p style="color:rgba(255,255,255,.7);line-height:1.7;margin-bottom:16px">Super Star Group ran SAP for their ERP core — but still lived in <strong style="color:#fff">Excel</strong> for proposals, <strong style="color:#fff">MS Word</strong> for documents, <strong style="color:#fff">MS Project</strong> for project plans, a locally-built HR app, and stacks of paper forms. HoneyBee consolidated all of it onto one platform.</p>
  1419.                 </div>
  1420.                 <div style="display:flex;flex-direction:column;gap:20px;justify-content:center">
  1421.                     <div style="border-top:1px solid rgba(255,255,255,.15);padding-top:20px">
  1422.                         <div style="font-family:'Montserrat',sans-serif;font-size:2.2rem;font-weight:900;color:#fff;line-height:1">SAP <span style="font-size:.85rem;font-weight:400;color:rgba(255,255,255,.4)">migrated from</span></div>
  1423.                     </div>
  1424.                     <div style="border-top:1px solid rgba(255,255,255,.15);padding-top:20px">
  1425.                         <div style="font-family:'Montserrat',sans-serif;font-size:2.2rem;font-weight:900;color:var(--n-amber);line-height:1">6+ <span style="font-size:.85rem;font-weight:400;color:rgba(255,255,255,.4)">tools replaced</span></div>
  1426.                         <div style="display:flex;flex-wrap:wrap;gap:6px;margin-top:10px">
  1427.                             <span style="font-size:.72rem;padding:3px 10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:4px;color:rgba(255,255,255,.7)">SAP</span>
  1428.                             <span style="font-size:.72rem;padding:3px 10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:4px;color:rgba(255,255,255,.7)">Excel</span>
  1429.                             <span style="font-size:.72rem;padding:3px 10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:4px;color:rgba(255,255,255,.7)">MS Word</span>
  1430.                             <span style="font-size:.72rem;padding:3px 10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:4px;color:rgba(255,255,255,.7)">MS Project</span>
  1431.                             <span style="font-size:.72rem;padding:3px 10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:4px;color:rgba(255,255,255,.7)">Local HR app</span>
  1432.                         </div>
  1433.                     </div>
  1434.                 </div>
  1435.             </div>
  1436.         </div>
  1438.         {# Raach Solar #}
  1439.         <div style="background:#1E2235;border-radius:16px;padding:52px;position:relative;overflow:hidden">
  1440.             <div style="position:absolute;top:-30%;left:-10%;width:55%;height:140%;background:radial-gradient(ellipse,rgba(61,107,82,.12),transparent 60%);pointer-events:none"></div>
  1441.             <div style="display:grid;grid-template-columns:1.3fr 1fr;gap:52px;position:relative;z-index:2">
  1442.                 <div>
  1443.                     <span style="font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--n-sage);display:block;margin-bottom:16px">Raach Solar · Energy · Germany &amp; Bangladesh</span>
  1444.                     <h3 style="font-family:'Montserrat',sans-serif;font-size:clamp(1.5rem,2.5vw,2.2rem);font-weight:800;color:#fff;margin-bottom:20px">From <em style="font-style:italic;color:var(--n-amber)">Odoo</em> to HoneyBee — across <em style="font-style:italic;color:var(--n-amber)">two countries,</em> on one platform.</h3>
  1445.                     <p style="color:rgba(255,255,255,.7);line-height:1.7;margin-bottom:16px">Raach Solar runs RAACH SOLAR PROJECTS GmbH in Germany and Raach Solar Projects (BD) Ltd in Bangladesh. Before HoneyBee they juggled <strong style="color:#fff">Odoo</strong>, <strong style="color:#fff">Samdock</strong>, Excel, MS Word, and MS Project across two countries. Today both entities run on HoneyBee — with DATEV-ready export keeping their German tax consultant in their own tool.</p>
  1446.                 </div>
  1447.                 <div style="display:flex;flex-direction:column;gap:16px;justify-content:center">
  1448.                     <div style="border-top:1px solid rgba(255,255,255,.12);padding-top:16px">
  1449.                         <div style="font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:8px;font-family:monospace">Entities unified</div>
  1450.                         <div style="display:flex;flex-wrap:wrap;gap:6px">
  1451.                             <span style="font-size:.76rem;padding:4px 12px;background:rgba(192,125,42,.18);border:1px solid rgba(192,125,42,.35);border-radius:4px;color:var(--n-amber);font-weight:600">GmbH <span style="opacity:.75;font-weight:400">(Germany)</span></span>
  1452.                             <span style="font-size:.76rem;padding:4px 12px;background:rgba(192,125,42,.18);border:1px solid rgba(192,125,42,.35);border-radius:4px;color:var(--n-amber);font-weight:600">BD Ltd <span style="opacity:.75;font-weight:400">(Bangladesh)</span></span>
  1453.                         </div>
  1454.                     </div>
  1455.                     <div style="border-top:1px solid rgba(255,255,255,.12);padding-top:16px">
  1456.                         <div style="font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:8px;font-family:monospace">Migrated from</div>
  1457.                         <div style="display:flex;flex-wrap:wrap;gap:6px">
  1458.                             <span style="font-size:.72rem;padding:3px 10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:4px;color:rgba(255,255,255,.7)">Odoo</span>
  1459.                             <span style="font-size:.72rem;padding:3px 10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:4px;color:rgba(255,255,255,.7)">Samdock</span>
  1460.                             <span style="font-size:.72rem;padding:3px 10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:4px;color:rgba(255,255,255,.7)">MS Project</span>
  1461.                             <span style="font-size:.72rem;padding:3px 10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:4px;color:rgba(255,255,255,.7)">Excel</span>
  1462.                         </div>
  1463.                     </div>
  1464.                     <div style="border-top:1px solid rgba(255,255,255,.12);padding-top:16px">
  1465.                         <div style="font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:8px;font-family:monospace">Kept integrated</div>
  1466.                         <div style="display:flex;flex-wrap:wrap;gap:6px">
  1467.                             <span style="font-size:.76rem;padding:4px 12px;background:rgba(61,107,82,.2);border:1px solid rgba(61,107,82,.4);border-radius:4px;color:#7DC4A0;font-weight:600">DATEV <span style="opacity:.75;font-weight:400">(tax consultant side)</span></span>
  1468.                         </div>
  1469.                     </div>
  1470.                 </div>
  1471.             </div>
  1472.         </div>
  1474.         {# Logo strip #}
  1475.         <div class="n-logo-strip" style="margin-top:24px">
  1476.             <div class="n-logo-strip-label">Active customers include</div>
  1477.             <div class="n-logo-row">
  1478.                 <span class="n-logo-item"><i class="fa-solid fa-building" style="color:var(--n-amber);margin-right:7px;font-size:11px"></i>Super Star Group</span>
  1479.                 <span class="n-logo-item"><i class="fa-solid fa-solar-panel" style="color:var(--n-amber);margin-right:7px;font-size:11px"></i>Raach Solar</span>
  1480.                 <span class="n-logo-item"><i class="fa-solid fa-industry" style="color:var(--n-amber);margin-right:7px;font-size:11px"></i>Bengal Group</span>
  1481.                 <span class="n-logo-item"><i class="fa-solid fa-leaf" style="color:var(--n-amber);margin-right:7px;font-size:11px"></i>NetZero</span>
  1482.                 <span class="n-logo-item"><i class="fa-solid fa-concierge-bell" style="color:var(--n-amber);margin-right:7px;font-size:11px"></i>Swissotel</span>
  1483.                 <span class="n-logo-item"><i class="fa-solid fa-microchip" style="color:var(--n-amber);margin-right:7px;font-size:11px"></i>Linnex</span>
  1484.             </div>
  1485.         </div>
  1486.     </div>
  1487. </section>
  1489. {# ══ 8b. BEFORE / AFTER ════════════════════════════════════════════════════════ #}
  1490. <section class="n-sec" style="background:var(--n-cream)">
  1491.     <div class="n-wrap">
  1492.         <div class="n-center">
  1493.             <div class="n-label">Before &amp; after</div>
  1494.             <h2 class="n-h2">From scattered tools to <em class="n-em">one connected workflow.</em></h2>
  1495.         </div>
  1496.         <div class="n-ba-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px;align-items:stretch;">
  1497.             {# Before #}
  1498.             <div style="background:#fff;border:1px solid rgba(217,83,79,.25);border-top:3px solid #d9534f;border-radius:var(--n-radius);padding:32px;display:flex;flex-direction:column;">
  1499.                 <span style="font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#d9534f;font-family:monospace;margin-bottom:16px;">Before HoneyBee</span>
  1500.                 <ul style="list-style:none;display:flex;flex-direction:column;gap:11px;margin:0;">
  1501.                     <li style="font-size:14px;color:var(--n-muted);display:flex;align-items:flex-start;gap:10px;line-height:1.5;"><span style="color:#d9534f;font-weight:700;flex-shrink:0;">×</span> Quotation in Excel</li>
  1502.                     <li style="font-size:14px;color:var(--n-muted);display:flex;align-items:flex-start;gap:10px;line-height:1.5;"><span style="color:#d9534f;font-weight:700;flex-shrink:0;">×</span> Procurement by manual follow-up</li>
  1503.                     <li style="font-size:14px;color:var(--n-muted);display:flex;align-items:flex-start;gap:10px;line-height:1.5;"><span style="color:#d9534f;font-weight:700;flex-shrink:0;">×</span> Inventory disconnected from site</li>
  1504.                     <li style="font-size:14px;color:var(--n-muted);display:flex;align-items:flex-start;gap:10px;line-height:1.5;"><span style="color:#d9534f;font-weight:700;flex-shrink:0;">×</span> Billing depends on memory</li>
  1505.                     <li style="font-size:14px;color:var(--n-muted);display:flex;align-items:flex-start;gap:10px;line-height:1.5;"><span style="color:#d9534f;font-weight:700;flex-shrink:0;">×</span> Energy dashboard separate</li>
  1506.                     <li style="font-size:14px;color:var(--n-muted);display:flex;align-items:flex-start;gap:10px;line-height:1.5;"><span style="color:#d9534f;font-weight:700;flex-shrink:0;">×</span> Management waits for updates</li>
  1507.                     <li style="font-size:14px;color:var(--n-muted);display:flex;align-items:flex-start;gap:10px;line-height:1.5;"><span style="color:#d9534f;font-weight:700;flex-shrink:0;">×</span> AI can't access structured data</li>
  1508.                 </ul>
  1509.             </div>
  1510.             {# After #}
  1511.             <div style="background:#fff;border:1px solid rgba(61,107,82,.28);border-top:3px solid var(--n-sage);border-radius:var(--n-radius);padding:32px;display:flex;flex-direction:column;box-shadow:var(--n-shadow-sm);">
  1512.                 <span style="font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--n-sage);font-family:monospace;margin-bottom:16px;">After HoneyBee</span>
  1513.                 <ul style="list-style:none;display:flex;flex-direction:column;gap:11px;margin:0;">
  1514.                     <li style="font-size:14px;color:var(--n-dark);display:flex;align-items:flex-start;gap:10px;line-height:1.5;"><i class="fa-solid fa-check" style="color:var(--n-sage);font-size:13px;margin-top:3px;flex-shrink:0;"></i> Quotation linked to BoQ and project</li>
  1515.                     <li style="font-size:14px;color:var(--n-dark);display:flex;align-items:flex-start;gap:10px;line-height:1.5;"><i class="fa-solid fa-check" style="color:var(--n-sage);font-size:13px;margin-top:3px;flex-shrink:0;"></i> Procurement linked to project demand</li>
  1516.                     <li style="font-size:14px;color:var(--n-dark);display:flex;align-items:flex-start;gap:10px;line-height:1.5;"><i class="fa-solid fa-check" style="color:var(--n-sage);font-size:13px;margin-top:3px;flex-shrink:0;"></i> Inventory issued against project/site</li>
  1517.                     <li style="font-size:14px;color:var(--n-dark);display:flex;align-items:flex-start;gap:10px;line-height:1.5;"><i class="fa-solid fa-check" style="color:var(--n-sage);font-size:13px;margin-top:3px;flex-shrink:0;"></i> Milestone billing and retention tracked</li>
  1518.                     <li style="font-size:14px;color:var(--n-dark);display:flex;align-items:flex-start;gap:10px;line-height:1.5;"><i class="fa-solid fa-check" style="color:var(--n-sage);font-size:13px;margin-top:3px;flex-shrink:0;"></i> HoneyCore data linked to O&amp;M and reporting</li>
  1519.                     <li style="font-size:14px;color:var(--n-dark);display:flex;align-items:flex-start;gap:10px;line-height:1.5;"><i class="fa-solid fa-check" style="color:var(--n-sage);font-size:13px;margin-top:3px;flex-shrink:0;"></i> Real-time business and project cockpit</li>
  1520.                     <li style="font-size:14px;color:var(--n-dark);display:flex;align-items:flex-start;gap:10px;line-height:1.5;"><i class="fa-solid fa-check" style="color:var(--n-sage);font-size:13px;margin-top:3px;flex-shrink:0;"></i> AI works inside governed ERP workflows</li>
  1521.                 </ul>
  1522.             </div>
  1523.         </div>
  1524.     </div>
  1525. </section>
  1527. {# ══ 8c. VALUE LOSS BAND ═══════════════════════════════════════════════════════ #}
  1528. <section class="n-sec" style="background:var(--n-dark);position:relative;overflow:hidden;">
  1529.     <div class="n-wrap" style="position:relative;z-index:2;text-align:center;max-width:760px;">
  1530.         <h2 style="font-family:'Montserrat',sans-serif;font-size:clamp(26px,3.5vw,40px);font-weight:900;color:#fff;line-height:1.12;letter-spacing:-.02em;margin-bottom:18px;">One delayed project can cost more than HoneyBee.</h2>
  1531.         <p style="font-size:16px;line-height:1.75;color:rgba(255,255,255,.6);max-width:620px;margin:0 auto 32px;">HoneyBee helps project companies reduce hidden losses from missed billing milestones, delayed approvals, wrong procurement timing, inventory leakage, uncontrolled site expenses, poor project-margin visibility, weak O&amp;M handover and late management reporting.</p>
  1532.         <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-amber"><i class="fa-solid fa-clipboard-check"></i> Request Project Workflow Audit</a>
  1533.     </div>
  1534. </section>
  1536. {# ══ 9. PRICING ═══════════════════════════════════════════════════════════════ #}
  1537. <section class="n-sec" style="background:var(--n-cream-2);border-top:1px solid var(--n-border)">
  1538.     <div class="n-wrap">
  1539.         <div class="n-center">
  1540.             <div class="n-label trn" data-trn-key="_H_PRICING_LABEL_">Pricing</div>
  1541.             <h2 class="n-h2"><span class="trn" data-trn-key="_H_PRICING_H2_">Free until you</span> <em class="n-em trn" data-trn-key="_H_PRICING_H2_EM_">outgrow it.</em></h2>
  1542.             <p class="n-body n-mt-4 trn" data-trn-key="_H_PRICING_DESC_">Start free for up to 50 users. Billing only kicks in once any user crosses 10 MB of storage — every module included from day one.</p>
  1543.         </div>
  1544.         <div class="n-price-grid">
  1545.             {% for packageDetail in packageDetails %}{% if packageDetail.hidden is not defined or not packageDetail.hidden %}
  1546.             <div class="n-plan{% if packageDetail.featured is defined and packageDetail.featured %} featured{% endif %}">
  1548.                 {# Plan tag pill #}
  1549.                 {% if packageDetail.freeFlag == '1' %}
  1550.                     <span class="n-plan-tag trn" style="background:var(--n-sage);" data-trn-key="_H_PLAN_FREE_TAG_">Free Starter</span>
  1551.                 {% elseif packageDetail.tag is defined and packageDetail.tag %}
  1552.                     <span class="n-plan-tag">{{ packageDetail.tag }}</span>
  1553.                 {% endif %}
  1555.                 <h3>{{ packageDetail.packageName }}</h3>
  1556.                 <div class="n-plan-audience">{{ packageDetail.description is defined and packageDetail.description ? packageDetail.description : packageDetail.badge }}</div>
  1558.                 {# Price display #}
  1559.                 {% if packageDetail.freeFlag == '1' %}
  1560.                     <div class="n-plan-price"><span class="num">€0</span><span class="unit">/ forever</span></div>
  1561.                     <div class="n-plan-billing">€0 · Up to {{ packageDetail.maxUser }} users · 10 MB storage per user. Workspace upgrades when any single user crosses 10 MB.</div>
  1562.                 {% elseif packageDetail.contactSalesFlag == '1' %}
  1563.                     <div class="n-plan-price"><span class="num" style="font-size:28px;margin-top:4px;">Custom</span></div>
  1564.                     <div class="n-plan-billing">Custom quote — for private cloud, on-premise, hardware, HoneyCore Edge+ deployment, and local ML infrastructure.</div>
  1565.                 {% else %}
  1566.                     {% if packageDetail.earlyAdopter is defined and packageDetail.earlyAdopter %}
  1567.                         <div class="n-plan-early-badge">Launch offer</div>
  1568.                         <div class="n-plan-regular-price">€{{ packageDetail.euRegularUserPrice.monthlyPrice }}/user · €{{ packageDetail.euRegularAdminPrice.monthlyPrice }}/admin</div>
  1569.                         <div class="n-plan-price">
  1570.                             <span class="num">€{{ packageDetail.euPerUserPrice.monthlyPrice }}</span>
  1571.                             <span class="unit">/ user / month</span>
  1572.                         </div>
  1573.                         <div class="n-plan-billing">+ €{{ packageDetail.euPerAdminPrice.monthlyPrice }} / admin / month · 4 users + 1 admin structure</div>
  1574.                         <div class="n-plan-lock-note">{{ packageDetail.earlyAdopterNote }}</div>
  1575.                     {% else %}
  1576.                         <div class="n-plan-price">
  1577.                             <span class="num">€{{ packageDetail.euPerUserPrice.monthlyPrice }}</span>
  1578.                             <span class="unit">/ user / month</span>
  1579.                         </div>
  1580.                         <div class="n-plan-billing">From €{{ packageDetail.euPerUserPrice.monthlyPrice }} per standard user / month + €{{ packageDetail.euPerAdminPrice.monthlyPrice }} per admin / month. Standard 4 users + 1 admin structure.</div>
  1581.                     {% endif %}
  1582.                 {% endif %}
  1584.                 <div class="n-plan-div"></div>
  1586.                 <ul class="n-plan-feats">
  1587.                     {% for data in packageDetail.features %}
  1588.                         <li><i class="fa-solid fa-circle-check"></i>{{ data.feature }}</li>
  1589.                     {% endfor %}
  1590.                 </ul>
  1592.                 {# CTA button #}
  1593.                 {% if packageDetail.contactSalesFlag == '1' %}
  1594.                     <a href="{{ path('quote_request', {plan: 'enterprise'}) }}" class="n-btn n-btn-outline trn" data-trn-key="_H_PLAN_CONTACT_">Contact sales</a>
  1595.                 {% elseif packageDetail.freeFlag == '1' %}
  1596.                     <a href="{{ url('create_company') }}" class="n-btn n-btn-outline trn" style="border-color:var(--n-sage);color:var(--n-sage);" data-trn-key="_H_PLAN_START_FREE_">Start free</a>
  1597.                 {% elseif packageDetail.featured is defined and packageDetail.featured %}
  1598.                     <a href="{{ url('honeybee_pricing') }}" class="n-btn n-btn-amber trn" data-trn-key="_H_PLAN_GET_STARTED_">Get started</a>
  1599.                 {% else %}
  1600.                     <a href="{{ url('honeybee_pricing') }}" class="n-btn n-btn-outline trn" data-trn-key="_H_PLAN_SEE_PLAN_">See full plan</a>
  1601.                 {% endif %}
  1603.             </div>
  1604.             {% endif %}{% endfor %}
  1605.         </div>
  1606.         <div class="n-ai-pricing-note">
  1607.             <div style="width:36px;height:36px;background:var(--n-amber-dim);border:1px solid rgba(192,125,42,.2);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--n-amber);font-size:16px">
  1608.                 <i class="fa-solid fa-brain"></i>
  1609.             </div>
  1610.             <p><strong>Native LLM add-on:</strong> Deploy an on-premise AI inference server (from €6,000 one-time — 1× or 2× NVIDIA RTX 5090) for unlimited AI access across all users — hardware configured by our team, data never leaves your building. Available on Team (add-on) and Enterprise. <a href="{{ url('honeybee_contact') }}" style="color:var(--n-amber);font-weight:600">Ask us about AI →</a></p>
  1611.         </div>
  1612.         <p class="n-price-note">*Free tier upgrades automatically the first time any user crosses 10 MB of storage. &nbsp;·&nbsp; <a href="{{ url('honeybee_pricing') }}" style="color:var(--n-amber);">See full pricing details →</a></p>
  1613.     </div>
  1614. </section>
  1616. {# ══ 10. FAQ ══════════════════════════════════════════════════════════════════ #}
  1617. <section style="background:var(--n-white);padding:96px 0;border-top:1px solid var(--n-border)">
  1618.     <div class="n-wrap">
  1619.         <div style="display:grid;grid-template-columns:1fr 1.6fr;gap:80px;align-items:start">
  1620.             <div>
  1621.                 <div class="n-label trn" data-trn-key="_H_FAQ_LABEL_">Before you sign up</div>
  1622.                 <h2 class="n-h2" style="margin-top:16px"><span class="trn" data-trn-key="_H_FAQ_H2_">The questions that stop most</span> <em class="n-em trn" data-trn-key="_H_FAQ_H2_EM_">switchers.</em></h2>
  1623.                 <p style="color:var(--n-muted);font-size:.95rem;line-height:1.7;margin-top:16px">Honest answers to the five things we hear most often from companies evaluating HoneyBee.</p>
  1624.             </div>
  1625.             <div>
  1626.                 <details style="border-bottom:1px solid var(--n-border);padding:20px 0" open>
  1627.                     <summary style="font-family:'Montserrat',sans-serif;font-weight:700;font-size:.97rem;color:var(--n-dark);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center"><span class="trn" data-trn-key="_H_FAQ_Q1_">Can you really migrate from SAP / DATEV / QuickBooks / Tally?</span> <i class="fa-solid fa-plus" style="color:var(--n-amber);font-size:.8rem;flex-shrink:0"></i></summary>
  1628.                     <p style="color:var(--n-muted);font-size:.93rem;line-height:1.7;margin-top:14px;margin-bottom:0">Yes. Your first three days of migration work are included — standard imports fit comfortably within that. SAP migrations, heavily customized DATEV setups, or legacy data take longer and are billed hourly; we give you an estimate before we start work, never after.</p>
  1629.                 </details>
  1630.                 <details style="border-bottom:1px solid var(--n-border);padding:20px 0">
  1631.                     <summary style="font-family:'Montserrat',sans-serif;font-weight:700;font-size:.97rem;color:var(--n-dark);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center"><span class="trn" data-trn-key="_H_FAQ_Q2_">What happens to my data if I leave?</span> <i class="fa-solid fa-plus" style="color:var(--n-amber);font-size:.8rem;flex-shrink:0"></i></summary>
  1632.                     <p style="color:var(--n-muted);font-size:.93rem;line-height:1.7;margin-top:14px;margin-bottom:0">Full export any time, during or after cancellation — CSV, JSON, or SQL. No lock-in, no retention fees. DATEV customers get a clean DATEV-format export on exit.</p>
  1633.                 </details>
  1634.                 <details style="border-bottom:1px solid var(--n-border);padding:20px 0">
  1635.                     <summary style="font-family:'Montserrat',sans-serif;font-weight:700;font-size:.97rem;color:var(--n-dark);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center"><span class="trn" data-trn-key="_H_FAQ_Q3_">Does it work with German GoBD and EU GDPR?</span> <i class="fa-solid fa-plus" style="color:var(--n-amber);font-size:.8rem;flex-shrink:0"></i></summary>
  1636.                     <p style="color:var(--n-muted);font-size:.93rem;line-height:1.7;margin-top:14px;margin-bottom:0">HoneyBee provides an immutable audit log and activity monitoring suitable for GoBD requirements, and EU-hosted deployment for GDPR obligations. A Data Processing Agreement is available on request. For maximum data protection, the Native LLM server keeps AI processing entirely on your premises.</p>
  1637.                 </details>
  1638.                 <details style="border-bottom:1px solid var(--n-border);padding:20px 0">
  1639.                     <summary style="font-family:'Montserrat',sans-serif;font-weight:700;font-size:.97rem;color:var(--n-dark);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center"><span class="trn" data-trn-key="_H_FAQ_Q4_">Do I get a real demo or a salesperson?</span> <i class="fa-solid fa-plus" style="color:var(--n-amber);font-size:.8rem;flex-shrink:0"></i></summary>
  1640.                     <p style="color:var(--n-muted);font-size:.93rem;line-height:1.7;margin-top:14px;margin-bottom:0">You can start free without any call at all. If you want a demo, it's 20 minutes with an engineer, on your data. No qualifying questionnaire, no sales pressure.</p>
  1641.                 </details>
  1642.                 <details style="padding:20px 0">
  1643.                     <summary style="font-family:'Montserrat',sans-serif;font-weight:700;font-size:.97rem;color:var(--n-dark);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center"><span class="trn" data-trn-key="_H_FAQ_Q5_">How does the Free Starter plan work?</span> <i class="fa-solid fa-plus" style="color:var(--n-amber);font-size:.8rem;flex-shrink:0"></i></summary>
  1644.                     <p style="color:var(--n-muted);font-size:.93rem;line-height:1.7;margin-top:14px;margin-bottom:0">None. No card, no auto-billing. On day 15 your data is archived and you get an email; nothing charges unless you actively choose a plan.</p>
  1645.                 </details>
  1646.             </div>
  1647.         </div>
  1648.     </div>
  1649. </section>
  1651. {# ══ 11. FINAL CTA ════════════════════════════════════════════════════════════ #}
  1652. <section class="n-cta-final" id="start">
  1653.     <div class="n-wrap-sm" style="text-align:center">
  1654.         <h2><span class="trn" data-trn-key="_H_CTA_H2_">Ready to connect your operations?</span> <em class="trn" data-trn-key="_H_CTA_H2_EM_">Let's scope your deployment.</em></h2>
  1655.         <p class="trn" data-trn-key="_H_CTA_DESC_">Tell us about your project — EPC, energy asset management, IPP/OPEX/PPA, HoneyCore Edge EMS site intelligence, or multi-site operations. A HoneyBee solutions engineer will respond with a tailored deployment plan.</p>
  1656.         <div style="margin-top:28px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap">
  1657.             <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-primary" style="font-size:15px">
  1658.                 <i class="fa-solid fa-arrow-right"></i> <span class="trn" data-trn-key="_H_CTA_BTN_">Request Project Solution</span>
  1659.             </a>
  1660.             <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-outline" style="font-size:13.5px">
  1661.                 <i class="fa-solid fa-calendar-check"></i> <span class="trn" data-trn-key="_H_BTN_DEMO_">Book Technical Call</span>
  1662.             </a>
  1663.             <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-outline" style="font-size:13.5px">
  1664.                 <i class="fa-solid fa-brain"></i> <span class="trn" data-trn-key="_H_CTA_BTN_AI_">Discuss HoneyCore Edge EMS &amp; AI</span>
  1665.             </a>
  1666.         </div>
  1667.         <div class="n-cta-note trn" style="margin-top:20px" data-trn-key="_H_CTA_NOTE_">HoneyBee is not an EPC contractor or project developer · Software subscription starts from €7.99/user/month · HoneyCore Edge+ hardware quoted per project</div>
  1668.     </div>
  1669. </section>
  1671. {% include '@HoneybeeWeb/footer/central_footer.html.twig' %}
  1673. <script>
  1674. (function () {
  1675.     // CTA email submit
  1676.     window.nCtaSubmit = function (e) {
  1677.         e.preventDefault();
  1678.         var row = e.target.querySelector('.n-cta-row');
  1679.         row.innerHTML = '<div style="padding:14px 20px;background:#fff;border:1px solid var(--n-sage);border-radius:8px;color:var(--n-sage);font-size:14px;font-weight:700;width:100%;text-align:center">✓ Thanks — check your inbox for setup instructions.</div>';
  1680.     };
  1682.     // Scroll reveal
  1683.     var els = document.querySelectorAll(
  1684.         '.n-region-card,.n-sys-card,.n-ai-use,.n-plan,.n-logo-item'
  1685.     );
  1686.     els.forEach(function (el) {
  1687.         el.style.opacity = '0';
  1688.         el.style.transform = 'translateY(18px)';
  1689.         el.style.transition = 'opacity .45s ease, transform .45s ease';
  1690.     });
  1691.     var io = new IntersectionObserver(function (entries) {
  1692.         entries.forEach(function (en) {
  1693.             if (en.isIntersecting) {
  1694.                 en.target.style.opacity = '1';
  1695.                 en.target.style.transform = 'translateY(0)';
  1696.                 io.unobserve(en.target);
  1697.             }
  1698.         });
  1699.     }, { threshold: 0.08 });
  1700.     els.forEach(function (el) { io.observe(el); });
  1702.     // Stagger region + sys cards
  1703.     document.querySelectorAll('.n-region-card').forEach(function (el, i) {
  1704.         el.style.transitionDelay = (i * 0.06) + 's';
  1705.     });
  1706.     document.querySelectorAll('.n-sys-card').forEach(function (el, i) {
  1707.         el.style.transitionDelay = (i * 0.04) + 's';
  1708.     });
  1709.     document.querySelectorAll('.n-plan').forEach(function (el, i) {
  1710.         el.style.transitionDelay = (i * 0.08) + 's';
  1711.     });
  1712. })();
  1713. </script>
  1715. <script>
  1716. /* ── Dashboard mock tab switcher ─────────────────────────────────────────── */
  1717. (function () {
  1718.     var dashData = {
  1719.         DE: {
  1720.             s1: { lbl: 'Revenue MTD', val: '€284k',  trend: '↑ 12.4%',  neg: false },
  1721.             s2: { lbl: 'Pipeline',    val: '€1.4M',  trend: '42 deals',  neg: false },
  1722.             s3: { lbl: 'Projects',    val: '18',     trend: '3 at risk', neg: true  },
  1723.             s4: { lbl: 'DATEV Sync',  val: 'OK',     trend: '2 min ago', neg: false },
  1724.             chart: 'Cash flow — 30 days · Germany',
  1725.             path:  'M0,44 Q40,40 60,34 T120,24 T175,28 T230,14 T320,9',
  1726.             feed: [
  1727.                 { dot: 'amber', txt: 'Lead → Opportunity moved by Kanban (€45k)' },
  1728.                 { dot: 'muted', txt: 'DATEV export ready for tax consultant' },
  1729.                 { dot: 'sage',  txt: 'AI report: Q2 project margins generated ✓' }
  1730.             ]
  1731.         },
  1732.         SG: {
  1733.             s1: { lbl: 'Revenue MTD',  val: 'S$412k', trend: '↑ 8.7%',   neg: false },
  1734.             s2: { lbl: 'Pipeline',     val: '$2.1M',  trend: '67 deals',  neg: false },
  1735.             s3: { lbl: 'Projects',     val: '24',     trend: '1 at risk', neg: true  },
  1736.             s4: { lbl: 'Multi-entity', val: '5',      trend: 'active',    neg: false },
  1737.             chart: 'Cash flow — 30 days · Singapore',
  1738.             path:  'M0,50 Q25,46 50,36 T100,18 T160,14 T230,10 T320,6',
  1739.             feed: [
  1740.                 { dot: 'amber', txt: 'Bulk PO approved across 3 entities (S$88k)' },
  1741.                 { dot: 'muted', txt: 'SGD → EUR rate synced in approval queues' },
  1742.                 { dot: 'sage',  txt: 'AI report: Group margin analysis generated ✓' }
  1743.             ]
  1744.         },
  1745.         NO: {
  1746.             s1: { lbl: 'Revenue MTD', val: 'kr 1.8M', trend: '↑ 5.3%',   neg: false },
  1747.             s2: { lbl: 'Pipeline',    val: 'kr 8.4M', trend: '29 deals',  neg: false },
  1748.             s3: { lbl: 'Projects',    val: '11',      trend: '0 at risk', neg: false },
  1749.             s4: { lbl: 'GDPR',        val: '✓ OK',    trend: 'EU hosted', neg: false },
  1750.             chart: 'Cash flow — 30 days · Norway',
  1751.             path:  'M0,38 Q40,36 72,30 T132,26 T188,22 T252,18 T320,14',
  1752.             feed: [
  1753.                 { dot: 'amber', txt: 'New project milestone reached · Oslo' },
  1754.                 { dot: 'muted', txt: 'EU hosting backup verified · GDPR aligned' },
  1755.                 { dot: 'sage',  txt: 'VAT return filed for Q1 ✓' }
  1756.             ]
  1757.         },
  1758.         EU: {
  1759.             s1: { lbl: 'Revenue MTD', val: '€642k',  trend: '↑ 22.1%',   neg: false },
  1760.             s2: { lbl: 'Pipeline',    val: '€3.8M',  trend: '47 deals',   neg: false },
  1761.             s3: { lbl: 'Projects',    val: '24',      trend: '1 at risk',  neg: true  },
  1762.             s4: { lbl: 'DATEV Sync',  val: 'OK',      trend: '5 min ago',  neg: false },
  1763.             chart: 'Cash flow — 30 days · EU Operations',
  1764.             path:  'M0,48 Q20,44 44,36 T94,24 T154,14 T222,10 T320,6',
  1765.             feed: [
  1766.                 { dot: 'amber', txt: 'HoneyCore Edge+ site report uploaded · Berlin' },
  1767.                 { dot: 'muted', txt: 'EU VAT report ready for review' },
  1768.                 { dot: 'sage',  txt: 'AI report: Energy sector margins generated ✓' }
  1769.             ]
  1770.         }
  1771.     };
  1773.     function setEl(id, text)  { var el = document.getElementById(id); if (el) el.textContent = text; }
  1774.     function setAttr(id, cls) { var el = document.getElementById(id); if (!el) return; el.className = 'n-dash-dot ' + cls; }
  1776.     function switchDash(region) {
  1777.         var d    = dashData[region];
  1778.         var body = document.getElementById('n-dash-body');
  1779.         if (!d || !body) return;
  1781.         body.classList.add('fading');
  1782.         setTimeout(function () {
  1783.             /* stats */
  1784.             ['s1','s2','s3','s4'].forEach(function (s) {
  1785.                 setEl('dm-' + s + '-lbl',   d[s].lbl);
  1786.                 setEl('dm-' + s + '-val',   d[s].val);
  1787.                 setEl('dm-' + s + '-trend', d[s].trend);
  1788.                 var t = document.getElementById('dm-' + s + '-trend');
  1789.                 if (t) { t.className = 'n-dash-stat-trend' + (d[s].neg ? ' neg' : ''); }
  1790.             });
  1791.             /* chart */
  1792.             setEl('dm-chart-lbl', d.chart);
  1793.             var fill = document.getElementById('dm-chart-fill');
  1794.             var line = document.getElementById('dm-chart-line');
  1795.             if (fill) fill.setAttribute('d', d.path + ' L320,56 L0,56 Z');
  1796.             if (line) line.setAttribute('d', d.path);
  1797.             /* feed */
  1798.             d.feed.forEach(function (f, i) {
  1799.                 var n = i + 1;
  1800.                 setEl('dm-f' + n + '-txt', f.txt);
  1801.                 setAttr('dm-f' + n + '-dot', f.dot);
  1802.             });
  1803.             body.classList.remove('fading');
  1804.         }, 180);
  1805.     }
  1807.     document.querySelectorAll('.n-dash-tab').forEach(function (btn) {
  1808.         btn.addEventListener('click', function () {
  1809.             document.querySelectorAll('.n-dash-tab').forEach(function (b) { b.classList.remove('active'); });
  1810.             btn.classList.add('active');
  1811.             switchDash(btn.textContent.trim());
  1812.         });
  1813.     });
  1814. }());
  1815. </script>