:root{--color-emerald-900:#064e3b;--color-emerald-800:#065f46;--color-emerald-700:#047857;--color-emerald-600:#059669;--color-emerald-500:#10b981;--color-emerald-400:#34d399;--color-gold-500:#d97706;--color-gold-400:#fbbf24;--color-white:#fff;--color-slate-50:#f8fafc;--color-slate-100:#f1f5f9;--color-slate-200:#e2e8f0;--color-slate-300:#cbd5e1;--color-slate-400:#94a3b8;--color-slate-500:#64748b;--color-slate-600:#475569;--color-slate-700:#334155;--color-slate-800:#1e293b;--color-slate-900:#0f172a;--font-sans:"Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--shadow-sm:0 2px 4px #00000005;--shadow-md:0 4px 12px #0000000d;--shadow-lg:0 12px 24px -4px #05966914, 0 4px 12px -2px #0000000a;--shadow-emerald:0 10px 25px -5px #05966966;--gradient-subtle:linear-gradient(180deg, #f8fafc00 0%, #f1f5f9 100%);--gradient-emerald:linear-gradient(135deg, var(--color-emerald-600) 0%, var(--color-emerald-800) 100%);--border-hairline:1px solid #e2e8f099;--radius-md:.5rem;--radius-lg:1rem;--radius-xl:1.5rem}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--color-slate-50);color:var(--color-slate-900);-webkit-font-smoothing:antialiased;line-height:1.6}a{color:inherit;text-decoration:none}ul{list-style:none}.container{max-width:1200px;margin:0 auto;padding:0 2rem}.btn{border-radius:var(--radius-md);cursor:pointer;border:none;justify-content:center;align-items:center;padding:.75rem 1.5rem;font-size:1rem;font-weight:600;transition:all .2s;display:inline-flex}.btn-primary{background:var(--gradient-emerald);color:var(--color-white);box-shadow:var(--shadow-emerald)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 15px 20px -3px #0596694d}.btn-outline{color:var(--color-emerald-700);border:1px solid var(--color-emerald-600);background:0 0}.btn-outline:hover{background:#0596690d}.btn-link{color:var(--color-emerald-600);background:0 0;padding:0}.btn-link:hover{color:var(--color-emerald-800);text-decoration:underline}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.animate-pulse{animation:2s cubic-bezier(.4,0,.6,1) infinite pulse}@keyframes float{0%,to{transform:translateY(0)scale(1)}50%{transform:translateY(-20px)scale(1.05)}}@keyframes blob-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.text-emerald{color:var(--color-emerald-600)}.text-gold{color:var(--color-gold-500)}.text-slate{color:var(--color-slate-800)}.text-center{text-align:center}.mt-8{margin-top:2rem}.mb-8{margin-bottom:2rem}.landing-layout{flex-direction:column;min-height:100vh;display:flex}.navbar{z-index:50;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:var(--border-hairline);background:#fffc;position:sticky;top:0}.nav-content{justify-content:space-between;align-items:center;height:4rem;display:flex}.logo{color:var(--color-emerald-700);letter-spacing:-.02em;font-size:1.25rem;font-weight:700}.nav-links,.nav-actions{display:none}.mobile-menu-btn{color:var(--color-slate-800);cursor:pointer;background:0 0;border:none;display:block}@media (width>=768px){.nav-links,.nav-actions{gap:2rem;display:flex}.nav-actions{gap:1rem}.mobile-menu-btn{display:none}}.nav-links a{color:var(--color-slate-800);font-weight:500;transition:color .2s}.nav-links a:hover{color:var(--color-emerald-600)}.mobile-menu-overlay{background:var(--color-white);border-bottom:var(--border-hairline);width:100%;box-shadow:var(--shadow-md);z-index:40;padding:1.5rem 2rem;position:absolute;top:100%;left:0}.mobile-nav-links{flex-direction:column;gap:1.5rem;display:flex}.mobile-nav-links a{color:var(--color-slate-900);font-size:1.125rem;font-weight:600}.mobile-divider{border:none;border-top:var(--border-hairline);margin:.5rem 0}.modal-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:100;background:#0f172a66;justify-content:center;align-items:center;width:100%;height:100%;padding:1rem;display:flex;position:fixed;top:0;left:0}.modal-content{background:var(--color-white);border-radius:var(--radius-xl);width:100%;max-width:400px;box-shadow:var(--shadow-lg);padding:2.5rem;position:relative}.modal-close{color:var(--color-slate-500);cursor:pointer;background:0 0;border:none;position:absolute;top:1rem;right:1rem}.modal-content h2{color:var(--color-slate-900);margin-bottom:.5rem;font-size:1.5rem}.modal-content p{color:var(--color-slate-800);margin-bottom:2rem;font-size:.9rem}.demo-form{flex-direction:column;gap:1rem;display:flex}.demo-form input{border:var(--border-hairline);border-radius:var(--radius-md);padding:.75rem 1rem;font-family:inherit;font-size:1rem}.demo-form input:focus{border-color:var(--color-emerald-500);outline:none;box-shadow:0 0 0 2px #10b98133}.hero{padding:4rem 0;position:relative;overflow:hidden}.hero-blobs{pointer-events:none;z-index:0;width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden}.blob-1,.blob-2,.blob-3{filter:blur(80px);opacity:.5;border-radius:50%;animation:10s ease-in-out infinite alternate float,20s linear infinite blob-spin;position:absolute}.blob-1{background:#10b98133;width:500px;height:500px;animation-delay:0s;top:-10%;left:-10%}.blob-2{background:#34d39926;width:600px;height:600px;animation-delay:-5s;bottom:-20%;right:-10%}.blob-3{background:#0478571a;width:400px;height:400px;animation-delay:-2s;top:40%;left:40%}.hero:before{content:"";z-index:-1;background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23059669' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");width:100%;height:100%;position:absolute;top:0;left:0}.hero-content{align-items:center;gap:3rem;display:grid}@media (width>=992px){.hero{padding:6rem 0}.hero-content{grid-template-columns:1.1fr .9fr;gap:4rem}}.badge-premium{color:var(--color-gold-500);background:#d977061a;border-radius:999px;margin-bottom:1.5rem;padding:.25rem 1rem;font-size:.875rem;font-weight:600;display:inline-block}.hero-title{color:var(--color-slate-900);letter-spacing:-.03em;margin-bottom:1.5rem;font-size:2.25rem;font-weight:800;line-height:1.2}@media (width>=768px){.hero-title{font-size:3.5rem;line-height:1.1}}.hero-subtitle{color:var(--color-slate-800);max-width:500px;margin-bottom:2.5rem;font-size:1.125rem}.hero-cta{flex-wrap:wrap;align-items:center;gap:1.5rem;margin-bottom:2rem;display:flex}.trust-badges{color:var(--color-slate-800);flex-wrap:wrap;gap:1.5rem;font-size:.875rem;font-weight:500;display:flex}.trust-badges span{color:var(--color-emerald-700);align-items:center;gap:.5rem;display:flex}.hero-visual{justify-content:center;align-items:center;display:flex;position:relative}.hero-dashboard-img{border-radius:var(--radius-xl);width:100%;max-width:600px;box-shadow:var(--shadow-lg);border:var(--border-hairline);z-index:1}.hero-mobile-img{border-radius:var(--radius-lg);width:200px;box-shadow:var(--shadow-lg);border:var(--border-hairline);z-index:2;position:absolute;bottom:-20px;right:-20px}@media (width<=768px){.hero-mobile-img{width:150px;bottom:-10px;right:0}}.trust-bar{background:var(--color-white);border-top:var(--border-hairline);border-bottom:var(--border-hairline);text-align:center;padding:4rem 0}.kpi-counter{margin-bottom:2rem}.kpi-number{color:var(--color-emerald-600);margin-bottom:.5rem;font-size:3rem;font-weight:800;line-height:1}.kpi-label{color:var(--color-slate-800);text-transform:uppercase;letter-spacing:.05em;font-size:1rem;font-weight:600}.trust-label{color:var(--color-slate-800);margin-bottom:1.5rem}.trust-logos{opacity:.6;filter:grayscale();flex-wrap:wrap;justify-content:center;gap:3rem;transition:opacity .3s;display:flex}.trust-logos:hover{opacity:1}.logo-placeholder{color:var(--color-slate-900);font-size:1.25rem;font-weight:700}.workflow-section{background:var(--gradient-subtle);padding:6rem 0}.section-title{color:var(--color-slate-900);letter-spacing:-.02em;margin-bottom:1rem;font-size:2.25rem;font-weight:800}.section-subtitle{color:var(--color-slate-800);max-width:700px;margin-bottom:4rem;margin-left:auto;margin-right:auto;font-size:1.125rem}.timeline-container{flex-direction:column;gap:2rem;display:flex;position:relative}.timeline-container:before{content:"";background-image:linear-gradient(to right, var(--color-emerald-300) 50%, transparent 50%);z-index:0;background-size:20px 2px;width:100%;height:2px;display:none;position:absolute;top:50%;left:0;transform:translateY(-50%)}@media (width>=768px){.timeline-container{flex-direction:row;justify-content:space-between}.timeline-container:before{display:block}}.timeline-container>div{z-index:1;flex:1;display:flex}.timeline-step{text-align:center;background:var(--color-white);border-radius:var(--radius-lg);border:var(--border-hairline);box-shadow:var(--shadow-sm);flex-direction:column;flex:1;align-items:center;width:100%;height:100%;padding:2rem;transition:transform .3s,box-shadow .3s;display:flex;position:relative}.timeline-step:hover{box-shadow:var(--shadow-md);transform:translateY(-5px)}.timeline-icon{background:var(--color-emerald-50);width:3rem;height:3rem;color:var(--color-emerald-600);border-radius:50%;justify-content:center;align-items:center;margin-bottom:1.5rem;display:flex}.timeline-content h3{color:var(--color-slate-900);margin-bottom:.5rem;font-size:1.125rem;font-weight:700}.timeline-content p{color:var(--color-slate-800);font-size:.95rem}.features-section{background:var(--color-slate-900);color:var(--color-white);padding:6rem 0;position:relative;overflow:hidden}.features-section .section-title{color:var(--color-white)}.bento-grid{z-index:2;grid-template-columns:1fr;gap:1.5rem;margin-top:3rem;display:grid;position:relative}@media (width>=768px){.bento-grid{grid-template-columns:repeat(3,1fr)}.col-span-2{grid-column:span 2}}.bento-wrapper{display:flex}.bento-card{-webkit-backdrop-filter:blur(20px);border-radius:var(--radius-xl);background:#ffffff08;border:1px solid #ffffff1a;width:100%;height:100%;padding:2.5rem;transition:transform .3s,border-color .3s,box-shadow .3s;position:relative;overflow:hidden;box-shadow:0 4px 30px #0000001a}.bento-card:hover{border-color:#10b9814d;transform:translateY(-3px);box-shadow:0 10px 40px #10b9811a}.card-bg-gradient{pointer-events:none;background:radial-gradient(circle at 100% 0,#10b98126 0%,#0000 70%);position:absolute;inset:0}.feature-icon{color:var(--color-emerald-400);width:2rem;height:2rem;margin-bottom:1.5rem}.bento-card h3{color:var(--color-white);margin-bottom:.75rem;font-size:1.25rem;font-weight:700}.bento-card p{color:var(--color-slate-300)}.tco-section{background:var(--color-slate-50);padding:6rem 0}.tco-calculator{background:var(--color-white);border-radius:var(--radius-xl);border:var(--border-hairline);box-shadow:var(--shadow-md);margin-top:3rem;padding:3rem}.tco-controls{gap:2rem;margin-bottom:3rem;display:grid}@media (width>=768px){.tco-controls{grid-template-columns:1fr 1fr}}.control-group label{color:var(--color-slate-800);margin-bottom:1rem;font-size:1.125rem;display:block}.control-group input[type=range]{width:100%;accent-color:var(--color-emerald-600)}.tco-results{gap:1.5rem;margin-bottom:3rem;display:grid}@media (width>=768px){.tco-results{grid-template-columns:1fr 1fr}}.result-card{border-radius:var(--radius-lg);border:var(--border-hairline);padding:2rem;position:relative;overflow:hidden}.result-card.traditional{background:var(--color-slate-50)}.result-card.koneksi-santri{background:var(--gradient-emerald);color:var(--color-white);box-shadow:var(--shadow-emerald);border:none}.result-card h4{color:inherit;margin-bottom:.5rem;font-size:1.125rem}.result-card.traditional h4{color:var(--color-slate-800)}.result-card .price{margin-bottom:1.5rem;font-size:2rem;font-weight:800}.tco-details{opacity:.9;font-size:.95rem}.tco-details li{margin-bottom:.5rem;padding-left:1.5rem;position:relative}.tco-details li:before{content:"✓";font-weight:700;position:absolute;left:0}.badge-saving{background:var(--color-gold-400);color:var(--color-slate-900);border-radius:999px;padding:.25rem .75rem;font-size:.8rem;font-weight:700;position:absolute;top:1rem;right:1rem}.tco-summary{text-align:center;border-top:var(--border-hairline);padding-top:2rem}.tco-summary h3{color:var(--color-slate-900);margin-bottom:.5rem;font-size:1.5rem}.testimonial-section{background:var(--color-emerald-50);text-align:center;padding:6rem 0}.testimonial-card{background:var(--color-white);border-radius:var(--radius-xl);max-width:800px;box-shadow:var(--shadow-lg);margin:0 auto;padding:3rem;position:relative}.testimonial-quote{color:var(--color-slate-900);margin-bottom:2rem;font-size:1.5rem;font-style:italic;line-height:1.6}.testimonial-author{justify-content:center;align-items:center;gap:1rem;display:flex}.author-avatar{background:var(--color-emerald-200);width:60px;height:60px;color:var(--color-emerald-800);border-radius:50%;justify-content:center;align-items:center;font-size:1.5rem;font-weight:700;display:flex}.author-info h4{color:var(--color-slate-900);margin-bottom:.25rem;font-size:1.125rem}.author-info p{color:var(--color-slate-600);font-size:.875rem}.faq-section{background:var(--color-white);padding:6rem 0}.faq-container{flex-direction:column;gap:1rem;max-width:800px;margin:0 auto;display:flex}.faq-item{border:var(--border-hairline);border-radius:var(--radius-lg);background:var(--color-slate-50);cursor:pointer;transition:all .2s;overflow:hidden}.faq-item:hover{border-color:var(--color-emerald-300)}.faq-item.open{background:var(--color-white);border-color:var(--color-emerald-500);box-shadow:var(--shadow-md)}.faq-question{color:var(--color-slate-900);justify-content:space-between;align-items:center;padding:1.5rem;font-weight:700;display:flex}.faq-question h4{margin:0;font-size:1.125rem}.faq-question span{color:var(--color-emerald-600);font-size:1.5rem;font-weight:300}.faq-answer{color:var(--color-slate-700);padding:0 1.5rem 1.5rem;line-height:1.6}.final-cta{background:var(--gradient-emerald);color:var(--color-white);text-align:center;padding:6rem 0}.final-cta h2{color:var(--color-white);margin-bottom:1.5rem;font-size:2.5rem;font-weight:800}.final-cta p{opacity:.9;max-width:600px;margin-bottom:2.5rem;margin-left:auto;margin-right:auto;font-size:1.125rem}.final-cta .btn-primary{background:var(--color-white);color:var(--color-emerald-700)}.final-cta .btn-primary:hover{background:var(--color-slate-50)}.footer{background:var(--color-slate-900);color:var(--color-slate-300);padding:4rem 0}.footer-content{flex-direction:column;gap:3rem;display:flex}@media (width>=768px){.footer-content{flex-direction:row;justify-content:space-between}}.footer-brand .logo{color:var(--color-white);margin-bottom:1rem}.footer-links{gap:4rem;display:flex}.link-group h4{color:var(--color-white);margin-bottom:1rem;font-weight:600}.link-group a{margin-bottom:.5rem;transition:color .2s;display:block}.link-group a:hover{color:var(--color-emerald-400)}.hidden-mobile{display:none}@media (width>=768px){.hidden-mobile{gap:1.5rem;display:flex}}.hero-inline-form{flex-direction:column;gap:1rem;margin-top:2rem;margin-bottom:1rem;display:flex}@media (width>=768px){.hero-inline-form{flex-direction:row;max-width:600px}.hero-inline-form input{flex:1}.hero-inline-form button{flex-shrink:0}}.hero-inline-form input{border:var(--border-hairline);border-radius:var(--radius-md);padding:1rem;font-family:inherit;font-size:1rem}.hero-inline-form input:focus{border-color:var(--color-emerald-500);outline:none;box-shadow:0 0 0 2px #10b98133}.reassurance-text{color:var(--color-slate-500);font-size:.85rem}.problem-section{background:var(--color-slate-50);color:var(--color-slate-900)}.problem-section .section-title{color:var(--color-slate-900)}.problem-section .bento-card{background:var(--color-white);border:var(--border-hairline);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:var(--shadow-sm)}.problem-section .bento-card:hover{border-color:var(--color-emerald-300);box-shadow:var(--shadow-md)}.problem-section .bento-card h3{color:var(--color-slate-900)}.problem-section .bento-card p{color:var(--color-slate-700)}.product-feature-section{background:var(--color-white);padding:6rem 0}.feature-split{align-items:center;gap:4rem;display:grid}@media (width>=992px){.feature-split{grid-template-columns:1fr 1fr}}.feature-image-container{justify-content:center;width:100%;display:flex}.feature-img{border-radius:var(--radius-xl);max-width:100%;box-shadow:var(--shadow-lg);border:var(--border-hairline)}.feature-checklist{flex-direction:column;gap:1.5rem;display:flex}.benefit-list{flex-direction:column;gap:1.5rem;margin-top:2rem;display:flex}.benefit-list li{color:var(--color-slate-800);align-items:flex-start;gap:1rem;font-size:1.125rem;display:flex}.check-icon{color:var(--color-emerald-600);flex-shrink:0;margin-top:.1rem}.footer-content-simple{flex-direction:column;align-items:center;gap:2rem;display:flex}@media (width>=768px){.footer-content-simple{flex-direction:row;justify-content:space-between}}.footer-links-inline{align-items:center;gap:1rem;font-size:.95rem;display:flex}.footer-links-inline a:hover{color:var(--color-emerald-400)}.footer-links-inline span{color:var(--color-slate-600)}