PageSourceSearch

https://tapsite.ai/pricing

html tapsite.ai collected 2026-10-05 12:43:23 UTC 94,108 bytes, 1,472 lines download raw bytes

1<!DOCTYPE html>
2<html lang="id">
3<head>
4  
4<script>self["MonacoEnvironment"] = (function (paths) {
5          return {
6            globalAPI: false,
7            getWorkerUrl : function (moduleId, label) {
8              var result =  paths[label];
9              if (/^((http:)|(https:)|(file:)|(\/\/))/.test(result)) {
10                var currentUrl = String(window.location);
11                var currentOrigin = currentUrl.substr(0, currentUrl.length - window.location.hash.length - window.location.search.length - window.location.pathname.length);
12                if (result.substring(0, currentOrigin.length) !== currentOrigin) {
13                  var js = '/*' + label + '*/importScripts("' + result + '");';
14                  var blob = new Blob([js], { type: 'application/javascript' });
15                  return URL.createObjectURL(blob);
16                }
17              }
18              return result;
19            }
20          };
21        })({
22  "editorWorkerService": "/monacoeditorwork/editor.worker.bundle.js",
23  "css": "/monacoeditorwork/css.worker.bundle.js",
24  "html": "/monacoeditorwork/html.worker.bundle.js",
25  "json": "/monacoeditorwork/json.worker.bundle.js",
26  "typescript": "/monacoeditorwork/ts.worker.bundle.js",
27  "javascript": "/monacoeditorwork/ts.worker.bundle.js",
28  "less": "/monacoeditorwork/css.worker.bundle.js",
29  "scss": "/monacoeditorwork/css.worker.bundle.js",
30  "handlebars": "/monacoeditorwork/html.worker.bundle.js",
31  "razor": "/monacoeditorwork/html.worker.bundle.js"
32});</script>
32
33
34  <meta charset="UTF-8">
35  <meta name="viewport" content="width=device-width, initial-scale=1.0">
36  <title>Harga Tapsite — Paket Gratis & PRO | Tapsite</title>
37  <meta name="description" content="Bandingkan paket Gratis dan PRO Tapsite. Lihat batas workspace, website, blog, form order, traffic, storage, custom domain, SEO, analytics, dan AI.">
38  <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1">
39  <link rel="canonical" href="https://tapsite.ai/pricing">
40  <link rel="icon" href="/favicon-96x96.png">
41  <meta property="og:type" content="website"><meta property="og:site_name" content="Tapsite"><meta property="og:locale" content="id_ID">
42  <meta property="og:url" content="https://tapsite.ai/pricing"><meta property="og:title" content="Harga Tapsite — Paket Gratis & PRO"><meta property="og:description" content="Mulai gratis, lalu pilih paket PRO ketika website dan bisnismu membutuhkan kapasitas lebih besar."><meta property="og:image" content="https://tapsite.ai/thumbnail.png">
43  <meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="Harga Tapsite — Paket Gratis & PRO"><meta name="twitter:description" content="Bandingkan fitur dan kapasitas paket Tapsite."><meta name="twitter:image" content="https://tapsite.ai/thumbnail.png">
44  <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
45  
45<script src="https://cdn.tailwindcss.com/3.4.16"></script>
45
46  
46<script type="application/ld+json">{"@context":"https://schema.org","@type":"WebPage","name":"Harga Tapsite","url":"https://tapsite.ai/pricing","description":"Perbandingan paket Gratis dan PRO Tapsite."}</script>
46
47  <style>
48  :root{--ts-surface:#fff;--ts-surface-2:#f8fafc}
49  html{scroll-behavior:smooth}
50  body{margin:0;font-family:'Inter',ui-sans-serif,system-ui,sans-serif;background:var(--ts-surface);color:var(--ts-ink);overflow-x:hidden}
51  *{box-sizing:border-box}
52  a{color:inherit}
53  html.dark{--ts-surface:#060912;--ts-surface-2:#0b1020}
54  .product-hero h1,.section-head h2,.split-showcase__copy h2,.faq-layout h2,.final-cta h2{font-size:clamp(2.1rem,4.1vw,3.25rem)!important;line-height:1.04!important;letter-spacing:-.036em;font-weight:600}
55  .product-hero__lead,.section-head p,.split-showcase__copy>p{font-size:clamp(.975rem,1.1vw,1.125rem);line-height:1.6;font-weight:400}
56  .feature-row h3{font-size:1.125rem;font-weight:600}
57  .workflow__step h3,.use-item h3{font-size:1rem;font-weight:600}
58  .feature-row p,.workflow__step p,.use-item p,.faq-item p,.check-list li{font-size:.9375rem;line-height:1.6}
59  .product-page{background:var(--ts-surface)}.product-wrap{width:min(1180px,calc(100% - 2rem));margin-inline:auto}.product-hero{position:relative;min-height:92dvh;padding:calc(var(--ts-nav-h) + 5rem) 0 6rem;display:flex;align-items:center;overflow:hidden;background:radial-gradient(circle at 82% 18%,rgba(99,102,241,.16),transparent 32%),radial-gradient(circle at 18% 70%,rgba(14,165,233,.08),transparent 28%),var(--ts-surface)}.product-hero:after{content:'';position:absolute;inset:auto -10% -35% 30%;height:70%;background:radial-gradient(ellipse,rgba(79,70,229,.1),transparent 68%);pointer-events:none}.product-hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.9fr) minmax(500px,1.1fr);gap:4rem;align-items:center}.product-kicker{display:inline-flex;align-items:center;gap:.55rem;margin-bottom:1.4rem;color:var(--ts-brand);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.product-kicker:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--ts-brand)}.product-hero h1{max-width:720px;margin:0;font-size:clamp(3rem,5.5vw,5.25rem);line-height:.98;letter-spacing:-.055em}.product-hero__lead{max-width:620px;margin:1.6rem 0 0;color:var(--ts-ink-2);font-size:clamp(1.05rem,1.7vw,1.25rem);line-height:1.65}.product-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}.product-cta{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.75rem 1.3rem;border-radius:0.75rem;background:var(--ts-brand);color:#fff;font-weight:600;text-decoration:none;box-shadow:0 6px 20px rgba(79,70,229,.45);transition:background .25s,transform .25s,box-shadow .25s}.product-cta:hover{background:var(--ts-brand-hover);box-shadow:0 10px 28px rgba(79,70,229,.55)}.product-cta:active{transform:scale(.97)}.product-cta--secondary{background:var(--ts-surface);color:var(--ts-ink);border:1px solid var(--ts-hair);box-shadow:none;transition:background .25s,border-color .25s,transform .25s}.product-cta--secondary:hover{border-color:rgba(79,70,229,.35);background:color-mix(in srgb,var(--ts-brand) 4%,var(--ts-surface))}.product-cta--secondary:active{transform:scale(.97)}.product-trust{display:flex;flex-wrap:wrap;gap:1.25rem;margin-top:1.5rem;color:var(--ts-ink-3);font-size:.85rem}.product-trust span{display:flex;align-items:center;gap:.4rem}.product-trust i{width:17px;height:17px;display:grid;place-items:center;border-radius:50%;background:rgba(16,185,129,.12);color:#059669;font-style:normal;font-size:.7rem}
60  .product-visual{position:relative;min-height:560px}.visual-window{position:absolute;inset:3% 0 7% 4%;overflow:hidden;border:1px solid rgba(255,255,255,.75);border-radius:22px;background:#fff;box-shadow:0 32px 80px rgba(15,23,42,.16);transform:perspective(1200px) rotateY(-5deg) rotateX(2deg)}.visual-window__bar{height:42px;display:flex;align-items:center;gap:6px;padding:0 15px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.visual-window__bar i{width:8px;height:8px;border-radius:50%;background:#cbd5e1}.visual-window img{display:block;width:100%;height:calc(100% - 42px);object-fit:cover;object-position:top}.visual-float{position:absolute;z-index:2;padding:.8rem 1rem;border:1px solid rgba(255,255,255,.8);border-radius:14px;background:rgba(255,255,255,.92);box-shadow:0 18px 42px rgba(15,23,42,.13);backdrop-filter:blur(14px);color:#0f172a}.visual-float strong{display:block;font-size:.9rem}.visual-float small{display:block;margin-top:.2rem;color:#64748b}.visual-float--one{top:2%;right:-2%}.visual-float--two{bottom:3%;left:-3%}
61  .visual-window img{object-fit:contain;background:#f8fafc}
62  html.dark .visual-window img{background:#0b1020}
63  .product-strip{border-block:1px solid var(--ts-hair);background:var(--ts-surface-2)}.product-strip__inner{display:grid;grid-template-columns:repeat(4,1fr)}.product-strip__item{padding:1.4rem 1.2rem;border-right:1px solid var(--ts-hair)}.product-strip__item:last-child{border-right:0}.product-strip__item strong{display:block;font-size:.95rem}
63.product-strip__item span{display:block;margin-top:.3rem;color:var(--ts-ink-3);font-size:.8rem;line-height:1.45}
64  .product-section{padding:7.5rem 0}.product-section--soft{background:var(--ts-surface-2)}.section-head{display:grid;grid-template-columns:.75fr 1.25fr;gap:5rem;align-items:end;margin-bottom:3.5rem}.section-head h2{margin:0;font-size:clamp(2.25rem,4vw,4rem);line-height:1.03;letter-spacing:-.045em}.section-head p{margin:0;color:var(--ts-ink-2);font-size:1.05rem;line-height:1.7}.workflow{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--ts-hair)}.workflow__step{position:relative;padding:2rem 1.5rem 2.3rem;border-right:1px solid var(--ts-hair)}.workflow__step:last-child{border-right:0}.workflow__number{display:block;margin-bottom:2.5rem;color:var(--ts-brand);font-size:.75rem;font-weight:700}.workflow__step h3{margin:0 0 .7rem;font-size:1.15rem}.workflow__step p{margin:0;color:var(--ts-ink-3);font-size:.9rem;line-height:1.6}
65  .feature-editorial{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--ts-hair);border:1px solid var(--ts-hair);border-radius:18px;overflow:hidden}.feature-row{min-height:230px;padding:2.25rem;background:var(--ts-surface);display:flex;flex-direction:column;justify-content:space-between}.feature-row__top{display:flex;justify-content:space-between;gap:2rem}.feature-row__index{color:var(--ts-brand);font-size:.75rem;font-weight:700}.feature-row h3{max-width:360px;margin:0;font-size:1.45rem;letter-spacing:-.025em}.feature-row p{max-width:500px;margin:2rem 0 0;color:var(--ts-ink-3);line-height:1.65}.feature-row:hover{background:color-mix(in srgb,var(--ts-brand) 4%,var(--ts-surface))}
66  .split-showcase{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:clamp(3rem,7vw,5.5rem);align-items:center}.split-showcase--reverse .split-showcase__copy{order:2}.split-showcase__copy h2{margin:0;font-size:clamp(2.3rem,4vw,4rem);line-height:1.04;letter-spacing:-.045em}.split-showcase__copy>p{max-width:32rem;margin:1.2rem 0 0;color:var(--ts-ink-2);font-size:1.05rem;line-height:1.7}.check-list{list-style:none;padding:0;margin:2rem 0 0}.check-list li{position:relative;padding:1rem 0 1rem 2rem;border-bottom:1px solid var(--ts-hair);color:var(--ts-ink-2)}.check-list li:before{content:'✓';position:absolute;left:0;color:var(--ts-brand);font-weight:700}.split-showcase__media{position:relative;display:grid;place-items:center;min-height:0;overflow:hidden;border-radius:16px;background:color-mix(in srgb,var(--ts-brand) 3%,var(--ts-surface));box-shadow:0 20px 54px rgba(15,23,42,.1)}.split-showcase__media img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;border-radius:16px}
67  .feature-intro{padding-bottom:3.5rem;background:linear-gradient(180deg,var(--ts-surface) 0%,var(--ts-surface-2) 100%)}.feature-intro .section-head{margin-bottom:0}.feature-showcase{padding:clamp(4rem,7vw,6rem) 0}.feature-showcase+.feature-showcase{border-top:1px solid var(--ts-hair)}
68  .use-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.use-item{min-height:210px;padding:1.8rem;border:1px solid var(--ts-hair);border-radius:16px;background:var(--ts-surface)}.use-item span{color:var(--ts-brand);font-size:.75rem;font-weight:700}.use-item h3{margin:2.8rem 0 .65rem;font-size:1.15rem}.use-item p{margin:0;color:var(--ts-ink-3);font-size:.9rem;line-height:1.6}.use-item:hover{border-color:rgba(79,70,229,.35);transform:translateY(-2px)}
69  .product-proof{padding:7rem 0;background:#0b1020;color:#f8fafc}.product-proof .section-head p{color:#a8b3c7}.proof-gallery{display:grid;grid-template-columns:1.35fr .9fr .9fr;gap:1rem}.proof-gallery a{position:relative;overflow:hidden;min-height:300px;border-radius:16px;background:#111827}.proof-gallery a:first-child{grid-row:span 2;min-height:616px}.proof-gallery img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s}.proof-gallery a:hover img{transform:scale(1.025)}.proof-gallery span{position:absolute;inset:auto 1rem 1rem;padding:.6rem .8rem;border-radius:9px;background:rgba(2,6,23,.78);font-size:.78rem;backdrop-filter:blur(10px)}
69.product-showcase-root{min-height:30rem}.product-showcase-root.is-mounted>[data-product-showcase-source]{display:none}.product-showcase-stack{width:100%}.product-showcase-stage{position:relative;height:clamp(25rem,42vw,34rem);outline:none;perspective:1100px;touch-action:pan-y}.product-showcase-stage:focus-visible{outline:3px solid rgba(129,140,248,.55);outline-offset:8px;border-radius:16px}.product-showcase-wash{position:absolute;left:12%;right:12%;bottom:0;height:42%;border-radius:50%;background:rgba(2,6,23,.62);filter:blur(48px);pointer-events:none}.product-showcase-card{position:absolute;left:50%;bottom:1rem;overflow:hidden;border-radius:16px;background:#111827;box-shadow:0 26px 70px rgba(0,0,0,.42);transform-origin:50% 100%;transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .35s ease,filter .35s ease;will-change:transform;cursor:pointer}.product-showcase-card img{display:block;width:100%;height:100%;object-fit:contain;background:#111827;pointer-events:none}.product-showcase-card__scrim{position:absolute;inset:45% 0 0;background:linear-gradient(to top,rgba(2,6,23,.88),transparent);pointer-events:none}.product-showcase-card__copy{position:absolute;z-index:1;left:1.25rem;right:1.25rem;bottom:1.15rem;color:#fff}.product-showcase-card__copy strong{display:block;font-size:1rem}.product-showcase-card__copy span{display:block;margin-top:.25rem;color:rgba(255,255,255,.72);font-size:.8rem}.product-showcase-card.is-active{cursor:grab}.product-showcase-card.is-active:active{cursor:grabbing}.product-showcase-card a{position:absolute;inset:0;z-index:2}.product-showcase-nav{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.25rem}.product-showcase-dots{display:flex;gap:.55rem}.product-showcase-dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:rgba(248,250,252,.28);cursor:pointer;transition:transform .25s,background .25s}.product-showcase-dot.is-active{background:#a5b4fc;transform:scale(1.35)}.product-showcase-open{display:inline-flex;align-items:center;gap:.35rem;color:#a8b3c7;font-size:.78rem;text-decoration:none}.product-showcase-open:hover{color:#fff}
70  .faq-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:5rem}.faq-layout h2{margin:0;font-size:clamp(2.25rem,4vw,3.8rem);line-height:1.04;letter-spacing:-.045em}.faq-list{border-top:1px solid var(--ts-hair)}.faq-item{border-bottom:1px solid var(--ts-hair)}.faq-item summary{display:flex;justify-content:space-between;gap:1rem;padding:1.4rem 0;cursor:pointer;font-weight:600;list-style:none}.faq-item summary:after{content:'+';color:var(--ts-brand);font-size:1.25rem}.faq-item[open] summary:after{content:'−'}.faq-item p{margin:0;padding:0 2rem 1.5rem 0;color:var(--ts-ink-2);line-height:1.7}
71  .final-cta{padding:4rem 0 7rem}.final-cta__box{position:relative;overflow:hidden;padding:clamp(3rem,7vw,6rem);border-radius:24px;background:#11162a;color:#fff}.final-cta__box:after{content:'';position:absolute;width:420px;height:420px;right:-8%;top:-60%;border-radius:50%;background:rgba(99,102,241,.35);filter:blur(20px)}.final-cta__box>*{position:relative;z-index:1}.final-cta h2{max-width:760px;margin:0;font-size:clamp(2.5rem,5vw,4.5rem);line-height:1;letter-spacing:-.05em}.final-cta p{max-width:620px;margin:1.3rem 0 0;color:#cbd5e1;line-height:1.7}
72  .marketing-footer{padding:4rem 0 2rem;background:#070b15;color:#94a3b8}.footer-grid{display:grid;grid-template-columns:1.7fr repeat(3,1fr);gap:3rem}.footer-brand{display:flex;align-items:center;gap:.6rem;color:#fff;font-weight:700}.footer-brand img{width:34px;height:34px;border-radius:9px}.footer-copy{max-width:390px;margin:1rem 0 0;font-size:.9rem;line-height:1.7}.footer-col h3{margin:0 0 1rem;color:#e2e8f0;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em}.footer-col a{display:block;margin:.7rem 0;color:#94a3b8;text-decoration:none;font-size:.88rem}.footer-col a:hover{color:#fff}.footer-bottom{margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.08);font-size:.8rem}
73  .ts-wall{position:absolute;inset:0;z-index:0;overflow:hidden;opacity:.12;filter:blur(1px);pointer-events:none;-webkit-mask-image:radial-gradient(110% 90% at 58% 45%,#000 0%,transparent 78%);mask-image:radial-gradient(110% 90% at 58% 45%,#000 0%,transparent 78%)}.ts-wall__inner{position:absolute;top:50%;left:50%;translate:-50% -50%;display:flex;gap:14px;transform:perspective(1600px) rotateX(9deg) rotateY(-18deg) rotateZ(4deg);transform-style:preserve-3d}.ts-wall__col{flex:none;display:flex;flex-direction:column;gap:14px;width:260px;animation:ts-drift 34s linear infinite;will-change:transform}.ts-wall__col:nth-child(2){animation-duration:44s;animation-direction:reverse}.ts-wall__col:nth-child(3){animation-duration:38s}@keyframes ts-drift{from{transform:translateY(0)}to{transform:translateY(calc(-50% - 7px))}}.ts-card{border-radius:12px;overflow:hidden;background:var(--ts-card-bg);border:1px solid var(--ts-card-border);box-shadow:0 14px 36px color-mix(in oklab,var(--ts-ink) 12%,transparent),var(--ts-glass-inset)}.ts-card img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top center}@media(min-width:1280px){.ts-wall{position:relative;inset:auto;height:min(58dvh,540px);width:calc(100% + 22vw);opacity:1;filter:none;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 13%,#000 86%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 13%,#000 86%,transparent 100%)}.ts-wall__inner{left:0;translate:0 -50%}}@media(max-width:767px){.ts-wall{opacity:.38;filter:blur(.5px)}}@media(prefers-reduced-motion:reduce){.ts-wall__col{animation:none!important}}
74  .ts-prompt-wrap{width:100%;max-width:44rem}.ts-prompt{display:flex;align-items:center;gap:.75rem;padding:.4rem .4rem .4rem 1.1rem;border-radius:1.25rem;background:var(--ts-prompt-bg);border:1px solid var(--ts-prompt-border);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);box-shadow:var(--ts-prompt-shadow);transition:background .3s,border-color .3s,box-shadow .3s}.ts-prompt:has(textarea:focus-visible),.ts-prompt:has(textarea:focus){background:var(--ts-glass-hover);border-color:color-mix(in oklab,var(--ts-brand-soft) 70%,transparent);box-shadow:0 0 0 4px var(--ts-prompt-focus-ring),var(--ts-prompt-shadow)}.ts-prompt-wrap:has(#cta-validation-msg:not(.hidden)) .ts-prompt{border-color:rgba(239,68,68,.75)}.ts-prompt textarea{flex:1 1 auto;min-width:0;height:2.5rem;max-height:7rem;padding:.5rem 0;border:0;outline:0;resize:none;background:transparent;color:var(--ts-ink);font:inherit;font-size:.975rem;line-height:1.5rem;scrollbar-width:none;display:flex;align-self:center}@supports(field-sizing:content){.ts-prompt textarea{field-sizing:content;height:auto;min-height:2.5rem}}.ts-prompt textarea::-webkit-scrollbar{display:none}.ts-prompt textarea::placeholder{color:var(--ts-placeholder);line-height:1.5rem}.ts-generate{position:relative;isolation:isolate;flex:none;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:.75rem 1.3rem;border:0;border-radius:.75rem;cursor:pointer;background:var(--ts-brand);color:#fff;font:inherit;font-size:.9rem;font-weight:600;white-space:nowrap;box-shadow:0 6px 20px rgba(79,70,229,.45);transition:background .25s,transform .25s,box-shadow .25s}.ts-generate:hover{background:var(--ts-brand-hover);box-shadow:0 10px 28px rgba(79,70,229,.55)}.ts-generate:active{transform:scale(.97)}.ts-generate svg{width:16px;height:16px}#cta-validation-msg{margin:.6rem 0 0;padding-inline:1rem;font-size:.75rem;font-weight:500;color:#FCA5A5}
75  .prompt-bridge .ts-prompt-wrap{max-width:none}
76  .prompt-bridge .ts-prompt{padding:.75rem .75rem .75rem 1.5rem;border-radius:1.5rem}
77  .prompt-bridge .ts-prompt textarea{min-height:4.5rem;max-height:12rem}
78  @media(max-width:640px){.prompt-bridge .ts-prompt{flex-wrap:wrap;padding:1rem;border-radius:1.25rem}.prompt-bridge .ts-prompt textarea{flex-basis:100%}.prompt-bridge .ts-generate{width:100%;justify-content:center;margin-top:.5rem}}
79  .product-hero--builder .product-hero__copy{max-width:42rem}.product-hero--builder .product-visual{min-height:560px}
80  .prompt-bridge{position:relative;z-index:5;display:flex;justify-content:center;width:min(1180px,calc(100% - 2rem));margin:-3.5rem auto 0;padding:0 1rem}
81  .product-page .feature-showcase .split-showcase__copy h2{font-size:clamp(1.5rem,2.2vw,2rem)!important;line-height:1.1!important;letter-spacing:-.025em!important}
82  .product-page .feature-showcase .split-showcase__copy>p{font-size:.9375rem!important;line-height:1.65!important}
83  .product-page .product-hero h1,.product-page .section-head h2,.product-page .split-showcase__copy h2,.product-page .faq-layout h2,.product-page .final-cta h2{font-size:clamp(2.1rem,4.1vw,3.25rem)!important;line-height:1.04!important;letter-spacing:-.036em!important;font-weight:600!important}
84  .product-page .product-hero__lead,.product-page .section-head p,.product-page .split-showcase__copy>p{font-size:clamp(.975rem,1.1vw,1.125rem)!important;line-height:1.6!important;font-weight:400!important}
85  .product-page .feature-row h3{font-size:1.125rem!important;font-weight:600!important}
86  .product-page .workflow__step h3,.product-page .use-item h3{font-size:1rem!important;font-weight:600!important}
87  .product-page .feature-row p,.product-page .workflow__step p,.product-page .use-item p,.product-page .faq-item p,.product-page .check-list li{font-size:.9375rem!important;line-height:1.6!important}
88  @media(max-width:919px){.product-hero{padding-top:calc(var(--ts-nav-h) + 3rem)}.product-hero__grid,.section-head,.split-showcase,.faq-layout{grid-template-columns:1fr;gap:2.5rem}.product-visual{min-height:440px}.workflow{grid-template-columns:repeat(2,1fr)}.workflow__step:nth-child(2){border-right:0}.feature-editorial{grid-template-columns:1fr}.split-showcase--reverse .split-showcase__copy{order:0}.feature-showcase .split-showcase__copy{max-width:38rem}.use-grid{grid-template-columns:repeat(2,1fr)}.proof-gallery{grid-template-columns:1fr 1fr}.proof-gallery a:first-child{grid-column:1/-1;grid-row:auto;min-height:430px}.footer-grid{grid-template-columns:1.5fr 1fr 1fr}.footer-grid>div:last-child{grid-column:2}}
89  @media(max-width:640px){.product-wrap{width:min(100% - 1.5rem,1180px)}.product-hero{min-height:auto;padding-bottom:4rem}.product-hero h1{font-size:clamp(2.1rem,9vw,3.25rem)!important}.product-hero__grid{gap:3rem}.product-visual{min-height:340px}.visual-window{inset:3% 0 6% 0;transform:none}.visual-float{display:none}.product-strip__inner{grid-template-columns:1fr 1fr}.product-strip__item:nth-child(2){border-right:0}.product-strip__item:nth-child(-n+2){border-bottom:1px solid var(--ts-hair)}.product-section{padding:5rem 0}.feature-intro{padding-bottom:2.5rem}.feature-showcase{padding:3.75rem 0}.workflow,.use-grid{grid-template-columns:1fr}.workflow__step{border-right:0;border-bottom:1px solid var(--ts-hair)}.workflow__step:last-child{border-bottom:0}.feature-row{min-height:200px;padding:1.5rem}.split-showcase__media{border-radius:14px}.split-showcase__media img{border-radius:14px}.proof-gallery{grid-template-columns:1fr}.proof-gallery a,.proof-gallery a:first-child{min-height:330px;grid-column:auto}
89.product-showcase-root{min-height:23rem}.product-showcase-card__copy{left:1rem;right:1rem;bottom:.85rem}.product-showcase-card__copy span{display:none}.product-showcase-nav{align-items:flex-start;flex-direction:column}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}.footer-grid>div:last-child{grid-column:auto}.final-cta__box{border-radius:18px}.product-actions{flex-direction:column}.product-cta{width:100%}}
90  @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
91</style>
92<style id="product-redesign-css">
93  .product-page--redesign {
94    --product-wash: #eef2ff;
95    --product-panel: #f8fafc;
96  }
97  html.dark .product-page--redesign {
98    --product-wash: #111827;
99    --product-panel: #0b1020;
100  }
101  .product-page--redesign .product-section--soft { background: var(--product-panel); }
102  .product-page--redesign .visual-window__bar { justify-content: flex-end; }
103  .product-page--redesign .visual-window__bar span {
104    position: absolute;
105    left: 15px;
106    color: #475569;
107    font-size: .7rem;
108    font-weight: 600;
109  }
110  .product-page--redesign .product-proof {
111    background: var(--product-panel);
112    color: var(--ts-ink);
113  }
114  .product-page--redesign .product-proof .section-head p { color: var(--ts-ink-2); }
115  .product-page--redesign .proof-gallery a {
116    border-radius: 1rem;
117    box-shadow: 0 1.5rem 4rem rgba(49, 46, 129, .1);
118  }
119  html.dark .product-page--redesign .proof-gallery a {
120    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .3);
121  }
122</style>    <!-- ===== SHELL TOKENS + NAVBAR + HERO STAGE (DESIGN.md: indigo #4F46E5) ===== -->
123  <style id="ts-shell-css">
124    @view-transition {
125      navigation: auto;
126    }
127
128    @property --ts-angle {
129      syntax: "<angle>";
130      initial-value: 0deg;
131      inherits: false;
132    }
133
134    :root {
135      --ts-brand: #4F46E5;
136      --ts-brand-hover: #4338CA;
137      --ts-brand-soft: #4F46E5;
138      --ts-stage: #FFFFFF;
139      --ts-ink: #0F172A;
140      --ts-ink-2: #475569;
141      --ts-ink-3: #64748B;
142      --ts-hair: rgba(15, 23, 42, .08);
143      --ts-hair-2: rgba(15, 23, 42, .12);
144      --ts-nav-h: 64px;
145      --ts-nav-bg: rgba(255, 255, 255, .92);
146      --ts-nav-border: rgba(15, 23, 42, .06);
147      --ts-nav-shadow: 0 1px 0 rgba(255, 255, 255, .8), 0 8px 30px rgba(15, 23, 42, .06);
148      --ts-nav-link: rgba(15, 23, 42, .62);
149      --ts-nav-link-hover: #0F172A;
150      --ts-nav-link-bg: rgba(15, 23, 42, .06);
151      --ts-nav-link-active-bg: rgba(15, 23, 42, .08);
152      --ts-icon-color: rgba(15, 23, 42, .68);
153      --ts-icon-bg: rgba(15, 23, 42, .05);
154      --ts-icon-border: rgba(15, 23, 42, .08);
155      --ts-icon-hover-bg: rgba(15, 23, 42, .08);
156      --ts-menu-bg: rgba(255, 255, 255, .94);
157      --ts-menu-shadow: 0 30px 70px rgba(15, 23, 42, .12), inset 0 1px 0 rgba(255, 255, 255, .95);
158      --ts-glass: rgba(255, 255, 255, .92);
159      --ts-glass-hover: #FFFFFF;
160      --ts-glass-border: rgba(15, 23, 42, .10);
161      --ts-glass-inset: none;
162      --ts-prompt-bg: #FFFFFF;
163      --ts-prompt-border: rgba(15, 23, 42, .12);
164      --ts-prompt-shadow: 0 10px 40px rgba(15, 23, 42, .08), 0 0 0 1px rgba(15, 23, 42, .06);
165      --ts-prompt-focus-ring: color-mix(in oklab, var(--ts-brand) 22%, transparent);
166      --ts-mesh-color: rgba(15, 23, 42, .07);
167      --ts-card-bg: linear-gradient(160deg, rgba(255, 255, 255, .92), rgba(248, 250, 252, .78));
168      --ts-card-border: rgba(15, 23, 42, .10);
169      --ts-card-bar: rgba(241, 245, 249, .95);
170      --ts-card-url: rgba(100, 116, 139, .82);
171      --ts-demo: #475569;
172      --ts-demo-hover: #0F172A;
173      --ts-caret: rgba(15, 23, 42, .35);
174      --ts-placeholder: rgba(100, 116, 139, .72);
175      --ts-fallback-a: 18%;
176      --ts-fallback-b: 8%;
177      --ts-shader-light: 1;
178      --ts-proof-label: #64748B;
179    }
180
181    html.dark {
182      --ts-brand-soft: #818CF8;
183      --ts-stage: #060912;
184      --ts-ink: #F8FAFC;
185      --ts-ink-2: #A8B3C7;
186      --ts-ink-3: #78849A;
187      --ts-hair: rgba(255, 255, 255, .10);
188      --ts-hair-2: rgba(255, 255, 255, .18);
189      --ts-nav-bg: rgba(9, 12, 22, .64);
190      --ts-nav-border: rgba(255, 255, 255, .10);
191      --ts-nav-shadow: 0 16px 44px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06);
192      --ts-nav-link: rgba(248, 250, 252, .66);
193      --ts-nav-link-hover: #fff;
194      --ts-nav-link-bg: rgba(255, 255, 255, .07);
195      --ts-nav-link-active-bg: rgba(255, 255, 255, .09);
196      --ts-icon-color: rgba(248, 250, 252, .70);
197      --ts-icon-bg: rgba(255, 255, 255, .05);
198      --ts-icon-border: rgba(255, 255, 255, .10);
199      --ts-icon-hover-bg: rgba(255, 255, 255, .11);
200      --ts-menu-bg: rgba(9, 12, 22, .92);
201      --ts-menu-shadow: 0 30px 70px rgba(2, 6, 23, .55), inset 0 1px 0 rgba(255, 255, 255, .07);
202      --ts-glass: rgba(255, 255, 255, .05);
203      --ts-glass-hover: rgba(255, 255, 255, .09);
204      --ts-glass-border: rgba(255, 255, 255, .13);
205      --ts-glass-inset: inset 0 1px 0 rgba(255, 255, 255, .10);
206      --ts-prompt-bg: rgba(255, 255, 255, .06);
207      --ts-prompt-border: rgba(255, 255, 255, .13);
208      --ts-prompt-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 22px 50px rgba(2, 6, 23, .55);
209      --ts-prompt-focus-ring: color-mix(in oklab, var(--ts-brand-soft) 26%, transparent);
210      --ts-mesh-color: rgba(255, 255, 255, .10);
211      --ts-card-bg: linear-gradient(160deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .035));
212      --ts-card-border: rgba(255, 255, 255, .10);
213      --ts-card-bar: rgba(255, 255, 255, .06);
214      --ts-card-url: rgba(203, 213, 225, .72);
215      --ts-demo: rgba(248, 250, 252, .72);
216      --ts-demo-hover: #fff;
217      --ts-caret: rgba(248, 250, 252, .42);
218      --ts-placeholder: rgba(208, 218, 234, .62);
219      --ts-fallback-a: 46%;
220      --ts-fallback-b: 20%;
221      --ts-shader-light: 0;
222      --ts-proof-label: #94A3B8;
223    }
224
225    @supports (color: oklch(51% .2 275)) {
226      :root {
227        --ts-brand: oklch(51.2% .207 274.7);
228        --ts-brand-soft: oklch(51.2% .207 274.7);
229      }
230
231      html.dark {
232        --ts-brand-soft: oklch(72% .137 275);
233      }
234    }
235
236    /* ---------- Navbar (full-width bar, DESIGN.md style) ---------- */
237    header.ts-nav {
238      position: fixed;
239      inset: 0 0 auto 0;
240      z-index: 50;
241      height: var(--ts-nav-h);
242      display: flex;
243      align-items: center;
244      justify-content: center;
245      padding: 0 clamp(1rem, 3vw, 1.75rem);
246      color: var(--ts-ink);
247      background: transparent;
248      border-bottom: 1px solid transparent;
249      transition: background .35s cubic-bezier(.16, 1, .3, 1), border-color .35s, box-shadow .35s, color .35s;
250    }
251
252    .ts-nav__inner {
253      width: min(1180px, 100%);
254      height: 100%;
255      display: flex;
256      align-items: center;
257      gap: .75rem;
258    }
259
260    header.ts-nav[data-nav="solid"] {
261      background: var(--ts-nav-bg);
262      border-bottom-color: var(--ts-nav-border);
263      box-shadow: var(--ts-nav-shadow);
264      backdrop-filter: blur(16px) saturate(160%);
265      -webkit-backdrop-filter: blur(16px) saturate(160%);
266    }
267
268    html.dark header.ts-nav[data-nav="stage"] {
269      background: linear-gradient(to bottom, rgba(6, 9, 18, .88) 0%, rgba(6, 9, 18, 0) 100%);
270      border-bottom-color: var(--ts-hair);
271    }
272
273    html.dark header.ts-nav[data-nav="solid"] {
274      background: rgba(8, 11, 20, .94) !important;
275      border-bottom-color: var(--ts-hair) !important;
276      box-shadow: 0 1px 0 rgba(255, 255, 255, .04), 0 12px 40px rgba(0, 0, 0, .35) !important;
277    }
278
279    html.dark header.ts-nav {
280      color: var(--ts-ink) !important;
281    }
282
283    .ts-nav__brand {
284      display: flex;
285      align-items: center;
286      gap: .55rem;
287      text-decoration: none;
288      color: inherit;
289      flex: none;
290    }
291
292    .ts-nav__mark {
293      width: 30px;
294      height: 30px;
295      border-radius: 9px;
296      box-shadow: 0 4px 12px rgba(79, 70, 229, .35);
297      transition: transform .3s cubic-bezier(.16, 1, .3, 1);
298      view-transition-name: ts-brand-mark;
299    }
300
301    .ts-nav__brand:hover .ts-nav__mark {
302      transform: scale(1.06) rotate(-2deg);
303    }
304
305    .ts-nav__word {
306      font-size: 1.0625rem;
307      font-weight: 700;
308      letter-spacing: -.025em;
309    }
310
311    .ts-nav__word i {
312      font-style: normal;
313      color: var(--ts-ink-3);
314    }
315
316    .ts-nav__links {
317      display: none;
318      align-items: center;
319      gap: .15rem;
320      margin-inline: auto;
321    }
322
323    .ts-nav__links a {
324      position: relative;
325      padding: .4rem .75rem;
326      border-radius: 8px;
327      font-size: .875rem;
328      font-weight: 500;
329      color: var(--ts-nav-link);
330      text-decoration: none;
331      transition: color .2s, background .2s;
332    }
333
334    .ts-nav__links a:hover {
335      color: var(--ts-nav-link-hover);
336      background: var(--ts-nav-link-bg);
337    }
338
339    .ts-nav__links a[aria-current="page"] {
340      color: var(--ts-brand);
341      font-weight: 600;
342      background: rgba(79, 70, 229, .08);
343    }
344
345    html.dark .ts-nav__links a[aria-current="page"] {
346      color: var(--ts-brand-soft);
347      background: rgba(129, 140, 248, .12);
348    }
349    /* Resources Dropdown */
350    .ts-nav__dropdown {
351      position: relative;
352    }
353
354    .ts-nav__dropdown-btn {
355      position: relative;
356      padding: .4rem .75rem;
357      border-radius: 8px;
358      font-size: .875rem;
359      font-weight: 500;
360      color: var(--ts-nav-link);
361      background: transparent;
362      border: 0;
363      cursor: pointer;
364      display: inline-flex;
365      align-items: center;
366      gap: .3rem;
367      transition: color .2s, background .2s;
368      font-family: inherit;
369    }
370
371    .ts-nav__dropdown-btn:hover,
372    .ts-nav__dropdown:hover .ts-nav__dropdown-btn,
373    .ts-nav__dropdown.is-open .ts-nav__dropdown-btn,
374    .ts-nav__dropdown:focus-within .ts-nav__dropdown-btn {
375      color: var(--ts-nav-link-hover);
376      background: var(--ts-nav-link-bg);
377    }
378
379    html.dark .ts-nav__dropdown-btn {
380      color: var(--ts-nav-link) !important;
381    }
382
383    html.dark .ts-nav__dropdown-btn:hover,
384    html.dark .ts-nav__dropdown:hover .ts-nav__dropdown-btn,
385    html.dark .ts-nav__dropdown.is-open .ts-nav__dropdown-btn,
386    html.dark .ts-nav__dropdown:focus-within .ts-nav__dropdown-btn {
387      color: var(--ts-nav-link-hover) !important;
388      background: var(--ts-nav-link-bg) !important;
389    }
390
391    .ts-nav__dropdown-menu {
392      position: absolute;
393      top: calc(100% + 12px);
394      left: 50%;
395      transform: translateX(-50%) translateY(-6px) scale(.985);
396      width: min(640px, calc(100vw - 2rem));
397      background: #fff;
398      border: 1px solid var(--ts-nav-border);
399      border-radius: 16px;
400      box-shadow: 0 20px 50px rgba(15, 23, 42, .12);
401      padding: 1.75rem 2rem 2rem;
402      display: grid;
403      grid-template-columns: repeat(2, minmax(0, 1fr));
404      column-gap: .75rem;
405      row-gap: 1.25rem;
406      opacity: 0;
407      pointer-events: none;
408      transition: opacity .2s cubic-bezier(.16, 1, .3, 1), transform .2s cubic-bezier(.16, 1, .3, 1);
409      z-index: 60;
410    }
411
412
413    .ts-nav__dropdown.is-open .ts-nav__dropdown-menu,
414    .ts-nav__dropdown:focus-within .ts-nav__dropdown-menu {
415      opacity: 1;
416      pointer-events: auto;
417      transform: translateX(-50%) translateY(0) scale(1);
418    }
419    .ts-nav__dropdown--solutions .ts-nav__dropdown-menu {
420      width: min(940px, calc(100vw - 2rem));
421      grid-template-columns: repeat(3, minmax(0, 1fr));
422      align-items: start;
423      gap: 1.5rem;
424      max-height: calc(100dvh - var(--ts-nav-h) - 1.5rem);
425      overflow-y: auto;
426      padding: 1.4rem;
427    }
428
429    .ts-nav__solution-group {
430      min-width: 0;
431    }
432
433    .ts-nav__solution-heading {
434      margin: 0 .55rem .45rem;
435      color: var(--ts-ink-3);
436      font-size: .6875rem;
437      font-weight: 700;
438      letter-spacing: .08em;
439      text-transform: uppercase;
440    }
441
442    .ts-nav__dropdown--solutions .ts-nav__dropdown-item {
443      padding: .65rem .55rem;
444    }
445
446    .ts-nav__dropdown--solutions .ts-nav__dropdown-title {
447      font-size: .875rem;
448    }
449
450    .ts-nav__dropdown--solutions .ts-nav__dropdown-desc {
451      font-size: .6875rem;
452    }
453    .ts-nav__dropdown--solutions .ts-nav__dropdown-title,
454    .ts-nav__dropdown--solutions .ts-nav__dropdown-desc {
455      display: block;
456    }
457
458    .ts-nav__dropdown--solutions .ts-nav__dropdown-desc {
459      margin-top: .3rem;
460    }
461
462    .ts-nav__dropdown--solutions .ts-nav__dropdown-soon {
463      display: block;
464      margin: .45rem .55rem 0;
465      padding-top: .8rem;
466    }
467
468    .ts-nav__dropdown--solutions .ts-nav__dropdown-soon-items {
469      display: block;
470      margin-top: .25rem;
471    }
472
473    html.dark .ts-nav__dropdown-menu {
474      background: #0b0f1c;
475      border-color: var(--ts-hair);
476      box-shadow: 0 20px 50px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .06);
477    }
478
479    .ts-nav__dropdown-label {
480      grid-column: 1 / -1;
481      margin-bottom: .1rem;
482      font-size: .75rem;
483      font-weight: 500;
484      color: var(--ts-ink-3);
485    }
486
487    .ts-nav__dropdown-item {
488      display: block;
489      min-width: 0;
490      margin: 0;
491      padding: 1.75rem 1.75rem;
492      border-radius: 12px;
493      text-decoration: none;
494      color: var(--ts-ink) !important;
495      transition: background .18s ease, color .18s ease;
496    }
497
498    .ts-nav__dropdown-item:hover,
499    .ts-nav__dropdown-item:focus-visible {
500      background: rgba(15, 23, 42, .055) !important;
501      outline: none;
502    }
503
504    html.dark .ts-nav__dropdown-item:hover,
505    html.dark .ts-nav__dropdown-item:focus-visible {
506      background: rgba(255, 255, 255, .075) !important;
507    }
508
509    .ts-nav__dropdown-icon {
510      display: none;
511    }
512
513    .ts-nav__dropdown-text {
514      display: flex;
515      flex-direction: column;
516      gap: .3rem;
517    }
518
519    .ts-nav__dropdown-title {
520      width: fit-content;
521      font-size: 1rem;
522      font-weight: 600;
523      color: var(--ts-ink);
524      line-height: 1.2;
525      transition: color .18s;
526    }
527
528    .ts-nav__dropdown-item:hover .ts-nav__dropdown-title,
529    .ts-nav__dropdown-item:focus-visible .ts-nav__dropdown-title {
530      color: var(--ts-brand);
531    }
532
533    .ts-nav__dropdown-desc {
534      font-size: .75rem;
535      color: var(--ts-ink-3);
536      line-height: 1.45;
537    }
538
539    .ts-menu__group-divider {
540      height: 1px;
541      background: var(--ts-hair);
542      margin: .6rem .5rem;
543    }
544
545    .ts-menu__group-label {
546      font-size: .75rem;
547      font-weight: 700;
548      letter-spacing: .08em;
549      color: var(--ts-ink-3);
550      padding: .2rem 1rem;
551    }
552
553    .ts-menu__sublink {
554      padding: .6rem 1rem !important;
555      font-size: .8125rem !important;
556    }
557
558    /* ---------- Mobile menu accordion ---------- */
559    .ts-menu__accordion {
560      padding: 0;
561      border: 0;
562    }
563
564    .ts-menu__accordion-btn {
565      display: flex;
566      align-items: center;
567      justify-content: space-between;
568      padding: .8rem 1rem;
569      border-radius: 12px;
570      font-size: .875rem;
571      font-weight: 600;
572      color: var(--ts-nav-link);
573      cursor: pointer;
574      list-style: none;
575      transition: background .25s, color .25s;
576    }
577
578    .ts-menu__accordion-btn::-webkit-details-marker {
579      display: none;
580    }
581
582    .ts-menu__accordion-btn:hover {
583      background: var(--ts-nav-link-bg);
584      color: var(--ts-nav-link-hover);
585    }
586
587    .ts-menu__chevron {
588      width: 1rem;
589      height: 1rem;
590      flex: none;
591      color: var(--ts-ink-3);
592      transition: transform .2s ease;
593    }
594
595    .ts-menu__accordion[open] .ts-menu__chevron {
596      transform: rotate(180deg);
597    }
598
599    .ts-menu__accordion-body {
600      display: flex;
601      flex-direction: column;
602      gap: .1rem;
603      padding: .2rem 0 .35rem;
604    }
605
606    .ts-menu__sub-label {
607      font-size: .6875rem;
608      font-weight: 700;
609      letter-spacing: .08em;
610      text-transform: uppercase;
611      color: var(--ts-ink-3);
612      padding: .5rem 1rem .2rem;
613    }
614
615    .ts-menu__soon {
616      padding: .3rem 1rem .4rem;
617      font-size: .75rem;
618      color: var(--ts-ink-3);
619      line-height: 1.45;
620    }
621
622    .ts-nav__actions {
623      display: flex;
624      align-items: center;
625      gap: .4rem;
626      margin-inline-start: auto;
627    }
628
629    .ts-icon-btn {
630      display: inline-flex;
631      align-items: center;
632      justify-content: center;
633      width: 38px;
634      height: 38px;
635      border-radius: 10px;
636      color: var(--ts-icon-color);
637      background: transparent;
638      border: 0;
639      cursor: pointer;
640      transition: color .2s, background .2s;
641    }
642
643    .ts-icon-btn:hover {
644      color: var(--ts-nav-link-hover);
645      background: var(--ts-icon-hover-bg);
646    }
647
648    .ts-icon-btn:active {
649      transform: scale(.96);
650    }
651
652    .ts-link-ghost {
653      display: none;
654      padding: .5rem .7rem;
655      border-radius: 10px;
656      font-size: .8125rem;
657      font-weight: 500;
658      color: var(--ts-icon-color);
659      text-decoration: none;
660      transition: color .25s;
661    }
662
663    .ts-link-ghost:hover {
664      color: var(--ts-nav-link-hover);
665    }
666
667    .ts-btn-brand {
668      display: none;
669      align-items: center;
670      gap: .35rem;
671      padding: .55rem 1rem;
672      border-radius: 10px;
673      background: var(--ts-brand);
674      color: #fff;
675      font-size: .8125rem;
676      font-weight: 600;
677      text-decoration: none;
678      white-space: nowrap;
679      box-shadow: 0 4px 14px rgba(79, 70, 229, .28);
680      transition: background .2s, transform .2s, box-shadow .2s;
681    }
682
683    .ts-btn-brand:hover {
684      background: var(--ts-brand-hover);
685      box-shadow: 0 6px 18px rgba(79, 70, 229, .38);
686    }
687
688    .ts-btn-brand:active {
689      transform: scale(.98);
690    }
691
692    @media (min-width: 920px) {
693
694      .ts-nav__links,
695      .ts-btn-brand,
696      .ts-link-ghost {
697        display: flex;
698      }
699
700      .ts-only-mobile {
701        display: none !important;
702      }
703
704      .ts-nav__links+.ts-nav__actions {
705        margin-inline-start: 0;
706      }
707    }
708
709    /* Reading-position feedback, driven by the document scroll timeline (no JS) */
710    .ts-nav__progress {
711      position: fixed;
712      top: 0;
713      left: 0;
714      z-index: 60;
715      height: 2px;
716      width: 100%;
717      transform: scaleX(0);
718      transform-origin: 0 50%;
719      background: linear-gradient(90deg, var(--ts-brand), var(--ts-brand-soft));
720      pointer-events: none;
721    }
722
723    @supports (animation-timeline: scroll(root)) {
724      @media (prefers-reduced-motion: no-preference) {
725        .ts-nav__progress {
726          animation: ts-progress linear both;
727          animation-timeline: scroll(root block);
728        }
729      }
730    }
731
732    @keyframes ts-progress {
733      from {
734        transform: scaleX(0);
735      }
736
737      to {
738        transform: scaleX(1);
739      }
740    }
741
742    /* Beat legacy global dark header rules */
743    html.dark header.ts-nav .ts-nav__links a {
744      color: var(--ts-nav-link) !important;
745    }
746
747    html.dark header.ts-nav .ts-nav__links a:hover {
748      color: var(--ts-nav-link-hover) !important;
749    }
750
751    html.dark header.ts-nav .ts-nav__links a[aria-current="page"] {
752      color: var(--ts-brand-soft) !important;
753      background: rgba(129, 140, 248, .12) !important;
754    }
755
756    html.dark header.ts-nav .ts-icon-btn,
757    html.dark header.ts-nav .ts-link-ghost {
758      color: var(--ts-icon-color) !important;
759    }
760
761    /* ---------- Mobile menu (right drawer) ---------- */
762    #mobile-menu.ts-menu {
763      position: fixed;
764      inset: 0 0 0 auto;
765      z-index: 60;
766      width: min(20rem, 88vw);
767      height: 100dvh;
768      translate: 100% 0;
769      opacity: 1;
770      pointer-events: none;
771      transition: translate .35s cubic-bezier(.16, 1, .3, 1);
772    }
773
774    #mobile-menu.ts-menu.is-open {
775      translate: 0 0;
776      pointer-events: auto;
777    }
778
779    #mobile-menu.ts-menu>div {
780      height: 100%;
781      display: flex;
782      flex-direction: column;
783      background: var(--ts-menu-bg);
784      border-left: 1px solid var(--ts-hair);
785      padding: calc(var(--ts-nav-h) + .75rem) 1.1rem 1.25rem;
786      box-shadow: -20px 0 60px rgba(15, 23, 42, .12);
787      backdrop-filter: blur(20px) saturate(160%);
788      -webkit-backdrop-filter: blur(20px) saturate(160%);
789    }
790
791    html.dark #mobile-menu.ts-menu>div {
792      box-shadow: -20px 0 60px rgba(0, 0, 0, .45);
793    }
794
795    #mobile-menu.ts-menu .ts-menu__head {
796      display: flex;
797      align-items: center;
798      justify-content: space-between;
799      margin-bottom: .9rem;
800      color: var(--ts-ink);
801    }
802
803    #mobile-menu.ts-menu nav {
804      display: flex;
805      flex-direction: column;
806      gap: .15rem;
807      min-height: 0;
808      overflow-y: auto;
809      overscroll-behavior: contain;
810      padding-bottom: .75rem;
811    }
812
813    #mobile-menu.ts-menu nav a {
814      display: flex;
815      align-items: center;
816      justify-content: space-between;
817      padding: .8rem 1rem;
818      border-radius: 12px;
819      font-size: .875rem;
820      font-weight: 500;
821      color: var(--ts-nav-link) !important;
822      text-decoration: none;
823      transition: background .25s, color .25s;
824    }
825
826    #mobile-menu.ts-menu nav a:hover,
827    #mobile-menu.ts-menu nav a[aria-current="page"] {
828      background: var(--ts-nav-link-bg) !important;
829      color: var(--ts-nav-link-hover) !important;
830    }
831
832    html.dark #mobile-menu.ts-menu nav a {
833      color: var(--ts-nav-link) !important;
834    }
835
836    html.dark #mobile-menu.ts-menu nav a:hover,
837    html.dark #mobile-menu.ts-menu nav a[aria-current="page"] {
838      background: var(--ts-nav-link-active-bg) !important;
839      color: var(--ts-nav-link-hover) !important;
840    }
841
842    #mobile-menu.ts-menu nav a[aria-current="page"] {
843      color: var(--ts-brand) !important;
844      font-weight: 600;
845      background: rgba(79, 70, 229, .08) !important;
846    }
847
848    html.dark #mobile-menu.ts-menu nav a[aria-current="page"] {
849      color: var(--ts-brand-soft) !important;
850      background: rgba(129, 140, 248, .12) !important;
851    }
852
853    #mobile-menu.ts-menu nav a span:last-child {
854      color: var(--ts-ink-3);
855      font-size: .75rem;
856    }
857
858    #mobile-menu.ts-menu .ts-menu__foot {
859      display: flex;
860      flex-direction: column;
861      gap: .6rem;
862      margin-top: .9rem;
863      padding-top: .9rem;
864      border-top: 1px solid var(--ts-hair);
865    }
866
867    .ts-menu__cta {
868      display: flex;
869      align-items: center;
870      justify-content: center;
871      padding: .85rem 1rem;
872      border-radius: 12px;
873      font-size: .9375rem;
874      font-weight: 600;
875      text-decoration: none;
876      background: var(--ts-brand);
877      color: #fff;
878      box-shadow: 0 10px 26px rgba(79, 70, 229, .35);
879      transition: background .25s, transform .25s;
880    }
881
882    .ts-menu__cta:hover {
883      background: var(--ts-brand-hover);
884      transform: translateY(-1px);
885    }
886
887    .ts-menu__cta--quiet {
888      background: var(--ts-icon-bg);
889      color: var(--ts-ink);
890      border: 1px solid var(--ts-hair);
891      box-shadow: none;
892    }
893
894    .ts-menu__cta--quiet:hover {
895      background: var(--ts-icon-hover-bg);
896    }
897
898    @media (prefers-reduced-transparency: reduce) {
899
900      header.ts-nav[data-nav="solid"] {
901        background: #fff !important;
902        backdrop-filter: none !important;
903        -webkit-backdrop-filter: none !important;
904      }
905
906      html.dark header.ts-nav[data-nav="stage"],
907      html.dark header.ts-nav[data-nav="solid"] {
908        background: #0B1020 !important;
909      }
910
911      #mobile-menu.ts-menu>div {
912        backdrop-filter: none !important;
913      }
914    }
915
916    @media (prefers-reduced-motion: reduce) {
917
918      header.ts-nav,
919      .ts-icon-btn,
920      .ts-btn-brand,
921      #mobile-menu.ts-menu {
922        transition-duration: .01ms !important;
923      }
924    }
925  </style>
926
927  <style>
928    .pricing-page{padding-top:var(--ts-nav-h);background:var(--ts-surface)}
929    .pricing-hero{padding:6rem 0 3.5rem;text-align:center;background:radial-gradient(circle at 50% 0,rgba(79,70,229,.13),transparent 38%),var(--ts-surface)}
930    .pricing-hero h1{max-width:780px;margin:0 auto;font-size:clamp(2.1rem,4.1vw,3.25rem);line-height:1.04;letter-spacing:-.036em;font-weight:600}
931    .pricing-hero p{max-width:670px;margin:1.2rem auto 0;color:var(--ts-ink-2);font-size:clamp(.975rem,1.1vw,1.125rem);line-height:1.6}
932    .pricing-main{padding:1rem 0 7rem}.pricing-duration-shell{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:.25rem;padding:.25rem;border:1px solid var(--ts-hair);border-radius:999px;background:var(--ts-surface-2)}.pricing-switch{display:flex;justify-content:center;margin-bottom:2rem}.pricing-duration-tab{display:inline-flex;align-items:center;gap:.35rem;padding:.65rem .9rem;border:0;border-radius:999px;background:transparent;color:var(--ts-ink-3);font:500 .875rem/1 inherit;cursor:pointer}.pricing-duration-tab.is-active{background:var(--ts-surface);color:var(--ts-ink);box-shadow:0 1px 3px rgba(15,23,42,.09)}.pricing-tab-discount{color:#059669;font-size:.7rem;font-weight:700}
933    .pricing-cards{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:900px;margin:auto}.price-card{display:flex;flex-direction:column;padding:2.2rem;border:1px solid var(--ts-hair);border-radius:18px;background:var(--ts-surface)}.price-card--pro{border-color:rgba(79,70,229,.35);box-shadow:0 22px 60px rgba(79,70,229,.1)}.price-card__head{display:flex;justify-content:space-between;gap:1rem}.price-card h2{margin:0;font-size:1.35rem}.price-card__badge{padding:.35rem .6rem;border-radius:999px;background:rgba(79,70,229,.1);color:var(--ts-brand);font-size:.7rem;font-weight:700}.price-card__desc{min-height:44px;margin:.65rem 0 0;color:var(--ts-ink-3);font-size:.9rem;line-height:1.55}.price-card__price{margin:2rem 0 0;font-size:2.45rem;font-weight:600;letter-spacing:-.04em}.price-card__meta{min-height:40px;margin:.5rem 0 0;color:var(--ts-ink-3);font-size:.8rem}.price-card__action{margin-top:1.5rem}.pricing-pro-panel[hidden]{display:none!important}
934    .compare{max-width:1000px;margin:5rem auto 0}
934.compare h2{margin:0 0 1.8rem;font-size:clamp(2rem,3.4vw,2.8rem);letter-spacing:-.035em;font-weight:600}.compare-table{overflow:hidden;border:1px solid var(--ts-hair);border-radius:16px}.compare-row{display:grid;grid-template-columns:1.5fr .75fr .75fr}.compare-row>*{padding:1rem 1.25rem;border-bottom:1px solid var(--ts-hair)}.compare-row>*+*{border-left:1px solid var(--ts-hair);text-align:center}.compare-row:last-child>*{border-bottom:0}.compare-row--head{background:var(--ts-surface-2);font-weight:600}.compare-row span{font-size:.9rem}.compare-value{color:var(--ts-ink-2)}.pricing-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:4rem}.pricing-note{padding:1.6rem;border-top:1px solid var(--ts-hair)}.pricing-note h3{margin:0;font-size:1rem}.pricing-note p{margin:.6rem 0 0;color:var(--ts-ink-3);font-size:.88rem;line-height:1.6}
935    @media(max-width:700px){.pricing-hero{padding:4rem 0 2.5rem}.pricing-cards{grid-template-columns:1fr}.compare-table{overflow-x:auto}.compare-row{min-width:640px}.pricing-notes{grid-template-columns:1fr}.price-card__desc,.price-card__meta{min-height:0}}
936  </style>
937</head>
938<body>
939  <div class="pricing-page">
940    <!-- Shared marketing header -->
941<header class="ts-nav" data-nav="stage">
942  <div class="ts-nav__inner">
943    <a href="/" class="ts-nav__brand" aria-label="Tapsite — Beranda">
944      <img src="/tapsite-logo.webp" class="ts-nav__mark" alt="" width="30" height="30">
945      <span class="ts-nav__word">tapsite<i>.ai</i></span>
946    </a>
947
948    <nav class="ts-nav__links" aria-label="Navigasi utama">
949      <a href="/">Beranda</a>
950
951      <div class="ts-nav__dropdown">
952        <button type="button" class="ts-nav__dropdown-btn" aria-expanded="false" aria-haspopup="true">
953          <span>Produk</span>
954          <svg class="w-3.5 h-3.5 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
955            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
956          </svg>
957        </button>
958        <div class="ts-nav__dropdown-menu">
959          <div class="ts-nav__dropdown-label">Produk</div>
960          <a href="/ai-website-builder" class="ts-nav__dropdown-item">
961            <div class="ts-nav__dropdown-icon" aria-hidden="true">
962              <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2a5 5 0 0 0-5 5v1a4 4 0 0 1-1.17 2.83L4 12.66V15h16v-2.34l-1.83-1.83A4 4 0 0 1 17 8V7a5 5 0 0 0-5-5Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M9 19h6M10 15v4m4-4v4"/></svg>
963            </div>
964            <div class="ts-nav__dropdown-text">
965              <span class="ts-nav__dropdown-title">AI Website Builder</span>
966              <span class="ts-nav__dropdown-desc">Buat website dari prompt, siap edit dan publish</span>
967            </div>
968          </a>
969          <a href="/platform-jualan-online" class="ts-nav__dropdown-item">
970            <div class="ts-nav__dropdown-icon" aria-hidden="true">
971              <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><rect x="8" y="2" width="8" height="4" rx="1"/><path stroke-linecap="round" stroke-linejoin="round" d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2M9 12h6M9 16h4"/></svg>
972            </div>
973            <div class="ts-nav__dropdown-text">
974              <span class="ts-nav__dropdown-title">Form Order</span>
975              <span class="ts-nav__dropdown-desc">Checkout AI dan kumpul data buyer</span>
976            </div>
977          </a>
978          <a href="/blog-builder" class="ts-nav__dropdown-item">
979            <div class="ts-nav__dropdown-icon" aria-hidden="true">
980              <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2Z"/></svg>
981            </div>
982            <div class="ts-nav__dropdown-text">
983              <span class="ts-nav__dropdown-title">Blogging</span>
984              <span class="ts-nav__dropdown-desc">Artikel AI dan traffic organik</span>
985            </div>
986          </a>
987          <a href="/ai-chatbox" class="ts-nav__dropdown-item">
988            <div class="ts-nav__dropdown-icon" aria-hidden="true">
989              <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>
990            </div>
991            <div class="ts-nav__dropdown-text">
992              <span class="ts-nav__dropdown-title">Chatbox</span>
993              <span class="ts-nav__dropdown-desc">AI jawab visitor 24 jam, auto inbox</span>
994            </div>
995          </a>
996          <div class="ts-nav__dropdown-soon">
997            <span class="ts-nav__dropdown-soon-label">Segera hadir</span>
998            <span class="ts-nav__dropdown-soon-items">LMS &amp; Course · TapStore · Email Marketing</span>
999          </div>
1000        </div>
1001      </div>
1002
1003      <div class="ts-nav__dropdown ts-nav__dropdown--solutions">
1004        <button type="button" class="ts-nav__dropdown-btn" aria-expanded="false" aria-haspopup="true">
1005          <span>Solusi</span>
1006          <svg class="w-3.5 h-3.5 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
1007            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
1008          </svg>
1009        </button>
1010        <div class="ts-nav__dropdown-menu">
1011          <div class="ts-nav__dropdown-label">Pilih kebutuhanmu</div>
1012          <div class="ts-nav__solution-group">
1013            <div class="ts-nav__solution-heading">Buat website</div>
1014            <a href="/website-untuk-bisnis" class="ts-nav__dropdown-item"><span class="ts-nav__dropdown-title">Website untuk Bisnis</span><span class="ts-nav__dropdown-desc">Company profile, jasa, dan bisnis lokal</span></a>
1015            <a href="/website-portfolio" class="ts-nav__dropdown-item"><span class="ts-nav__dropdown-title">Website Portfolio</span><span class="ts-nav__dropdown-desc">Tampilkan karya, pengalaman, dan layanan</span></a>
1016            <a href="/biolink" class="ts-nav__dropdown-item"><span class="ts-nav__dropdown-title">Biolink</span><span class="ts-nav__dropdown-desc">Semua tautan penting dalam satu halaman</span></a>
1017            <a href="/undangan-pernikahan-digital" class="ts-nav__dropdown-item"><span class="ts-nav__dropdown-title">Undangan Pernikahan Digital</span><span class="ts-nav__dropdown-desc">Informasi acara dan konfirmasi tamu</span></a>
1018          </div>
1019          <div class="ts-nav__solution-group">
1020            <div class="ts-nav__solution-heading">Jual online</div>
1021            <a href="/bikin-toko-online" class="ts-nav__dropdown-item"><span class="ts-nav__dropdown-title">Bikin Toko Online Sendiri</span><span class="ts-nav__dropdown-desc">Etalase dan order dengan nama brand-mu</span></a>
1022            <a href="/jualan-produk-fisik" class="ts-nav__dropdown-item"><span class="ts-nav__dropdown-title">Jual Produk Fisik</span><span class="ts-nav__dropdown-desc">Tampilkan produk dan terima pesanan</span></a>
1023            <a href="/jualan-produk-digital" class="ts-nav__dropdown-item"><span class="ts-nav__dropdown-title">Jual Produk Digital</span><span class="ts-nav__dropdown-desc">Ebook, template, kursus, dan file</span></a>
1024            <a href="/jualan-kelas-online" class="ts-nav__dropdown-item"><span class="ts-nav__dropdown-title">Jual Kelas Online</span><span class="ts-nav__dropdown-desc">Halaman program, pendaftaran, dan pembayaran</span></a>
1025            <a href="/alternatif-ecommerce" class="ts-nav__dropdown-item"><span class="ts-nav__dropdown-title">Alternatif E-commerce</span><span class="ts-nav__dropdown-desc">Channel jualan milik sendiri di luar marketplace</span></a>
1026          </div>
1027          <div class="ts-nav__solution-group">
1028            <div class="ts-nav__solution-heading">Tumbuh &amp; melayani</div>
1029            <a href="/donasi-online" class="ts-nav__dropdown-item"><span class="ts-nav__dropdown-title">Donasi Online</span><span class="ts-nav__dropdown-desc">Halaman kampanye dan alur kontribusi</span></a>
1030            <a href="/blogging-untuk-seo" class="ts-nav__dropdown-item"><span class="ts-nav__dropdown-title">Blogging untuk SEO</span><span class="ts-nav__dropdown-desc">Bangun konten organik di website-mu</span></a>
1031            <a href="/cs-ai-untuk-website" class="ts-nav__dropdown-item"><span class="ts-nav__dropdown-title">Integrasi CS AI</span><span class="ts-nav__dropdown-desc">Jawab pertanyaan visitor dari konteks bisnis</span></a>
1032            <div class="ts-nav__dropdown-soon"><span class="ts-nav__dropdown-soon-label">Segera hadir</span><span class="ts-nav__dropdown-soon-items">Email marketing broadcast</span></div>
1033          </div>
1034        </div>
1035      </div>
1036
1037      <a href="/showcases">Showcase</a>
1038      <a href="/pricing" aria-current="page">Harga</a>
1039
1040      <div class="ts-nav__dropdown">
1041        <button type="button" class="ts-nav__dropdown-btn" aria-expanded="false" aria-haspopup="true">
1042          <span>Resources</span>
1043          <svg class="w-3.5 h-3.5 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
1044            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
1045          </svg>
1046        </button>
1047        <div class="ts-nav__dropdown-menu">
1048          <div class="ts-nav__dropdown-label">Resources</div>
1049          <a href="https://blog.tapsite.ai" class="ts-nav__dropdown-item">
1050            <div class="ts-nav__dropdown-icon" aria-hidden="true">
1051              <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 20H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v1m2 13a2 2 0 0 1-2-2V7m2 13a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2M7 16h6M7 8h6v4H7z"/></svg>
1052            </div>
1053            <div class="ts-nav__dropdown-text">
1054              <span class="ts-nav__dropdown-title">Blog</span>
1055              <span class="ts-nav__dropdown-desc">Wawasan dan panduan bisnis online</span>
1056            </div>
1057          </a>
1058          <a href="/tutorial" class="ts-nav__dropdown-item">
1059            <div class="ts-nav__dropdown-icon" aria-hidden="true">
1060              <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.25v13m0-13C10.83 5.48 9.25 5 7.5 5S4.17 5.48 3 6.25v13C4.17 18.48 5.75 18 7.5 18s3.33.48 4.5 1.25m0-13C13.17 5.48 14.75 5 16.5 5s3.33.48 4.5 1.25v13C19.83 18.48 18.25 18 16.5 18s-3.33.48-4.5 1.25"/></svg>
1061            </div>
1062            <div class="ts-nav__dropdown-text">
1063              <span class="ts-nav__dropdown-title">Tutorial</span>
1064              <span class="ts-nav__dropdown-desc">Panduan penggunaan langkah demi langkah</span>
1065            </div>
1066          </a>
1067          <a href="https://support.tapsite.ai" target="_blank" rel="noopener noreferrer" class="ts-nav__dropdown-item">
1068            <div class="ts-nav__dropdown-icon" aria-hidden="true">
1069              <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path stroke-linecap="round" stroke-linejoin="round" d="M9.1 9a3 3 0 1 1 5.83 1c0 2-3 2-3 4M12 18h.01"/></svg>
1070            </div>
1071            <div class="ts-nav__dropdown-text">
1072              <span class="ts-nav__dropdown-title">Pusat Bantuan</span>
1073              <span class="ts-nav__dropdown-desc">Temukan jawaban atau hubungi tim kami</span>
1074            </div>
1075          </a>
1076        </div>
1077      </div>
1078    </nav>
1079
1080    <div class="ts-nav__actions">
1081      <button id="theme-toggle" class="ts-icon-btn" aria-label="Ganti mode terang atau gelap">
1082        <svg id="icon-sun" class="w-[18px] h-[18px] hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
1083          <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.36-6.36-.7.7M6.34 17.66l-.7.7m12.72 0-.7-.7M6.34 6.34l-.7-.7M12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10Z" />
1084        </svg>
1085        <svg id="icon-moon" class="w-[18px] h-[18px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
1086          <path stroke-linecap="round" stroke-linejoin="round" d="M20.35 15.35A9 9 0 0 1 8.65 3.65 9 9 0 1 0 20.35 15.35Z" />
1087        </svg>
1088      </button>
1089
1090            <a href="/login" class="ts-link-ghost">Masuk</a>
1091      <a href="/register" class="ts-btn-brand">Mulai Gratis</a>
1092      
1093      <button id="mobile-menu-button" class="ts-icon-btn ts-only-mobile" aria-label="Buka menu" aria-controls="mobile-menu" aria-expanded="false">
1094        <svg class="w-[18px] h-[18px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
1095          <path stroke-linecap="round" stroke-linejoin="round" d="M4 7h16M4 12h16M4 17h16" />
1096        </svg>
1097      </button>
1098    </div>
1099  </div>
1100  <span class="ts-nav__progress" aria-hidden="true"></span>
1101</header>
1102
1103<div id="mobile-menu" class="ts-menu ts-only-mobile">
1104  <div>
1105    <div class="ts-menu__head">
1106      <span class="ts-nav__word">tapsite<i>.ai</i></span>
1107      <button id="close-menu-button" class="ts-icon-btn" aria-label="Tutup menu">
1108        <svg class="w-[18px] h-[18px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
1109          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
1110        </svg>
1111      </button>
1112    </div>
1113    <nav aria-label="Navigasi mobile">
1114      <a href="/">Beranda</a>
1115
1116      <details class="ts-menu__accordion">
1117        <summary class="ts-menu__accordion-btn">
1118          <span>Produk</span>
1119          <svg class="ts-menu__chevron" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
1120        </summary>
1121        <div class="ts-menu__accordion-body">
1122          <a href="/ai-website-builder" class="ts-menu__sublink"><span>AI Website Builder</span><span>Website AI</span></a>
1123          <a href="/platform-jualan-online" class="ts-menu__sublink"><span>Form Order</span><span>Checkout</span></a>
1124          <a href="/blog-builder" class="ts-menu__sublink"><span>Blogging</span><span>Konten AI</span></a>
1125          <a href="/ai-chatbox" class="ts-menu__sublink"><span>Chatbox</span><span>Support AI</span></a>
1126          <div class="ts-menu__soon">Segera hadir: LMS & Course · TapStore · Email Marketing</div>
1127        </div>
1128      </details>
1129
1130      <details class="ts-menu__accordion">
1131        <summary class="ts-menu__accordion-btn">
1132          <span>Solusi</span>
1133          <svg class="ts-menu__chevron" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
1134        </summary>
1135        <div class="ts-menu__accordion-body">
1136          <div class="ts-menu__sub-label">Buat website</div>
1137          <a href="/website-untuk-bisnis" class="ts-menu__sublink"><span>Website untuk Bisnis</span></a>
1138          <a href="/website-portfolio" class="ts-menu__sublink"><span>Website Portfolio</span></a>
1139          <a href="/biolink" class="ts-menu__sublink"><span>Biolink</span></a>
1140          <a href="/undangan-pernikahan-digital" class="ts-menu__sublink"><span>Undangan Pernikahan Digital</span></a>
1141          <div class="ts-menu__sub-label">Jual online</div>
1142          <a href="/bikin-toko-online" class="ts-menu__sublink"><span>Bikin Toko Online</span></a>
1143          <a href="/jualan-produk-fisik" class="ts-menu__sublink"><span>Jual Produk Fisik</span></a>
1144          <a href="/jualan-produk-digital" class="ts-menu__sublink"><span>Jual Produk Digital</span></a>
1145          <a href="/jualan-kelas-online" class="ts-menu__sublink"><span>Jual Kelas Online</span></a>
1146          <a href="/alternatif-ecommerce" class="ts-menu__sublink"><span>Alternatif E-commerce</span></a>
1147          <div class="ts-menu__sub-label">Tumbuh & melayani</div>
1148          <a href="/donasi-online" class="ts-menu__sublink"><span>Donasi Online</span></a>
1149          <a href="/blogging-untuk-seo" class="ts-menu__sublink"><span>Blogging untuk SEO</span></a>
1150          <a href="/cs-ai-untuk-website" class="ts-menu__sublink"><span>Integrasi CS AI</span></a>
1151          <div class="ts-menu__soon">Segera hadir: Email marketing broadcast</div>
1152        </div>
1153      </details>
1154
1155      <a href="/showcases">Showcase</a>
1156      <a href="/pricing" aria-current="page">Harga</a>
1157
1158      <details class="ts-menu__accordion">
1159        <summary class="ts-menu__accordion-btn">
1160          <span>Resources</span>
1161          <svg class="ts-menu__chevron" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
1162        </summary>
1163        <div class="ts-menu__accordion-body">
1164          <a href="https://blog.tapsite.ai" class="ts-menu__sublink"><span>Blog</span></a>
1165          <a href="/tutorial" class="ts-menu__sublink"><span>Tutorial</span><span>Panduan</span></a>
1166          <a href="https://support.tapsite.ai" target="_blank" rel="noopener noreferrer" class="ts-menu__sublink"><span>Pusat Bantuan</span><span>Support</span></a>
1167        </div>
1168      </details>
1169    </nav>
1170    <div class="ts-menu__foot">
1171            <a href="/login" class="ts-menu__cta ts-menu__cta--quiet">Masuk</a>
1172      <a href="/register" class="ts-menu__cta">Mulai Gratis</a>
1173          </div>
1174  </div>
1175</div>
1176
1177<div id="menu-overlay" class="ts-only-mobile fixed inset-0 bg-slate-950/45 backdrop-blur-sm op
1177acity-0 pointer-events-none transition-opacity duration-300 z-40" aria-hidden="true"></div>
1178
1179<script>
1180  document.addEventListener('DOMContentLoaded', function () {
1181    var nav = document.querySelector('header.ts-nav');
1182    var sentinel = document.getElementById('ts-nav-sentinel');
1183    if (nav && sentinel && 'IntersectionObserver' in window) {
1184      var edge = 64;
1185      var syncNav = function () {
1186        nav.setAttribute('data-nav', sentinel.getBoundingClientRect().top <= edge ? 'solid' : 'stage');
1187      };
1188      var navObserver = new IntersectionObserver(syncNav, { rootMargin: '-' + edge + 'px 0px 0px 0px', threshold: 0 });
1189      navObserver.observe(sentinel);
1190      window.addEventListener('scrollend', syncNav, { passive: true });
1191      window.addEventListener('resize', syncNav, { passive: true });
1192      window.addEventListener('load', syncNav, { once: true });
1193      syncNav();
1194    }
1195
1196    var themeButton = document.getElementById('theme-toggle');
1197    var sun = document.getElementById('icon-sun');
1198    var moon = document.getElementById('icon-moon');
1199    var applyTheme = function (dark) {
1200      document.documentElement.classList.toggle('dark', dark);
1201      sun.classList.toggle('hidden', !dark);
1202      moon.classList.toggle('hidden', dark);
1203      localStorage.setItem('theme', dark ? 'dark' : 'light');
1204    };
1205    applyTheme(localStorage.getItem('theme') === 'dark');
1206    themeButton.addEventListener('click', function () {
1207      applyTheme(!document.documentElement.classList.contains('dark'));
1208    });
1209
1210    var mobileMenuButton = document.getElementById('mobile-menu-button');
1211    var closeMenuButton = document.getElementById('close-menu-button');
1212    var mobileMenu = document.getElementById('mobile-menu');
1213    var menuOverlay = document.getElementById('menu-overlay');
1214    var menuOpen = false;
1215
1216    var closeMenu = function () {
1217      menuOpen = false;
1218      mobileMenu.classList.remove('is-open');
1219      mobileMenuButton.setAttribute('aria-expanded', 'false');
1220      menuOverlay.classList.add('opacity-0', 'pointer-events-none');
1221      menuOverlay.classList.remove('opacity-100');
1222      document.body.style.overflow = '';
1223      Array.from(mobileMenu.querySelectorAll('details.ts-menu__accordion')).forEach(function (d) { d.open = false; });
1224    };
1225    var openMenu = function () {
1226      menuOpen = true;
1227      mobileMenu.classList.add('is-open');
1228      mobileMenuButton.setAttribute('aria-expanded', 'true');
1229      menuOverlay.classList.remove('opacity-0', 'pointer-events-none');
1230      menuOverlay.classList.add('opacity-100');
1231      document.body.style.overflow = 'hidden';
1232      closeMenuButton.focus();
1233    };
1234
1235    mobileMenuButton.addEventListener('click', function () { menuOpen ? closeMenu() : openMenu(); });
1236    closeMenuButton.addEventListener('click', closeMenu);
1237    menuOverlay.addEventListener('click', closeMenu);
1238    Array.from(mobileMenu.getElementsByTagName('a')).forEach(function (link) { link.addEventListener('click', closeMenu); });
1239
1240    var dropdowns = Array.from(document.querySelectorAll('.ts-nav__dropdown'));
1241    dropdowns.forEach(function (dropdown) {
1242      var button = dropdown.querySelector('.ts-nav__dropdown-btn');
1243      var closeTimer = null;
1244      var setExpanded = function (expanded) { button.setAttribute('aria-expanded', expanded ? 'true' : 'false'); };
1245      var open = function () {
1246        clearTimeout(closeTimer);
1247        dropdowns.forEach(function (other) { if (other !== dropdown) { other.classList.remove('is-open'); other.querySelector('.ts-nav__dropdown-btn').setAttribute('aria-expanded', 'false'); } });
1248        dropdown.classList.add('is-open'); setExpanded(true);
1249      };
1250      var close = function () { closeTimer = setTimeout(function () { dropdown.classList.remove('is-open'); setExpanded(false); }, 150); };
1251      dropdown.addEventListener('mouseenter', open);
1252      dropdown.addEventListener('mouseleave', close);
1253      button.addEventListener('focus', open);
1254      dropdown.addEventListener('focusout', function (event) {
1255        if (!dropdown.contains(event.relatedTarget)) { clearTimeout(closeTimer); dropdown.classList.remove('is-open'); setExpanded(false); }
1256      });
1257    });
1258
1259    document.addEventListener('keydown', function (event) {
1260      if (event.key !== 'Escape') return;
1261      closeMenu();
1262      dropdowns.forEach(function (dropdown) {
1263        dropdown.querySelector('.ts-nav__dropdown-btn').setAttribute('aria-expanded', 'false');
1264      });
1265    });
1266
1267    var resizeTimer;
1268    window.addEventListener('resize', function () {
1269      clearTimeout(resizeTimer);
1270      resizeTimer = setTimeout(function () {
1271        if (window.innerWidth >= 920) closeMenu();
1272      }, 250);
1273    });
1274  });
1275</script>
1275    <main>
1276      <section class="pricing-hero"><div class="product-wrap"><div class="product-kicker">Harga Tapsite</div><h1>Mulai gratis. Upgrade ketika kebutuhanmu bertumbuh.</h1><p>Pilih paket berdasarkan kapasitas website dan fitur yang benar-benar digunakan. Tidak perlu membayar PRO sebelum kamu membutuhkannya.</p></div></section>
1277      <div id="ts-nav-sentinel" aria-hidden="true"></div>
1278      <section class="pricing-main"><div class="product-wrap" id="pricing-switcher-root" data-default-index="0">
1279        <div class="pricing-switch"><div class="pricing-duration-shell" role="tablist" aria-label="Durasi paket PRO">
1280          <button type="button" role="tab" class="pricing-duration-tab is-active" data-pricing-tab="0" aria-selected="true"><span>Bulanan</span></button><button type="button" role="tab" class="pricing-duration-tab " data-pricing-tab="1" aria-selected="false"><span>3 Bulan</span><span class="pricing-tab-discount">Hemat 8%</span></button><button type="button" role="tab" class="pricing-duration-tab " data-pricing-tab="2" aria-selected="false"><span>6 Bulan</span><span class="pricing-tab-discount">Hemat 19%</span></button><button type="button" role="tab" class="pricing-duration-tab " data-pricing-tab="3" aria-selected="false"><span>Tahunan</span><span class="pricing-tab-discount">Hemat 20%</span></button>        </div></div>
1281        <div class="pricing-cards">
1282          <article class="price-card"><div class="price-card__head"><h2>Gratis</h2><span class="price-card__badge">Starter</span></div><p class="price-card__desc">Cocok untuk mencoba Tapsite dan menerbitkan proyek pertamamu.</p><p class="price-card__price">Rp 0</p><p class="price-card__meta">Gunakan selama masih sesuai dengan batas paket gratis.</p><a class="product-cta product-cta--secondary price-card__action" href="/register">Mulai Gratis</a></article>
1283          <article class="price-card price-card--pro">
1284            <div class="pricing-pro-panel" data-pricing-panel="0">              <div class="price-card__head"><h2>PRO</h2></div><p class="price-card__desc">PRO 1 Bulan untuk kapasitas tanpa batas pada fitur utama.</p><p class="price-card__price">Rp 99.000</p><p class="price-card__meta">Bonus Rp 25.000 token AI. </p><button type="button" class="product-cta price-card__action" onclick="__subscribe('pro-monthly')">Pilih Paket</button>
1285            </div><div class="pricing-pro-panel" data-pricing-panel="1" hidden>              <div class="price-card__head"><h2>PRO</h2><span class="price-card__badge">Populer</span></div><p class="price-card__desc">PRO 3 Bulan untuk kapasitas tanpa batas pada fitur utama.</p><p class="price-card__price">Rp 269.000</p><p class="price-card__meta">Bonus Rp 75.000 token AI. Hemat Rp 28.000.</p><button type="button" class="product-cta price-card__action" onclick="__subscribe('pro-quarterly')">Pilih Paket</button>
1286            </div><div class="pricing-pro-panel" data-pricing-panel="2" hidden>              <div class="price-card__head"><h2>PRO</h2></div><p class="price-card__desc">PRO 6 Bulan untuk kapasitas tanpa batas pada fitur utama.</p><p class="price-card__price">Rp 449.000</p><p class="price-card__meta">Bonus Rp 150.000 token AI. Hemat Rp 145.000.</p><button type="button" class="product-cta price-card__action" onclick="__subscribe('pro-semiannually')">Pilih Paket</button>
1287            </div><div class="pricing-pro-panel" data-pricing-panel="3" hidden>              <div class="price-card__head"><h2>PRO</h2></div><p class="price-card__desc">PRO 1 Tahun untuk kapasitas tanpa batas pada fitur utama.</p><p class="price-card__price">Rp 990.000</p><p class="price-card__meta">Bonus Rp 400.000 token AI. Hemat Rp 298.000.</p><button type="button" class="product-cta price-card__action" onclick="__subscribe('pro-yearly')">Pilih Paket</button>
1288            </div>          </article>
1289        </div>
1290        <div class="compare"><h2>Bandingkan kapasitas dan fitur</h2><div class="compare-table"><div class="compare-row compare-row--head"><span>Fitur</span><span>Gratis</span><span>PRO</span></div>
1291          <div class="compare-row"><span>Workspace</span><span class="compare-value">1</span><span class="compare-value">Tanpa batas</span></div><div class="compare-row"><span>Halaman landing</span><span class="compare-value">3</span><span class="compare-value">Tanpa batas</span></div><div class="compare-row"><span>Blog aktif</span><span class="compare-value">1</span><span class="compare-value">Tanpa batas</span></div><div class="compare-row"><span>Artikel blog</span><span class="compare-value">3</span><span class="compare-value">Tanpa batas</span></div><div class="compare-row"><span>
1291Form order</span><span class="compare-value">1</span><span class="compare-value">Tanpa batas</span></div><div class="compare-row"><span>Transaksi form order</span><span class="compare-value">100</span><span class="compare-value">Tanpa batas</span></div><div class="compare-row"><span>Pendapatan form order</span><span class="compare-value">Rp 500 rb</span><span class="compare-value">Tanpa batas</span></div><div class="compare-row"><span>Traffic / bulan</span><span class="compare-value">5 rb</span><span class="compare-value">Tanpa batas</span></div><div class="compare-row"><span>Storage media</span><span class="compare-value">100 MB</span><span class="compare-value">Tanpa batas</span></div><div class="compare-row"><span>Subdomain *.tapsite.ai</span><span class="compare-value">✓</span><span class="compare-value">✓</span></div><div class="compare-row"><span>Custom domain</span><span class="compare-value">—</span><span class="compare-value">✓</span></div><div class="compare-row"><span>Pengaturan SEO lanjutan</span><span class="compare-value">—</span><span class="compare-value">✓</span></div><div class="compare-row"><span>Analitik &amp; statistik</span><span class="compare-value">—</span><span class="compare-value">✓</span></div><div class="compare-row"><span>Model AI premium (Gemini &amp; Claude)</span><span class="compare-value">—</span><span class="compare-value">✓</span></div><div class="compare-row"><span>Form workflow &amp; WhatsApp follow-up</span><span class="compare-value">—</span><span class="compare-value">✓</span></div>        </div></div>
1292        <div class="pricing-notes"><article class="pricing-note"><h3>Token AI terpisah dari langganan</h3><p>Token digunakan ketika menjalankan fitur AI. Setiap paket dapat menyertakan bonus token sesuai data paket yang aktif.</p></article><article class="pricing-note"><h3>Upgrade saat diperlukan</h3><p>Paket Gratis memberi ruang untuk mencoba produk. PRO membuka kapasitas dan fitur lanjutan sesuai tabel.</p></article><article class="pricing-note"><h3>Butuh bantuan?</h3><p>Hubungi support Tapsite jika kamu perlu memahami paket yang sesuai dengan penggunaan bisnismu.</p></article></div>
1293        <div class="faq-layout product-section"><div><h2>Pertanyaan tentang harga</h2></div><div class="faq-list"><details class="faq-item"><summary>Apakah Tapsite gratis untuk digunakan?</summary><p>Ya. Paket Gratis tersedia dengan batas workspace, halaman, blog, form order, transaksi, traffic, dan storage yang tercantum pada tabel.</p></details><details class="faq-item"><summary>Kapan saya perlu upgrade ke PRO?</summary><p>Upgrade ketika kapasitas paket Gratis tidak lagi cukup atau ketika kamu membutuhkan custom domain, SEO lanjutan, analytics, model AI premium, atau workflow WhatsApp.</p></details><details class="faq-item"><summary>Apakah token AI sama dengan biaya langganan?</summary><p>Tidak. Langganan menentukan akses serta kapasitas paket, sedangkan token digunakan oleh fitur AI. Bonus token mengikuti paket yang dipilih.</p></details><details class="faq-item"><summary>Bagaimana proses pembayaran paket?</summary><p>Pilih durasi PRO lalu klik Pilih Paket. Pengguna yang belum masuk akan diarahkan ke login sebelum melanjutkan pembayaran.</p></details></div></div>
1294      </div></section>
1295    </main>
1296    <footer id="kontak" class="bg-slate-950 text-slate-400 pt-16 pb-8 px-4 sm:px-6 lg:px-8">
1297  <div class="max-w-7xl mx-auto">
1298    <!-- Main Footer Content -->
1299    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-10 mb-16">
1300      <!-- Company Info Column -->
1301      <div class="lg:col-span-2">
1302        <div class="flex items-center mb-5">
1303          <img src="/tapsite-logo.webp"
1304            class="w-10 h-10 rounded-xl flex items-center justify-center mr-3 shadow-[0_4px_10px_rgba(0,0,0,0.5)]">
1305          <h3 class="text-xl font-bold text-white tracking-tight">tapsite.ai</h3>
1306        </div>
1307        <p class="text-slate-400 mb-6 leading-relaxed text-sm font-light max-w-sm">
1308          AI Landing Page Builder Pertama di Indonesia. Buat landing page profesional dengan
1309          kecerdasan
1310          buatan dalam hitungan menit tanpa ribet.
1311        </p>
1312        <div class="mb-5">
1313          <h4 class="text-xs font-semibold tracking-wider uppercase text-slate-200 mb-3">Kantor Pusat
1314          </h4>
1315          <p class="text-slate-400 text-sm font-light leading-relaxed max-w-sm">Jalan Mande Raya no.26
1316            01/02 Cikadut, Cicaheum<br>Bandung 40194</p>
1317        </div>
1318        <div class="mb-4">
1319          <h4 class="text-xs font-semibold tracking-wider uppercase text-slate-200 mb-3">Hubungi Kami
1320          </h4>
1321          <div class="flex flex-col gap-2 text-sm font-light">
1322            <a href="/cdn-cgi/l/email-protection#a5d6d0d5d5cad7d1e5d1c4d5d6ccd1c08bc4cc" class="hover:text-white transition-colors inline-flex items-center gap-2">
1323              <svg class="w-4 h-4 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
1324                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
1325                  d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
1326                </path>
1327              </svg>
1328              <span class="__cf_email__" data-cfemail="770402070718050337031607041e031259161e">[email&#160;protected]</span>
1329            </a>
1330            <a href="https://wa.me/6285138050322"
1331              class="hover:text-white transition-colors inline-flex items-center gap-2">
1332              <svg class="w-4 h-4 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
1333                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
1334                  d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z">
1335                </path>
1336              </svg>
1337              +62 851-3805-0322
1338            </a>
1339          </div>
1340        </div>
1341      </div>
1342      <!-- Product Column -->
1343      <div>
1344        <h3 class="text-sm font-semibold text-slate-200 uppercase tracking-wider mb-4">Produk</h3>
1345        <ul class="space-y-2">
1346          <li><a href="/ai-website-builder" class="text-slate-400 hover:text-white transition duration-200 text-sm">AI Website Builder</a></li>
1347          <li><a href="/platform-jualan-online" class="text-slate-400 hover:text-white transition duration-200 text-sm">Platform Jualan Online</a></li>
1348          <li><a href="/blog-builder" class="text-slate-400 hover:text-white transition duration-200 text-sm">Blog Builder</a></li>
1349          <li><a href="/ai-chatbox" class="text-slate-400 hover:text-white transition duration-200 text-sm">AI Chatbox</a></li>
1350          <li><a href="/pricing" class="text-slate-400 hover:text-white transition duration-200 text-sm">Harga</a></li>
1351          <li><a href="/showcases" class="text-slate-400 hover:text-white transition duration-200 text-sm">Showcase</a></li>
1352        </ul>
1353      </div>
1354      <!-- Solusi Column -->
1355      <div>
1356        <h3 class="text-sm font-semibold text-slate-200 uppercase tracking-wider mb-4">Solusi</h3>
1357        <ul class="space-y-2">
1358          <li><a href="/website-untuk-bisnis" class="text-slate-400 hover:text-white transition duration-200 text-sm">Website Bisnis</a></li>
1359          <li><a href="/bikin-toko-online" class="text-slate-400 hover:text-white transition duration-200 text-sm">Toko Online</a></li>
1360          <li><a href="/jualan-kelas-online" class="text-slate-400 hover:text-white transition duration-200 text-sm">Jual Kelas Online</a></li>
1361          <li><a href="/donasi-online" class="text-slate-400 hover:text-white transition duration-200 text-sm">Donasi Online</a></li>
1362          <li><a href="/cs-ai-untuk-website" class="text-slate-400 hover:text-white transition duration-200 text-sm">CS AI Website</a></li>
1363          <li><a href="/website-portfolio" class="text-slate-400 hover:text-white transition duration-200 text-sm">Website Portfolio</a></li>
1364          <li><a href="/blogging-untuk-seo" class="text-slate-400 hover:text-white transition duration-200 text-sm">Blogging untuk SEO</a></li>
1365        </ul>
1366      </div>
1367      <!-- Resources Column -->
1368      <div>
1369        <h3 class="text-sm font-semibold text-slate-200 uppercase tracking-wider mb-4">Resources</h3>
1370        <ul class="space-y-2">
1371          <li><a href="https://blog.tapsite.ai"
1372              class="text-slate-400 hover:text-white transition duration-200 text-sm">Blog</a>
1373          </li>
1374          <li><a href="https://support.tapsite.ai" target="_blank"
1375              class="text-slate-400 hover:text-white transition duration-200 text-sm">Help
1376              Center</a></li>
1377          <li><a href="/affiliate"
1378              class="text-slate-400 hover:text-white transition duration-200 text-sm">Affiliate</a>
1379          </li>
1380        </ul>
1381      </div>
1382      <!-- Legal Column -->
1383      <div>
1384        <h3 class="text-sm font-semibold text-slate-200 uppercase tracking-wider mb-4">Legal</h3>
1385        <ul class="space-y-2">
1386          <li><a href="/privacy-policy"
1387              class="text-slate-400 hover:text-white transition duration-200 text-sm">Kebijakan
1388              Privasi</a></li>
1389          <li><a href="/term-of-service"
1390              class="text-slate-400 hover:text-white transition duration-200 text-sm">Syarat &
1391              Ketentuan</a></li>
1392          <li><a href="/refund-policy"
1393              class="text-slate-400 hover:text-white transition duration-200 text-sm">Kebijakan
1394              Refund</a></li>
1395          <li><a href="/faq" class="text-slate-400 hover:text-white transition duration-200 text-sm">FAQ</a></li>
1396        </ul>
1397      </div>
1398    </div>
1399    <!-- Community Section -->
1400    <div class="border-t border-slate-800 pt-8 mb-8">
1401      <div class="flex flex-col md:flex-row justify-between items-center">
1402        <div class="mb-4 md:mb-0">
1403          <h3 class="text-sm font-semibold text-slate-200 uppercase tracking-wider mb-3">Community
1404          </h3>
1405          <div class="flex space-x-4">
1406            <a href="https://www.facebook.com/tapsiteai" target="_blank"
1407              class="text-slate-500 hover:text-white transition duration-200">
1408              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
1409                <path
1410                  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">
1411                </path>
1412              </svg>
1413            </a>
1414            <a href="https://www.instagram.com/tapsite.ai" target="_blank"
1415              class="text-slate-500 hover:text-white transition duration-200">
1416              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
1417                <path
1418                  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-.069zm0-2.163c-3.259 
14180-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.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.98-1.281-.059-1.69-.073-4.948-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.162 6.162 6.162 6.162-2.759 6.162-6.162-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z">
1419                </path>
1420              </svg>
1421            </a>
1422            <a href="https://x.com/tapsiteai" target="_blank"
1423              class="text-slate-500 hover:text-white transition duration-200">
1424              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
1425                <path
1426                  d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z">
1427                </path>
1428              </svg>
1429            </a>
1430            <a href="https://www.youtube.com/@tapsiteai" target="_blank"
1431              class="text-slate-500 hover:text-white transition duration-200">
1432              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
1433                <path
1434                  d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z">
1435                </path>
1436              </svg>
1437            </a>
1438          </div>
1439        </div>
1440      </div>
1441    </div>
1442    <!-- Bottom Bar -->
1443    <div class="border-t border-slate-800 pt-8">
1444      <div class="flex flex-col md:flex-row justify-between items-center gap-4">
1445        <div class="text-center md:text-left">
1446          <p class="text-slate-400 text-sm">&copy; 2026 tapsite.ai - AI Landing Page Builder Pertama
1447            di
1448            Indonesia. All Rights Reserved.</p>
1449        </div>
1450        <div class="flex items-center space-x-4">
1451          <div class="bg-slate-900 rounded-lg p-2 border border-slate-800 shadow-sm">
1452            <img src="/logo-komdigi.png" alt="Terdaftar Resmi di Kementerian Komunikasi dan Digital (Komdigi)"
1453              class="h-8 w-auto opacity-80 hover:opacity-100 transition-opacity">
1454          </div>
1455          <div class="bg-slate-900 rounded-lg p-2 border border-slate-800 shadow-sm">
1456            <img src="/logo-pse.webp" alt="Penyelenggara Sistem Elektronik (PSE) Terdaftar"
1457              class="h-8 w-auto opacity-80 hover:opacity-100 transition-opacity">
1458          </div>
1459        </div>
1460      </div>
1461    </div>
1462  </div>
1463</footer>
1464  </div>
vendor: 111 bytes, lines 1464-1465
1464
1465  <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
1465<script>
1466    window.__isLoggedIn=false;
1467    async function __subscribe(planId){if(!window.__isLoggedIn){window.location.href='/login?redirect_to='+encodeURIComponent('/pricing?plan_id='+planId);return}try{var response=await fetch('/subscribe',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({plan_id:planId})});if(response.ok){window.location.href=await response.text();return}alert('Gagal subscribe. Silakan coba lagi.')}catch(error){alert('Terjadi kesalahan. Silakan coba lagi.')}}
1468    document.addEventListener('DOMContentLoaded',function(){var root=document.getElementById('pricing-switcher-root');var tabs=root.querySelectorAll('[data-pricing-tab]');var panels=root.querySelectorAll('[data-pricing-panel]');function activate(index){tabs.forEach(function(tab){var active=tab.dataset.pricingTab===String(index);tab.classList.toggle('is-active',active);tab.setAttribute('aria-selected',active?'true':'false')});panels.forEach(function(panel){panel.hidden=panel.dataset.pricingPanel!==String(index)})}tabs.forEach(function(tab){tab.addEventListener('click',function(){activate(Number(tab.dataset.pricingTab))})});activate(Number(root.dataset.defaultIndex||0));var planId=new URLSearchParams(location.search).get('plan_id');if(window.__isLoggedIn&&planId)__subscribe(planId)});
1469  </script>
vendor: 1 bytes, line 1469
1469
1470<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":"0bf66d6802574be8832a7af5f69737e2","r":1,"spa":2}' crossorigin="anonymous"></script>
vendor: 1 bytes, line 1470
1470
1471<script>(function(){function c(){var b=a.contentDocument||(a.contentWindow&&a.contentWindow.document);if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'a45c82ff3e50fb87',t:'MTc5MTIwNDIwMw=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>
1471</body>
1472</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.