1import{j as n}from"./index-CNdiuqTh.js";import{M as e}from"./marketing-w9THUS5q.js";import{P as t}from"./PageContent-pk-xdrw5.js";import{m as a,b as i}from"./SEO-CvsBpLmY.js";import"./index-BWeW8WoE.js";const s=`<style> 2*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} 3:root{ 4 --bg: #07070c; 5 --bg2: #0d0d15; 6 --bg3: #111119; 7 --surface: #14141f; 8 --surface2: #1a1a28; 9 --border: rgba(255,255,255,0.07); 10 --border2: rgba(255,255,255,0.12); 11 --text: #e8e8f0; 12 --muted: #5a5a72; 13 --muted2: #8888a0; 14 --accent: oklch(70% 0.25 195); 15 --accent2: oklch(74% 0.2 155); 16 --red: oklch(65% 0.22 25); 17 --amber: oklch(76% 0.2 70); 18 --mono: 'JetBrains Mono', monospace; 19 --display: 'DM Serif Display', serif; 20 --body: 'Inter', sans-serif; 21} 22html{scroll-behavior:smooth;} 23body{ 24 background:var(--bg); 25 color:var(--text); 26 font-family:var(--body); 27 font-size:16px; 28 line-height:1.6; 29 overflow-x:hidden; 30 -webkit-font-smoothing:antialiased; 31} 32 33/* grain overlay */ 34body::before{ 35 content:''; 36 position:fixed; 37 inset:0; 38 background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E"); 39 pointer-events:none; 40 z-index:1000; 41 opacity:0.6; 42} 43 44/* ââ UTILS ââ */ 45.container{max-width:1200px;margin:0 auto;padding:0 40px;} 46.mono{font-family:var(--mono);font-size:0.85em;} 47.rule{height:1px;background:var(--border);width:100%;} 48 49/* ââ NAV ââ */ 50nav{ 51 position:fixed;top:0;left:0;right:0;z-index:500; 52 padding:20px 0; 53 transition:background 0.4s,border-color 0.4s; 54 border-bottom:1px solid transparent; 55} 56nav.scrolled{ 57 background:rgba(7,7,12,0.9); 58 backdrop-filter:blur(20px); 59 border-bottom-color:var(--border); 60} 61.nav-inner{display:flex;align-items:center;justify-content:space-between;} 62.logo{ 63 font-family:var(--display); 64 font-size:20px;font-weight:400; 65 color:#fff;letter-spacing:-0.02em; 66 text-decoration:none; 67 display:flex;align-items:center;gap:10px; 68} 69.logo-mark{ 70 width:28px;height:28px; 71 border:1.5px solid var(--accent); 72 border-radius:6px; 73 display:flex;align-items:center;justify-content:center; 74 position:relative; 75 overflow:hidden; 76} 77.logo-mark::after{ 78 content:''; 79 position:absolute; 80 width:12px;height:1.5px; 81 background:var(--accent); 82 bottom:9px; 83 animation:logo-pulse 2s ease-in-out infinite; 84} 85@keyframes logo-pulse{0%,100%{opacity:1;transform:scaleX(1);}50%{opacity:0.4;transform:scaleX(0.6);}} 86 87.nav-links{display:flex;align-items:center;gap:36px;} 88.nav-links a{ 89 font-size:13px;font-weight:500;color:var(--muted2); 90 text-decoration:none;letter-spacing:0.01em; 91 transition:color 0.15s; 92} 93.nav-links a:hover{color:#fff;} 94.nav-right{display:flex;align-items:center;gap:16px;} 95.btn-nav{ 96 font-family:var(--display); 97 font-size:13px;font-weight:400; 98 padding:9px 20px; 99 border:1.5px solid var(--accent); 100 border-radius:6px; 101 color:var(--accent); 102 text-decoration:none; 103 letter-spacing:0.02em; 104 transition:background 0.15s,color 0.15s; 105 cursor:pointer; 106 background:transparent; 107} 108.btn-nav:hover{background:var(--accent);color:#07070c;} 109 110/* ââ HERO ââ 111 * Grid backdrop runs from the top of the hero (right under the 112 * announcement bar) downward, with a linear top-to-bottom fade. 113 * The transparent nav sits over the dense top of the grid so the 114 * pattern visually flows through it â no abrupt edge between the 115 * navbar and the hero like the old radial mask produced. */ 116.hero{ 117 padding:160px 0 0; 118 position:relative; 119 overflow:hidden; 120} 121/* Fine grid background */ 122.hero::before{ 123 content:''; 124 position:absolute;inset:0; 125 background-image: 126 linear-gradient(var(--border) 1px, transparent 1px), 127 linear-gradient(90deg, var(--border) 1px, transparent 1px); 128 background-size:60px 60px; 129 mask-image:linear-gradient(180deg, black 0%, black 38%, transparent 88%); 130 -webkit-mask-image:linear-gradient(180deg, black 0%, black 38%, transparent 88%); 131 pointer-events:none; 132 z-index:0; 133} 134.hero > *{position:relative;z-index:1;} 135.hero-eyebrow{ 136 display:inline-flex;align-items:center;gap:8px; 137 font-family:var(--mono);font-size:11px;font-weight:600; 138 color:var(--accent);letter-spacing:0.1em;text-transform:uppercase; 139 margin-bottom:28px; 140} 141.hero-eyebrow::before{ 142 content:'';width:24px;height:1px;background:var(--accent); 143} 144.hero h1{ 145 font-family:var(--display); 146 font-size:clamp(52px,6.5vw,90px); 147 font-weight:400; 148 color:#fff; 149 letter-spacing:-0.01em; 150 line-height:1.0; 151 margin-bottom:28px; 152 max-width:900px; 153} 154.hero h1 em{ 155 font-style:normal; 156 color:var(--accent); 157 display:inline-block; 158 position:relative; 159} 160.hero h1 em::after{ 161 content:''; 162 position:absolute; 163 bottom:-4px;left:0;right:0; 164 height:2px; 165 background:var(--accent);
166 transform:scaleX(0); 167 transform-origin:left; 168 animation:underline-in 0.8s 0.6s cubic-bezier(0.22,1,0.36,1) forwards; 169} 170@keyframes underline-in{to{transform:scaleX(1);}} 171.hero-sub{ 172 font-size:18px; 173 color:var(--muted2); 174 max-width:560px; 175 line-height:1.7; 176 margin-bottom:44px; 177 font-weight:400; 178} 179.hero-actions{ 180 display:flex;align-items:center;gap:16px; 181 margin-bottom:12px; 182} 183.btn-primary{ 184 font-family:var(--display); 185 font-size:14px;font-weight:400; 186 padding:14px 28px; 187 background:var(--accent); 188 color:#07070c; 189 border:none;border-radius:6px; 190 cursor:pointer;text-decoration:none; 191 letter-spacing:0.02em; 192 display:inline-flex;align-items:center;gap:8px; 193 transition:filter 0.15s,transform 0.15s; 194} 195.btn-primary:hover{filter:brightness(1.1);transform:translateY(-1px);} 196.btn-secondary{ 197 font-family:var(--display); 198 font-size:14px;font-weight:600; 199 padding:14px 24px; 200 background:transparent; 201 color:var(--muted2); 202 border:1.5px solid var(--border2); 203 border-radius:6px; 204 cursor:pointer;text-decoration:none; 205 letter-spacing:0.02em; 206 display:inline-flex;align-items:center;gap:8px; 207 transition:color 0.15s,border-color 0.15s,transform 0.15s; 208} 209.btn-secondary:hover{color:#fff;border-color:rgba(255,255,255,0.3);transform:translateY(-1px);} 210.hero-note{ 211 font-family:var(--mono);font-size:11px;color:var(--muted); 212 letter-spacing:0.04em; 213} 214.hero-note span{color:var(--accent2);} 215 216/* ââ ANIMATED DASHBOARD ââ */ 217.hero-dash{ 218 margin-top:72px; 219 position:relative; 220} 221.dash-chrome{ 222 background:var(--surface); 223 border:1px solid var(--border2); 224 border-radius:12px 12px 0 0; 225 overflow:hidden; 226 box-shadow:0 0 0 1px rgba(255,255,255,0.03), 0 60px 120px rgba(0,0,0,0.8); 227} 228.chrome-bar{ 229 background:var(--bg2); 230 border-bottom:1px solid var(--border); 231 padding:12px 16px; 232 display:flex;align-items:center;gap:12px; 233} 234.chrome-dots{display:flex;gap:6px;} 235.chrome-dot{ 236 width:11px;height:11px;border-radius:50%; 237 position:relative; 238 cursor:pointer; 239 display:flex;align-items:center;justify-content:center; 240 transition:transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; 241 user-select:none; 242} 243/* Symbol revealed on hover of the dot group â mirrors macOS window behavior */ 244.chrome-dot::after{ 245 content:attr(data-symbol); 246 font-family:-apple-system,system-ui,sans-serif; 247 font-size:8px;font-weight:700; 248 line-height:1; 249 color:rgba(0,0,0,0.65); 250 opacity:0; 251 transition:opacity 0.12s ease; 252 pointer-events:none; 253} 254.chrome-dots:hover .chrome-dot::after{opacity:1;} 255.chrome-dot:hover{transform:scale(1.18);filter:brightness(1.1);} 256.chrome-dot:active{transform:scale(0.92);} 257.chrome-dot.ripple::before{ 258 content:''; 259 position:absolute;inset:-2px; 260 border-radius:50%; 261 border:2px solid currentColor; 262 animation:chrome-ripple 0.5s ease-out forwards; 263 pointer-events:none; 264} 265@keyframes chrome-ripple{ 266 0% {transform:scale(1); opacity:0.7;} 267 100% {transform:scale(2.6); opacity:0;} 268} 269.chrome-label{ 270 font-family:var(--mono);font-size:11px;color:var(--muted); 271 margin-left:10px;letter-spacing:0.04em; 272} 273.chrome-realnum{ 274 font-family:var(--mono);font-size:10px; 275 color:var(--muted); 276 letter-spacing:0.04em; 277 margin-left:10px; 278 padding-left:10px; 279 border-left:1px solid var(--border); 280} 281.chrome-badge{ 282 margin-left:auto; 283 font-family:var(--mono);font-size:10px; 284 color:var(--accent2); 285 background:rgba(104,204,153,0.08); 286 border:1px solid rgba(104,204,153,0.2); 287 padding:3px 8px;border-radius:4px; 288 letter-spacing:0.05em; 289 display:flex;align-items:center;gap:5px; 290} 291.chrome-badge::before{ 292 content:'';width:6px;height:6px;border-radius:50%; 293 background:var(--accent2); 294 animation:blink 1.5s ease-in-out infinite; 295} 296@keyframes blink{0%,100%{opacity:1;}50%{opacity:0.2;}} 297 298.dash-inner{padding:20px;} 299 300/* KPI strip */ 301.kpi-strip{ 302 display:grid; 303 grid-template-columns:repeat(5,1fr); 304 gap:1px; 305 background:var(--border); 306 border:1px solid var(--border); 307 border-radius:8px; 308 overflow:hidden; 309 margin-bottom:16px; 310} 311.kpi{ 312 background:var(--bg2); 313 padding:14px 16px; 314 position:relative; 315 overflow:hidden; 316} 317.kpi::after{ 318 content:''; 319 position:absolute;top:0;left:0;right:0;height:2px; 320 background:var(--kpi-color,var(--accent));
321 transform:scaleX(0); 322 transform-origin:left; 323 transition:transform 0.8s cubic-bezier(0.22,1,0.36,1); 324} 325.kpi.animate::after{transform:scaleX(1);} 326.kpi-lbl{ 327 font-family:var(--mono);font-size:9px; 328 color:var(--muted);letter-spacing:0.08em; 329 text-transform:uppercase;margin-bottom:7px; 330} 331.kpi-val{ 332 font-family:var(--mono);font-size:20px;font-weight:400; 333 color:var(--kpi-color,#fff); 334 line-height:1;margin-bottom:5px; 335 overflow:hidden; 336} 337.kpi-delta{ 338 font-family:var(--mono);font-size:10px;font-weight:600; 339 display:flex;align-items:center;gap:4px; 340} 341.kpi-delta.up{color:var(--accent2);} 342.kpi-delta.dn{color:var(--red);} 343 344/* Chart */ 345.chart-wrap{ 346 background:var(--bg2); 347 border:1px solid var(--border); 348 border-radius:8px; 349 padding:18px 18px 12px; 350} 351.chart-header{ 352 display:flex;align-items:center;justify-content:space-between; 353 margin-bottom:14px; 354} 355.chart-title{ 356 font-family:var(--display);font-size:13px;font-weight:400;color:#fff; 357} 358.chart-meta{ 359 font-family:var(--mono);font-size:10px;color:var(--muted); 360 letter-spacing:0.04em; 361} 362.chart-legend{display:flex;gap:18px;} 363.leg{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;color:var(--muted2);} 364.leg-sq{width:10px;height:10px;border-radius:2px;} 365.leg-line{width:16px;height:2px;border-radius:1px;} 366.leg-dash{width:16px;height:2px;border-radius:1px;background:linear-gradient(90deg,var(--amber) 0%,var(--amber) 40%,transparent 40%,transparent 60%,var(--amber) 60%);} 367 368.chart-svg-wrap{position:relative;height:160px;} 369/* Hover crosshair + tooltip â appears when cursor is over the chart, 370 * mirroring the per-day inspection panel in the real app dashboard. */ 371.chart-tooltip{ 372 position:absolute; 373 top:8px; 374 pointer-events:none; 375 background:rgba(13,13,21,0.96); 376 border:1px solid var(--border2); 377 border-radius:6px; 378 padding:10px 12px; 379 font-family:var(--mono);font-size:10px; 380 color:var(--muted2); 381 min-width:148px; 382 opacity:0; 383 transform:translateY(-4px); 384 transition:opacity 0.15s ease, transform 0.15s ease; 385 z-index:5; 386 box-shadow:0 8px 24px rgba(0,0,0,0.4); 387} 388.chart-tooltip.show{opacity:1;transform:translateY(0);} 389.chart-tooltip .tt-day{ 390 color:#fff;font-weight:600;letter-spacing:0.06em;text-transform:uppercase; 391 padding-bottom:6px;margin-bottom:6px; 392 border-bottom:1px solid var(--border); 393} 394.chart-tooltip .tt-row{display:flex;justify-content:space-between;gap:14px;padding:2px 0;} 395.chart-tooltip .tt-row.profit{color:oklch(76% 0.2 70);} 396.chart-tooltip .tt-row.profit.loss{color:var(--red);} 397.chart-tooltip .tt-row span:last-child{color:var(--text);font-weight:500;} 398#perf-canvas{cursor:crosshair;} 399 400/* Insight cards */ 401.insights-row{ 402 display:grid; 403 grid-template-columns:repeat(4,1fr); 404 gap:8px; 405 margin-top:12px; 406} 407.ins-card{ 408 background:var(--bg2); 409 border-radius:6px; 410 padding:10px 12px; 411 display:flex;gap:8px; 412 border-left:2px solid transparent; 413 opacity:0; 414 transform:translateY(8px); 415 transition:opacity 0.4s,transform 0.4s; 416} 417.ins-card.show{opacity:1;transform:translateY(0);} 418.ins-card.success{border-left-color:var(--accent2);} 419.ins-card.warning{border-left-color:var(--amber);} 420.ins-card.info {border-left-color:var(--accent);} 421.ins-card.critical{border-left-color:var(--red);} 422.ins-title{font-family:var(--mono);font-size:10px;font-weight:600;color:#fff;margin-bottom:3px;} 423.ins-body{font-size:11px;color:var(--muted2);line-height:1.45;} 424 425/* ââ TICKER / TRUST STRIP ââ */ 426.ticker{ 427 border-top:1px solid var(--border); 428 border-bottom:1px solid var(--border); 429 padding:14px 0; 430 overflow:hidden; 431 position:relative; 432} 433.ticker::before,.ticker::after{ 434 content:''; 435 position:absolute;top:0;bottom:0;width:80px; 436 z-index:2;pointer-events:none; 437} 438.ticker::before{left:0;background:linear-gradient(90deg,var(--bg),transparent);} 439.ticker::after{right:0;background:linear-gradient(-90deg,var(--bg),transparent);} 440.ticker-track{ 441 display:flex;gap:60px; 442 animation:ticker-scroll 30s linear infinite; 443 width:max-content; 444} 445@keyframes ticker-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}} 446.tick-item{ 447 display:flex;align-items:center;gap:10px; 448 font-family:var(--mono);font-size:11px;color:var(--muted2); 449 letter-spacing:0.04em;white-space:nowrap; 450} 451.tick-item .tick-icon{color:var(--accent2);} 452 453/* ââ SECTION GENERIC ââ */ 454section{padding:100px 0;} 455.s-eyebrow{ 456 font-family:var(--mono);font-size:11px;font-weight:600; 457 color:var(--accent);letter-spacing:0.1em;text-transform:uppercase; 458 display:flex;align-items:center;gap:10px;margin-bottom:20px; 459} 460.s-eyebrow::before{content:'//';opacity:0.4;} 461.s-title{ 462 font-family:var(--display); 463 font-size:clamp(34px,4vw,54px); 464 font-weight:400; 465 color:#fff; 466 letter-spacing:-0.03em; 467 line-height:1.05; 468 margin-bottom:16px; 469} 470.s-sub{ 471 font-size:17px;color:var(--muted2); 472 line-height:1.7;max-width:520px; 473} 474 475/* ââ FEATURES ââ */ 476.features-section{background:var(--bg);} 477.features-layout{ 478 display:grid; 479 grid-template-columns:1fr 2fr; 480 gap:80px; 481 align-items:start; 482} 483.features-sticky{position:sticky;top:120px;} 484.feat-list{margin-top:56px;} 485.feat-item{ 486 padding:20px 0; 487 border-bottom:1px solid var(--border); 488 display:flex;gap:20px; 489 cursor:pointer; 490 transition:padding-left 0.2s; 491} 492.feat-item:hover{padding-left:6px;} 493.feat-item:first-child{border-top:1px solid var(--border);} 494.feat-num{ 495 font-family:var(--mono);font-size:11px;color:var(--muted); 496 padding-top:3px;flex-shrink:0;width:28px; 497} 498.feat-name{ 499 font-family:var(--display);font-size:18px;font-weight:400; 500 color:#fff;margin-bottom:7px; 501} 502.feat-desc{font-size:14px;color:var(--muted2);line-height:1.6;} 503.feat-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;} 504.feat-tag{
505 font-family:var(--mono);font-size:10px; 506 color:var(--muted);background:var(--surface2); 507 border:1px solid var(--border); 508 padding:3px 8px;border-radius:3px;letter-spacing:0.04em; 509} 510 511/* Feature screen mockups (right side) */ 512.feat-screens{ 513 display:flex;flex-direction:column;gap:24px; 514 padding-top:40px; 515} 516.feat-screen{ 517 background:var(--surface); 518 border:1px solid var(--border2); 519 border-radius:10px; 520 overflow:hidden; 521 opacity:0; 522 transform:translateX(20px); 523 transition:opacity 0.5s,transform 0.5s; 524} 525.feat-screen.visible{opacity:1;transform:translateX(0);} 526.feat-screen-bar{ 527 background:var(--bg2); 528 border-bottom:1px solid var(--border); 529 padding:10px 14px; 530 display:flex;align-items:center;gap:8px; 531} 532.feat-screen-bar-dots{display:flex;gap:5px;} 533.feat-screen-bar-dots span{width:9px;height:9px;border-radius:50%;} 534.feat-screen-title{ 535 font-family:var(--mono);font-size:10px;color:var(--muted); 536 margin-left:8px;letter-spacing:0.04em; 537} 538.feat-screen-body{padding:16px 18px;} 539 540/* Mini tables shared style */ 541.mt{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:11px;} 542.mt th{ 543 text-align:left;padding:6px 8px; 544 color:var(--muted);font-size:9px; 545 text-transform:uppercase;letter-spacing:0.07em; 546 border-bottom:1px solid var(--border);font-weight:600; 547} 548.mt td{ 549 padding:8px 8px; 550 color:var(--muted2); 551 border-bottom:1px solid rgba(255,255,255,0.03); 552} 553.mt td.hi{color:#fff;font-weight:600;} 554.mt td.gr{color:var(--accent2);font-weight:400;} 555.mt td.re{color:var(--red);font-weight:600;} 556.mt td.ac{color:var(--accent);font-weight:600;} 557.mt td.am{color:var(--amber);font-weight:600;} 558.mbar{display:flex;align-items:center;gap:6px;} 559.mbar-track{flex:1;height:3px;background:var(--surface2);border-radius:2px;} 560.mbar-fill{height:3px;border-radius:2px;} 561 562/* PL report mini */ 563.pl-mini{} 564.pl-row-mini{ 565 display:flex;justify-content:space-between; 566 padding:6px 0;border-bottom:1px solid rgba(255,255,255,0.04); 567 font-family:var(--mono);font-size:11px; 568} 569.pl-row-mini .pl-l{color:var(--muted2);} 570.pl-row-mini .pl-v{color:#fff;font-weight:600;} 571.pl-row-mini.pl-section{margin-top:8px;} 572.pl-row-mini.pl-section .pl-l{color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:0.07em;} 573.pl-total-mini{ 574 background:rgba(104,204,153,0.07); 575 border:1px solid rgba(104,204,153,0.15); 576 border-radius:6px;padding:10px 12px; 577 display:flex;justify-content:space-between;align-items:center; 578 margin-top:10px;font-family:var(--mono); 579} 580.pl-total-mini .t-l{font-size:12px;font-weight:400;color:#fff;} 581.pl-total-mini .t-v{font-size:18px;font-weight:700;color:var(--accent2);} 582 583/* Cohort mini */ 584.cohort-cell-g{ 585 background:rgba(104,204,153,0.1); 586 color:var(--accent2); 587 font-weight:700; 588 border-radius:3px; 589 padding:2px 4px; 590 display:inline-block; 591} 592.cohort-future{color:var(--surface2);} 593 594/* ââ METRICS SECTION (NUMBERS) ââ */ 595.metrics-section{ 596 background:var(--bg2); 597 border-top:1px solid var(--border); 598 border-bottom:1px solid var(--border); 599 padding:80px 0; 600} 601.metrics-grid{ 602 display:grid; 603 grid-template-columns:repeat(4,1fr); 604 gap:1px; 605 background:var(--border); 606 border:1px solid var(--border); 607 border-radius:8px; 608 overflow:hidden; 609 margin-top:56px; 610} 611.metric{ 612 background:var(--bg2); 613 padding:36px 32px; 614} 615.metric-num{ 616 font-family:var(--display); 617 font-size:clamp(40px,4vw,56px); 618 font-weight:400; 619 color:#fff; 620 letter-spacing:-0.04em; 621 line-height:1; 622 margin-bottom:10px; 623} 624.metric-num .metric-accent{color:var(--accent);} 625.metric-label{font-size:14px;color:var(--muted2);line-height:1.5;} 626 627/* ââ HOW IT WORKS ââ */ 628.how-section{background:var(--bg);} 629.how-grid{ 630 display:grid; 631 grid-template-columns:repeat(3,1fr); 632 gap:1px; 633 background:var(--border); 634 border:1px solid var(--border); 635 border-radius:8px; 636 overflow:hidden; 637 margin-top:64px; 638} 639.how-step{ 640 background:var(--bg2); 641 padding:40px 36px; 642 position:relative; 643} 644.how-step::before{ 645 content:attr(data-n); 646 position:absolute; 647 top:32px;right:28px; 648 font-family:var(--display); 649 font-size:64px;font-weight:400; 650 color:rgba(255,255,255,0.03); 651 line-height:1; 652 letter-spacing:-0.04em; 653} 654.how-n{ 655 font-family:var(--mono);font-size:11px; 656 color:var(--accent);letter-spacing:0.1em; 657 margin-bottom:16px;font-weight:600; 658} 659.how-title{ 660 font-family:var(--display);font-size:22px;font-weight:400; 661 color:#fff;margin-bottom:12px;letter-spacing:-0.02em; 662} 663.how-desc{font-size:14px;color:var(--muted2);line-height:1.65;} 664.how-detail{ 665 margin-top:16px; 666 font-family:var(--mono);font-size:11px; 667 color:var(--muted); 668 display:flex;flex-direction:column;gap:5px; 669} 670.how-detail span::before{content:'â ';color:var(--accent);opacity:0.5;} 671 672/* ââ TESTIMONIALS ââ */ 673.testi-section{ 674 background:var(--bg); 675 border-top:1px solid var(--border); 676} 677.testi-grid{ 678 display:grid; 679 grid-template-columns:repeat(3,1fr); 680 gap:16px; 681 margin-top:56px; 682} 683.testi{ 684 background:var(--surface); 685 border:1px solid var(--border); 686 border-radius:10px; 687 padding:28px; 688 display:flex;flex-direction:column;gap:16px; 689 transition:border-color 0.2s,transform 0.2s; 690 cursor:default; 691} 692.testi:hover{ 693 border-color:var(--border2); 694 transform:translateY(-3px); 695} 696.testi-stars{ 697 display:flex;gap:3px; 698 color:var(--amber);font-size:13px; 699} 700.testi-q{ 701 font-size:14px;color:var(--text);line-height:1.7; 702 font-style:italic;flex:1; 703} 704.testi-q::before{content:'\\201C';} 705.testi-q::after{content:'\\201D';} 706.testi-stat{ 707 display:inline-flex;align-items:center;gap:6px; 708 font-family:var(--mono);font-size:10px;font-weight:400; 709 color:var(--accent2); 710 background:rgba(104,204,153,0.07); 711 border:1px solid rgba(104,204,153,0.15); 712 padding:4px 10px;border-radius:3px;letter-spacing:0.04em; 713 width:fit-content; 714} 715.testi-author{display:flex;align-items:center;gap:12px;margin-top:auto;} 716.testi-av{ 717 width:38px;height:38px;border-radius:50%; 718 display:flex;align-items:center;justify-content:center; 719 font-family:var(--display);font-size:14px;font-weight:400;color:#fff; 720 flex-shrink:0; 721} 722.testi-name{font-family:var(--display);font-size:14px;font-weight:400;color:#fff;} 723.testi-handle{font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:0.03em;} 724 725/* ââ PRICING ââ */ 726.pricing-section{ 727 background:var(--bg2); 728 border-top:1px solid var(--border); 729} 730.pricing-lede{ 731 display:flex;align-items:flex-start; 732 justify-content:space-between;gap:40px; 733 flex-wrap:wrap; 734} 735.early-badge{ 736 display:inline-flex;align-items:center;gap:8px; 737 font-family:var(--mono);font-size:11px;font-weight:600; 738 color:var(--amber);letter-spacing:0.06em; 739 background:rgba(218,165,32,0.08); 740 border:1px solid rgba(218,165,32,0.25); 741 padding:8px 16px;border-radius:4px; 742 margin-bottom:16px; 743} 744.early-badge::before{content:'â¡';margin-right:2px;} 745.pricing-grid{ 746 display:grid; 747 grid-template-columns:repeat(3,1fr); 748 gap:1px; 749 background:var(--border); 750 border:1px solid var(--border); 751 border-radius:10px 10px 0 0; 752 overflow:hidden; 753 margin-top:52px; 754} 755.price-card{ 756 background:var(--surface); 757 padding:0; 758 display:flex;flex-direction:column; 759 transition:background 0.2s; 760} 761.price-card:hover{background:var(--surface2);} 762.price-card.featured{background:var(--surface2);} 763.price-head{ 764 padding:28px 28px 22px; 765 border-bottom:1px solid var(--border); 766 position:relative; 767} 768.price-tier{ 769 font-family:var(--mono);font-size:10px;font-weight:400; 770 color:var(--muted);letter-spacing:0.1em;text-transform:uppercase; 771 margin-bottom:14px; 772} 773.price-tier-label{ 774 color:var(--accent); 775 background:rgba(0,210,220,0.08); 776 border:1px solid rgba(0,210,220,0.2); 777 padding:2px 8px;border-radius:3px; 778 font-size:9px;margin-left:8px; 779} 780.price-amount{ 781 display:flex;align-items:baseline;gap:4px; 782} 783.price-main{ 784 font-family:var(--display); 785 font-size:52px;font-weight:400; 786 color:#fff;letter-spacing:-0.02em;line-height:1; 787} 788.price-per{font-size:14px;color:var(--muted2);font-weight:500;} 789.price-limit{ 790 font-family:var(--mono);font-size:11px;font-weight:500; 791 color:var(--text);letter-spacing:0.03em; 792 margin-top:10px; 793}
794.price-overage{ 795 font-family:var(--mono);font-size:10px; 796 color:var(--muted2);letter-spacing:0.03em; 797 margin-top:3px; 798} 799.price-trial{ 800 font-family:var(--mono);font-size:10px;color:var(--muted); 801 letter-spacing:0.04em;margin-top:6px; 802} 803.price-body{ 804 padding:24px 28px;flex:1; 805 display:flex;flex-direction:column;gap:10px; 806} 807.price-desc{font-size:13px;color:var(--muted2);margin-bottom:6px;line-height:1.55;} 808.pf{ 809 display:flex;align-items:flex-start;gap:10px; 810 font-family:var(--mono);font-size:11px;color:var(--muted2); 811} 812.pf-c{color:var(--accent2);flex-shrink:0;margin-top:1px;} 813.price-foot{ 814 padding:0 28px 28px; 815} 816.btn-plan{ 817 width:100%;display:flex;align-items:center;justify-content:center;gap:8px; 818 font-family:var(--display);font-size:13px;font-weight:400; 819 padding:12px 0;border-radius:6px;cursor:pointer; 820 text-decoration:none;letter-spacing:0.02em; 821 transition:filter 0.15s,transform 0.15s; 822 border:none; 823} 824.btn-plan-accent{background:var(--accent);color:#07070c;} 825.btn-plan-accent:hover{filter:brightness(1.1);transform:translateY(-1px);} 826.btn-plan-outline{ 827 background:transparent;color:var(--muted2); 828 border:1.5px solid var(--border2); 829} 830.btn-plan-outline:hover{color:#fff;border-color:rgba(255,255,255,0.3);transform:translateY(-1px);} 831.pricing-features-bar{ 832 display:flex;flex-wrap:wrap;gap:8px; 833 margin-top:32px;margin-bottom:0; 834} 835.pf-pill{ 836 font-family:var(--mono);font-size:10px;font-weight:500; 837 color:var(--accent2);letter-spacing:0.04em; 838 background:rgba(100,220,160,0.07); 839 border:1px solid rgba(100,220,160,0.18); 840 padding:5px 12px;border-radius:20px; 841} 842.price-enterprise{ 843 margin-top:1px; 844 background:var(--surface); 845 border:1px solid var(--border); 846 border-radius:0 0 10px 10px; 847 padding:24px 28px; 848 display:flex;align-items:center;justify-content:space-between;gap:24px; 849 flex-wrap:wrap; 850} 851.pricing-note{ 852 margin-top:24px;text-align:center; 853 font-family:var(--mono);font-size:11px;color:var(--muted); 854 letter-spacing:0.04em; 855} 856 857/* ââ FAQ ââ */ 858.faq-section{ 859 background:var(--bg); 860 border-top:1px solid var(--border); 861} 862.faq-grid{ 863 display:grid; 864 grid-template-columns:1fr 1fr; 865 gap:1px; 866 background:var(--border); 867 border:1px solid var(--border); 868 border-radius:8px; 869 overflow:hidden; 870 margin-top:52px; 871} 872.faq-item{ 873 background:var(--bg2); 874 padding:28px 32px; 875 cursor:pointer; 876 transition:background 0.2s; 877} 878.faq-item:hover{background:var(--surface);} 879.faq-q{ 880 font-family:var(--display);font-size:16px;font-weight:400; 881 color:#fff;margin-bottom:10px; 882 display:flex;align-items:flex-start;justify-content:space-between;gap:16px; 883} 884.faq-q::after{ 885 content:'+'; 886 color:var(--accent);font-family:var(--mono); 887 font-size:18px;font-weight:400;flex-shrink:0; 888 margin-top:-2px; 889} 890.faq-a{font-size:14px;color:var(--muted2);line-height:1.65;} 891 892/* ââ CTA ââ */ 893.cta-section{ 894 background:var(--bg); 895 border-top:1px solid var(--border); 896 padding:120px 0; 897 text-align:center; 898 position:relative; 899 overflow:hidden; 900} 901.cta-grid-bg{ 902 position:absolute;inset:0; 903 background-image: 904 linear-gradient(var(--border) 1px, transparent 1px), 905 linear-gradient(90deg, var(--border) 1px, transparent 1px); 906 background-size:60px 60px; 907 mask-image:radial-gradient(ellipse 60% 70% at 50% 50%, black 30%, transparent 100%); 908 -webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 50%, black 30%, transparent 100%); 909 pointer-events:none; 910} 911.cta-section h2{ 912 font-family:var(--display); 913 font-size:clamp(40px,6vw,76px); 914 font-weight:400;color:#fff; 915 letter-spacing:-0.01em;line-height:1.05; 916 margin-bottom:20px; 917 position:relative;z-index:1; 918} 919.cta-section p{ 920 font-size:18px;color:var(--muted2); 921 margin-bottom:44px;max-width:460px; 922 margin-left:auto;margin-right:auto; 923 position:relative;z-index:1; 924} 925.cta-actions{ 926 display:flex;align-items:center;justify-content:center; 927 gap:16px;flex-wrap:wrap; 928 position:relative;z-index:1; 929} 930 931/* ââ FOOTER ââ */ 932footer{ 933 background:var(--bg2); 934 border-top:1px solid var(--border); 935 padding:36px 0; 936} 937.foot-inner{ 938 display:flex;align-items:center; 939 justify-content:space-between;flex-wrap:wrap;gap:16px; 940} 941.foot-links{display:flex;gap:28px;} 942.foot-links a{ 943 font-family:var(--mono);font-size:11px;color:var(--muted); 944 text-decoration:none;letter-spacing:0.04em; 945 transition:color 0.15s; 946} 947.foot-links a:hover{color:#fff;} 948.foot-copy{ 949 font-family:var(--mono);font-size:11px;color:var(--muted); 950 letter-spacing:0.04em; 951} 952 953/* ââ SCROLL FADE-IN ââ */ 954.fade-up{ 955 opacity:0;transform:translateY(28px); 956 transition:opacity 0.6s cubic-bezier(0.22,1,0.36,1), 957 transform 0.6s cubic-bezier(0.22,1,0.36,1); 958} 959.fade-up.in{opacity:1;transform:translateY(0);} 960 961/* ââ TWEAKS ââ */ 962#tweaks-panel{ 963 display:none; 964 position:fixed;bottom:24px;right:24px;z-index:9999; 965 background:var(--surface); 966 border:1px solid var(--border2); 967 border-radius:10px;padding:20px;width:260px; 968 box-shadow:0 20px 60px rgba(0,0,0,0.7); 969 flex-direction:column;gap:14px; 970 font-family:var(--body); 971} 972.tw-label{ 973 font-family:var(--mono);font-size:10px;font-weight:600; 974 color:var(--muted);text-transform:uppercase;letter-spacing:0.07em; 975 margin-bottom:8px;display:block; 976} 977.tw-select{ 978 width:100%;background:var(--bg2);border:1px solid var(--border2); 979 border-radius:5px;color:#fff;padding:7px 10px;font-size:12px; 980 font-family:var(--body);cursor:pointer; 981} 982.tw-swatches{display:flex;gap:8px;} 983.tw-swatch{ 984 width:28px;height:28px;border-radius:5px; 985 border:1.5px solid rgba(255,255,255,0.15);cursor:pointer; 986 transition:border-color 0.15s,transform 0.15s; 987} 988.tw-swatch:hover{border-color:rgba(255,255,255,0.5);transform:scale(1.1);} 989.tw-toggle-row{display:flex;align-items:center;justify-content:space-between;} 990.tw-toggle-label{font-size:12px;color:var(--muted2);} 991 992/* ââ DROPDOWN ââ */ 993.has-dropdown{position:relative;display:flex;align-items:center;} 994.dd-trigger{ 995 font-family:var(--body); 996 font-size:13px;font-weight:500;color:var(--muted2); 997 background:none;border:none;cursor:pointer; 998 display:inline-flex;align-items:center;gap:5px; 999 padding:0;letter-spacing:0.01em; 1000 transition:color 0.15s; 1001} 1002.dd-trigger:hover,.dd-trigger[aria-expanded="true"]{color:#fff;} 1003.dd-trigger:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px;} 1004.dd-chevron{ 1005 width:9px;height:9px; 1006 transition:transform 0.15s,color 0.15s; 1007 color:var(--muted); 1008} 1009.dd-trigger:hover .dd-chevron,.dd-trigger[aria-expanded="true"] .dd-chevron{color:var(--accent);} 1010.dd-trigger[aria-expanded="true"] .dd-chevron{transform:rotate(180deg);} 1011.dd-panel{ 1012 position:absolute; 1013 top:calc(100% + 14px);right:0; 1014 min-width:280px; 1015 background:var(--bg2); 1016 border:1px solid var(--border2); 1017 border-radius:10px; 1018 padding:14px 6px; 1019 box-shadow:0 20px 60px rgba(0,0,0,0.7); 1020 backdrop-filter:blur(20px); 1021 -webkit-backdrop-filter:blur(20px); 1022 opacity:0; 1023 transform:translateY(-4px); 1024 pointer-events:none; 1025 transition:opacity 120ms cubic-bezier(0.22,1,0.36,1), 1026 transform 120ms cubic-bezier(0.22,1,0.36,1); 1027 z-index:600; 1028} 1029.has-dropdown.open .dd-panel{ 1030 opacity:1; 1031 transform:translateY(0); 1032 pointer-events:auto; 1033} 1034.dd-section{padding:6px 0;} 1035.dd-section + .dd-section{ 1036 border-top:1px solid var(--border); 1037 margin-top:6px;padding-top:12px; 1038} 1039.dd-section-label{ 1040 font-family:var(--mono);font-size:10px;font-weight:600; 1041 color:var(--muted);letter-spacing:0.08em; 1042 text-transform:uppercase; 1043 padding:0 14px 6px; 1044} 1045.dd-link{ 1046 display:flex;align-items:center;justify-content:space-between; 1047 padding:8px 14px; 1048 font-family:var(--body);font-size:13px;font-weight:500; 1049 color:var(--muted2);text-decoration:none; 1050 letter-spacing:0.01em; 1051 border-radius:5px;margin:0 4px; 1052 transition:color 0.15s,background 0.15s; 1053} 1054.dd-link:hover,.dd-link:focus-visible{ 1055 color:#fff;background:rgba(255,255,255,0.04); 1056 outline:none; 1057} 1058.dd-link::after{ 1059 content:'â'; 1060 font-family:var(--mono); 1061 color:var(--muted);font-size:11px; 1062 opacity:0;transform:translateX(-4px); 1063 transition:opacity 0.15s,transform 0.15s,color 0.15s; 1064} 1065.dd-link:hover::after,.dd-link:focus-visible::after{ 1066 color:var(--accent);opacity:1;transform:translateX(0); 1067} 1068 1069/* ââ MOBILE NAV (burger + sheet) ââ */ 1070.nav-burger{ 1071 display:none; 1072 background:none;border:none;cursor:pointer;padding:6px; 1073 color:var(--text); 1074 align-items:center;justify-content:center; 1075} 1076.nav-burger:hover{color:var(--accent);}
1077.nav-burger:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;} 1078.nav-burger svg{display:block;} 1079.nav-burger .icon-close{display:none;} 1080.nav-burger[aria-expanded="true"] .icon-open{display:none;} 1081.nav-burger[aria-expanded="true"] .icon-close{display:block;} 1082.mobile-sheet{ 1083 display:none; 1084 position:fixed; 1085 top:69px;left:0;right:0; 1086 background:var(--bg2); 1087 border-bottom:1px solid var(--border2); 1088 box-shadow:0 30px 60px rgba(0,0,0,0.6); 1089 padding:8px 24px 24px; 1090 transform:translateY(-12px); 1091 opacity:0; 1092 pointer-events:none; 1093 transition:opacity 160ms cubic-bezier(0.22,1,0.36,1), 1094 transform 160ms cubic-bezier(0.22,1,0.36,1); 1095 z-index:499; 1096 max-height:calc(100vh - 69px); 1097 overflow-y:auto; 1098} 1099.mobile-sheet.open{ 1100 opacity:1; 1101 transform:translateY(0); 1102 pointer-events:auto; 1103} 1104.ms-link{ 1105 display:flex;align-items:center;justify-content:space-between; 1106 padding:16px 4px; 1107 font-family:var(--body);font-size:15px;font-weight:500; 1108 color:var(--text);text-decoration:none; 1109 border-bottom:1px solid var(--border); 1110 transition:color 0.15s; 1111} 1112.ms-link:hover,.ms-link:focus-visible{color:var(--accent);outline:none;} 1113.ms-link::after{content:'â';font-family:var(--mono);color:var(--muted);font-size:13px;} 1114.ms-resources{border-bottom:1px solid var(--border);} 1115.ms-resources-toggle{ 1116 width:100%; 1117 display:flex;align-items:center;justify-content:space-between; 1118 padding:16px 4px; 1119 background:none;border:none;cursor:pointer; 1120 font-family:var(--body);font-size:15px;font-weight:500; 1121 color:var(--text); 1122 text-align:left; 1123 transition:color 0.15s; 1124} 1125.ms-resources-toggle:hover{color:var(--accent);} 1126.ms-resources-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;} 1127.ms-resources-chev{ 1128 width:11px;height:11px;color:var(--muted); 1129 transition:transform 0.2s,color 0.15s; 1130} 1131.ms-resources[data-expanded="true"] .ms-resources-chev{transform:rotate(180deg);color:var(--accent);} 1132.ms-resources-panel{ 1133 max-height:0;overflow:hidden; 1134 transition:max-height 0.25s cubic-bezier(0.22,1,0.36,1); 1135} 1136.ms-resources[data-expanded="true"] .ms-resources-panel{max-height:600px;} 1137.ms-resources-inner{padding:4px 0 12px;} 1138.ms-section{padding:6px 0;} 1139.ms-section + .ms-section{border-top:1px solid rgba(255,255,255,0.04);margin-top:6px;padding-top:10px;} 1140.ms-section-label{ 1141 font-family:var(--mono);font-size:10px;font-weight:600; 1142 color:var(--muted);letter-spacing:0.08em; 1143 text-transform:uppercase; 1144 padding:6px 12px 4px; 1145} 1146.ms-section-link{ 1147 display:flex;align-items:center;justify-content:space-between; 1148 padding:10px 12px; 1149 font-family:var(--body);font-size:14px;font-weight:500; 1150 color:var(--muted2);text-decoration:none; 1151 border-radius:5px; 1152 transition:color 0.15s,background 0.15s; 1153} 1154.ms-section-link:hover,.ms-section-link:focus-visible{ 1155 color:#fff;background:rgba(255,255,255,0.04);outline:none; 1156} 1157.ms-section-link::after{content:'â';font-family:var(--mono);color:var(--muted);font-size:11px;} 1158 1159/* RESPONSIVE */ 1160@media(max-width:1000px){ 1161 .features-layout{grid-template-columns:1fr;} 1162 .features-sticky{position:static;} 1163 .metrics-grid{grid-template-columns:1fr 1fr;} 1164 .how-grid{grid-template-columns:1fr;} 1165 .testi-grid{grid-template-columns:1fr 1fr;} 1166 .pricing-grid{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto;} 1167 .faq-grid{grid-template-columns:1fr;} 1168 .kpi-strip{grid-template-columns:repeat(3,1fr);} 1169 .insights-row{grid-template-columns:1fr 1fr;} 1170 .nav-links{display:none;} 1171 .nav-burger{display:inline-flex;} 1172 .mobile-sheet{display:block;} 1173 .container{padding:0 24px;} 1174} 1175@media(max-width:600px){ 1176 .hero h1{font-size:42px;} 1177 .kpi-strip{grid-template-columns:repeat(2,1fr);} 1178 .testi-grid{grid-template-columns:1fr;} 1179 .metrics-grid{grid-template-columns:1fr 1fr;} 1180 .hero-actions{flex-direction:column;align-items:stretch;} 1181 .hero-actions .btn-primary,.hero-actions .btn-secondary{justify-content:center;} 1182} 1183</style> 1184<main> 1185<!-- HERO --> 1186<section class="hero" id="hero"> 1187 <div class="container"> 1188 <div class="hero-eyebrow">Profit intelligence for Shopify</div> 1189 <h1>Know your <em>exact profit</em><br>after every cost</h1> 1190 <p class="hero-sub">The profit number Shopify won’t show you â after COGS, ad spend, chargebacks, refunds, fees, and shipping. Reconciles to your bank statement, updates with every order, and surfaces the SKUs draining margin before they show up at month-end.</p> 1191 <div class="hero-actions"> 1192 <a class="btn-primary" href="https://apps.shopify.com/neoprofit"> 1193 Add to Shopify â Free Trial 1194 <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg> 1195 </a> 1196 <a class="btn-secondary" href="#features">See all features</a> 1197 </div> 1198 <p class="hero-note">7-day free trial · All features on every plan · Cancel anytime</p> 1199 1200 <!-- ANIMATED DASHBOARD HERO --> 1201 <div class="hero-dash"> 1202 <div class="dash-chrome"> 1203 <div class="chrome-bar"> 1204 <div class="chrome-dots" id="chrome-dots"> 1205 <div class="chrome-dot" style="background:#ff5f57;
1205color:#5a0d09" data-symbol="Ã" aria-label="Close"></div> 1206 <div class="chrome-dot" style="background:#febc2e;color:#7a4a00" data-symbol="â" aria-label="Minimize"></div> 1207 <div class="chrome-dot" style="background:#28c840;color:#0d4d18" data-symbol="+" aria-label="Maximize"></div> 1208 </div> 1209 <span class="chrome-label">NeoProfit · Dashboard · Apr 1 â Apr 30, 2026</span> 1210 <span class="chrome-realnum" title="Realistic DTC numbers, not a fantasy demo">~$42k/mo · 14% net</span> 1211 <div class="chrome-badge">LIVE</div> 1212 </div> 1213 <div class="dash-inner"> 1214 <!-- KPI STRIP --> 1215 <div class="kpi-strip" id="kpi-strip"> 1216 <div class="kpi" style="--kpi-color:oklch(68% 0.22 155)"> 1217 <div class="kpi-lbl">Net Profit</div> 1218 <div class="kpi-val" id="kv-np">$0</div> 1219 <div class="kpi-delta up" id="kd-np">â² 0.0%</div> 1220 </div> 1221 <div class="kpi" style="--kpi-color:oklch(68% 0.2 290)"> 1222 <div class="kpi-lbl">Gross Profit</div> 1223 <div class="kpi-val" id="kv-gp">$0</div> 1224 <div class="kpi-delta up" id="kd-gp">â² 0.0%</div> 1225 </div> 1226 <div class="kpi" style="--kpi-color:oklch(70% 0.25 195)"> 1227 <div class="kpi-lbl">Revenue</div> 1228 <div class="kpi-val" id="kv-rev">$0</div> 1229 <div class="kpi-delta up" id="kd-rev">â² 0.0%</div> 1230 </div> 1231 <div class="kpi" style="--kpi-color:oklch(65% 0.2 25)"> 1232 <div class="kpi-lbl">COGS</div> 1233 <div class="kpi-val" id="kv-cogs">$0</div> 1234 <div class="kpi-delta dn" id="kd-cogs">â¼ 0.0%</div> 1235 </div> 1236 <div class="kpi" style="--kpi-color:oklch(68% 0.22 155)"> 1237 <div class="kpi-lbl">Net Margin</div> 1238 <div class="kpi-val" id="kv-margin">0%</div> 1239 <div class="kpi-delta up" id="kd-margin">â² 0.0%</div> 1240 </div> 1241 </div> 1242 1243 <!-- CHART --> 1244 <div class="chart-wrap"> 1245 <div class="chart-header"> 1246 <div> 1247 <div class="chart-title">Performance</div> 1248 <div class="chart-meta">Last 30 days · daily · hover for details</div> 1249 </div> 1250 <div class="chart-legend"> 1251 <div class="leg"><div class="leg-sq" style="background:oklch(68% 0.22 155);opacity:0.65;"></div>Revenue</div> 1252 <div class="leg"><div class="leg-sq" style="background:oklch(65% 0.18 260);opacity:0.65;"></div>Costs</div> 1253 <div class="leg"><div class="leg-line" style="background:oklch(76% 0.2 70);"></div>Net Profit</div> 1254 <div class="leg"><div class="leg-dash"></div>Margin %</div> 1255 </div> 1256 </div> 1257 <div class="chart-svg-wrap"> 1258 <canvas id="perf-canvas" style="width:100%;height:160px;display:block;"></canvas> 1259 <div class="chart-tooltip" id="chart-tooltip" role="tooltip" aria-hidden="true"> 1260 <div class="tt-day"></div> 1261 <div class="tt-row"><span>Revenue</span><span data-k="rev"></span></div> 1262 <div class="tt-row"><span>Costs</span><span data-k="cost"></span></div> 1263 <div class="tt-row profit"><span>Net Profit</span><span data-k="profit"></span></div> 1264 <div class="tt-row"><span>Margin</span><span data-k="margin"></span></div> 1265 </div> 1266 </div> 1267 </div> 1268 1269 <!-- AI INSIGHTS ROW --> 1270 <div class="insights-row" id="insights-row"> 1271 <div class="ins-card success" id="ins-0"> 1272 <div> 1273 <div class="ins-title">HEALTHY MARGIN â 14.0%</div> 1274 <div class="ins-body">Above the DTC median (8â12%). Unit economics are working. Reinvest in winners.</div> 1275 </div> 1276 </div> 1277 <div class="ins-card info" id="ins-1"> 1278 <div> 1279 <div class="ins-title">ROAS 2.94à â ABOVE BREAK-EVEN</div> 1280 <div class="ins-body">$14.5k ad spend returning $42.6k revenue â $2.94 back per $1, comfortably over 2Ã.</div> 1281 </div> 1282 </div> 1283 <div class="ins-card warning" id="ins-2"> 1284 <div> 1285 <div class="ins-title">2 LOSS DAYS â APR 5 + 13</div> 1286 <div class="ins-body">
1286Ad-spend spikes without matching order volume. Check audience overlap and creative fatigue.</div> 1287 </div> 1288 </div> 1289 <div class="ins-card success" id="ins-3"> 1290 <div> 1291 <div class="ins-title">BEST DAY: APR 23 â 19.2% MARGIN</div> 1292 <div class="ins-body">$600 profit on $3,120 revenue. Promo + bundle worked. Replicate the creative.</div> 1293 </div> 1294 </div> 1295 </div> 1296 </div> 1297 </div> 1298 </div> 1299 </div> 1300</section> 1301 1302<!-- TICKER --> 1303<div class="ticker"> 1304 <div class="ticker-track" id="ticker-track"> 1305 <div class="tick-item"><span class="tick-icon">â</span> 7-day free trial â no card required</div> 1306 <div class="tick-item"><span class="tick-icon">â</span> Syncs COGS from Shopify automatically</div> 1307 <div class="tick-item"><span class="tick-icon">â</span> Meta, TikTok & Google Ads â live</div> 1308 <div class="tick-item"><span class="tick-icon">â</span> Real-time profit dashboard</div> 1309 <div class="tick-item"><span class="tick-icon">â</span> Full P&L income statement</div> 1310 <div class="tick-item"><span class="tick-icon">â</span> Customer LTV & cohort analysis</div> 1311 <div class="tick-item"><span class="tick-icon">â</span> AI-powered profit insights</div> 1312 <div class="tick-item"><span class="tick-icon">â</span> All features included on every plan</div> 1313 <div class="tick-item"><span class="tick-icon">â</span> Product analytics by SKU</div> 1314 <div class="tick-item"><span class="tick-icon">â</span> Lives in your Shopify admin</div> 1315 <!-- duplicate for seamless loop --> 1316 <div class="tick-item"><span class="tick-icon">â</span> 7-day free trial â no card required</div> 1317 <div class="tick-item"><span class="tick-icon">â</span> Syncs COGS from Shopify automatically</div> 1318 <div class="tick-item"><span class="tick-icon">â</span> Meta, TikTok & Google Ads â live</div> 1319 <div class="tick-item"><span class="tick-icon">â</span> Real-time profit dashboard</div> 1320 <div class="tick-item"><span class="tick-icon">â</span> Full P&L income statement</div> 1321 <div class="tick-item"><span class="tick-icon">â</span> Customer LTV & cohort analysis</div> 1322 <div class="tick-item"><span class="tick-icon">â</span> AI-powered profit insights</div> 1323 <div class="tick-item"><span class="tick-icon">â</span> All features included on every plan</div> 1324 <div class="tick-item"><span class="tick-icon">â</span> Product analytics by SKU</div> 1325 <div class="tick-item"><span class="tick-icon">â</span> Lives in your Shopify admin</div> 1326 </div> 1327</div> 1328 1329<!-- FEATURES --> 1330<section class="features-section" id="features"> 1331 <div class="container"> 1332 <div class="features-layout"> 1333 <!-- Sticky left text --> 1334 <div class="features-sticky fade-up"> 1335 <div class="s-eyebrow">Features</div> 1336 <h2 class="s-title">Every metric<br>that matters</h2> 1337 <p class="s-sub">NeoProfit goes beyond Shopify's built-in reports to give you true profitability â all the way down to the SKU and customer level.</p> 1338 1339 <div class="feat-list"> 1340 <a class="feat-item feat-item-link" href="/features/profit-dashboard"> 1341 <div class="feat-num">01</div> 1342 <div> 1343 <div class="feat-name">Profit Dashboard</div> 1344 <div class="feat-desc">Real-time KPIs with period-over-period deltas, a 0-centered performance chart, and cost breakdown donut.</div> 1345 <div class="feat-tags"> 1346 <span class="feat-tag">net profit</span> 1347 <span class="feat-tag">margins</span> 1348 <span class="feat-tag">daily/weekly</span> 1349 </div> 1350 <span class="feat-cta">Read more <span aria-hidden="true">â</span></span> 1351 </div> 1352 </a> 1353 <a class="feat-item feat-item-link" href="/features/pl-report"> 1354 <div class="feat-num">02</div> 1355 <div> 1356 <div class="feat-name">P&L Report</div> 1357 <div class="feat-desc">Complete income statement from gross sales to net profit, with % of revenue on every line.</div> 1358 <div class="feat-tags">
1359 <span class="feat-tag">income statement</span> 1360 <span class="feat-tag">per-order avg</span> 1361 </div> 1362 <span class="feat-cta">Read more <span aria-hidden="true">â</span></span> 1363 </div> 1364 </a> 1365 <a class="feat-item feat-item-link" href="/features/product-analytics"> 1366 <div class="feat-num">03</div> 1367 <div> 1368 <div class="feat-name">Product Analytics</div> 1369 <div class="feat-desc">Rank every SKU by revenue, COGS, gross profit and margin. Spot your winners and losers instantly.</div> 1370 <div class="feat-tags"> 1371 <span class="feat-tag">by SKU</span> 1372 <span class="feat-tag">margin bars</span> 1373 </div> 1374 <span class="feat-cta">Read more <span aria-hidden="true">â</span></span> 1375 </div> 1376 </a> 1377 <a class="feat-item feat-item-link" href="/features/customer-ltv"> 1378 <div class="feat-num">04</div> 1379 <div> 1380 <div class="feat-name">Customer LTV</div> 1381 <div class="feat-desc">Cohort analysis, repurchase rate, CAC, and LTV:CAC ratio â track how customer value compounds over 6 months.</div> 1382 <div class="feat-tags"> 1383 <span class="feat-tag">cohorts</span> 1384 <span class="feat-tag">LTV:CAC</span> 1385 <span class="feat-tag">repurchase</span> 1386 </div> 1387 <span class="feat-cta">Read more <span aria-hidden="true">â</span></span> 1388 </div> 1389 </a> 1390 <a class="feat-item feat-item-link" href="/features/ai-insights"> 1391 <div class="feat-num">05</div> 1392 <div> 1393 <div class="feat-name">AI Insights</div> 1394 <div class="feat-desc">Automated flags for thin margins, loss-making days, COGS anomalies, and low ROAS â prioritised by severity.</div> 1395 <div class="feat-tags"> 1396 <span class="feat-tag">critical alerts</span> 1397 <span class="feat-tag">ROAS</span> 1398 </div> 1399 <span class="feat-cta">Read more <span aria-hidden="true">â</span></span> 1400 </div> 1401 </a> 1402 <a class="feat-item feat-item-link" href="/features/ad-integrations"> 1403 <div class="feat-num">06</div> 1404 <div> 1405 <div class="feat-name">Ad Integrations</div> 1406 <div class="feat-desc">Meta, TikTok, and Google Ads â all three channels live. Daily spend flows directly into every profit calculation, no manual export needed.</div> 1407 <div class="feat-tags"> 1408 <span class="feat-tag">Meta live</span> 1409 <span class="feat-tag">TikTok live</span> 1410 <span class="feat-tag">Google live</span> 1411 </div> 1412 <span class="feat-cta">Read more <span aria-hidden="true">â</span></span> 1413 </div> 1414 </a> 1415 </div> 1416 </div> 1417 1418 <!-- Right: stacked screen mockups --> 1419 <div class="feat-screens"> 1420 1421 <!-- P&L screen --> 1422 <div class="feat-screen visible" id="fs-pl"> 1423 <div class="feat-screen-bar"> 1424 <div class="feat-screen-bar-dots"> 1425 <span style="background:#ff5f57"></span> 1426 <span style="background:#febc2e"></span> 1427 <span style="background:#28c840"></span> 1428 </div> 1429 <span class="feat-screen-title">P&L REPORT · LAST 30 DAYS</span> 1430 </div> 1431 <div class="feat-screen-body"> 1432 <div class="pl-mini"> 1433 <div class="pl-row-mini pl-section"><span class="pl-l">// REVENUE</span></div> 1434 <div class="pl-row-mini"><span class="pl-l">Gross Sales</span><span class="pl-v">$45,820.00</span></div> 1435 <div class="pl-row-mini"><span class="pl-l">Discounts</span><span class="pl-v" style="color:var(--amber);">($1,830.00)</span></div> 1436 <div class="pl-row-mini"><span class="pl-l">Returns</span><span class="pl-v" style="color:var(--amber);">($1,410.00)</span></div> 1437 <div class="pl-row-mini"><span class="pl-l">Net Revenue</span><span class="pl-v">$42,580.00</span></div> 1438 <div class="pl-row-mini pl-section"><span class="pl-l">// COGS</span></div> 1439 <div class="pl-row-mini"><span class="pl-l">Product Cost</span><span class="pl-v" style="color:oklch(68% 0.2 290);">($19,160.00)</span></div> 1440 <div class="pl-row-mini"><span class="pl-l" style="color:#fff;font-weight:700;">Gross Profit</span><span class="pl-v" style="color:var(--accent2);">$23,420.00</span></div> 1441 <div class="pl-row-mini pl-section"><span class="pl-l">// OPEX</span></div> 1442 <div class="pl-row-mini"><span class="pl-l">Shipping</span><span class="pl-v">($1,490.00)</span></div> 1443 <div class="pl-row-mini"><span class="pl-l">Transaction Fees</span><span class="pl-v" style="color:var(--amber);">($1,236.00)</span></div> 1444 <div class="pl-row-mini"><span class="pl-l">Ad Spend (Meta + TikTok + Google)</span><span class="pl-v" style="color:oklch(65% 0.22 340);">($14,476.00)</span></div> 1445 <div class="pl-row-mini"><span class="pl-l">Chargeback Fees</span><span class="pl-v" style="color:var(--red);">($30.00)</span></div> 1446 <div class="pl-row-mini"><span class="pl-l">Overhead</span><span class="pl-v">($220.00)</span></div> 1447 <div class="pl-total-mini"><span class="t-l">Net Profit · 14.0% margin</span><span class="t-v">$5,968.00</span></div> 1448 </div> 1449 </div> 1450 </div> 1451 1452 <!-- Product Analytics screen --> 1453 <div class="feat-screen visible" id="fs-prod"> 1454 <div class="feat-screen-bar"> 1455 <div class="feat-screen-bar-dots">
1456 <span style="background:#ff5f57"></span> 1457 <span style="background:#febc2e"></span> 1458 <span style="background:#28c840"></span> 1459 </div> 1460 <span class="feat-screen-title">PRODUCT ANALYTICS · SORTED BY REVENUE</span> 1461 </div> 1462 <div class="feat-screen-body"> 1463 <table class="mt"> 1464 <thead> 1465 <tr> 1466 <th style="text-align:left;">Product</th> 1467 <th>Units</th> 1468 <th>Revenue</th> 1469 <th>COGS</th> 1470 <th>Gross Profit</th> 1471 <th style="min-width:100px;">Margin</th> 1472 </tr> 1473 </thead> 1474 <tbody> 1475 <tr> 1476 <td class="hi">Neon Snapback</td> 1477 <td style="text-align:right;">48</td> 1478 <td class="ac" style="text-align:right;">$1,824</td> 1479 <td style="text-align:right;color:oklch(68% 0.2 290);">$312</td> 1480 <td class="gr" style="text-align:right;">$1,512</td> 1481 <td> 1482 <div class="mbar"> 1483 <div class="mbar-track"><div class="mbar-fill" style="width:83%;background:var(--accent2);"></div></div> 1484 <span style="color:var(--accent2);font-weight:700;font-size:10px;">83%</span> 1485 </div> 1486 </td> 1487 </tr> 1488 <tr> 1489 <td class="hi">Street Hoodie</td> 1490 <td style="text-align:right;">31</td> 1491 <td class="ac" style="text-align:right;">$1,209</td> 1492 <td style="text-align:right;color:oklch(68% 0.2 290);">$428</td> 1493 <td class="gr" style="text-align:right;">$781</td> 1494 <td> 1495 <div class="mbar"> 1496 <div class="mbar-track"><div class="mbar-fill" style="width:65%;background:var(--accent2);"></div></div> 1497 <span style="color:var(--accent2);font-weight:700;font-size:10px;">65%</span> 1498 </div> 1499 </td> 1500 </tr> 1501 <tr> 1502 <td class="hi">Classic Tee</td> 1503 <td style="text-align:right;">14</td> 1504 <td class="ac" style="text-align:right;">$322</td> 1505 <td style="text-align:right;color:oklch(68% 0.2 290);">$258</td> 1506 <td class="re" style="text-align:right;">$64</td> 1507 <td> 1508 <div class="mbar"> 1509 <div class="mbar-track"><div class="mbar-fill" style="width:20%;background:var(--red);"></div></div> 1510 <span style="color:var(--red);font-weight:700;font-size:10px;">20%</span> 1511 </div> 1512 </td> 1513 </tr> 1514 </tbody> 1515 </table> 1516 </div> 1517 </div> 1518 1519 <!-- LTV Cohort screen --> 1520 <div class="feat-screen visible" id="fs-ltv"> 1521 <div class="feat-screen-bar"> 1522 <div class="feat-screen-bar-dots"> 1523 <span style="background:#ff5f57"></span> 1524 <span style="background:#febc2e"></span> 1525 <span style="background:#28c840"></span> 1526 </div> 1527 <span class="feat-screen-title">CUSTOMER LTV · COHORT TABLE</span> 1528 </div> 1529 <div class="feat-screen-body"> 1530 <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px;"> 1531 <div style="background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:10px 12px;"> 1532 <div style="font-family:var(--mono);font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:0.07em;margin-bottom:5px;">Avg LTV</div> 1533 <div style="font-family:var(--display);font-size:20px;font-weight:400;color:var(--accent);">$142.30</div> 1534 </div> 1535 <div style="background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:10px 12px;"> 1536 <div style="font-family:var(--mono);font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:0.07em;margin-bottom:5px;">Repurchase</div> 1537 <div style="font-family:var(--display);font-size:20px;font-weight:400;color:var(--accent2);">28.4%</div> 1538 </div> 1539 <div style="background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:10px 12px;"> 1540 <div style="font-family:var(--mono);font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:0.07em;margin-bottom:5px;">LTV:CAC</div> 1541 <div style="font-family:var(--display);font-size:20px;font-weight:400;color:var(--accent2);">4.8:1</div> 1542 </div> 1543 </div> 1544 <table class="mt" style="font-size:10px;"> 1545 <thead> 1546 <tr> 1547 <th style="text-align:left;">Cohort</th> 1548 <th>M1</th><th>M2</th><th>M3</th><th>M4</th><th>M5</th><th>M6</th> 1549 </tr> 1550 </thead> 1551 <tbody> 1552 <tr> 1553 <td class="hi" style="white-space:nowrap;">Nov 2025 <span style="color:var(--muted);font-weight:400;">(48)</span></td> 1554 <td><span class="cohort-cell-g">$62</span></td><td>
1554<span class="cohort-cell-g">$89</span></td><td><span class="cohort-cell-g">$108</span></td><td><span class="cohort-cell-g">$121</span></td><td><span class="cohort-cell-g">$134</span></td><td><span class="cohort-cell-g">$142</span></td> 1555 </tr> 1556 <tr> 1557 <td class="hi" style="white-space:nowrap;">Dec 2025 <span style="color:var(--muted);font-weight:400;">(62)</span></td> 1558 <td><span class="cohort-cell-g">$71</span></td><td><span class="cohort-cell-g">$98</span></td><td><span class="cohort-cell-g">$114</span></td><td><span class="cohort-cell-g">$129</span></td><td><span class="cohort-cell-g">$138</span></td><td class="cohort-future">â</td> 1559 </tr> 1560 <tr> 1561 <td class="hi" style="white-space:nowrap;">Jan 2026 <span style="color:var(--muted);font-weight:400;">(39)</span></td> 1562 <td><span class="cohort-cell-g">$58</span></td><td><span class="cohort-cell-g">$82</span></td><td><span class="cohort-cell-g">$97</span></td><td><span class="cohort-cell-g">$112</span></td><td class="cohort-future">â</td><td class="cohort-future">â</td> 1563 </tr> 1564 </tbody> 1565 </table> 1566 </div> 1567 </div> 1568 1569 </div> 1570 </div> 1571 </div> 1572</section> 1573 1574<!-- METRICS NUMBERS --> 1575<section class="metrics-section"> 1576 <div class="container"> 1577 <div class="s-eyebrow fade-up">Why it matters</div> 1578 <div class="metrics-grid fade-up"> 1579 <div class="metric"> 1580 <div class="metric-num"><span class="metric-accent">82</span>%</div> 1581 <div class="metric-label">of Shopify merchants don't know their true net margin after all costs</div> 1582 </div> 1583 <div class="metric"> 1584 <div class="metric-num">2<span class="metric-accent">min</span></div> 1585 <div class="metric-label">average setup time â no CSV imports, no manual data entry</div> 1586 </div> 1587 <div class="metric"> 1588 <div class="metric-num"><span class="metric-accent">100</span>%</div> 1589 <div class="metric-label">of features included on every plan â no locked features, no confusing tiers</div> 1590 </div> 1591 <div class="metric"> 1592 <div class="metric-num">7<span class="metric-accent">day</span></div> 1593 <div class="metric-label">free trial on every plan â no credit card required to start</div> 1594 </div> 1595 </div> 1596 </div> 1597</section> 1598 1599<!-- HOW IT WORKS --> 1600<section class="how-section" id="how"> 1601 <div class="container"> 1602 <div class="s-eyebrow fade-up">Setup</div> 1603 <h2 class="s-title fade-up">Up and running<br>in 2 minutes</h2> 1604 <div class="how-grid fade-up"> 1605 <div class="how-step" data-n="01"> 1606 <div class="how-n">STEP 01</div> 1607 <div class="how-title">Install from Shopify</div> 1608 <div class="how-desc">Click "Add app" and approve permissions. NeoProfit reads your COGS, orders, and inventory costs directly â no manual data entry.</div> 1609 <div class="how-detail"> 1610 <span>Connects via Shopify OAuth</span> 1611 <span>Reads COGS from inventory costs</span> 1612 <span>Syncs full order history immediately</span> 1613 </div> 1614 </div> 1615 <div class="how-step" data-n="02"> 1616 <div class="how-n">
1616STEP 02</div> 1617 <div class="how-title">Configure your costs</div> 1618 <div class="how-desc">Set your CC fee rate, shipping mode, monthly overhead. Optionally connect TikTok Ads in one OAuth click. Done in under 2 minutes.</div> 1619 <div class="how-detail"> 1620 <span>CC fee: percentage + fixed amount</span> 1621 <span>Shipping: actual or flat-rate override</span> 1622 <span>TikTok: one-click OAuth connection</span> 1623 </div> 1624 </div> 1625 <div class="how-step" data-n="03"> 1626 <div class="how-n">STEP 03</div> 1627 <div class="how-title">Know your real profit</div> 1628 <div class="how-desc">Your dashboard is live. Net profit, margins, AI insights, product performance, and customer LTV â all updated as orders come in.</div> 1629 <div class="how-detail"> 1630 <span>Real-time profit after every order</span> 1631 <span>AI flags margin issues automatically</span> 1632 <span>Compare periods side-by-side</span> 1633 </div> 1634 </div> 1635 </div> 1636 </div> 1637</section> 1638 1639<!-- TESTIMONIALS â hidden until we have real customer reviews to put 1640 here. Restore by removing the surrounding comment markers below. 1641 Faking testimonials at launch is the fastest way to lose trust if 1642 a reviewer or sharp-eyed visitor checks our App Store listing and 1643 sees zero matching reviews. 1644<section class="testi-section" id="testimonials"> 1645 <div class="container"> 1646 <div class="s-eyebrow fade-up">Early adopters</div> 1647 <h2 class="s-title fade-up">Founders making<br>smarter decisions</h2> 1648 <div class="testi-grid"> 1649 <div class="testi fade-up"> 1650 <div class="testi-stars">â â â â â </div> 1651 <p class="testi-q">I thought I was making $12k a month â NeoProfit showed me my actual profit after fees was closer to $6k. Changed how I price everything.</p> 1652 <div class="testi-stat">+$2,400/mo recovered</div> 1653 <div class="testi-author"> 1654 <div class="testi-av" style="background:linear-gradient(135deg,#3b82f6,#8b5cf6);">JK</div> 1655 <div><div class="testi-name">Jake K.</div><div class="testi-handle">apparel · shopify plus</div></div> 1656 </div> 1657 </div> 1658 <div class="testi fade-up"> 1659 <div class="testi-stars">â â â â â </div> 1660 <p class="testi-q">The product margin table is insane. Found three SKUs where we were losing money on every unit. Killed them â margins jumped 8 points overnight.</p> 1661 <div class="testi-stat">margin +8 points</div> 1662 <div class="testi-author"> 1663 <div class="testi-av" style="background:linear-gradient(135deg,oklch(68% 0.22 155),#0ea5e9);">SR</div> 1664 <div><div class="testi-name">Sarah R.</div><div class="testi-handle">beauty & wellness · 4-fig MRR</div></div> 1665 </div> 1666 </div> 1667 <div class="testi fade-up"> 1668 <div class="testi-stars">â â â â â </div> 1669 <p class="testi-q">Finally an app that pulls my TikTok ad spend without a spreadsheet. The ROAS display alone is worth 10x the subscription cost.</p> 1670 <div class="testi-stat">2 hrs/week saved</div> 1671 <div class="testi-author"> 1672 <div class="testi-av" style="background:linear-gradient(135deg,oklch(62% 0.22 340),oklch(68% 0.22 70));">ML</div> 1673 <div><div class="testi-name">Marcus L.</div><div class="testi-handle">streetwear · tiktok-first brand</div></div> 1674 </div> 1675 </div> 1676 <div class="testi fade-up"> 1677 <div class="testi-stars">â â â â â </div> 1678 <p class="testi-q">The AI insights flagged that 30% of my order days were loss-making. Turned out I was running flash sales with way too-high discounts. Huge catch.</p> 1679 <div class="testi-stat">loss days down 60%</div> 1680 <div class="testi-author"> 1681 <div class="testi-av" style="background:linear-gradient(135deg,#f59e0b,#ec4899);">PT</div> 1682 <div><div class="testi-name">Priya T.</div><div class="testi-handle">home goods · shopify</div></div> 1683 </div> 1684 </div> 1685 <div class="testi fade-up"> 1686 <div class="testi-stars">â â â â â </div> 1687 <p class="testi-q">Setup was genuinely 2 minutes. Connected TikTok Ads, set my overhead, had a full profit dashboard. No CSVs, no spreadsheets. This is how it should work.</p> 1688 <div class="testi-stat">live in 2 minutes</div> 1689 <div class="testi-author"> 1690 <div class="testi-av" style="background:linear-gradient(135deg,#10b981,#3b82f6);">DW</div> 1691 <div><div class="testi-name">Dan W.</div><div class="testi-handle">electronics accessories</div></div> 1692 </div> 1693 </div> 1694 <div class="testi fade-up"> 1695 <div class="testi-stars">â â â â â </div> 1696 <p class="testi-q">Switched from TrueProfit. NeoProfit is half the price, has the same core features, and the cohort LTV view is genuinely better. Easy decision.</p> 1697 <div class="testi-stat">switched from TrueProfit</div> 1698 <div class="testi-author"> 1699 <div class="testi-av" style="background:linear-gradient(135deg,#8b5cf6,#ec4899);">AM</div> 1700 <div><div class="testi-name">Aiden M.</div><div class="testi-handle">pet supplies · $30k/mo GMV</div></div> 1701 </div> 1702 </div> 1703 </div> 1704 </div> 1705</section> 1706--> 1707 1708<!-- PRICING --> 1709<section class="pricing-section" id="pricing"> 1710 <div class="container"> 1711 <div class="pricing-lede fade-up"> 1712 <div> 1713 <div class="s-eyebrow" style="margin-bottom:16px;">
1713Pricing</div> 1714 <h2 class="s-title">Full profit tools.<br>Every plan.</h2> 1715 </div> 1716 <p class="s-sub" style="max-width:420px;margin-top:8px;"> 1717 All plans include net profit tracking, P&L, product analytics, LTV, COGS, ad spend tracking, shipping, fees, refunds, and taxes. 1718 No locked features. No confusing tiers. Pay only as your store grows. 1719 </p> 1720 </div> 1721 1722 <!-- What's included on every plan --> 1723 <div class="pricing-features-bar fade-up"> 1724 <span class="pf-pill">â Net profit dashboard</span> 1725 <span class="pf-pill">â P&L report</span> 1726 <span class="pf-pill">â Product analytics</span> 1727 <span class="pf-pill">â Customer LTV</span> 1728 <span class="pf-pill">â COGS tracking</span> 1729 <span class="pf-pill">â Ad spend integration</span> 1730 <span class="pf-pill">â Shipping & fees</span> 1731 <span class="pf-pill">â Refunds & taxes</span> 1732 <span class="pf-pill">â AI profit insights</span> 1733 </div> 1734 1735 <div class="pricing-grid fade-up" style="margin-top:20px;"> 1736 <!-- STARTER --> 1737 <div class="price-card"> 1738 <div class="price-head"> 1739 <div class="price-tier">STARTER</div> 1740 <div style="display:inline-flex;align-items:center;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:0.07em;text-transform:uppercase;padding:3px 10px;border-radius:3px;margin-bottom:10px;color:oklch(74% 0.2 155);background:rgba(104,204,153,0.08);border:1px solid rgba(104,204,153,0.2);">50% off · early adopter</div> 1741 <div class="price-amount"> 1742 <span style="font-family:var(--mono);font-size:14px;color:#5a5a72;text-decoration:line-through;vertical-align:middle;margin-right:4px;">$19</span><span class="price-main">$9.50</span> 1743 <span class="price-per">/mo</span> 1744 </div> 1745 <div class="price-limit">Up to 300 orders / month</div> 1746 <div class="price-overage">then $0.10 / order</div> 1747 <div class="price-trial">// 7-day free trial included</div> 1748 </div> 1749 <div class="price-body"> 1750 <div class="price-desc">Everything you need to track real profit from day one.</div> 1751 <div class="pf"><span class="pf-c">â</span> Full profit dashboard</div> 1752 <div class="pf"><span class="pf-c">â</span> P&L income statement</div> 1753 <div class="pf"><span class="pf-c">â</span> Product & funnel analytics</div> 1754 <div class="pf"><span class="pf-c">â</span> Customer LTV & cohorts</div> 1755 <div class="pf"><span class="pf-c">â</span> COGS, shipping & fee tracking</div> 1756 <div class="pf"><span class="pf-c">â</span> Refunds & tax treatment</div> 1757 <div class="pf"><span class="pf-c">â</span> Meta, TikTok & Google Ads</div> 1758 <div class="pf"><span class="pf-c">â</span> AI-powered profit insights</div> 1759 </div> 1760 <div class="price-foot"> 1761 <a class="btn-plan btn-plan-outline" href="https://apps.shopify.com/neoprofit">Start free trial â</a> 1762 </div> 1763 </div> 1764 1765 <!-- GROWTH (featured) --> 1766 <div class="price-card featured"> 1767 <div class="price-head" style="border-bottom-color:rgba(255,255,255,0.1);"> 1768 <div class="price-tier">GROWTH <span class="price-tier-label">MOST POPULAR</span></div> 1769 <div style="display:inline-flex;align-items:center;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:0.07em;text-transform:uppercase;padding:3px 10px;border-radius:3px;margin-bottom:10px;color:oklch(74% 0.2 155);background:rgba(104,204,153,0.08);border:1px solid rgba(104,204,153,0.2);">50% off · early adopter</div> 1770 <div class="price-amount"> 1771 <span style="font-family:var(--mono);font-size:14px;color:#5a5a72;text-decoration:line-through;vertical-align:middle;margin-right:4px;">$49</span><span class="price-main">$24.50</span> 1772 <span class="price-per">/mo</span> 1773 </div> 1774 <div class="price-limit">Up to 1,500 orders / month</div> 1775 <div class="price-overage">then $0.06 / order</div> 1776 <div class="price-trial">// 7-day free trial included</div> 1777 </div> 1778 <div class="price-body"> 1779 <div class="price-desc">More volume, lower overage rate â same complete feature set.</div> 1780 <div class="pf"><span class="pf-c">â</span> Everything in Starter</div> 1781 <div class="pf"><span class="pf-c">â</span> 5à more included orders</div> 1782 <div class="pf"><span class="pf-c">â</span> Lower overage ($0.06 vs $0.10)</div> 1783 <div class="pf"><span class="pf-c">â</span> Priority email support</div> 1784 </div> 1785 <div class="price-foot"> 1786 <a class="btn-plan btn-plan-accent" href="https://apps.shopify.com/neoprofit">Start free trial â</a> 1787 </div> 1788 </div> 1789 1790 <!-- SCALE --> 1791 <div class="price-card"> 1792 <div class="price-head"> 1793 <div class="price-tier">SCALE</div> 1794 <div style="display:inline-flex;align-items:center;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:0.07em;text-transform:uppercase;padding:3px 10px;border-radius:3px;margin-bottom:10px;color:oklch(74% 0.2 155);background:rgba(104,204,153,0.08);border:1px solid rgba(104,204,153,0.2);">50% off · early adopter</div> 1795 <div class="price-amount">
1796 <span style="font-family:var(--mono);font-size:14px;color:#5a5a72;text-decoration:line-through;vertical-align:middle;margin-right:4px;">$99</span><span class="price-main">$49.50</span> 1797 <span class="price-per">/mo</span> 1798 </div> 1799 <div class="price-limit">Up to 5,000 orders / month</div> 1800 <div class="price-overage">then $0.03 / order</div> 1801 <div class="price-trial">// 7-day free trial included</div> 1802 </div> 1803 <div class="price-body"> 1804 <div class="price-desc">High-volume stores â best unit economics and lowest overage rate.</div> 1805 <div class="pf"><span class="pf-c">â</span> Everything in Growth</div> 1806 <div class="pf"><span class="pf-c">â</span> 3à more included orders</div> 1807 <div class="pf"><span class="pf-c">â</span> Lowest overage ($0.03)</div> 1808 <div class="pf"><span class="pf-c">â</span> Dedicated support channel</div> 1809 <div class="pf"><span class="pf-c">â</span> Early access to new features</div> 1810 </div> 1811 <div class="price-foot"> 1812 <a class="btn-plan btn-plan-outline" href="https://apps.shopify.com/neoprofit">Start free trial â</a> 1813 </div> 1814 </div> 1815 </div> 1816 1817 <!-- Enterprise bar --> 1818 <div class="price-enterprise fade-up"> 1819 <div> 1820 <div class="price-tier" style="margin-bottom:6px;">ENTERPRISE</div> 1821 <div style="font-size:14px;font-weight:500;color:#fff;margin-bottom:4px;">10,000â20,000+ orders / month</div> 1822 <div style="font-size:12px;color:var(--muted2);">Custom volume pricing · Priority support · Multi-store & agency management · Dedicated onboarding</div> 1823 </div> 1824 <a class="btn-plan btn-plan-outline" style="width:auto;padding:11px 28px;white-space:nowrap;" href="mailto:[email protected]">Contact us â</a> 1825 </div> 1826 1827 <div class="pricing-note">All prices in USD · 7-day free trial on every plan · Cancel anytime</div> 1828 </div> 1829</section> 1830 1831<!-- FAQ --> 1832<section class="faq-section"> 1833 <div class="container"> 1834 <div class="s-eyebrow fade-up">FAQ</div> 1835 <h2 class="s-title fade-up">Common questions</h2> 1836 <div class="faq-grid fade-up"> 1837 <div class="faq-item"> 1838 <div class="faq-q">How does NeoProfit get my cost data?</div> 1839 <div class="faq-a">NeoProfit reads COGS directly from Shopify's inventory item unit costs â no manual entry needed. You can also set per-variant overrides from the settings page for more precise control.</div> 1840 </div> 1841 <div class="faq-item"> 1842 <div class="faq-q">Does it integrate with Meta, TikTok, and Google Ads?</div> 1843 <div class="faq-a">Yes â all three are live. Connect Meta, TikTok, or Google Ads in one OAuth click each. Daily ad spend is automatically pulled into your profit calculations and allocated across orders.</div> 1844 </div> 1845 <div class="faq-item"> 1846 <div class="faq-q">What's included in the free trial?</div> 1847 <div class="faq-a">Full access to every feature in your chosen plan for 7 days. No credit card required. Cancel before the trial ends and you won't be charged a cent.</div> 1848 </div> 1849 <div class="faq-item"> 1850 <div class="faq-q">How does the order limit work?</div> 1851 <div class="faq-a">Each plan includes a set number of orders per rolling 30-day window. If you go over, a small per-order overage applies ($0.10 on Starter, $0.06 on Growth, $0.03 on Scale). You're never cut off â you just pay for what you use.</div> 1852 </div> 1853 <div class="faq-item"> 1854 <div class="faq-q">How is this different from Shopify Analytics?</div> 1855 <div class="faq-a">Shopify shows revenue. NeoProfit shows profit â after COGS, shipping, transaction fees, ad spend, and overhead. That's the number that tells you if your business is actually working.</div> 1856 </div> 1857 <div class="faq-item"> 1858 <div class="faq-q">Are all features really available on every plan?</div> 1859 <div class="faq-a">Yes â every plan includes the full profit dashboard, P&L report, product analytics, customer LTV, COGS tracking, ad spend, refunds, tax treatment, and AI insights. The only difference between plans is how many orders are included per month.</div> 1860 </div> 1861 </div> 1862 </div> 1863</section> 1864 1865<!-- CTA --> 1866<section class="cta-section"> 1867 <div class="cta-grid-bg"></div> 1868 <div class="container"> 1869 <div class="s-eyebrow" style="justify-content:center;margin-bottom:28px;">Get started</div> 1870 <h2>Stop guessing.<br>Know your profit.</h2> 1871 <p>7-day free trial. All features included. 2 minute set up.</p> 1872 <div class="cta-actions"> 1873 <a class="btn-primary" href="https://apps.shopify.com/neoprofit" style="font-size:15px;padding:16px 32px;"> 1874 Add to Shopify â Free 1875 <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg> 1876 </a> 1877 <a class="btn-secondary" href="#pricing" style="font-size:15px;padding:16px 24px;">View pricing</a> 1878 </div> 1879 </div> 1880</section> 1881 1882<!-- FOOTER --> 1883 1884 1885<!-- TWEAKS PANEL --> 1886<div id="tweaks-panel" style="font-family:var(--body);"> 1887 <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;"> 1888 <span style="font-family:var(--display);font-size:14px;font-weight:400;color:#fff;">Tweaks</span> 1889 <button onclick="document.getElementById('tweaks-panel').style.display='none';window.parent.postMessage({type:'__edit_mode_dismissed'},'*')" style="background:none;border:none;color:var(--muted2);cursor:pointer;font-size:18px;">Ã</button> 1890 </div> 1891 <div> 1892 <span class="tw-label">Hero headline</span> 1893 <select class="tw-select" onchange="setHeadline(this.value)"> 1894 <option value="0">Know your exact profit after every cost</option> 1895 <option value="1">Stop guessing your margin</option> 1896 <option value="2">Real profit. Real time. One dashboard.</option> 1897 </select> 1898 </div> 1899 <div> 1900 <span class="tw-label">Accent color</span> 1901 <div class="tw-swatches"> 1902 <button class="tw-swatch" style="background:oklch(70% 0.25 195);" onclick="setAccent('oklch(70% 0.25 195)')"></button> 1903 <button class="tw-swatch" style="background:oklch(70% 0.25 260);" onclick="setAccent('oklch(70% 0.25 260)')"></button> 1904 <button class="tw-swatch" style="background:oklch(74% 0.22 155);" onclick="setAccent('oklch(74% 0.22 155)')"></button> 1905 <button class="tw-swatch" style="background:oklch(70% 0.22 300);" onclick="setAccent('oklch(70% 0.22 300)')"></button> 1906 </div> 1907 </div> 1908 <div> 1909 <span class="tw-label">Chart style</span> 1910 <select class="tw-select" id="tw-chart-style" onchange="redrawChart()"> 1911 <option value="bars">Revenue + Cost bars + Profit line</option> 1912 <option value="area">Area chart</option> 1913 </select> 1914 </div> 1915</div> 1916</main> 1917<script type="text/marketing-script"> 1918// ââ SCROLL FADE-IN ââ 1919const io = new IntersectionObserver(entries=>{
1920 entries.forEach(e=>{if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target);}}); 1921},{threshold:0.12}); 1922document.querySelectorAll('.fade-up').forEach(el=>io.observe(el)); 1923 1924// ââ KPI COUNT-UP ââ 1925// Numbers reflect industry-realistic DTC economics: 14% net margin, 1926// 55% gross margin, 45% COGS â the kind of math an actual $42k/mo 1927// store would see. The earlier 90.5% margin was a fantasy and made 1928// the mock look unserious. 1929const kpis=[ 1930 {id:'kv-np', target:5968, prefix:'$', suffix:'', delta:'kd-np', dv:'+28.7%', up:true}, 1931 {id:'kv-gp', target:23420, prefix:'$', suffix:'', delta:'kd-gp', dv:'+21.2%', up:true}, 1932 {id:'kv-rev', target:42580, prefix:'$', suffix:'', delta:'kd-rev', dv:'+18.4%', up:true}, 1933 {id:'kv-cogs',target:19160, prefix:'$', suffix:'', delta:'kd-cogs',dv:'+11.2%', up:false}, 1934 {id:'kv-margin',target:14.0,prefix:'', suffix:'%', delta:'kd-margin',dv:'+2.1pt', up:true}, 1935]; 1936 1937function animateKpi(k,delay){ 1938 setTimeout(()=>{ 1939 const el=document.getElementById(k.id); 1940 const deltaEl=document.getElementById(k.delta); 1941 const dur=1200; 1942 let start=null; 1943 function step(now){ 1944 if(start===null) start=now; 1945 const t=Math.min((now-start)/dur,1); 1946 const ease=1-Math.pow(1-t,4); 1947 const val=k.target*ease; 1948 el.textContent=k.prefix+(k.suffix==='%'?val.toFixed(1):Math.round(val).toLocaleString())+k.suffix; 1949 if(t<1){ 1950 requestAnimationFrame(step); 1951 } else { 1952 el.textContent=k.prefix+(k.suffix==='%'?k.target.toFixed(1):k.target.toLocaleString())+k.suffix; 1953 } 1954 } 1955 requestAnimationFrame(step); 1956 el.closest('.kpi').classList.add('animate'); 1957 setTimeout(()=>{ deltaEl.textContent=(k.up?'â² ':'â¼ ')+k.dv; },dur*0.8); 1958 // hard fallback â guarantee final value is shown 1959 setTimeout(()=>{ 1960 el.textContent=k.prefix+(k.suffix==='%'?k.target.toFixed(1):k.target.toLocaleString())+k.suffix; 1961 deltaEl.textContent=(k.up?'â² ':'â¼ ')+k.dv; 1962 },dur+400); 1963 },delay); 1964} 1965 1966// ââ CHART ââ 1967// Real-world ecom data: weekday rhythm, a promo spike day, two loss 1968// days where ad spend outran revenue, and an overall improving trend 1969// â not a smooth linear up-and-to-the-right (which always reads as 1970// fake). 19 data points span April 1-30. 1971const chartDays = [ 1972 'Apr 1','Apr 3','Apr 5','Apr 7','Apr 9','Apr 11','Apr 13','Apr 15', 1973 'Apr 17','Apr 19','Apr 21','Apr 23','Apr 24','Apr 25','Apr 26','Apr 27', 1974 'Apr 28','Apr 29','Apr 30' 1975]; 1976// Daily revenue ($), avg ~$2.1k â matches the $42k/mo period totals 1977const revData = [1820,2150,1480,2240,2380,1960,1620,2080,2210,1880,2440,3120,2150,1990,2310,2520,2210,2580,2740]; 1978// Daily total costs (COGS + shipping + fees + ads + overhead) 1979const costData = [1580,1810,1620,1880,1990,1680,1690,1750,1870,1610,2010,2520,1810,1700,1920,2080,1830,2130,2260]; 1980// Net profit per day (revenue â costs) â note: Apr 5 + Apr 13 are 1981// loss days because ad spend overshot 1982const profitData= revData.map((r,i)=>r-costData[i]); 1983// Margin % per day â oscillates roughly between -9% and 19% 1984const marginData= revData.map((r,i)=>((r-costData[i])/r*100)); 1985 1986let chartDrawn=false; 1987let hoverIdx=-1; // active data index when user hovers chart (-1 = none) 1988let chartGeom=null; // cached coords so the hover handler can hit-test 1989function drawChart(animated=true){ 1990 const canvas=document.getElementById('perf-canvas'); 1991 if(!canvas)return; 1992 const dpr=window.devicePixelRatio||1; 1993 const W=canvas.parentElement.clientWidth; 1994 const H=160; 1995 canvas.width=W*dpr; 1996 canvas.height=H*dpr; 1997 canvas.style.width=W+'px'; 1998 canvas.style.height=H+'px'; 1999 const ctx=canvas.getContext('2d'); 2000 ctx.scale(dpr,dpr); 2001 2002 const PAD={top:12,right:40,bottom:28,left:44}; 2003 const PW=W-PAD.left-PAD.right; 2004 const PH=H-PAD.top-PAD.bottom; 2005 const cx=W=>PAD.left+W; 2006 const n=revData.length; 2007 2008 // Axis range: symmetric around 0
2009 const allVals=[...revData,...costData.map(v=>-v),...profitData]; 2010 const absMax=Math.max(...allVals.map(Math.abs))*1.15; 2011 // y=0 is at PH/2 within plot area 2012 const yZero=PAD.top+PH/2; 2013 const yScale=v=>(PH/2)*(v/absMax); // pixels per unit 2014 2015 const xPos=i=>PAD.left+((i+0.5)/n)*PW; 2016 const barW=Math.max(4,Math.min(16,(PW/n)*0.55)); 2017 2018 const style=document.getElementById('tw-chart-style')?.value||'bars'; 2019 const progress=animated?{v:0}:{v:1}; 2020 2021 function drawFrame(){ 2022 ctx.clearRect(0,0,W,H); 2023 2024 // Grid lines 2025 ctx.strokeStyle='rgba(255,255,255,0.04)'; 2026 ctx.lineWidth=1; 2027 [-1,-0.5,0,0.5,1].forEach(f=>{ 2028 const y=yZero-f*(PH/2); 2029 ctx.beginPath();ctx.moveTo(PAD.left,y);ctx.lineTo(W-PAD.right,y);ctx.stroke(); 2030 }); 2031 2032 // Y-axis labels 2033 ctx.font=\`10px 'JetBrains Mono', monospace\`; 2034 ctx.fillStyle='rgba(255,255,255,0.25)'; 2035 ctx.textAlign='right'; 2036 [absMax,absMax/2,0,-absMax/2,-absMax].forEach(v=>{ 2037 const y=yZero-yScale(v); 2038 const lbl=v===0?'0':Math.abs(v)>=1000?'$'+(Math.abs(v)/1000).toFixed(0)+'k':'$'+Math.abs(v).toFixed(0); 2039 ctx.fillText(lbl,PAD.left-6,y+3.5); 2040 }); 2041 2042 // Zero line 2043 ctx.strokeStyle='rgba(255,255,255,0.15)'; 2044 ctx.lineWidth=1; 2045 ctx.setLineDash([]); 2046 ctx.beginPath();ctx.moveTo(PAD.left,yZero);ctx.lineTo(W-PAD.right,yZero);ctx.stroke(); 2047 2048 const p=progress.v; 2049 const drawn=Math.ceil(p*n); 2050 2051 if(style==='bars'||style===undefined){ 2052 // Revenue bars (up, green) 2053 revData.slice(0,drawn).forEach((v,i)=>{ 2054 const barH=yScale(v)*p; 2055 const x=xPos(i)-barW/2; 2056 ctx.fillStyle='oklch(68% 0.22 155)'; 2057 ctx.globalAlpha=0.6; 2058 ctx.beginPath(); 2059 const rr=2; 2060 ctx.roundRect(x,yZero-barH,barW,barH,rr); 2061 ctx.fill(); 2062 }); 2063 // Cost bars (down, blue) 2064 costData.slice(0,drawn).forEach((v,i)=>{ 2065 const barH=yScale(v)*p; 2066 const x=xPos(i)-barW/2; 2067 ctx.fillStyle='oklch(65% 0.18 260)'; 2068 ctx.globalAlpha=0.6; 2069 ctx.beginPath(); 2070 ctx.roundRect(x,yZero,barW,barH,[0,0,2,2]); 2071 ctx.fill(); 2072 }); 2073 } else { 2074 // Area style 2075 ctx.globalAlpha=0.15; 2076 ctx.fillStyle='oklch(68% 0.22 155)'; 2077 ctx.beginPath(); 2078 ctx.moveTo(xPos(0),yZero); 2079 revData.slice(0,drawn).forEach((v,i)=>ctx.lineTo(xPos(i),yZero-yScale(v)*p)); 2080 ctx.lineTo(xPos(drawn-1),yZero);ctx.closePath();ctx.fill(); 2081 } 2082 2083 ctx.globalAlpha=1; 2084 2085 // Profit line (amber/yellow) 2086 if(drawn>1){ 2087 ctx.strokeStyle='oklch(76% 0.2 70)'; 2088 ctx.lineWidth=2.5; 2089 ctx.lineJoin='round'; 2090 ctx.lineCap='round'; 2091 ctx.setLineDash([]); 2092 ctx.beginPath(); 2093 profitData.slice(0,drawn).forEach((v,i)=>{ 2094 const x=xPos(i),y=yZero-yScale(v*p); 2095 i===0?ctx.moveTo(x,y):ctx.lineTo(x,y); 2096 }); 2097 ctx.stroke(); 2098 // Dot at latest 2099 const lx=xPos(drawn-1),ly=yZero-yScale(profitData[drawn-1]*p); 2100 ctx.fillStyle='oklch(76% 0.2 70)'; 2101 ctx.beginPath();ctx.arc(lx,ly,3.5,0,Math.PI*2);ctx.fill(); 2102 } 2103 2104 // Margin % line (dashed amber-orange) 2105 if(drawn>1){ 2106 const mMax=100; 2107 ctx.strokeStyle='oklch(76% 0.2 50)'; 2108 ctx.lineWidth=1.8; 2109 ctx.setLineDash([5,3]); 2110 ctx.beginPath(); 2111 marginData.slice(0,drawn).forEach((v,i)=>{ 2112 const x=xPos(i); 2113 const y=yZero-((v/mMax)*(PH/2))*p; 2114 i===0?ctx.moveTo(x,y):ctx.lineTo(x,y); 2115 }); 2116 ctx.stroke(); 2117 ctx.setLineDash([]); 2118 } 2119 2120 // X labels (sparse) 2121 ctx.fillStyle='rgba(255,255,255,0.25)'; 2122 ctx.font=\`9px 'JetBrains Mono', monospace\`; 2123 ctx.textAlign='center'; 2124 [0,3,6,9,12,15,18].forEach(i=>{ 2125 if(i<n) ctx.fillText(chartDays[i],xPos(i),H-5); 2126 }); 2127 2128 // Crosshair + highlighted point when hovered 2129 if(!animated && hoverIdx>=0 && hoverIdx<n){ 2130 const hx=xPos(hoverIdx); 2131 ctx.strokeStyle='rgba(255,255,255,0.18)'; 2132 ctx.lineWidth=1; 2133 ctx.setLineDash([3,3]); 2134 ctx.beginPath();ctx.moveTo(hx,PAD.top);ctx.lineTo(hx,H-PAD.bottom);ctx.stroke(); 2135 ctx.setLineDash([]); 2136 // Glow ring on the profit point 2137 const hy=yZero-yScale(profitData[hoverIdx]); 2138 ctx.fillStyle='oklch(76% 0.2 70)'; 2139 ctx.beginPath();ctx.arc(hx,hy,5,0,Math.PI*2);ctx.fill(); 2140 ctx.strokeStyle='rgba(252,200,80,0.35)'; 2141 ctx.lineWidth=2; 2142 ctx.beginPath();ctx.arc(hx,hy,9,0,Math.PI*2);ctx.stroke(); 2143 } 2144 2145 if(animated && progress.v<1){ 2146 progress.v=Math.min(1,progress.v+0.04); 2147 requestAnimationFrame(drawFrame); 2148 } 2149 } 2150 2151 // Cache geometry for hover hit-testing 2152 chartGeom={xPos,PAD,PW,n,W,H}; 2153 2154 drawFrame(); 2155} 2156 2157// ââ INIT ON LOAD ââ 2158function initDash(){ 2159 // Set final values immediately so they're never stuck at $0 2160 kpis.forEach(k=>{ 2161 const el=document.getElementById(k.id); 2162 const deltaEl=document.getElementById(k.delta); 2163 if(el) el.textContent=k.prefix+(k.suffix==='%'?k.target.toFixed(1):k.target.toLocaleStr
2163ing())+k.suffix; 2164 if(deltaEl) deltaEl.textContent=(k.up?'â² ':'â¼ ')+k.dv; 2165 if(el) el.closest('.kpi')?.classList.add('animate'); 2166 }); 2167 // Then animate count-up on top 2168 kpis.forEach((k,i)=>animateKpi(k,200+i*150)); 2169 setTimeout(()=>{drawChart(true); chartDrawn=true;},400); 2170 [0,1,2,3].forEach(i=>{ 2171 setTimeout(()=>document.getElementById('ins-'+i)?.classList.add('show'),1600+i*180); 2172 }); 2173} 2174if(document.readyState==='complete'||document.readyState==='interactive'){ 2175 initDash(); 2176} else { 2177 document.addEventListener('DOMContentLoaded', initDash); 2178} 2179 2180// Resize chart 2181window.addEventListener('resize',()=>{if(chartDrawn)drawChart(false);},{passive:true}); 2182 2183function redrawChart(){drawChart(false);} 2184 2185// ââ HOVER TOOLTIP (chart) ââ 2186(function(){ 2187 const canvas=document.getElementById('perf-canvas'); 2188 const tip=document.getElementById('chart-tooltip'); 2189 if(!canvas||!tip)return; 2190 const fmt$=v=>(v<0?'â$':'$')+Math.abs(Math.round(v)).toLocaleString(); 2191 function findIdx(clientX){ 2192 if(!chartGeom)return -1; 2193 const rect=canvas.getBoundingClientRect(); 2194 const x=clientX-rect.left; 2195 // canvas internal width is rect.width (DPR-scaled internally but 2196 // logical pixels match), and chartGeom.W was captured at draw time. 2197 // Re-derive nearest data index by mapping x â index. 2198 const PW=chartGeom.PW, PAD=chartGeom.PAD, n=chartGeom.n; 2199 const localX=x-PAD.left; 2200 if(localX<0||localX>PW) return -1; 2201 return Math.max(0,Math.min(n-1,Math.round((localX/PW)*n - 0.5))); 2202 } 2203 function showAt(idx,clientX){ 2204 const rev=revData[idx], cost=costData[idx], prof=profitData[idx], mar=marginData[idx]; 2205 tip.querySelector('.tt-day').textContent=chartDays[idx]; 2206 tip.querySelector('[data-k="rev"]').textContent=fmt$(rev); 2207 tip.querySelector('[data-k="cost"]').textContent=fmt$(cost); 2208 const profRow=tip.querySelector('[data-k="profit"]').parentElement; 2209 profRow.classList.toggle('loss',prof<0); 2210 tip.querySelector('[data-k="profit"]').textContent=fmt$(prof); 2211 tip.querySelector('[data-k="margin"]').textContent=mar.toFixed(1)+'%'; 2212 // Position the tooltip near the cursor but inside the chart bounds 2213 const rect=canvas.getBoundingClientRect(); 2214 const tipW=tip.offsetWidth; 2215 let left=clientX-rect.left+12; 2216 if(left+tipW>rect.width-8) left=clientX-rect.left-tipW-12; 2217 tip.style.left=Math.max(8,left)+'px'; 2218 tip.classList.add('show'); 2219 tip.setAttribute('aria-hidden','false'); 2220 } 2221 function hide(){ 2222 hoverIdx=-1; 2223 tip.classList.remove('show'); 2224 tip.setAttribute('aria-hidden','true'); 2225 if(chartDrawn) drawChart(false); 2226 } 2227 canvas.addEventListener('mousemove',e=>{ 2228 const idx=findIdx(e.clientX); 2229 if(idx<0){hide();return;} 2230 if(idx!==hoverIdx){ 2231 hoverIdx=idx; 2232 if(chartDrawn) drawChart(false); 2233 } 2234 showAt(idx,e.clientX); 2235 }); 2236 canvas.addEventListener('mouseleave',hide); 2237 // Touch â show the latest point on tap for mobile users 2238 canvas.addEventListener('touchstart',e=>{ 2239 if(!e.touches[0])return; 2240 const idx=findIdx(e.touches[0].clientX); 2241 if(idx>=0){hoverIdx=idx;if(chartDrawn)drawChart(false);showAt(idx,e.touches[0].clientX);} 2242 },{passive:true}); 2243})(); 2244 2245// ââ CHROME DOT INTERACTION ââ 2246// Hover already revealed via CSS (data-symbol). Click â ripple animation 2247// + brief message via the chrome label. Pure cosmetic but makes the 2248// window-mockup feel alive instead of static decoration. 2249(function(){ 2250 const dots=document.getElementById('chrome-dots'); 2251 if(!dots)return; 2252 const label=document.querySelector('.chrome-label'); 2253 const originalLabel=label?label.textContent:''; 2254 const messages={'Ã':'just kidding â stay a while','â':'minimize? this is the demo','+':'already maxed â try the real app'}; 2255 dots.querySelectorAll('.chrome-dot').forEach(dot=>{ 2256 dot.addEventListener('click',()=>{ 2257 const sym=dot.getAttribute('data-symbol'); 2258 dot.classList.remove('ripple'); 2259 // restart animation 2260 void dot.offsetWidth; 2261 dot.classList.add('ripple'); 2262 if(label && messages[sym]){ 2263 label.textContent=messages[sym]; 2264 label.style.transition='color 0.2s'; 2265 label.style.color='var(--accent)'; 2266 clearTimeout(dots._labelTimer); 2267 dots._labelTimer=setTimeout(()=>{ 2268 label.textContent=originalLabel; 2269 label.style.color=''; 2270 },1600); 2271 } 2272 }); 2273 dot.addEventListener('animationend',()=>dot.classList.remove('ripple')); 2274 }); 2275})(); 2276 2277// ââ TWEAKS ââ 2278window.addEventListener('message',e=>{ 2279 if(e.data?.type==='__activate_edit_mode') document.getElementById('tweaks-panel').style.display='flex'; 2280 if(e.data?.type==='__deactivate_edit_mode') document.getElementById('tweaks-panel').style.display='none'; 2281}); 2282window.parent.postMessage({type:'__edit_mode_available'},'*'); 2283 2284const headlines=[ 2285 'Know your <em>exact profit</em><br>after every cost', 2286 'Stop guessing<br>your <em>margin</em>', 2287 'Real profit.<br><em>Real time.</em> One dashboard.', 2288]; 2289function setHeadline(i){document.querySelector('.hero h1').innerHTML=headlines[i];} 2290function setAccent(c){document.documentElement.style.setProperty('--accent',c);} 2291<\/script>`,r="/",o="NeoProfit â Real Profit Intelligence for Shopify",d="Shopify shows revenue. NeoProfit shows what you actually keep. Real net profit tracking after COGS, shipping, fees, ad spend, refunds, and chargebacks. 7-day free trial.",l="website",c="https://neoprofit.app/og-default.png",p=[{"@context":"https://schema.org","@type":"SoftwareApplication",name:"NeoProfit",description:"Real profit intelligence for Shopify stores. Net profit after COGS, shipping, transaction fees, ad spend, refunds, and chargebacks.",url:"https://neoprofit.app/",applicationCategory:"BusinessApplication",applicationSubCategory:"Analytics",operatingSystem:"Web",offers:{"@type":"AggregateOffer",priceCurrency:"USD",lowPrice:"19",highPrice:"99",offerCount:3,offers:[{"@type":"Offer",name:"Starter",price:"19",priceCurrency:"USD",description:"Up to 300 orders / month"},{"@type":"Offer",name:"Growth",price:"49",priceCurrency:"USD",description:"Up to 1,500 orders / month"},{"@type":"Offer",name:"Scale",price:"99",priceCurrency:"USD",description:"Up to 5,000 orders / month"}]},publisher:{"@type":"Organization",name:"NeoProfit",url:"https://neoprofit.app/"}},{"@context":"https://schema.org","@type":"FAQPage",mainEntity:[{"@type":"Question",name:"How does
2291NeoProfit get my cost data?",acceptedAnswer:{"@type":"Answer",text:"NeoProfit reads COGS directly from Shopify's inventory item unit costs â no manual entry needed. You can also set per-variant overrides from the settings page for more precise control."}},{"@type":"Question",name:"Does it integrate with Meta, TikTok, and Google Ads?",acceptedAnswer:{"@type":"Answer",text:"Yes â all three are live. Connect Meta, TikTok, or Google Ads in one OAuth click each. Daily ad spend is automatically pulled into your profit calculations and allocated across orders."}},{"@type":"Question",name:"What's included in the free trial?",acceptedAnswer:{"@type":"Answer",text:"Full access to every feature in your chosen plan for 7 days. No credit card required. Cancel before the trial ends and you won't be charged a cent."}},{"@type":"Question",name:"How does the order limit work?",acceptedAnswer:{"@type":"Answer",text:"Each plan includes a set number of orders per rolling 30-day window. If you go over, a small per-order overage applies ($0.10 on Starter, $0.06 on Growth, $0.03 on Scale). You're never cut off â you just pay for what you use."}},{"@type":"Question",name:"How is this different from Shopify Analytics?",acceptedAnswer:{"@type":"Answer",text:"Shopify shows revenue. NeoProfit shows profit â after COGS, shipping, transaction fees, ad spend, and overhead. That's the number that tells you if your business is actually working."}},{"@type":"Question",name:"Are all features really available on every plan?",acceptedAnswer:{"@type":"Answer",text:"Yes â every plan includes the full profit dashboard, P&L report, product analytics, customer LTV, COGS tracking, ad spend, refunds, tax treatment, and AI insights. The only difference between plans is how many orders are included per month."}}]}],f={path:r,title:o,description:d,ogType:l,image:c,jsonLd:p},u=a,b=()=>i(f);function y(){return n.jsx(e,{children:n.jsx(t,{html:s})})}export{y as default,u as links,b as meta};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.