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, HoneyCore 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 HoneyCore Edge+ Deployment</span></h2>
  497.                 <p class="n-body" style="margin-top:16px;">
  498.                     Deploy and configure HoneyBee HoneyCore 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>€6,000</strong> (1× RTX 5090) or <strong>€10,000</strong> (2× RTX 5090) &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">Llama-3.3-70B-Instruct · Q4</div>
  668.                             <div class="n-gpu-model-sub">Loaded · Context: 32,768 tokens</div>
  669.                         </div>
  670.                         <span class="n-gpu-chip rtx">2× RTX 5090</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">44.6 / 64 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, HoneyCore Edge EMS 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>