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 (--n-*), the .n-* utilities and .n-btn* buttons now live in the
  6.    shared base.css (CW1), loaded globally via central_header. Home keeps only its
  7.    page-specific rules below, plus the body/reset that base.css intentionally
  8.    omits (style.css owns the global body background, so home re-asserts cream). */
  10. /* ── Base ──────────────────────────────────────────────────────────────────── */
  11. *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  12. body { background: var(--n-cream); font-family: var(--n-font); color: var(--n-dark); }
  13. a { text-decoration: none; }
  15. /* Utilities (.n-wrap/.n-sec/.n-label/.n-h*/.n-body/.n-center/.n-mt-*/em.n-em)
  16.    moved to base.css (CW1). */
  17. /* Maturity pills */
  18. .n-mat-pill {
  19.     display: inline-flex; align-items: center; gap: 5px;
  20.     font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  21.     font-family: monospace; padding: 2px 9px; border-radius: 100px;
  22.     border: 1px solid var(--n-border-md); margin-left: 8px; vertical-align: middle;
  23. }
  24. .n-mat-pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
  25. .n-mat-now    { color: var(--n-sage);  background: var(--n-sage-dim);  border-color: rgba(61,107,82,.25); }
  26. .n-mat-site   { color: var(--n-slate); background: var(--n-slate-dim); border-color: rgba(61,79,114,.22); }
  27. .n-mat-roll   { color: var(--n-amber); background: var(--n-amber-dim); border-color: rgba(192,125,42,.25); }
  28. .n-mat-road   { color: var(--n-muted); background: rgba(26,29,46,.04);  border-color: var(--n-border-md); }
  30. /* Buttons (.n-btn and variants) moved to base.css (CW1). */
  32. /* ── Navbar overrides ───────────────────────────────────────────────────────── */
  33. .navbar {
  34.     background: rgba(247,245,240,.96) !important;
  35.     backdrop-filter: blur(16px) saturate(180%);
  36.     border-bottom: 1px solid var(--n-border) !important;
  37.     box-shadow: none !important;
  38. }
  39. .navbar .nav-link        { color: var(--n-dark) !important; font-size: 13.5px; font-weight: 500; opacity: .8; transition: opacity .15s; }
  40. .navbar .nav-link:hover,
  41. .navbar .nav-link.active { opacity: 1; color: var(--n-dark) !important; }
  42. .navbar .login-btn {
  43.     background: var(--n-dark) !important; color: #fff !important;
  44.     border: none !important; border-radius: var(--n-radius-sm) !important;
  45.     padding: 8px 20px !important; font-size: 13px !important; font-weight: 600 !important;
  46. }
  47. .navbar .login-btn:hover { background: var(--n-dark-2) !important; }
  49. /* ────────────────────────────────────────────────────────────────────────────
  50.    1. HERO
  51.    ──────────────────────────────────────────────────────────────────────────── */
  52. .n-hero {
  53.     background: var(--n-cream);
  54.     padding: 130px 0 80px;
  55.     position: relative;
  56.     overflow: hidden;
  57.     min-height: 92vh;
  58.     display: flex;
  59.     align-items: center;
  60. }
  61. .n-hero::before {
  62.     content: '';
  63.     position: absolute; top: 0; right: 0;
  64.     width: 55%; height: 100%;
  65.     background: radial-gradient(ellipse 80% 70% at 80% 40%, rgba(192,125,42,.07) 0%, transparent 65%),
  66.                 radial-gradient(ellipse 50% 60% at 95% 80%, rgba(61,107,82,.06) 0%, transparent 60%);
  67.     pointer-events: none;
  68. }
  69. .n-hero::after {
  70.     content: '';
  71.     position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  72.     background: linear-gradient(90deg, transparent, var(--n-border-md), transparent);
  73. }
  74. .n-hero-layout { display: grid; grid-template-columns: 1fr 1.05fr; gap: 72px; align-items: center; position: relative; }
  75. .n-hero-tag {
  76.     display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  77.     background: var(--n-amber-dim); border: 1px solid rgba(192,125,42,.2);
  78.     color: var(--n-amber); font-size: 11px; font-weight: 700;
  79.     letter-spacing: .16em; text-transform: uppercase;
  80.     padding: 6px 14px 6px 10px; border-radius: 4px; margin-bottom: 28px;
  81. }
  82. .n-hero-tag span:first-child { width: 6px; height: 6px; background: var(--n-amber); border-radius: 50%; display: block; flex-shrink: 0; }
  83. .n-hero-h1 {
  84.     font-family: 'Montserrat', sans-serif;
  85.     font-size: clamp(38px, 5.5vw, 66px);
  86.     font-weight: 900; line-height: 1.04; letter-spacing: -.025em;
  87.     color: var(--n-dark); margin-bottom: 24px;
  88. }
  89. .n-hero-h1 em { font-style: normal; color: var(--n-amber); }
  90. .n-hero-desc {
  91.     font-size: 17px; line-height: 1.75; color: var(--n-muted);
  92.     max-width: 480px; margin-bottom: 32px;
  93. }
  94. .n-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
  95. .n-micro-checks {
  96.     display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 40px;
  97. }
  98. .n-micro-checks span {
  99.     font-size: 13px; color: var(--n-muted); display: inline-flex; align-items: center; gap: 6px;
  100. }
  101. .n-micro-checks span i { color: var(--n-sage); font-size: 12px; }
  102. .n-hero-metrics { display: flex; gap: 0; }
  103. .n-metric {
  104.     padding: 0 24px; display: flex; flex-direction: column; gap: 3px;
  105.     border-right: 1px solid var(--n-border-md);
  106. }
  107. .n-metric:first-child { padding-left: 0; }
  108. .n-metric:last-child  { border-right: none; }
  109. .n-metric-val { font-family:'Montserrat',sans-serif; font-size: 22px; font-weight: 800; color: var(--n-dark); letter-spacing: -.02em; }
  110. .n-metric-lbl { font-size: 11.5px; color: var(--n-muted-2); font-weight: 500; }
  112. /* Hero dashboard mock */
  113. .n-hero-visual { position: relative; }
  114. .n-dash-mock {
  115.     background: var(--n-white);
  116.     border: 1px solid var(--n-border-md);
  117.     border-radius: var(--n-radius-lg);
  118.     box-shadow: var(--n-shadow-lg);
  119.     overflow: hidden;
  120. }
  121. .n-dash-header {
  122.     background: var(--n-dark);
  123.     padding: 14px 18px;
  124.     display: flex; align-items: center; justify-content: space-between;
  125. }
  126. .n-dash-header-title {
  127.     font-size: 11px; font-weight: 600; color: rgba(255,255,255,.55);
  128.     letter-spacing: .08em; text-transform: uppercase; font-family: monospace;
  129. }
  130. .n-dash-tabs {
  131.     display: flex; gap: 2px; padding: 2px;
  132.     background: rgba(255,255,255,.07); border-radius: 5px;
  133. }
  134. .n-dash-tab {
  135.     padding: 3px 10px; font-size: 11px; font-weight: 600; border-radius: 3px;
  136.     letter-spacing: .06em; cursor: pointer; color: rgba(255,255,255,.4);
  137.     font-family: monospace; border: 1px solid transparent; background: transparent;
  138.     transition: color .18s, background .18s, border-color .18s;
  139. }
  140. .n-dash-tab:hover { color: rgba(255,255,255,.75); }
  141. .n-dash-tab.active { background: rgba(192,125,42,.18); color: var(--n-amber); border-color: rgba(192,125,42,.4); }
  142. .n-dash-body { transition: opacity .18s; }
  143. .n-dash-body.fading { opacity: 0; }
  144. .n-dash-body { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
  145. .n-dash-stats {
  146.     display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  147. }
  148. .n-dash-stat {
  149.     background: var(--n-cream); border: 1px solid var(--n-border);
  150.     border-radius: var(--n-radius-sm); padding: 12px 14px;
  151. }
  152. .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; }
  153. .n-dash-stat-val { font-family:'Montserrat',sans-serif; font-size: 17px; font-weight: 800; color: var(--n-dark); line-height: 1; }
  154. .n-dash-stat-trend { font-size: 11px; color: var(--n-sage); font-weight: 600; margin-top: 3px; }
  155. .n-dash-stat-trend.neg { color: #d9534f; }
  156. .n-dash-chart {
  157.     background: var(--n-cream); border: 1px solid var(--n-border);
  158.     border-radius: var(--n-radius-sm); padding: 12px 14px;
  159. }
  160. .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; }
  161. .n-dash-feed { display: flex; flex-direction: column; gap: 6px; }
  162. .n-dash-feed-row {
  163.     display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  164.     background: var(--n-cream); border: 1px solid var(--n-border);
  165.     border-radius: 6px; font-size: 12px; color: var(--n-muted);
  166. }
  167. .n-dash-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
  168. .n-dash-dot.amber { background: var(--n-amber); }
  169. .n-dash-dot.sage  { background: var(--n-sage); }
  170. .n-dash-dot.muted { background: var(--n-muted-2); }
  172. /* ────────────────────────────────────────────────────────────────────────────
  173.    2. TRUST RIBBON
  174.    ──────────────────────────────────────────────────────────────────────────── */
  175. .n-trust {
  176.     background: var(--n-white);
  177.     border-top: 1px solid var(--n-border);
  178.     border-bottom: 1px solid var(--n-border);
  179.     padding: 20px 0;
  180. }
  181. .n-trust-row {
  182.     display: flex; align-items: center; justify-content: center;
  183.     gap: 48px; flex-wrap: wrap;
  184. }
  185. .n-trust-item {
  186.     display: flex; align-items: center; gap: 8px;
  187.     font-size: 13px; color: var(--n-muted);
  188. }
  189. .n-trust-item .n-trust-dot {
  190.     width: 6px; height: 6px; background: var(--n-sage); border-radius: 50%; flex-shrink: 0;
  191. }
  192. .n-trust-item strong { color: var(--n-dark); font-weight: 600; }
  194. /* ────────────────────────────────────────────────────────────────────────────
  195.    3. REGIONS
  196.    ──────────────────────────────────────────────────────────────────────────── */
  197. .n-region-grid {
  198.     display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 48px;
  199. }
  200. .n-region-card {
  201.     background: var(--n-white); border: 1px solid var(--n-border);
  202.     border-radius: var(--n-radius); padding: 32px;
  203.     transition: box-shadow .2s, border-color .2s;
  204. }
  205. .n-region-card:hover { border-color: var(--n-border-md); box-shadow: var(--n-shadow-md); }
  206. .n-region-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
  207. .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; }
  208. .n-region-loc  { font-size: 11px; color: var(--n-muted-2); font-family: monospace; letter-spacing: .04em; }
  209. .n-region-card h3 { font-family:'Montserrat',sans-serif; font-size: 17px; font-weight: 700; color: var(--n-dark); margin-bottom: 10px; }
  210. .n-region-card p  { font-size: 14px; color: var(--n-muted); line-height: 1.7; margin-bottom: 20px; }
  211. .n-region-feats { list-style: none; padding-top: 16px; border-top: 1px solid var(--n-border); display: flex; flex-direction: column; gap: 8px; }
  212. .n-region-feats li { font-size: 13px; color: var(--n-dark); display: flex; align-items: flex-start; gap: 10px; }
  213. .n-region-feats li::before { content: ''; width: 5px; height: 5px; background: var(--n-sage); border-radius: 50%; margin-top: 7px; flex-shrink: 0; }
  215. /* ────────────────────────────────────────────────────────────────────────────
  216.    4. SIX SYSTEMS GRID
  217.    ──────────────────────────────────────────────────────────────────────────── */
  218. .n-six-grid {
  219.     display: grid; grid-template-columns: repeat(3, 1fr);
  220.     gap: 1px; background: var(--n-border-md);
  221.     border: 1px solid var(--n-border-md); border-radius: var(--n-radius); overflow: hidden;
  222.     margin-top: 48px;
  223. }
  224. .n-sys-card { background: var(--n-white); padding: 28px; transition: background .2s; }
  225. .n-sys-card:hover { background: var(--n-cream); }
  226. .n-sys-tag {
  227.     font-size: 11px; font-weight: 700; color: var(--n-amber); letter-spacing: .1em;
  228.     text-transform: uppercase; margin-bottom: 14px; display: block; font-family: monospace;
  229. }
  230. .n-sys-card h3 { font-family:'Montserrat',sans-serif; font-size: 16px; font-weight: 700; color: var(--n-dark); margin-bottom: 10px; }
  231. .n-sys-card p  { font-size: 13.5px; color: var(--n-muted); line-height: 1.65; margin-bottom: 14px; }
  232. .n-sys-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 5px; }
  233. .n-sys-chips li {
  234.     font-size: 11px; color: var(--n-muted); padding: 3px 10px;
  235.     background: var(--n-cream); border: 1px solid var(--n-border-md);
  236.     border-radius: 4px; font-family: monospace;
  237. }
  239. /* ────────────────────────────────────────────────────────────────────────────
  240.    5. NATIVE AI SECTION
  241.    ──────────────────────────────────────────────────────────────────────────── */
  242. .n-ai-section {
  243.     background: var(--n-dark);
  244.     padding: 100px 0;
  245.     position: relative;
  246.     overflow: hidden;
  247.     text-align: left;
  248. }
  249. .n-ai-section::before {
  250.     content: '';
  251.     position: absolute; top: -40%; right: -5%; width: 60%; height: 150%;
  252.     background: radial-gradient(ellipse 70% 60% at 70% 50%, rgba(192,125,42,.12) 0%, transparent 65%);
  253.     pointer-events: none;
  254. }
  255. .n-ai-section::after {
  256.     content: '';
  257.     position: absolute; bottom: -30%; left: -5%; width: 50%; height: 100%;
  258.     background: radial-gradient(ellipse 60% 60% at 30% 70%, rgba(61,107,82,.10) 0%, transparent 60%);
  259.     pointer-events: none;
  260. }
  261. .n-ai-label { color: var(--n-amber); }
  262. .n-ai-label::before { background: var(--n-amber); }
  263. .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; }
  264. .n-ai-h2 em { font-style: normal; color: var(--n-amber); }
  265. .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; }
  266. .n-ai-use-cases {
  267.     display: flex; flex-direction: column; gap: 16px; margin-bottom: 40px;
  268. }
  269. .n-ai-use {
  270.     display: flex; align-items: flex-start; gap: 14px;
  271.     padding: 16px 20px;
  272.     background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  273.     border-radius: var(--n-radius-sm); transition: border-color .2s;
  274. }
  275. .n-ai-use:hover { border-color: rgba(192,125,42,.3); }
  276. .n-ai-use-icon {
  277.     width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
  278.     background: var(--n-amber-dim); border: 1px solid rgba(192,125,42,.2);
  279.     display: flex; align-items: center; justify-content: center;
  280.     color: var(--n-amber); font-size: 15px;
  281. }
  282. .n-ai-use h4 { font-family:'Montserrat',sans-serif; font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 4px; }
  283. .n-ai-use p  { font-size: 13px; color: rgba(255,255,255,.55); line-height: 1.6; margin: 0; }
  285. /* Two deployment paths */
  286. .n-ai-paths { display: flex; flex-direction: column; gap: 12px; }
  287. .n-ai-path {
  288.     border-radius: var(--n-radius);
  289.     padding: 24px 28px;
  290.     position: relative;
  291.     text-align: left;
  292. }
  293. .n-ai-path-cloud {
  294.     background: rgba(255,255,255,.05);
  295.     border: 1px solid rgba(255,255,255,.12);
  296.     display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center;
  297. }
  298. .n-ai-path-native {
  299.     background: rgba(192,125,42,.06);
  300.     border: 1px solid rgba(192,125,42,.3);
  301.     border-top: 2px solid var(--n-amber);
  302. }
  303. .n-ai-path-badge {
  304.     font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  305.     font-family: monospace; margin-bottom: 10px; display: inline-block;
  306. }
  307. .n-ai-path-cloud .n-ai-path-badge  { color: rgba(255,255,255,.4); }
  308. .n-ai-path-native .n-ai-path-badge { color: var(--n-amber); }
  309. .n-ai-path h3  { font-family:'Montserrat',sans-serif; font-size: 16px; font-weight: 800; color: #fff; margin-bottom: 6px; text-align: left; }
  310. .n-ai-path p   { font-size: 13px; color: rgba(255,255,255,.5); line-height: 1.6; margin-bottom: 0; text-align: left; }
  311. .n-ai-price-block { text-align: right; flex-shrink: 0; }
  312. .n-ai-price-num { font-family:'Montserrat',sans-serif; font-size: 30px; font-weight: 900; color: #fff; line-height: 1; display: block; }
  313. .n-ai-price-unit { font-size: 11px; color: rgba(255,255,255,.4); font-family: monospace; display: block; margin-top: 3px; white-space: nowrap; }
  314. .n-ai-path-feats { list-style: none; display: flex; flex-direction: column; gap: 7px; }
  315. .n-ai-path-feats li {
  316.     font-size: 12.5px; color: rgba(255,255,255,.6);
  317.     display: flex; align-items: flex-start; gap: 8px; text-align: left;
  318. }
  319. .n-ai-path-feats li::before { content: '→'; color: var(--n-amber); font-family: monospace; font-size: 11px; flex-shrink: 0; margin-top: 2px; }
  320. .n-ai-hw-badge {
  321.     display: inline-flex; align-items: center; gap: 6px;
  322.     padding: 4px 10px; background: rgba(192,125,42,.12);
  323.     border: 1px solid rgba(192,125,42,.3); border-radius: 4px;
  324.     font-size: 11px; font-weight: 600; color: var(--n-amber); font-family: monospace;
  325.     margin-right: 6px;
  326. }
  327. /* Native card inner layout */
  328. .n-native-top {
  329.     display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: flex-start; margin-bottom: 20px;
  330. }
  331. .n-native-hw-row {
  332.     display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  333.     padding: 14px 16px; margin: 16px 0;
  334.     background: rgba(0,0,0,.2); border-radius: 8px; border: 1px solid rgba(255,255,255,.06);
  335. }
  336. .n-native-hw-label {
  337.     font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  338.     color: rgba(255,255,255,.3); font-family: monospace; width: 100%; margin-bottom: 8px;
  339. }
  340. .n-hw-chip {
  341.     display: inline-flex; align-items: center; gap: 7px;
  342.     padding: 6px 12px; border-radius: 6px;
  343.     font-size: 12px; font-weight: 700; font-family: monospace; letter-spacing: .02em;
  344. }
  345. .n-hw-chip-gpu {
  346.     background: linear-gradient(135deg, rgba(118,185,0,.15), rgba(118,185,0,.08));
  347.     border: 1px solid rgba(118,185,0,.3); color: #76b900;
  348. }
  349. .n-hw-chip-gpu i { color: #76b900; font-size: 13px; }
  350. .n-hw-chip-thor {
  351.     background: linear-gradient(135deg, rgba(0,115,207,.15), rgba(0,115,207,.08));
  352.     border: 1px solid rgba(0,115,207,.3); color: #60a8e8;
  353. }
  354. .n-hw-chip-thor i { color: #60a8e8; font-size: 13px; }
  355. .n-native-divider { height: 1px; background: rgba(255,255,255,.08); margin: 16px 0; }
  356. .n-native-grid {
  357.     display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px;
  358. }
  359. .n-native-fact { display: flex; flex-direction: column; gap: 2px; }
  360. .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; }
  361. .n-native-fact-val { font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.75); }
  363. /* ────────────────────────────────────────────────────────────────────────────
  364.    6. MOBILE APP
  365.    ──────────────────────────────────────────────────────────────────────────── */
  366. .n-mobile-layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: center; }
  367. .n-mobile-pill {
  368.     display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px;
  369.     background: var(--n-white); border: 1px solid var(--n-border-md); border-radius: 100px;
  370.     font-size: 11px; color: var(--n-muted); font-family: monospace; font-weight: 600;
  371.     margin-bottom: 20px; letter-spacing: .04em;
  372. }
  373. .n-mobile-pill::before { content: ''; width: 5px; height: 5px; background: var(--n-sage); border-radius: 50%; }
  374. .n-mobile-list {
  375.     list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin: 24px 0 28px;
  376. }
  377. .n-mobile-list li {
  378.     font-size: 13.5px; color: var(--n-dark); display: flex; align-items: flex-start; gap: 8px;
  379. }
  380. .n-mobile-list li::before { content: '→'; color: var(--n-amber); font-family: monospace; font-size: 12px; flex-shrink: 0; margin-top: 2px; }
  381. .n-mobile-stores { display: flex; gap: 10px; flex-wrap: wrap; }
  382. .n-phone-frame {
  383.     aspect-ratio: 9/18; max-width: 280px; margin: 0 auto;
  384.     background: var(--n-dark); border-radius: 32px; padding: 14px;
  385.     box-shadow: 0 32px 64px -24px rgba(26,29,46,.3), 0 0 0 1px var(--n-border-md);
  386.     position: relative;
  387. }
  388. .n-phone-notch {
  389.     position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  390.     width: 70px; height: 16px; background: var(--n-dark);
  391.     border-radius: 0 0 12px 12px; z-index: 2;
  392. }
  393. .n-phone-screen {
  394.     width: 100%; height: 100%; background: var(--n-cream);
  395.     border-radius: 22px; padding: 28px 14px 14px;
  396.     display: flex; flex-direction: column; gap: 8px; overflow: hidden;
  397. }
  398. .n-phone-greet   { font-size: 10px; color: var(--n-muted-2); font-family: monospace; text-transform: uppercase; letter-spacing: .08em; }
  399. .n-phone-greet-h { font-family:'Montserrat',sans-serif; font-size: 16px; font-weight: 800; color: var(--n-dark); margin-top: 2px; }
  400. .n-phone-clock   { background: var(--n-dark); color: #fff; padding: 12px; border-radius: 10px; text-align: center; }
  401. .n-phone-clock .time  { font-family: monospace; font-size: 20px; font-weight: 600; letter-spacing: .06em; }
  402. .n-phone-clock .label { font-size: 9px; color: var(--n-amber); margin-top: 3px; text-transform: uppercase; letter-spacing: .08em; font-family: monospace; }
  403. .n-phone-row {
  404.     display: flex; align-items: center; gap: 7px; padding: 7px 10px;
  405.     background: var(--n-white); border: 0.5px solid var(--n-border-md);
  406.     border-radius: 6px; font-size: 11px; color: var(--n-muted);
  407. }
  408. .n-phone-pip { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
  409. .n-phone-pip.amber { background: var(--n-amber); }
  410. .n-phone-pip.sage  { background: var(--n-sage); }
  411. .n-phone-pip.muted { background: var(--n-muted-2); }
  412. .n-phone-amt { margin-left: auto; font-family: monospace; font-size: 10px; color: var(--n-dark); font-weight: 600; }
  414. /* ────────────────────────────────────────────────────────────────────────────
  415.    7. PRICING
  416.    ──────────────────────────────────────────────────────────────────────────── */
  417. .n-price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 48px; align-items: stretch; }
  418. .n-plan {
  419.     background: var(--n-white); border: 1px solid var(--n-border-md);
  420.     border-radius: var(--n-radius); padding: 32px; position: relative;
  421.     transition: box-shadow .2s;
  422.     display: flex; flex-direction: column; height: 100%;
  423. }
  424. .n-plan:hover { box-shadow: var(--n-shadow-md); }
  425. .n-plan.featured {
  426.     background: var(--n-dark);
  427.     border-color: var(--n-dark);
  428.     box-shadow: var(--n-shadow-lg);
  429. }
  430. .n-plan-tag {
  431.     position: absolute; top: -1px; right: 24px;
  432.     font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  433.     background: var(--n-amber); color: #fff;
  434.     padding: 4px 12px; border-radius: 0 0 8px 8px; font-family: monospace;
  435. }
  436. .n-plan h3 { font-family:'Montserrat',sans-serif; font-size: 17px; font-weight: 800; margin-bottom: 6px; }
  437. .n-plan .n-plan-audience { font-size: 13px; color: var(--n-muted); margin-bottom: 20px; line-height: 1.5; }
  438. .n-plan.featured h3,
  439. .n-plan.featured .n-plan-audience { color: rgba(255,255,255,.7); }
  440. .n-plan.featured h3 { color: #fff; }
  441. .n-plan-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 6px; }
  442. .n-plan-price .num { font-family:'Montserrat',sans-serif; font-size: 36px; font-weight: 900; color: var(--n-dark); line-height: 1; }
  443. .n-plan.featured .n-plan-price .num { color: #fff; }
  444. .n-plan-price .unit { font-size: 13px; color: var(--n-muted-2); }
  445. .n-plan.featured .n-plan-price .unit { color: rgba(255,255,255,.5); }
  446. .n-plan-billing { font-size: 12px; color: var(--n-muted-2); margin-bottom: 24px; font-family: monospace; }
  447. .n-plan.featured .n-plan-billing { color: rgba(255,255,255,.4); }
  448. .n-plan-div { height: 1px; background: var(--n-border-md); margin-bottom: 20px; }
  449. .n-plan.featured .n-plan-div { background: rgba(255,255,255,.1); }
  450. .n-plan-feats { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; flex: 1; }
  451. .n-plan-feats li { font-size: 13.5px; display: flex; align-items: flex-start; gap: 10px; color: var(--n-dark); }
  452. .n-plan-feats li i { color: var(--n-sage); font-size: 13px; margin-top: 2px; flex-shrink: 0; }
  453. .n-plan.featured .n-plan-feats li { color: rgba(255,255,255,.8); }
  454. .n-plan.featured .n-plan-feats li i { color: var(--n-amber); }
  455. .n-price-note { text-align: center; font-size: 13px; color: var(--n-muted-2); margin-top: 28px; }
  456. /* Early-adopter pricing on home cards */
  457. .n-plan-early-badge {
  458.     display: inline-flex; align-items: center; gap: 4px;
  459.     font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  460.     color: var(--n-amber); background: var(--n-amber-dim);
  461.     border: 1px solid rgba(192,125,42,.25); border-radius: 100px;
  462.     padding: 2px 8px; margin-bottom: 6px;
  463. }
  464. .n-plan-early-badge::before { content: '⚡'; }
  465. .n-plan-regular-price {
  466.     font-family: monospace; font-size: 11px; color: var(--n-muted-2);
  467.     text-decoration: line-through; opacity: .7; margin-bottom: 2px;
  468. }
  469. .n-plan.featured .n-plan-early-badge { color: var(--n-amber); background: rgba(192,125,42,.18); border-color: rgba(192,125,42,.3); }
  470. .n-plan.featured .n-plan-regular-price { color: rgba(255,255,255,.3); }
  471. .n-plan-lock-note {
  472.     font-size: 11px; color: var(--n-amber); margin-top: 2px; margin-bottom: 20px;
  473.     display: flex; align-items: flex-start; gap: 4px; line-height: 1.45;
  474. }
  475. .n-plan-lock-note::before { content: '🔒'; flex-shrink: 0; }
  476. .n-plan.featured .n-plan-lock-note { color: rgba(192,125,42,.8); }
  478. /* AI pricing add-on callout */
  479. .n-ai-pricing-note {
  480.     margin-top: 20px;
  481.     padding: 20px 24px;
  482.     background: rgba(192,125,42,.07);
  483.     border: 1px solid rgba(192,125,42,.18);
  484.     border-radius: var(--n-radius-sm);
  485.     display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  486. }
  487. .n-ai-pricing-note p { font-size: 13.5px; color: var(--n-dark); line-height: 1.6; flex: 1; }
  488. .n-ai-pricing-note p strong { color: var(--n-amber); }
  490. /* ────────────────────────────────────────────────────────────────────────────
  491.    8. CLIENTS
  492.    ──────────────────────────────────────────────────────────────────────────── */
  493. .n-logo-strip {
  494.     background: var(--n-white); border: 1px solid var(--n-border);
  495.     border-radius: var(--n-radius); padding: 36px; margin-top: 48px;
  496. }
  497. .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; }
  498. .n-logo-row { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
  499. .n-logo-item {
  500.     flex: 1; text-align: center; font-size: 14px; font-weight: 600;
  501.     color: var(--n-muted); padding: 12px 20px; letter-spacing: .01em;
  502.     border-right: 1px solid var(--n-border); transition: color .2s;
  503. }
  504. .n-logo-item:last-child { border-right: none; }
  505. .n-logo-item:hover { color: var(--n-dark); }
  507. /* ────────────────────────────────────────────────────────────────────────────
  508.    9. CTA / NEWSLETTER
  509.    ──────────────────────────────────────────────────────────────────────────── */
  510. .n-cta-final {
  511.     background: var(--n-cream-2);
  512.     padding: 120px 0;
  513.     text-align: center;
  514.     border-top: 1px solid var(--n-border);
  515. }
  516. .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; }
  517. .n-cta-final h2 em { font-style: normal; color: var(--n-amber); }
  518. .n-cta-final p { max-width: 52ch; margin: 0 auto 32px; color: var(--n-muted); font-size: 16px; line-height: 1.7; }
  519. .n-cta-form { max-width: 480px; margin: 0 auto; }
  520. .n-cta-row  { display: flex; gap: 10px; }
  521. .n-cta-row input {
  522.     flex: 1; padding: 13px 18px; font-family: var(--n-font); font-size: 14px;
  523.     background: var(--n-white); border: 1.5px solid var(--n-border-md);
  524.     border-radius: var(--n-radius-sm); color: var(--n-dark);
  525. }
  526. .n-cta-row input:focus { outline: none; border-color: var(--n-amber); }
  527. .n-cta-row button {
  528.     background: var(--n-dark); color: #fff; border: none;
  529.     padding: 13px 24px; font-family: var(--n-font); font-size: 14px; font-weight: 600;
  530.     border-radius: var(--n-radius-sm); cursor: pointer; transition: background .2s; white-space: nowrap;
  531. }
  532. .n-cta-row button:hover { background: var(--n-amber); }
  533. .n-cta-note { font-size: 12px; color: var(--n-muted-2); margin-top: 10px; }
  535. /* ────────────────────────────────────────────────────────────────────────────
  536.    Responsive
  537.    ──────────────────────────────────────────────────────────────────────────── */
  538. @media (max-width: 880px) {
  539.     .n-paths-grid     { grid-template-columns: 1fr; }
  540.     .n-problem-grid   { grid-template-columns: 1fr; }
  541.     .n-vs-grid        { grid-template-columns: 1fr; }
  542.     .n-ba-grid        { grid-template-columns: 1fr; }
  543. }
  544. @media (max-width: 1040px) {
  545.     .n-hero-layout    { grid-template-columns: 1fr; gap: 48px; }
  546.     .n-hero-visual    { display: none; }
  547.     .n-region-grid    { grid-template-columns: 1fr; }
  548.     .n-six-grid       { grid-template-columns: 1fr 1fr; }
  549.     .n-native-top     { grid-template-columns: 1fr; }
  550.     .n-native-grid    { grid-template-columns: 1fr 1fr; }
  551.     .n-mobile-layout  { grid-template-columns: 1fr; gap: 40px; }
  552.     .n-phone-frame    { display: none; }
  553.     .n-mobile-list    { grid-template-columns: 1fr; }
  554.     .n-price-grid     { grid-template-columns: 1fr; }
  555.     .n-dash-stats     { grid-template-columns: repeat(2,1fr); }
  556. }
  557. @media (max-width: 720px) {
  558.     .n-six-grid { grid-template-columns: 1fr; }
  559.     .n-hero-metrics { flex-wrap: wrap; gap: 20px; }
  560.     .n-metric { padding: 0; border-right: none; }
  561.     .n-trust-row { gap: 20px; }
  562.     .n-cta-row { flex-direction: column; }
  563. }
  564. </style>
  566. {# ══ 1. HERO ══════════════════════════════════════════════════════════════════ #}
  567. <section class="n-hero">
  568.     <div class="n-wrap" style="width:100%">
  569.         <div class="n-hero-layout">
  571.             {# Left: copy #}
  572.             <div>
  573.                 <div class="n-hero-tag">
  574.                     <span></span>
  575.                     <span class="trn" data-trn-key="_H_HERO_TAG_">New — AI email classifier · Spotlight Search · Persistent AI reports</span>
  576.                 </div>
  577.                 <h1 class="n-hero-h1">
  578.                     <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>
  579.                 </h1>
  580.                 <p class="n-hero-desc trn" data-trn-key="_H_HERO_DESC_">
  581.                     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.
  582.                 </p>
  583.                 <div class="n-hero-actions">
  584.                     <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-primary">
  585.                         <span class="trn" data-trn-key="_H_BTN_TRIAL_">Request Project Workflow Audit</span> <i class="fa-solid fa-arrow-right"></i>
  586.                     </a>
  587.                     <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-outline trn" data-trn-key="_H_BTN_DEMO_">
  588.                         Book Business ERP Demo
  589.                     </a>
  590.                 </div>
  591.                 <div class="n-micro-checks">
  592.                     <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>
  593.                 </div>
  594.                 <div class="n-hero-metrics">
  595.                     <div class="n-metric">
  596.                         <span class="n-metric-val">6+</span>
  597.                         <span class="n-metric-lbl trn" data-trn-key="_H_METRIC_TOOLS_">Tools replaced</span>
  598.                     </div>
  599.                     <div class="n-metric">
  600.                         <span class="n-metric-val">4</span>
  601.                         <span class="n-metric-lbl trn" data-trn-key="_H_METRIC_MARKETS_">Markets live</span>
  602.                     </div>
  603.                     <div class="n-metric">
  604.                         <span class="n-metric-val">€0</span>
  605.                         <span class="n-metric-lbl trn" data-trn-key="_H_METRIC_TRIAL_">Free Starter</span>
  606.                     </div>
  607.                     <div class="n-metric">
  608.                         {% set _heroUserPrice = '' %}
  609.                         {% 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 %}
  610.                         <span class="n-metric-val">€{{ _heroUserPrice }}</span>
  611.                         <span class="n-metric-lbl trn" data-trn-key="_H_METRIC_PRICE_">per user / mo</span>
  612.                     </div>
  613.                 </div>
  614.             </div>
  616.             {# Right: dashboard mock #}
  617.             <div class="n-hero-visual">
  618.                 <div class="n-dash-mock">
  619.                     <div class="n-dash-header">
  620.                         <div class="n-dash-header-title trn" data-trn-key="_H_DASH_TITLE_">HoneyBee / Command Center</div>
  621.                         <div class="n-dash-tabs">
  622.                             <button class="n-dash-tab active">DE</button>
  623.                             <button class="n-dash-tab">SG</button>
  624.                             <button class="n-dash-tab">NO</button>
  625.                             <button class="n-dash-tab">EU</button>
  626.                         </div>
  627.                     </div>
  628.                     <div class="n-dash-body" id="n-dash-body">
  629.                         <div class="n-dash-stats">
  630.                             <div class="n-dash-stat">
  631.                                 <div class="n-dash-stat-lbl" id="dm-s1-lbl">Revenue MTD</div>
  632.                                 <div class="n-dash-stat-val" id="dm-s1-val">€284k</div>
  633.                                 <div class="n-dash-stat-trend" id="dm-s1-trend">↑ 12.4%</div>
  634.                             </div>
  635.                             <div class="n-dash-stat">
  636.                                 <div class="n-dash-stat-lbl" id="dm-s2-lbl">Pipeline</div>
  637.                                 <div class="n-dash-stat-val" id="dm-s2-val">€1.4M</div>
  638.                                 <div class="n-dash-stat-trend" id="dm-s2-trend">42 deals</div>
  639.                             </div>
  640.                             <div class="n-dash-stat">
  641.                                 <div class="n-dash-stat-lbl" id="dm-s3-lbl">Projects</div>
  642.                                 <div class="n-dash-stat-val" id="dm-s3-val">18</div>
  643.                                 <div class="n-dash-stat-trend neg" id="dm-s3-trend">3 at risk</div>
  644.                             </div>
  645.                             <div class="n-dash-stat">
  646.                                 <div class="n-dash-stat-lbl" id="dm-s4-lbl">DATEV Sync</div>
  647.                                 <div class="n-dash-stat-val" id="dm-s4-val">OK</div>
  648.                                 <div class="n-dash-stat-trend" id="dm-s4-trend">2 min ago</div>
  649.                             </div>
  650.                         </div>
  651.                         <div class="n-dash-chart">
  652.                             <div class="n-dash-chart-lbl" id="dm-chart-lbl">Cash flow — 30 days · Germany</div>
  653.                             <svg viewBox="0 0 320 56" preserveAspectRatio="none" style="width:100%;height:56px;display:block">
  654.                                 <defs>
  655.                                     <linearGradient id="cashGrad" x1="0" x2="0" y1="0" y2="1">
  656.                                         <stop offset="0%" stop-color="#C07D2A" stop-opacity="0.25"/>
  657.                                         <stop offset="100%" stop-color="#C07D2A" stop-opacity="0"/>
  658.                                     </linearGradient>
  659.                                 </defs>
  660.                                 <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)"/>
  661.                                 <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"/>
  662.                             </svg>
  663.                         </div>
  664.                         <div class="n-dash-feed">
  665.                             <div class="n-dash-feed-row">
  666.                                 <div class="n-dash-dot amber" id="dm-f1-dot"></div>
  667.                                 <span id="dm-f1-txt">Lead → Opportunity moved by Kanban (€45k)</span>
  668.                             </div>
  669.                             <div class="n-dash-feed-row">
  670.                                 <div class="n-dash-dot muted" id="dm-f2-dot"></div>
  671.                                 <span id="dm-f2-txt">DATEV export ready for tax consultant</span>
  672.                             </div>
  673.                             <div class="n-dash-feed-row">
  674.                                 <div class="n-dash-dot sage" id="dm-f3-dot"></div>
  675.                                 <span id="dm-f3-txt">AI report: Q2 project margins generated ✓</span>
  676.                             </div>
  677.                         </div>
  678.                     </div>
  679.                 </div>
  680.             </div>
  682.         </div>
  683.     </div>
  684. </section>
  686. {# ══ 2. TRUST RIBBON ══════════════════════════════════════════════════════════ #}
  687. <div class="n-trust">
  688.     <div class="n-wrap">
  689.         <div class="n-trust-row">
  690.             <div class="n-trust-item"><span class="n-trust-dot"></span><strong>DATEV</strong>&nbsp;integration</div>
  691.             <div class="n-trust-item"><span class="n-trust-dot"></span><strong>Multi-company</strong>&nbsp;ready</div>
  692.             <div class="n-trust-item"><span class="n-trust-dot"></span><strong>Cloud</strong>&nbsp;or on-premise</div>
  693.             <div class="n-trust-item"><span class="n-trust-dot"></span><strong>Native AI</strong>&nbsp;built-in</div>
  694.             <div class="n-trust-item"><span class="n-trust-dot"></span><strong>Free</strong>&nbsp;Starter</div>
  695.             <div class="n-trust-item"><span class="n-trust-dot"></span><strong>GDPR</strong>&nbsp;aligned</div>
  696.         </div>
  697.     </div>
  698. </div>
  700. {# ══ 2b. THREE BUYER PATHS ═════════════════════════════════════════════════════ #}
  701. <section class="n-sec">
  702.     <div class="n-wrap">
  703.         <div class="n-center">
  704.             <div class="n-label trn" data-trn-key="_H_PATHS_LABEL_">Choose your path</div>
  705.             <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>
  706.             <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>
  707.         </div>
  708.         <div class="n-paths-grid" style="display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:40px;align-items:stretch;">
  709.             {# Project ERP — emphasized #}
  710.             <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);">
  711.                 <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>
  712.                 <h3 style="font-size:21px;margin:0 0 8px;color:var(--n-dark);">Project ERP</h3>
  713.                 <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>
  714.                 <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>
  715.             </div>
  716.             {# Business ERP #}
  717.             <div style="border:1px solid var(--n-line,#e6e0d6);border-radius:16px;padding:28px;background:#fff;display:flex;flex-direction:column;">
  718.                 <h3 style="font-size:21px;margin:0 0 8px;color:var(--n-dark);">Business ERP</h3>
  719.                 <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>
  720.                 <a href="{{ url('honeybee_business_erp') }}" class="n-btn n-btn-outline" style="align-self:flex-start;">Explore Business ERP</a>
  721.             </div>
  722.             {# HoneyCore Edge EMS #}
  723.             <div style="border:1px solid var(--n-line,#e6e0d6);border-radius:16px;padding:28px;background:#fff;display:flex;flex-direction:column;">
  724.                 <h3 style="font-size:21px;margin:0 0 8px;color:var(--n-dark);">HoneyCore Edge EMS</h3>
  725.                 <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>
  726.                 <a href="{{ url('honeybee_edge') }}" class="n-btn n-btn-outline" style="align-self:flex-start;">Explore HoneyCore Edge EMS</a>
  727.             </div>
  728.             {# Custom Business + Energy Solution #}
  729.             <div style="border:1px solid var(--n-line,#e6e0d6);border-radius:16px;padding:28px;background:#fff;display:flex;flex-direction:column;">
  730.                 <h3 style="font-size:21px;margin:0 0 8px;color:var(--n-dark);">Custom Business + Energy Solution</h3>
  731.                 <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>
  732.                 <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-outline" style="align-self:flex-start;">Request Custom Quote</a>
  733.             </div>
  734.         </div>
  735.         {# HoneyCore Edge+ design capability strip #}
  736.         <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;">
  737.             <div style="max-width:680px;">
  738.                 <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>
  739.                 <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>
  740.             </div>
  741.             <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-primary" style="white-space:nowrap;">Request HoneyCore Edge+ Design Assessment</a>
  742.         </div>
  743.     </div>
  744. </section>
  746. {# ══ 2c. THE REAL PROBLEM ══════════════════════════════════════════════════════ #}
  747. <section class="n-sec" style="background:var(--n-white);border-top:1px solid var(--n-border)">
  748.     <div class="n-wrap">
  749.         <div class="n-center">
  750.             <div class="n-label">The real problem</div>
  751.             <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>
  752.         </div>
  753.         <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;">
  754.             <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>
  755.             <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>
  756.             <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>
  757.             <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>
  758.             <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>
  759.             <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>
  760.             <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>
  761.             <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>
  762.             <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>
  763.             <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>
  764.         </div>
  765.     </div>
  766. </section>
  768. {# ══ 2d. A NEW CATEGORY ════════════════════════════════════════════════════════ #}
  769. <section class="n-sec" style="background:var(--n-cream)">
  770.     <div class="n-wrap">
  771.         <div class="n-center">
  772.             <div class="n-label">A new category</div>
  773.             <h2 class="n-h2">One operating system where business, projects and <em class="n-em">energy assets work together.</em></h2>
  774.             <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>
  775.         </div>
  776.         <div class="n-vs-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:48px;">
  777.             <div style="background:#fff;border:1px solid var(--n-border);border-radius:var(--n-radius);padding:28px;">
  778.                 <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>
  779.                 <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>
  780.             </div>
  781.             <div style="background:#fff;border:1px solid var(--n-border);border-radius:var(--n-radius);padding:28px;">
  782.                 <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>
  783.                 <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>
  784.             </div>
  785.             <div style="background:#fff;border:1px solid var(--n-border);border-radius:var(--n-radius);padding:28px;">
  786.                 <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>
  787.                 <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>
  788.             </div>
  789.             <div style="background:#fff;border:1px solid var(--n-border);border-radius:var(--n-radius);padding:28px;">
  790.                 <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>
  791.                 <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>
  792.             </div>
  793.         </div>
  794.     </div>
  795. </section>
  797. {# ══ 3. BUILT FOR WHERE YOU WORK ═══════════════════════════════════════════════ #}
  798. <section class="n-sec" style="background:var(--n-cream)">
  799.     <div class="n-wrap">
  800.         <div class="n-center">
  801.             <div class="n-label trn" data-trn-key="_H_REGIONS_LABEL_">Built for your industry</div>
  802.             <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>
  803.             <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>
  804.         </div>
  805.         <div class="n-region-grid">
  806.             <div class="n-region-card">
  807.                 <div class="n-region-head">
  808.                     <div>
  809.                         <h3 class="trn" data-trn-key="_H_REG_DE_H3_">EPC Companies</h3>
  810.                     </div>
  811.                 </div>
  812.                 <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>
  813.                 <ul class="n-region-feats">
  814.                     <li class="trn" data-trn-key="_H_REG_DE_F1_">Proposal &amp; bid management</li>
  815.                     <li class="trn" data-trn-key="_H_REG_DE_F2_">Procurement &amp; site logistics</li>
  816.                     <li class="trn" data-trn-key="_H_REG_DE_F3_">Project cost control</li>
  817.                     <li class="trn" data-trn-key="_H_REG_DE_F4_">Commissioning documentation</li>
  818.                     <li class="trn" data-trn-key="_H_REG_DE_F5_">O&amp;M handover workflow</li>
  819.                 </ul>
  820.             </div>
  821.             <div class="n-region-card">
  822.                 <div class="n-region-head">
  823.                     <div>
  824.                         <h3 class="trn" data-trn-key="_H_REG_SG_H3_">System Integrators</h3>
  825.                     </div>
  826.                 </div>
  827.                 <p class="trn" data-trn-key="_H_REG_SG_P_">Coordinate hardware deployment, software configuration, support, and customer-specific integration workflows.</p>
  828.                 <ul class="n-region-feats">
  829.                     <li class="trn" data-trn-key="_H_REG_SG_F1_">Hardware &amp; software delivery</li>
  830.                     <li class="trn" data-trn-key="_H_REG_SG_F2_">Technical configuration</li>
  831.                     <li class="trn" data-trn-key="_H_REG_SG_F3_">Integration project management</li>
  832.                     <li class="trn" data-trn-key="_H_REG_SG_F4_">Customer support workflows</li>
  833.                     <li class="trn" data-trn-key="_H_REG_SG_F5_">Recurring service operations</li>
  834.                 </ul>
  835.             </div>
  836.             <div class="n-region-card">
  837.                 <div class="n-region-head">
  838.                     <div>
  839.                         <h3 class="trn" data-trn-key="_H_REG_NO_H3_">Energy Project Developers</h3>
  840.                     </div>
  841.                 </div>
  842.                 <p class="trn" data-trn-key="_H_REG_NO_P_">Track development pipelines, contractors, asset performance, financial reporting, and investor-facing visibility.</p>
  843.                 <ul class="n-region-feats">
  844.                     <li class="trn" data-trn-key="_H_REG_NO_F1_">Project pipeline management</li>
  845.                     <li class="trn" data-trn-key="_H_REG_NO_F2_">EPC contractor coordination</li>
  846.                     <li class="trn" data-trn-key="_H_REG_NO_F3_">Asset performance tracking</li>
  847.                     <li class="trn" data-trn-key="_H_REG_NO_F4_">Financial modelling support</li>
  848.                     <li class="trn" data-trn-key="_H_REG_NO_F5_">Investor reporting</li>
  849.                 </ul>
  850.             </div>
  851.             <div class="n-region-card">
  852.                 <div class="n-region-head">
  853.                     <div>
  854.                         <h3 class="trn" data-trn-key="_H_REG_BD_H3_">IPP / OPEX / PPA Operators</h3>
  855.                     </div>
  856.                 </div>
  857.                 <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>
  858.                 <ul class="n-region-feats">
  859.                     <li class="trn" data-trn-key="_H_REG_BD_F1_">HoneyCore Edge+ IoT integration</li>
  860.                     <li class="trn" data-trn-key="_H_REG_BD_F2_">Consumption-based billing</li>
  861.                     <li class="trn" data-trn-key="_H_REG_BD_F3_">O&amp;M workflow management</li>
  862.                     <li class="trn" data-trn-key="_H_REG_BD_F4_">Performance &amp; availability tracking</li>
  863.                     <li class="trn" data-trn-key="_H_REG_BD_F5_">Project finance visibility</li>
  864.                 </ul>
  865.             </div>
  866.             <div class="n-region-card">
  867.                 <div class="n-region-head">
  868.                     <div>
  869.                         <h3 class="trn" data-trn-key="_H_REG_MS_H3_">Multi-Site Industrial Operators</h3>
  870.                     </div>
  871.                 </div>
  872.                 <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>
  873.                 <ul class="n-region-feats">
  874.                     <li class="trn" data-trn-key="_H_REG_MS_F1_">Multi-site command center</li>
  875.                     <li class="trn" data-trn-key="_H_REG_MS_F2_">Cross-team project control</li>
  876.                     <li class="trn" data-trn-key="_H_REG_MS_F3_">Asset &amp; maintenance management</li>
  877.                     <li class="trn" data-trn-key="_H_REG_MS_F4_">Finance across locations</li>
  878.                     <li class="trn" data-trn-key="_H_REG_MS_F5_">Operational performance dashboards</li>
  879.                 </ul>
  880.             </div>
  881.             <div class="n-region-card">
  882.                 <div class="n-region-head">
  883.                     <div>
  884.                         <h3 class="trn" data-trn-key="_H_REG_LP_H3_">Local Deployment Partners</h3>
  885.                     </div>
  886.                 </div>
  887.                 <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>
  888.                 <ul class="n-region-feats">
  889.                     <li class="trn" data-trn-key="_H_REG_LP_F1_">Country-level ERP rollout</li>
  890.                     <li class="trn" data-trn-key="_H_REG_LP_F2_">Hardware &amp; HoneyCore Edge EMS setup</li>
  891.                     <li class="trn" data-trn-key="_H_REG_LP_F3_">Customer training &amp; onboarding</li>
  892.                     <li class="trn" data-trn-key="_H_REG_LP_F4_">First-level support</li>
  893.                     <li class="trn" data-trn-key="_H_REG_LP_F5_">DATEV collaboration</li>
  894.                 </ul>
  895.             </div>
  896.         </div>
  897.     </div>
  898. </section>
  900. {# ══ 4. SIX SYSTEMS ════════════════════════════════════════════════════════════ #}
  901. <section class="n-sec" style="background:var(--n-white);border-top:1px solid var(--n-border);border-bottom:1px solid var(--n-border)">
  902.     <div class="n-wrap">
  903.         <div class="n-center">
  904.             <div class="n-label trn" data-trn-key="_H_SYSTEMS_LABEL_">What's inside</div>
  905.             <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>
  906.             <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>
  907.         </div>
  908.         <div class="n-six-grid">
  909.             <div class="n-sys-card">
  910.                 <span class="n-sys-tag trn" data-trn-key="_H_SYS1_TAG_">01 / Sales &amp; CRM</span>
  911.                 <h3 class="trn" data-trn-key="_H_SYS1_H3_">Sales &amp; CRM</h3>
  912.                 <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>
  913.                 <ul class="n-sys-chips"><li>Pipeline Kanban</li><li>Proposal builder</li><li>Margin rules</li><li>Unified quote + invoice</li></ul>
  914.             </div>
  915.             <div class="n-sys-card">
  916.                 <span class="n-sys-tag trn" data-trn-key="_H_SYS2_TAG_">02 / Projects</span>
  917.                 <h3 class="trn" data-trn-key="_H_SYS2_H3_">Project Management</h3>
  918.                 <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>
  919.                 <ul class="n-sys-chips"><li>WBS tree</li><li>RACI matrix</li><li>Workplan</li><li>Cost reports</li></ul>
  920.             </div>
  921.             <div class="n-sys-card">
  922.                 <span class="n-sys-tag trn" data-trn-key="_H_SYS3_TAG_">03 / Procurement</span>
  923.                 <h3 class="trn" data-trn-key="_H_SYS3_H3_">Procurement &amp; Supply Chain</h3>
  924.                 <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>
  925.                 <ul class="n-sys-chips"><li>Purchase orders</li><li>Vendor management</li><li>Site logistics</li><li>Delivery tracking</li></ul>
  926.             </div>
  927.             <div class="n-sys-card">
  928.                 <span class="n-sys-tag trn" data-trn-key="_H_SYS4_TAG_">04 / Finance</span>
  929.                 <h3 class="trn" data-trn-key="_H_SYS4_H3_">Finance &amp; Accounting</h3>
  930.                 <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>
  931.                 <ul class="n-sys-chips"><li>Auto bank rec</li><li>Loan / EMI</li><li>DATEV dual-view</li><li>Expenses</li></ul>
  932.             </div>
  933.             <div class="n-sys-card">
  934.                 <span class="n-sys-tag trn" data-trn-key="_H_SYS5_TAG_">05 / O&amp;M</span>
  935.                 <h3 class="trn" data-trn-key="_H_SYS5_H3_">O&amp;M &amp; Field Operations</h3>
  936.                 <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>
  937.                 <ul class="n-sys-chips"><li>Maintenance scheduling</li><li>Work orders</li><li>Asset tracking</li><li>Field dispatch</li></ul>
  938.             </div>
  939.             <div class="n-sys-card">
  940.                 <span class="n-sys-tag trn" data-trn-key="_H_SYS6_TAG_">06 / HoneyCore Edge EMS</span>
  941.                 <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>
  942.                 <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>
  943.                 <ul class="n-sys-chips"><li>InfluxDB</li><li>Time-series viz</li><li>HoneyCore Edge EMS</li><li>PLC + sensor ready</li></ul>
  944.             </div>
  945.             <div class="n-sys-card">
  946.                 <span class="n-sys-tag trn" data-trn-key="_H_SYS7_TAG_">07 / AI</span>
  947.                 <h3 class="trn" data-trn-key="_H_SYS7_H3_">AI Reporting <span class="n-mat-pill n-mat-now">Available now</span></h3>
  948.                 <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>
  949.                 <ul class="n-sys-chips"><li>Persistent AI outputs</li><li>Email auto-classify</li><li>Transaction tagging</li><li>Spotlight search</li></ul>
  950.             </div>
  951.             <div class="n-sys-card">
  952.                 <span class="n-sys-tag trn" data-trn-key="_H_SYS8_TAG_">08 / Command Center</span>
  953.                 <h3 class="trn" data-trn-key="_H_SYS8_H3_">Multi-company Command Center</h3>
  954.                 <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>
  955.                 <ul class="n-sys-chips"><li>Multi-company</li><li>Activity audit</li><li>Auto-ticket on error</li><li>Central monitoring</li></ul>
  956.             </div>
  957.             <div class="n-sys-card">
  958.                 <span class="n-sys-tag trn" data-trn-key="_H_SYS9_TAG_">09 / Mobile</span>
  959.                 <h3 class="trn" data-trn-key="_H_SYS9_H3_">Mobile App</h3>
  960.                 <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>
  961.                 <ul class="n-sys-chips"><li>iOS + Android</li><li>Offline clock-in</li><li>Bulk approvals</li><li>QR onboarding</li></ul>
  962.             </div>
  963.         </div>
  964.     </div>
  965. </section>
  967. {# ══ 5. NATIVE AI / LLM — featured product section ════════════════════════════ #}
  968. <section class="n-ai-section">
  969.     <div class="n-wrap" style="position:relative;z-index:2">
  970.         <div style="display:grid;grid-template-columns:1fr 1.1fr;gap:72px;align-items:start">
  972.             {# Left: copy + use cases #}
  973.             <div>
  974.                 <div class="n-label n-ai-label trn" data-trn-key="_H_AI_LABEL_">Native AI &amp; LLM</div>
  975.                 <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>
  976.                 <p class="n-ai-lead trn" data-trn-key="_H_AI_LEAD_">
  977.                     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.
  978.                 </p>
  979.                 <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);">
  980.                     <i class="fa-solid fa-shield-halved" style="color:var(--n-amber);font-size:16px;margin-top:2px;flex-shrink:0;"></i>
  981.                     <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>
  982.                 </div>
  983.                 <div class="n-ai-use-cases">
  984.                     <div class="n-ai-use">
  985.                         <div class="n-ai-use-icon"><i class="fa-solid fa-file-invoice-dollar"></i></div>
  986.                         <div>
  987.                             <h4 class="trn" data-trn-key="_H_AI_UC1_H_">Generate sales proposals</h4>
  988.                             <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>
  989.                         </div>
  990.                     </div>
  991.                     <div class="n-ai-use">
  992.                         <div class="n-ai-use-icon"><i class="fa-solid fa-diagram-project"></i></div>
  993.                         <div>
  994.                             <h4 class="trn" data-trn-key="_H_AI_UC2_H_">Create projects from scratch</h4>
  995.                             <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>
  996.                         </div>
  997.                     </div>
  998.                     <div class="n-ai-use">
  999.                         <div class="n-ai-use-icon"><i class="fa-solid fa-chart-bar"></i></div>
  1000.                         <div>
  1001.                             <h4 class="trn" data-trn-key="_H_AI_UC3_H_">Generate reports on demand</h4>
  1002.                             <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>
  1003.                         </div>
  1004.                     </div>
  1005.                     <div class="n-ai-use">
  1006.                         <div class="n-ai-use-icon"><i class="fa-solid fa-envelope-open-text"></i></div>
  1007.                         <div>
  1008.                             <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>
  1009.                             <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>
  1010.                         </div>
  1011.                     </div>
  1012.                 </div>
  1013.             </div>
  1015.             {# Right: two deployment paths #}
  1016.             <div>
  1017.                 <div style="margin-bottom:20px">
  1018.                     <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>
  1019.                 </div>
  1020.                 <div class="n-ai-paths">
  1021.                     {# Cloud LLM — horizontal compact row #}
  1022.                     <div class="n-ai-path n-ai-path-cloud">
  1023.                         <div>
  1024.                             <div class="n-ai-path-badge trn" data-trn-key="_H_AI_CLOUD_BADGE_">Option 01 — Cloud AI</div>
  1025.                             <h3 class="trn" data-trn-key="_H_AI_CLOUD_TITLE_">Hosted LLM by HoneyBee</h3>
  1026.                             <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>
  1027.                             <div style="display:flex;gap:8px;flex-wrap:wrap;margin-top:12px">
  1028.                                 <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>
  1029.                                 <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>
  1030.                                 <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>
  1031.                             </div>
  1032.                         </div>
  1033.                         <div class="n-ai-price-block">
  1034.                             <span class="n-ai-price-num">€25</span>
  1035.                             <span class="n-ai-price-unit trn" data-trn-key="_H_AI_CLOUD_UNIT_">/ AI user / mo</span>
  1036.                         </div>
  1037.                     </div>
  1039.                     {# Native LLM — full card, premium treatment #}
  1040.                     <div class="n-ai-path n-ai-path-native">
  1041.                         <div class="n-native-top">
  1042.                             <div>
  1043.                                 <div class="n-ai-path-badge trn" data-trn-key="_H_AI_NATIVE_BADGE_">Option 02 — Native / On-Premise</div>
  1044.                                 <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>
  1045.                                 <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>
  1046.                                 <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>
  1047.                             </div>
  1048.                             <div style="text-align:right;flex-shrink:0">
  1049.                                 <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>
  1050.                                 <div style="font-family:'Montserrat',sans-serif;font-size:34px;font-weight:900;color:#fff;line-height:1">from €6k</div>
  1051.                                 <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>
  1052.                                 <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">
  1053.                                     <i class="fa-solid fa-circle" style="font-size:6px;color:#7DC4A0"></i>
  1054.                                     <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>
  1055.                                 </div>
  1056.                             </div>
  1057.                         </div>
  1059.                         {# Hardware options #}
  1060.                         <div class="n-native-hw-row">
  1061.                             <div class="n-native-hw-label trn" data-trn-key="_H_AI_HW_LABEL_">Hardware options</div>
  1062.                             <span class="n-hw-chip n-hw-chip-gpu">
  1063.                                 <i class="fa-solid fa-microchip"></i> 2× NVIDIA RTX 5090 · ~€10k
  1064.                             </span>
  1065.                             <span class="n-hw-chip n-hw-chip-gpu">
  1066.                                 <i class="fa-solid fa-microchip"></i> 1× NVIDIA RTX 5090 · ~€6k
  1067.                             </span>
  1068.                             <span class="n-hw-chip n-hw-chip-thor">
  1069.                                 <i class="fa-solid fa-bolt"></i> NVIDIA Jetson Thor · Edge-ready
  1070.                             </span>
  1071.                         </div>
  1073.                         <div class="n-native-divider"></div>
  1075.                         <div class="n-native-grid">
  1076.                             <div class="n-native-fact">
  1077.                                 <span class="n-native-fact-lbl trn" data-trn-key="_H_AI_FACT1_LBL_">Data residency</span>
  1078.                                 <span class="n-native-fact-val trn" data-trn-key="_H_AI_FACT1_VAL_">100% on your premises</span>
  1079.                             </div>
  1080.                             <div class="n-native-fact">
  1081.                                 <span class="n-native-fact-lbl trn" data-trn-key="_H_AI_FACT2_LBL_">Deployment</span>
  1082.                                 <span class="n-native-fact-val trn" data-trn-key="_H_AI_FACT2_VAL_">By our engineering team</span>
  1083.                             </div>
  1084.                             <div class="n-native-fact">
  1085.                                 <span class="n-native-fact-lbl trn" data-trn-key="_H_AI_FACT3_LBL_">Recurring cost</span>
  1086.                                 <span class="n-native-fact-val trn" data-trn-key="_H_AI_FACT3_VAL_">€0 per user / month</span>
  1087.                             </div>
  1088.                             <div class="n-native-fact">
  1089.                                 <span class="n-native-fact-lbl trn" data-trn-key="_H_AI_FACT4_LBL_">Best for</span>
  1090.                                 <span class="n-native-fact-val trn" data-trn-key="_H_AI_FACT4_VAL_">GoBD, GDPR, strict regimes</span>
  1091.                             </div>
  1092.                         </div>
  1094.                         <div style="padding-top:14px;border-top:1px solid rgba(255,255,255,.07)">
  1095.                             <ul class="n-ai-path-feats">
  1096.                                 <li class="trn" data-trn-key="_H_AI_FEAT1_">Full air-gap — no internet required for AI queries</li>
  1097.                                 <li class="trn" data-trn-key="_H_AI_FEAT2_">Works on your existing ERP data in real-time</li>
  1098.                                 <li class="trn" data-trn-key="_H_AI_FEAT3_">Runs open-weight models tuned for business tasks</li>
  1099.                             </ul>
  1100.                         </div>
  1101.                     </div>
  1102.                 </div>
  1103.                 <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)">
  1104.                     <p style="font-size:13px;color:rgba(255,255,255,.45);line-height:1.65;margin:0">
  1105.                         <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>
  1106.                     </p>
  1107.                 </div>
  1108.                 <div style="margin-top:16px">
  1109.                     <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-amber">
  1110.                         <i class="fa-solid fa-brain"></i> <span class="trn" data-trn-key="_H_AI_BTN_">Talk to us about AI deployment</span>
  1111.                     </a>
  1112.                 </div>
  1113.             </div>
  1115.         </div>
  1116.     </div>
  1117. </section>
  1119. {# ══ 6. MOBILE APP — BEEZENESS ════════════════════════════════════════════════ #}
  1120. <section class="n-sec" style="background:var(--n-cream)">
  1121.     <div class="n-wrap">
  1122.         <div class="n-mobile-layout">
  1123.             <div>
  1124.                 <span class="n-mobile-pill trn" data-trn-key="_H_MOBILE_PILL_">Nectar Beezeness · iOS + Android · included</span>
  1125.                 <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>
  1126.                 <div style="width:40px;height:2px;background:var(--n-amber);border-radius:2px;margin:20px 0"></div>
  1127.                 <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>
  1128.                 <ul class="n-mobile-list">
  1129.                     <li class="trn" data-trn-key="_H_MOBILE_F1_">On-site expense capture with photo evidence</li>
  1130.                     <li class="trn" data-trn-key="_H_MOBILE_F2_">QR-based employee onboarding (scan to join)</li>
  1131.                     <li class="trn" data-trn-key="_H_MOBILE_F3_">Bulk approvals with notes, on phone</li>
  1132.                     <li class="trn" data-trn-key="_H_MOBILE_F4_">Biometric login (Face ID / fingerprint)</li>
  1133.                     <li class="trn" data-trn-key="_H_MOBILE_F5_">Plan visit: route optimization, team sharing</li>
  1134.                     <li class="trn" data-trn-key="_H_MOBILE_F6_">Stripe, bKash, and bank payment integration</li>
  1135.                     <li class="trn" data-trn-key="_H_MOBILE_F7_">Offline-capable clock-in and attendance</li>
  1136.                     <li class="trn" data-trn-key="_H_MOBILE_F8_">Real-time dashboard via socket connection</li>
  1137.                 </ul>
  1138.                 <div class="n-mobile-stores">
  1139.                     <button type="button" class="n-btn n-btn-outline" id="hbIosBtn" style="cursor:pointer;position:relative"
  1140.                             onclick="hbShowIosToast()" aria-label="iOS App Store — coming soon">
  1141.                         <i class="fa-brands fa-apple"></i>
  1142.                         <span class="trn" data-trn-key="_H_MOBILE_BTN_IOS_">iOS App Store</span>
  1143.                         <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>
  1144.                     </button>
  1145.                     <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>
  1146.                 </div>
  1148.                 {# iOS coming-soon toast #}
  1149.                 <div id="hbIosToast" style="
  1150.                     display:none;position:fixed;bottom:32px;left:50%;transform:translateX(-50%);
  1151.                     background:var(--n-dark);color:#fff;font-family:'DM Sans',sans-serif;
  1152.                     font-size:.875rem;font-weight:500;padding:13px 22px;border-radius:10px;
  1153.                     box-shadow:0 8px 28px rgba(26,29,46,.22);z-index:99999;
  1154.                     display:flex;align-items:center;gap:10px;white-space:nowrap;
  1155.                     opacity:0;transition:opacity .2s;pointer-events:none;
  1156.                 " role="status" aria-live="polite">
  1157.                     <i class="fa-brands fa-apple" style="font-size:16px;color:var(--n-amber)"></i>
  1158.                     iOS app coming soon — available on Google Play now.
  1159.                 </div>
  1160.                 <script>
  1161.                 (function () {
  1162.                     var toast   = document.getElementById('hbIosToast');
  1163.                     var timer   = null;
  1164.                     window.hbShowIosToast = function () {
  1165.                         if (!toast) return;
  1166.                         clearTimeout(timer);
  1167.                         toast.style.display = 'flex';
  1168.                         /* force reflow so transition fires */
  1169.                         toast.offsetHeight;
  1170.                         toast.style.opacity = '1';
  1171.                         timer = setTimeout(function () {
  1172.                             toast.style.opacity = '0';
  1173.                             setTimeout(function () { toast.style.display = 'none'; }, 200);
  1174.                         }, 3500);
  1175.                     };
  1176.                 }());
  1177.                 </script>
  1178.             </div>
  1179.             <div class="n-phone-frame">
  1180.                 <div class="n-phone-notch"></div>
  1181.                 <div class="n-phone-screen" style="background:#f5f6f8;gap:5px;padding:18px 11px 11px">
  1182.                     <!-- status bar -->
  1183.                     <div style="display:flex;justify-content:space-between;margin-bottom:2px">
  1184.                         <span style="font-size:8px;color:var(--n-dark);font-weight:700;font-family:monospace">09:14</span>
  1185.                         <span style="font-size:8px;color:var(--n-dark);font-family:monospace">▲ 87%</span>
  1186.                     </div>
  1187.                     <!-- header -->
  1188.                     <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:5px">
  1189.                         <span style="font-size:12px;color:var(--n-muted);line-height:1">☰</span>
  1190.                         <span style="font-family:'Montserrat',sans-serif;font-size:12px;font-weight:800;color:var(--n-dark)">Dashboard</span>
  1191.                         <span style="font-size:11px;color:var(--n-muted)">🔔</span>
  1192.                     </div>
  1193.                     <!-- balance card -->
  1194.                     <div style="background:#fff;border-radius:9px;padding:9px 11px;border:0.5px solid var(--n-border-md)">
  1195.                         <div style="font-size:8px;color:var(--n-muted);margin-bottom:3px">Current Balance</div>
  1196.                         <div style="display:flex;align-items:center;justify-content:space-between">
  1197.                             <span style="font-family:'Montserrat',sans-serif;font-size:18px;font-weight:800;color:var(--n-dark)">€24,180</span>
  1198.                             <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>
  1199.                         </div>
  1200.                         <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>
  1201.                     </div>
  1202.                     <!-- clock counter -->
  1203.                     <div style="background:var(--n-dark);border-radius:9px;padding:9px 11px;text-align:center">
  1204.                         <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>
  1205.                         <div style="font-family:monospace;font-size:17px;font-weight:700;color:#fff;letter-spacing:.1em">03 : 24 : 51</div>
  1206.                         <div style="margin-top:7px;background:#22a76d;border-radius:7px;padding:5px;display:flex;align-items:center;justify-content:center;gap:4px">
  1207.                             <span style="font-size:9px;color:#fff;font-weight:700">⏱ Clock Out</span>
  1208.                         </div>
  1209.                     </div>
  1210.                     <!-- stats row -->
  1211.                     <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px">
  1212.                         <div style="background:#fff;border-radius:7px;padding:6px 7px;border:0.5px solid var(--n-border-md);text-align:center">
  1213.                             <div style="font-size:7px;color:var(--n-muted)">Revenue</div>
  1214.                             <div style="font-size:10px;font-weight:800;color:var(--n-dark)">€58K</div>
  1215.                             <div style="font-size:9px;color:var(--n-sage)">↗</div>
  1216.                         </div>
  1217.                         <div style="background:#fff;border-radius:7px;padding:6px 7px;border:0.5px solid var(--n-border-md);text-align:center">
  1218.                             <div style="font-size:7px;color:var(--n-muted)">Cash-Flow</div>
  1219.                             <div style="font-size:10px;font-weight:800;color:var(--n-dark)">€12K</div>
  1220.                             <div style="font-size:9px;color:var(--n-amber)">→</div>
  1221.                         </div>
  1222.                         <div style="background:#fff;border-radius:7px;padding:6px 7px;border:0.5px solid var(--n-border-md);text-align:center">
  1223.                             <div style="font-size:7px;color:var(--n-muted)">Assets</div>
  1224.                             <div style="font-size:10px;font-weight:800;color:var(--n-dark)">€142K</div>
  1225.                             <div style="font-size:9px;color:var(--n-sage)">↗</div>
  1226.                         </div>
  1227.                     </div>
  1228.                     <!-- bottom cards -->
  1229.                     <div style="display:grid;grid-template-columns:1fr 1fr;gap:4px">
  1230.                         <div style="background:#fff;border-radius:7px;padding:7px 9px;border:0.5px solid var(--n-border-md)">
  1231.                             <div style="font-size:7px;color:var(--n-muted)">Today's Expense</div>
  1232.                             <div style="font-size:13px;font-weight:800;color:var(--n-dark);margin-top:3px">€340</div>
  1233.                             <div style="font-size:7px;color:var(--n-muted-2)">Since this morning</div>
  1234.                         </div>
  1235.                         <div style="background:#fff;border-radius:7px;padding:7px 9px;border:0.5px solid var(--n-border-md)">
  1236.                             <div style="font-size:7px;color:var(--n-muted)">Weekly Activity</div>
  1237.                             <div style="font-size:9px;color:var(--n-amber);margin-top:3px;font-weight:700">+€8.4K</div>
  1238.                             <div style="font-size:7px;color:var(--n-muted-2)">Daily avg cash</div>
  1239.                         </div>
  1240.                     </div>
  1241.                     <!-- nav bar -->
  1242.                     <div style="display:flex;justify-content:space-around;margin-top:auto;border-top:0.5px solid var(--n-border-md);padding-top:7px">
  1243.                         <span style="font-size:13px;color:var(--n-amber)">⌂</span>
  1244.                         <span style="font-size:12px;color:var(--n-muted)">▦</span>
  1245.                         <span style="font-size:12px;color:var(--n-muted)">◎</span>
  1246.                         <span style="font-size:12px;color:var(--n-muted)">📷</span>
  1247.                         <span style="font-size:12px;color:var(--n-muted)">👤</span>
  1248.                     </div>
  1249.                 </div>
  1250.             </div>
  1251.         </div>
  1252.     </div>
  1253. </section>
  1255. {# ══ 6b. WHAT YOU CAN DO TODAY ═══════════════════════════════════════════════ #}
  1256. <section style="background:var(--n-white);padding:72px 0;border-top:1px solid var(--n-border)">
  1257.     <div class="n-wrap">
  1258.         <div class="n-center" style="margin-bottom:40px">
  1259.             <div class="n-label">What you can do today</div>
  1260.             <h2 class="n-h2">What you can do with <em class="n-em">HoneyBee today</em></h2>
  1261.         </div>
  1262.         <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;max-width:960px;margin:0 auto">
  1263.             <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">
  1264.                 <i class="fa-solid fa-file-invoice-dollar" style="color:var(--n-amber);font-size:15px;margin-top:3px;flex-shrink:0"></i>
  1265.                 <span style="font-size:14px;color:var(--n-dark);line-height:1.6">Run projects from proposal to billing</span>
  1266.             </div>
  1267.             <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">
  1268.                 <i class="fa-solid fa-chart-line" style="color:var(--n-amber);font-size:15px;margin-top:3px;flex-shrink:0"></i>
  1269.                 <span style="font-size:14px;color:var(--n-dark);line-height:1.6">Track cost, margin, and execution</span>
  1270.             </div>
  1271.             <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">
  1272.                 <i class="fa-solid fa-building" style="color:var(--n-amber);font-size:15px;margin-top:3px;flex-shrink:0"></i>
  1273.                 <span style="font-size:14px;color:var(--n-dark);line-height:1.6">Manage multi-site operations</span>
  1274.             </div>
  1275.             <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">
  1276.                 <i class="fa-solid fa-xmark" style="color:var(--n-amber);font-size:15px;margin-top:3px;flex-shrink:0"></i>
  1277.                 <span style="font-size:14px;color:var(--n-dark);line-height:1.6">Replace Excel, WhatsApp, and fragmented tools</span>
  1278.             </div>
  1279.             <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">
  1280.                 <i class="fa-solid fa-brain" style="color:var(--n-amber);font-size:15px;margin-top:3px;flex-shrink:0"></i>
  1281.                 <span style="font-size:14px;color:var(--n-dark);line-height:1.6">Generate reports with AI</span>
  1282.             </div>
  1283.             <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">
  1284.                 <i class="fa-solid fa-microchip" style="color:var(--n-amber);font-size:15px;margin-top:3px;flex-shrink:0"></i>
  1285.                 <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>
  1286.             </div>
  1287.         </div>
  1288.     </div>
  1289. </section>
  1291. {# ══ 7. SPEED TO VALUE ════════════════════════════════════════════════════════ #}
  1292. <section style="background:var(--n-cream);padding:96px 0 0">
  1293.     <div class="n-wrap">
  1294.         <div class="n-center" style="margin-bottom:56px">
  1295.             <div class="n-label trn" data-trn-key="_H_SPEED_LABEL_">Speed to value</div>
  1296.             <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>
  1297.         </div>
  1298.         <div style="background:var(--n-dark);border-radius:20px;padding:56px 48px">
  1299.             <div style="display:flex;flex-direction:column;gap:0">
  1300.                 <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)">
  1301.                     <span style="font-family:'Montserrat',sans-serif;font-size:2rem;font-weight:900;color:var(--n-amber);line-height:1">1</span>
  1302.                     <div>
  1303.                         <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>
  1304.                         <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>
  1305.                     </div>
  1306.                     <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>
  1307.                 </div>
  1308.                 <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)">
  1309.                     <span style="font-family:'Montserrat',sans-serif;font-size:2rem;font-weight:900;color:var(--n-amber);line-height:1">2</span>
  1310.                     <div>
  1311.                         <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>
  1312.                         <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>
  1313.                     </div>
  1314.                     <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>
  1315.                 </div>
  1316.                 <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)">
  1317.                     <span style="font-family:'Montserrat',sans-serif;font-size:2rem;font-weight:900;color:var(--n-amber);line-height:1">3</span>
  1318.                     <div>
  1319.                         <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>
  1320.                         <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>
  1321.                     </div>
  1322.                     <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>
  1323.                 </div>
  1324.                 <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)">
  1325.                     <span style="font-family:'Montserrat',sans-serif;font-size:2rem;font-weight:900;color:var(--n-amber);line-height:1">4</span>
  1326.                     <div>
  1327.                         <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>
  1328.                         <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>
  1329.                     </div>
  1330.                     <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>
  1331.                 </div>
  1332.             </div>
  1333.         </div>
  1334.     </div>
  1335. </section>
  1337. {# ══ 8. CUSTOMER STORIES ══════════════════════════════════════════════════════ #}
  1338. <section style="background:var(--n-cream);padding:96px 0">
  1339.     <div class="n-wrap">
  1340.         <div class="n-center" style="margin-bottom:48px">
  1341.             <div class="n-label trn" data-trn-key="_H_CUSTOMERS_LABEL_">Customers</div>
  1342.             <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>
  1343.             <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>
  1344.         </div>
  1346.         {# SSG #}
  1347.         <div style="background:var(--n-dark);border-radius:16px;padding:52px;position:relative;overflow:hidden;margin-bottom:24px">
  1348.             <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>
  1349.             <div style="display:grid;grid-template-columns:1.3fr 1fr;gap:52px;position:relative;z-index:2">
  1350.                 <div>
  1351.                     <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>
  1352.                     <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>
  1353.                     <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>
  1354.                 </div>
  1355.                 <div style="display:flex;flex-direction:column;gap:20px;justify-content:center">
  1356.                     <div style="border-top:1px solid rgba(255,255,255,.15);padding-top:20px">
  1357.                         <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>
  1358.                     </div>
  1359.                     <div style="border-top:1px solid rgba(255,255,255,.15);padding-top:20px">
  1360.                         <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>
  1361.                         <div style="display:flex;flex-wrap:wrap;gap:6px;margin-top:10px">
  1362.                             <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>
  1363.                             <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>
  1364.                             <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>
  1365.                             <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>
  1366.                             <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>
  1367.                         </div>
  1368.                     </div>
  1369.                 </div>
  1370.             </div>
  1371.         </div>
  1373.         {# Raach Solar #}
  1374.         <div style="background:#1E2235;border-radius:16px;padding:52px;position:relative;overflow:hidden">
  1375.             <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>
  1376.             <div style="display:grid;grid-template-columns:1.3fr 1fr;gap:52px;position:relative;z-index:2">
  1377.                 <div>
  1378.                     <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>
  1379.                     <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>
  1380.                     <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>
  1381.                 </div>
  1382.                 <div style="display:flex;flex-direction:column;gap:16px;justify-content:center">
  1383.                     <div style="border-top:1px solid rgba(255,255,255,.12);padding-top:16px">
  1384.                         <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>
  1385.                         <div style="display:flex;flex-wrap:wrap;gap:6px">
  1386.                             <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>
  1387.                             <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>
  1388.                         </div>
  1389.                     </div>
  1390.                     <div style="border-top:1px solid rgba(255,255,255,.12);padding-top:16px">
  1391.                         <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>
  1392.                         <div style="display:flex;flex-wrap:wrap;gap:6px">
  1393.                             <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>
  1394.                             <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>
  1395.                             <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>
  1396.                             <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>
  1397.                         </div>
  1398.                     </div>
  1399.                     <div style="border-top:1px solid rgba(255,255,255,.12);padding-top:16px">
  1400.                         <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>
  1401.                         <div style="display:flex;flex-wrap:wrap;gap:6px">
  1402.                             <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>
  1403.                         </div>
  1404.                     </div>
  1405.                 </div>
  1406.             </div>
  1407.         </div>
  1409.         {# Logo strip #}
  1410.         <div class="n-logo-strip" style="margin-top:24px">
  1411.             <div class="n-logo-strip-label">Active customers include</div>
  1412.             <div class="n-logo-row">
  1413.                 <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>
  1414.                 <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>
  1415.                 <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>
  1416.                 <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>
  1417.                 <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>
  1418.                 <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>
  1419.             </div>
  1420.         </div>
  1421.     </div>
  1422. </section>
  1424. {# ══ 8b. BEFORE / AFTER ════════════════════════════════════════════════════════ #}
  1425. <section class="n-sec" style="background:var(--n-cream)">
  1426.     <div class="n-wrap">
  1427.         <div class="n-center">
  1428.             <div class="n-label">Before &amp; after</div>
  1429.             <h2 class="n-h2">From scattered tools to <em class="n-em">one connected workflow.</em></h2>
  1430.         </div>
  1431.         <div class="n-ba-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px;align-items:stretch;">
  1432.             {# Before #}
  1433.             <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;">
  1434.                 <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>
  1435.                 <ul style="list-style:none;display:flex;flex-direction:column;gap:11px;margin:0;">
  1436.                     <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>
  1437.                     <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>
  1438.                     <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>
  1439.                     <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>
  1440.                     <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>
  1441.                     <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>
  1442.                     <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>
  1443.                 </ul>
  1444.             </div>
  1445.             {# After #}
  1446.             <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);">
  1447.                 <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>
  1448.                 <ul style="list-style:none;display:flex;flex-direction:column;gap:11px;margin:0;">
  1449.                     <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>
  1450.                     <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>
  1451.                     <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>
  1452.                     <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>
  1453.                     <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>
  1454.                     <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>
  1455.                     <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>
  1456.                 </ul>
  1457.             </div>
  1458.         </div>
  1459.     </div>
  1460. </section>
  1462. {# ══ 8c. VALUE LOSS BAND ═══════════════════════════════════════════════════════ #}
  1463. <section class="n-sec" style="background:var(--n-dark);position:relative;overflow:hidden;">
  1464.     <div class="n-wrap" style="position:relative;z-index:2;text-align:center;max-width:760px;">
  1465.         <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>
  1466.         <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>
  1467.         <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-amber"><i class="fa-solid fa-clipboard-check"></i> Request Project Workflow Audit</a>
  1468.     </div>
  1469. </section>
  1471. {# ══ 9. PRICING ═══════════════════════════════════════════════════════════════ #}
  1472. <section class="n-sec" style="background:var(--n-cream-2);border-top:1px solid var(--n-border)">
  1473.     <div class="n-wrap">
  1474.         <div class="n-center">
  1475.             <div class="n-label trn" data-trn-key="_H_PRICING_LABEL_">Pricing</div>
  1476.             <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>
  1477.             <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>
  1478.         </div>
  1479.         <div class="n-price-grid">
  1480.             {% for packageDetail in packageDetails %}{% if packageDetail.hidden is not defined or not packageDetail.hidden %}
  1481.             <div class="n-plan{% if packageDetail.featured is defined and packageDetail.featured %} featured{% endif %}">
  1483.                 {# Plan tag pill #}
  1484.                 {% if packageDetail.freeFlag == '1' %}
  1485.                     <span class="n-plan-tag trn" style="background:var(--n-sage);" data-trn-key="_H_PLAN_FREE_TAG_">Free Starter</span>
  1486.                 {% elseif packageDetail.tag is defined and packageDetail.tag %}
  1487.                     <span class="n-plan-tag">{{ packageDetail.tag }}</span>
  1488.                 {% endif %}
  1490.                 <h3>{{ packageDetail.packageName }}</h3>
  1491.                 <div class="n-plan-audience">{{ packageDetail.description is defined and packageDetail.description ? packageDetail.description : packageDetail.badge }}</div>
  1493.                 {# Price display #}
  1494.                 {% if packageDetail.freeFlag == '1' %}
  1495.                     <div class="n-plan-price"><span class="num">€0</span><span class="unit">/ forever</span></div>
  1496.                     <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>
  1497.                 {% elseif packageDetail.contactSalesFlag == '1' %}
  1498.                     <div class="n-plan-price"><span class="num" style="font-size:28px;margin-top:4px;">Custom</span></div>
  1499.                     <div class="n-plan-billing">Custom quote — for private cloud, on-premise, hardware, HoneyCore Edge+ deployment, and local ML infrastructure.</div>
  1500.                 {% else %}
  1501.                     {% if packageDetail.earlyAdopter is defined and packageDetail.earlyAdopter %}
  1502.                         <div class="n-plan-early-badge">Launch offer</div>
  1503.                         <div class="n-plan-regular-price">€{{ packageDetail.euRegularUserPrice.monthlyPrice }}/user · €{{ packageDetail.euRegularAdminPrice.monthlyPrice }}/admin</div>
  1504.                         <div class="n-plan-price">
  1505.                             <span class="num">€{{ packageDetail.euPerUserPrice.monthlyPrice }}</span>
  1506.                             <span class="unit">/ user / month</span>
  1507.                         </div>
  1508.                         <div class="n-plan-billing">+ €{{ packageDetail.euPerAdminPrice.monthlyPrice }} / admin / month · 4 users + 1 admin structure</div>
  1509.                         <div class="n-plan-lock-note">{{ packageDetail.earlyAdopterNote }}</div>
  1510.                     {% else %}
  1511.                         <div class="n-plan-price">
  1512.                             <span class="num">€{{ packageDetail.euPerUserPrice.monthlyPrice }}</span>
  1513.                             <span class="unit">/ user / month</span>
  1514.                         </div>
  1515.                         <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>
  1516.                     {% endif %}
  1517.                 {% endif %}
  1519.                 <div class="n-plan-div"></div>
  1521.                 <ul class="n-plan-feats">
  1522.                     {% for data in packageDetail.features %}
  1523.                         <li><i class="fa-solid fa-circle-check"></i>{{ data.feature }}</li>
  1524.                     {% endfor %}
  1525.                 </ul>
  1527.                 {# CTA button #}
  1528.                 {% if packageDetail.contactSalesFlag == '1' %}
  1529.                     <a href="{{ path('quote_request', {plan: 'enterprise'}) }}" class="n-btn n-btn-outline trn" data-trn-key="_H_PLAN_CONTACT_">Contact sales</a>
  1530.                 {% elseif packageDetail.freeFlag == '1' %}
  1531.                     <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>
  1532.                 {% elseif packageDetail.featured is defined and packageDetail.featured %}
  1533.                     <a href="{{ url('honeybee_pricing') }}" class="n-btn n-btn-amber trn" data-trn-key="_H_PLAN_GET_STARTED_">Get started</a>
  1534.                 {% else %}
  1535.                     <a href="{{ url('honeybee_pricing') }}" class="n-btn n-btn-outline trn" data-trn-key="_H_PLAN_SEE_PLAN_">See full plan</a>
  1536.                 {% endif %}
  1538.             </div>
  1539.             {% endif %}{% endfor %}
  1540.         </div>
  1541.         <div class="n-ai-pricing-note">
  1542.             <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">
  1543.                 <i class="fa-solid fa-brain"></i>
  1544.             </div>
  1545.             <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>
  1546.         </div>
  1547.         <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>
  1548.     </div>
  1549. </section>
  1551. {# ══ 10. FAQ ══════════════════════════════════════════════════════════════════ #}
  1552. <section style="background:var(--n-white);padding:96px 0;border-top:1px solid var(--n-border)">
  1553.     <div class="n-wrap">
  1554.         <div style="display:grid;grid-template-columns:1fr 1.6fr;gap:80px;align-items:start">
  1555.             <div>
  1556.                 <div class="n-label trn" data-trn-key="_H_FAQ_LABEL_">Before you sign up</div>
  1557.                 <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>
  1558.                 <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>
  1559.             </div>
  1560.             <div>
  1561.                 <details style="border-bottom:1px solid var(--n-border);padding:20px 0" open>
  1562.                     <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>
  1563.                     <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>
  1564.                 </details>
  1565.                 <details style="border-bottom:1px solid var(--n-border);padding:20px 0">
  1566.                     <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>
  1567.                     <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>
  1568.                 </details>
  1569.                 <details style="border-bottom:1px solid var(--n-border);padding:20px 0">
  1570.                     <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>
  1571.                     <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>
  1572.                 </details>
  1573.                 <details style="border-bottom:1px solid var(--n-border);padding:20px 0">
  1574.                     <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>
  1575.                     <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>
  1576.                 </details>
  1577.                 <details style="padding:20px 0">
  1578.                     <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>
  1579.                     <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>
  1580.                 </details>
  1581.             </div>
  1582.         </div>
  1583.     </div>
  1584. </section>
  1586. {# ══ 11. FINAL CTA ════════════════════════════════════════════════════════════ #}
  1587. <section class="n-cta-final" id="start">
  1588.     <div class="n-wrap-sm" style="text-align:center">
  1589.         <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>
  1590.         <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>
  1591.         <div style="margin-top:28px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap">
  1592.             <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-primary" style="font-size:15px">
  1593.                 <i class="fa-solid fa-arrow-right"></i> <span class="trn" data-trn-key="_H_CTA_BTN_">Request Project Solution</span>
  1594.             </a>
  1595.             <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-outline" style="font-size:13.5px">
  1596.                 <i class="fa-solid fa-calendar-check"></i> <span class="trn" data-trn-key="_H_BTN_DEMO_">Book Technical Call</span>
  1597.             </a>
  1598.             <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-outline" style="font-size:13.5px">
  1599.                 <i class="fa-solid fa-brain"></i> <span class="trn" data-trn-key="_H_CTA_BTN_AI_">Discuss HoneyCore Edge EMS &amp; AI</span>
  1600.             </a>
  1601.         </div>
  1602.         <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>
  1603.     </div>
  1604. </section>
  1606. {% include '@HoneybeeWeb/footer/central_footer.html.twig' %}
  1608. <script>
  1609. (function () {
  1610.     // CTA email submit
  1611.     window.nCtaSubmit = function (e) {
  1612.         e.preventDefault();
  1613.         var row = e.target.querySelector('.n-cta-row');
  1614.         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>';
  1615.     };
  1617.     // Scroll reveal
  1618.     var els = document.querySelectorAll(
  1619.         '.n-region-card,.n-sys-card,.n-ai-use,.n-plan,.n-logo-item'
  1620.     );
  1621.     els.forEach(function (el) {
  1622.         el.style.opacity = '0';
  1623.         el.style.transform = 'translateY(18px)';
  1624.         el.style.transition = 'opacity .45s ease, transform .45s ease';
  1625.     });
  1626.     var io = new IntersectionObserver(function (entries) {
  1627.         entries.forEach(function (en) {
  1628.             if (en.isIntersecting) {
  1629.                 en.target.style.opacity = '1';
  1630.                 en.target.style.transform = 'translateY(0)';
  1631.                 io.unobserve(en.target);
  1632.             }
  1633.         });
  1634.     }, { threshold: 0.08 });
  1635.     els.forEach(function (el) { io.observe(el); });
  1637.     // Stagger region + sys cards
  1638.     document.querySelectorAll('.n-region-card').forEach(function (el, i) {
  1639.         el.style.transitionDelay = (i * 0.06) + 's';
  1640.     });
  1641.     document.querySelectorAll('.n-sys-card').forEach(function (el, i) {
  1642.         el.style.transitionDelay = (i * 0.04) + 's';
  1643.     });
  1644.     document.querySelectorAll('.n-plan').forEach(function (el, i) {
  1645.         el.style.transitionDelay = (i * 0.08) + 's';
  1646.     });
  1647. })();
  1648. </script>
  1650. <script>
  1651. /* ── Dashboard mock tab switcher ─────────────────────────────────────────── */
  1652. (function () {
  1653.     var dashData = {
  1654.         DE: {
  1655.             s1: { lbl: 'Revenue MTD', val: '€284k',  trend: '↑ 12.4%',  neg: false },
  1656.             s2: { lbl: 'Pipeline',    val: '€1.4M',  trend: '42 deals',  neg: false },
  1657.             s3: { lbl: 'Projects',    val: '18',     trend: '3 at risk', neg: true  },
  1658.             s4: { lbl: 'DATEV Sync',  val: 'OK',     trend: '2 min ago', neg: false },
  1659.             chart: 'Cash flow — 30 days · Germany',
  1660.             path:  'M0,44 Q40,40 60,34 T120,24 T175,28 T230,14 T320,9',
  1661.             feed: [
  1662.                 { dot: 'amber', txt: 'Lead → Opportunity moved by Kanban (€45k)' },
  1663.                 { dot: 'muted', txt: 'DATEV export ready for tax consultant' },
  1664.                 { dot: 'sage',  txt: 'AI report: Q2 project margins generated ✓' }
  1665.             ]
  1666.         },
  1667.         SG: {
  1668.             s1: { lbl: 'Revenue MTD',  val: 'S$412k', trend: '↑ 8.7%',   neg: false },
  1669.             s2: { lbl: 'Pipeline',     val: '$2.1M',  trend: '67 deals',  neg: false },
  1670.             s3: { lbl: 'Projects',     val: '24',     trend: '1 at risk', neg: true  },
  1671.             s4: { lbl: 'Multi-entity', val: '5',      trend: 'active',    neg: false },
  1672.             chart: 'Cash flow — 30 days · Singapore',
  1673.             path:  'M0,50 Q25,46 50,36 T100,18 T160,14 T230,10 T320,6',
  1674.             feed: [
  1675.                 { dot: 'amber', txt: 'Bulk PO approved across 3 entities (S$88k)' },
  1676.                 { dot: 'muted', txt: 'SGD → EUR rate synced in approval queues' },
  1677.                 { dot: 'sage',  txt: 'AI report: Group margin analysis generated ✓' }
  1678.             ]
  1679.         },
  1680.         NO: {
  1681.             s1: { lbl: 'Revenue MTD', val: 'kr 1.8M', trend: '↑ 5.3%',   neg: false },
  1682.             s2: { lbl: 'Pipeline',    val: 'kr 8.4M', trend: '29 deals',  neg: false },
  1683.             s3: { lbl: 'Projects',    val: '11',      trend: '0 at risk', neg: false },
  1684.             s4: { lbl: 'GDPR',        val: '✓ OK',    trend: 'EU hosted', neg: false },
  1685.             chart: 'Cash flow — 30 days · Norway',
  1686.             path:  'M0,38 Q40,36 72,30 T132,26 T188,22 T252,18 T320,14',
  1687.             feed: [
  1688.                 { dot: 'amber', txt: 'New project milestone reached · Oslo' },
  1689.                 { dot: 'muted', txt: 'EU hosting backup verified · GDPR aligned' },
  1690.                 { dot: 'sage',  txt: 'VAT return filed for Q1 ✓' }
  1691.             ]
  1692.         },
  1693.         EU: {
  1694.             s1: { lbl: 'Revenue MTD', val: '€642k',  trend: '↑ 22.1%',   neg: false },
  1695.             s2: { lbl: 'Pipeline',    val: '€3.8M',  trend: '47 deals',   neg: false },
  1696.             s3: { lbl: 'Projects',    val: '24',      trend: '1 at risk',  neg: true  },
  1697.             s4: { lbl: 'DATEV Sync',  val: 'OK',      trend: '5 min ago',  neg: false },
  1698.             chart: 'Cash flow — 30 days · EU Operations',
  1699.             path:  'M0,48 Q20,44 44,36 T94,24 T154,14 T222,10 T320,6',
  1700.             feed: [
  1701.                 { dot: 'amber', txt: 'HoneyCore Edge+ site report uploaded · Berlin' },
  1702.                 { dot: 'muted', txt: 'EU VAT report ready for review' },
  1703.                 { dot: 'sage',  txt: 'AI report: Energy sector margins generated ✓' }
  1704.             ]
  1705.         }
  1706.     };
  1708.     function setEl(id, text)  { var el = document.getElementById(id); if (el) el.textContent = text; }
  1709.     function setAttr(id, cls) { var el = document.getElementById(id); if (!el) return; el.className = 'n-dash-dot ' + cls; }
  1711.     function switchDash(region) {
  1712.         var d    = dashData[region];
  1713.         var body = document.getElementById('n-dash-body');
  1714.         if (!d || !body) return;
  1716.         body.classList.add('fading');
  1717.         setTimeout(function () {
  1718.             /* stats */
  1719.             ['s1','s2','s3','s4'].forEach(function (s) {
  1720.                 setEl('dm-' + s + '-lbl',   d[s].lbl);
  1721.                 setEl('dm-' + s + '-val',   d[s].val);
  1722.                 setEl('dm-' + s + '-trend', d[s].trend);
  1723.                 var t = document.getElementById('dm-' + s + '-trend');
  1724.                 if (t) { t.className = 'n-dash-stat-trend' + (d[s].neg ? ' neg' : ''); }
  1725.             });
  1726.             /* chart */
  1727.             setEl('dm-chart-lbl', d.chart);
  1728.             var fill = document.getElementById('dm-chart-fill');
  1729.             var line = document.getElementById('dm-chart-line');
  1730.             if (fill) fill.setAttribute('d', d.path + ' L320,56 L0,56 Z');
  1731.             if (line) line.setAttribute('d', d.path);
  1732.             /* feed */
  1733.             d.feed.forEach(function (f, i) {
  1734.                 var n = i + 1;
  1735.                 setEl('dm-f' + n + '-txt', f.txt);
  1736.                 setAttr('dm-f' + n + '-dot', f.dot);
  1737.             });
  1738.             body.classList.remove('fading');
  1739.         }, 180);
  1740.     }
  1742.     document.querySelectorAll('.n-dash-tab').forEach(function (btn) {
  1743.         btn.addEventListener('click', function () {
  1744.             document.querySelectorAll('.n-dash-tab').forEach(function (b) { b.classList.remove('active'); });
  1745.             btn.classList.add('active');
  1746.             switchDash(btn.textContent.trim());
  1747.         });
  1748.     });
  1749. }());
  1750. </script>