:root { --ink:#10213d; --muted:#60718c; --line:#dce4ef; --canvas:#f6f8fc; --white:#fff; --navy:#071225; --blue:#2563eb; --cyan:#06b6d4; --mint:#10b981; --violet:#7c3aed; --radius:22px; --font:"Manrope",Aptos,"Segoe UI",sans-serif; --mono:"DM Mono",monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:var(--canvas); color:var(--ink); font-family:var(--font); line-height:1.6; }
a { color:inherit; text-decoration:none; }
a:focus-visible, summary:focus-visible { outline:3px solid #7dd3fc; outline-offset:4px; border-radius:5px; }
.skip-link { position:fixed; z-index:10; left:16px; top:-60px; padding:9px 14px; border-radius:8px; background:var(--navy); color:#fff; font-weight:700; transition:top .18s; }
.skip-link:focus { top:16px; }
.site-header { position:sticky; top:0; z-index:20; width:100%; padding:0 max(20px, calc((100% - 1180px) / 2)); min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:24px; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:4px; color:var(--navy); font-size:22px; font-weight:800; letter-spacing:-1.3px; white-space:nowrap; }.brand>span:last-child>span { color:#C6A15B; }.brand-mark-img { width:30px; height:30px; display:block; }
nav { display:flex; gap:26px; color:#51637d; font-size:14px; font-weight:700; } nav a:hover { color:var(--blue); }.nav-cta { color:var(--blue); font-size:14px; font-weight:800; }.nav-cta span { margin-left:5px; }
.hero { width:min(1180px,calc(100% - 40px)); min-height:620px; margin:auto; display:grid; grid-template-columns:1.02fr .98fr; align-items:center; gap:60px; padding:56px 0 64px; }.eyebrow { margin:0 0 15px; color:var(--blue); font-size:11px; font-weight:800; letter-spacing:1.35px; text-transform:uppercase; }.pulse { display:inline-block; width:8px; height:8px; margin-right:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 5px #d9f9ec; }
h1,h2,h3,p { margin-top:0; } h1 { max-width:650px; margin-bottom:24px; color:var(--navy); font-size:clamp(43px,5.7vw,76px); line-height:1.04; letter-spacing:-4px; } h1 em { color:var(--blue); font-style:normal; }.hero-lede { max-width:590px; color:var(--muted); font-size:18px; line-height:1.75; }.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:31px; }.hero-note { margin-top:14px; color:var(--muted); font-size:13.5px; }.button { min-height:48px; padding:12px 19px; display:inline-flex; align-items:center; justify-content:center; gap:9px; border-radius:11px; font-size:14px; font-weight:800; transition:transform .18s,box-shadow .18s,background .18s; }.button:hover { transform:translateY(-2px); }.button-primary { background:var(--blue); color:#fff; box-shadow:0 12px 24px #2563eb38; }.button-primary:hover { background:#174fc4; }.button-quiet { border:1px solid var(--line); background:#fff; color:#28415f; }.button-quiet:hover { box-shadow:0 8px 18px #10213d14; }
.trust-row { display:flex; gap:25px; padding:0; margin:39px 0 0; list-style:none; }.trust-row li { display:grid; gap:0; }.trust-row strong { color:var(--navy); font-size:13px; }.trust-row span { color:#7c8ba1; font-size:11px; }
.hero-visual { position:relative; min-height:405px; display:grid; align-content:center; }.visual-glow { position:absolute; width:330px; height:330px; right:10px; top:16px; border-radius:50%; background:radial-gradient(circle,#bbf7f4 0,rgba(219,234,254,.7) 36%,transparent 70%); }.code-window { position:relative; overflow:hidden; border:1px solid #d6deea; border-radius:18px; background:#0d1b32; box-shadow:0 30px 65px #10213d36; transform:rotate(2.1deg); }.code-bar { height:45px; display:flex; align-items:center; gap:7px; padding:0 16px; background:#14243e; color:#9fb1cd; font:11px var(--mono); }.code-bar span { width:8px; height:8px; border-radius:50%; background:#f88c97; }.code-bar span:nth-child(2){background:#f7cb74}.code-bar span:nth-child(3){background:#57d8aa}.code-bar b{margin-left:8px;font-weight:500}.code-bar i{margin-left:auto;color:#57d8aa;font-style:normal}pre { margin:0; padding:27px 29px 31px; overflow:auto; color:#d9e4f5; font:12px/1.75 var(--mono); }.syntax-prop{color:#8bd4ff}.syntax-string{color:#8ce6be}.syntax-number{color:#ffc878}.syntax-key{color:#d4ddeb}.result-card { position:absolute; right:-14px; bottom:4px; display:flex; align-items:center; gap:12px; width:min(360px,89%); padding:15px; border:1px solid #d4e1ef; border-radius:14px; background:rgba(255,255,255,.96); box-shadow:0 18px 45px #10213d29; }.result-icon { width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#d8fae9;color:#07845c;font-weight:800; }.result-card small{display:block;color:#78889e;font-size:11px}.result-card strong{display:block;color:#172b49;font-size:12px}.latency{margin-left:auto;color:#07845c;font:10px var(--mono)}
.signal-band { padding:19px 20px; background:var(--navy); color:#dce8fb; text-align:center; }.signal-band p { margin:0; font-size:14px; font-weight:700; letter-spacing:.15px; }.section { width:min(1180px,calc(100% - 40px)); margin:auto; padding:72px 0; }.section-intro { max-width:650px; }.section h2,.closing h2 { margin-bottom:16px; color:var(--navy); font-size:clamp(31px,4vw,51px); line-height:1.12; letter-spacing:-2.4px; }.section-intro>p:last-child,.workflow-copy>p:not(.eyebrow),.security-panel p { color:var(--muted); font-size:16px; }
.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; margin-top:42px; }.product-card { min-height:275px; padding:27px; border:1px solid var(--line); border-radius:var(--radius); background:var(--white); transition:transform .2s,box-shadow .2s; }.product-card:hover { transform:translateY(-5px); box-shadow:0 22px 42px #152d4d14; }.product-icon { width:43px; height:43px; display:grid; place-items:center; margin-bottom:24px; border-radius:13px; font-size:20px; font-weight:800; }.icon-blue{background:#e1efff;color:#2563eb}.icon-violet{background:#eee8ff;color:#7042dd}.icon-mint{background:#dcf9ef;color:#0f956b}.product-card h3{margin-bottom:10px;font-size:20px;letter-spacing:-.7px}.product-card p{min-height:76px;color:var(--muted);font-size:14px}.product-card a,.text-link{color:var(--blue);font-size:13px;font-weight:800}.product-card a span,.text-link span{margin-left:5px}
.workflow { display:grid; grid-template-columns:.9fr 1.1fr; gap:92px; align-items:center; border-top:1px solid var(--line); }.steps { padding:0; margin:0; list-style:none; border-top:1px solid var(--line); }.steps li { display:grid; grid-template-columns:65px 1fr; gap:17px; padding:22px 0; border-bottom:1px solid var(--line); }.steps li>span { color:var(--blue); font:500 16px var(--mono); }.steps h3{margin:0 0 5px;font-size:16px}.steps p{margin:0;color:var(--muted);font-size:13px}
.security { padding-top:0; }.security-panel { display:grid; grid-template-columns:1.2fr .8fr; gap:60px; padding:57px; overflow:hidden; border-radius:28px; background:linear-gradient(125deg,#07172e,#142b4c); color:#eef6ff; position:relative; }.security-panel:after { content:""; position:absolute; width:300px;height:300px;right:-80px;top:-180px;border-radius:50%;border:60px solid #2b5b8c38; }.security-panel h2 { color:#fff; }.security-panel p { max-width:590px; color:#afc5df; }.security-panel ul { z-index:1; align-self:center; margin:0; padding:0; list-style:none; }.security-panel li { padding:9px 0; color:#dceafa; font-size:14px; font-weight:700; }.security-panel li span{margin-right:9px;color:#68e6b3}.faq { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; }.faq-list { border-top:1px solid var(--line); }.faq details { border-bottom:1px solid var(--line); padding:19px 0; }.faq summary { cursor:pointer; color:#203a5c; font-size:15px; font-weight:800; list-style:none; }.faq summary:after{content:"+";float:right;color:var(--blue);font-size:22px;font-weight:500}.faq details[open] summary:after{content:"−"}.faq details p{margin:12px 34px 3px 0;color:var(--muted);font-size:14px}
.closing { width:min(1060px,calc(100% - 40px)); margin:15px auto 56px; padding:56px 30px; border-radius:28px; background:linear-gradient(135deg,#e3f2ff,#e9efff 50%,#e7fdf7); text-align:center; }.closing h2{max-width:710px;margin-left:auto;margin-right:auto}.closing>p:not(.eyebrow){max-width:600px;margin:0 auto;color:var(--muted)}.closing .hero-actions{justify-content:center}footer { width:min(1180px,calc(100% - 40px)); margin:auto; min-height:84px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid var(--line); color:#728198; font-size:12px; }footer .brand{font-size:18px}footer .brand-mark-img{width:25px;height:25px}footer a:last-child{font-weight:800;color:#46618a}
@media (max-width:820px) { .site-header{min-height:72px}.site-header nav{display:none}.hero{grid-template-columns:1fr;gap:20px;padding-top:55px}.hero-visual{min-height:330px}.product-grid{grid-template-columns:1fr}.product-card p{min-height:0}.workflow,.faq,.security-panel{grid-template-columns:1fr;gap:36px}.section{padding:48px 0}.security-panel{padding:35px 26px}.faq{gap:24px}.result-card{right:0}.trust-row{gap:15px}.closing{padding:40px 21px} }
@media (max-width:480px) { .site-header{padding:0 14px}.nav-cta{font-size:12px}.hero,.section{width:calc(100% - 28px)}h1{letter-spacing:-2.5px}.hero-lede{font-size:16px}.trust-row{display:grid;grid-template-columns:repeat(3,1fr)}.trust-row span{font-size:10px}.code-window{transform:none}.code-bar b{display:none}pre{padding:20px 16px;font-size:10px}.result-card{position:relative;bottom:auto;margin:18px 0 0;width:100%}.signal-band p{font-size:12px}.closing{width:calc(100% - 28px)}footer{width:calc(100% - 28px);padding:18px 0;flex-wrap:wrap}footer p{order:3;width:100%;margin:0}.button{width:100%} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.button,.product-card,.skip-link{transition:none} }
.pricing .price-card { display:flex; flex-direction:column; }
.pricing .price-card h3 { font-size:28px; letter-spacing:-.8px; }
.pricing .price-card .price-amount { font-size:34px; font-weight:800; color:var(--navy); letter-spacing:-1px; margin:6px 0 0; }
.pricing .price-card .price-per { color:var(--muted); font-size:13px; margin:0 0 14px; }
.price-features { list-style:none; margin:0 0 20px; padding:0; display:grid; gap:8px; color:#33475f; font-size:14.5px; }
.price-features span { color:var(--mint); font-weight:800; margin-right:6px; }
.price-popular { border:2px solid #D9B45B; position:relative; }

/* Pita paket populer: pil biru flat + teks putih */
.price-popular { box-shadow: 0 26px 50px rgba(12,74,56,.16); }
.pricing .price-card .price-badge { position:absolute; top:-14px; right:18px; padding:7px 14px; background:var(--blue); color:#fff; border:1px solid var(--blue); box-shadow:0 10px 22px #2563eb38; font-size:11px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; border-radius:999px; margin:0; }
.price-badge::before { content:"✦ "; }
.price-badge::after { content:" ✦"; }
.price-note { text-align:center; color:var(--muted); font-size:13.5px; margin-top:20px; }

/* Promo paket: badge biru flat + harga asli dicoret + tanggal berakhir */
.pricing .price-card .price-promo-badge { display:inline-block; align-self:flex-start; padding:6px 12px; border-radius:999px; background:var(--blue); color:#fff; font-size:12.5px; font-weight:800; letter-spacing:1px; margin:8px 0 0; }
.pricing .price-card .price-old { color:var(--muted); font-size:14px; text-decoration:line-through; margin:4px 0 0; }
.pricing .price-card .price-promo-ends { color:var(--muted); font-size:13px; margin:2px 0 0; }

/* CTA kartu paket: tombol biru flat selaras .button-primary, menempel di bawah kartu */
.price-card a.price-cta { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:auto; padding:13px 16px; border-radius:12px; background:var(--blue); color:#fff; font-size:14px; font-weight:800; box-shadow:0 12px 24px #2563eb38; transition:transform .18s, box-shadow .18s, background .18s; }
.price-card a.price-cta:hover { transform:translateY(-2px); background:#174fc4; box-shadow:0 14px 28px rgba(37,99,235,.32); }
.pricing .price-card p { min-height: 0; }

/* Kontak perusahaan: baris footer + kalimat penutup */
.closing p.closing-contact { margin-top:20px; }
.closing-contact a, footer .foot-contact a { color:#46618a; font-weight:700; text-decoration:none; }
.closing-contact a:hover, footer .foot-contact a:hover { text-decoration:underline; }