1<!DOCTYPE html> 2<html lang="pt-BR"> 3<head> 4 <!-- Meta Pixel Code --> 5
5<script>
vendor: 417 bytes, lines 5-14
5 6 !function(f,b,e,v,n,t,s) 7 {if(f.fbq)return;n=f.fbq=function(){n.callMethod? 8 n.callMethod.apply(n,arguments):n.queue.push(arguments)}; 9 if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0'; 10 n.queue=[];t=b.createElement(e);t.async=!0; 11 t.src=v;s=b.getElementsByTagName(e)[0]; 12 s.parentNode.insertBefore(t,s)}(window, document,'script', 13 'https://connect.facebook.net/en_US/fbevents.js'); 14 fbq('init', '
141995126078040920
vendor: 34 bytes, lines 14-16
14'); 15 fbq('track', 'PageView'); 16
16</script>
16 17 <noscript><img height="1" width="1" style="display:none" 18 src="https://www.facebook.com/tr?id=1995126078040920&ev=PageView&noscript=1" 19 /></noscript> 20 <!-- End Meta Pixel Code --> 21 <meta charset="UTF-8" /> 22 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 23 <title>INJECTA â Biblioteca de Seções para Elementor</title> 24 <meta name="description" content="A INJECTA é uma biblioteca de seções profissionais que você injeta diretamente no Elementor com 1 clique. Economize horas de trabalho." /> 25 <link rel="icon" type="image/png" sizes="32x32" href="icons/icon32.png" /> 26 <link rel="icon" type="image/png" sizes="16x16" href="icons/icon16.png" /> 27 <link rel="preconnect" href="https://fonts.googleapis.com" /> 28 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> 29 <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet" /> 30 <!-- Preload LCP assets --> 31 <link rel="preload" href="Logo-Injecta-SVG.png" as="image" /> 32 33 <style> 34 /* ============================================================ 35 CSS CUSTOM PROPERTIES 36 ============================================================ */ 37 @font-face { 38 font-family: 'Surgena'; 39 src: url('surgenapersonaluseonlysembd-q2qwd.ttf') format('truetype'); 40 font-weight: 800; 41 font-style: normal; 42 font-display: swap; 43 } 44 45 :root { 46 --orange: #e85002; 47 --orange-light: #ff6a1f; 48 --orange-dark: #c43d00; 49 --bg: #050505; 50 --bg-2: #0d0d0d; 51 --bg-3: #111111; 52 --surface: #161616; 53 --surface-2: #1e1e1e; 54 --border: rgba(255, 255, 255, 0.07); 55 --border-hover: rgba(232, 80, 2, 0.4); 56 --text: #f0f0f0; 57 --text-muted: #888; 58 --text-dim: #555; 59 --radius: 20px; 60 --radius-sm: 12px; 61 --radius-xs: 8px; 62 --font: 'Poppins', sans-serif; 63 --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); 64 } 65 66 /* ============================================================ 67 RESET & BASE 68 ============================================================ */ 69 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } 70 html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; } 71 body::-webkit-scrollbar {
72 width: 12px; 73 } 74 75 body::-webkit-scrollbar-track { 76 background: #000000; 77 } 78 79 body::-webkit-scrollbar-thumb { 80 background-image: linear-gradient(180deg, #ff6a1f, #c43d00); 81 border-radius: 20px; 82 border: 3px solid #000000; 83 } 84 85 body { 86 font-family: var(--font); 87 background-color: var(--bg); 88 color: var(--text); 89 line-height: 1.6; 90 overflow-x: hidden; 91 width: 100%; 92 -webkit-font-smoothing: antialiased; 93 } 94 95 /* Noise texture overlay */ 96 body::before { 97 content: ''; 98 position: fixed; 99 inset: 0; 100 z-index: 9999; 101 pointer-events: none; 102 opacity: 0.025; 103 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)'/%3E%3C/svg%3E"); 104 background-repeat: repeat; 105 background-size: 200px 200px; 106 } 107 108 a { text-decoration: none; color: inherit; } 109 img { max-width: 100%; display: block; } 110 ul { list-style: none; } 111 112 .container { 113 max-width: 1200px; 114 margin: 0 auto; 115 padding: 0 24px; 116 } 117 118 /* ============================================================ 119 KEYFRAME ANIMATIONS 120 ============================================================ */ 121 @keyframes float { 122 0%, 100% { transform: translateY(0px); } 123 50% { transform: translateY(-12px); } 124 } 125 126 @keyframes blink { 127 0%, 100% { opacity: 1; } 128 50% { opacity: 0; } 129 } 130 131 @keyframes strike { 132 0% { width: 0; } 133 100% { width: 100%; } 134 } 135 136 @keyframes marquee { 137 0% { transform: translateX(0); } 138 100% { transform: translateX(-50%); } 139 } 140 141 /* ============================================================ 142 REVEAL ANIMATIONS 143 ============================================================ */ 144 /* ââ Hero entrance ââ */ 145 @keyframes heroFadeUp { 146 from { opacity: 0; transform: translateY(28px); } 147 to { opacity: 1; transform: translateY(0); } 148 } 149 .hero-anim { 150 opacity: 0; 151 animation: heroFadeUp 0.75s cubic-bezier(0.22,1,0.36,1) forwards; 152 } 153 .hero-anim-2 { animation-delay: 0.2s; } 154 .hero-anim-3 { animation-delay: 0.35s; } 155 .hero-anim-4 { animation-delay: 0.5s; } 156 .hero-anim-5 { animation-delay: 0.65s; } 157 158 /* ââ Stagger reveal ââ */ 159 .reveal { 160 opacity: 0; 161 transform: translateY(40px); 162 transition: opacity 0.7s ease, transform 0.7s ease; 163 } 164 .reveal.visible { 165 opacity: 1; 166 transform: translateY(0); 167 } 168 .reveal[data-delay="1"] { transition-delay: 0.08s; } 169 .reveal[data-delay="2"] { transition-delay: 0.16s; } 170 .reveal[data-delay="3"] { transition-delay: 0.24s; } 171 .reveal[data-delay="4"] { transition-delay: 0.32s; } 172 .reveal[data-delay="5"] { transition-delay: 0.40s; } 173 .reveal[data-delay="6"] { transition-delay: 0.48s; } 174 .reveal-left { 175 opacity: 0; 176 transform: translateX(-24px); 177 transition: opacity 0.7s ease, transform 0.7s ease; 178 } 179 .reveal-left.visible { 180 opacity: 1; 181 transform: translateX(0); 182 } 183 .reveal-right { 184 opacity: 0; 185 transform: translateX(24px); 186 transition: opacity 0.7s ease, transform 0.7s ease; 187 } 188 .reveal-right.visible { 189 opacity: 1; 190 transform: translateX(0); 191 } 192 193 @media (max-width: 768px) { 194 .reveal-left, .reveal-right { 195 transform: translateY(16px); 196 } 197 .reveal-left.visible, .reveal-right.visible { 198 transform: translateY(0); 199 } 200 } 201 202 /* ============================================================ 203 HEADER 204 ============================================================ */ 205 .header { 206 position: fixed; 207 top: 0; 208 left: 0; 209 right: 0; 210 z-index: 1000; 211 padding: 18px 0; 212 transition: var(--transition); 213 } 214 215 .header.scrolled { 216 background: rgba(5, 5, 5, 0.85); 217 backdrop-filter: blur(24px) saturate(1.5); 218 -webkit-backdrop-filter: blur(24px) saturate(1.5); 219 border-bottom: 1px solid var(--border); 220 padding: 12px 0; 221 } 222 223 .header-inner { 224 display: flex; 225 align-items: center; 226 justify-content: space-between; 227 gap: 24px; 228 } 229 230 .header-logo img { 231 height: 36px; 232 width: auto; 233 } 234 235 .header-nav { 236 display: flex; 237 align-items: center; 238 gap: 36px; 239 } 240 241 .header-nav a { 242 font-size: 0.875rem; 243 font-weight: 500; 244 color: var(--text-muted); 245 transition: color var(--transition); 246 letter-spacing: 0.01em; 247 } 248 249 .header-nav a:hover { color: var(--text); } 250 251 .btn-header { 252 display: inline-flex; 253 align-items: center; 254 gap: 8px; 255 padding: 10px 22px; 256 background: transparent; 257 border: 1px solid var(--border-hover); 258 color: var(--orange); 259 font-family: var(--font); 260 font-size: 0.875rem; 261 font-weight: 600; 262 border-radius: 100px; 263 cursor: pointer; 264 transition: var(--transition); 265 white-space: nowrap; 266 } 267 268 .btn-header:hover { 269 background: var(--orange); 270 color: #fff; 271 border-color: var(--orange); 272 } 273 274 /* ============================================================ 275 HERO SECTION 276 ============================================================ */ 277.hero { 278 position: relative; 279 min-height: 85vh; 280 display: flex; 281 align-items: center; 282 background: #030303; 283 padding: 120px 0 80px; 284 overflow: hidden; 285 } 286 287 .hero-glow { 288 position: absolute; 289 right: 5%; 290 top: 50%; 291 transform: translateY(-50%); 292 width: 600px; 293 height: 600px; 294 background: radial-gradient(ellipse at center, rgba(232, 80, 2, 0.12) 0%, transparent 70%); 295 pointer-events: none; 296 z-index: 0; 297 } 298 299 .hero-inner { 300 display: grid; 301 grid-template-columns: 1fr 1fr; 302 gap: 64px; 303 align-items: center; 304 position: relative; 305 z-index: 1; 306 } 307 308 .hero-badge { 309 display: inline-flex; 310 align-items: center; 311 gap: 8px; 312 padding: 6px 14px; 313 background: rgba(232, 80, 2, 0.12); 314 border: 1px solid rgba(232, 80, 2, 0.3); 315 border-radius: 100px; 316 font-size: 0.78rem; 317 font-weight: 600; 318 color: var(--orange-light); 319 letter-spacing: 0.02em; 320 width: fit-content; 321 } 322 323 .hero-badge-dot { 324 width: 7px; 325 height: 7px; 326 border-radius: 50%; 327 background: var(--orange); 328 animation: blink 1.4s ease-in-out infinite; 329 flex-shrink: 0; 330 } 331 332 .hero-headline { 333 font-size: clamp(2.8rem, 5vw, 4rem); 334 font-weight: 800; 335 line-height: 1.1; 336 letter-spacing: -0.03em; 337 color: var(--text); 338 } 339 340 .hero-headline .line-strike { 341 position: relative; 342 display: inline-block; 343 } 344 345 .hero-headline .line-strike::after { 346 content: ''; 347 position: absolute; 348 left: 0; 349 top: 55%; 350 height: 4px; 351 background: var(--orange); 352 border-radius: 2px; 353 width: 0; 354 } 355 356 .hero-headline .line-strike.animate::after { 357 animation: strike 0.5s ease-out 1.2s forwards; 358 } 359 360 .hero-headline .line-orange { 361 background: linear-gradient(135deg, var(--orange) 0%, var(--orange-light) 100%); 362 -webkit-background-clip: text; 363 -webkit-text-fill-color: transparent; 364 background-clip: text; 365 } 366 367 .hero-subtitle { 368 font-size: 1.05rem; 369 font-weight: 400; 370 color: var(--text-muted); 371 line-height: 1.7; 372 max-width: 480px; 373 } 374 375 .hero-ctas { 376 display: flex; 377 align-items: center; 378 gap: 16px; 379 flex-wrap: wrap; 380 } 381 382 .btn-primary { 383 display: inline-flex; 384 align-items: center; 385 gap: 8px; 386 padding: 14px 28px; 387 background: linear-gradient(135deg, var(--orange) 0%, var(--orange-light) 100%); 388 color: #fff; 389 font-family: var(--font); 390 font-size: 0.95rem; 391 font-weight: 700; 392 border-radius: 100px; 393 border: none; 394 cursor: pointer; 395 transition: var(--transition); 396 letter-spacing: 0.01em; 397 box-shadow: 0 4px 24px rgba(232, 80, 2, 0.4); 398 white-space: nowrap; 399 } 400 401 .btn-primary:hover { 402 transform: translateY(-2px); 403 box-shadow: 0 8px 32px rgba(232, 80, 2, 0.55); 404 } 405 406 .btn-ghost { 407 display: inline-flex; 408 align-items: center; 409 gap: 8px; 410 padding: 14px 24px; 411 background: transparent; 412 border: 1px solid var(--border); 413 color: var(--text-muted); 414 font-family: var(--font); 415 font-size: 0.95rem; 416 font-weight: 500; 417 border-radius: 100px; 418 cursor: pointer; 419 transition: var(--transition); 420 white-space: nowrap; 421 } 422 423 .btn-ghost:hover { 424 border-color: rgba(255,255,255,0.2); 425 color: var(--text); 426 } 427 428 .btn-arrow-icon { 429 width: 28px; 430 height: 28px; 431 background: rgba(255,255,255,0.18); 432 border-radius: 50%; 433 display: inline-flex; 434 align-items: center; 435 justify-content: center; 436 flex-shrink: 0; 437 transition: background 0.25s ease, transform 0.25s ease; 438 } 439 440 .btn-arrow-icon svg { 441 width: 14px; 442 height: 14px; 443 fill: none; 444 stroke: #fff; 445 stroke-width: 2.2; 446 stroke-linecap: round; 447 stroke-linejoin: round; 448 } 449 450 .btn-primary:hover .btn-arrow-icon, 451 .btn-pricing:hover .btn-arrow-icon, 452 .calc-btn:hover .btn-arrow-icon, 453 .calc-cta-btn:hover .btn-arrow-icon { 454 background: rgba(255,255,255,0.3); 455 transform: rotate(45deg); 456 } 457 458 .btn-ghost .btn-arrow-icon { 459 background: rgba(255,255,255,0.08); 460 } 461 462 .btn-ghost:hover .btn-arrow-icon { 463 background: rgba(255,255,255,0.15); 464 transform: rotate(45deg); 465 } 466 467 /* ============================================================ 468 SECTION HEADERS 469 ============================================================ */ 470 .section-eyebrow { 471 display: inline-flex; 472 align-items: center; 473 gap: 8px; 474 font-size: 0.75rem; 475 font-weight: 700; 476 text-transform: uppercase; 477 letter-spacing: 0.12em; 478 color: var(--orange); 479 margin-bottom: 16px; 480 } 481 482 .section-eyebrow::before { 483 content: '';
484 width: 20px; 485 height: 2px; 486 background: var(--orange); 487 border-radius: 2px; 488 } 489 490 .section-title { 491 font-size: clamp(1.8rem, 3.5vw, 2.8rem); 492 font-weight: 800; 493 letter-spacing: -0.02em; 494 line-height: 1.15; 495 color: var(--text); 496 margin-bottom: 16px; 497 } 498 499 .section-subtitle { 500 font-size: 1rem; 501 color: var(--text-muted); 502 max-width: 520px; 503 line-height: 1.7; 504 } 505 506 .section-header { 507 text-align: center; 508 margin-bottom: 72px; 509 } 510 511 .section-header .section-subtitle { margin: 0 auto; } 512 513 /* ============================================================ 514 MARQUEE STRIP 515 ============================================================ */ 516 .marquee-section { 517 overflow: hidden; 518 border-top: 1px solid var(--border); 519 border-bottom: 1px solid var(--border); 520 background: var(--bg-2); 521 position: relative; 522 } 523 524 .marquee-section::before, 525 .marquee-section::after { 526 content: ''; 527 position: absolute; 528 top: 0; bottom: 0; 529 width: 120px; 530 z-index: 2; 531 pointer-events: none; 532 } 533 534 .marquee-section::before { 535 left: 0; 536 background: linear-gradient(to right, var(--bg-2), transparent); 537 } 538 539 .marquee-section::after { 540 right: 0; 541 background: linear-gradient(to left, var(--bg-2), transparent); 542 } 543 544 .marquee-item { color: var(--text-dim); } 545 .marquee-dot { background: var(--orange); } 546 547 .marquee-track { 548 display: flex; 549 width: max-content; 550 animation: marquee 36s linear infinite; 551 } 552 553 .marquee-track:hover { animation-play-state: paused; } 554 555 .marquee-inner { 556 display: flex; 557 align-items: center; 558 } 559 560 .marquee-item { 561 display: flex; 562 align-items: center; 563 gap: 18px; 564 padding: 18px 28px; 565 font-size: 0.82rem; 566 font-weight: 600; 567 color: var(--text-dim); 568 text-transform: uppercase; 569 letter-spacing: 0.08em; 570 white-space: nowrap; 571 } 572 573 .marquee-dot { 574 width: 5px; 575 height: 5px; 576 border-radius: 50%; 577 background: var(--orange); 578 flex-shrink: 0; 579 } 580 581 /* ============================================================ 582 DEMO SECTION 583 ============================================================ */ 584 .demo-section { 585 position: relative; 586 padding: 140px 0 160px; 587 background: #050505; 588 overflow: hidden; 589 } 590 .demo-section::before { 591 content: ""; 592 position: absolute; inset: 0; 593 background-image: 594 linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), 595 linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px); 596 background-size: 64px 64px; 597 mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 75%); 598 -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 75%); 599 pointer-events: none; 600 } 601 602 .demo-header { 603 text-align: center; 604 max-width: 820px; 605 margin: 0 auto 56px; 606 } 607 .demo-eyebrow { 608 display: inline-flex; align-items: center; gap: 10px; 609 padding: 7px 16px; 610 background: rgba(232,80,2,0.1); 611 border: 1px solid rgba(232,80,2,0.3); 612 border-radius: 100px; 613 font-size: 11.5px; font-weight: 600; 614 color: var(--orange-light); 615 text-transform: uppercase; 616 letter-spacing: 0.14em; 617 margin-bottom: 24px; 618 font-family: monospace; 619 } 620 .demo-eyebrow .d { 621 width: 6px; height: 6px; background: var(--orange); border-radius: 50%; 622 animation: blink 1.4s ease-in-out infinite; 623 box-shadow: 0 0 10px var(--orange); 624 } 625 .demo-title { 626 font-size: clamp(2.4rem, 5vw, 4.2rem); 627 font-weight: 900; 628 line-height: 1.02; 629 letter-spacing: -0.04em; 630 margin-bottom: 20px; 631 color: var(--text); 632 } 633 .demo-title em { 634 font-style: normal; 635 background: linear-gradient(135deg, var(--orange) 0%, var(--orange-light) 100%); 636 -webkit-background-clip: text; 637 -webkit-text-fill-color: transparent; 638 background-clip: text; 639 } 640 .demo-sub { 641 font-size: clamp(1rem, 1.4vw, 1.2rem); 642 color: var(--text-muted); 643 line-height: 1.6; 644 max-width: 620px; 645 margin: 0 auto; 646 } 647 .demo-steps-row { 648 display: flex; justify-content: center; align-items: center; 649 gap: 28px; 650 margin: 36px auto 0; 651 flex-wrap: wrap; 652 } 653 .demo-step { 654 display: flex; align-items: center; gap: 10px; 655 font-size: 13px; color: var(--text-muted); 656 font-weight: 500; 657 } 658 .demo-step .n { 659 width: 26px;
659 height: 26px; 660 border-radius: 50%; 661 background: rgba(232,80,2,0.12); 662 border: 1px solid rgba(232,80,2,0.35); 663 color: var(--orange-light); 664 display: grid; place-items: center; 665 font-size: 12px; font-weight: 700; 666 } 667 .demo-step.done .n { 668 background: var(--orange); color: #fff; border-color: var(--orange); 669 box-shadow: 0 0 20px rgba(232,80,2,0.5); 670 } 671 .demo-step.done { color: var(--text); } 672 .demo-step-sep { 673 width: 36px; height: 1px; 674 background: linear-gradient(90deg, transparent, rgba(232,80,2,0.3), transparent); 675 } 676 677 /* Stage */ 678 .demo-stage { 679 position: relative; 680 max-width: 1180px; 681 margin: 0 auto; 682 perspective: 1800px; 683 } 684 685 /* Browser */ 686 .demo-browser { 687 position: relative; 688 background: #0a0a0a; 689 border: 1px solid rgba(255,255,255,0.08); 690 border-radius: 18px; 691 overflow: hidden; 692 box-shadow: 693 0 0 0 1px rgba(255,255,255,0.03), 694 0 40px 100px -20px rgba(0,0,0,0.8), 695 0 0 80px -10px rgba(232,80,2,0.25), 696 inset 0 1px 0 rgba(255,255,255,0.06); 697 animation: demoBrowserIn 0.9s cubic-bezier(0.22,1,0.36,1) both; 698 } 699 @keyframes demoBrowserIn { 700 from { opacity: 0; transform: translateY(30px) scale(0.98); } 701 to { opacity: 1; transform: translateY(0) scale(1); } 702 } 703 .demo-browser-bar { 704 display: flex; align-items: center; gap: 14px; 705 padding: 14px 18px; 706 background: linear-gradient(180deg, #151515 0%, #0d0d0d 100%); 707 border-bottom: 1px solid rgba(255,255,255,0.06); 708 } 709 .demo-dots { display: flex; gap: 7px; } 710 .demo-dots i { display: block; width: 12px; height: 12px; border-radius: 50%; } 711 .demo-dots i:nth-child(1) { background: #ff5f56; } 712 .demo-dots i:nth-child(2) { background: #ffbd2e; } 713 .demo-dots i:nth-child(3) { background: #27c93f; } 714 .demo-url { 715 flex: 1; 716 display: flex; align-items: center; gap: 10px; 717 padding: 7px 14px; 718 background: #060606; 719 border: 1px solid rgba(255,255,255,0.06); 720 border-radius: 8px; 721 font-family: monospace; 722 font-size: 12px; 723 color: var(--text-dim); 724 max-width: 440px; 725 margin: 0 auto; 726 } 727 .demo-url svg { width: 12px; height: 12px; stroke: #4ade80; stroke-width: 2; fill: none; flex-shrink: 0; } 728 .demo-url strong { color: var(--text-muted); font-weight: 500; } 729 .demo-url em { color: var(--text); font-style: normal; font-weight: 500; } 730 .demo-ext-pill { 731 display: inline-flex; align-items: center; gap: 7px; 732 padding: 6px 11px; 733 background: rgba(232,80,2,0.1); 734 border: 1px solid rgba(232,80,2,0.25); 735 border-radius: 7px; 736 font-family: monospace; 737 font-size: 10.5px; font-weight: 700; 738 color: var(--orange-light); 739 text-transform: uppercase; 740 letter-spacing: 0.1em; 741 } 742 .demo-ext-pill .logo-dot { 743 width: 10px; height: 10px; 744 background: linear-gradient(135deg, var(--orange), var(--orange-light)); 745 border-radius: 2px; 746 box-shadow: 0 0 8px rgba(232,80,2,0.6); 747 } 748 749 /* Video */ 750 .demo-video-wrap { 751 position: relative; 752 aspect-ratio: 16/9; 753 background: #000; 754 overflow: hidden; 755 } 756 .demo-video-wrap video { 757 position: absolute; inset: 0; 758 width: 100%; height: 100%; 759 object-fit: contain; 760 display: block; 761 } 762 763 /* Corner badges */ 764 .demo-badge { 765 position: absolute; 766 z-index: 2; 767 display: inline-flex; align-items: center; gap: 8px; 768 padding: 8px 14px; 769 background: rgba(10,10,10,0.75); 770 backdrop-filter: blur(20px); 771 -webkit-backdrop-filter: blur(20px); 772 border: 1px solid rgba(255,255,255,0.08); 773 border-radius: 100px; 774 font-family: monospace; 775 font-size: 11px; font-weight: 600; 776 color: var(--text); 777 text-transform: uppercase; 778 letter-spacing: 0.08em; 779 opacity: 0; 780 animation: demoBadgeIn 0.6s ease-out 1.2s forwards; 781 } 782 @keyframes demoBadgeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } } 783 .demo-badge.tl { top: 24px; left: 24px; } 784 .demo-badge.br { bottom: 24px; right: 24px; } 785 .demo-badge .pulse { 786 width: 8px; height: 8px; border-radius: 50%; 787 background: var(--orange); 788 animation: demoDot 2s infinite; 789 }
790 @keyframes demoDot { 791 0% { box-shadow: 0 0 0 0 rgba(232,80,2,0.7); } 792 70% { box-shadow: 0 0 0 10px rgba(232,80,2,0); } 793 100% { box-shadow: 0 0 0 0 rgba(232,80,2,0); } 794 } 795 796 /* Float cards */ 797 .demo-float-card { 798 position: absolute; 799 background: rgba(10,10,10,0.9); 800 backdrop-filter: blur(20px); 801 -webkit-backdrop-filter: blur(20px); 802 border: 1px solid rgba(255,255,255,0.08); 803 border-radius: 14px; 804 padding: 14px 16px; 805 box-shadow: 0 20px 50px rgba(0,0,0,0.6); 806 z-index: 5; 807 opacity: 0; 808 animation: demoCardIn 0.8s cubic-bezier(0.22,1,0.36,1) forwards; 809 } 810 @keyframes demoCardIn { from { opacity:0; transform:translateY(20px) scale(0.95); } to { opacity:1; transform:translateY(0) scale(1); } } 811 .demo-float-card.left { left: -70px; top: 28%; animation-delay: 1.4s; } 812 .demo-float-card.right { right: -60px; top: 62%; animation-delay: 1.7s; } 813 .demo-float-card .fc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } 814 .demo-float-card .fc-icon { 815 width: 32px; height: 32px; 816 border-radius: 9px; 817 display: grid; place-items: center; flex-shrink: 0; 818 } 819 .demo-float-card.left .fc-icon { background: rgba(232,80,2,0.15); border: 1px solid rgba(232,80,2,0.3); } 820 .demo-float-card.left .fc-icon svg { width: 15px; height: 15px; stroke: var(--orange-light); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; } 821 .demo-float-card.right .fc-icon { background: rgba(34,197,94,0.15); border: 1px solid rgba(34,197,94,0.3); } 822 .demo-float-card.right .fc-icon svg { width: 15px; height: 15px; stroke: #4ade80; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; } 823 .demo-float-card .fc-label { font-family: monospace; font-size: 9.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; } 824 .demo-float-card .fc-title { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; } 825 .demo-float-card .fc-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; } 826 827 /* Meta strip */ 828 .demo-meta { 829 display: flex; 830 justify-content: center; align-items: center; 831 gap: 40px; 832 margin-top: 64px; 833 flex-wrap: wrap; 834 } 835 .demo-meta-item { 836 display: flex; align-items: center; gap: 10px; 837 font-size: 13px; 838 color: var(--text-muted); 839 } 840 .demo-meta-item svg { width: 16px; height: 16px; stroke: var(--orange); stroke-width: 2; fill: none; flex-shrink: 0; } 841 .demo-meta-item strong { color: var(--text); font-weight: 700; } 842 .demo-meta-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--text-dim); } 843 844 @media (max-width: 900px) { 845 .demo-section { padding: 90px 0 110px; } 846 .demo-title { font-size: 2.2rem; } 847 .demo-steps-row { gap: 12px; } 848 .demo-step-sep { width: 20px; } 849 .demo-float-card { display: none; } 850 .demo-badge { font-size: 10px; padding: 6px 10px; } 851 .demo-browser { border-radius: 12px; } 852 .demo-url { font-size: 10px; max-width: none; } 853 .demo-meta { gap: 20px; } 854 } 855 @media (max-width: 600px) { 856 .demo-browser-bar { padding: 10px 12px; gap: 10px; } 857 .demo-ext-pill { display: none; } 858 } 859 860 /* ============================================================ 861 DASHBOARD SHOWCASE â SPLIT LAYOUT 862 ============================================================ */ 863 .showcase-section { 864 padding: 120px 0 120px; 865 background: var(--bg); 866 border-top: 1px solid rgba(255,255,255,0.04); 867 } 868 869 .showcase-scene { 870 perspective: 1200px; 871 display: flex; 872 justify-content: center; 873 margin-top: 56px; 874 } 875 876 .showcase-features { 877 display: grid; 878 grid-template-columns: repeat(4, 1fr); 879 gap: 12px; 880 margin-top: 32px; 881 } 882 883 .showcase-feat { 884 display: flex; 885 flex-direction: column; 886 gap: 10px; 887 padding: 16px; 888 background: var(--surface); 889 border: 1px solid var(--border); 890 border-radius: var(--radius-sm); 891 transition: border-color var(--transition); 892 } 893 894 .showcase-feat:not(.feat-inverted):hover { 895 border-color: rgba(255,255,255,0.9); 896 border-width: 2px; 897 box-shadow: 0 0 0 1px rgba(255,255,255,0.15), 0 8px 32px rgba(0,0,0,0.5); 898 transform: translateY(-3px); 899 } 900 .feat-inverted:hover { 901 box-shadow: 0 8px 32px rgba(0,0,0,0.12); 902 transform: translateY(-3px); 903 } 904 .showcase-feat { transition: all var(--transition); } 905 906 .showcase-feat-icon { 907 width: 34px; 908 height: 34px; 909 border-radius: 8px; 910 background: rgba(232,80,2,0.1); 911 border: 1px solid rgba(232,80,2,0.15); 912 display: flex; 913 align-items: center; 914 justify-content: center; 915 flex-shrink: 0; 916 } 917 918 .showcase-feat-icon svg { 919 width: 16px; 920 height: 16px; 921 stroke: var(--orange); 922 fill: none; 923 stroke-width: 1.75; 924 stroke-linecap: round; 925 stroke-linejoin: round; 926 } 927 928 .feat-inverted { 929 background: #f5f5f5 !important; 930 border-color: rgba(0,0,0,0.08) !important; 931 } 932 .feat-inverted .showcase-feat-text strong { color: #111; } 933 .feat-inverted .showcase-feat-text span { color: #555; } 934 .feat-inverted .showcase-feat-icon { 935 background: rgba(232,80,2,0.08); 936 border-color: rgba(232,80,2,0.15); 937 } 938 939 .showcase-feat-text strong { 940 display: block; 941 font-size: 0.8rem; 942 font-weight: 700; 943 color: var(--text); 944 margin-bottom: 2px; 945 } 946 947 .showcase-feat-text span { 948 font-size: 0.73rem; 949 color: var(--text-muted); 950 line-height: 1.5; 951 } 952 953 @media (max-width: 640px) { 954 .showcase-features { grid-template-columns: repeat(2, 1fr); } 955 } 956 957 .showcase-card { 958 width: 100%; 959 transform-style: preserve-3d; 960 transition: transform 0.12s ease-out; 961 will-change: transform; 962 cursor: default; 963 } 964 965 .showcase-card-inner { 966 position: relative; 967 border-radius: 20px; 968 overflow: hidden; 969 border: 1px solid rgba(255,255,255,0.08); 970 box-shadow: 971 0 40px 80px rgba(0,0,0,0.6), 972 0 0 0 1px rgba(232,80,2,0.08), 973 inset 0 1px 0 rgba(255,255,255,0.06); 974 } 975 976 .showcase-img { 977 display: block; 978 width: 100%; 979 height: auto; 980 border-radius: 20px; 981 transform-style: preserve-3d; 982 user-select: none; 983 } 984 985 .showcase-glare { 986 position: absolute; 987 inset: 0; 988 border-radius: 20px; 989 pointer-events: none; 990 background: radial-gradient( 991 circle at 50% 0%, 992 rgba(255,255,255,0.06) 0%, 993 transparent 60% 994 ); 995 opacity: 0; 996 transition: opacity 0.3s ease; 997 } 998 999 .showcase-card:hover .showcase-glare { opacity: 1; } 1000 1001 .showcase-badge { 1002 position: absolute; 1003 top: 16px; 1004 right: 16px; 1005 display: inline-flex; 1006 align-items: center; 1007 gap: 7px; 1008 background: rgba(13,13,13,0.85); 1009 border: 1px solid rgba(232,80,2,0.25); 1010 backdrop-filter: blur(10px); 1011 -webkit-backdrop-filter: blur(10px); 1012 border-radius: 100px; 1013 padding: 6px 12px; 1014 font-size: 0.68rem; 1015 font-weight: 700;
1016 color: #e0e0e0; 1017 letter-spacing: 0.04em; 1018 transform: translateZ(30px); 1019 } 1020 1021 .showcase-badge-dot { 1022 width: 6px; 1023 height: 6px; 1024 border-radius: 50%; 1025 background: #e85002; 1026 box-shadow: 0 0 6px rgba(232,80,2,0.8); 1027 animation: badgePulse 2s ease-in-out infinite; 1028 } 1029 1030 @keyframes badgePulse { 1031 0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(232,80,2,0.8); } 1032 50% { opacity: 0.6; box-shadow: 0 0 12px rgba(232,80,2,0.4); } 1033 } 1034 1035 .section-subtitle { 1036 font-size: 1rem; 1037 color: #555; 1038 max-width: 520px; 1039 margin: 0 auto; 1040 line-height: 1.7; 1041 } 1042 1043 @media (max-width: 768px) { 1044 .showcase-section { padding: 0 0 60px; } 1045 .showcase-scene { margin-top: 36px; } 1046 .showcase-card { transform: none !important; } 1047 .showcase-glare { display: none; } 1048 .showcase-badge { top: 10px; right: 10px; font-size: 0.62rem; padding: 5px 10px; } 1049 } 1050 1051 /* ============================================================ 1052 BENTO GRID FEATURES 1053 ============================================================ */ 1054 .features-section { 1055 padding: 0 0 120px; 1056 } 1057 1058 .bento-grid { 1059 display: grid; 1060 grid-template-columns: repeat(12, 1fr); 1061 gap: 16px; 1062 } 1063 1064 .bento-card { 1065 background: #0d0d0d; 1066 border: 1px solid rgba(255,255,255,0.07); 1067 border-radius: var(--radius); 1068 padding: 32px; 1069 transition: var(--transition); 1070 overflow: hidden; 1071 position: relative; 1072 } 1073 1074 .bento-card:not(.bento-inverted):hover { 1075 border-color: rgba(255,255,255,0.9); 1076 border-width: 2px; 1077 box-shadow: 0 0 0 1px rgba(255,255,255,0.15), 0 8px 32px rgba(0,0,0,0.5); 1078 transform: translateY(-3px); 1079 } 1080 .bento-inverted:hover { 1081 box-shadow: 0 8px 32px rgba(0,0,0,0.12); 1082 transform: translateY(-3px); 1083 } 1084 1085 .bento-large { grid-column: span 8; } 1086 .bento-stat { 1087 grid-column: span 4; 1088 display: flex; 1089 flex-direction: column; 1090 justify-content: center; 1091 gap: 8px; 1092 background: linear-gradient(135deg, var(--surface) 0%, rgba(232, 80, 2, 0.05) 100%); 1093 border-color: rgba(232, 80, 2, 0.15); 1094 } 1095 .bento-small { grid-column: span 3; } 1096 1097 1098 .bento-number-static { 1099 font-size: 5rem; 1100 font-weight: 900; 1101 line-height: 1; 1102 letter-spacing: -0.04em; 1103 color: var(--orange); 1104 } 1105 .bento-inverted .bento-number-label { color: #111; } 1106 .bento-inverted .bento-number-sub { color: #555; } 1107 .bento-number { 1108 font-size: 5rem; 1109 font-weight: 900; 1110 background: linear-gradient(135deg, var(--orange) 0%, var(--orange-light) 100%); 1111 -webkit-background-clip: text; 1112 -webkit-text-fill-color: transparent; 1113 background-clip: text; 1114 line-height: 1; 1115 letter-spacing: -0.04em; 1116 } 1117 1118 .bento-number-label { 1119 font-size: 1.1rem; 1120 font-weight: 700; 1121 color: var(--text); 1122 } 1123 1124 .bento-number-sub { 1125 font-size: 0.78rem; 1126 color: var(--text-dim); 1127 max-width: 160px; 1128 line-height: 1.5; 1129 } 1130 1131 .bento-title { 1132 font-size: 1.25rem; 1133 font-weight: 700; 1134 color: var(--text); 1135 margin-bottom: 10px; 1136 } 1137 1138 .bento-desc { 1139 font-size: 0.85rem; 1140 color: var(--text-muted); 1141 line-height: 1.6; 1142 margin-bottom: 20px; 1143 } 1144 1145 .category-pills { 1146 display: flex; 1147 flex-wrap: wrap; 1148 gap: 8px; 1149 } 1150 1151 .pill { 1152 display: inline-flex; 1153 align-items: center; 1154 padding: 5px 12px; 1155 background: var(--bg-3); 1156 border: 1px solid var(--border); 1157 border-radius: 100px; 1158 font-size: 0.72rem; 1159 font-weight: 600; 1160 color: var(--text-muted); 1161 white-space: nowrap; 1162 } 1163 1164 .pill.orange { 1165 background: rgba(232, 80, 2, 0.1); 1166 border-color: rgba(232, 80, 2, 0.25); 1167 color: var(--orange-light); 1168 } 1169 1170 .bento-icon { 1171 width: 48px; 1172 height: 48px; 1173 background: rgba(232, 80, 2, 0.08); 1174 border: 1px solid rgba(232, 80, 2, 0.2); 1175 border-radius: 12px; 1176 display: flex; 1177 align-items: center; 1178 justify-content: center; 1179 margin-bottom: 18px; 1180 } 1181 1182 .bento-small-title { 1183 font-size: 0.95rem; 1184 font-weight: 700; 1185 color: var(--text); 1186 margin-bottom: 6px; 1187 } 1188 1189 .bento-small-desc { 1190 font-size: 0.8rem; 1191 color: var(--text-muted); 1192 line-height: 1.55; 1193 } 1194 1195 .bento-glow-overlay { 1196 position: absolute; 1197 inset: 0; 1198 background: radial-gradient(ellipse at bottom right, rgba(232, 80, 2, 0.06), transparent 70%); 1199 pointer-events: none; 1200 } 1201 1202 1203 /* Card claro translúcido â texto escuro (Updates semanais) */ 1204 .bento-fade-light .bento-small-title { color: #111; } 1205 .bento-fade-light .bento-small-desc { color: #444; } 1206 .bento-fade-light .bento-icon-inverted { 1207 background: rgba(232,80,2,0.1); 1208 border-color: rgba(232,80,2,0.2); 1209 } 1210 .bento-fade-light:hover { 1211 border-color: rgba(0,0,0,0.15) !important; 1212 border-width: 2px; 1213 } 1214 1215 /* Card invertido â fundo branco, texto escuro */ 1216 .bento-inverted { 1217 background: rgba(245,245,245,0.97) !important; 1218 border-color: rgba(0,0,0,0.08) !important; 1219 } 1220 .bento-inverted .bento-small-title { color: #111; } 1221 .bento-inverted .bento-small-desc { color: #555; } 1222 .bento-inverted .bento-icon-inverted { 1223 background: rgba(0,0,0,0.06); 1224 border-color: rgba(0,0,0,0.12); 1225 } 1226 .bento-inverted:hover { 1227 border-color: rgba(0,0,0,0.2) !important; 1228 border-width: 2px; 1229 } 1230 /* ============================================================ 1231 CTA STRIP 1232 ============================================================ */ 1233 /* ============================================================ 1234 ROI CALCULATOR 1235 ============================================================ */ 1236 .bento-calc { 1237 grid-column: span 12; 1238 display: grid; 1239 grid-template-columns: 1fr 1fr; 1240 gap: 48px; 1241 align-items: start; 1242 background: #fff; 1243 border-color: rgba(0,0,0,0.08); 1244 padding: 40px; 1245 } 1246 1247 .calc-eyebrow { 1248 display: inline-flex; 1249 align-items: center; 1250 gap: 6px; 1251 font-size: 0.7rem; 1252 font-weight: 700; 1253 color: var(--orange); 1254 text-transform: uppercase; 1255 letter-spacing: 0.12em; 1256 margin-bottom: 16px; 1257 } 1258 1259 .calc-title { 1260 font-size: 1.6rem; 1261 font-weight: 800; 1262 line-height: 1.2; 1263 letter-spacing: -0.04em; 1264 margin-bottom: 10px; 1265 color: #111; 1266 } 1267 .calc-title-highlight { color: var(--orange); } 1268 1269 .calc-subtitle { 1270 font-size: 0.875rem; 1271 color: #666; 1272 margin-bottom: 28px; 1273 line-height: 1.6; 1274 } 1275 1276 .calc-inputs { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; } 1277 1278 .calc-field label { 1279 display: block; 1280 font-size: 0.75rem; 1281 font-weight: 600; 1282 color: #444; 1283 margin-bottom: 6px; 1284 text-transform: uppercase; 1285 letter-spacing: 0.06em; 1286 } 1287 1288 .calc-input-wrap { 1289 position: relative; 1290 } 1291 1292 .calc-prefix { 1293 position: absolute; 1294 left: 12px; 1295 top: 50%; 1296 transform: translateY(-50%); 1297 font-size: 0.8rem; 1298 font-weight: 600; 1299 color: #888; 1300 pointer-events: none; 1301 } 1302 1303 .calc-field input { 1304 width: 100%; 1305 background: #f5f5f5; 1306 border: 1px solid #e0e0e0; 1307 border-radius: var(--radius-xs); 1308 padding: 12px 16px; 1309 font-family: var(--font); 1310 font-size: 0.9rem; 1311 font-weight: 500; 1312 color: #111; 1313 outline: none; 1314 transition: border-color 0.2s; 1315 -moz-appearance: textfield; 1316 } 1317 .calc-field input::-webkit-outer-spin-button, 1318 .calc-field input::-webkit-inner-spin-button { -webkit-appearance: none; } 1319 .calc-field input:focus { border-color: var(--orange); } 1320 .calc-field input::placeholder { color: var(--text-dim); } 1321 1322 .calc-btn { 1323 width: 100%; 1324 background: var(--orange); 1325 color: #fff; 1326 font-family: var(--font); 1327 font-size: 0.9rem; 1328 font-weight: 700; 1329 padding: 14px 20px; 1330 border: none; 1331 border-radius: var(--radius-xs); 1332 cursor: pointer; 1333 transition: var(--transition); 1334 letter-spacing: 0.02em; 1335 } 1336 .calc-btn:hover { background: var(--orange-light); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(232,80,2,0.35); } 1337 1338 /* Right result panel */ 1339 .calc-right { 1340 display: flex; 1341 align-items: center; 1342 justify-content: center; 1343 min-height: 280px; 1344 } 1345 1346 .calc-result-empty { 1347 text-align: center; 1348 color: var(--text-dim); 1349 font-size: 0.85rem; 1350 display: flex; 1351 flex-direction: column; 1352 align-items: center; 1353 gap: 16px; 1354 } 1355 1356 .calc-result-panel { 1357 display: none; 1358 width: 100%; 1359 background: var(--bg-2); 1360 border: 1px solid rgba(232, 80, 2, 0.2); 1361 border-radius: var(--radius-sm); 1362 padding: 28px; 1363 animation: fadeUp 0.4s ease; 1364 } 1365 1366 .calc-result-panel.visible { 1367 display: block; 1368 }
1369 @keyframes fadeUp { 1370 from { opacity: 0; transform: translateY(12px); } 1371 to { opacity: 1; transform: translateY(0); } 1372 } 1373 1374 .calc-result-label { 1375 font-size: 0.75rem; 1376 font-weight: 600; 1377 color: var(--text-muted); 1378 text-transform: uppercase; 1379 letter-spacing: 0.08em; 1380 margin-bottom: 6px; 1381 } 1382 .calc-result-label--sub { margin-top: 4px; } 1383 .calc-result-highlight { color: var(--orange); font-weight: 700; } 1384 1385 .calc-result-value { 1386 font-size: 2.8rem; 1387 font-weight: 900; 1388 color: var(--orange); 1389 line-height: 1; 1390 letter-spacing: -0.04em; 1391 margin-bottom: 4px; 1392 } 1393 1394 .calc-metrics { 1395 display: flex; 1396 align-items: center; 1397 gap: 0; 1398 margin: 24px 0 20px; 1399 background: var(--bg-3); 1400 border-radius: 10px; 1401 padding: 16px 20px; 1402 } 1403 .calc-metric { flex: 1; text-align: center; } 1404 .calc-metric-val { font-size: 1.2rem; font-weight: 800; color: var(--text); margin-bottom: 4px; } 1405 .calc-metric-lab { font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; } 1406 .calc-metric-div { width: 1px; height: 36px; background: var(--border); flex-shrink: 0; } 1407 1408 .calc-cta-btn { 1409 display: block; 1410 text-align: center; 1411 background: linear-gradient(135deg, var(--orange-dark), var(--orange-light)); 1412 color: #fff; 1413 font-size: 0.875rem; 1414 font-weight: 700; 1415 padding: 13px 20px; 1416 border-radius: var(--radius-xs); 1417 transition: var(--transition); 1418 letter-spacing: 0.02em; 1419 } 1420 .calc-cta-btn:hover { opacity: 0.9; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(232,80,2,0.35); } 1421 1422 @media (max-width: 768px) { 1423 .bento-calc { grid-template-columns: 1fr; gap: 32px; } 1424 .calc-right { min-height: auto; } 1425 } 1426 1427 .cta-section { 1428 padding: 0 0 120px; 1429 } 1430 1431 .cta-strip { 1432 background: linear-gradient(135deg, var(--surface) 0%, rgba(232, 80, 2, 0.08) 50%, var(--surface) 100%); 1433 border: 1px solid rgba(232, 80, 2, 0.2); 1434 border-radius: 32px; 1435 padding: 72px 48px; 1436 text-align: center; 1437 position: relative; 1438 overflow: hidden; 1439 } 1440 1441 .cta-strip::before { 1442 content: ''; 1443 position: absolute; 1444 top: 0; left: 50%; 1445 transform: translateX(-50%); 1446 width: 400px; 1447 height: 1px; 1448 background: linear-gradient(to right, transparent, var(--orange), transparent); 1449 } 1450 1451 .cta-strip::after { 1452 content: ''; 1453 position: absolute; 1454 top: -80px; 1455 left: 50%; 1456 transform: translateX(-50%); 1457 width: 600px; 1458 height: 300px; 1459 background: radial-gradient(ellipse at center, rgba(232, 80, 2, 0.12), transparent 70%); 1460 pointer-events: none; 1461 } 1462 1463 .cta-urgency { 1464 display: inline-flex; 1465 align-items: center; 1466 gap: 8px; 1467 padding: 6px 16px; 1468 background: rgba(232, 80, 2, 0.12); 1469 border: 1px solid rgba(232, 80, 2, 0.3); 1470 border-radius: 100px; 1471 font-size: 0.75rem; 1472 font-weight: 700; 1473 color: var(--orange-light); 1474 letter-spacing: 0.06em; 1475 text-transform: uppercase; 1476 margin-bottom: 24px; 1477 } 1478 1479 .cta-strip .section-title { margin-bottom: 16px; } 1480 .cta-strip .section-subtitle { margin: 0 auto 40px; } 1481 1482 .cta-buttons { 1483 display: flex; 1484 align-items: center; 1485 justify-content: center; 1486 gap: 16px; 1487 flex-wrap: wrap; 1488 } 1489 1490 .cta-note { 1491 margin-top: 20px; 1492 font-size: 0.78rem; 1493 color: var(--text-dim); 1494 } 1495 1496 /* ============================================================ 1497 PRICING SECTION â v2 1498 ============================================================ */ 1499 .pricing-section { background: var(--bg) !important; } 1500 1501 .pricing-toggle-wrap { 1502 display: flex; 1503 justify-content: center; 1504 margin-bottom: 52px; 1505 margin-top: 32px; 1506 } 1507 1508 .pricing-toggle { 1509 display: inline-flex; 1510 background: #1a1a1a; 1511 border: 1px solid #2a2a2a; 1512 border-radius: 100px; 1513 padding: 4px; 1514 gap: 2px; 1515 } 1516 1517 .pricing-toggle-btn { 1518 position: relative; 1519 padding: 9px 20px; 1520 border-radius: 100px; 1521 border: none; 1522 background: transparent; 1523 color: #666; 1524 font-size: 13px; 1525 font-weight: 500; 1526 font-family: var(--font); 1527 cursor: pointer; 1528 transition: all 0.2s; 1529 white-space: nowrap; 1530 display: flex; 1531 align-items: center; 1532 gap: 6px; 1533 } 1534 1535 .pricing-toggle-btn.active { 1536 background: var(--orange); 1537 color: #fff; 1538 font-weight: 700; 1539 } 1540 1541 .pricing-toggle-discount { 1542 font-size: 10px; 1543 font-weight: 700; 1544 padding: 2px 6px; 1545 border-radius: 20px; 1546 letter-spacing: 0.04em; 1547 background: rgba(255,80,0,0.22); 1548 color: var(--orange); 1549 transition: all 0.2s; 1550 } 1551 1552 .pricing-toggle-btn.active .pricing-toggle-discount { 1553 background: rgba(255,255,255,0.2); 1554 color: #fff; 1555 } 1556 1557 .pricing-grid { 1558 display: flex; 1559 gap: 16px; 1560 align-items: stretch; 1561 flex-wrap: wrap; 1562 justify-content: center; 1563 max-width: 1100px; 1564 margin: 0 auto; 1565 } 1566 1567 .pricing-card { 1568 position: relative; 1569 background: #181818; 1570 border: 1.5px solid #2a2a2a; 1571 border-radius: 16px; 1572 padding: 32px 28px 28px; 1573 display: flex; 1574 flex-direction: column; 1575 flex: 1; 1576 min-width: 220px; 1577 max-width: 270px; 1578 transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s; 1579 } 1580 1581 .pricing-card.featured { 1582 background: #1e1e1e; 1583 border-color: rgba(232,80,2,0.27); 1584 transform: translateY(-10px); 1585 box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(232,80,2,0.2); 1586 } 1587 1588 .pricing-card.active-plan { 1589 border-color: var(--orange); 1590 } 1591 1592 .badge-popular { 1593 position: absolute; 1594 top: -14px; 1595 left: 50%; 1596 transform: translateX(-50%); 1597 background: var(--orange); 1598 color: #fff; 1599 font-size: 11px; 1600 font-weight: 700; 1601 letter-spacing: 0.12em; 1602 text-transform: uppercase; 1603 padding: 5px 16px; 1604 border-radius: 40px; 1605 white-space: nowrap; 1606 } 1607 1608 .pricing-period { 1609 font-size: 11px; 1610 font-weight: 600; 1611 letter-spacing: 0.14em; 1612 text-transform: uppercase; 1613 color: #666; 1614 margin-bottom: 16px; 1615 } 1616 1617 .pricing-card.featured .pricing-period { color: var(--orange); } 1618 1619 .pricing-price { 1620 display: flex; 1621 align-items: flex-end; 1622 gap: 4px; 1623 margin-bottom: 6px; 1624 } 1625 1626 .pricing-currency { 1627 font-size: 13px; 1628 font-weight: 600; 1629 color: #aaa; 1630 align-self: flex-start; 1631 margin-top: 8px; 1632 } 1633 1634 .pricing-amount { 1635 font-size: 64px; 1636 font-weight: 800; 1637 line-height: 1; 1638 letter-spacing: -3px; 1639 color: #fff; 1640 } 1641 1642 .pricing-freq {
1643 font-size: 12px; 1644 color: #666; 1645 margin-bottom: 8px; 1646 } 1647 1648 .pricing-badge-off { 1649 display: inline-flex; 1650 align-items: center; 1651 gap: 6px; 1652 background: rgba(232,80,2,0.1); 1653 border: 1px solid rgba(232,80,2,0.25); 1654 border-radius: 8px; 1655 padding: 5px 10px; 1656 margin-bottom: 16px; 1657 width: fit-content; 1658 font-size: 12px; 1659 font-weight: 700; 1660 color: var(--orange); 1661 } 1662 1663 .pricing-badge-spacer { height: 16px; margin-bottom: 16px; } 1664 1665 .pricing-desc { 1666 font-size: 13px; 1667 line-height: 1.55; 1668 color: #888; 1669 margin-bottom: 24px; 1670 min-height: 40px; 1671 } 1672 1673 .pricing-divider { 1674 height: 1px; 1675 background: #2a2a2a; 1676 margin-bottom: 20px; 1677 } 1678 1679 .pricing-features { 1680 display: flex; 1681 flex-direction: column; 1682 gap: 10px; 1683 margin-bottom: 28px; 1684 flex: 1; 1685 } 1686 1687 .pricing-feat { 1688 display: flex; 1689 align-items: center; 1690 gap: 10px; 1691 font-size: 13px; 1692 color: #999; 1693 } 1694 1695 .pricing-card.featured .pricing-feat { color: #ddd; } 1696 1697 .pricing-feat-icon { 1698 width: 16px; height: 16px; 1699 flex-shrink: 0; 1700 } 1701 1702 .btn-pricing { 1703 width: 100%; 1704 padding: 13px 20px; 1705 border-radius: 100px; 1706 border: 1.5px solid #333; 1707 background: transparent; 1708 color: #ccc; 1709 font-size: 14px; 1710 font-weight: 600; 1711 font-family: var(--font); 1712 cursor: pointer; 1713 display: flex; 1714 align-items: center; 1715 justify-content: space-between; 1716 transition: all 0.2s; 1717 text-decoration: none; 1718 letter-spacing: 0.01em; 1719 } 1720 1721 .btn-pricing:hover { 1722 border-color: var(--orange); 1723 color: #fff; 1724 } 1725 1726 .btn-pricing.btn-pricing-featured { 1727 background: var(--orange); 1728 border-color: var(--orange); 1729 color: #fff; 1730 box-shadow: 0 4px 20px rgba(232,80,2,0.35); 1731 } 1732 1733 .btn-pricing.btn-pricing-featured:hover { 1734 filter: brightness(1.1); 1735 transform: translateY(-1px); 1736 box-shadow: 0 6px 28px rgba(232,80,2,0.45); 1737 } 1738 1739 .btn-pricing-arrow { 1740 width: 28px; height: 28px; 1741 border-radius: 50%; 1742 background: rgba(255,255,255,0.08); 1743 display: flex; 1744 align-items: center; 1745 justify-content: center; 1746 flex-shrink: 0; 1747 } 1748 1749 .btn-pricing.btn-pricing-featured .btn-pricing-arrow { 1750 background: rgba(255,255,255,0.22); 1751 } 1752 1753 .pricing-note { 1754 text-align: center; 1755 margin-top: 36px; 1756 font-size: 12px; 1757 color: #444; 1758 } 1759 1760 @media (max-width: 768px) { 1761 .pricing-toggle-wrap { display: none; } 1762 .pricing-grid { 1763 flex-direction: column; 1764 align-items: center; 1765 } 1766 .pricing-card { 1767 width: 100%; 1768 max-width: 400px; 1769 min-width: unset; 1770 } 1771 .pricing-card.featured { transform: none; } 1772 } 1773 1774 /* ============================================================ 1775 FAQ SECTION 1776 ============================================================ */ 1777 .faq-section { 1778 padding: 120px 0; 1779 background: var(--bg); 1780 border-top: 1px solid rgba(255,255,255,0.04); 1781 } 1782 1783 .faq-grid { 1784 display: grid; 1785 grid-template-columns: 1fr 1fr; 1786 gap: 48px; 1787 align-items: start; 1788 } 1789 1790 .faq-list { 1791 display: flex; 1792 flex-direction: column; 1793 gap: 12px; 1794 } 1795 1796 .faq-item { 1797 background: var(--surface); 1798 border: 1px solid var(--border); 1799 border-radius: var(--radius-sm); 1800 overflow: hidden; 1801 transition: border-color var(--transition); 1802 } 1803 1804 .faq-item.open { border-color: rgba(255,255,255,0.25); } 1805 1806 .faq-question { 1807 display: flex; 1808 align-items: center; 1809 justify-content: space-between; 1810 gap: 16px; 1811 padding: 20px 24px; 1812 cursor: pointer; 1813 font-size: 0.9rem; 1814 font-weight: 600; 1815 color: var(--text); 1816 transition: color var(--transition); 1817 user-select: none; 1818 } 1819 1820 .faq-question:hover { color: var(--orange-light); } 1821 1822 .faq-icon { 1823 width: 24px; 1824 height: 24px; 1825 border-radius: 50%; 1826 background: var(--bg-3); 1827 border: 1px solid var(--border); 1828 display: flex; 1829 align-items: center; 1830 justify-content: center; 1831 font-size: 0.9rem; 1832 color: var(--text-muted); 1833 flex-shrink: 0; 1834 transition: var(--transition); 1835 } 1836 1837 .faq-item.open .faq-icon { 1838 background: var(--orange); 1839 border-color: var(--orange); 1840 color: #fff; 1841 transform: rotate(45deg); 1842 } 1843 1844 .faq-answer { 1845 max-height: 0; 1846 overflow: hidden; 1847 transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1); 1848 } 1849 1850 .faq-item.open .faq-answer { max-height: 300px; } 1851 1852 .faq-answer-inner { 1853 padding: 0 24px 20px; 1854 font-size: 0.85rem; 1855 color: var(--text-muted); 1856 line-height: 1.7; 1857 } 1858 1859 .faq-side { position: sticky; top: 100px; } 1860 1861 .faq-side-title { 1862 font-size: 1.8rem; 1863 font-weight: 800; 1864 letter-spacing: -0.02em; 1865 color: var(--text); 1866 margin-bottom: 16px; 1867 line-height: 1.2; 1868 } 1869 1870 .faq-side-desc { 1871 font-size: 0.9rem; 1872 color: var(--text-muted); 1873 line-height: 1.7; 1874 margin-bottom: 32px; 1875 } 1876 1877 .faq-cta-box { margin-top: 32px; } 1878 1879 .faq-cta-heading { 1880 font-size: 1.4rem; 1881 font-weight: 700; 1882 color: var(--text); 1883 margin-bottom: 4px; 1884 } 1885 1886 .faq-cta-sub { 1887 font-size: 0.85rem; 1888 color: var(--text-muted); 1889 margin-bottom: 20px; 1890 line-height: 1.6; 1891 } 1892 1893 .faq-contact { 1894 display: flex; 1895 align-items: center; 1896 gap: 16px; 1897 padding: 16px 20px; 1898 background: var(--surface); 1899 border: 1px solid var(--border); 1900 border-radius: var(--radius-sm); 1901 margin-bottom: 10px; 1902 transition: var(--transition); 1903 text-decoration: none; 1904 } 1905 1906 .faq-contact:hover { border-color: rgba(255,255,255,0.9); border-width: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,0.15); } 1907 1908 .faq-contact-logo { 1909 width: 44px; 1910 height: 44px; 1911 border-radius: 50%; 1912 display: flex; 1913 align-items: center; 1914 justify-content: center; 1915 flex-shrink: 0; 1916 } 1917 1918 .faq-contact-logo--wpp { background: #25d366; } 1919 .faq-contact-logo--email { background: var(--orange); } 1920 1921 .faq-contact-info { flex: 1; } 1922 1923 .faq-contact-name { 1924 font-weight: 700; 1925 font-size: 1rem; 1926 color: var(--text); 1927 margin-bottom: 2px; 1928 } 1929 1930 .faq-contact-action { 1931 font-size: 0.8rem; 1932 color: var(--text-muted); 1933 } 1934 1935 /* ============================================================ 1936 FOUNDER SECTION 1937 ============================================================ */ 1938 .founder-section { 1939 padding: 120px 0; 1940 overflow: hidden; 1941 background: var(--bg-2); 1942 border-top: 1px solid rgba(255,255,255,0.04); 1943 } 1944 1945 .founder-grid { 1946 display: grid; 1947 grid-template-columns: 1fr 1fr; 1948 gap: 80px; 1949 align-items: center; 1950 } 1951 1952 .founder-left { position: relative; } 1953 1954 .founder-eyebrow { 1955 display: inline-flex; 1956 align-items: center; 1957 gap: 8px; 1958 background: rgba(232,81,2,0.08); 1959 border: 1px solid rgba(232,81,2,0.25); 1960 color: var(--orange); 1961 font-size: 0.72rem; 1962 font-weight: 700; 1963 letter-spacing: 0.12em; 1964 text-transform: uppercase; 1965 padding: 6px 14px; 1966 border-radius: 100px; 1967 margin-bottom: 28px; 1968 } 1969 1970 .founder-eyebrow-dot { 1971 width: 6px; 1972 height: 6px; 1973 border-radius: 50%; 1974 background: var(--orange); 1975 animation: pulse 2s infinite; 1976 } 1977 1978 .founder-name { 1979 font-size: clamp(2rem, 4vw, 3rem); 1980 font-weight: 800; 1981 line-height: 1.1; 1982 color: var(--text); 1983 margin-bottom: 8px; 1984 } 1985 1986 .founder-title { 1987 font-size: 0.9rem; 1988 color: var(--orange); 1989 font-weight: 600; 1990 letter-spacing: 0.04em; 1991 margin-bottom: 28px; 1992 } 1993 1994 .founder-bio { 1995 font-size: 0.92rem; 1996 color: var(--text-muted); 1997 line-height: 1.8; 1998 margin-bottom: 20px; 1999 max-width: 480px; 2000 } 2001 2002 .founder-bio strong { color: var(--text); font-weight: 600; } 2003 2004 .founder-divider { 2005 width: 40px; 2006 height: 3px; 2007 background: var(--orange); 2008 border-radius: 2px; 2009 margin-bottom: 20px; 2010 } 2011 2012 .founder-stats { 2013 display: flex; 2014 gap: 32px; 2015 margin-top: 40px; 2016 padding-top: 32px; 2017 border-top: 1px solid var(--border); 2018 } 2019 2020 .founder-stat-value { 2021 font-size: 1.6rem; 2022 font-weight: 800; 2023 color: var(--text); 2024 display: block; 2025 } 2026 2027 .founder-stat-label { 2028 font-size: 0.78rem; 2029 color: var(--text-muted); 2030 display: block; 2031 margin-top: 2px; 2032 } 2033 2034 /* Photo side */ 2035 .founder-right { 2036 position: relative; 2037 display: flex; 2038 justify-content: center; 2039 } 2040 2041 .founder-photo-frame { 2042 position: relative; 2043 width: 100%; 2044 max-width: 460px; 2045 } 2046 2047 .founder-photo-frame::before { 2048 content: ''; 2049 position: absolute; 2050 inset: -2px; 2051 border-radius: 20px; 2052 background: linear-gradient(135deg, var(--orange) 0%, transparent 50%, transparent 100%); 2053 z-index: 0; 2054 } 2055 2056 .founder-photo-frame::after { 2057 content: ''; 2058 position: absolute; 2059 bottom: -20px; 2060 right: -20px; 2061 width: 80px; 2062 height: 80px; 2063 border-right: 3px solid rgba(232,81,2,0.3); 2064 border-bottom: 3px solid rgba(232,81,2,0.3); 2065 border-radius: 0 0 12px 0; 2066 z-index: 0; 2067 } 2068 2069 .founder-photo-inner { 2070 position: relative; 2071 z-index: 1; 2072 border-radius: 18px; 2073 overflow: hidden; 2074 background: var(--surface); 2075 display: flex; 2076 justify-content: center; 2077 } 2078 2079 .founder-photo { 2080 display: block; 2081 width: 100%; 2082 height: auto; 2083 border-radius: 18px; 2084 transition: transform 0.6s ease, filter 0.6s ease; 2085 filter: grayscale(15%); 2086 image-rendering: -webkit-optimize-contrast; 2087 image-rendering: crisp-edges; 2088 } 2089 2090 .founder-photo-frame:hover .founder-photo { 2091 transform: scale(1.03); 2092 filter: grayscale(0%); 2093 } 2094 2095 .founder-photo-badge { 2096 position: absolute; 2097 bottom: 20px; 2098 left: 20px; 2099 background: rgba(0,0,0,0.75); 2100 backdrop-filter: blur(12px); 2101 border: 1px solid rgba(255,255,255,0.1); 2102 border-radius: 12px; 2103 padding: 12px 16px; 2104 z-index: 2; 2105 } 2106 2107 .founder-photo-badge-name { 2108 font-size: 0.85rem; 2109 font-weight: 700; 2110 color: var(--text); 2111 display: block; 2112 } 2113 2114 .founder-photo-badge-role { 2115 font-size: 0.72rem; 2116 color: var(--orange); 2117 display: block; 2118 margin-top: 2px; 2119 } 2120 2121 /* Responsive */ 2122 @media (max-width: 900px) { 2123 .founder-grid { 2124 grid-template-columns: 1fr; 2125 gap: 48px; 2126 } 2127 .founder-right { order: -1; } 2128 .founder-photo-frame { max-width: 380px; margin: 0 auto; } 2129 .founder-stats { gap: 20px; } 2130 } 2131 2132 @media (max-width: 480px) { 2133 .founder-section { padding: 80px 0; } 2134 .founder-name { font-size: 1.8rem; } 2135 .founder-stats { flex-wrap: wrap; gap: 16px; } 2136 } 2137 2138 /* ============================================================ 2139 FOOTER 2140 ============================================================ */ 2141 .footer { 2142 background: var(--bg-2); 2143 border-top: 1px solid rgba(255,255,255,0.06); 2144 padding: 64px 0 32px; 2145 } 2146 2147 .footer-top { 2148 display: grid; 2149 grid-template-columns: 1.5fr 1fr 1fr; 2150 gap: 64px; 2151 margin-bottom: 56px; 2152 } 2153 2154 .footer-brand img { 2155 height: 32px; 2156 margin-bottom: 16px; 2157 } 2158 2159 .footer-brand-desc { 2160 font-size: 0.85rem; 2161 color: var(--text-dim); 2162 line-height: 1.65; 2163 max-width: 280px; 2164 margin-bottom: 24px; 2165 } 2166 2167 .footer-socials { display: flex; gap: 10px; } 2168 2169 .social-btn { 2170 width: 36px; 2171 height: 36px; 2172 border-radius: var(--radius-xs); 2173 background: var(--surface); 2174 border: 1px solid var(--border); 2175 display: flex; 2176 align-items: center; 2177 justify-content: center; 2178 transition: var(--transition); 2179 cursor: pointer; 2180 } 2181 2182 .social-btn:hover { 2183 border-color: rgba(255,255,255,0.25); 2184 background: rgba(232, 80, 2, 0.1); 2185 } 2186 2187 .social-btn svg { 2188 width: 16px; 2189 height: 16px; 2190 fill: var(--text-dim); 2191 transition: fill var(--transition); 2192 } 2193 2194 .social-btn:hover svg { fill: var(--orange); } 2195 2196 .footer-col-title { 2197 font-size: 0.75rem; 2198 font-weight: 700; 2199 text-transform: uppercase; 2200 letter-spacing: 0.1em; 2201 color: var(--text-dim); 2202 margin-bottom: 20px; 2203 } 2204 2205 .footer-links { 2206 display: flex; 2207 flex-direction: column; 2208 gap: 12px; 2209 } 2210 2211 .footer-links a { 2212 font-size: 0.85rem; 2213 color: var(--text-dim); 2214 transition: color var(--transition); 2215 } 2216 2217 .footer-links a:hover { color: var(--text); } 2218 2219 .footer-bottom { 2220 display: flex; 2221 align-items: center; 2222 justify-content: space-between; 2223 padding-top: 32px; 2224 border-top: 1px solid var(--border); 2225 flex-wrap: wrap; 2226 gap: 16px; 2227 } 2228 2229 .footer-copy { 2230 font-size: 0.78rem; 2231 color: var(--text-dim); 2232 } 2233 2234 .footer-copy span { color: var(--orange); } 2235 2236 .footer-legal { display: flex; gap: 24px; } 2237 2238 .footer-legal a { 2239 font-size: 0.78rem; 2240 color: var(--text-dim); 2241 transition: color var(--transition); 2242 } 2243 2244 .footer-legal a:hover { color: var(--text); } 2245 2246 /* ============================================================ 2247 RESPONSIVE 2248 ============================================================ */ 2249 /* ============================================================ 2250 HAMBURGER MENU 2251 ============================================================ */ 2252 .hamburger { 2253 display: none; 2254 flex-direction: column; 2255 justify-content: center; 2256 gap: 5px; 2257 width: 40px; 2258 height: 40px; 2259 cursor: pointer; 2260 background: rgba(255,255,255,0.12); 2261 border: 1px solid rgba(255,255,255,0.25); 2262 border-radius: 8px; 2263 padding: 8px; 2264 z-index: 1100; 2265 transition: background 0.2s, border-color 0.2s; 2266 } 2267 .hamburger:hover { 2268 background: rgba(232,81,2,0.15); 2269 border-color: var(--orange); 2270 } 2271 .hamburger span { 2272 display: block; 2273 width: 100%; 2274 height: 2px; 2275 background: #fff; 2276 border-radius: 2px; 2277 transition: var(--transition); 2278 flex-shrink: 0; 2279 } 2280 .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } 2281 .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); } 2282 .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } 2283 2284 .mobile-menu { 2285 display: none; 2286 position: fixed; 2287 inset: 0; 2288 background: rgba(5,5,5,0.98); 2289 backdrop-filter: blur(20px); 2290 z-index: 1050; 2291 flex-direction: column; 2292 align-items: center; 2293 justify-content: center; 2294 gap: 4px; 2295 } 2296 .mobile-menu.open { display: flex; } 2297 2298 .mobile-menu-close { 2299 position: fixed; 2300 top: 18px; 2301 right: 20px; 2302 z-index: 1200; 2303 background: rgba(255,255,255,0.07); 2304 border: 1px solid rgba(255,255,255,0.2); 2305 border-radius: 50%; 2306 width: 44px; 2307 height: 44px; 2308 display: flex; 2309 align-items: center; 2310 justify-content: center; 2311 cursor: pointer; 2312 color: #ffffff; 2313 transition: color 0.2s, background 0.2s, border-color 0.2s; 2314 }
2315 .mobile-menu-close:hover { color: var(--orange); border-color: var(--orange); background: rgba(232,81,2,0.12); } 2316 .mobile-menu-close svg { width: 20px; height: 20px; } 2317 2318 .mobile-menu-nav { 2319 display: flex; 2320 flex-direction: column; 2321 align-items: center; 2322 gap: 0; 2323 width: 100%; 2324 } 2325 .mobile-menu a { 2326 font-size: 1.1rem; 2327 font-weight: 500; 2328 color: var(--text-muted); 2329 padding: 14px 24px; 2330 transition: color 0.2s; 2331 letter-spacing: 0.01em; 2332 width: 100%; 2333 text-align: center; 2334 } 2335 .mobile-menu a:hover { color: var(--text); } 2336 2337 .mobile-menu-divider { 2338 width: 40px; 2339 height: 1px; 2340 background: rgba(255,255,255,0.08); 2341 margin: 12px 0; 2342 } 2343 2344 .mobile-menu .mobile-cta { 2345 background: var(--orange); 2346 color: #fff !important; 2347 font-size: 0.95rem; 2348 font-weight: 600; 2349 border-radius: 100px; 2350 padding: 14px 40px; 2351 width: auto; 2352 margin-top: 8px; 2353 letter-spacing: 0.02em; 2354 } 2355 .mobile-menu .mobile-cta:hover { background: var(--orange-light); } 2356 2357 /* ============================================================ 2358 TABLET LANDSCAPE â 1024px 2359 ============================================================ */ 2360 @media (max-width: 1024px) { 2361 /* Hero */ 2362 .hero-inner { 2363 grid-template-columns: 1fr; 2364 gap: 0; 2365 text-align: center; 2366 } 2367 .hero-badge { margin: 0 auto; } 2368 .hero-ctas { justify-content: center; } 2369 .hero-subtitle { margin: 0 auto; max-width: 560px; } 2370 2371 /* Steps */ 2372 2373 /* Bento */ 2374 .bento-grid { grid-template-columns: 1fr 1fr; } 2375 .bento-large { grid-column: span 2; } 2376 .bento-stat { grid-column: span 2; flex-direction: row; align-items: center; justify-content: space-between; } 2377 .bento-small { grid-column: span 1; } 2378 .bento-calc { grid-template-columns: 1fr; gap: 32px; } 2379 .calc-right { min-height: auto; } 2380 2381 /* Pricing */ 2382 .pricing-grid { grid-template-columns: repeat(2, 1fr); } 2383 .pricing-card.featured { transform: none; } 2384 .pricing-card.featured:hover { transform: translateY(-4px); } 2385 2386 /* FAQ */ 2387 .faq-grid { grid-template-columns: 1fr; } 2388 .faq-side { position: static; } 2389 2390 /* Footer */ 2391 .footer-top { grid-template-columns: 1fr 1fr; } 2392 } 2393 2394 /* ============================================================ 2395 TABLET PORTRAIT â 768px 2396 ============================================================ */ 2397 @media (max-width: 768px) { 2398 /* Header */ 2399 .header-nav { display: none; } 2400 .btn-header { display: none; } 2401 .hamburger { display: flex; } 2402 2403 /* Hero */ 2404 .hero { padding: 100px 0 64px; min-height: auto; background-image: none; } 2405 .hero::before { background: rgba(5,5,5,0.92); } 2406 .hero-headline { font-size: clamp(2.2rem, 8vw, 3rem); } 2407 2408 /* Section titles */ 2409 .section-title { font-size: clamp(1.6rem, 6vw, 2.2rem); letter-spacing: -0.03em; } 2410 .section-subtitle { font-size: 0.9rem; } 2411 2412 /* How it works */ 2413 2414 /* Bento */ 2415 .bento-grid { grid-template-columns: 1fr; gap: 12px; } 2416 .bento-large, 2417 .bento-stat, 2418 .bento-small, 2419 .bento-calc { grid-column: span 1; } 2420 .bento-stat { flex-direction: column; align-items: flex-start; } 2421 .bento-number { font-size: 3.5rem; } 2422 .category-pills { gap: 6px; } 2423 2424 /* Calculator */ 2425 .bento-calc { grid-template-columns: 1fr; gap: 28px; padding: 28px 20px; } 2426 .calc-right { min-height: auto; } 2427 .calc-result-value { font-size: 2.2rem; } 2428 2429 /* CTA */ 2430 .cta-strip { padding: 48px 24px; border-radius: 20px; } 2431 .cta-buttons { flex-direction: column; align-items: center; gap: 12px; } 2432 .cta-buttons a { width: 100%; text-align: center; } 2433 2434 /* Pricing */ 2435 .pricing-grid { grid-template-columns: 1fr; gap: 12px; } 2436 .pricing-card.featured { transform: none; } 2437 2438 /* FAQ */ 2439 .faq-contact { display: none; } 2440 2441 /* Footer */ 2442 .footer-top { grid-template-columns: 1fr; gap: 32px; } 2443 .footer-bottom { flex-direction: column; text-align: center; gap: 12px; } 2444 } 2445 2446 /* ============================================================ 2447 MOBILE â 480px 2448 ============================================================ */ 2449 @media (max-width: 480px) { 2450 .container { padding: 0 16px; } 2451 2452 /* Header */ 2453 .header-logo img { height: 28px; } 2454 2455 /* Hero */ 2456 .hero { padding: 88px 0 52px; } 2457 .hero-headline { font-size: clamp(1.9rem, 9vw, 2.4rem); } 2458 .hero-badge { font-size: 0.7rem; padding: 5px 12px; } 2459 .hero-ctas { flex-direction: column; width: 100%; } 2460 .hero-ctas .btn-primary, 2461 .hero-ctas .btn-ghost { width: 100%; justify-content: center; } 2462 2463 /* Sections */ 2464 .features-section { padding: 60px 0; } 2465 .section-header { margin-bottom: 36px; } 2466 .section-title { font-size: 1.65rem; } 2467 2468 /* Steps */ 2469 2470 /* Bento */ 2471 .bento-card { padding: 22px 18px; } 2472 .bento-large { padding: 24px 20px; } 2473 .bento-number { font-size: 3rem; } 2474 2475 /* Calculator */ 2476 .calc-title { font-size: 1.3rem; } 2477 .calc-metrics { padding: 12px; gap: 0; } 2478 .calc-metric-val { font-size: 1rem; } 2479 .calc-result-value { font-size: 1.9rem; } 2480 2481 /* CTA */ 2482 .cta-section { padding: 0 0 60px; } 2483 .cta-strip { padding: 36px 16px; border-radius: 16px; } 2484 2485 /* Pricing */ 2486 .pricing-card { padding: 24px 20px; } 2487 .pricing-amount { font-size: 2.4rem; } 2488 2489 /* FAQ */ 2490 .faq-section { padding: 60px 0; } 2491 .faq-question { font-size: 0.9rem; padding: 16px 18px; } 2492 .faq-answer-inner { padding: 0 18px 16px; font-size: 0.875rem; } 2493 2494 /* Footer */ 2495 .footer { padding: 48px 0 32px; } 2496 .footer-brand img { height: 32px; } 2497 } 2498 2499 /* ============================================================ 2500 SMALL MOBILE â 360px 2501 ============================================================ */ 2502 /* Respeita preferência do sistema por menos animação */ 2503 @media (prefers-reduced-motion: reduce) { 2504 *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } 2505 .marquee-track { animation: none; } 2506 } 2507 2508 @media (max-width: 360px) { 2509 .hero-headline { font-size: 1.7rem; } 2510 .section-title { font-size: 1.5rem; } 2511 } 2512 2513 /* ============================================================ 2514 TESTIMONIALS SECTION 2515 ============================================================ */
2516 @keyframes scroll-up { 2517 0% { transform: translateY(0); } 2518 100% { transform: translateY(-50%); } 2519 } 2520 2521 .testimonials-section { 2522 padding: 80px 0 0; 2523 overflow: hidden; 2524 background: var(--bg); 2525 border-top: 1px solid rgba(255,255,255,0.04); 2526 } 2527 2528 .testimonials-track-wrapper { 2529 position: relative; 2530 margin-top: 48px; 2531 max-height: 560px; 2532 overflow: hidden; 2533 -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%); 2534 mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%); 2535 } 2536 2537 .testimonials-columns { 2538 display: flex; 2539 justify-content: center; 2540 gap: 16px; 2541 padding: 0 16px; 2542 max-width: 1200px; 2543 margin: 0 auto; 2544 } 2545 2546 /* Mobile: 1 coluna ocupa tudo */ 2547 .testimonials-col { 2548 flex: 1 1 100%; 2549 min-width: 0; 2550 max-width: 480px; 2551 overflow: hidden; 2552 } 2553 2554 .testimonials-col--mid { display: none; } 2555 .testimonials-col--last { display: none; } 2556 2557 @media (min-width: 640px) { 2558 .testimonials-track-wrapper { max-height: 640px; } 2559 .testimonials-columns { gap: 16px; padding: 0 24px; } 2560 .testimonials-col { flex: 0 0 calc(50% - 8px); max-width: 360px; } 2561 .testimonials-col--mid { display: block; } 2562 } 2563 2564 @media (min-width: 1024px) { 2565 .testimonials-track-wrapper { max-height: 720px; } 2566 .testimonials-columns { gap: 24px; } 2567 .testimonials-col { flex: 0 0 calc(33.333% - 16px); max-width: 360px; } 2568 .testimonials-col--last { display: block; } 2569 } 2570 2571 .testimonials-col-inner { 2572 display: flex; 2573 flex-direction: column; 2574 gap: 24px; 2575 } 2576 2577 .scroll-col-1 { animation: scroll-up 15s linear infinite; } 2578 .scroll-col-2 { animation: scroll-up 19s linear infinite; } 2579 .scroll-col-3 { animation: scroll-up 17s linear infinite; } 2580 2581 .testimonials-track-wrapper:hover .scroll-col-1, 2582 .testimonials-track-wrapper:hover .scroll-col-2, 2583 .testimonials-track-wrapper:hover .scroll-col-3 { 2584 animation-play-state: paused; 2585 } 2586 2587 .testimonial-card { 2588 background: var(--surface); 2589 border: 1px solid var(--border); 2590 border-radius: var(--radius); 2591 padding: 20px; 2592 transition: border-color var(--transition), transform var(--transition); 2593 } 2594 2595 @media (min-width: 640px) { 2596 .testimonial-card { padding: 28px; } 2597 } 2598 2599 .testimonial-card:not(.testimonial-inverted):hover { 2600 border-color: rgba(255,255,255,0.9); 2601 border-width: 2px; 2602 box-shadow: 0 0 0 1px rgba(255,255,255,0.15), 0 8px 32px rgba(0,0,0,0.5); 2603 transform: translateY(-2px); 2604 } 2605 .testimonial-inverted { 2606 background: #f5f5f5 !important; 2607 border-color: rgba(0,0,0,0.08) !important; 2608 } 2609 .testimonial-inverted .testimonial-text { color: #222; } 2610 .testimonial-inverted .testimonial-name { color: #111; } 2611 .testimonial-inverted .testimonial-role { color: #777; } 2612 .testimonial-inverted:hover { 2613 box-shadow: 0 8px 32px rgba(0,0,0,0.12); 2614 transform: translateY(-2px); 2615 } 2616 2617 .testimonial-text { 2618 font-size: 0.875rem; 2619 line-height: 1.65; 2620 color: var(--text); 2621 opacity: 0.85; 2622 } 2623 2624 .testimonial-author { 2625 display: flex; 2626 align-items: center; 2627 gap: 12px; 2628 margin-top: 20px; 2629 } 2630 2631 .testimonial-avatar { 2632 width: 40px; 2633 height: 40px; 2634 border-radius: 50%; 2635 object-fit: cover; 2636 border: 2px solid var(--border-hover); 2637 flex-shrink: 0; 2638 } 2639 2640 .testimonial-name { 2641 font-size: 0.875rem; 2642 font-weight: 600; 2643 color: var(--text); 2644 line-height: 1.3; 2645 } 2646 2647 .testimonial-role { 2648 font-size: 0.75rem; 2649 color: var(--text-muted); 2650 line-height: 1.4; 2651 } 2652 2653 /* ââ Cursor customizado laranja ââ */ 2654 html, html * { cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M2 2L22 11L13 14L9 22Z' fill='%23e85002' stroke='%23c43d00' stroke-width='1' stroke-linejoin='round'/></svg>") 2 2, auto; } 2655 html a, html button, html [onclick], html input[type="submit"], html label { cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M2 2L22 11L13 14L9 22Z' fill='%23ff6a1f' stroke='%23c43d00' stroke-width='1' stroke-linejoin='round'/></svg>") 2 2, pointer; } 2656 /* ââ HERO SECTION ââ */ 2657.hero { background: #030303 !important; min-height: 90vh !important; } 2658 #hero { 2659 background: radial-gradient(ellipse 100% 50% at 50% 0%, #1e1e1e 0%, #111 30%, #020202 70%) !important; 2660 min-height: auto !important; 2661 padding: 150px 0 60px; 2662 display: flex; 2663 align-items: center; 2664 position: relative; 2665 overflow: hidden; 2666 isolation: isolate; 2667 clip-path: inset(0); 2668 } 2669.hero::before { display: none !important; } 2670/* ââ HERO BASE ââ */ 2671 .hero { 2672 position: relative; min-height: 100vh; 2673 display: flex; align-items: center; 2674 padding: 120px 0 80px; overflow: hidden; 2675 background: #020202; 2676 } 2677 .container { 2678 width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; 2679 position: relative; z-index: 10; 2680 } 2681 .hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } 2682 2683/* ââ HEADLINE ââ */ 2684 .hero-headline { 2685 font-size: clamp(2.8rem, 5vw, 4rem); font-weight: 800; 2686 line-height: 1.1; letter-spacing: -0.03em; color: var(--text); 2687 } 2688 .hero-headline .line-strike { position: relative; display: inline-block; } 2689 .hero-headline .line-strike::after { 2690 content: ''; position: absolute; left: 0; top: 55%; 2691 height: 4px; background: var(--orange); border-radius: 2px; width: 0; 2692 } 2693 .hero-headline .line-strike.animate::after { 2694 animation: strike 0.5s ease-out 0.8s forwards; 2695 } 2696 .hero-headline .line-orange { 2697 background: linear-gradient(135deg, var(--orange) 0%, var(--orange-light) 100%); 2698 -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; 2699 } 2700 2701 .hero-subtitle { 2702 font-size: 1.05rem; font-weight: 400; 2703 color: var(--text-muted); line-height: 1.7; max-width: 480px; 2704 } 2705 2706 /* ââ CTAS ââ */ 2707 .hero-ctas { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } 2708 .btn-primary { 2709 display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; 2710 background: linear-gradient(135deg, var(--orange) 0%, var(--orange-light) 100%); 2711 color: #fff; font-family: var(--font); font-size: 0.95rem; font-weight: 700; 2712 border-radius: 100px; border: none; cursor: pointer; transition: var(--transition); 2713 box-shadow: 0 4px 24px rgba(232,80,2,0.4); white-space: nowrap; 2714 } 2715 .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(232,80,2,0.55); } 2716 .btn-arrow { 2717 width: 28px; height: 28px; border-radius: 50%; 2718 background: rgba(255,255,255,0.18); 2719 display: inline-flex; align-items: center; justify-content: center; 2720 transition: transform 0.25s ease; flex-shrink: 0; 2721 } 2722 .btn-primary:hover .btn-arrow { transform: rotate(45deg); }
2723 .btn-arrow svg { width: 14px; height: 14px; stroke: #fff; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; } 2724 .btn-ghost { 2725 display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; 2726 background: transparent; border: 1px solid var(--border); 2727 color: var(--text-muted); font-family: var(--font); font-size: 0.95rem; font-weight: 500; 2728 border-radius: 100px; cursor: pointer; transition: var(--transition); white-space: nowrap; 2729 } 2730 .btn-ghost:hover { border-color: rgba(255,255,255,0.2); color: var(--text); } 2731 2732 /* ââ SOCIAL PROOF ââ */ 2733 .social-proof { 2734 display: inline-flex; 2735 align-items: center; 2736 gap: 20px; 2737 padding: 10px 18px 10px 12px; 2738 background: rgba(255,255,255,0.025); 2739 border: 1px solid rgba(255,255,255,0.06); 2740 border-radius: 100px; 2741 backdrop-filter: blur(12px); 2742 -webkit-backdrop-filter: blur(12px); 2743 transition: border-color 0.3s ease, background 0.3s ease; 2744 } 2745 .social-proof:hover { 2746 border-color: rgba(232,80,2,0.25); 2747 background: rgba(232,80,2,0.04); 2748 } 2749 .sp-avatars { display: flex; align-items: center; } 2750 .sp-avatar { 2751 width: 32px; height: 32px; 2752 border-radius: 50%; 2753 border: 2px solid #0a0a0a; 2754 margin-left: -10px; 2755 overflow: hidden; 2756 flex-shrink: 0; 2757 } 2758 .sp-avatar:first-child { margin-left: 0; } 2759 .sp-avatar svg, .sp-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; } 2760 .sp-divider { width: 1px; height: 22px; background: rgba(255,255,255,0.1); } 2761 .sp-copy { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; } 2762 .sp-rating { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 700; color: var(--text); } 2763 .sp-stars { display: inline-flex; gap: 1px; } 2764 .sp-stars svg { width: 13px; height: 13px; fill: #ffb020; } 2765 .sp-text { font-size: 0.72rem; font-weight: 500; color: var(--text-muted); } 2766 .sp-text strong { color: var(--text); font-weight: 700; } 2767 2768 .marquee-dot{width:5px;height:5px;border-radius:50%;background:var(--orange);flex-shrink:0} 2769 2770 /* ââââââââââââââââââââââââââââââââââââââââ 2771 RESPONSIVO 2772 ââââââââââââââââââââââââââââââââââââââââ */ 2773 2774 /* Tablet */ 2775 @media (max-width: 900px) { 2776 .hero { padding: 110px 0 72px; } 2777 .hero-inner { 2778 grid-template-columns: 1fr; 2779 gap: 40px; 2780 justify-items: center; 2781 } 2782 .hero-subtitle { max-width: 100%; } 2783 .hero-ctas { justify-content: center; } 2784 2785 /* glow laranja centralizado no tablet */ 2786 .base-glow { 2787 bottom: auto; 2788 top: 50%; 2789 left: 50%; 2790 transform: translate(-50%, -50%); 2791 width: 500px; 2792 height: 500px; 2793 background: radial-gradient(ellipse at center, rgba(232,80,2,0.18) 0%, transparent 70%); 2794 } 2795 } 2796 2797 /* Mobile */ 2798 @media (max-width: 640px) { 2799 2800 /* Hero base */ 2801 .hero { 2802 padding: 100px 0 64px; 2803 min-height: 100svh; 2804 align-items: flex-start; 2805 } 2806 .container { padding: 0 20px; } 2807 .hero-inner { gap: 0; } 2808 .hero-subtitle { max-width: 100%; } 2809 2810 /* Badge */ 2811 .hero-badge { font-size: 0.72rem; padding: 5px 12px; } 2812 2813 /* Headline â menor e mais legÃvel em tela pequena */ 2814 .hero-headline { 2815 font-size: clamp(2rem, 9vw, 2.8rem); 2816 letter-spacing: -0.025em; 2817 } 2818 2819 /* Subtitle */ 2820 .hero-subtitle { font-size: 0.95rem; max-width: 100%; } 2821 2822 /* CTAs â empilha verticalmente, centralizado */ 2823 .hero-ctas { flex-direction: column; align-items: center; gap: 12px; } 2824 .btn-primary, .btn-ghost { width: 100%; justify-content: center; } 2825 2826 /* glow laranja centralizado no mobile â igual ao index */ 2827 .base-glow { 2828 bottom: auto; 2829 top: 50%; 2830 left: 50%; 2831 transform: translate(-50%, -50%); 2832 width: 420px; 2833 height: 420px; 2834 background: radial-gradient(ellipse at center, rgba(232,80,2,0.22) 0%, transparent 70%); 2835 } 2836 2837 /* Vinheta â no mobile cobre toda a tela por cima e por baixo */ 2838 .side-vignette { 2839 background: 2840 linear-gradient(to bottom, rgba(2,2,2,0.7) 0%, transparent 25%), 2841 linear-gradient(to top, rgba(2,2,2,0.8) 0%, transparent 30%); 2842 } 2843 2844 /* Glow de base mais sutil */ 2845 .base-glow { height: 200px; opacity: 0.8; } 2846 2847 /* Version tag â esconde no mobile (espaço pequeno) */ 2848 2849 /* Marquee dentro do hero â margem menor + texto menor */ 2850 .marquee-item span { font-size: 0.78rem; } 2851 .marquee-item { padding: 0 14px; } 2852 2853 /* Hero CTA â empilha verticalmente */ 2854 .hero-ctas { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; width: 100%; } 2855 .hero-ctas .btn-primary, 2856 .hero-ctas .btn-ghost { width: 100% !important; justify-content: center !important; padding: 16px 24px !important; font-size: 0.95rem !important; } 2857 2858 /* Hero subtitle */ 2859 .hero-subtitle { font-size: 1rem !important; } 2860 } 2861 2862 /* Mobile pequeno */ 2863 @media (max-width: 390px) { 2864 .hero-headline { font-size: clamp(1.75rem, 9vw, 2rem); } 2865 .marquee-item span { font-size: 0.72rem; } 2866 } 2867 2868/* BENTO INJECTED CSS */ 2869 .features-section { 2870 padding: 0 0 120px; 2871 } 2872 2873 .bento-grid { 2874 display: grid; 2875 grid-template-columns: repeat(12, 1fr); 2876 gap: 16px; 2877 } 2878 2879 .bento-card { 2880 background: #0d0d0d; 2881 border: 1px solid rgba(255,255,255,0.07); 2882 border-radius: var(--radius); 2883 padding: 32px; 2884 transition: var(--transition); 2885 overflow: hidden; 2886 position: relative; 2887 } 2888 2889 .bento-card:not(.bento-inverted):hover { 2890 border-color: rgba(255,255,255,0.9); 2891 border-width: 2px; 2892 box-shadow: 0 0 0 1px rgba(255,255,255,0.15), 0 8px 32px rgba(0,0,0,0.5); 2893 transform: translateY(-3px); 2894 } 2895 .bento-inverted:hover { 2896 box-shadow: 0 8px 32px rgba(0,0,0,0.12); 2897 transform: translateY(-3px); 2898 } 2899 2900 .bento-large { grid-column: span 8; } 2901 .bento-stat { 2902 grid-column: span 4; 2903 display: flex; 2904 flex-direction: column; 2905 justify-content: center; 2906 gap: 8px; 2907 background: linear-gradient(135deg, var(--surface) 0%, rgba(232, 80, 2, 0.05) 100%); 2908 border-color: rgba(232, 80, 2, 0.15); 2909 } 2910 .bento-small { grid-column: span 3; } 2911 2912 .bento-number { 2913 font-size: 5rem; 2914 font-weight: 900; 2915 background: linear-gradient(135deg, var(--orange) 0%, var(--orange-light) 100%); 2916 -webkit-background-clip: text; 2917 -webkit-text-fill-color: transparent; 2918 background-clip: text; 2919 line-height: 1; 2920 letter-spacing: -0.04em; 2921 } 2922 2923 .bento-number-label { 2924 font-size: 1.1rem; 2925 font-weight: 700; 2926 color: var(--text); 2927 } 2928 2929 .bento-number-sub { 2930 font-size: 0.78rem; 2931 color: var(--text-dim); 2932 max-width: 160px; 2933 line-height: 1.5; 2934 } 2935 2936 .bento-title { 2937 font-size: 1.25rem; 2938 font-weight: 700; 2939 color: var(--text); 2940 margin-bottom: 10px; 2941 } 2942 2943 .bento-desc { 2944 font-size: 0.85rem; 2945 color: var(--text-muted); 2946 line-height: 1.6; 2947 margin-bottom: 20px; 2948 } 2949 2950 .category-pills { 2951 display: flex; 2952 flex-wrap: wrap; 2953 gap: 8px; 2954 } 2955 2956 .pill { 2957 display: inline-flex; 2958 align-items: center; 2959 padding: 5px 12px; 2960 background: var(--bg-3); 2961 border: 1px solid var(--border); 2962 border-radius: 100px; 2963 font-size: 0.72rem; 2964 font-weight: 600; 2965 color: var(--text-muted); 2966 white-space: nowrap; 2967 } 2968 2969 .pill.orange { 2970 background: rgba(232, 80, 2, 0.1); 2971 border-color: rgba(232, 80, 2, 0.25); 2972 color: var(--orange-light); 2973 } 2974 2975 .bento-icon { 2976 width: 48px; 2977 height: 48px; 2978 background: rgba(232, 80, 2, 0.08); 2979 border: 1px solid rgba(232, 80, 2, 0.2); 2980 border-radius: 12px; 2981 display: flex; 2982 align-items: center; 2983 justify-content: center; 2984 margin-bottom: 18px; 2985 } 2986 2987 .bento-small-title { 2988 font-size: 0.95rem; 2989 font-weight: 700; 2990 color: var(--text); 2991 margin-bottom: 6px; 2992 } 2993 2994 .bento-small-desc { 2995 font-size: 0.8rem; 2996 color: var(--text-muted); 2997 line-height: 1.55; 2998 } 2999 3000 .bento-glow-overlay { 3001 position: absolute; 3002 inset: 0; 3003 background: radial-gradient(ellipse at bottom right, rgba(232, 80, 2, 0.06), transparent 70%); 3004 pointer-events: none; 3005 } 3006 3007 /* ============================================================ 3008 CTA STRIP 3009 ============================================================ */ 3010 /* ============================================================ 3011 ROI CALCULATOR 3012 ============================================================ */ 3013 .bento-calc { 3014 grid-column: span 12; 3015 display: grid; 3016 grid-template-columns: 1fr 1fr; 3017 gap: 48px; 3018 align-items: start; 3019 background: #fff; 3020 border-color: rgba(0,0,0,0.08); 3021 padding: 40px; 3022 } 3023 3024 .calc-eyebrow { 3025 display: inline-flex; 3026 align-items: center; 3027 gap: 6px; 3028 font-size: 0.7rem; 3029 font-weight: 700; 3030 color: var(--orange); 3031 text-transform: uppercase; 3032 letter-spacing: 0.12em; 3033 margin-bottom: 16px; 3034 } 3035 3036 .calc-title { 3037 font-size: 1.6rem; 3038 font-weight: 800; 3039 line-height: 1.2; 3040 letter-spacing: -0.04em; 3041 margin-bottom: 10px; 3042 color: #111; 3043 } 3044 .calc-title-highlight { color: var(--orange); } 3045 3046 .calc-subtitle { 3047 font-size: 0.875rem; 3048 color: #666; 3049 margin-bottom: 28px; 3050 line-height: 1.6; 3051 } 3052 3053 .calc-inputs { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; } 3054 3055 .calc-field label { 3056 display: block; 3057 font-size: 0.75rem; 3058 font-weight: 600; 3059 color: #444; 3060 margin-bottom: 6px; 3061 text-transform: uppercase; 3062 letter-spacing: 0.06em; 3063 } 3064 3065 .calc-input-wrap { 3066 position: relative; 3067 } 3068 3069 .calc-prefix { 3070 position: absolute; 3071 left: 12px; 3072 top: 50%; 3073 transform: translateY(-50%); 3074 font-size: 0.8rem; 3075 font-weight: 600; 3076 color: #888; 3077 pointer-events: none; 3078 } 3079 3080 .calc-field input { 3081 width: 100%; 3082 background: #f5f5f5; 3083 border: 1px solid #e0e0e0; 3084 border-radius: var(--radius-xs); 3085 padding: 12px 16px; 3086 font-family: var(--font); 3087 font-size: 0.9rem; 3088 font-weight: 500; 3089 color: #111; 3090 outline: none; 3091 transition: border-color 0.2s; 3092 -moz-appearance: textfield; 3093 } 3094 .calc-field input::-webkit-outer-spin-button, 3095 .calc-field input::-webkit-inner-spin-button { -webkit-appearance: none; } 3096 .calc-field input:focus { border-color: var(--orange); } 3097 .calc-field input::placeholder { color: var(--text-dim); } 3098 3099 .calc-btn { 3100 width: 100%; 3101 background: var(--orange); 3102 color: #fff; 3103 font-family: var(--font); 3104 font-size: 0.9rem; 3105 font-weight: 700; 3106 padding: 14px 20px; 3107 border: none; 3108 border-radius: var(--radius-xs); 3109 cursor: pointer; 3110 transition: var(--transition); 3111 letter-spacing: 0.02em; 3112 } 3113 .calc-btn:hover { background: var(--orange-light); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(232,80,2,0.35); } 3114 3115 /* Right result panel */ 3116 .calc-right { 3117 display: flex; 3118 align-items: center; 3119 justify-content: center; 3120 min-height: 280px; 3121 } 3122 3123 .calc-result-empty { 3124 text-align: center; 3125 color: var(--text-dim); 3126 font-size: 0.85rem; 3127 display: flex; 3128 flex-direction: column; 3129 align-items: center; 3130 gap: 16px; 3131 } 3132 3133 .calc-result-panel { 3134 display: none; 3135 width: 100%; 3136 background: var(--bg-2); 3137 border: 1px solid rgba(232, 80, 2, 0.2); 3138 border-radius: var(--radius-sm); 3139 padding: 28px; 3140 animation: fadeUp 0.4s ease; 3141 } 3142 3143 .calc-result-panel.visible { 3144 display: block; 3145 } 3146 .calc-result-label { 3147 font-size: 0.75rem; 3148 font-weight: 600; 3149 color: var(--text-muted); 3150 text-transform: uppercase; 3151 letter-spacing: 0.08em; 3152 margin-bottom: 6px; 3153 } 3154 .calc-result-label--sub { margin-top: 4px; } 3155 .calc-result-highlight { color: var(--orange); font-weight: 700; } 3156 3157 .calc-result-value { 3158 font-size: 2.8rem; 3159 font-weight: 900; 3160 color: var(--orange); 3161 line-height: 1; 3162 letter-spacing: -0.04em; 3163 margin-bottom: 4px; 3164 } 3165 3166 .calc-metrics { 3167 display: flex; 3168 align-items: center; 3169 gap: 0; 3170 margin: 24px 0 20px; 3171 background: var(--bg-3); 3172 border-radius: 10px; 3173 padding: 16px 20px; 3174 } 3175 .calc-metric { flex: 1; text-align: center; } 3176 .calc-metric-val { font-size: 1.2rem; font-weight: 800; color: var(--text); margin-bottom: 4px; } 3177 .calc-metric-lab { font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; } 3178 .calc-metric-div { width: 1px; height: 36px; background: var(--border); flex-shrink: 0; } 3179 3180 .calc-cta-btn { 3181 display: block; 3182 text-align: center; 3183 background: linear-gradient(135deg, var(--orange-dark), var(--orange-light)); 3184 color: #fff; 3185 font-size: 0.875rem; 3186 font-weight: 700; 3187 padding: 13px 20px; 3188 border-radius: var(--radius-xs); 3189 transition: var(--transition); 3190 letter-spacing: 0.02em; 3191 } 3192 .calc-cta-btn:hover { opacity: 0.9; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(232,80,2,0.35); } 3193 3194 @media (max-width: 768px) { 3195 .bento-calc { grid-template-columns: 1fr; gap: 32px; } 3196 .calc-right { min-height: auto; } 3197 } 3198 3199 .cta-section { 3200 padding: 0 0 120px; 3201 } 3202 3203 .cta-strip { 3204 background: linear-gradient(135deg, var(--surface) 0%, rgba(232, 80, 2, 0.08) 50%, var(--surface) 100%); 3205 border: 1px solid rgba(232, 80, 2, 0.2); 3206 border-radius: 32px; 3207 padding: 72px 48px; 3208 text-align: center; 3209 position: relative; 3210 overflow: hidden; 3211 } 3212 3213 .cta-strip::before { 3214 content: ''; 3215 position: absolute; 3216 top: 0; left: 50%; 3217 transform: translateX(-50%); 3218 width: 400px; 3219 height: 1px; 3220 background: linear-gradient(to right, transparent, var(--orange), transparent); 3221 } 3222 3223 .cta-strip::after { 3224 content: ''; 3225 position: absolute; 3226 top: -80px; 3227 left: 50%; 3228 transform: translateX(-50%); 3229 width: 600px; 3230 height: 300px; 3231 background: radial-gradient(ellipse at center, rgba(232, 80, 2, 0.12), transparent 70%); 3232 pointer-events: none; 3233 } 3234 3235 .cta-urgency { 3236 display: inline-flex; 3237 align-items: center; 3238 gap: 8px; 3239 padding: 6px 16px; 3240 background: rgba(232, 80, 2, 0.12); 3241 border: 1px solid rgba(232, 80, 2, 0.3); 3242 border-radius: 100px; 3243 font-size: 0.75rem; 3244 font-weight: 700; 3245 color: var(--orange-light); 3246 letter-spacing: 0.06em; 3247 text-transform: uppercase; 3248 margin-bottom: 24px; 3249 } 3250 3251 .cta-strip .section-title { margin-bottom: 16px; } 3252 .cta-strip .section-subtitle { margin: 0 auto 40px; } 3253 3254 .cta-buttons { 3255 display: flex; 3256 align-items: center; 3257 justify-content: center; 3258 gap: 16px; 3259 flex-wrap: wrap; 3260 } 3261 3262 .cta-note { 3263 margin-top: 20px; 3264 font-size: 0.78rem; 3265 color: var(--text-dim); 3266 } 3267 3268 /* ============================================================ 3269 PRICING SECTION 3270 ============================================================ */ 3271 .pricing-section { 3272 padding: 120px 0; 3273 background: var(--bg); 3274 position: relative; 3275 border-top: 1px solid rgba(255,255,255,0.04); 3276 } 3277 3278 .pricing-section::before { 3279 content: ''; 3280 position: absolute; 3281 inset: 0; 3282 pointer-events: none; 3283 } 3284 3285 @media (max-width: 900px) { 3286 /* Bento */ 3287 .bento-grid { grid-template-columns: 1fr 1fr; } 3288 .bento-large { grid-column: span 2; } 3289 .bento-stat { grid-column: span 2; flex-direction: row; align-items: center; justify-content: space-between; } 3290 .bento-small { grid-column: span 1;
3290} 3291 .bento-calc { grid-template-columns: 1fr; gap: 32px; } 3292 .calc-right { min-height: auto; } 3293 /* Pricing */ 3294 .pricing-grid { grid-template-columns: 1fr; gap: 12px; } 3295 .pricing-card.featured { transform: none; } 3296 /* Seções */ 3297 .pricing-section { padding: 80px 0; } 3298 } 3299 3300 @media (max-width: 640px) { 3301 .bento-grid { grid-template-columns: 1fr; gap: 12px; } 3302 .bento-large, 3303 .bento-stat, 3304 .bento-small, 3305 .bento-calc { grid-column: span 1; } 3306 .bento-stat { flex-direction: column; align-items: flex-start; } 3307 .bento-number { font-size: 3.5rem; } 3308 .category-pills { gap: 6px; } 3309 /* Calculator */ 3310 .bento-calc { grid-template-columns: 1fr; gap: 28px; padding: 28px 20px; } 3311 .calc-right { min-height: auto; } 3312 .calc-result-value { font-size: 2.2rem; } 3313 /* Pricing */ 3314 .pricing-grid { grid-template-columns: 1fr; gap: 12px; } 3315 .pricing-card.featured { transform: none; } 3316 .pricing-section { padding: 60px 0; } 3317 /* Testimonials */ 3318 .testimonials-grid { grid-template-columns: 1fr; } 3319 /* Footer */ 3320 .footer-top { grid-template-columns: 1fr; gap: 32px; } 3321 .footer-bottom { flex-direction: column; text-align: center; gap: 12px; } 3322 /* How it works */ 3323 } 3324 3325 @media (max-width: 480px) { 3326 .container { padding: 0 16px; } 3327 .pricing-amount { font-size: 2.4rem; } 3328 .pricing-card { padding: 24px 20px; } 3329 .bento-card { padding: 22px 18px; } 3330 } 3331 3332 3333 .float-bubble { 3334 position: absolute; 3335 pointer-events: none; 3336 z-index: 2; 3337 will-change: transform; 3338 display: flex; 3339 align-items: center; 3340 justify-content: center; 3341 border-radius: 50%; 3342 background: rgba(255,255,255,0.08); 3343 border: 1px solid rgba(255,255,255,0.14); 3344 backdrop-filter: blur(8px); 3345 -webkit-backdrop-filter: blur(8px); 3346 box-shadow: 0 4px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1); 3347 } 3348 .float-bubble img { display: block; } 3349 @keyframes float-a { 3350 0%,100% { transform: translateY(0px) rotate(-4deg); } 3351 50% { transform: translateY(-18px) rotate(2deg); } 3352 } 3353 @keyframes float-b { 3354 0%,100% { transform: translateY(0px) rotate(3deg); } 3355 50% { transform: translateY(-24px) rotate(-3deg); } 3356 } 3357 @keyframes float-c { 3358 0%,100% { transform: translateY(0px) rotate(-2deg); } 3359 50% { transform: translateY(-14px) rotate(4deg); } 3360 } 3361 @keyframes float-d { 3362 0%,100% { transform: translateY(0px) rotate(5deg); } 3363 50% { transform: translateY(-20px) rotate(-2deg); } 3364 } 3365 @media (max-width: 768px) { .float-bubble { display: none; } } 3366 @keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } 3367 .floating-cta { 3368 position: fixed; 3369 bottom: 28px; 3370 right: 32px; 3371 transform: translateY(20px); 3372 z-index: 9990; 3373 display: flex; 3374 align-items: center; 3375 gap: 14px; 3376 background: rgba(13, 13, 13, 0.75); 3377 backdrop-filter: blur(18px) saturate(160%); 3378 -webkit-backdrop-filter: blur(18px) saturate(160%); 3379 border: 1px solid rgba(255, 255, 255, 0.09); 3380 border-radius: 999px; 3381 padding: 10px 10px 10px 18px; 3382 box-shadow: 0 8px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(232,80,2,0.08); 3383 opacity: 0; 3384 transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease; 3385 white-space: nowrap; 3386 } 3387 3388 .floating-cta.visible { 3389 opacity: 1; 3390 transform: translateY(0); 3391 } 3392 3393 .floating-cta:hover { 3394 box-shadow: 0 12px 50px rgba(0,0,0,0.65), 0 0 0 1px rgba(232,80,2,0.25); 3395 } 3396 3397 .floating-cta-logo { 3398 display: flex; 3399 align-items: center; 3400 gap: 9px; 3401 color: var(--text); 3402 font-family: 'Surgena', 'Poppins', sans-serif; 3403 font-weight: 800; 3404 font-size: 1rem; 3405 letter-spacing: 0.01em; 3406 user-select: none; 3407 } 3408 3409 .floating-cta-logo img { 3410 height: 26px; 3411 width: auto; 3412 display: block; 3413 } 3414
3415 .floating-cta-divider { 3416 width: 1px; 3417 height: 22px; 3418 background: rgba(255,255,255,0.1); 3419 flex-shrink: 0; 3420 } 3421 3422 .floating-cta-btn { 3423 display: flex; 3424 align-items: center; 3425 gap: 8px; 3426 background: linear-gradient(135deg, var(--orange-light), var(--orange-dark)); 3427 color: #fff; 3428 font-family: var(--font); 3429 font-weight: 600; 3430 font-size: 0.88rem; 3431 letter-spacing: 0.01em; 3432 border: none; 3433 border-radius: 999px; 3434 padding: 10px 20px 10px 22px; 3435 cursor: pointer; 3436 text-decoration: none; 3437 transition: filter 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; 3438 box-shadow: 0 4px 18px rgba(232,80,2,0.35); 3439 position: relative; 3440 overflow: hidden; 3441 } 3442 3443 .floating-cta-btn::before { 3444 content: ''; 3445 position: absolute; 3446 inset: 0; 3447 background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, transparent 60%); 3448 border-radius: inherit; 3449 opacity: 0; 3450 transition: opacity 0.25s ease; 3451 } 3452 3453 .floating-cta-btn:hover { 3454 filter: brightness(1.1); 3455 transform: scale(1.04); 3456 box-shadow: 0 6px 28px rgba(232,80,2,0.55); 3457 } 3458 3459 .floating-cta-btn:hover::before { opacity: 1; } 3460 3461 .floating-cta-btn:active { transform: scale(0.97); } 3462 3463 .floating-cta-arrow { 3464 width: 26px; 3465 height: 26px; 3466 background: rgba(255,255,255,0.18); 3467 border-radius: 50%; 3468 display: flex; 3469 align-items: center; 3470 justify-content: center; 3471 flex-shrink: 0; 3472 transition: background 0.25s ease, transform 0.25s ease; 3473 } 3474 3475 .floating-cta-btn:hover .floating-cta-arrow { 3476 background: rgba(255,255,255,0.3); 3477 transform: rotate(45deg); 3478 } 3479 3480 .floating-cta-arrow svg { 3481 width: 13px; 3482 height: 13px; 3483 fill: none; 3484 stroke: #fff; 3485 stroke-width: 2.2; 3486 stroke-linecap: round; 3487 stroke-linejoin: round; 3488 } 3489 3490 @media (max-width: 480px) { 3491 .floating-cta { bottom: 18px; right: 18px; padding: 8px 8px 8px 14px; gap: 10px; } 3492 .floating-cta-logo img { height: 22px; } 3493 .floating-cta-btn { font-size: 0.82rem; padding: 9px 16px 9px 18px; } 3494 } 3495 /* Grid 3D */ 3496 .grid3d-section { 3497 position: relative; 3498 height: 100vh; 3499 overflow: hidden; 3500 background: #050505; 3501 } 3502 .grid3d-stage { 3503 position: absolute; 3504 inset: 0; 3505 perspective: 1200px; 3506 pointer-events: none; 3507 } 3508 .grid3d-world { 3509 width: 100%; 3510 height: 100%; 3511 transform-style: preserve-3d; 3512 transform: rotateX(22deg) rotateZ(-6deg) translateY(-20%) scale(1.15); 3513 } 3514 .grid3d-row { 3515 display: flex; 3516 gap: 16px; 3517 margin-bottom: 16px; 3518 will-change: transform; 3519 } 3520 .grid3d-card { 3521 flex-shrink: 0; 3522 width: 260px; 3523 height: 160px; 3524 border-radius: 12px; 3525 background: #111; 3526 border: 1px solid rgba(255,255,255,0.07); 3527 overflow: hidden; 3528 } 3529 .grid3d-card.has-image::before { display: none; } 3530 .grid3d-card:not(.has-image)::before { 3531 content: ''; 3532 position: absolute; 3533 inset: 0; 3534 background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%); 3535 } 3536 .grid3d-overlay { 3537 position: absolute; 3538 inset: 0; 3539 background: 3540 radial-gradient(ellipse 50% 50% at 50% 50%, rgba(232,80,2,0.10) 0%, transparent 55%), 3541 radial-gradient(ellipse 80% 40% at 50% 50%, rgba(5,5,5,0.2) 0%, rgba(5,5,5,0.75) 55%, #050505 90%), 3542 linear-gradient(to bottom, #020202 0%, transparent 15%); 3543 pointer-events: none; 3544 } 3545</style> 3546</head> 3547 3548<body> 3549 3550 <!-- ============================================================ 3551 HEADER 3552 ============================================================ --> 3553 <header class="header" id="header"> 3554 <div class="container"> 3555 <div class="header-inner"> 3556 <a href="#" class="header-logo" aria-label="INJECTA Home"> 3557 <img src="Logo-Injecta-SVG.png" alt="INJECTA" /> 3558 </a> 3559 <nav class="header-nav"> 3560 <a href="#como-funciona">Como funciona</a> 3561 <a href="#planos">Planos</a> 3562 <a href="#faq">FAQ</a> 3563 </nav> 3564 <a href="login.html" class="btn-header">Entrar</a> 3565 <button class="hamburger" id="hamburger" aria-label="Menu" aria-expanded="false">
3566 <span></span><span></span><span></span> 3567 </button> 3568 </div> 3569 </div> 3570 </header> 3571 3572 <!-- MOBILE MENU --> 3573 <div class="mobile-menu" id="mobileMenu" role="dialog" aria-label="Menu de navegação"> 3574 <button class="mobile-menu-close" onclick="closeMobileMenu()" aria-label="Fechar menu"> 3575 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> 3576 <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/> 3577 </svg> 3578 </button> 3579 <nav class="mobile-menu-nav"> 3580 <a href="#como-funciona" onclick="closeMobileMenu()">Como funciona</a> 3581 <a href="#planos" onclick="closeMobileMenu()">Planos</a> 3582 <a href="#faq" onclick="closeMobileMenu()">FAQ</a> 3583 </nav> 3584 <div class="mobile-menu-divider"></div> 3585 <a href="login.html" class="mobile-cta" onclick="closeMobileMenu()">Entrar</a> 3586 </div> 3587 3588 <!-- ââââââââââââââââââââââââââ VERSÃO F â FITA LARANJA 3D ââââââââââââââââââââââââââ --> 3589<section class="hero active" id="hero"> 3590 3591 <!-- ââ Ãcones flutuantes ââ --> 3592 3593 <!-- Linhas tracejadas entre Ãcones --> 3594 <svg id="hero-connections" style="position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1;" preserveAspectRatio="none"> 3595 <defs> 3596 <linearGradient id="line-grad" x1="0%" y1="0%" x2="100%" y2="0%"> 3597 <stop offset="0%" stop-color="rgba(232,80,2,0)" /> 3598 <stop offset="50%" stop-color="rgba(232,80,2,0.35)" /> 3599 <stop offset="100%" stop-color="rgba(232,80,2,0)" /> 3600 </linearGradient> 3601 </defs> 3602 <!-- WordPress(16%,22%) â Elementor(84%,20%) --> 3603 <line x1="16%" y1="22%" x2="84%" y2="20%" stroke="url(#line-grad)" stroke-width="1.5" stroke-dasharray="6 5" opacity="0.7"/> 3604 <!-- Elementor(84%,20%) â Figma(90%,50%) --> 3605 <line x1="84%" y1="20%" x2="90%" y2="50%" stroke="url(#line-grad)" stroke-width="1.5" stroke-dasharray="6 5" opacity="0.7"/> 3606 <!-- Figma(90%,50%) â Injecta(82%,82%) --> 3607 <line x1="90%" y1="50%" x2="82%" y2="82%" stroke="url(#line-grad)" stroke-width="1.5" stroke-dasharray="6 5" opacity="0.7"/> 3608 <!-- Injecta(82%,82%) â Chrome(18%,84%) --> 3609 <line x1="82%" y1="82%" x2="18%" y2="84%" stroke="url(#line-grad)" stroke-width="1.5" stroke-dasharray="6 5" opacity="0.7"/> 3610 <!-- Chrome(18%,84%) â Opera(10%,50%) --> 3611 <line x1="18%" y1="84%" x2="10%" y2="50%" stroke="url(#line-grad)" stroke-width="1.5" stroke-dasharray="6 5" opacity="0.7"/> 3612 <!-- Opera(10%,50%) â WordPress(16%,22%) --> 3613 <line x1="10%" y1="50%" x2="16%" y2="22%" stroke="url(#line-grad)" stroke-width="1.5" stroke-dasharray="6 5" opacity="0.7"/> 3614 </svg> 3615 3616 <!-- Opera â meio esquerdo --> 3617 <div class="float-bubble" style="width:54px; height:54px; top:50%; left:10%; animation: float-d 5.2s ease-in-out infinite 0.3s;"> 3618 <img src="https://cdn.simpleicons.org/opera/FF1B2D" alt="Opera" style="width:28px; height:28px; opacity:0.9;"> 3619 </div> 3620 3621 <!-- WordPress â esquerda --> 3622 <div class="float-bubble" style="width:72px; height:72px; top:22%; left:16%; animation: float-a 5s ease-in-out infinite;"> 3623 <img src="https://cdn.simpleicons.org/wordpress/21759B" alt="WordPress" style="width:36px; height:36px; opacity:0.9;"> 3624 </div> 3625 3626 <!-- Elementor â direita --> 3627 <div class="float-bubble" style="width:66px; height:66px; top:20%; right:16%; animation: float-b 4s ease-in-out infinite 0.8s;"> 3628 <img src="https://cdn.simpleicons.org/elementor/E2384B" alt="Elementor" style="width:33px; height:33px; opacity:0.9;"> 3629 </div> 3630 3631 <!-- Injecta â baixo direito --> 3632 <div class="float-bubble" style="width:58px; height:58px; bottom:18%; right:18%; animation: float-c 6s ease-in-out infinite 1.5s;"> 3633 <img src="icons/icon-branco.png" alt="INJECTA" style="width:30px; height:30px; opacity:0.9;"> 3634 </div> 3635 3636 <!-- Chrome â baixo esquerdo --> 3637 <div class="float-bubble" style="width:62px; height:62px; bottom:16%; left:18%; animation: float-b 5.5s ease-in-out infinite 1s;"> 3638 <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/chrome/chrome-original.svg" alt="Chrome" style="width:32px; height:32px; opacity:0.9;"> 3639 </div> 3640 3641 <!-- Figma â meio direito --> 3642 <div class="float-bubble" style="width:54px; height:54px; top:50%; right:10%; animation: float-d 4.8s ease-in-out infinite 0.5s;"> 3643 <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/figma/figma-original.svg" alt="Figma" style="width:28px; height:28px; opacity:0.9;"> 3644 </div> 3645 3646 <div class="container" style="position: relative; z-index: 10; max-width: 1600px;"> 3647 <div class="hero-inner" style="display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 1400px; margin: 0 auto;"> 3648 <h1 class="hero-headline hero-anim hero-anim-2" style="font-size: clamp(3.2rem, 7vw, 4.8rem); font-weight: 900; line-height: 1.05; letter-spacing: -0.04em; color: #fff; margin-bottom: 16px;"> 3649 Chega de criar<br>
3650 <span class="line-strike" style="color: #444; text-decoration: line-through; text-decoration-color: #e85002; text-decoration-thickness: 4px;">do zero.</span><br> 3651 <span class="line-orange" style="background: linear-gradient(135deg, #e85002 0%, #ff6a1f 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">Injete e pronto.</span> 3652 </h1> 3653 3654 <p class="hero-subtitle hero-anim hero-anim-3" style="font-size: 1.2rem; color: #888; line-height: 1.6; max-width: 600px; margin-bottom: 20px;"> 3655 A INJECTA é uma biblioteca de seções profissionais que você injeta diretamente no Elementor com 1 clique. Economize horas de trabalho. 3656 </p> 3657 3658 <div class="hero-ctas hero-anim hero-anim-4" style="display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;"> 3659 <a href="#planos" class="btn-primary" style="padding: 18px 40px; font-size: 1.05rem; border-radius: 100px; font-weight: 700;">Começar agora <span class="btn-arrow"><svg viewBox="0 0 24 24"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg></span></a> 3660 <a href="#como-funciona" class="btn-ghost" style="padding: 18px 40px; font-size: 1.05rem; border-radius: 100px; font-weight: 600;">Ver como funciona</a> 3661 </div> 3662 3663 <!-- SOCIAL PROOF --> 3664 <div class="social-proof hero-anim hero-anim-5" role="group" aria-label="Prova social" style="margin-top: 24px;"> 3665 <div class="sp-avatars" aria-hidden="true"> 3666 <div class="sp-avatar"><img src="https://i.pravatar.cc/40?img=47" alt="" loading="lazy"></div> 3667 <div class="sp-avatar"><img src="https://i.pravatar.cc/40?img=57" alt="" loading="lazy"></div> 3668 <div class="sp-avatar"><img src="https://i.pravatar.cc/40?img=28" alt="" loading="lazy"></div> 3669 <div class="sp-avatar"><img src="https://i.pravatar.cc/40?img=52" alt="" loading="lazy"></div> 3670 <div class="sp-avatar"><img src="https://i.pravatar.cc/40?img=11" alt="" loading="lazy"></div> 3671 </div> 3672 <div class="sp-divider"></div> 3673 <div class="sp-copy"> 3674 <div class="sp-rating"> 3675 <span class="sp-stars" aria-label="4.9 de 5 estrelas"> 3676 <svg viewBox="0 0 24 24"><path d="M12 2l3 7 7 .5-5.5 4.5L18 22l-6-4-6 4 1.5-8L2 9.5 9 9z"/></svg> 3677 <svg viewBox="0 0 24 24"><path d="M12 2l3 7 7 .5-5.5 4.5L18 22l-6-4-6 4 1.5-8L2 9.5 9 9z"/></svg> 3678 <svg viewBox="0 0 24 24"><path d="M12 2l3 7 7 .5-5.5 4.5L18 22l-6-4-6 4 1.5-8L2 9.5 9 9z"/></svg> 3679 <svg viewBox="0 0 24 24"><path d="M12 2l3 7 7 .5-5.5 4.5L18 22l-6-4-6 4 1.5-8L2 9.5 9 9z"/></svg> 3680 <svg viewBox="0 0 24 24"><path d="M12 2l3 7 7 .5-5.5 4.5L18 22l-6-4-6 4 1.5-8L2 9.5 9 9z"/></svg> 3681 </span> 3682 4.9 3683 </div> 3684 <div class="sp-text"><strong>+200 designers</strong> já confiam</div> 3685 </div> 3686 </div> 3687 3688 <!-- marquee full-bleed dentro do hero --> 3689 3690 3691 </div> 3692 </div> 3693</section> 3694 3695 <!-- MARQUEE --> 3696 <div class="marquee-section"> 3697 <div class="marquee-track"> 3698 <div class="marquee-inner"> 3699 <div class="marquee-item"><span>Cabeçalhos</span><span class="marquee-dot"></span></div> 3700 <div class="marquee-item"><span>Banner Principal</span><span class="marquee-dot"></span></div> 3701 <div class="marquee-item"><span>Call to Action</span><span class="marquee-dot"></span></div> 3702 <div class="marquee-item"><span>Perguntas Frequentes</span><span class="marquee-dot"></span></div> 3703 <div class="marquee-item"><span>Tabela de Preços</span><span class="marquee-dot"></span></div> 3704 <div class="marquee-item"><span>Depoimentos</span><span class="marquee-dot"></span></div> 3705 <div class="marquee-item"><span>Landing Pages</span><span class="marquee-dot"></span></div> 3706 <div class="marquee-item"><span>Páginas de Vendas</span><span class="marquee-dot"></span></div> 3707 <div class="marquee-item"><span>Botões Premium</span><span class="marquee-dot"></span></div> 3708 <div class="marquee-item"><span>Efeitos & Códigos</span><span class="marquee-dot"></span></div> 3709 <div class="marquee-item"><span>
3709Cabeçalhos</span><span class="marquee-dot"></span></div> 3710 <div class="marquee-item"><span>Banner Principal</span><span class="marquee-dot"></span></div> 3711 <div class="marquee-item"><span>Call to Action</span><span class="marquee-dot"></span></div> 3712 <div class="marquee-item"><span>Perguntas Frequentes</span><span class="marquee-dot"></span></div> 3713 <div class="marquee-item"><span>Tabela de Preços</span><span class="marquee-dot"></span></div> 3714 <div class="marquee-item"><span>Depoimentos</span><span class="marquee-dot"></span></div> 3715 <div class="marquee-item"><span>Landing Pages</span><span class="marquee-dot"></span></div> 3716 <div class="marquee-item"><span>Páginas de Vendas</span><span class="marquee-dot"></span></div> 3717 <div class="marquee-item"><span>Botões Premium</span><span class="marquee-dot"></span></div> 3718 <div class="marquee-item"><span>Efeitos & Códigos</span><span class="marquee-dot"></span></div> 3719 </div> 3720 </div> 3721 </div> 3722 3723 <!-- ============================================================ 3724 HOW IT WORKS 3725 ============================================================ --> 3726 <section class="demo-section" id="como-funciona"> 3727 <div class="container"> 3728 3729 <!-- Header --> 3730 <div class="demo-header"> 3731 <div class="demo-eyebrow"><span class="d"></span>Como funciona · ao vivo</div> 3732 <h2 class="demo-title">Da biblioteca pro Elementor em <em>um clique</em>.</h2> 3733 <p class="demo-sub">Abre a extensão, escolhe a seção, injeta direto no canvas. Sem copiar código, sem importar arquivo, sem quebra de layout.</p> 3734 <div class="demo-steps-row"> 3735 <div class="demo-step done"><span class="n">1</span>Abrir extensão</div> 3736 <span class="demo-step-sep"></span> 3737 <div class="demo-step done"><span class="n">2</span>Escolher seção</div> 3738 <span class="demo-step-sep"></span> 3739 <div class="demo-step done"><span class="n">3</span>Injetar no Elementor</div> 3740 </div> 3741 </div> 3742 3743 <!-- Stage --> 3744 <div class="demo-stage"> 3745 3746 <div class="demo-browser"> 3747 <div class="demo-browser-bar"> 3748 <div class="demo-dots"><i></i><i></i><i></i></div> 3749 <div class="demo-url"> 3750 <svg viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg> 3751 <strong>cliente-joana.com</strong><em>/wp-admin/elementor</em> 3752 </div> 3753 <div class="demo-ext-pill"> 3754 <span class="logo-dot"></span>INJECTA 3755 </div> 3756 </div> 3757 3758 <div class="demo-video-wrap"> 3759 <video autoplay muted loop playsinline preload="auto" disablepictureinpicture> 3760 <source src="https://assets.injectaweb.com.br/videos/colandose%C3%A7%C3%A3o.mp4" type="video/mp4"> 3761 </video> 3762 </div> 3763 </div> 3764 </div> 3765 3766 <!-- Meta strip --> 3767 <div class="demo-meta"> 3768 <div class="demo-meta-item"> 3769 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg> 3770 <span><strong>~1.2s</strong> para injetar</span> 3771 </div> 3772 <span class="demo-meta-sep"></span> 3773 <div class="demo-meta-item"> 3774 <svg viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg> 3775 <span>Não altera código do WordPress</span> 3776 </div> 3777 <span class="demo-meta-sep"></span> 3778 <div class="demo-meta-item"> 3779 <svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg> 3780 <span>Funciona no <strong>Elementor Free</strong></span> 3781 </div> 3782 </div> 3783 3784 </div> 3785 </section> 3786 3787 <!-- ============================================================ 3788 FEATURES BENTO GRID (TESTE COM FITA) 3789============================================================ --> 3790<section class="features-section" style="position: relative; overflow: hidden; padding: 120px 0; background: transparent; border-top: 1px solid rgba(255,255,255,0.05);"> 3791 <!-- O Canvas Fita Laranja no fundo da seção de features --> 3792 <div class="container" style="position: relative; z-index: 10;"> 3793 <div class="section-header reveal"> 3794 <div class="section-eyebrow">
3794Recursos</div> 3795 <h2 class="section-title">Tudo que você precisa, nada que não precisa</h2> 3796 </div> 3797 3798 <div class="bento-grid"> 3799 <div class="bento-card bento-large reveal"> 3800 <div class="bento-glow-overlay"></div> 3801 <div class="bento-title">+100 seções profissionais organizadas por categoria</div> 3802 <div class="bento-desc">Encontre qualquer seção em segundos. Filtros por tipo, estilo e complexidade.</div> 3803 <div class="category-pills"> 3804 <span class="pill orange">Hero</span> 3805 <span class="pill orange">Oferta</span> 3806 <span class="pill orange">FAQ</span> 3807 <span class="pill">BenefÃcios</span> 3808 <span class="pill">Depoimentos</span> 3809 <span class="pill">Garantia</span> 3810 <span class="pill">Para quem é</span> 3811 <span class="pill">Bônus</span> 3812 <span class="pill">Autoridades</span> 3813 <span class="pill">Cabeçalho</span> 3814 <span class="pill">Rodapé</span> 3815 <span class="pill">Faixas</span> 3816 <span class="pill">Cronograma</span> 3817 <span class="pill">Comparação</span> 3818 <span class="pill">Suporte</span> 3819 <span class="pill">+ muito mais</span> 3820 </div> 3821 </div> 3822 3823 <div class="bento-card bento-stat bento-inverted reveal"> 3824 <div class="bento-number-static">6x</div> 3825 <div class="bento-number-label">mais rápido</div> 3826 <div class="bento-number-sub">do que criar seções do zero no Elementor</div> 3827 </div> 3828 3829 <div class="bento-card bento-small reveal" style="background: rgba(13,13,13,0.95);"> 3830 <span class="bento-icon"> 3831 <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--orange)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2"/><line x1="12" y1="18" x2="12.01" y2="18" stroke-width="2"/></svg> 3832 </span> 3833 <div class="bento-small-title">100% responsivo</div> 3834 <div class="bento-small-desc">Todas as seções são mobile-first e testadas em múltiplos dispositivos.</div> 3835 </div> 3836 3837 <div class="bento-card bento-small reveal" style="background: rgba(13,13,13,0.60);"> 3838 <span class="bento-icon"> 3839 <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--orange)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></svg> 3840 </span> 3841 <div class="bento-small-title">Extensão Chrome</div> 3842 <div class="bento-small-desc">Funciona direto no seu navegador, sem plugins WordPress extras.</div> 3843 </div> 3844 3845 <div class="bento-card bento-small reveal" style=""> 3846 <span class="bento-icon bento-icon-inverted"> 3847 <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--orange)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg> 3848 </span> 3849 <div class="bento-small-title">Updates semanais</div> 3850 <div class="bento-small-desc">Novas seções toda semana. Assinou uma vez, recebe para sempre.</div> 3851 </div> 3852 3853 <div class="bento-card bento-small reveal"> 3854 <span class="bento-icon bento-icon-inverted"> 3855 <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#e85002" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg> 3856 </span> 3857 <div class="bento-small-title">Cancele quando quiser</div> 3858 <div class="bento-small-desc">Sem fidelidade, sem burocracia. Cancele a qualquer momento com um clique.</div> 3859 </div> 3860 3861 <!-- ROI CALCULATOR --> 3862 <div class="bento-card bento-calc reveal"> 3863 <div class="calc-left"> 3864 <div class="calc-eyebrow"> 3865 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg> 3866 Calculadora de ROI 3867 </div> 3868 <h3 class="calc-title">Quanto você ganha <br><span class="calc-title-highlight">com a INJECTA?</span></h3> 3869 <p class="calc-subtitle">Preencha e descubra o impacto real na sua receita mensal.</p> 3870 3871 <div class="calc-inputs"> 3872 <div class="calc-field"> 3873 <label>Landing pages por mês</label> 3874 <div class="calc-input-wrap"> 3875 <input type="number" id="calcProjects" placeholder="Ex: 4" min="1" max="100"> 3876 </div> 3877 </div> 3878 <div class="calc-field"> 3879 <label>Horas por landing page</label> 3880 <div class="calc-input-wrap"> 3881 <input type="number" id="calcHours" placeholder="Ex: 20" min="1" max="500"> 3882 </div> 3883 </div> 3884 <div class="calc-field"> 3885 <label>Valor cobrado por projeto (R$)</label> 3886 <div class="calc-input-wrap">
3887 <span class="calc-prefix">R$</span> 3888 <input type="number" id="calcValue" placeholder="Ex: 1200" min="1" style="padding-left:36px;"> 3889 </div> 3890 </div> 3891 </div> 3892 3893 <button class="calc-btn" onclick="calcROI()">Calcular meu ganho <span class="btn-arrow"><svg viewBox="0 0 24 24"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg></span></button> 3894 </div> 3895 3896 <div class="calc-right"> 3897 <div class="calc-result-empty" id="calcEmpty"> 3898 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg> 3899 <p>Preencha os campos ao lado para ver o resultado</p> 3900 </div> 3901 3902 <div class="calc-result-panel" id="calcResult"> 3903 <div class="calc-result-label">Com a INJECTA você pode faturar</div> 3904 <div class="calc-result-value" id="calcResultValue">R$ 0</div> 3905 <div class="calc-result-label calc-result-label--sub">por mês â <span id="calcResultPercent" class="calc-result-highlight"></span> a mais</div> 3906 3907 <div class="calc-metrics"> 3908 <div class="calc-metric"> 3909 <div class="calc-metric-val" id="calcMetricProjects">0</div> 3910 <div class="calc-metric-lab">projetos/mês</div> 3911 </div> 3912 <div class="calc-metric-div"></div> 3913 <div class="calc-metric"> 3914 <div class="calc-metric-val" id="calcMetricHours">0h</div> 3915 <div class="calc-metric-lab">economizadas</div> 3916 </div> 3917 <div class="calc-metric-div"></div> 3918 <div class="calc-metric"> 3919 <div class="calc-metric-val" id="calcMetricExtra">R$ 0</div> 3920 <div class="calc-metric-lab">extra/mês</div> 3921 </div> 3922 </div> 3923 3924 <a href="#planos" class="calc-cta-btn" style="margin-top: 15px;">Quero esse resultado</a> 3925 </div> 3926 </div> 3927 </div> 3928 </div> 3929 </div> 3930</section> 3931 3932 3933 <!-- ============================================================ 3934 PRICING SECTION â v2 3935 ============================================================ --> 3936 <section class="pricing-section" id="planos"> 3937 <div class="container"> 3938 <div class="section-header reveal"> 3939 <div class="section-eyebrow">Planos & Preços</div> 3940 <h2 class="section-title">Um plano para<br><span style="color:var(--orange)">cada ritmo.</span></h2> 3941 <p class="section-subtitle">Todos os planos incluem acesso completo à biblioteca. Escolha o perÃodo que faz mais sentido pra você.</p> 3942 </div> 3943 3944 <!-- Toggle de perÃodo --> 3945 <div class="pricing-toggle-wrap"> 3946 <div class="pricing-toggle" id="pricingToggle"> 3947 <button class="pricing-toggle-btn" data-plan="mensal" onclick="selectPlan('mensal')">Mensal</button> 3948 <button class="pricing-toggle-btn active" data-plan="trimestral" onclick="selectPlan('trimestral')"> 3949 Trimestral <span class="pricing-toggle-discount">-30%</span> 3950 </button> 3951 <button class="pricing-toggle-btn" data-plan="semestral" onclick="selectPlan('semestral')"> 3952 Semestral <span class="pricing-toggle-discount">-40%</span> 3953 </button> 3954 <button class="pricing-toggle-btn" data-plan="anual" onclick="selectPlan('anual')"> 3955 Anual <span class="pricing-toggle-discount">-60%</span> 3956 </button> 3957 </div> 3958 </div> 3959 3960 <!-- Cards --> 3961 <div class="pricing-grid"> 3962 3963 <!-- Mensal --> 3964 <div class="pricing-card reveal" data-plan-card="mensal"> 3965 <div class="pricing-period">Mensal</div> 3966 <div class="pricing-price"> 3967 <span class="pricing-currency">R$</span> 3968 <span class="pricing-amount">57</span> 3969 <span class="pricing-freq">/mês</span> 3970 </div> 3971 <div class="pricing-badge-spacer"></div> 3972 <p class="pricing-desc">
3972Ideal para experimentar sem compromisso de longo prazo.</p> 3973 <div class="pricing-divider"></div> 3974 <div class="pricing-features"> 3975 <div class="pricing-feat"><svg class="pricing-feat-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="8" fill="#888" fill-opacity="0.15"/><path d="M5 8.5l2 2 4-4" stroke="#888" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>Acesso a +100 seções</div> 3976 <div class="pricing-feat"><svg class="pricing-feat-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="8" fill="#888" fill-opacity="0.15"/><path d="M5 8.5l2 2 4-4" stroke="#888" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>Updates semanais</div> 3977 <div class="pricing-feat"><svg class="pricing-feat-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="8" fill="#888" fill-opacity="0.15"/><path d="M5 8.5l2 2 4-4" stroke="#888" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>Extensão Chrome</div> 3978 <div class="pricing-feat"><svg class="pricing-feat-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="8" fill="#888" fill-opacity="0.15"/><path d="M5 8.5l2 2 4-4" stroke="#888" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>Suporte via email e wpp</div> 3979 <div class="pricing-feat"><svg class="pricing-feat-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="8" fill="#888" fill-opacity="0.15"/><path d="M5 8.5l2 2 4-4" stroke="#888" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>Meus Recursos (50 seções)</div> 3980 </div> 3981 <a href="https://pay.hotmart.com/G105152818S?off=6gx44v17" target="_blank" class="btn-pricing"> 3982 Começar agora 3983 <span class="btn-pricing-arrow"><svg width="13" height="13" viewBox="0 0 13 13" fill="none"><path d="M2.5 10.5L10.5 2.5M10.5 2.5H4.5M10.5 2.5V8.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></span> 3984 </a> 3985 </div> 3986 3987 <!-- Trimestral â FEATURED --> 3988 <div class="pricing-card featured reveal" data-plan-card="trimestral"> 3989 <div class="badge-popular">⦠Popular</div> 3990 <div class="pricing-period">Trimestral</div> 3991 <div class="pricing-price"> 3992 <span class="pricing-currency">R$</span> 3993 <span class="pricing-amount">49</span> 3994 <span class="pricing-freq">/mês</span> 3995 </div> 3996 <div class="pricing-badge-off">â30% off <span style="font-size:11px;color:#888;font-weight:400">vs mensal</span></div> 3997 <p class="pricing-desc">O favorito de quem já usa e quer economizar desde o primeiro mês.</p> 3998 <div class="pricing-divider"></div> 3999 <div class="pricing-features"> 4000 <div class="pricing-feat"><svg class="pricing-feat-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="8" fill="#e85002" fill-opacity="0.15"/><path d="M5 8.5l2 2 4-4" stroke="#e85002" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>Acesso a +100 seções</div> 4001 <div class="pricing-feat"><svg class="pricing-feat-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="8" fill="#e85002" fill-opacity="0.15"/><path d="M5 8.5l2 2 4-4" stroke="#e85002" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>Updates semanais</div> 4002 <div class="pricing-feat"><svg class="pricing-feat-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="8" fill="#e85002" fill-opacity="0.15"/><path d="M5 8.5l2 2 4-4" stroke="#e85002" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>Extensão Chrome</div> 4003 <div class="pricing-feat"><svg class="pricing-feat-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="8" fill="#e85002" fill-opacity="0.15"/><path d="M5 8.5l2 2 4-4" stroke="#e85002" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>Suporte via email e wpp</div> 4004 <div class="pricing-feat">
4004<svg class="pricing-feat-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="8" fill="#e85002" fill-opacity="0.15"/><path d="M5 8.5l2 2 4-4" stroke="#e85002" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>Meus Recursos (50 seções)</div> 4005 </div> 4006 <a href="https://pay.hotmart.com/G105152818S?off=ecxcwtml" target="_blank" class="btn-pricing btn-pricing-featured"> 4007 Começar agora 4008 <span class="btn-pricing-arrow"><svg width="13" height="13" viewBox="0 0 13 13" fill="none"><path d="M2.5 10.5L10.5 2.5M10.5 2.5H4.5M10.5 2.5V8.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></span> 4009 </a> 4010 </div> 4011 4012 <!-- Semestral --> 4013 <div class="pricing-card reveal" data-plan-card="semestral"> 4014 <div class="pricing-period">Semestral</div> 4015 <div class="pricing-price"> 4016 <span class="pricing-currency">R$</span> 4017 <span class="pricing-amount">43</span> 4018 <span class="pricing-freq">/mês</span> 4019 </div> 4020 <div class="pricing-badge-off">â40% off <span style="font-size:11px;color:#888;font-weight:400">vs mensal</span></div> 4021 <p class="pricing-desc">Ãtima escolha para projetos de médio prazo e clientes recorrentes.</p> 4022 <div class="pricing-divider"></div> 4023 <div class="pricing-features"> 4024 <div class="pricing-feat"><svg class="pricing-feat-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="8" fill="#888" fill-opacity="0.15"/><path d="M5 8.5l2 2 4-4" stroke="#888" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>Acesso a +100 seções</div> 4025 <div class="pricing-feat"><svg class="pricing-feat-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="8" fill="#888" fill-opacity="0.15"/><path d="M5 8.5l2 2 4-4" stroke="#888" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>Updates semanais</div> 4026 <div class="pricing-feat"><svg class="pricing-feat-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="8" fill="#888" fill-opacity="0.15"/><path d="M5 8.5l2 2 4-4" stroke="#888" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>Extensão Chrome</div> 4027 <div class="pricing-feat"><svg class="pricing-feat-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="8" fill="#888" fill-opacity="0.15"/><path d="M5 8.5l2 2 4-4" stroke="#888" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>Suporte via email e wpp</div> 4028 <div class="pricing-feat"><svg class="pricing-feat-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="8" fill="#888" fill-opacity="0.15"/><path d="M5 8.5l2 2 4-4" stroke="#888" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>Meus Recursos (50 seções)</div> 4029 </div> 4030 <a href="https://pay.hotmart.com/G105152818S?off=fsq80czi" target="_blank" class="btn-pricing"> 4031 Começar agora 4032 <span class="btn-pricing-arrow"><svg width="13" height="13" viewBox="0 0 13 13" fill="none"><path d="M2.5 10.5L10.5 2.5M10.5 2.5H4.5M10.5 2.5V8.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></span> 4033 </a> 4034 </div> 4035 4036 <!-- Anual --> 4037 <div class="pricing-card reveal" data-plan-card="anual"> 4038 <div class="pricing-period">Anual</div> 4039 <div class="pricing-price"> 4040 <span class="pricing-currency">R$</span> 4041 <span class="pricing-amount">36</span> 4042 <span class="pricing-freq">/mês</span> 4043 </div> 4044 <div class="pricing-badge-off">â60% off <span style="font-size:11px;color:#888;font-weight:400">vs mensal</span></div> 4045 <p class="pricing-desc">Máxima economia para freelancers e agências que usam o ano todo.</p> 4046 <div class="pricing-divider"></div> 4047 <div class="pricing-features"> 4048 <div class="pricing-feat">
4048<svg class="pricing-feat-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="8" fill="#888" fill-opacity="0.15"/><path d="M5 8.5l2 2 4-4" stroke="#888" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>Acesso a +100 seções</div> 4049 <div class="pricing-feat"><svg class="pricing-feat-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="8" fill="#888" fill-opacity="0.15"/><path d="M5 8.5l2 2 4-4" stroke="#888" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>Updates semanais</div> 4050 <div class="pricing-feat"><svg class="pricing-feat-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="8" fill="#888" fill-opacity="0.15"/><path d="M5 8.5l2 2 4-4" stroke="#888" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>Extensão Chrome</div> 4051 <div class="pricing-feat"><svg class="pricing-feat-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="8" fill="#888" fill-opacity="0.15"/><path d="M5 8.5l2 2 4-4" stroke="#888" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>Suporte VIP</div> 4052 <div class="pricing-feat"><svg class="pricing-feat-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="8" fill="#888" fill-opacity="0.15"/><path d="M5 8.5l2 2 4-4" stroke="#888" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>Meus Recursos ilimitado</div> 4053 <div class="pricing-feat"><svg class="pricing-feat-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="8" fill="#888" fill-opacity="0.15"/><path d="M5 8.5l2 2 4-4" stroke="#888" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>Acesso antecipado</div> 4054 </div> 4055 <a href="https://pay.hotmart.com/G105152818S?off=18ynngbe" target="_blank" class="btn-pricing"> 4056 Começar agora 4057 <span class="btn-pricing-arrow"><svg width="13" height="13" viewBox="0 0 13 13" fill="none"><path d="M2.5 10.5L10.5 2.5M10.5 2.5H4.5M10.5 2.5V8.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></span> 4058 </a> 4059 </div> 4060 4061 </div> 4062 4063 <p class="pricing-note">Todos os planos com acesso imediato. Cancele quando quiser.</p> 4064 </div> 4065 </section> 4066 4067 <!-- ============================================================ 4068 GRID 3D â SEÃÃES DA BIBLIOTECA 4069 ============================================================ --> 4070 <section class="grid3d-section"> 4071 <div class="grid3d-stage"> 4072 <div class="grid3d-world" id="grid3dWorld"></div> 4073 </div> 4074 <div class="grid3d-overlay"></div> 4075 </section> 4076 4077 <!-- ============================================================ 4078 PRODUCT SHOWCASE â 3D CARD 4079 ============================================================ --> 4080 <section class="showcase-section"> 4081 <div class="container"> 4082 <div class="section-header reveal"> 4083 <div class="section-eyebrow">Além da extensão</div> 4084 <h2 class="section-title">Um dashboard completo.<br>Feito para quem cria.</h2> 4085 <p class="section-subtitle">A INJECTA não é só uma extensão. à uma plataforma com tudo que você precisa para criar sites profissionais mais rápido.</p> 4086 </div> 4087 4088 <!-- Dashboard screenshot 3D --> 4089 <div class="showcase-scene reveal"> 4090 <div class="showcase-card" id="showcaseCard"> 4091 <div class="showcase-card-inner"> 4092 <video 4093 src="https://assets.injectaweb.com.br/videos/Dashboard-video.mp4" 4094 class="showcase-img" 4095 autoplay 4096 muted 4097 loop 4098 playsinline 4099 preload="auto" 4100 disablepictureinpicture 4101 style="object-fit: cover;" 4102 onerror="this.style.display='none'" 4103 ></video> 4104 <div class="showcase-glare" id="showcaseGlare"></div> 4105 <div class="showcase-badge"> 4106 <span class="showcase-badge-dot"></span> 4107 Dashboard ativo 4108 </div> 4109 </div> 4110 </div> 4111 </div> 4112 4113 <!-- Feature cards abaixo --> 4114 <div class="showcase-features reveal"> 4115 4116 <div class="showcase-feat"> 4117 <div class="showcase-feat-icon"> 4118 <svg viewBox="0 0 24 24">
4118<path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg> 4119 </div> 4120 <div class="showcase-feat-text"> 4121 <strong>Tutorial de uso</strong> 4122 <span>Guia passo a passo para usar a extensão do zero, direto no dashboard.</span> 4123 </div> 4124 </div> 4125 4126 <div class="showcase-feat"> 4127 <div class="showcase-feat-icon"> 4128 <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg> 4129 </div> 4130 <div class="showcase-feat-text"> 4131 <strong>Guia de instalação</strong> 4132 <span>Instale a extensão no Chrome e conecte ao seu WordPress em minutos.</span> 4133 </div> 4134 </div> 4135 4136 <div class="showcase-feat feat-inverted"> 4137 <div class="showcase-feat-icon"> 4138 <svg viewBox="0 0 24 24"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg> 4139 </div> 4140 <div class="showcase-feat-text"> 4141 <strong>Copy com IA</strong> 4142 <span>Gere textos de vendas para qualquer seção em segundos, direto no dashboard.</span> 4143 </div> 4144 </div> 4145 4146 <div class="showcase-feat feat-inverted"> 4147 <div class="showcase-feat-icon"> 4148 <svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg> 4149 </div> 4150 <div class="showcase-feat-text"> 4151 <strong>Gerador de contratos</strong> 4152 <span>Crie contratos de webdesign personalizados e exporte em PDF com um clique.</span> 4153 </div> 4154 </div> 4155 4156 </div> 4157 </div> 4158 </section> 4159 4160 4161 <!-- ============================================================ 4162 TESTIMONIALS SECTION 4163 ============================================================ --> 4164 <section class="testimonials-section" id="depoimentos"> 4165 <div class="container"> 4166 <div class="section-header reveal"> 4167 <div class="section-eyebrow">Depoimentos</div> 4168 <h2 class="section-title">O que nossos usuários dizem</h2> 4169 <p class="section-subtitle">Freelancers e agências que já economizam horas toda semana com a INJECTA.</p> 4170 </div> 4171 </div> 4172 4173 <div class="testimonials-track-wrapper"> 4174 <div class="testimonials-columns"> 4175 4176 <!-- Column 1 --> 4177 <div class="testimonials-col"> 4178 <div class="testimonials-col-inner scroll-col-1"> 4179 <div class="testimonial-card"> 4180 <p class="testimonial-text">"Economizei pelo menos 3 horas por projeto. Agora entrego sites profissionais em metade do tempo. A INJECTA é indispensável no meu fluxo."</p> 4181 <div class="testimonial-author"> 4182 <img src="https://i.pravatar.cc/40?img=1" alt="Fernanda Rocha" class="testimonial-avatar" loading="lazy" decoding="async" /> 4183 <div> 4184 <div class="testimonial-name">Fernanda Rocha</div> 4185 <div class="testimonial-role">Designer Freelancer</div> 4186 </div> 4187 </div> 4188 </div> 4189 <div class="testimonial-card"> 4190 <p class="testimonial-text">"Mostrei para o cliente a seção sendo injetada ao vivo. Ele ficou impressionado. Fechei o contrato na hora."</p> 4191 <div class="testimonial-author"> 4192 <img src="https://i.pravatar.cc/40?img=11" alt="Carlos Mendes" class="testimonial-avatar" loading="lazy" decoding="async" /> 4193 <div> 4194 <div class="testimonial-name">Carlos Mendes</div> 4195 <div class="testimonial-role">Desenvolvedor Web</div> 4196 </div> 4197 </div> 4198 </div> 4199 <div class="testimonial-card"> 4200 <p class="testimonial-text">"Trabalho com Elementor há 4 anos e nunca vi nada tão bem integrado. As seções já vÃ
4200ªm no padrão Container. Zero retrabalho."</p> 4201 <div class="testimonial-author"> 4202 <img src="https://i.pravatar.cc/40?img=5" alt="Ana Lima" class="testimonial-avatar" loading="lazy" decoding="async" /> 4203 <div> 4204 <div class="testimonial-name">Ana Lima</div> 4205 <div class="testimonial-role">Web Designer</div> 4206 </div> 4207 </div> 4208 </div> 4209 <div class="testimonial-card"> 4210 <p class="testimonial-text">"Uso a INJECTA para montar páginas de vendas dos meus lançamentos. Em minutos tenho uma estrutura profissional pronta para personalizar. Resultado direto nas conversões."</p> 4211 <div class="testimonial-author"> 4212 <img src="https://i.pravatar.cc/40?img=8" alt="Diego Martins" class="testimonial-avatar" loading="lazy" decoding="async" /> 4213 <div> 4214 <div class="testimonial-name">Diego Martins</div> 4215 <div class="testimonial-role">Coprodutor</div> 4216 </div> 4217 </div> 4218 </div> 4219 <!-- Duplicate for seamless loop --> 4220 <div class="testimonial-card"> 4221 <p class="testimonial-text">"Economizei pelo menos 3 horas por projeto. Agora entrego sites profissionais em metade do tempo. A INJECTA é indispensável no meu fluxo."</p> 4222 <div class="testimonial-author"> 4223 <img src="https://i.pravatar.cc/40?img=1" alt="Fernanda Rocha" class="testimonial-avatar" loading="lazy" decoding="async" /> 4224 <div> 4225 <div class="testimonial-name">Fernanda Rocha</div> 4226 <div class="testimonial-role">Designer Freelancer</div> 4227 </div> 4228 </div> 4229 </div> 4230 <div class="testimonial-card"> 4231 <p class="testimonial-text">"Mostrei para o cliente a seção sendo injetada ao vivo. Ele ficou impressionado. Fechei o contrato na hora."</p> 4232 <div class="testimonial-author"> 4233 <img src="https://i.pravatar.cc/40?img=11" alt="Carlos Mendes" class="testimonial-avatar" loading="lazy" decoding="async" /> 4234 <div> 4235 <div class="testimonial-name">Carlos Mendes</div> 4236 <div class="testimonial-role">Desenvolvedor Web</div> 4237 </div> 4238 </div> 4239 </div> 4240 <div class="testimonial-card"> 4241 <p class="testimonial-text">"Trabalho com Elementor há 4 anos e nunca vi nada tão bem integrado. As seções já vêm no padrão Container. Zero retrabalho."</p> 4242 <div class="testimonial-author"> 4243 <img src="https://i.pravatar.cc/40?img=5" alt="Ana Lima" class="testimonial-avatar" loading="lazy" decoding="async" /> 4244 <div> 4245 <div class="testimonial-name">Ana Lima</div> 4246 <div class="testimonial-role">Web Designer</div> 4247 </div> 4248 </div> 4249 </div> 4250 </div> 4251 </div> 4252 4253 <!-- Column 2 --> 4254 <div class="testimonials-col testimonials-col--mid"> 4255 <div class="testimonials-col-inner scroll-col-2"> 4256 <div class="testimonial-card"> 4257 <p class="testimonial-text">"Minha agência usa a INJECTA em 100% dos projetos Elementor. Reduzimos o tempo de montagem de layouts em 60%. Vale muito o investimento."</p> 4258 <div class="testimonial-author"> 4259 <img src="https://i.pravatar.cc/40?img=3" alt="Rafael Souza" class="testimonial-avatar" loading="lazy" decoding="async" /> 4260 <div> 4261 <div class="testimonial-name">Rafael Souza</div> 4262 <div class="testimonial-role">Freelancer WordPress</div> 4263 </div> 4264 </div> 4265 </div> 4266 <div class="testimonial-card"> 4267 <p class="testimonial-text">"Instalei em menos de 2 minutos e já estava injetando seções. A curva de aprendizado é zero. Recomendo para qualquer profissional WordPress."</p> 4268 <div class="testimonial-author"> 4269 <img src="https://i.pravatar.cc/40?img=20" alt="Juliana Costa" class="testimonial-avatar" loading="lazy" decoding="async" /> 4270 <div> 4271 <div class="testimonial-name">Juliana Costa</div> 4272 <div class="testimonial-role">Web Designer Freelancer</div> 4273 </div> 4274 </div> 4275 </div> 4276 <div class="testimonial-card"> 4277 <p class="testimonial-text">
4277"Copio do dashboard, colo no editor e já era â seção inteira pronta pra ajustar o conteúdo. Produto matador."</p> 4278 <div class="testimonial-author"> 4279 <img src="https://i.pravatar.cc/40?img=33" alt="Thiago Barros" class="testimonial-avatar" loading="lazy" decoding="async" /> 4280 <div> 4281 <div class="testimonial-name">Thiago Barros</div> 4282 <div class="testimonial-role">Freelancer UI/UX</div> 4283 </div> 4284 </div> 4285 </div> 4286 <div class="testimonial-card"> 4287 <p class="testimonial-text">"Como coprodutor preciso entregar páginas rápido. A INJECTA me dá agilidade sem abrir mão do design. Já virou parte essencial do meu processo de lançamento."</p> 4288 <div class="testimonial-author"> 4289 <img src="https://i.pravatar.cc/40?img=25" alt="Camila Ferreira" class="testimonial-avatar" loading="lazy" decoding="async" /> 4290 <div> 4291 <div class="testimonial-name">Camila Ferreira</div> 4292 <div class="testimonial-role">Coprodutor</div> 4293 </div> 4294 </div> 4295 </div> 4296 <!-- Duplicate for seamless loop --> 4297 <div class="testimonial-card"> 4298 <p class="testimonial-text">"Minha agência usa a INJECTA em 100% dos projetos Elementor. Reduzimos o tempo de montagem de layouts em 60%. Vale muito o investimento."</p> 4299 <div class="testimonial-author"> 4300 <img src="https://i.pravatar.cc/40?img=3" alt="Rafael Souza" class="testimonial-avatar" loading="lazy" decoding="async" /> 4301 <div> 4302 <div class="testimonial-name">Rafael Souza</div> 4303 <div class="testimonial-role">Freelancer WordPress</div> 4304 </div> 4305 </div> 4306 </div> 4307 <div class="testimonial-card"> 4308 <p class="testimonial-text">"Instalei em menos de 2 minutos e já estava injetando seções. A curva de aprendizado é zero. Recomendo para qualquer profissional WordPress."</p> 4309 <div class="testimonial-author"> 4310 <img src="https://i.pravatar.cc/40?img=20" alt="Juliana Costa" class="testimonial-avatar" loading="lazy" decoding="async" /> 4311 <div> 4312 <div class="testimonial-name">Juliana Costa</div> 4313 <div class="testimonial-role">Web Designer Freelancer</div> 4314 </div> 4315 </div> 4316 </div> 4317 <div class="testimonial-card"> 4318 <p class="testimonial-text">"Copio do dashboard, colo no editor e já era â seção inteira pronta pra ajustar o conteúdo. Produto matador."</p> 4319 <div class="testimonial-author"> 4320 <img src="https://i.pravatar.cc/40?img=33" alt="Thiago Barros" class="testimonial-avatar" loading="lazy" decoding="async" /> 4321 <div> 4322 <div class="testimonial-name">Thiago Barros</div> 4323 <div class="testimonial-role">Freelancer UI/UX</div> 4324 </div> 4325 </div> 4326 </div> 4327 </div> 4328 </div> 4329 4330 <!-- Column 3 --> 4331 <div class="testimonials-col testimonials-col--last"> 4332 <div class="testimonials-col-inner scroll-col-3"> 4333 <div class="testimonial-card"> 4334 <p class="testimonial-text">"Finalmente um produto brasileiro de qualidade para o ecossistema WordPress. Design das seções é impecável e funciona perfeitamente com o Elementor."</p> 4335 <div class="testimonial-author"> 4336 <img src="https://i.pravatar.cc/40?img=45" alt="Priscila Neves" class="testimonial-avatar" loading="lazy" decoding="async" /> 4337 <div> 4338 <div class="testimonial-name">Priscila Neves</div> 4339 <div class="testimonial-role">Infoprodutor</div> 4340 </div> 4341 </div> 4342 </div> 4343 <div class="testimonial-card"> 4344 <p class="testimonial-text">"Uso diariamente. Já fechei 5 projetos novos só porque consigo mostrar um mockup funcional na reunião de briefing. Diferencial absurdo."</p> 4345 <div class="testimonial-author"> 4346 <img src="https://i.pravatar.cc/40?img=60" alt="Bruno Faria" class="testimonial-avatar" loading="lazy" decoding="async" /> 4347 <div> 4348 <div class="testimonial-name">Bruno Faria</div> 4349 <div class="testimonial-role">Desenvolvedor Freelancer</div> 4350 </div> 4351 </div> 4352 </div> 4353 <div class="testimonial-card"> 4354 <p class="testimonial-text">"As seções já são responsivas e bem estruturadas. Chego no cliente com um site quase pronto. A INJECTA pagou o custo dela no primeiro projeto."</p> 4355 <div class="testimonial-author"> 4356 <img src="https://i.pravatar.cc/40?img=47" alt="Mariana Teles" class="testimonial-avatar" loading="lazy" decoding="async" /> 4357 <div> 4358 <div class="testimonial-name">Mariana Teles</div> 4359 <div class="testimonial-role">Web Designer Freelancer</div> 4360 </div> 4361 </div> 4362 </div> 4363 <!-- Duplicate for seamless loop --> 4364 <div class="testimonial-card"> 4365 <p class="testimonial-text">"Finalmente um produto brasileiro de qualidade para o ecossistema WordPress. Design das seções é impecável e funciona perfeitamente com o Elementor."</p> 4366 <div class="testimonial-author"> 4367 <img src="https://i.pravatar.cc/40?img=45" alt="Priscila Neves" class="testimonial-avatar" loading="lazy" decoding="async" /> 4368 <div> 4369 <div class="testimonial-name">Priscila Neves</div> 4370 <div class="testimonial-role">Infoprodutor</div> 4371 </div> 4372 </div> 4373 </div> 4374 <div class="testimonial-card"> 4375 <p class="testimonial-text">"Uso diariamente. Já fechei 5 projetos novos só porque consigo mostrar um mockup funcional na reunião de briefing. Diferencial absurdo."</p> 4376 <div class="testimonial-author"> 4377 <img src="https://i.pravatar.cc/40?img=60" alt="Bruno Faria" class="testimonial-avatar" loading="lazy" decoding="async" /> 4378 <div> 4379 <div class="testimonial-name">Bruno Faria</div> 4380 <div class="testimonial-role">Desenvolvedor Freelancer</div> 4381 </div> 4382 </div> 4383 </div> 4384 <div class="testimonial-card"> 4385 <p class="testimonial-text">"As seções já são responsivas e bem estruturadas. Chego no cliente com um site quase pronto. A INJECTA pagou o custo dela no primeiro projeto."</p> 4386 <div class="testimonial-author"> 4387 <img src="https://i.pravatar.cc/40?img=47" alt="Mariana Teles" class="testimonial-avatar" loading="lazy" decoding="async" /> 4388 <div> 4389 <div class="testimonial-name">Mariana Teles</div> 4390 <div class="testimonial-role">Web Designer Freelancer</div> 4391 </div> 4392 </div> 4393 </div> 4394 </div> 4395 </div> 4396 4397 </div> 4398 </div> 4399 </section> 4400 4401 <!-- ============================================================ 4402 GARANTIA 7 DIAS 4403 ============================================================ --> 4404 <section style="padding: 140px 0; background: var(--bg); position: relative; overflow: hidden; text-align: center;"> 4405 4406 <!-- Glow laranja de fundo --> 4407 <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; height: 600px; background: radial-gradient(ellipse at center, rgba(232,80,2,0.10) 0%, transparent 65%); pointer-events: none;"></div> 4408 4409 <div class="container" style="position: relative; z-index: 1;"> 4410 4411 <!-- CÃrculo com texto rotativo --> 4412 <div style="display: flex; justify-content: center; margin-bottom: 56px;"> 4413 <div style="position: relative; width: 240px; height: 240px;"> 4414 4415 <!-- SVG texto circular girando --> 4416 <svg viewBox="0 0 200 200" style="position: absolute; inset: 0; width: 100%; height: 100%; animation: spin-slow 12s linear infinite;"> 4417 <defs> 4418 <path id="circle-text-path" d="M 100,100 m -72,0 a 72,72 0 1,1 144,0 a 72,72 0 1,1 -144,0"/> 4419 </defs> 4420 <circle cx="100" cy="100" r="88" fill="none" stroke="rgba(232,80,2,0.15)" stroke-width="1"/> 4421 <circle cx="100" cy="100" r="72" fill="none" stroke="rgba(232,80,2,0.08)" stroke-width="1"/> 4422 <text font-size="11.5" font-weight="700" fill="rgba(255,255,255,0.45)" font-family="'Poppins', sans-serif" letter-spacing="4"> 4423 <textPath href="#circle-text-path">7 DIAS DE GARANTIA · 7 DIAS DE GARANTIA · </textPath> 4424 </text> 4425 </svg> 4426 4427 <!-- Número 7 central --> 4428 <div style="position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;">
4429 <span style="font-size: 6rem; font-weight: 900; line-height: 1; letter-spacing: -0.05em; background: linear-gradient(135deg, #e85002 0%, #ff6a1f 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">7</span> 4430 </div> 4431 4432 </div> 4433 </div> 4434 4435 <!-- Headline --> 4436 <h2 style="font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 900; letter-spacing: -0.04em; line-height: 1.1; color: #fff; margin-bottom: 20px;"> 4437 Ficar parado também<br> 4438 <span style="background: linear-gradient(135deg, #e85002 0%, #ff6a1f 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">é uma escolha.</span> 4439 </h2> 4440 4441 <!-- Copy --> 4442 <p style="font-size: 1rem; color: #666; line-height: 1.75; max-width: 560px; margin: 0 auto 40px;"> 4443 Temos tanta confiança no que a INJECTA faz pelo seu fluxo que te damos 4444 <strong style="color: #888;">7 dias pra testar sem risco</strong>. 4445 Se não gostar, é só cancelar â sem burocracia, sem enrolação. 4446 Mas se for como aconteceu com centenas de freelancers e agências... 4447 vai ser o empurrão que faltava. 4448 </p> 4449 4450 <!-- CTAs --> 4451 <div style="display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;"> 4452 <a href="#planos" class="btn-primary" style="padding: 16px 36px; font-size: 1rem; border-radius: 100px; font-weight: 700;"> 4453 Começar agora 4454 <span class="btn-arrow"><svg viewBox="0 0 24 24"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg></span> 4455 </a> 4456 <span style="font-size: 0.78rem; color: #444;">â 7 dias de garantia · â Cancele quando quiser</span> 4457 </div> 4458 4459 </div> 4460 </section> 4461 4462 4463 <!-- ============================================================ 4464 FOUNDER SECTION 4465 ============================================================ --> 4466 <section class="founder-section" style="background-image: radial-gradient(ellipse 100% 50% at 50% 50%, #2e2e2e 0%, #161616 40%, #020202 75%);"> 4467 <div class="container"> 4468 <div class="founder-grid"> 4469 4470 <!-- TEXT LEFT --> 4471 <div class="founder-left reveal-left"> 4472 <div class="founder-eyebrow"> 4473 <span class="founder-eyebrow-dot"></span> 4474 Fundador 4475 </div> 4476 <h2 class="founder-name">Aislan Souza</h2> 4477 <div class="founder-title">Fundador & Desenvolvedor da INJECTA</div> 4478 <div class="founder-divider"></div> 4479 <p class="founder-bio"> 4480 <strong>Irmão, deixa eu te falar uma coisa:</strong> 4481 se você tá criando tudo do zero toda vez⦠<strong>você tá atrasado.</strong> 4482 Eu tô nesse mercado há mais de 7 anos e já passei por tudo:<strong> e-commerce, agência, lançamento, tráfego, design, atendimentoâ¦</strong> 4483 </p> 4484 <p class="founder-bio"> 4485 <strong>Já vi o que funciona </strong> â e principalmente o que faz você perder tempo. 4486 verdade é simples: quem escala não começa do zero. 4487 <strong>INJECTA existe pra isso.</strong> 4488 Pra você parar de travar e começar a construir mais rápido, com mais padrão e mais resultado. 4489 </p> 4490 <div class="founder-stats"> 4491 <div> 4492 <span class="founder-stat-value">+400</span> 4493 <span class="founder-stat-label">Seções na biblioteca</span> 4494 </div> 4495 <div> 4496 <span class="founder-stat-value">1 clique</span> 4497 <span class="founder-stat-label">Para injetar</span> 4498 </div> 4499 <div> 4500 <span class="founder-stat-value">6x</span> 4501 <span class="founder-stat-label">Mais produtivo</span> 4502 </div> 4503 </div> 4504 </div> 4505 4506 <!-- PHOTO RIGHT --> 4507 <div class="founder-right reveal-right"> 4508 <div class="founder-photo-frame"> 4509 <div class="founder-photo-inner"> 4510 <img 4511 src="imagens/AislanFoto.png"
4512 alt="Aislan Souza â Fundador da INJECTA" 4513 class="founder-photo" 4514 loading="lazy" 4515 decoding="async" 4516 /> 4517 <div class="founder-photo-badge"> 4518 <span class="founder-photo-badge-name">Aislan Souza</span> 4519 <span class="founder-photo-badge-role">Fundador da INJECTA</span> 4520 </div> 4521 </div> 4522 </div> 4523 </div> 4524 4525 </div> 4526 </div> 4527 </section> 4528 4529 4530 <!-- ============================================================ 4531 FAQ SECTION 4532 ============================================================ --> 4533 <section class="faq-section" id="faq"> 4534 <div class="container"> 4535 <div class="faq-grid"> 4536 4537 <div class="faq-side reveal-left"> 4538 <div class="section-eyebrow">FAQ</div> 4539 <div class="faq-cta-box"> 4540 <h2 class="faq-side-title">Ficou com alguma dúvida?</h2> 4541 <p class="faq-cta-sub">à só chamar no WhatsApp que a gente te ajuda rapidinho.</p> 4542 4543 <a href="#" class="faq-contact"> 4544 <div class="faq-contact-logo faq-contact-logo--wpp"> 4545 <svg width="24" height="24" viewBox="0 0 24 24" fill="#fff" xmlns="http://www.w3.org/2000/svg"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z"/></svg> 4546 </div> 4547 <div class="faq-contact-info"> 4548 <div class="faq-contact-name">WhatsApp</div> 4549 <div class="faq-contact-action">Mandar mensagem</div> 4550 </div> 4551 </a> 4552 4553 <a href="/cdn-cgi/l/email-protection#4d3e383d223f39280d242327282e392c3a282f632e2220632f3f" class="faq-contact"> 4554 <div class="faq-contact-logo faq-contact-logo--email"> 4555 <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg> 4556 </div> 4557 <div class="faq-contact-info"> 4558 <div class="faq-contact-name">E-mail</div> 4559 <div class="faq-contact-action"><span class="__cf_email__" data-cfemail="196a6c69766b6d7c597077737c7a6d786e7c7b377a7674377b6b">[email protected]</span></div> 4560 </div> 4561 </a> 4562 </div> 4563 </div> 4564 4565 <div class="faq-list reveal-right"> 4566 4567 <div class="faq-item"> 4568 <div class="faq-question"> 4569 Preciso do Elementor Pro para usar? 4570 <div class="faq-icon">+</div> 4571 </div> 4572 <div class="faq-answer"> 4573 <div class="faq-answer-inner"> 4574 Funciona com o Elementor Free, Elementor Pro e também com o plugin Proelements. Para evitar bugs na injeção, recomendamos usar o Elementor Pro ou o Proelements instalado e ativo no seu WordPress. 4575 </div> 4576 </div> 4577 </div> 4578 4579 <div class="faq-item"> 4580 <div class="faq-question"> 4581 Preciso saber programar ou mexer em código? 4582 <div class="faq-icon">+</div> 4583 </div> 4584 <div class="faq-answer"> 4585 <div class="faq-answer-inner"> 4586 Não. A INJECTA foi feita para designers, freelancers e criadores de sites que trabalham visualmente. Sem código, sem c
4586onfiguração complicada â instala a extensão, escolhe a seção e injeta. 4587 </div> 4588 </div> 4589 </div> 4590 4591 <div class="faq-item"> 4592 <div class="faq-question"> 4593 Posso usar nos sites dos meus clientes? 4594 <div class="faq-icon">+</div> 4595 </div> 4596 <div class="faq-answer"> 4597 <div class="faq-answer-inner"> 4598 Sim, sem restrições. Uma assinatura cobre todos os projetos que você criar ou gerenciar, incluindo sites de clientes. Não há limite de domÃnios ou projetos. 4599 </div> 4600 </div> 4601 </div> 4602 4603 <div class="faq-item"> 4604 <div class="faq-question"> 4605 Como recebo as novas seções? 4606 <div class="faq-icon">+</div> 4607 </div> 4608 <div class="faq-answer"> 4609 <div class="faq-answer-inner"> 4610 Automaticamente. Novas seções são adicionadas à biblioteca toda semana e aparecem direto na extensão na próxima vez que você abrir. Sem atualizar nada, sem baixar nada. 4611 </div> 4612 </div> 4613 </div> 4614 4615 <div class="faq-item"> 4616 <div class="faq-question"> 4617 E se eu não gostar? Existe garantia? 4618 <div class="faq-icon">+</div> 4619 </div> 4620 <div class="faq-answer"> 4621 <div class="faq-answer-inner"> 4622 Sim. Você tem 7 dias de garantia total. Se por qualquer motivo não ficar satisfeito, devolvemos 100% do valor pago â sem burocracia e sem precisar explicar nada. 4623 </div> 4624 </div> 4625 </div> 4626 4627 <div class="faq-item"> 4628 <div class="faq-question"> 4629 As seções funcionam em qualquer nicho? 4630 <div class="faq-icon">+</div> 4631 </div> 4632 <div class="faq-answer"> 4633 <div class="faq-answer-inner"> 4634 Sim. A biblioteca tem seções para os nichos mais usados: saúde, educação, serviços, infoprodutos, portfólio e muito mais. Todas responsivas e prontas para personalizar com a identidade do seu cliente. 4635 </div> 4636 </div> 4637 </div> 4638 4639 <div class="faq-item"> 4640 <div class="faq-question"> 4641 Posso cancelar a qualquer momento? 4642 <div class="faq-icon">+</div> 4643 </div> 4644 <div class="faq-answer"> 4645 <div class="faq-answer-inner"> 4646 Sim. Não existe fidelidade nem multa. Você cancela quando quiser direto pela Hotmart, sem precisar falar com ninguém. O acesso continua até o fim do perÃodo já pago. 4647 </div> 4648 </div> 4649 </div> 4650 4651 </div> 4652 </div> 4653 </div> 4654 </section> 4655 4656 <!-- ============================================================ 4657 FOOTER 4658 ============================================================ --> 4659 <footer class="footer"> 4660 <div class="container"> 4661 <div class="footer-top"> 4662 4663 <div class="footer-brand"> 4664 <img src="Logo-Injecta-SVG.png" alt="INJECTA" /> 4665 <p class="footer-brand-desc"> 4666 A biblioteca de seções profissionais para Elementor. Injete, customize e entregue sites incrÃveis em muito menos tempo. 4667 </p> 4668 <div class="footer-socials"> 4669 <a href="#" class="social-btn" aria-label="Twitter"> 4670 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.742l7.736-8.857L1.255 2.25h6.93l4.265 5.638L18.244 2.25zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg> 4671 </a> 4672 <a href="#" class="social-btn" aria-label="Instagram"> 4673 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg> 4674 </a> 4675 <a href="#" class="social-btn" aria-label="Facebook"> 4676 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg> 4677 </a> 4678 <a href="#" class="social-btn" aria-label="LinkedIn"> 4679 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg> 4680 </a> 4681 </div> 4682 </div> 4683 4684 <div> 4685 <div class="footer-col-title">Navegação</div> 4686 <div class="footer-links"> 4687 <a href="#inicio">InÃcio</a> 4688 <a href="#como-funciona">
4688Recursos</a> 4689 <a href="#planos">Planos</a> 4690 <a href="#faq">FAQ</a> 4691 </div> 4692 </div> 4693 4694 <div> 4695 <div class="footer-col-title">Legal</div> 4696 <div class="footer-links"> 4697 <a href="termos.html">Termos de Uso</a> 4698 <a href="privacidade.html">PolÃtica de Privacidade</a> 4699 </div> 4700 </div> 4701 4702 </div> 4703 4704 <div class="footer-bottom"> 4705 <div class="footer-copy"> 4706 © 2026 <span>INJECTA</span>. Todos os direitos reservados. 4707 </div> 4708 <div class="footer-legal"> 4709 <a href="termos.html">Termos</a> 4710 <a href="privacidade.html">Privacidade</a> 4711 </div> 4712 </div> 4713 </div> 4714 </footer> 4715 4716 <!-- ============================================================ 4717 JAVASCRIPT 4718 ============================================================ -->
vendor: 111 bytes, lines 4718-4719
4718 4719 <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
4719<script> 4720 'use strict'; 4721 4722 // Header scroll effect 4723 (function () { 4724 var header = document.getElementById('header'); 4725 window.addEventListener('scroll', function () { 4726 if (window.scrollY > 40) { 4727 header.classList.add('scrolled'); 4728 } else { 4729 header.classList.remove('scrolled'); 4730 } 4731 }, { passive: true }); 4732 })(); 4733 4734 // IntersectionObserver reveal animations + stagger + counter 4735 (function () { 4736 // Stagger: atribui data-delay para cards dentro de grupos 4737 ['.bento-grid', '.pricing-grid'].forEach(function(sel) { 4738 var grid = document.querySelector(sel); 4739 if (!grid) return; 4740 var cards = grid.querySelectorAll('.reveal'); 4741 cards.forEach(function(card, i) { 4742 card.setAttribute('data-delay', Math.min(i + 1, 6)); 4743 }); 4744 }); 4745 4746 var els = document.querySelectorAll('.reveal, .reveal-left, .reveal-right'); 4747 var observer = new IntersectionObserver(function (entries) { 4748 entries.forEach(function (entry) { 4749 if (entry.isIntersecting) { 4750 entry.target.classList.add('visible'); 4751 observer.unobserve(entry.target); 4752 // Counter animado para bento-stat 4753 if (entry.target.classList.contains('bento-stat')) { 4754 var numEl = entry.target.querySelector('.bento-number'); 4755 if (numEl && !numEl.dataset.counted) { 4756 numEl.dataset.counted = '1'; 4757 var target = parseFloat(numEl.textContent); 4758 var suffix = numEl.textContent.replace(/[\d.]/g, ''); 4759 var start = 0; var duration = 1200; 4760 var step = function(ts) { 4761 if (!start) start = ts; 4762 var p = Math.min((ts - start) / duration, 1); 4763 var ease = 1 - Math.pow(1 - p, 3); 4764 numEl.textContent = (Number.isInteger(target) 4765 ? Math.round(ease * target) 4766 : (ease * target).toFixed(1)) + suffix; 4767 if (p < 1) requestAnimationFrame(step); 4768 }; 4769 requestAnimationFrame(step); 4770 } 4771 } 4772 } 4773 }); 4774 }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' }); 4775 els.forEach(function (el) { observer.observe(el); }); 4776 })(); 4777 4778 4779 // FAQ Accordion 4780 (function () { 4781 var items = document.querySelectorAll('.faq-item'); 4782 items.forEach(function (item) { 4783 item.querySelector('.faq-question').addEventListener('click', function () { 4784 var isOpen = item.classList.contains('open'); 4785 items.forEach(function (i) { i.classList.remove('open'); }); 4786 if (!isOpen) item.classList.add('open'); 4787 }); 4788 }); 4789 })(); 4790 // Hamburger menu 4791 var hamburger = document.getElementById('hamburger'); 4792 var mobileMenu = document.getElementById('mobileMenu'); 4793 4794 function closeMobileMenu() { 4795 hamburger.classList.remove('open'); 4796 mobileMenu.classList.remove('open'); 4797 hamburger.setAttribute('aria-expanded', 'false'); 4798 document.body.style.overflow = ''; 4799 } 4800 4801 hamburger.addEventListener('click', function() { 4802 var isOpen = mobileMenu.classList.toggle('open'); 4803 hamburger.classList.toggle('open'); 4804 hamburger.setAttribute('aria-expanded', isOpen); 4805 document.body.style.overflow = isOpen ? 'hidden' : ''; 4806 }); 4807
4808 // Close menu on resize to desktop 4809 window.addEventListener('resize', function() { 4810 if (window.innerWidth > 768) closeMobileMenu(); 4811 }); 4812 4813 function calcROI() { 4814 const projects = parseInt(document.getElementById('calcProjects').value); 4815 const hours = parseInt(document.getElementById('calcHours').value); 4816 const value = parseInt(document.getElementById('calcValue').value); 4817 4818 if (!projects || !hours || !value) { 4819 document.getElementById('calcProjects').focus(); 4820 return; 4821 } 4822 4823 const currentRevenue = projects * value; 4824 const currentHoursTotal = projects * hours; 4825 4826 // Builders que demoram mais se beneficiam mais da INJECTA 4827 let reductionRate; 4828 if (hours <= 4) reductionRate = 0.25; // rápidos: economia de 25% 4829 else if (hours <= 8) reductionRate = 0.40; // médios: 40% 4830 else if (hours <= 12) reductionRate = 0.55; // lentos: 55% 4831 else reductionRate = 0.65; // muito lentos: 65% 4832 4833 const newHoursPerProject = Math.max(1, hours * (1 - reductionRate)); 4834 const newProjects = Math.floor(currentHoursTotal / newHoursPerProject); 4835 const newRevenue = newProjects * value; 4836 const extraRevenue = newRevenue - currentRevenue; 4837 const hoursSaved = Math.round((hours - newHoursPerProject) * newProjects); 4838 const percentMore = currentRevenue > 0 4839 ? Math.round((newRevenue / currentRevenue - 1) * 100) 4840 : 0; 4841 4842 const fmt = (n) => 'R$ ' + n.toLocaleString('pt-BR'); 4843 4844 document.getElementById('calcResultValue').textContent = fmt(newRevenue); 4845 document.getElementById('calcResultPercent').textContent = '+' + percentMore + '%'; 4846 document.getElementById('calcMetricProjects').textContent = newProjects; 4847 document.getElementById('calcMetricHours').textContent = hoursSaved + 'h'; 4848 document.getElementById('calcMetricExtra').textContent = fmt(extraRevenue); 4849 4850 document.getElementById('calcEmpty').style.display = 'none'; 4851 document.getElementById('calcResult').classList.add('visible'); 4852 } 4853 4854 // Allow Enter key to trigger calc 4855 ['calcProjects','calcHours','calcValue'].forEach(function(id) { 4856 var el = document.getElementById(id); 4857 if (el) el.addEventListener('keydown', function(e) { if (e.key === 'Enter') calcROI(); }); 4858 }); 4859 4860 /* ââ 3D Card Showcase ââ */ 4861 (function () { 4862 const card = document.getElementById('showcaseCard'); 4863 const glare = document.getElementById('showcaseGlare'); 4864 if (!card) return; 4865 4866 const MAX_TILT = 12; // graus máximos de inclinação 4867 4868 card.addEventListener('mousemove', function (e) { 4869 const { left, top, width, height } = card.getBoundingClientRect(); 4870 const x = (e.clientX - left) / width; // 0 â 1 4871 const y = (e.clientY - top) / height; // 0 â 1 4872 4873 const rotY = (x - 0.5) * MAX_TILT * 2; 4874 const rotX = -(y - 0.5) * MAX_TILT * 2; 4875 4876 card.style.transform = `rotateY(${rotY}deg) rotateX(${rotX}deg) scale3d(1.02,1.02,1.02)`; 4877 4878 // glare acompanha o mouse 4879 glare.style.background = `radial-gradient( 4880 circle at ${x * 100}% ${y * 100}%, 4881 rgba(255,255,255,0.09) 0%, 4882 transparent 55% 4883 )`; 4884 glare.style.opacity = '1'; 4885 }); 4886 4887 card.addEventListener('mouseleave', function () { 4888 card.style.transform = 'rotateY(0deg) rotateX(0deg) scale3d(1,1,1)'; 4889 glare.style.opacity = '0'; 4890 }); 4891 }()); 4892 4893 </script>
4893 4894 4895 <!-- ===================== FLOATING CTA BAR ===================== --> 4896 4897 <div class="floating-cta" id="floatingCta" role="complementary" aria-label="Assinar INJECTA"> 4898 <a href="#" class="floating-cta-logo" aria-label="INJECTA Home"> 4899 <img src="Logo-Injecta-SVG.png" alt="INJECTA" /> 4900 </a> 4901 <div class="floating-cta-divider"></div> 4902 <a href="#planos" class="floating-cta-btn" aria-label="Ver planos e assinar"> 4903 Assinar 4904 <span class="floating-cta-arrow"> 4905 <svg viewBox="0 0 24 24"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg> 4906 </span> 4907 </a> 4908 </div> 4909 4910
4910<script> 4911 (function () { 4912 'use strict'; 4913 var cta = document.getElementById('floatingCta'); 4914 var heroHeight = window.innerHeight * 0.6; 4915 4916 function updateCta() { 4917 if (window.scrollY > heroHeight) { 4918 cta.classList.add('visible'); 4919 } else { 4920 cta.classList.remove('visible'); 4921 } 4922 } 4923 4924 window.addEventListener('scroll', updateCta, { passive: true }); 4925 updateCta(); 4926 }()); 4927 </script>
4927 4928 4929 4930
4931<script> 4932(function() { 4933 const world = document.getElementById('grid3dWorld'); 4934 if (!world) return; 4935 4936 const ROWS = 5, COLS = 9; 4937 const baseOffsets = [-120, -60, 0, -90, -30]; 4938 const speeds = [0.18, -0.12, 0.08, -0.16, 0.10]; 4939 const rows = []; 4940 4941 for (let r = 0; r < ROWS; r++) { 4942 const row = document.createElement('div'); 4943 row.className = 'grid3d-row'; 4944 for (let c = 0; c < COLS; c++) { 4945 const card = document.createElement('div'); 4946 card.className = 'grid3d-card'; 4947 row.appendChild(card); 4948 } 4949 world.appendChild(row); 4950 rows.push(row); 4951 row.style.transform = `translateX(${baseOffsets[r]}px)`; 4952 } 4953 4954 const section = world.closest('.grid3d-section'); 4955 window.addEventListener('scroll', function() { 4956 const rect = section.getBoundingClientRect(); 4957 const relY = -rect.top; // quantos px já scrollou dentro da seção 4958 rows.forEach((row, i) => { 4959 row.style.transform = `translateX(${baseOffsets[i] + relY * speeds[i]}px)`; 4960 }); 4961 }, { passive: true }); 4962 4963 const API = window.location.hostname === 'localhost' 4964 ? 'http://localhost:3000/api/sections' 4965 : 'https://www.injectaweb.com.br/api/sections'; 4966 4967 fetch(API).then(r => r.json()).then(sections => { 4968 const withPreview = sections.filter(s => s.preview_url); 4969 if (!withPreview.length) return; 4970 const allCards = world.querySelectorAll('.grid3d-card'); 4971 allCards.forEach((card, i) => { 4972 const s = withPreview[i % withPreview.length]; 4973 card.classList.add('has-image'); 4974 card.style.backgroundImage = `url('${s.preview_url}')`; 4975 card.style.backgroundSize = 'cover'; 4976 card.style.backgroundPosition = 'center'; 4977 }); 4978 }).catch(() => {}); 4979})(); 4980</script>
vendor: 1 bytes, line 4980
4980
4981<script> 4982 function selectPlan(planId) { 4983 document.querySelectorAll('.pricing-toggle-btn').forEach(function(btn) { 4984 btn.classList.toggle('active', btn.dataset.plan === planId); 4985 }); 4986 document.querySelectorAll('.pricing-card[data-plan-card]').forEach(function(card) { 4987 card.classList.toggle('active-plan', card.dataset.planCard === planId); 4988 }); 4989 } 4990</script>
vendor: 1 bytes, line 4990
4990
4991<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"eab6756a69194674b4369da8848424c8","r":1,"spa":2}' crossorigin="anonymous"></script>
4991 4992</body> 4993</html>
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.