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

Open in your IDE?
  1. {% include '@Application/inc/central_header.html.twig' %}
  3. <style>
  4. /* ── Design Tokens ─────────────────────────────────────────────────────────── */
  5. :root {
  6.     --n-cream:     #F7F5F0;
  7.     --n-cream-2:   #F0EDE5;
  8.     --n-white:     #FFFFFF;
  9.     --n-dark:      #1A1D2E;
  10.     --n-dark-2:    #252840;
  11.     --n-amber:     #C07D2A;
  12.     --n-amber-lt:  #D4954A;
  13.     --n-amber-dim: rgba(192,125,42,.10);
  14.     --n-sage:      #3D6B52;
  15.     --n-muted:     #6B6E7F;
  16.     --n-muted-2:   #9395A5;
  17.     --n-border:    rgba(26,29,46,.07);
  18.     --n-border-md: rgba(26,29,46,.12);
  19.     --n-shadow-sm: 0 2px 12px rgba(26,29,46,.07);
  20.     --n-shadow-md: 0 8px 32px rgba(26,29,46,.09);
  21.     --n-shadow-lg: 0 20px 64px rgba(26,29,46,.10);
  22.     --n-radius:    12px;
  23.     --n-radius-sm: 8px;
  24.     --n-font:      'DM Sans', 'Poppins', system-ui, sans-serif;
  25. }
  26. *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  27. body { background: var(--n-cream); font-family: var(--n-font); color: var(--n-dark); text-align: left; }
  28. a { text-decoration: none; }
  30. /* ── Navbar ─────────────────────────────────────────────────────────────────── */
  31. .navbar {
  32.     background: rgba(247,245,240,.96) !important;
  33.     backdrop-filter: blur(16px) saturate(180%);
  34.     border-bottom: 1px solid var(--n-border) !important;
  35.     box-shadow: none !important;
  36. }
  37. .navbar .nav-link       { color: var(--n-dark) !important; font-size: 13.5px; font-weight: 500; opacity: .8; }
  38. .navbar .nav-link:hover { opacity: 1; color: var(--n-dark) !important; }
  39. .navbar .login-btn      { background: var(--n-dark) !important; color: #fff !important; border: none !important; border-radius: 8px !important; padding: 8px 20px !important; font-size: 13px !important; font-weight: 600 !important; }
  41. /* ── Utilities ──────────────────────────────────────────────────────────────── */
  42. .n-wrap    { max-width: 1160px; margin: 0 auto; padding: 0 28px; }
  43. .n-label   {
  44.     display: inline-flex; align-items: center; gap: 8px;
  45.     font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  46.     color: var(--n-amber); margin-bottom: 16px;
  47. }
  48. .n-label::before { content:''; width: 18px; height: 1.5px; background: currentColor; border-radius: 2px; }
  49. .n-h1 { font-family:'Montserrat',sans-serif; font-size: clamp(32px,4vw,54px); font-weight: 900; line-height: 1.06; letter-spacing: -.025em; color: var(--n-dark); }
  50. .n-h1 em { font-style: normal; color: var(--n-amber); }
  51. .n-h2 { font-family:'Montserrat',sans-serif; font-size: clamp(24px,2.8vw,38px); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; }
  52. .n-h2 em { font-style: normal; color: var(--n-amber); }
  53. .n-body { font-size: 16px; line-height: 1.75; color: var(--n-muted); }
  54. .n-btn {
  55.     display: inline-flex; align-items: center; gap: 8px;
  56.     padding: 12px 24px; border-radius: var(--n-radius-sm);
  57.     font-size: 14px; font-weight: 600; border: 1.5px solid transparent;
  58.     cursor: pointer; text-decoration: none; transition: all .18s; font-family: var(--n-font);
  59. }
  60. .n-btn-primary { background: var(--n-dark); color: #fff; border-color: var(--n-dark); }
  61. .n-btn-primary:hover { background: var(--n-dark-2); color: #fff; transform: translateY(-1px); }
  62. .n-btn-outline { background: transparent; border-color: var(--n-border-md); color: var(--n-dark); }
  63. .n-btn-outline:hover { border-color: var(--n-dark); transform: translateY(-1px); }
  64. .n-btn-amber { background: var(--n-amber); color: #fff; border-color: var(--n-amber); }
  65. .n-btn-amber:hover { background: var(--n-amber-lt); color: #fff; transform: translateY(-1px); }
  67. /* ── Hero ────────────────────────────────────────────────────────────────────── */
  68. .n-svc-hero {
  69.     background: var(--n-cream);
  70.     padding: 116px 0 68px;
  71.     position: relative; overflow: hidden;
  72.     border-bottom: 1px solid var(--n-border);
  73. }
  74. .n-svc-hero::before {
  75.     content:''; position:absolute; top:0; right:0; width:55%; height:100%;
  76.     background: radial-gradient(ellipse 75% 70% at 80% 50%, rgba(192,125,42,.06) 0%, transparent 65%);
  77.     pointer-events: none;
  78. }
  79. .n-svc-nav {
  80.     display: flex; gap: 8px; flex-wrap: wrap; margin-top: 38px;
  81. }
  82. .n-svc-nav a {
  83.     display: inline-flex; align-items: center; gap: 6px;
  84.     padding: 6px 14px; border-radius: 100px;
  85.     font-size: 11.5px; font-weight: 600; font-family: monospace; letter-spacing: .04em;
  86.     background: var(--n-white); border: 1px solid var(--n-border-md); color: var(--n-muted);
  87.     text-decoration: none; transition: all .15s;
  88. }
  89. .n-svc-nav a:hover { border-color: var(--n-amber); color: var(--n-amber); }
  90. .n-svc-nav a span { font-size: 10px; color: var(--n-amber); }
  92. /* ── Stats bar ───────────────────────────────────────────────────────────────── */
  93. .n-stats-bar {
  94.     background: var(--n-dark); padding: 22px 0;
  95. }
  96. .n-stats-inner {
  97.     display: grid; grid-template-columns: repeat(4, 1fr);
  98.     gap: 0; max-width: 1160px; margin: 0 auto; padding: 0 28px;
  99. }
  100. .n-stat-item { text-align: center; padding: 0 12px; border-right: 1px solid rgba(255,255,255,.08); }
  101. .n-stat-item:last-child { border-right: none; }
  102. .n-stat-num  { font-family:'Montserrat',sans-serif; font-size: clamp(22px,2vw,30px); font-weight: 900; color: var(--n-amber); line-height: 1.1; }
  103. .n-stat-lbl  { font-size: 11.5px; color: rgba(255,255,255,.5); margin-top: 3px; letter-spacing: .04em; }
  105. /* ── Service deep sections ───────────────────────────────────────────────────── */
  106. .n-svc-section { padding: 88px 0; border-top: 1px solid var(--n-border); }
  107. .n-svc-section.n-bg-white  { background: var(--n-white); }
  108. .n-svc-section.n-bg-cream2 { background: var(--n-cream-2); }
  109. .n-svc-row {
  110.     display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
  111. }
  112. .n-svc-row.n-reverse { direction: rtl; }
  113. .n-svc-row.n-reverse > * { direction: ltr; }
  114. .n-svc-num {
  115.     font-family: monospace; font-size: 11px; font-weight: 700;
  116.     color: var(--n-amber); letter-spacing: .12em; text-transform: uppercase;
  117.     margin-bottom: 14px; display: block;
  118. }
  119. .n-svc-section h2 { color: var(--n-dark); margin-bottom: 18px; }
  120. .n-svc-section p  { font-size: 15px; color: var(--n-muted); line-height: 1.7; margin-bottom: 16px; }
  121. .n-feat-list {
  122.     list-style: none; margin-top: 22px;
  123.     display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px;
  124. }
  125. .n-feat-list li {
  126.     font-size: 13.5px; color: var(--n-dark);
  127.     display: flex; align-items: flex-start; gap: 8px;
  128. }
  129. .n-feat-list li::before {
  130.     content: '→'; color: var(--n-amber); font-family: monospace;
  131.     font-size: 12px; flex-shrink: 0; margin-top: 2px;
  132. }
  133. .n-price-badge {
  134.     display: inline-flex; align-items: center; gap: 8px;
  135.     background: rgba(192,125,42,.12); border: 1px solid rgba(192,125,42,.25);
  136.     border-radius: 8px; padding: 8px 16px; margin-top: 24px;
  137.     font-size: 13px; color: var(--n-amber); font-weight: 700;
  138. }
  139. .n-price-badge strong { font-family:'Montserrat',sans-serif; font-size: 18px; }
  141. /* ── Mock frame ──────────────────────────────────────────────────────────────── */
  142. .n-mock {
  143.     background: var(--n-white); border: 1px solid var(--n-border-md);
  144.     border-radius: var(--n-radius); padding: 18px; box-shadow: var(--n-shadow-lg);
  145. }
  146. .n-mock-label {
  147.     font-family: monospace; font-size: 10px; color: var(--n-muted-2);
  148.     letter-spacing: .08em; text-transform: uppercase;
  149.     padding-bottom: 10px; border-bottom: 1px solid var(--n-border);
  150.     margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center;
  151. }
  152. .n-mock-dots { display: flex; gap: 4px; }
  153. .n-mock-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--n-border-md); }
  155. /* ── Timeline mock (ERP Rollout) ─────────────────────────────────────────────── */
  156. .n-timeline { display: flex; flex-direction: column; gap: 0; }
  157. .n-phase {
  158.     display: flex; align-items: flex-start; gap: 12px;
  159.     padding: 10px 0; position: relative;
  160. }
  161. .n-phase:not(:last-child)::after {
  162.     content:''; position:absolute; left: 11px; top: 28px; bottom: -10px;
  163.     width: 1.5px; background: var(--n-border-md);
  164. }
  165. .n-phase-dot {
  166.     width: 23px; height: 23px; border-radius: 50%; flex-shrink: 0;
  167.     border: 2px solid var(--n-border-md); background: var(--n-cream);
  168.     display: flex; align-items: center; justify-content: center; margin-top: 1px;
  169. }
  170. .n-phase.done .n-phase-dot  { background: var(--n-sage); border-color: var(--n-sage); }
  171. .n-phase.active .n-phase-dot { background: var(--n-amber); border-color: var(--n-amber); animation: pulse-ring 2s infinite; }
  172. .n-phase-dot svg { width: 11px; height: 11px; }
  173. @keyframes pulse-ring {
  174.     0%   { box-shadow: 0 0 0 0 rgba(192,125,42,.35); }
  175.     70%  { box-shadow: 0 0 0 8px rgba(192,125,42,0); }
  176.     100% { box-shadow: 0 0 0 0 rgba(192,125,42,0); }
  177. }
  178. .n-phase-body { flex: 1; }
  179. .n-phase-title {
  180.     font-size: 12.5px; font-weight: 700; color: var(--n-dark);
  181.     display: flex; justify-content: space-between; align-items: center;
  182. }
  183. .n-phase-week {
  184.     font-family: monospace; font-size: 10px; color: var(--n-muted-2);
  185.     background: var(--n-cream); border: 0.5px solid var(--n-border-md);
  186.     padding: 2px 7px; border-radius: 3px;
  187. }
  188. .n-phase-desc { font-size: 11px; color: var(--n-muted); margin-top: 3px; line-height: 1.4; }
  189. .n-phase-bar  { height: 4px; background: var(--n-cream-2); border-radius: 2px; margin-top: 6px; overflow: hidden; }
  190. .n-phase-bar-fill { height: 100%; border-radius: 2px; background: var(--n-amber); }
  191. .n-phase.done .n-phase-bar-fill  { background: var(--n-sage); }
  192. .n-phase.active .n-phase-bar-fill { background: var(--n-amber); }
  193. .n-phase.todo .n-phase-bar-fill  { width: 0%; }
  194. .n-rollout-summary {
  195.     margin-top: 14px; padding: 10px 14px;
  196.     background: var(--n-cream); border: 0.5px solid var(--n-border-md); border-radius: 6px;
  197.     display: flex; gap: 20px; align-items: center;
  198. }
  199. .n-rollup-item { text-align: center; }
  200. .n-rollup-item .lbl { font-family: monospace; font-size: 9px; color: var(--n-muted-2); text-transform: uppercase; letter-spacing: .08em; }
  201. .n-rollup-item .val { font-family:'Montserrat',sans-serif; font-size: 16px; font-weight: 900; color: var(--n-dark); margin-top: 2px; }
  202. .n-rollup-item .val.green { color: var(--n-sage); }
  203. .n-rollup-divider { width: 1px; height: 32px; background: var(--n-border-md); }
  205. /* ── EMS Dashboard mock ──────────────────────────────────────────────────────── */
  206. .n-ems-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
  207. .n-ems-metric {
  208.     padding: 10px 10px; background: var(--n-cream); border: 0.5px solid var(--n-border); border-radius: 6px;
  209. }
  210. .n-ems-metric-lbl { font-family: monospace; font-size: 9px; color: var(--n-muted-2); text-transform: uppercase; letter-spacing: .08em; }
  211. .n-ems-metric-val { font-family:'Montserrat',sans-serif; font-size: 18px; font-weight: 800; margin-top: 4px; color: var(--n-dark); }
  212. .n-ems-metric-val span { font-size: 10px; font-weight: 400; color: var(--n-muted-2); font-family: var(--n-font); }
  213. .n-ems-devices { background: var(--n-cream); border: 0.5px solid var(--n-border); border-radius: 6px; padding: 10px; margin-bottom: 8px; }
  214. .n-ems-dev-head { font-family: monospace; font-size: 9px; color: var(--n-muted-2); text-transform: uppercase; letter-spacing: .08em; padding-bottom: 7px; border-bottom: 0.5px solid var(--n-border); margin-bottom: 7px; }
  215. .n-ems-dev-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 11.5px; }
  216. .n-ems-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
  217. .n-ems-dot.on { background: #4CAF50; }
  218. .n-ems-dot.off { background: #E57373; }
  219. .n-ems-dev-name { flex: 1; color: var(--n-dark); font-weight: 500; }
  220. .n-ems-dev-kw { font-family: monospace; font-size: 10px; color: var(--n-muted); }
  221. .n-ems-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
  222. .n-ems-bar-lbl { width: 62px; font-size: 10px; font-family: monospace; color: var(--n-muted); white-space: nowrap; }
  223. .n-ems-bar-track { flex: 1; height: 6px; background: var(--n-cream-2); border-radius: 3px; overflow: hidden; }
  224. .n-ems-bar-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--n-sage), #6db48a); }
  225. .n-ems-bar-val { font-family: monospace; font-size: 10px; color: var(--n-muted-2); width: 34px; text-align: right; }
  227. /* ── IoT Network mock ────────────────────────────────────────────────────────── */
  228. .n-iot-hub { text-align: center; margin-bottom: 10px; }
  229. .n-iot-hub-node {
  230.     display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  231.     background: var(--n-dark); padding: 12px 20px; border-radius: 8px;
  232. }
  233. .n-iot-hub-node .hub-icon { font-size: 18px; }
  234. .n-iot-hub-node .hub-label { font-family: monospace; font-size: 9px; color: var(--n-amber); text-transform: uppercase; letter-spacing: .08em; }
  235. .n-iot-hub-node .hub-status { font-family: monospace; font-size: 9px; color: rgba(255,255,255,.5); }
  236. .n-iot-connector { display: flex; justify-content: center; gap: 0; margin: -2px 0; }
  237. .n-iot-connector-line { width: 1.5px; height: 16px; background: var(--n-border-md); margin: 0 auto; }
  238. .n-iot-nodes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  239. .n-iot-node {
  240.     background: var(--n-cream); border: 0.5px solid var(--n-border-md); border-radius: 6px;
  241.     padding: 9px 8px; text-align: center;
  242. }
  243. .n-iot-node .icon { font-size: 16px; }
  244. .n-iot-node .type { font-family: monospace; font-size: 9px; color: var(--n-muted-2); text-transform: uppercase; letter-spacing: .06em; margin-top: 3px; }
  245. .n-iot-node .name { font-size: 11px; color: var(--n-dark); font-weight: 600; margin-top: 2px; }
  246. .n-iot-node-status {
  247.     display: flex; align-items: center; justify-content: center; gap: 4px;
  248.     margin-top: 5px; font-family: monospace; font-size: 9px;
  249. }
  250. .n-iot-node-status span { width: 5px; height: 5px; border-radius: 50%; }
  251. .n-iot-node-status span.online { background: #4CAF50; }
  252. .n-iot-node-status span.warn   { background: var(--n-amber); }
  253. .n-iot-proto {
  254.     margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap;
  255. }
  256. .n-iot-proto-chip {
  257.     padding: 3px 9px; border-radius: 3px; font-family: monospace; font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
  258. }
  259. .n-proto-mqtt   { background: rgba(61,107,82,.1); color: var(--n-sage); }
  260. .n-proto-modbus { background: var(--n-amber-dim); color: var(--n-amber); }
  261. .n-proto-opc    { background: rgba(61,79,114,.1); color: #3D4F72; }
  262. .n-proto-rest   { background: rgba(26,29,46,.07); color: var(--n-muted); }
  264. /* ── GPU Server mock (dark) ───────────────────────────────────────────────────── */
  265. .n-gpu-mock {
  266.     background: #0D0F1A; border: 1px solid rgba(255,255,255,.08);
  267.     border-radius: var(--n-radius); padding: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.4);
  268.     color: #e0e0e0;
  269. }
  270. .n-gpu-header {
  271.     display: flex; justify-content: space-between; align-items: center;
  272.     padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.07); margin-bottom: 14px;
  273. }
  274. .n-gpu-title { font-family: monospace; font-size: 10px; color: rgba(255,255,255,.4); letter-spacing: .08em; text-transform: uppercase; }
  275. .n-gpu-live  {
  276.     display: flex; align-items: center; gap: 5px;
  277.     font-family: monospace; font-size: 9.5px; color: #4CAF50;
  278. }
  279. .n-gpu-live::before { content:''; width: 6px; height: 6px; border-radius: 50%; background: #4CAF50; animation: blink 1.4s infinite; }
  280. @keyframes blink { 0%,100%{opacity:1;} 50%{opacity:.3;} }
  281. .n-gpu-model-row {
  282.     padding: 10px 12px; background: rgba(255,255,255,.04); border: 0.5px solid rgba(255,255,255,.07);
  283.     border-radius: 6px; margin-bottom: 8px;
  284.     display: flex; align-items: center; gap: 10px;
  285. }
  286. .n-gpu-model-icon { font-size: 16px; }
  287. .n-gpu-model-name { font-size: 12px; font-weight: 700; color: #e0e0e0; }
  288. .n-gpu-model-sub  { font-family: monospace; font-size: 9px; color: rgba(255,255,255,.35); margin-top: 2px; }
  289. .n-gpu-chip       { font-family: monospace; font-size: 9px; padding: 2px 8px; border-radius: 3px; font-weight: 700; margin-left: auto; }
  290. .n-gpu-chip.rtx   { background: rgba(118,185,0,.15); border: 1px solid rgba(118,185,0,.3); color: #76b900; }
  291. .n-gpu-chip.thor  { background: rgba(0,115,207,.15); border: 1px solid rgba(0,115,207,.3); color: #60a8e8; }
  292. .n-gpu-metrics { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-bottom: 8px; }
  293. .n-gpu-metric { background: rgba(255,255,255,.04); border: 0.5px solid rgba(255,255,255,.07); border-radius: 6px; padding: 9px 10px; }
  294. .n-gpu-metric-lbl { font-family: monospace; font-size: 9px; color: rgba(255,255,255,.35); text-transform: uppercase; letter-spacing: .08em; }
  295. .n-gpu-metric-val { font-family:'Montserrat',sans-serif; font-size: 16px; font-weight: 900; margin-top: 4px; color: #e0e0e0; }
  296. .n-gpu-metric-val.ok  { color: #76b900; }
  297. .n-gpu-metric-val.hot { color: #FF9800; }
  298. .n-gpu-mem-bar { background: rgba(255,255,255,.05); border-radius: 4px; height: 6px; margin-top: 4px; overflow: hidden; }
  299. .n-gpu-mem-fill { height: 100%; background: linear-gradient(90deg, #76b900, #a0d84c); border-radius: 4px; width: 68%; }
  300. .n-gpu-prompt {
  301.     background: rgba(255,255,255,.04); border: 0.5px solid rgba(255,255,255,.07);
  302.     border-radius: 6px; padding: 10px 12px;
  303. }
  304. .n-gpu-prompt-label { font-family: monospace; font-size: 9px; color: rgba(255,255,255,.3); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 5px; }
  305. .n-gpu-prompt-text  { font-family: monospace; font-size: 11px; color: rgba(255,255,255,.65); line-height: 1.5; }
  306. .n-gpu-cursor       { display: inline-block; width: 7px; height: 13px; background: var(--n-amber); border-radius: 1px; animation: blink 1.1s infinite; vertical-align: bottom; margin-left: 2px; }
  308. /* ── Native LLM service section (dark) ──────────────────────────────────────── */
  309. .n-svc-dark {
  310.     padding: 88px 0; background: var(--n-dark);
  311.     border-top: 1px solid rgba(255,255,255,.06);
  312. }
  313. .n-svc-dark .n-label     { color: var(--n-amber); }
  314. .n-svc-dark h2           { color: #fff; }
  315. .n-svc-dark p            { color: rgba(255,255,255,.6); }
  316. .n-svc-dark .n-feat-list li { color: rgba(255,255,255,.85); }
  317. .n-svc-dark .n-feat-list li::before { color: var(--n-amber); }
  319. /* ── Delivery process ────────────────────────────────────────────────────────── */
  320. .n-process { padding: 80px 0; background: var(--n-white); border-top: 1px solid var(--n-border); }
  321. .n-process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 48px; }
  322. .n-process-step { position: relative; }
  323. .n-process-step:not(:last-child)::after {
  324.     content: ''; position: absolute; top: 26px; left: calc(50% + 28px);
  325.     width: calc(100% - 56px); height: 1.5px;
  326.     background: linear-gradient(90deg, var(--n-amber), transparent);
  327. }
  328. .n-step-num {
  329.     width: 52px; height: 52px; border-radius: 50%;
  330.     background: var(--n-amber-dim); border: 1.5px solid rgba(192,125,42,.2);
  331.     display: flex; align-items: center; justify-content: center;
  332.     font-family:'Montserrat',sans-serif; font-size: 16px; font-weight: 900; color: var(--n-amber);
  333.     margin: 0 auto 18px;
  334. }
  335. .n-process-step h4 { font-family:'Montserrat',sans-serif; font-size: 15px; font-weight: 700; color: var(--n-dark); text-align: center; margin-bottom: 8px; }
  336. .n-process-step p  { font-size: 13px; color: var(--n-muted); text-align: center; line-height: 1.6; }
  338. /* ── CTA section ─────────────────────────────────────────────────────────────── */
  339. .n-cta-section { background: var(--n-dark); padding: 80px 0; text-align: center; }
  340. .n-cta-section h2 { color: #fff; margin-bottom: 16px; }
  341. .n-cta-section p  { color: rgba(255,255,255,.6); font-size: 15px; max-width: 520px; margin: 0 auto 36px; line-height: 1.7; }
  343. /* ── Scroll reveal ───────────────────────────────────────────────────────────── */
  344. .reveal { opacity: 0; transform: translateY(28px); transition: opacity .55s ease, transform .55s ease; }
  345. .reveal.visible { opacity: 1; transform: none; }
  347. /* ── Responsive ──────────────────────────────────────────────────────────────── */
  348. @media (max-width: 820px) {
  349.     .n-svc-row, .n-svc-row.n-reverse { grid-template-columns: 1fr; direction: ltr; gap: 36px; }
  350.     .n-stats-inner  { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  351.     .n-process-grid { grid-template-columns: 1fr 1fr; }
  352.     .n-process-step::after { display: none; }
  353.     .n-feat-list { grid-template-columns: 1fr; }
  354. }
  355. </style>
  357. <!-- ── HERO ─────────────────────────────────────────────────────────────────── -->
  358. <section class="n-svc-hero">
  359.     <div class="n-wrap">
  360.         <span class="n-label trn" data-trn-key="_SVC_LABEL_">Professional Services</span>
  361.         <h1 class="n-h1"><span class="trn" data-trn-key="_SVC_H1_">Implementation, deployment, and integration services.</span></h1>
  362.         <p class="n-body trn" style="max-width:540px; margin-top:18px;" data-trn-key="_SVC_DESC_">
  363.             HoneyBee professional services cover ERP configuration, data migration, IoT integration, Edge+ deployment, private cloud setup, and custom development.
  364.         </p>
  365.         <nav class="n-svc-nav">
  366.             <a href="#erp-rollout"><span>01</span> ERP Rollout</a>
  367.             <a href="#honeycore-edge"><span>02</span> HoneyCore Edge &amp; EMS</a>
  368.             <a href="#hardware-iot"><span>03</span> Hardware &amp; IoT</a>
  369.             <a href="#native-llm"><span>04</span> Native LLM Server</a>
  370.         </nav>
  371.     </div>
  372. </section>
  374. <!-- ── STATS ─────────────────────────────────────────────────────────────────── -->
  375. <div class="n-stats-bar">
  376.     <div class="n-stats-inner">
  377.         <div class="n-stat-item">
  378.             <div class="n-stat-num">50+</div>
  379.             <div class="n-stat-lbl trn" data-trn-key="_SVC_STAT1_LBL_">Deployments Completed</div>
  380.         </div>
  381.         <div class="n-stat-item">
  382.             <div class="n-stat-num">12</div>
  383.             <div class="n-stat-lbl trn" data-trn-key="_SVC_STAT2_LBL_">Countries Served</div>
  384.         </div>
  385.         <div class="n-stat-item">
  386.             <div class="n-stat-num">98%</div>
  387.             <div class="n-stat-lbl trn" data-trn-key="_SVC_STAT3_LBL_">On-Time Delivery</div>
  388.         </div>
  389.         <div class="n-stat-item">
  390.             <div class="n-stat-num">8 Weeks</div>
  391.             <div class="n-stat-lbl trn" data-trn-key="_SVC_STAT4_LBL_">Average ERP Go-Live</div>
  392.         </div>
  393.     </div>
  394. </div>
  396. <!-- ── SECTION 1: ERP ROLLOUT ────────────────────────────────────────────────── -->
  397. <section id="erp-rollout" class="n-svc-section">
  398.     <div class="n-wrap">
  399.         <div class="n-svc-row reveal">
  400.             <!-- Copy -->
  401.             <div>
  402.                 <span class="n-svc-num trn" data-trn-key="_SVC_ERP_NUM_">01 — ERP Rollout</span>
  403.                 <h2 class="n-h2"><span class="trn" data-trn-key="_SVC_ERP_H2_">Implementation Services</span></h2>
  404.                 <p class="n-body" style="margin-top:16px;">
  405.                     Full ERP rollout including configuration, workflow setup, user onboarding, and go-live support.
  406.                 </p>
  407.                 <ul class="n-feat-list">
  408.                     <li>Needs analysis &amp; gap assessment</li>
  409.                     <li>Data migration &amp; cleansing</li>
  410.                     <li>Module configuration &amp; customisation</li>
  411.                     <li>Role-based team training sessions</li>
  412.                     <li>30-day hypercare &amp; bug buffer</li>
  413.                     <li>Success KPI tracking dashboard</li>
  414.                 </ul>
  415.                 <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-primary trn" style="margin-top:28px;" data-trn-key="_SVC_ERP_BTN_">Book Demo</a>
  416.             </div>
  417.             <!-- Mock: ERP rollout timeline -->
  418.             <div>
  419.                 <div class="n-mock">
  420.                     <div class="n-mock-label">
  421.                         <span>HoneybeeERP — Rollout Plan</span>
  422.                         <div class="n-mock-dots"><span></span><span style="background:var(--n-amber);opacity:.5;"></span><span></span></div>
  423.                     </div>
  424.                     <div class="n-timeline">
  425.                         <div class="n-phase done">
  426.                             <div class="n-phase-dot">
  427.                                 <svg viewBox="0 0 12 12" fill="none"><polyline points="2,6 5,9 10,3" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>
  428.                             </div>
  429.                             <div class="n-phase-body">
  430.                                 <div class="n-phase-title">Discovery &amp; Gap Analysis <span class="n-phase-week">Week 1–2</span></div>
  431.                                 <div class="n-phase-desc">Stakeholder interviews, process mapping, data audit</div>
  432.                                 <div class="n-phase-bar"><div class="n-phase-bar-fill" style="width:100%;"></div></div>
  433.                             </div>
  434.                         </div>
  435.                         <div class="n-phase done">
  436.                             <div class="n-phase-dot">
  437.                                 <svg viewBox="0 0 12 12" fill="none"><polyline points="2,6 5,9 10,3" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>
  438.                             </div>
  439.                             <div class="n-phase-body">
  440.                                 <div class="n-phase-title">Data Migration &amp; Setup <span class="n-phase-week">Week 3–4</span></div>
  441.                                 <div class="n-phase-desc">Legacy data cleansed, imported &amp; verified in staging</div>
  442.                                 <div class="n-phase-bar"><div class="n-phase-bar-fill" style="width:100%;"></div></div>
  443.                             </div>
  444.                         </div>
  445.                         <div class="n-phase active">
  446.                             <div class="n-phase-dot"></div>
  447.                             <div class="n-phase-body">
  448.                                 <div class="n-phase-title">Role-Based Training <span class="n-phase-week">Week 5–6</span></div>
  449.                                 <div class="n-phase-desc">Sales, Finance, HR, Operations — concurrent sessions</div>
  450.                                 <div class="n-phase-bar"><div class="n-phase-bar-fill" style="width:62%;"></div></div>
  451.                             </div>
  452.                         </div>
  453.                         <div class="n-phase todo">
  454.                             <div class="n-phase-dot"></div>
  455.                             <div class="n-phase-body">
  456.                                 <div class="n-phase-title">Go-Live &amp; Hypercare <span class="n-phase-week">Week 7–8</span></div>
  457.                                 <div class="n-phase-desc">Production cutover + 30-day dedicated support buffer</div>
  458.                                 <div class="n-phase-bar"><div class="n-phase-bar-fill" style="width:0%;"></div></div>
  459.                             </div>
  460.                         </div>
  461.                     </div>
  462.                     <div class="n-rollout-summary">
  463.                         <div class="n-rollup-item">
  464.                             <div class="lbl">Status</div>
  465.                             <div class="val" style="font-size:13px;font-family:monospace;color:var(--n-amber);">In Progress</div>
  466.                         </div>
  467.                         <div class="n-rollup-divider"></div>
  468.                         <div class="n-rollup-item">
  469.                             <div class="lbl">Completion</div>
  470.                             <div class="val">62%</div>
  471.                         </div>
  472.                         <div class="n-rollup-divider"></div>
  473.                         <div class="n-rollup-item">
  474.                             <div class="lbl">Modules Live</div>
  475.                             <div class="val green">4 / 6</div>
  476.                         </div>
  477.                         <div class="n-rollup-divider"></div>
  478.                         <div class="n-rollup-item">
  479.                             <div class="lbl">Go-Live</div>
  480.                             <div class="val" style="font-size:13px;font-family:monospace;">8 days</div>
  481.                         </div>
  482.                     </div>
  483.                 </div>
  484.             </div>
  485.         </div>
  486.     </div>
  487. </section>
  489. <!-- ── SECTION 2: HONEYCORE EDGE & EMS ──────────────────────────────────────── -->
  490. <section id="honeycore-edge" class="n-svc-section n-bg-white">
  491.     <div class="n-wrap">
  492.         <div class="n-svc-row n-reverse reveal">
  493.             <!-- Copy -->
  494.             <div>
  495.                 <span class="n-svc-num trn" data-trn-key="_SVC_EMS_NUM_">02 — HoneyCore Edge &amp; EMS</span>
  496.                 <h2 class="n-h2"><span class="trn" data-trn-key="_SVC_EMS_H2_">HoneyBee Edge+ Deployment</span></h2>
  497.                 <p class="n-body" style="margin-top:16px;">
  498.                     Deploy and configure HoneyBee Edge+ devices at site level for local data capture, monitoring, and ERP integration.
  499.                 </p>
  500.                 <ul class="n-feat-list">
  501.                     <li>Energy monitoring dashboards</li>
  502.                     <li>Automated threshold alerting</li>
  503.                     <li>Load scheduling &amp; optimisation</li>
  504.                     <li>Remote device management portal</li>
  505.                     <li>Compliance &amp; audit reporting</li>
  506.                     <li>Carbon footprint &amp; ESG tracking</li>
  507.                 </ul>
  508.                 <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-primary trn" style="margin-top:28px;" data-trn-key="_SVC_EMS_BTN_">Book Demo</a>
  509.             </div>
  510.             <!-- Mock: EMS Dashboard -->
  511.             <div>
  512.                 <div class="n-mock">
  513.                     <div class="n-mock-label">
  514.                         <span>HoneyCore EMS — Live Dashboard</span>
  515.                         <div class="n-mock-dots"><span></span><span></span><span></span></div>
  516.                     </div>
  517.                     <div class="n-ems-metrics">
  518.                         <div class="n-ems-metric">
  519.                             <div class="n-ems-metric-lbl">Power Draw</div>
  520.                             <div class="n-ems-metric-val">48.3 <span>kW</span></div>
  521.                         </div>
  522.                         <div class="n-ems-metric">
  523.                             <div class="n-ems-metric-lbl">Today Saved</div>
  524.                             <div class="n-ems-metric-val" style="color:var(--n-sage);">12.1 <span>kWh</span></div>
  525.                         </div>
  526.                         <div class="n-ems-metric">
  527.                             <div class="n-ems-metric-lbl">Temperature</div>
  528.                             <div class="n-ems-metric-val">22.4 <span>°C</span></div>
  529.                         </div>
  530.                     </div>
  531.                     <div style="margin-bottom:8px;">
  532.                         <div style="font-family:monospace;font-size:9px;color:var(--n-muted-2);text-transform:uppercase;letter-spacing:.08em;margin-bottom:7px;">Load by Zone</div>
  533.                         <div class="n-ems-bar-row"><span class="n-ems-bar-lbl">Production</span><div class="n-ems-bar-track"><div class="n-ems-bar-fill" style="width:78%;"></div></div><span class="n-ems-bar-val">78%</span></div>
  534.                         <div class="n-ems-bar-row"><span class="n-ems-bar-lbl">HVAC</span><div class="n-ems-bar-track"><div class="n-ems-bar-fill" style="width:54%;"></div></div><span class="n-ems-bar-val">54%</span></div>
  535.                         <div class="n-ems-bar-row"><span class="n-ems-bar-lbl">Lighting</span><div class="n-ems-bar-track"><div class="n-ems-bar-fill" style="width:32%;"></div></div><span class="n-ems-bar-val">32%</span></div>
  536.                         <div class="n-ems-bar-row"><span class="n-ems-bar-lbl">Cold Chain</span><div class="n-ems-bar-track"><div class="n-ems-bar-fill" style="width:90%;background:linear-gradient(90deg,var(--n-amber),#d4954a);"></div></div><span class="n-ems-bar-val" style="color:var(--n-amber);">90%</span></div>
  537.                     </div>
  538.                     <div class="n-ems-devices">
  539.                         <div class="n-ems-dev-head">Connected Devices (12 / 14)</div>
  540.                         <div class="n-ems-dev-row"><span class="n-ems-dot on"></span><span class="n-ems-dev-name">Smart Meter — Line A</span><span class="n-ems-dev-kw">18.4 kW</span></div>
  541.                         <div class="n-ems-dev-row"><span class="n-ems-dot on"></span><span class="n-ems-dev-name">Edge Gateway — Warehouse</span><span class="n-ems-dev-kw">3.2 kW</span></div>
  542.                         <div class="n-ems-dev-row"><span class="n-ems-dot off"></span><span class="n-ems-dev-name">Compressor Sensor — Bay 3</span><span class="n-ems-dev-kw" style="color:#E57373;">Offline</span></div>
  543.                     </div>
  544.                 </div>
  545.             </div>
  546.         </div>
  547.     </div>
  548. </section>
  550. <!-- ── SECTION 3: HARDWARE & IoT INTEGRATION ────────────────────────────────── -->
  551. <section id="hardware-iot" class="n-svc-section n-bg-cream2">
  552.     <div class="n-wrap">
  553.         <div class="n-svc-row reveal">
  554.             <!-- Copy -->
  555.             <div>
  556.                 <span class="n-svc-num trn" data-trn-key="_SVC_IOT_NUM_">03 — Hardware &amp; IoT Integration</span>
  557.                 <h2 class="n-h2"><span class="trn" data-trn-key="_SVC_IOT_H2_">Industrial IoT Integration</span></h2>
  558.                 <p class="n-body" style="margin-top:16px;">
  559.                     Integrate meters, sensors, PLCs, Raspberry Pi, energy systems, and third-party devices with HoneyBee.
  560.                 </p>
  561.                 <ul class="n-feat-list">
  562.                     <li>PLC &amp; SCADA connectivity</li>
  563.                     <li>Sensor deployment &amp; calibration</li>
  564.                     <li>MQTT / Modbus / OPC-UA setup</li>
  565.                     <li>Edge gateway configuration</li>
  566.                     <li>ERP data bridging &amp; mapping</li>
  567.                     <li>Remote diagnostic &amp; OTA access</li>
  568.                 </ul>
  569.                 <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-primary trn" style="margin-top:28px;" data-trn-key="_SVC_IOT_BTN_">Book Demo</a>
  570.             </div>
  571.             <!-- Mock: IoT network diagram -->
  572.             <div>
  573.                 <div class="n-mock">
  574.                     <div class="n-mock-label">
  575.                         <span>IoT Device Mesh — Production Floor</span>
  576.                         <div class="n-mock-dots"><span></span><span></span><span></span></div>
  577.                     </div>
  578.                     <div class="n-iot-hub">
  579.                         <div class="n-iot-hub-node">
  580.                             <div class="hub-icon">🖥</div>
  581.                             <div class="hub-label">Edge Gateway</div>
  582.                             <div class="hub-status">HoneyCore Node v2.1</div>
  583.                         </div>
  584.                     </div>
  585.                     <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:4px 0 2px;padding:0 8px;">
  586.                         <div style="text-align:center;"><div style="width:1.5px;height:14px;background:var(--n-border-md);margin:0 auto;"></div></div>
  587.                         <div style="text-align:center;"><div style="width:1.5px;height:14px;background:var(--n-border-md);margin:0 auto;"></div></div>
  588.                         <div style="text-align:center;"><div style="width:1.5px;height:14px;background:var(--n-border-md);margin:0 auto;"></div></div>
  589.                         <div style="text-align:center;"><div style="width:1.5px;height:14px;background:var(--n-border-md);margin:0 auto;"></div></div>
  590.                     </div>
  591.                     <div class="n-iot-nodes">
  592.                         <div class="n-iot-node">
  593.                             <div class="icon">⚙️</div>
  594.                             <div class="type">PLC</div>
  595.                             <div class="name">Siemens S7</div>
  596.                             <div class="n-iot-node-status"><span class="online"></span> Online</div>
  597.                         </div>
  598.                         <div class="n-iot-node">
  599.                             <div class="icon">🌡</div>
  600.                             <div class="type">Sensor</div>
  601.                             <div class="name">Temp Array</div>
  602.                             <div class="n-iot-node-status"><span class="online"></span> Online</div>
  603.                         </div>
  604.                         <div class="n-iot-node">
  605.                             <div class="icon">📷</div>
  606.                             <div class="type">Vision</div>
  607.                             <div class="name">QC Camera</div>
  608.                             <div class="n-iot-node-status"><span class="warn"></span> Warn</div>
  609.                         </div>
  610.                         <div class="n-iot-node">
  611.                             <div class="icon">🔌</div>
  612.                             <div class="type">Smart PDU</div>
  613.                             <div class="name">Rack Power</div>
  614.                             <div class="n-iot-node-status"><span class="online"></span> Online</div>
  615.                         </div>
  616.                     </div>
  617.                     <div class="n-iot-proto">
  618.                         <span class="n-iot-proto-chip n-proto-mqtt">MQTT</span>
  619.                         <span class="n-iot-proto-chip n-proto-modbus">Modbus RTU</span>
  620.                         <span class="n-iot-proto-chip n-proto-opc">OPC-UA</span>
  621.                         <span class="n-iot-proto-chip n-proto-rest">REST → ERP</span>
  622.                     </div>
  623.                 </div>
  624.             </div>
  625.         </div>
  626.     </div>
  627. </section>
  629. <!-- ── SECTION 4: NATIVE LLM SERVER DEPLOYMENT ──────────────────────────────── -->
  630. <section id="native-llm" class="n-svc-dark">
  631.     <div class="n-wrap">
  632.         <div class="n-svc-row n-reverse reveal" style="align-items:center;">
  633.             <!-- Copy -->
  634.             <div>
  635.                 <span class="n-label trn" data-trn-key="_SVC_LLM_LABEL_">04 — Native LLM Deployment</span>
  636.                 <h2 class="n-h2" style="color:#fff;"><span class="trn" data-trn-key="_SVC_LLM_H2_">ML / AI Deployment</span></h2>
  637.                 <p style="font-size:15px;color:rgba(255,255,255,.6);line-height:1.7;margin-top:16px;margin-bottom:0;">
  638.                     Deploy local ML models on dedicated hardware for offline or air-gapped industrial environments.
  639.                 </p>
  640.                 <ul class="n-feat-list" style="margin-top:22px;">
  641.                     <li>GPU server procurement &amp; configuration</li>
  642.                     <li>LLM model installation &amp; fine-tuning</li>
  643.                     <li>ERP data connector &amp; RAG setup</li>
  644.                     <li>Prompt engineering for your workflows</li>
  645.                     <li>Performance benchmarking &amp; tuning</li>
  646.                     <li>Staff enablement &amp; API access</li>
  647.                 </ul>
  648.                 <div class="n-price-badge" style="background:rgba(192,125,42,.15);border-color:rgba(192,125,42,.3);">
  649.                     <svg width="14" height="14" fill="none" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="#C07D2A" stroke-width="2"/><path d="M12 6v6l4 2" stroke="#C07D2A" stroke-width="2" stroke-linecap="round"/></svg>
  650.                     One-time deployment — from <strong>€10,000</strong> &nbsp;· Unlimited AI users
  651.                 </div>
  652.                 <div style="margin-top:24px;display:flex;gap:12px;flex-wrap:wrap;">
  653.                     <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-amber trn" data-trn-key="_SVC_LLM_BTN_">Book Demo</a>
  654.                     <a href="{{ url('honeybee_contact') }}" class="n-btn" style="border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.75);">Learn About Native AI →</a>
  655.                 </div>
  656.             </div>
  657.             <!-- Mock: GPU inference server (dark) -->
  658.             <div>
  659.                 <div class="n-gpu-mock">
  660.                     <div class="n-gpu-header">
  661.                         <span class="n-gpu-title">HoneybeeAI — Inference Server</span>
  662.                         <span class="n-gpu-live">LIVE</span>
  663.                     </div>
  664.                     <div class="n-gpu-model-row">
  665.                         <span class="n-gpu-model-icon">🧠</span>
  666.                         <div>
  667.                             <div class="n-gpu-model-name">Mistral-7B-Instruct-v0.3</div>
  668.                             <div class="n-gpu-model-sub">Loaded · Context: 8192 tokens</div>
  669.                         </div>
  670.                         <span class="n-gpu-chip rtx">RTX 3090</span>
  671.                     </div>
  672.                     <div class="n-gpu-metrics">
  673.                         <div class="n-gpu-metric">
  674.                             <div class="n-gpu-metric-lbl">VRAM Used</div>
  675.                             <div class="n-gpu-metric-val ok">16.3 GB</div>
  676.                             <div class="n-gpu-mem-bar"><div class="n-gpu-mem-fill"></div></div>
  677.                         </div>
  678.                         <div class="n-gpu-metric">
  679.                             <div class="n-gpu-metric-lbl">Throughput</div>
  680.                             <div class="n-gpu-metric-val">42 t/s</div>
  681.                         </div>
  682.                         <div class="n-gpu-metric">
  683.                             <div class="n-gpu-metric-lbl">GPU Temp</div>
  684.                             <div class="n-gpu-metric-val hot">71 °C</div>
  685.                         </div>
  686.                     </div>
  687.                     <div class="n-gpu-prompt">
  688.                         <div class="n-gpu-prompt-label">Active Request</div>
  689.                         <div class="n-gpu-prompt-text">
  690.                             "Generate the Q1 2026 sales performance report for the Singapore region, include trend analysis, top 5 SKUs by margin, and recommended actions based on current pipeline data..."<span class="n-gpu-cursor"></span>
  691.                         </div>
  692.                     </div>
  693.                     <div style="display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;">
  694.                         <span style="font-family:monospace;font-size:9px;padding:2px 8px;border-radius:3px;background:rgba(118,185,0,.12);border:1px solid rgba(118,185,0,.25);color:#76b900;">NVIDIA CUDA 12.4</span>
  695.                         <span style="font-family:monospace;font-size:9px;padding:2px 8px;border-radius:3px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.5);">llama.cpp backend</span>
  696.                         <span style="font-family:monospace;font-size:9px;padding:2px 8px;border-radius:3px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.5);">Private · Air-Gapped</span>
  697.                     </div>
  698.                 </div>
  699.                 <!-- Jetson Thor option -->
  700.                 <div style="margin-top:12px;background:rgba(0,115,207,.08);border:1px solid rgba(0,115,207,.2);border-radius:10px;padding:12px 16px;display:flex;align-items:center;gap:12px;">
  701.                     <span style="font-size:20px;">⚡</span>
  702.                     <div>
  703.                         <div style="font-size:12.5px;font-weight:700;color:#60a8e8;">Also Available: NVIDIA Jetson Thor</div>
  704.                         <div style="font-family:monospace;font-size:10px;color:rgba(255,255,255,.4);margin-top:3px;">Ultra-compact edge AI · 60 TOPS · Ideal for on-device inference &amp; robotics</div>
  705.                     </div>
  706.                     <span style="margin-left:auto;font-family:monospace;font-size:10px;padding:3px 9px;border-radius:3px;background:rgba(0,115,207,.15);border:1px solid rgba(0,115,207,.3);color:#60a8e8;">THOR</span>
  707.                 </div>
  708.             </div>
  709.         </div>
  710.     </div>
  711. </section>
  713. <!-- ── DELIVERY PROCESS ──────────────────────────────────────────────────────── -->
  714. <section class="n-process">
  715.     <div class="n-wrap">
  716.         <div class="n-center reveal">
  717.             <span class="n-label trn" style="justify-content:center;" data-trn-key="_SVC_PROCESS_LABEL_">How We Work</span>
  718.             <h2 class="n-h2"><span class="trn" data-trn-key="_SVC_PROCESS_H2_">Our Engagement</span> <em class="trn" data-trn-key="_SVC_PROCESS_H2_EM_">Process</em></h2>
  719.             <p class="n-body trn" style="max-width:500px;margin:12px auto 0;" data-trn-key="_SVC_PROCESS_DESC_">A structured four-phase approach that keeps every deployment on time, in budget, and fully adopted by your team.</p>
  720.         </div>
  721.         <div class="n-process-grid reveal">
  722.             <div class="n-process-step">
  723.                 <div class="n-step-num">1</div>
  724.                 <h4 class="trn" data-trn-key="_SVC_STEP1_">Scoping &amp; Discovery</h4>
  725.                 <p>We map your current processes, identify gaps, define success metrics, and produce a signed project scope — before any contract is signed.</p>
  726.             </div>
  727.             <div class="n-process-step">
  728.                 <div class="n-step-num">2</div>
  729.                 <h4 class="trn" data-trn-key="_SVC_STEP2_">Build &amp; Configure</h4>
  730.                 <p>Our engineers configure your environment, migrate data, set up hardware, and integrate all third-party connections in a staging environment.</p>
  731.             </div>
  732.             <div class="n-process-step">
  733.                 <div class="n-step-num">3</div>
  734.                 <h4 class="trn" data-trn-key="_SVC_STEP3_">Train &amp; Validate</h4>
  735.                 <p>Role-based training sessions with real company data. UAT sign-off from every department before we touch production.</p>
  736.             </div>
  737.             <div class="n-process-step">
  738.                 <div class="n-step-num">4</div>
  739.                 <h4 class="trn" data-trn-key="_SVC_STEP4_">Go-Live &amp; Support</h4>
  740.                 <p>Managed cutover to production with a dedicated hypercare team on-call for 30 days. Then ongoing SLA support as needed.</p>
  741.             </div>
  742.         </div>
  743.     </div>
  744. </section>
  746. <!-- ── COMMERCIAL NOTE ───────────────────────────────────────────────────────── -->
  747. <section style="padding:40px 0 0;background:var(--n-white);">
  748.     <div class="n-wrap">
  749.         <div style="background:rgba(192,125,42,.08);border:1px solid rgba(192,125,42,.2);border-radius:10px;padding:20px 24px;margin:32px 0">
  750.             <p style="margin:0;font-size:14px;color:var(--n-muted);line-height:1.7;">Hardware, servers, gateways, sensors, Edge+ devices, local ML infrastructure, and private deployment services are quoted separately based on project scope. These are not purchased through instant checkout. Payment is made by bank transfer against formal invoice.</p>
  751.         </div>
  752.     </div>
  753. </section>
  755. <!-- ── FINAL CTA ─────────────────────────────────────────────────────────────── -->
  756. <section class="n-cta-section reveal">
  757.     <div class="n-wrap">
  758.         <span class="n-label trn" style="justify-content:center;" data-trn-key="_SVC_CTA_LABEL_">Ready to Start?</span>
  759.         <h2 class="n-h2"><span class="trn" data-trn-key="_SVC_CTA_H2_">Let's Plan Your</span> <em class="trn" data-trn-key="_SVC_CTA_H2_EM_">Deployment</em></h2>
  760.         <p class="trn" data-trn-key="_SVC_CTA_DESC_">Tell us about your project and we'll come back with a detailed scoping proposal — no obligation, no sales pressure.</p>
  761.         <div style="display:flex;gap:12px;justify-content:center;flex-wrap:wrap;">
  762.             <a href="{{ url('honeybee_contact') }}" class="n-btn n-btn-amber trn" data-trn-key="_SVC_CTA_BTN_">Book Demo</a>
  763.             <a href="{{ url('honeybee_pricing') }}" class="n-btn" style="border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.75);">View Pricing →</a>
  764.         </div>
  765.     </div>
  766. </section>
  768. {% include '@HoneybeeWeb/footer/central_footer.html.twig' %}
  770. <script>
  771. (function(){
  772.     const observer = new IntersectionObserver(function(entries){
  773.         entries.forEach(function(e){
  774.             if(e.isIntersecting){ e.target.classList.add('visible'); observer.unobserve(e.target); }
  775.         });
  776.     },{ threshold: 0.12 });
  777.     document.querySelectorAll('.reveal').forEach(function(el){ observer.observe(el); });
  778. })();
  779. </script>