src/ApplicationBundle/Modules/HoneybeeWeb/Resources/views/pages/pricing.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-sage-dim:  rgba(61,107,82,.09);
  16.     --n-muted:     #6B6E7F;
  17.     --n-muted-2:   #9395A5;
  18.     --n-border:    rgba(26,29,46,.07);
  19.     --n-border-md: rgba(26,29,46,.12);
  20.     --n-shadow-sm: 0 2px 12px rgba(26,29,46,.07);
  21.     --n-shadow-md: 0 8px 32px rgba(26,29,46,.09);
  22.     --n-shadow-lg: 0 20px 64px rgba(26,29,46,.10);
  23.     --n-radius:    14px;
  24.     --n-radius-sm: 8px;
  25.     --n-font:      'DM Sans', 'Poppins', system-ui, sans-serif;
  26. }
  27. *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  28. body { background: var(--n-cream); font-family: var(--n-font); color: var(--n-dark); text-align: left; }
  29. a { text-decoration: none; }
  31. /* ── Navbar ─────────────────────────────────────────────────────────────────── */
  32. .navbar {
  33.     background: rgba(247,245,240,.96) !important;
  34.     backdrop-filter: blur(16px) saturate(180%);
  35.     border-bottom: 1px solid var(--n-border) !important;
  36.     box-shadow: none !important;
  37. }
  38. .navbar .nav-link        { color: var(--n-dark) !important; font-size: 13.5px; font-weight: 500; opacity: .8; }
  39. .navbar .nav-link:hover  { opacity: 1; color: var(--n-dark) !important; }
  40. .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; }
  42. /* ── Utilities ──────────────────────────────────────────────────────────────── */
  43. .n-wrap    { max-width: 1100px; margin: 0 auto; padding: 0 28px; }
  44. .n-wrap-sm { max-width: 820px;  margin: 0 auto; padding: 0 28px; }
  45. .n-eyebrow {
  46.     display: inline-flex; align-items: center; gap: 8px;
  47.     font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  48.     color: var(--n-amber); margin-bottom: 16px;
  49. }
  50. .n-eyebrow::before { content:''; width: 18px; height: 1.5px; background: currentColor; border-radius: 2px; }
  51. .n-center { text-align: center; }
  52. .n-center .n-eyebrow { justify-content: center; }
  54. /* ── Hero ────────────────────────────────────────────────────────────────────── */
  55. .n-pricing-hero {
  56.     background: var(--n-cream); padding: 100px 0 64px;
  57.     border-bottom: 1px solid var(--n-border);
  58. }
  59. .n-pricing-hero h1 {
  60.     font-family: 'Montserrat', sans-serif;
  61.     font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 900;
  62.     color: var(--n-dark); margin: 0 0 18px; letter-spacing: -.028em; line-height: 1.07;
  63.     max-width: 680px;
  64. }
  65. .n-pricing-hero h1 em { font-style: italic; color: var(--n-amber); }
  66. .n-pricing-hero .n-lead {
  67.     font-size: 1.05rem; color: var(--n-muted); max-width: 620px; line-height: 1.75; margin-bottom: 28px;
  68. }
  70. /* Trigger note box */
  71. .n-trigger-note {
  72.     background: var(--n-amber-dim); border: 1px solid rgba(192,125,42,.22);
  73.     border-radius: 10px; padding: 18px 22px; margin-top: 8px;
  74.     display: flex; gap: 14px; align-items: flex-start; max-width: 700px;
  75. }
  76. .n-trigger-icon {
  77.     font-family: monospace; font-size: .85rem; font-weight: 600;
  78.     color: var(--n-amber); flex-shrink: 0; margin-top: 1px;
  79. }
  80. .n-trigger-note p { font-size: .9rem; color: var(--n-dark); margin: 0; line-height: 1.6; }
  81. .n-trigger-note strong { font-weight: 700; }
  83. /* ── Pricing cards ───────────────────────────────────────────────────────────── */
  84. .n-pricing-section { background: var(--n-white); padding: 68px 0 56px; }
  85. .n-pricing-grid {
  86.     display: grid;
  87.     grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  88.     gap: 20px; max-width: 1100px; margin: 0 auto; padding: 0 28px;
  89.     align-items: stretch;   /* equal height across all cards */
  90. }
  91. /* 8-path grid: keep a balanced 4×2 (two rows is fine) but widen the container on large
  92.    screens so the cards are bigger and the side margins shrink — not a narrow strip. */
  93. .n-grid-8 { max-width: min(1480px, 94vw); }
  94. @media (min-width: 1080px) { .n-grid-8 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  95. .n-pricing-card {
  96.     background: var(--n-cream); border: 1.5px solid var(--n-border-md);
  97.     border-radius: var(--n-radius); padding: 30px 26px;
  98.     display: flex; flex-direction: column; gap: 0;
  99.     height: 100%;           /* fill full row height */
  100.     transition: box-shadow .25s, transform .2s, border-color .2s;
  101.     cursor: pointer; position: relative; overflow: visible;
  102. }
  103. .n-pricing-card:hover {
  104.     border-color: rgba(192,125,42,.35);
  105.     box-shadow: var(--n-shadow-md); transform: translateY(-3px);
  106. }
  107. .n-pricing-card.active-card {
  108.     border-color: var(--n-amber);
  109.     box-shadow: 0 8px 40px rgba(192,125,42,.18);
  110.     transform: translateY(-4px);
  111. }
  112. .n-pricing-card.active-card::before {
  113.     content: '✓ Selected'; position: absolute; top: -12px; right: 18px;
  114.     font-size: .68rem; font-weight: 700; background: var(--n-amber); color: #fff;
  115.     padding: 3px 12px; border-radius: 20px; letter-spacing: .06em; text-transform: uppercase;
  116. }
  117. /* Free plan — forest green accent */
  118. .n-pricing-card.n-plan-free {
  119.     border-color: rgba(61,107,82,.3);
  120.     background: rgba(61,107,82,.03);
  121. }
  122. .n-pricing-card.n-plan-free:hover { border-color: var(--n-sage); box-shadow: 0 8px 32px rgba(61,107,82,.12); }
  123. .n-pricing-card.n-plan-free.active-card { border-color: var(--n-sage); box-shadow: 0 8px 40px rgba(61,107,82,.2); }
  124. .n-pricing-card.n-plan-free.active-card::before { background: var(--n-sage); }
  125. /* Featured (dark) plan */
  126. .n-pricing-card.n-plan-featured {
  127.     background: var(--n-dark); border-color: transparent;
  128.     box-shadow: var(--n-shadow-lg);
  129.     /* no margin-top — equal height grid handles elevation via box-shadow only */
  130. }
  131. .n-pricing-card.n-plan-featured:hover  { border-color: var(--n-amber); transform: translateY(-6px); }
  132. .n-pricing-card.n-plan-featured.active-card { border-color: var(--n-amber); transform: translateY(-8px); box-shadow: 0 16px 56px rgba(192,125,42,.25); }
  133. .n-pricing-card.n-plan-featured .n-pc-name  { color: rgba(255,255,255,.9); }
  134. .n-pricing-card.n-plan-featured .n-pc-badge { color: rgba(255,255,255,.45); }
  135. .n-pricing-card.n-plan-featured .n-pc-price { color: #fff; }
  136. .n-pricing-card.n-plan-featured .n-pc-price small  { color: rgba(255,255,255,.45); }
  137. .n-pricing-card.n-plan-featured .n-pc-price-sec    { color: rgba(255,255,255,.45); }
  138. .n-pricing-card.n-plan-featured .n-pc-billing      { color: rgba(255,255,255,.4); }
  139. .n-pricing-card.n-plan-featured .n-pc-divider      { border-color: rgba(255,255,255,.09); }
  140. .n-pricing-card.n-plan-featured .n-pc-features li  { color: rgba(255,255,255,.78); border-bottom-color: rgba(255,255,255,.08); }
  141. .n-pricing-card.n-plan-featured .n-pc-features li::before { border-color: var(--n-amber); background: radial-gradient(circle, var(--n-amber) 30%, transparent 32%); }
  142. .n-pricing-card.n-plan-featured .n-pc-btn { background: var(--n-amber); color: #fff; }
  143. .n-pricing-card.n-plan-featured .n-pc-btn:hover { background: var(--n-amber-lt); }
  145. /* plan-tag pill */
  146. .n-plan-tag {
  147.     position: absolute; top: 16px; right: 16px;
  148.     font-family: monospace; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase;
  149.     padding: 4px 10px; border-radius: 100px; font-weight: 700;
  150. }
  151. .n-plan-tag.popular { color: var(--n-amber); background: var(--n-amber-dim); }
  152. .n-plan-tag.free-tag { color: var(--n-sage); background: var(--n-sage-dim); }
  154. .n-pc-name {
  155.     font-family: 'Montserrat', sans-serif; font-size: 1.05rem; font-weight: 800;
  156.     color: var(--n-dark); margin: 0 0 5px;
  157. }
  158. .n-pc-badge { font-size: .82rem; color: var(--n-muted); margin-bottom: 20px; line-height: 1.45; min-height: 2.4em; }
  159. /* Override the global p{text-align:justify} (style.css) that makes narrow card text look cluttered. */
  160. .n-pricing-card p, .n-pricing-card li, .n-pricing-card div { text-align: left; }
  161. .n-pc-price {
  162.     font-family: 'Montserrat', sans-serif; font-size: 2.6rem; font-weight: 900;
  163.     color: var(--n-dark); line-height: 1; display: flex; align-items: baseline; gap: 6px;
  164. }
  165. .n-pc-price small  { font-size: .85rem; font-weight: 400; color: var(--n-muted); font-family: var(--n-font); }
  166. .n-pc-price-sec    { font-family: monospace; font-size: .78rem; color: var(--n-muted); margin-top: 6px; }
  167. .n-pc-billing      { font-size: .78rem; color: var(--n-muted); margin-top: 6px; margin-bottom: 20px; }
  168. /* ── Early-adopter pricing ── */
  169. .n-pc-regular-price {
  170.     font-family: monospace; font-size: .78rem; color: var(--n-muted-2);
  171.     text-decoration: line-through; margin-bottom: 4px; opacity: .75;
  172. }
  173. .n-pc-early-badge {
  174.     display: inline-flex; align-items: center; gap: 5px;
  175.     font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  176.     color: var(--n-amber); background: var(--n-amber-dim);
  177.     border: 1px solid rgba(192,125,42,.25); border-radius: 100px;
  178.     padding: 3px 9px; margin-bottom: 8px;
  179. }
  180. .n-pc-early-badge::before { content: '⚡'; font-size: .7rem; }
  181. .n-pc-lock-note {
  182.     font-size: .72rem; color: var(--n-amber); margin-top: 5px; margin-bottom: 18px;
  183.     display: flex; align-items: flex-start; gap: 5px; line-height: 1.45;
  184. }
  185. .n-pc-lock-note::before { content: '🔒'; font-size: .72rem; flex-shrink: 0; }
  186. /* Dark-card overrides */
  187. .n-plan-featured .n-pc-early-badge { color: var(--n-amber); background: rgba(192,125,42,.18); border-color: rgba(192,125,42,.35); }
  188. .n-plan-featured .n-pc-regular-price { color: rgba(255,255,255,.35); }
  189. .n-plan-featured .n-pc-lock-note { color: rgba(192,125,42,.85); }
  190. .n-pc-divider      { border: none; border-top: 1.5px solid var(--n-border); margin: 4px 0 16px; }
  191. .n-pc-features     { list-style: none; margin: 0 0 24px; padding: 0; flex: 1; }
  192. .n-pc-features li  {
  193.     padding: 9px 0; font-size: .88rem; color: var(--n-muted);
  194.     display: flex; gap: 10px; align-items: flex-start;
  195.     border-bottom: 1px solid var(--n-border); line-height: 1.45;
  196. }
  197. .n-pc-features li:last-child { border-bottom: none; }
  198. .n-pc-features li::before {
  199.     content: ''; width: 13px; height: 13px; border: 1.5px solid var(--n-amber);
  200.     border-radius: 50%; flex-shrink: 0; margin-top: 3px;
  201.     background: radial-gradient(circle, var(--n-amber) 30%, transparent 32%);
  202. }
  203. .n-plan-free .n-pc-features li::before {
  204.     border-color: var(--n-sage);
  205.     background: radial-gradient(circle, var(--n-sage) 30%, transparent 32%);
  206. }
  207. .n-pc-btn {
  208.     margin-top: auto; padding: 12px 20px; width: 100%;
  209.     background: var(--n-dark); color: #fff; border: none;
  210.     border-radius: var(--n-radius-sm); font-family: 'DM Sans', sans-serif;
  211.     font-size: .9rem; font-weight: 700; cursor: pointer; transition: background .2s; text-align: center;
  212. }
  213. .n-pc-btn:hover { background: var(--n-amber); }
  214. .n-plan-free .n-pc-btn { background: var(--n-sage); }
  215. .n-plan-free .n-pc-btn:hover { background: #4f8866; }
  217. /* ── Plan Summary Cart ───────────────────────────────────────────────────────── */
  218. .n-plan-summary-wrap { max-width: 560px; margin: 52px auto 0; padding: 0 24px; display: none; }
  219. .n-plan-summary-wrap.visible { display: block; background: #f7f5f0; padding-bottom: 72px; }
  220. .n-plan-summary {
  221.     border: 1.5px solid var(--n-border-md); border-radius: 16px;
  222.     padding: 28px; background: #fff; box-shadow: var(--n-shadow-md);
  223. }
  224. .n-ps-header {
  225.     display: flex; align-items: center; justify-content: space-between;
  226.     border-bottom: 1.5px solid var(--n-border); padding-bottom: 14px; margin-bottom: 20px;
  227. }
  228. .n-ps-header h4 { font-family: 'Montserrat', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--n-dark); margin: 0; }
  229. .n-ps-name  { font-size: 1.15rem; font-weight: 700; color: var(--n-dark); }
  230. .n-ps-price { font-size: 1rem; font-weight: 600; color: var(--n-amber); margin-top: 4px; }
  231. .n-ps-row   { display: flex; justify-content: space-between; margin-bottom: 18px; }
  232. .n-ps-col small    { font-size: .78rem; color: var(--n-muted); display: block; margin-bottom: 4px; }
  233. .n-ps-col strong   { font-size: .95rem; color: var(--n-dark); }
  234. .n-ps-label        { font-size: .78rem; color: var(--n-muted); margin: 0 0 8px; }
  235. .n-counter-row     { display: flex; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
  236. .n-counter         { flex: 1; min-width: 140px; }
  237. .n-counter label   { display: block; font-size: .78rem; color: var(--n-muted); margin-bottom: 6px; }
  238. .n-counter-ctrl    {
  239.     display: flex; align-items: center; justify-content: space-between;
  240.     border: 1.5px solid var(--n-border-md); border-radius: 8px; padding: 6px 12px; gap: 10px;
  241. }
  242. .n-counter-ctrl button { width: 32px; height: 32px; border: none; background: var(--n-cream); border-radius: 6px; font-size: 1rem; cursor: pointer; transition: background .15s; }
  243. .n-counter-ctrl button:hover    { background: #e6e3db; }
  244. .n-counter-ctrl button:disabled { opacity: .4; cursor: not-allowed; }
  245. .n-counter-ctrl span { font-weight: 700; font-size: 1rem; color: var(--n-dark); flex: 1; text-align: center; }
  246. .n-ps-total-row { display: flex; justify-content: space-between; align-items: center; border-top: 1.5px solid var(--n-border); padding-top: 16px; margin-top: 4px; }
  247. .n-ps-total-label { font-weight: 600; color: var(--n-dark); }
  248. .n-ps-total-val   { font-size: 1.2rem; font-weight: 800; color: var(--n-amber); }
  249. .n-pay-btn { width: 100%; margin-top: 18px; padding: 13px; background: var(--n-amber); color: #fff; border: none; border-radius: 10px; font-family: 'DM Sans', sans-serif; font-size: 1rem; font-weight: 700; cursor: pointer; transition: background .2s, transform .15s; }
  250. .n-pay-btn:hover    { background: #a86d24; transform: translateY(-1px); }
  251. .n-pay-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
  253. /* ── Calculator section ──────────────────────────────────────────────────────── */
  254. .n-calc-section { padding: 0     0 0; }
  255. .n-calc-box {
  256.     padding: 48px; background: var(--n-white);
  257.     border: 1px solid var(--n-border-md); border-radius: 16px;
  258. }
  259. .n-calc-head { max-width: 660px; }
  260. .n-calc-head h2 {
  261.     font-family: 'Montserrat', sans-serif;
  262.     font-size: clamp(1.7rem, 3.2vw, 2.6rem); font-weight: 900;
  263.     color: var(--n-dark); letter-spacing: -.03em; line-height: 1.1; margin-bottom: 14px;
  264. }
  265. .n-calc-head h2 em { font-style: italic; color: var(--n-amber); }
  266. .n-calc-head p { color: var(--n-muted); font-size: .95rem; line-height: 1.72; }
  267. .n-calc-toggle-row {
  268.     margin-top: 24px; display: flex; align-items: center; gap: 14px;
  269. }
  270. .n-calc-toggle-btn {
  271.     display: inline-flex; align-items: center; gap: 7px;
  272.     padding: 10px 22px; background: var(--n-dark); color: #fff;
  273.     border: none; border-radius: var(--n-radius-sm);
  274.     font-family: 'DM Sans', sans-serif; font-size: .88rem; font-weight: 600;
  275.     cursor: pointer; transition: background .2s;
  276. }
  277. .n-calc-toggle-btn:hover { background: var(--n-amber); }
  278. .n-calc-toggle-btn .arrow { transition: transform .25s; display: inline-block; }
  279. .n-calc-toggle-btn.open .arrow { transform: rotate(180deg); }
  280. .n-calc-body { display: block !important; overflow: visible !important; opacity: 1 !important; max-height: none !important; visibility: visible !important; }
  281. .n-calc-table-wrap { overflow-x: auto; margin-top: 32px; }
  282. .n-calc-table {
  283.     width: 100%; border-collapse: collapse; min-width: 600px;
  284. }
  285. .n-calc-table thead th {
  286.     text-align: left; padding: 13px 16px;
  287.     background: var(--n-cream-2); font-family: monospace; font-weight: 500;
  288.     font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  289.     color: var(--n-muted); border-bottom: 1px solid var(--n-border-md);
  290. }
  291. .n-calc-table thead th:not(:first-child) { text-align: right; }
  292. .n-calc-table tbody tr { border-bottom: 1px solid var(--n-border); }
  293. .n-calc-table tbody tr:last-child { border-bottom: none; }
  294. .n-calc-table td { padding: 14px 16px; font-size: .93rem; color: var(--n-muted); }
  295. .n-calc-table td:not(:first-child) { text-align: right; }
  296. .n-calc-table td.n-total   { font-family: 'Montserrat', sans-serif; font-size: 1.25rem; font-weight: 900; color: var(--n-dark); }
  297. .n-calc-table td.n-blended { font-family: monospace; font-size: .82rem; color: var(--n-amber); font-weight: 700; }
  298. .n-admin-explainer {
  299.     margin-top: 24px; padding: 18px 22px; background: var(--n-cream);
  300.     border: 1px solid var(--n-border-md); border-radius: 10px;
  301.     display: flex; gap: 16px; align-items: flex-start;
  302. }
  303. .n-admin-explainer .marker {
  304.     font-family: monospace; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  305.     color: var(--n-amber); flex-shrink: 0; padding-top: 1px; font-weight: 700; white-space: nowrap;
  306. }
  307. .n-admin-explainer p { font-size: .88rem; color: var(--n-muted); margin: 0; line-height: 1.65; }
  308. .n-admin-explainer strong { color: var(--n-dark); font-weight: 600; }
  310. /* ── Comparison table ────────────────────────────────────────────────────────── */
  311. .n-compare-section { padding: 0 0 80px; }
  312. .n-compare-head { margin-bottom: 28px; }
  313. .n-compare-head h2 { font-family: 'Montserrat', sans-serif; font-size: clamp(1.4rem,2.5vw,2rem); font-weight: 800; color: var(--n-dark); letter-spacing: -.02em; }
  314. .n-compare-wrap {
  315.     border: 1px solid var(--n-border-md); border-radius: 14px;
  316.     overflow-x: auto;   /* scroll on small screens, no height collapse */
  317.     background: #ffffff;
  318. }
  319. /* Force table to render — project-wide CSS may override generic `table` selectors */
  320. .n-cmp-table {
  321.     display: table !important;
  322.     width: 100% !important;
  323.     border-collapse: collapse !important;
  324.     table-layout: auto !important;
  325.     visibility: visible !important;
  326.     min-width: 600px;
  327. }
  328. .n-cmp-table thead  { display: table-header-group !important; visibility: visible !important; }
  329. .n-cmp-table tbody  { display: table-row-group    !important; visibility: visible !important; }
  330. .n-cmp-table tr     { display: table-row          !important; visibility: visible !important; border-bottom: 1px solid rgba(26,29,46,.07); }
  331. .n-cmp-table tr:last-child { border-bottom: none !important; }
  332. .n-cmp-table th,
  333. .n-cmp-table td     { display: table-cell         !important; visibility: visible !important; }
  335. /* thead cells */
  336. .n-cmp-table thead th {
  337.     text-align: left !important; padding: 18px 22px !important;
  338.     background: #F0EDE5 !important; font-family: var(--n-font) !important;
  339.     font-weight: 700 !important; font-size: .9rem !important; color: #1A1D2E !important;
  340.     border-bottom: 1px solid rgba(26,29,46,.12) !important;
  341.     white-space: nowrap;
  342. }
  343. .n-cmp-table thead th:not(:first-child) { text-align: center !important; }
  345. /* plan-name+price header row */
  346. .n-cmp-table thead tr.n-plan-row th {
  347.     background: #ffffff !important; padding: 14px 22px 16px !important;
  348.     border-bottom: 2px solid rgba(26,29,46,.12) !important;
  349. }
  350. .n-cmp-table thead tr.n-plan-row th:first-child { background: #F0EDE5 !important; }
  352. /* section header rows in tbody */
  353. .n-cmp-table tbody tr.n-sh td {
  354.     background: #F7F5F0 !important; font-family: monospace !important;
  355.     font-size: .72rem !important; letter-spacing: .1em !important; text-transform: uppercase !important;
  356.     color: #C07D2A !important; padding: 12px 22px !important; font-weight: 700 !important;
  357.     border-bottom: 1px solid rgba(26,29,46,.12) !important;
  358. }
  359. /* regular tbody cells */
  360. .n-cmp-table tbody td {
  361.     padding: 13px 22px !important; font-size: .88rem !important; color: #6B6E7F !important;
  362. }
  363. .n-cmp-table tbody td:not(:first-child) { text-align: center !important; color: #1A1D2E !important; font-size: .9rem !important; }
  365. /* value indicators */
  366. .n-cmp-table .n-check   { color: #3D6B52 !important; font-weight: 700 !important; font-size: 1rem !important; }
  367. .n-cmp-table .n-dash    { color: #9395A5 !important; }
  368. .n-cmp-table .n-partial { color: #C07D2A !important; font-size: .82rem !important; font-weight: 600 !important; }
  370. /* Toggle button */
  371. .n-table-toggle { text-align: center; margin-bottom: 28px; }
  372. .n-table-toggle-btn {
  373.     padding: 11px 30px; background: var(--n-dark); color: #fff;
  374.     border: none; border-radius: 8px; font-family: 'DM Sans', sans-serif;
  375.     font-size: .9rem; font-weight: 600; cursor: pointer; transition: background .2s;
  376. }
  377. .n-table-toggle-btn:hover { background: var(--n-amber); }
  379. /* plan header cells content */
  380. .n-cmp-plan-name  { font-family: 'Montserrat', sans-serif; font-size: .88rem; font-weight: 800; color: #1A1D2E; }
  381. .n-cmp-plan-price { font-family: 'Montserrat', sans-serif; font-size: 1.35rem; font-weight: 900; color: #C07D2A; line-height: 1.1; margin: 3px 0; }
  382. .n-cmp-plan-sub   { font-size: .72rem; color: #9395A5; font-family: monospace; }
  384. /* ── FAQ ─────────────────────────────────────────────────────────────────────── */
  385. .n-faq-section { padding: 72px 0; border-top: 1px solid var(--n-border); }
  386. .n-faq-layout  { display: grid; grid-template-columns: 320px 1fr; gap: 64px; align-items: start; }
  387. .n-faq-sidebar h2 { font-family: 'Montserrat', sans-serif; font-size: clamp(1.4rem,2.2vw,1.9rem); font-weight: 800; color: var(--n-dark); letter-spacing: -.02em; margin-bottom: 12px; }
  388. .n-faq-sidebar h2 em { font-style: italic; color: var(--n-amber); }
  389. .n-faq-sidebar p { font-size: .9rem; color: var(--n-muted); line-height: 1.65; }
  390. .n-faq-sidebar a { color: var(--n-amber); border-bottom: 1px solid rgba(192,125,42,.4); }
  391. .n-faq-list    { display: flex; flex-direction: column; gap: 0; }
  392. .n-faq-item    { border-bottom: 1px solid var(--n-border-md); }
  393. details.n-faq-item summary {
  394.     display: flex; justify-content: space-between; align-items: center;
  395.     padding: 18px 0; cursor: pointer; gap: 16px;
  396.     font-size: .93rem; font-weight: 600; color: var(--n-dark);
  397.     list-style: none; user-select: none;
  398. }
  399. details.n-faq-item summary::-webkit-details-marker { display: none; }
  400. .n-faq-icon {
  401.     width: 22px; height: 22px; border-radius: 50%;
  402.     background: var(--n-amber-dim); border: 1px solid rgba(192,125,42,.2);
  403.     display: flex; align-items: center; justify-content: center;
  404.     font-size: 14px; color: var(--n-amber); flex-shrink: 0;
  405.     transition: transform .2s;
  406. }
  407. details[open].n-faq-item .n-faq-icon { transform: rotate(45deg); }
  408. .n-faq-answer { padding: 0 0 18px; font-size: .88rem; color: var(--n-muted); line-height: 1.7; }
  410. /* ── CTA ─────────────────────────────────────────────────────────────────────── */
  411. .n-cta-final { padding: 96px 0; text-align: center; background: var(--n-cream-2); border-top: 1px solid var(--n-border); }
  412. .n-cta-final h2 { font-family: 'Montserrat', sans-serif; font-size: clamp(1.6rem,3vw,2.4rem); font-weight: 900; color: var(--n-dark); letter-spacing: -.025em; margin-bottom: 16px; }
  413. .n-cta-final h2 em { font-style: italic; color: var(--n-amber); }
  414. .n-cta-final p { max-width: 52ch; margin: 0 auto 32px; color: var(--n-muted); font-size: 1rem; line-height: 1.7; }
  415. .n-btn-primary { display: inline-flex; align-items: center; gap: 7px; padding: 12px 26px; background: var(--n-dark); color: #fff; border: none; border-radius: var(--n-radius-sm); font-size: .92rem; font-weight: 700; cursor: pointer; text-decoration: none; transition: background .18s, transform .18s; font-family: var(--n-font); }
  416. .n-btn-primary:hover { background: var(--n-amber); color: #fff; transform: translateY(-1px); }
  417. .n-btn-secondary { display: inline-flex; align-items: center; gap: 7px; padding: 12px 26px; background: transparent; color: var(--n-dark); border: 1.5px solid var(--n-border-md); border-radius: var(--n-radius-sm); font-size: .92rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: all .18s; font-family: var(--n-font); }
  418. .n-btn-secondary:hover { border-color: var(--n-dark); transform: translateY(-1px); color: var(--n-dark); }
  420. /* ── Billing cycle toggle buttons ───────────────────────────────────────────── */
  421. .n-cycle-btn {
  422.     flex: 1; padding: 8px 10px; border: 1.5px solid var(--n-border-md);
  423.     border-radius: 8px; background: var(--n-cream); color: var(--n-muted);
  424.     font-family: var(--n-font); font-size: .82rem; font-weight: 600;
  425.     cursor: pointer; transition: all .18s; line-height: 1.3;
  426. }
  427. .n-cycle-btn.active {
  428.     background: var(--n-dark); color: #fff; border-color: var(--n-dark);
  429. }
  430. .n-cycle-btn:hover:not(.active) { border-color: var(--n-amber); color: var(--n-amber); }
  432. /* ── Three-column counter row ────────────────────────────────────────────────── */
  433. .n-counter-row { flex-wrap: wrap; }
  434. #mlCounterWrap  { min-width: 100%; margin-top: 8px; }
  435. @media (min-width: 420px) { #mlCounterWrap { min-width: unset; flex: 1; margin-top: 0; } }
  437. /* ── Scroll reveal ───────────────────────────────────────────────────────────── */
  438. .reveal { opacity: 0; transform: translateY(22px); transition: opacity .5s ease, transform .5s ease; }
  439. .reveal.visible { opacity: 1; transform: none; }
  441. /* ── Responsive ──────────────────────────────────────────────────────────────── */
  442. @media (max-width: 980px) {
  443.     .n-calc-box { padding: 28px 20px; }
  444.     .n-faq-layout { grid-template-columns: 1fr; gap: 32px; }
  445. }
  446. @media (max-width: 680px) {
  447.     .n-pricing-grid { grid-template-columns: 1fr; }
  448.     .n-pricing-card.n-plan-featured { margin-top: 0; }
  449. }
  450. </style>
  452. <!-- ── HERO ─────────────────────────────────────────────────────────────────── -->
  453. <section class="n-pricing-hero">
  454.     <div class="n-wrap">
  455.         <span class="n-eyebrow trn" data-trn-key="_PRC_EYEBROW_">Pricing</span>
  456.         <h1><span class="trn" data-trn-key="_H_PRICING_H2_">Software subscription pricing for</span> <em class="n-em trn" data-trn-key="_H_PRICING_H2_EM_">industrial operations.</em></h1>
  457.         <p class="n-lead trn" data-trn-key="_PRC_LEAD_">Start free for up to 50 users. HoneyBee software runs your core business workflows. HoneyCore Edge EMS, IoT, hardware, and local AI deployments are scoped and quoted separately per project.</p>
  458.         <div style="display:flex;gap:16px;flex-wrap:wrap;margin-top:8px;margin-bottom:28px;">
  459.             <div style="flex:1;min-width:240px;background:rgba(61,107,82,.06);border:1px solid rgba(61,107,82,.2);border-radius:10px;padding:18px 22px;">
  460.                 <div style="font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#3D6B52;margin-bottom:6px">Option 1</div>
  461.                 <div style="font-weight:700;color:#1A1D2E;margin-bottom:4px;font-size:.95rem">Software subscription</div>
  462.                 <div style="font-size:.85rem;color:#6B6E7F;line-height:1.6">Start free — upgrade to Team when you're ready. No hardware required.</div>
  463.             </div>
  464.             <div style="flex:1;min-width:240px;background:rgba(192,125,42,.06);border:1px solid rgba(192,125,42,.2);border-radius:10px;padding:18px 22px;">
  465.                 <div style="font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#C07D2A;margin-bottom:6px">Option 2</div>
  466.                 <div style="font-weight:700;color:#1A1D2E;margin-bottom:4px;font-size:.95rem">Software + HoneyCore Edge+ deployment</div>
  467.                 <div style="font-size:.85rem;color:#6B6E7F;line-height:1.6">Add site data, IoT, and local infrastructure. Scoped and quoted per project separately.</div>
  468.             </div>
  469.         </div>
  470.         <div class="n-trigger-note">
  471.             <span class="n-trigger-icon">ⓘ</span>
  472.             <p>
  473.                 <strong class="trn" data-trn-key="_PRC_TRIGGER_TITLE_">The conversion trigger.</strong>
  474.                 <span class="trn" data-trn-key="_PRC_TRIGGER_DESC_">The first time any single user's storage passes 10 MB, the whole workspace moves to the Team plan. No surprise invoices — we notify you in advance, and you can delete data or upgrade on your terms.</span>
  475.                 <br><br>
  476.                 <strong style="color:var(--n-amber)">⚡ Early-adopter rate:</strong>
  477.                 <span>Any Free workspace that converts — voluntarily or via the storage trigger — is locked in at the launch price of <strong>€7.99/user · €19.99/admin</strong> permanently, even after the launch window closes.</span>
  478.             </p>
  479.         </div>
  480.     </div>
  481. </section>
  483. <!-- ── 8 STARTING PATHS ──────────────────────────────────────────────────────── -->
  484. <section class="n-pricing-section" style="padding-top:24px;border-top:1px solid var(--n-border);">
  485.     <div class="n-wrap n-center" style="margin-bottom:36px;">
  486.         <span class="n-eyebrow">Pricing &amp; Ordering</span>
  487.         <h2 style="font-family:'Montserrat',sans-serif;font-size:clamp(1.6rem,3vw,2.4rem);font-weight:900;color:var(--n-dark);letter-spacing:-.025em;margin:0 0 12px;">Choose your <em style="font-style:italic;color:var(--n-amber);">HoneyBee starting path.</em></h2>
  488.         <p style="max-width:60ch;margin:0 auto;color:var(--n-muted);font-size:1rem;line-height:1.7;">Start affordable. Scale by workflow. Scope complex deployments separately. All prices in EUR.</p>
  489.     </div>
  491.     <div class="n-pricing-grid n-grid-8">
  493.         {# ── 1. Free / Guided Demo ── #}
  494.         <div class="n-pricing-card n-plan-free">
  495.             <span class="n-plan-tag free-tag">Free</span>
  496.             <p class="n-pc-name">Free / Guided Demo</p>
  497.             <p class="n-pc-badge">For companies exploring HoneyBee.</p>
  498.             <div class="n-pc-price">Free</div>
  499.             <div class="n-pc-billing">Guided walkthrough &amp; discovery call</div>
  500.             <hr class="n-pc-divider">
  501.             <ul class="n-pc-features">
  502.                 <li>Guided product walkthrough</li>
  503.                 <li>Sample company or sample project data</li>
  504.                 <li>Basic module preview</li>
  505.                 <li>30-minute discovery call</li>
  506.                 <li>Recommended package suggestion</li>
  507.             </ul>
  508.             <a href="{{ url('honeybee_contact') }}" class="n-pc-btn">Book Demo</a>
  509.         </div>
  511.         {# ── 2. Core Business ERP ── #}
  512.         <div class="n-pricing-card">
  513.             <p class="n-pc-name">Core Business ERP</p>
  514.             <p class="n-pc-badge">For SMEs needing HR, accounts, finance, inventory, purchase, sales, CRM, approvals, documents, and reporting.</p>
  515.             <div class="n-pc-price">€7.99 <small>/ user / month</small></div>
  516.             <div class="n-pc-price-sec">from</div>
  517.             <div class="n-pc-billing">Min recommended: 5 users or €39/month</div>
  518.             <hr class="n-pc-divider">
  519.             <ul class="n-pc-features">
  520.                 <li>HR &amp; payroll</li>
  521.                 <li>Accounts &amp; finance</li>
  522.                 <li>Inventory &amp; purchase</li>
  523.                 <li>Sales &amp; CRM</li>
  524.                 <li>Approvals, documents &amp; reporting</li>
  525.             </ul>
  526.             <a href="{{ url('honeybee_contact') }}" class="n-pc-btn">Get Business ERP Quote</a>
  527.         </div>
  529.         {# ── 3. Business ERP Plus ── #}
  530.         <div class="n-pricing-card">
  531.             <span class="n-plan-tag popular">Most Popular</span>
  532.             <p class="n-pc-name">Business ERP Plus</p>
  533.             <p class="n-pc-badge">For growing SMEs using multiple departments and workflows.</p>
  534.             <div class="n-pc-price">€12.99 <small>/ user / month</small></div>
  535.             <div class="n-pc-billing">Min: 10 users or €129/month</div>
  536.             <hr class="n-pc-divider">
  537.             <ul class="n-pc-features">
  538.                 <li>Department-wise user roles</li>
  539.                 <li>Approval workflows</li>
  540.                 <li>Document management</li>
  541.                 <li>Advanced dashboards</li>
  542.                 <li>Standard import templates</li>
  543.                 <li>Priority support</li>
  544.             </ul>
  545.             <a href="{{ url('honeybee_contact') }}" class="n-pc-btn">Start Business ERP Plus</a>
  546.         </div>
  548.         {# ── 4. Project ERP — MOST EMPHASIZED ── #}
  549.         <div class="n-pricing-card n-plan-featured">
  550.             <span class="n-plan-tag popular">Best for EPC / Projects</span>
  551.             <p class="n-pc-name">Project ERP</p>
  552.             <p class="n-pc-badge">For EPC, engineering, construction, solar, O&amp;M, and project-based companies.</p>
  553.             <div class="n-pc-price">€19.99 <small>/ user / month</small></div>
  554.             <div class="n-pc-price-sec">from</div>
  555.             <div class="n-pc-billing">Min: 10 users or €199/month</div>
  556.             <hr class="n-pc-divider">
  557.             <ul class="n-pc-features">
  558.                 <li>Quotation / BoQ</li>
  559.                 <li>Project planning &amp; procurement</li>
  560.                 <li>Inventory issue &amp; site execution</li>
  561.                 <li>Milestone billing · retention / security money</li>
  562.                 <li>Supplier / subcontractor tracking</li>
  563.                 <li>Project cost &amp; margin · O&amp;M handover</li>
  564.                 <li>AI project reporting</li>
  565.                 <li>Optional HoneyCore Edge+ quotation workflow add-on</li>
  566.             </ul>
  567.             <a href="{{ url('honeybee_project_erp') }}" class="n-pc-btn">Request Project Workflow Audit</a>
  568.         </div>
  570.         {# ── 5. Project ERP Pro ── #}
  571.         <div class="n-pricing-card">
  572.             <span class="n-plan-tag popular">Recommended for serious project companies</span>
  573.             <p class="n-pc-name">Project ERP Pro</p>
  574.             <p class="n-pc-badge">Everything in Project ERP, plus advanced profitability &amp; cockpits.</p>
  575.             <div class="n-pc-price">€29.99 <small>/ user / month</small></div>
  576.             <div class="n-pc-billing">Min: 15 users or €449/month</div>
  577.             <hr class="n-pc-divider">
  578.             <ul class="n-pc-features">
  579.                 <li>Advanced project profitability</li>
  580.                 <li>Advanced approval matrix · multi-project dashboard</li>
  581.                 <li>Client receivable &amp; supplier payable cockpits</li>
  582.                 <li>Cash-flow visibility</li>
  583.                 <li>Import / procurement document tracking</li>
  584.                 <li>Management dashboard</li>
  585.                 <li>AI / Hivemind reporting assistance · priority support</li>
  586.                 <li>Optional advanced HoneyCore Edge+ project workflow add-on</li>
  587.             </ul>
  588.             <a href="{{ url('honeybee_project_erp') }}" class="n-pc-btn">Get Project ERP Pro Proposal</a>
  589.         </div>
  591.         {# ── 6. HoneyCore Edge+ Design & Quote Assessment ── #}
  592.         <div class="n-pricing-card">
  593.             <span class="n-plan-tag popular">Design &amp; Quote</span>
  594.             <p class="n-pc-name">HoneyCore Edge+ Design &amp; Quote Assessment</p>
  595.             <p class="n-pc-badge">Part of HoneyCore Edge+, not standalone IoT. For HoneyCore Edge+ site architecture, BoQ, quotation, and deployment planning before full implementation.</p>
  596.             <div class="n-pc-price" style="font-size:2.1rem;">€499 <small>/ site</small></div>
  597.             <div class="n-pc-price-sec">from · credited against deployment</div>
  598.             <div class="n-pc-billing">Credited against HoneyCore Edge+ deployment if you proceed</div>
  599.             <hr class="n-pc-divider">
  600.             <ul class="n-pc-features">
  601.                 <li>Site requirement review</li>
  602.                 <li>Data point mapping</li>
  603.                 <li>Recommended device categories</li>
  604.                 <li>HoneyCore Edge+ architecture proposal</li>
  605.                 <li>Preliminary BoQ &amp; quotation structure</li>
  606.                 <li>Dashboard scope · deployment planning checklist</li>
  607.             </ul>
  608.             <a href="{{ url('honeybee_edge_projects') }}" class="n-pc-btn">Request HoneyCore Edge+ Design Assessment</a>
  609.         </div>
  611.         {# ── 7. HoneyCore Edge EMS Site Intelligence ── #}
  612.         <div class="n-pricing-card">
  613.             <span class="n-plan-tag popular">Site-scoped</span>
  614.             <p class="n-pc-name">HoneyCore Edge EMS Site Intelligence</p>
  615.             <p class="n-pc-badge">For IoT, edge intelligence, solar PV, grid, generators, batteries, meters, sensors, utilities, cold-chain, EMS, SCADA, O&amp;M, billing, alarms, and digital-twin visibility.</p>
  616.             <div class="n-pc-price" style="font-size:2.1rem;">€2,999 <small>/ site</small></div>
  617.             <div class="n-pc-price-sec">from · + optional recurring</div>
  618.             <div class="n-pc-billing">Site-scoped package + optional recurring software / monitoring / support subscription</div>
  619.             <hr class="n-pc-divider">
  620.             <ul class="n-pc-features">
  621.                 <li>HoneyCore Edge EMS site intelligence package · site dashboard setup</li>
  622.                 <li>Connected asset &amp; data point mapping</li>
  623.                 <li>Sensor / meter / gateway planning · edge controller sizing</li>
  624.                 <li>Protocol mapping · preliminary BoQ &amp; quotation structure</li>
  625.                 <li>Basic O&amp;M workflow connection · reporting structure</li>
  626.                 <li>Standard commissioning checklist · data export · standard support if included</li>
  627.             </ul>
  628.             <a href="{{ url('honeybee_edge') }}" class="n-pc-btn">Request HoneyCore Edge+ Site Assessment</a>
  629.         </div>
  631.         {# ── 8. Enterprise / Custom ── #}
  632.         <div class="n-pricing-card">
  633.             <span class="n-plan-tag popular">Custom</span>
  634.             <p class="n-pc-name">Enterprise / Custom</p>
  635.             <p class="n-pc-badge">For private cloud, on-premise, multi-company ERP, advanced integrations, local AI, compliance alignment, custom workflows, and enterprise support.</p>
  636.             <div class="n-pc-price" style="font-size:2.1rem;">€1,500 <small>/ month</small></div>
  637.             <div class="n-pc-price-sec">from · or custom proposal</div>
  638.             <div class="n-pc-billing">Scoped to your requirements</div>
  639.             <hr class="n-pc-divider">
  640.             <ul class="n-pc-features">
  641.                 <li>Private cloud / on-premise deployment</li>
  642.                 <li>Multi-company ERP</li>
  643.                 <li>Advanced integrations · local AI</li>
  644.                 <li>Compliance alignment · custom workflows</li>
  645.                 <li>Enterprise support</li>
  646.             </ul>
  647.             <a href="{{ url('honeybee_contact') }}" class="n-pc-btn">Talk to HoneyBee</a>
  648.         </div>
  650.     </div>
  652.     {# ── HoneyCore Edge+ pricing note (verbatim) + regional note ── #}
  653.     <div class="n-wrap" style="padding-top:32px;">
  654.         <div style="background:rgba(192,125,42,.08);border:1px solid rgba(192,125,42,.22);border-radius:12px;padding:24px 28px;max-width:900px;margin:0 auto;">
  655.             <div style="font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#C07D2A;margin-bottom:10px">HoneyCore Edge+ pricing note</div>
  656.             <p style="font-family:'DM Sans',sans-serif;font-size:.95rem;color:#1A1D2E;line-height:1.75;margin:0 0 12px">
  657.                 <strong>HoneyCore Edge+ starts from €2,999 per site. Final pricing depends on site size, connected assets, required meters/sensors/gateways, protocols, dashboard scope, local/cloud deployment, commissioning, support, and integration requirements.</strong>
  658.             </p>
  659.             <p style="font-family:'DM Sans',sans-serif;font-size:.9rem;color:#6B6E7F;line-height:1.7;margin:0">
  660.                 Optional recurring monitoring, cloud dashboard, support, and managed O&amp;M subscriptions may be quoted separately after the site scope is confirmed.
  661.             </p>
  662.         </div>
  663.         <p style="max-width:900px;margin:16px auto 0;text-align:center;font-size:.85rem;color:var(--n-muted);line-height:1.6;">
  664.             Regional pricing may be available for selected markets, partners, pilots, and development-sector deployments.
  665.         </p>
  666.     </div>
  667. </section>
  669. <!-- ── IMPLEMENTATION / INCLUDED / LAUNCH / ORDERING ─────────────────────────── -->
  670. <section class="n-pricing-section" style="background:var(--n-cream);padding-top:56px;">
  671.     <div class="n-wrap">
  673.         {# ── Implementation / setup ── #}
  674.         <div style="margin-bottom:48px;">
  675.             <span class="n-eyebrow">Implementation &amp; setup</span>
  676.             <h3 style="font-family:'Montserrat',sans-serif;font-size:1.4rem;font-weight:800;color:var(--n-dark);letter-spacing:-.02em;margin:6px 0 20px;">One-time setup, scoped to your path.</h3>
  677.             <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;">
  678.                 <div style="background:#fff;border:1px solid var(--n-border-md);border-radius:10px;padding:18px 20px;"><div style="font-weight:700;color:#1A1D2E;font-size:.9rem;margin-bottom:4px">Basic Setup</div><div style="color:var(--n-amber);font-weight:700;font-family:'Montserrat',sans-serif">from €299</div></div>
  679.                 <div style="background:#fff;border:1px solid var(--n-border-md);border-radius:10px;padding:18px 20px;"><div style="font-weight:700;color:#1A1D2E;font-size:.9rem;margin-bottom:4px">Standard Implementation</div><div style="color:var(--n-amber);font-weight:700;font-family:'Montserrat',sans-serif">from €999</div></div>
  680.                 <div style="background:#fff;border:1px solid var(--n-border-md);border-radius:10px;padding:18px 20px;"><div style="font-weight:700;color:#1A1D2E;font-size:.9rem;margin-bottom:4px">Project ERP Implementation</div><div style="color:var(--n-amber);font-weight:700;font-family:'Montserrat',sans-serif">from €2,500</div></div>
  681.                 <div style="background:#fff;border:1px solid var(--n-border-md);border-radius:10px;padding:18px 20px;"><div style="font-weight:700;color:#1A1D2E;font-size:.9rem;margin-bottom:4px">HoneyCore Edge+ Design &amp; Quote</div><div style="color:var(--n-amber);font-weight:700;font-family:'Montserrat',sans-serif">from €499/site <span style="font-weight:500;color:var(--n-muted);font-size:.78rem;font-family:var(--n-font)">(credited)</span></div></div>
  682.                 <div style="background:#fff;border:1px solid var(--n-border-md);border-radius:10px;padding:18px 20px;"><div style="font-weight:700;color:#1A1D2E;font-size:.9rem;margin-bottom:4px">HoneyCore Edge+ Deployment</div><div style="color:var(--n-amber);font-weight:700;font-family:'Montserrat',sans-serif">from €2,999/site <span style="font-weight:500;color:var(--n-muted);font-size:.78rem;font-family:var(--n-font)">then scoped</span></div></div>
  683.                 <div style="background:#fff;border:1px solid var(--n-border-md);border-radius:10px;padding:18px 20px;"><div style="font-weight:700;color:#1A1D2E;font-size:.9rem;margin-bottom:4px">Enterprise Implementation</div><div style="color:var(--n-amber);font-weight:700;font-family:'Montserrat',sans-serif">custom</div></div>
  684.             </div>
  685.         </div>
  687.         {# ── Usually included vs Quoted separately ── #}
  688.         <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:48px;">
  689.             <div style="background:var(--n-sage-dim);border:1px solid rgba(61,107,82,.25);border-radius:12px;padding:24px 26px;">
  690.                 <div style="font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#3D6B52;margin-bottom:12px">Usually included</div>
  691.                 <ul style="list-style:none;margin:0;padding:0;font-size:.9rem;color:#1A1D2E;line-height:1.9;">
  692.                     <li>Software subscription</li>
  693.                     <li>Selected modules · user access</li>
  694.                     <li>Standard dashboards · standard reports</li>
  695.                     <li>Role-based access · data export</li>
  696.                     <li>Basic support</li>
  697.                 </ul>
  698.             </div>
  699.             <div style="background:var(--n-amber-dim);border:1px solid rgba(192,125,42,.25);border-radius:12px;padding:24px 26px;">
  700.                 <div style="font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#C07D2A;margin-bottom:12px">Quoted separately</div>
  701.                 <ul style="list-style:none;margin:0;padding:0;font-size:.9rem;color:#1A1D2E;line-height:1.9;">
  702.                     <li>Data migration · training · custom workflow development</li>
  703.                     <li>ERP implementation · HoneyCore Edge+ detailed design</li>
  704.                     <li>HoneyCore Edge EMS hardware · sensors / meters / gateways</li>
  705.                     <li>Local server / private cloud · on-premise</li>
  706.                     <li>Third-party integrations · compliance-specific configuration</li>
  707.                     <li>Country-specific accounting / tax localization</li>
  708.                     <li>Advanced AI workflows · long-term managed support</li>
  709.                 </ul>
  710.             </div>
  711.         </div>
  713.         {# ── Launch offer ── #}
  714.         <div style="background:var(--n-dark);border-radius:14px;padding:28px 32px;margin-bottom:48px;max-width:900px;">
  715.             <div style="font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--n-amber-lt);margin-bottom:10px">Launch offer</div>
  716.             <p style="color:#fff;font-family:'Montserrat',sans-serif;font-size:1.15rem;font-weight:700;margin:0 0 8px;">Start with one department or one project workflow.</p>
  717.             <p style="color:rgba(255,255,255,.8);font-size:.92rem;line-height:1.7;margin:0;">First 3 months at <strong style="color:var(--n-amber-lt)">50% software-subscription discount</strong> after implementation approval. Discount applies to software subscription only — not implementation, customization, hardware, HoneyCore Edge+ deployment, HoneyCore Edge+ design package, or third-party costs.</p>
  718.         </div>
  720.         {# ── Ordering flow ── #}
  721.         <div>
  722.             <span class="n-eyebrow">Ordering flow</span>
  723.             <h3 style="font-family:'Montserrat',sans-serif;font-size:1.4rem;font-weight:800;color:var(--n-dark);letter-spacing:-.02em;margin:6px 0 24px;">Five steps from path to rollout.</h3>
  724.             <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;">
  725.                 <div style="background:#fff;border:1px solid var(--n-border-md);border-radius:10px;padding:20px;"><div style="font-family:'Montserrat',sans-serif;font-size:1.6rem;font-weight:900;color:var(--n-amber);margin-bottom:6px">1</div><div style="font-weight:700;color:#1A1D2E;font-size:.92rem;margin-bottom:4px">Choose your path</div><div style="font-size:.82rem;color:#6B6E7F;line-height:1.55">Business ERP / Project ERP / HoneyCore Edge+ Design / HoneyCore Edge EMS Site Intelligence / Enterprise.</div></div>
  726.                 <div style="background:#fff;border:1px solid var(--n-border-md);border-radius:10px;padding:20px;"><div style="font-family:'Montserrat',sans-serif;font-size:1.6rem;font-weight:900;color:var(--n-amber);margin-bottom:6px">2</div><div style="font-weight:700;color:#1A1D2E;font-size:.92rem;margin-bottom:4px">Share your workflow</div><div style="font-size:.82rem;color:#6B6E7F;line-height:1.55">Upload quotation, cost sheet, project sheet, SLD, ERP export, HoneyCore Edge+ requirement list, device list, or workflow document.</div></div>
  727.                 <div style="background:#fff;border:1px solid var(--n-border-md);border-radius:10px;padding:20px;"><div style="font-family:'Montserrat',sans-serif;font-size:1.6rem;font-weight:900;color:var(--n-amber);margin-bottom:6px">3</div><div style="font-weight:700;color:#1A1D2E;font-size:.92rem;margin-bottom:4px">Get a recommended setup</div><div style="font-size:.82rem;color:#6B6E7F;line-height:1.55">We match your workflow to the right modules and scope.</div></div>
  728.                 <div style="background:#fff;border:1px solid var(--n-border-md);border-radius:10px;padding:20px;"><div style="font-family:'Montserrat',sans-serif;font-size:1.6rem;font-weight:900;color:var(--n-amber);margin-bottom:6px">4</div><div style="font-weight:700;color:#1A1D2E;font-size:.92rem;margin-bottom:4px">Approve proposal</div><div style="font-size:.82rem;color:#6B6E7F;line-height:1.55">Review and approve the scoped proposal.</div></div>
  729.                 <div style="background:#fff;border:1px solid var(--n-border-md);border-radius:10px;padding:20px;"><div style="font-family:'Montserrat',sans-serif;font-size:1.6rem;font-weight:900;color:var(--n-amber);margin-bottom:6px">5</div><div style="font-weight:700;color:#1A1D2E;font-size:.92rem;margin-bottom:4px">Start rollout</div><div style="font-size:.82rem;color:#6B6E7F;line-height:1.55">One module / workflow / site, expand gradually.</div></div>
  730.             </div>
  731.         </div>
  733.     </div>
  734. </section>
  736. <!-- ── FAQ ───────────────────────────────────────────────────────────────────── -->
  737. <section class="n-faq-section reveal">
  738.     <div class="n-wrap">
  739.         <div class="n-faq-layout">
  740.             <div class="n-faq-sidebar">
  741.                 <span class="n-eyebrow trn" data-trn-key="_PRC_FAQ_EYEBROW_">Common questions</span>
  742.                 <h2 style="margin-top:12px;"><span class="trn" data-trn-key="_PRC_FAQ_H2_">Before you sign up,</span> <em class="trn" data-trn-key="_PRC_FAQ_H2_EM_">the real answers.</em></h2>
  743.                 <p style="margin-top:14px;">Not here? <a href="#">Ask us directly</a>.</p>
  744.             </div>
  745.             <div class="n-faq-list">
  747.                 <details class="n-faq-item">
  748.                     <summary><span class="trn" data-trn-key="_PRC_FAQ_Q1_">What exactly counts toward the 10 MB storage?</span> <span class="n-faq-icon">+</span></summary>
  749.                     <div class="n-faq-answer">File attachments on invoices, expenses, documents, and mobile receipt captures. Transactional database rows (invoices, leads, ledger entries) don't count — you could process thousands of invoices and stay under the limit if nobody uploads heavy PDFs or photos.</div>
  750.                 </details>
  752.                 <details class="n-faq-item">
  753.                     <summary><span class="trn" data-trn-key="_PRC_FAQ_Q2_">What happens on the day a user crosses 10 MB?</span> <span class="n-faq-icon">+</span></summary>
  754.                     <div class="n-faq-answer">You get an email warning before, at, and after the threshold. Nothing breaks. You have a grace window to decide — upgrade to Team, delete old files, or do nothing (in which case your data is kept but writes are paused until you choose).</div>
  755.                 </details>
  757.                 <details class="n-faq-item">
  758.                     <summary>What's included in Enterprise customization? <span class="n-faq-icon">+</span></summary>
  759.                     <div class="n-faq-answer">A fixed allocation of development hours per year for custom modules, workflow automations, integrations (your specific SAP, Salesforce, or legacy system), and branded reporting. Scope is agreed before work starts.</div>
  760.                 </details>
  762.                 <details class="n-faq-item">
  763.                     <summary>Where is my data hosted? <span class="n-faq-icon">+</span></summary>
  764.                     <div class="n-faq-answer">Free and Team customers: EU cloud (Frankfurt region). Enterprise: your choice of private cloud or on-premise deployment. Data never moves between regions without explicit permission. The Native LLM Server option means AI inference runs entirely on your hardware — nothing leaves your building.</div>
  765.                 </details>
  767.                 <details class="n-faq-item">
  768.                     <summary>What happens to my data if I leave? <span class="n-faq-icon">+</span></summary>
  769.                     <div class="n-faq-answer">Full export any time — during or after cancellation. CSV, JSON, or SQL. DATEV customers get a clean DATEV-format export on exit. No retention fees, no lock-in.</div>
  770.                 </details>
  772.                 <details class="n-faq-item">
  773.                     <summary>Can I buy HoneyBee directly online? <span class="n-faq-icon">+</span></summary>
  774.                     <div class="n-faq-answer">Basic SaaS access may be available directly depending on modules. For Project ERP, HoneyCore Edge+ design, HoneyCore Edge EMS, enterprise, migration, or custom workflows, HoneyBee first reviews your workflow and prepares a scoped proposal.</div>
  775.                 </details>
  777.                 <details class="n-faq-item">
  778.                     <summary>Is IoT a separate HoneyBee product? <span class="n-faq-icon">+</span></summary>
  779.                     <div class="n-faq-answer">No. IoT is part of HoneyCore Edge EMS — HoneyBee's IoT, edge-intelligence, site-data, and energy-infrastructure layer.</div>
  780.                 </details>
  782.                 <details class="n-faq-item">
  783.                     <summary>Can HoneyBee help prepare HoneyCore Edge+ project quotations? <span class="n-faq-icon">+</span></summary>
  784.                     <div class="n-faq-answer">Yes — site requirements, data point mapping, sensor/meter/gateway planning, edge controller sizing, BoQ structure, costing, proposal generation, procurement planning, commissioning checklist, and O&amp;M handover.</div>
  785.                 </details>
  787.                 <details class="n-faq-item">
  788.                     <summary>What does HoneyCore Edge+ start from? <span class="n-faq-icon">+</span></summary>
  789.                     <div class="n-faq-answer">€2,999 per site; final pricing depends on site size, connected assets, meters, sensors, gateways, protocols, dashboard scope, local/cloud deployment, commissioning, support, and integration.</div>
  790.                 </details>
  792.                 <details class="n-faq-item">
  793.                     <summary>Why is HoneyCore Edge+ priced separately? <span class="n-faq-icon">+</span></summary>
  794.                     <div class="n-faq-answer">It depends on site conditions, connected assets, meters, sensors, protocols, hardware, local/cloud deployment, commissioning, and support.</div>
  795.                 </details>
  797.                 <details class="n-faq-item">
  798.                     <summary>Does HoneyBee install HoneyCore Edge+ hardware? <span class="n-faq-icon">+</span></summary>
  799.                     <div class="n-faq-answer">HoneyBee provides the software, design-assistance workflow, BoQ/quotation structure, HoneyCore Edge EMS platform, and project management tools. Physical installation can be performed by the customer, EPC contractor, system integrator, or certified HoneyBee partner.</div>
  800.                 </details>
  802.                 <details class="n-faq-item">
  803.                     <summary>Can I start small? <span class="n-faq-icon">+</span></summary>
  804.                     <div class="n-faq-answer">Yes — selected modules (HR, accounts, inventory, CRM), one project workflow, a HoneyCore Edge+ design assessment, or one HoneyCore Edge+ site package, then expand gradually.</div>
  805.                 </details>
  807.             </div>
  808.         </div>
  809.     </div>
  810. </section>
  812. <!-- ── FINAL CTA ─────────────────────────────────────────────────────────────── -->
  813. <section class="n-cta-final">
  814.     <div class="n-wrap">
  815.         <h2>Ready to connect <em>your operations?</em></h2>
  816.         <p>Start free for up to 50 users and use HoneyBee on real work. HoneyCore Edge+, infrastructure, and project deployments are scoped separately — we will match you with the right approach.</p>
  817.         <div style="display:flex;gap:12px;justify-content:center;flex-wrap:wrap;">
  818.             <a href="{{ url('honeybee_contact') }}" class="n-btn-primary">Request Project Solution</a>
  819.             <a href="{{ path('quote_request', {plan: 'enterprise'}) }}" class="n-btn-secondary">Contact Sales</a>
  820.         </div>
  821.     </div>
  822. </section>
  824. {% include '@HoneybeeWeb/footer/central_footer.html.twig' %}
  826. <script>
  827.     /* ── Scroll reveal ── */
  828.     (function(){
  829.         var obs = new IntersectionObserver(function(entries){
  830.             entries.forEach(function(e){ if(e.isIntersecting){ e.target.classList.add('visible'); obs.unobserve(e.target); } });
  831.         },{ threshold: 0.10 });
  832.         document.querySelectorAll('.reveal').forEach(function(el){ obs.observe(el); });
  833.     })();
  834. </script>