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

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