/* Color and motion layer for the public landing only. Product and widget stay independent. */
:root{--ink:#20332e;--muted:#465a52;--coral:#b63058;--blue:#1659a0;--amber:#8b4b00;--teal:#007077}
.text-emerald{color:var(--green)}
.text-coral{color:var(--coral)}
.site-header{border-bottom-color:#d8eae1;box-shadow:0 3px 18px #173c2510}
.desktop-nav a{padding-block:8px;text-decoration-thickness:2px;text-underline-offset:7px}
.desktop-nav a:nth-child(2):hover{color:var(--coral)}
.desktop-nav a:nth-child(3):hover{color:var(--blue)}
.nav-cta:not(.btn-primary){border-color:#b6d6c5;background:#f2faf5}
.hero .eyebrow{display:inline-flex;align-items:center;gap:8px;background:#e6f5ee;border:1px solid #c3e4d1;border-radius:6px;padding:6px 10px;margin-bottom:16px;color:#005c3e}
.hero .eyebrow::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}
.hero h1 .text-coral{text-decoration:underline;text-decoration-color:#f3c9d5;text-decoration-thickness:5px;text-underline-offset:6px}
.btn{transition:transform .2s ease,background .2s ease,box-shadow .2s ease,border-color .2s ease}
.btn-primary{box-shadow:0 4px 0 #004d37}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 0 #004d37,0 8px 18px #006c4b20}
.btn-outline:hover,.btn-dark:hover,.btn-light:hover{transform:translateY(-2px)}
.hero-actions .btn-outline{color:var(--coral);border-color:#e4aabd;background:#fff8fa}
.hero-actions .btn-outline:hover{background:#fcebf1}
.benefits-band{background:#eef8f3;border-bottom-color:#d3e8de}
.benefits-grid article{--accent:var(--green);position:relative}
.benefits-grid article:nth-child(2){--accent:var(--coral)}
.benefits-grid article:nth-child(3){--accent:var(--blue)}
.benefits-grid h2,.benefits-grid .index{color:var(--accent)}
.benefits-grid h2{padding-bottom:8px}
.benefits-grid h2::after{content:'';display:block;width:36px;height:3px;background:var(--accent);margin-top:10px;border-radius:2px}
#solusi{background:#fff}
#solusi .kicker{color:var(--coral)}
.primary-grid{column-gap:40px;row-gap:0}
.primary-feature{--accent:var(--green);border-bottom-color:#d5e7de;transition:border-color .25s ease}
.primary-feature:nth-child(4n+2){--accent:var(--coral)}
.primary-feature:nth-child(4n+3){--accent:var(--blue)}
.primary-feature:nth-child(4n+4){--accent:var(--amber)}
.primary-feature .index,.primary-feature h3{color:var(--accent)}
.primary-feature img{filter:drop-shadow(0 5px 5px #173c2512);transition:transform .3s ease}
.primary-feature:hover{border-bottom-color:var(--accent)}
.primary-feature:hover img{transform:translateY(-5px) rotate(-2deg)}
.primary-feature ul{list-style:none;padding-left:0}
.primary-feature li{position:relative;padding-left:18px}
.primary-feature li::before{content:'';position:absolute;left:1px;top:.6em;width:6px;height:6px;border-radius:2px;background:var(--accent)}
.catalog-section{background:#edf5fc;border-color:#d3e3f1}
.catalog-section .kicker{color:var(--blue)}
.feature-tabs{border-color:#c9dce9}
.feature-tab{background:#fff;border-color:#bdceda;color:#345366;transition:background .18s ease,color .18s ease}
.feature-tab[data-filter=pelayanan]{--tab-accent:#006c4b}
.feature-tab[data-filter=penjualan]{--tab-accent:#8b4b00}
.feature-tab[data-filter=komunitas]{--tab-accent:#a02f61}
.feature-tab[data-filter=promosi]{--tab-accent:#1659a0}
.feature-tab[data-filter=data]{--tab-accent:#007077}
.feature-tab.is-active{background:var(--tab-accent,var(--ink));border-color:var(--tab-accent,var(--ink));color:#fff}
.feature-card{--accent:#006c4b;--tint:#f4fbf7;--edge:#c8e4d4;background:var(--tint);border-color:var(--edge);border-top:3px solid var(--accent);transition:box-shadow .22s ease,border-color .22s ease}
.feature-card[data-group=penjualan]{--accent:#8b4b00;--tint:#fffaf0;--edge:#eadcb8}
.feature-card[data-group=komunitas]{--accent:#a02f61;--tint:#fff5f9;--edge:#edcfdd}
.feature-card[data-group=promosi]{--accent:#1659a0;--tint:#f5faff;--edge:#c9dff3}
.feature-card[data-group=data]{--accent:#007077;--tint:#f1fbfb;--edge:#c3e3e3}
.feature-card h3,.feature-card .index{color:var(--accent)}
.feature-card:hover{border-color:var(--accent);box-shadow:0 8px 20px #23452e0c}
.feature-icon{transition:transform .25s ease}
.feature-card:hover .feature-icon{transform:rotate(0deg) translateY(-2px)}
.proof-section{background:#fff1f6;border-block:1px solid #f0d8e2}
.proof-section .kicker,.proof-section h2{color:#9d2854}
.proof-layout figure img{background:#fff;border-color:#e0b8c9;box-shadow:8px 8px 0 #f3dce7}
.steps-section{background:#f1f9f5}
.start-step{--step-accent:#006c4b;grid-template-columns:44px minmax(0,1fr);padding:16px 0;border-top-color:#c8e0d3}
.start-step:nth-child(3n+2){--step-accent:#1659a0}
.start-step:nth-child(3n+3){--step-accent:#a02f61}
.start-step::before{display:grid;place-items:center;width:40px;height:40px;background:var(--step-accent);color:#fff;border-radius:6px;font-size:17px;line-height:1;box-shadow:3px 3px 0 #d4e8dd}
.start-step h3{color:var(--step-accent)}
.pricing-section{background:#fff9e9;border-block:1px solid #ecdfb8}
.pricing-section .kicker,.pricing-copy h2{color:#854700}
.pricing-card{background:#fff;border-color:#d6c591;border-top:4px solid var(--green);box-shadow:8px 8px 0 #f1e5be}
.price-now{color:var(--coral)}
.price-flag{display:inline-flex;background:#e9f6ed;color:#005c3e;padding:5px 10px;border-radius:5px;font-size:14px}
.faq-section{background:#f1f6fc;border-color:#d2e0ef}
.faq-section .kicker,.faq-section h2{color:#1659a0}
.faq-list details{border-color:#ccdcec}
.faq-list details:first-child{border-color:#ccdcec}
.faq-list details[open] summary{color:#1659a0}
.faq-list summary::after{color:#1659a0}
.close-section{background:#064c3a;border-top:6px solid #e5ad39}
.close-copy h2{color:#fff}
.close-copy>.btn{color:#803e00;background:#fff1ce;border-color:#f4d58b}
.close-copy>.btn:hover{background:#ffe7ae}
.contact-card{border-color:#cfdfd5;box-shadow:6px 6px 0 #043f30}
.footer{background:#f5faf7;border-top:1px solid #d5e5dc}
@media(max-width:600px){.hero-content{padding-top:32px}.hero .eyebrow{font-size:11px;padding:5px 8px}.hero h1 .text-coral{text-decoration-thickness:3px;text-underline-offset:4px}.primary-grid{row-gap:0}.start-step{grid-template-columns:36px minmax(0,1fr)}.start-step::before{width:32px;height:32px;font-size:14px}.pricing-card,.proof-layout figure img{box-shadow:4px 4px 0 #e8dac6}.proof-layout figure img{box-shadow:4px 4px 0 #f3dce7}}
@media(prefers-reduced-motion:reduce){.btn:hover,.primary-feature:hover img,.feature-card:hover .feature-icon{transform:none}}