*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}:root{--green:#00D084;--green-dark:#00A86B;--green-glow:rgba(0, 208, 132, 0.15);--dark:#0A0A0F;--dark-2:#111118;--dark-3:#1A1A25;--dark-4:#22223A;--border:rgba(255,255,255,0.07);--text:#E8E8F0;--text-muted:#888899;--radius:14px;--radius-lg:20px;--wa-green:#25D366;--font-head:'Sora', sans-serif;--font-body:'Inter', sans-serif;--shadow-card:0 4px 24px rgba(0,0,0,0.35);--transition:0.2s cubic-bezier(.4,0,.2,1)}html{scroll-behavior:smooth}body{font-family:var(--font-body);background:var(--dark);color:var(--text);font-size:16px;line-height:1.6;overflow-x:hidden}.container{width:100%;max-width:1180px;margin:0 auto;padding:0 20px}a{text-decoration:none;color:inherit}img{max-width:100%}.btn-primary{display:inline-flex;align-items:center;gap:8px;background:var(--green);color:#000;font-family:var(--font-head);font-weight:700;font-size:15px;padding:13px 28px;border-radius:50px;transition:var(--transition);border:none;cursor:pointer}.btn-primary:hover{background:var(--green-dark);transform:translateY(-2px);box-shadow:0 8px 24px rgb(0 208 132 / .35)}.btn-ghost{display:inline-flex;align-items:center;gap:8px;background:#fff0;color:var(--text);font-family:var(--font-head);font-weight:600;font-size:15px;padding:12px 24px;border-radius:50px;border:1.5px solid var(--border);transition:var(--transition);cursor:pointer}.btn-ghost:hover{border-color:rgb(255 255 255 / .25);background:rgb(255 255 255 / .04)}.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:16px 0;background:rgb(10 10 15 / .8);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border);transition:var(--transition)}.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}.logo{font-family:var(--font-head);font-weight:800;font-size:20px;color:var(--green);letter-spacing:-.5px}.nav-links{display:flex;gap:28px}.nav-links a{font-size:14px;font-weight:500;color:var(--text-muted);transition:var(--transition)}.nav-links a:hover{color:var(--text)}.btn-wa-nav{display:inline-flex;align-items:center;gap:8px;background:var(--wa-green);color:#fff;font-family:var(--font-head);font-size:13px;font-weight:600;padding:8px 18px;border-radius:50px;transition:var(--transition);white-space:nowrap}.btn-wa-nav:hover{background:#1ebe5d;transform:translateY(-1px)}@media (max-width:640px){.nav-links{display:none}.logo{font-size:18px}}.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:120px 0 80px;overflow:hidden}.hero-bg-orbs{position:absolute;inset:0;pointer-events:none}.orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.35}.orb-1{width:600px;height:600px;background:radial-gradient(circle,#00D084,transparent 70%);top:-200px;right:-200px}.orb-2{width:400px;height:400px;background:radial-gradient(circle,#5B2EFF,transparent 70%);bottom:-100px;left:-100px}.orb-3{width:300px;height:300px;background:radial-gradient(circle,#FF6B35,transparent 70%);top:40%;left:30%;opacity:.15}.hero-content{position:relative;text-align:center;max-width:780px;margin:0 auto}.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgb(0 208 132 / .12);border:1px solid rgb(0 208 132 / .3);color:var(--green);font-size:13px;font-weight:600;padding:6px 18px;border-radius:50px;margin-bottom:24px;animation:fadeUp 0.6s ease both}.hero-title{font-family:var(--font-head);font-size:clamp(36px, 7vw, 68px);font-weight:800;line-height:1.1;letter-spacing:-2px;margin-bottom:20px;animation:fadeUp 0.6s ease 0.1s both}.gradient-text{background:linear-gradient(135deg,#00D084,#5B2EFF);-webkit-background-clip:text;-webkit-text-fill-color:#fff0;background-clip:text}.hero-subtitle{font-size:clamp(15px, 2.5vw, 18px);color:var(--text-muted);max-width:560px;margin:0 auto 36px;line-height:1.7;animation:fadeUp 0.6s ease 0.2s both}.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:48px;animation:fadeUp 0.6s ease 0.3s both}.hero-stats{display:flex;align-items:center;justify-content:center;gap:0;background:rgb(255 255 255 / .04);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px 32px;animation:fadeUp 0.6s ease 0.4s both}.stat{text-align:center;padding:0 24px}.stat-num{display:block;font-family:var(--font-head);font-size:22px;font-weight:800;color:var(--green)}.stat-label{font-size:12px;color:var(--text-muted);font-weight:500}.stat-divider{width:1px;height:36px;background:var(--border)}@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}.marquee-wrapper{overflow:hidden;background:var(--dark-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:14px 0}.marquee{display:flex;gap:0;white-space:nowrap;animation:marquee 30s linear infinite}.marquee span{display:inline-flex;align-items:center;font-size:13px;font-weight:600;color:var(--text-muted);padding:0 28px;border-right:1px solid var(--border)}@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}.katalog{padding:80px 0}.section-header{text-align:center;margin-bottom:48px}.section-title{font-family:var(--font-head);font-size:clamp(28px, 5vw, 42px);font-weight:800;letter-spacing:-1px;margin-bottom:10px}.section-sub{color:var(--text-muted);font-size:16px}.filter-bar{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:40px}.filter-btn{background:var(--dark-3);border:1px solid var(--border);color:var(--text-muted);font-family:var(--font-body);font-size:13px;font-weight:500;padding:8px 18px;border-radius:50px;cursor:pointer;transition:var(--transition)}.filter-btn:hover{border-color:rgb(255 255 255 / .2);color:var(--text)}.filter-btn.active{background:var(--green);border-color:var(--green);color:#000;font-weight:700}.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}.product-card{background:var(--dark-2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;display:flex;flex-direction:column;gap:16px;transition:var(--transition);position:relative;overflow:hidden}.product-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgb(0 208 132 / .06),transparent 60%);opacity:0;transition:var(--transition);pointer-events:none}.product-card:hover{border-color:rgb(0 208 132 / .3);transform:translateY(-4px);box-shadow:0 12px 40px rgb(0 0 0 / .4),0 0 0 1px rgb(0 208 132 / .1)}.product-card:hover::before{opacity:1}.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.product-icon{width:52px;height:52px;border-radius:12px;background:var(--dark-3);display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0;border:1px solid var(--border)}.card-badges{display:flex;flex-direction:column;gap:6px;align-items:flex-end}.badge{font-size:11px;font-weight:700;padding:3px 10px;border-radius:50px;white-space:nowrap;text-transform:uppercase;letter-spacing:.5px}.badge-laris{background:rgb(255 107 53 / .2);color:#FF6B35;border:1px solid rgb(255 107 53 / .3)}.badge-garansi{background:rgb(0 208 132 / .12);color:var(--green);border:1px solid rgb(0 208 132 / .25)}.badge-promo{background:rgb(91 46 255 / .2);color:#A78BFA;border:1px solid rgb(91 46 255 / .3)}.badge-habis{background:rgb(136 136 153 / .15);color:var(--text-muted);border:1px solid var(--border)}.badge-baru{background:rgb(59 130 246 / .2);color:#60A5FA;border:1px solid rgb(59 130 246 / .3)}.product-name{font-family:var(--font-head);font-size:16px;font-weight:700;line-height:1.3}.product-durasi{font-size:13px;color:var(--text-muted);margin-top:2px}.product-desc{font-size:13px;color:var(--text-muted);line-height:1.5}.card-bottom{margin-top:auto}.product-price{font-family:var(--font-head);font-size:24px;font-weight:800;color:var(--green);margin-bottom:14px}.product-price-note{font-size:12px;color:var(--text-muted);font-weight:400}.btn-order{position:relative;z-index:10;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:var(--wa-green);color:#fff;font-family:var(--font-head);font-size:14px;font-weight:700;padding:13px 20px;border-radius:10px;border:none;cursor:pointer;transition:var(--transition);text-decoration:none}.btn-order:hover{background:#1ebe5d;transform:translateY(-1px);box-shadow:0 6px 20px rgb(37 211 102 / .35)}.btn-order:active{transform:translateY(0)}.btn-order.habis{background:var(--dark-4);color:var(--text-muted);cursor:not-allowed;pointer-events:none}.skeleton-card{background:var(--dark-2);border:1px solid var(--border);border-radius:var(--radius-lg);height:280px;animation:shimmer 1.5s infinite;background:linear-gradient(90deg,var(--dark-2) 25%,var(--dark-3) 50%,var(--dark-2) 75%);background-size:200% 100%}@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}.empty-state{text-align:center;padding:60px 20px;color:var(--text-muted)}.empty-icon{font-size:48px;margin-bottom:16px}.garansi{padding:80px 0;background:var(--dark-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.garansi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}.garansi-card{background:var(--dark-3);border:1px solid var(--border);border-radius:var(--radius);padding:28px;text-align:center;transition:var(--transition)}.garansi-card:hover{border-color:rgb(0 208 132 / .25);transform:translateY(-3px)}.garansi-icon{font-size:36px;margin-bottom:14px}.garansi-card h3{font-family:var(--font-head);font-size:16px;font-weight:700;margin-bottom:8px}.garansi-card p{font-size:13px;color:var(--text-muted);line-height:1.6}.cara-order{padding:80px 0}.steps{display:flex;align-items:flex-start;justify-content:center;gap:8px;flex-wrap:wrap}.step{flex:1;min-width:180px;max-width:260px;text-align:center;padding:28px 20px;background:var(--dark-2);border:1px solid var(--border);border-radius:var(--radius)}.step-num{width:48px;height:48px;background:var(--green);color:#000;border-radius:50%;font-family:var(--font-head);font-size:20px;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}.step h3{font-family:var(--font-head);font-size:16px;font-weight:700;margin-bottom:8px}.step p{font-size:13px;color:var(--text-muted)}.step-arrow{font-size:24px;color:var(--text-muted);align-self:center;padding-top:20px}@media (max-width:640px){.step-arrow{display:none}}.footer{background:var(--dark-2);border-top:1px solid var(--border);padding:60px 0 0}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:40px;padding-bottom:48px;border-bottom:1px solid var(--border)}.footer-brand .logo{margin-bottom:14px}.footer-brand p{font-size:13px;color:var(--text-muted);line-height:1.7;margin-bottom:20px}.btn-wa-footer{display:inline-flex;align-items:center;gap:10px;background:rgb(37 211 102 / .12);border:1px solid rgb(37 211 102 / .3);color:var(--wa-green);font-size:14px;font-weight:600;padding:10px 20px;border-radius:50px;transition:var(--transition)}.btn-wa-footer:hover{background:rgb(37 211 102 / .2)}.footer-links h4,.footer-jam h4{font-family:var(--font-head);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:16px}.footer-links ul{list-style:none}.footer-links ul li{margin-bottom:10px}.footer-links ul li a{font-size:14px;color:var(--text-muted);transition:var(--transition)}.footer-links ul li a:hover{color:var(--text)}.jam-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 4px;font-size:13px;color:var(--text-muted);margin-bottom:14px}.jam-note{font-size:12px;color:var(--green);background:var(--green-glow);padding:8px 12px;border-radius:8px}.footer-bottom{padding:20px 0;text-align:center}.footer-bottom p{font-size:13px;color:var(--text-muted)}@media (max-width:768px){.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1 / -1}}@media (max-width:480px){.footer-grid{grid-template-columns:1fr}.hero-stats{gap:0;padding:16px}.stat{padding:0 12px}.stat-num{font-size:18px}}.modal-overlay{position:fixed;inset:0;background:rgb(0 0 0 / .7);backdrop-filter:blur(8px);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}.modal-box{background:var(--dark-3);border:1px solid var(--border);border-radius:var(--radius-lg);padding:36px;max-width:400px;width:100%;text-align:center;position:relative;animation:fadeUp 0.3s ease}.modal-close{position:absolute;top:16px;right:16px;background:var(--dark-4);border:1px solid var(--border);color:var(--text-muted);width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center}.modal-icon{font-size:48px;margin-bottom:16px}.modal-box h3{font-family:var(--font-head);font-size:20px;font-weight:700;margin-bottom:10px}.modal-box p{font-size:14px;color:var(--text-muted);margin-bottom:24px;line-height:1.6}.modal-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.hidden{display:none!important}.product-card{animation:fadeIn 0.4s ease both}@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}