*{margin:0;padding:0;box-sizing:border-box}
:root{--s:8px;--m:12px;--l:20px;--xl:52px;--navh:52px;--bg:#f7f5f0;--card:#ffffff;--line:#e8e4dd;--line2:#f0ece5;--txt:#2a2623;--mut:#8a8478;--mut2:#b8b0a3;--x:#1d9bf0;--ig:#e1306c;--tt:#fe2c55;--ok:#2a9d8f;--warn:#e9a319;--ink:#22201d;--pink:#ff5da2}
html{scroll-behavior:smooth}
body{font-family:'Space Grotesk',system-ui,sans-serif;font-size:14px;background:var(--bg);color:var(--txt);overflow-x:hidden;background-image:radial-gradient(#0000000a 1px,transparent 1px);background-size:24px 24px}
::selection{background:#ffd66b;color:var(--ink)}
a{text-decoration:none;color:inherit}
[hidden]{display:none!important}
body[data-view="stok"] .home-only{display:none}
.nav{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.nav-in{max-width:1180px;margin:0 auto;height:var(--navh);padding:0 16px;display:flex;align-items:center;gap:var(--l)}
.brand{display:flex;align-items:center;gap:8px;flex:none}
.brand-mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#ff9a5a,#ff5da2,#7c4dff);display:grid;place-items:center;color:#fff;font-weight:800;font-size:.82rem;box-shadow:0 2px 6px #ff5da233}
.brand-name{font-weight:700;font-size:.88rem;letter-spacing:.5px;color:var(--ink)}
.brand-name b{color:var(--pink)}
.links{display:flex;gap:var(--l);margin-left:auto}
.links a{font-size:.72rem;font-weight:600;color:var(--mut);transition:color .2s}
.links a:hover{color:var(--ink)}
.nav-cta{border:none;background:var(--ink);color:#fff;font:700 .7rem 'Space Grotesk';padding:8px 16px;border-radius:999px;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 12px #00000020}
.links+.nav-cta{margin-left:0}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 8px 18px #00000028}
.btn{display:inline-flex;align-items:center;gap:8px;border:none;border-radius:999px;padding:12px 22px;font:700 .78rem 'Space Grotesk';cursor:pointer;transition:transform .2s,box-shadow .2s}
.btn-p{background:var(--ink);color:#fff;box-shadow:0 6px 16px #00000026}
.btn-p:hover{transform:translateY(-3px);box-shadow:0 12px 24px #00000030}
.btn-s{background:var(--card);color:var(--ink);border:1px solid var(--line);box-shadow:0 3px 10px #0000000d}
.btn-s:hover{transform:translateY(-3px);border-color:#d4cfc6}
.btn-w{background:#fff;color:var(--ink);box-shadow:0 8px 20px #00000026}
.btn-w:hover{transform:translateY(-3px) scale(1.02)}
.marquee{overflow:hidden;border-block:1px solid var(--line);background:var(--card);padding:9px 0;margin-top:var(--l)}
.track{display:flex;gap:10px;width:max-content;animation:scroll 26s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.track span{font-size:.66rem;font-weight:700;color:var(--mut);background:var(--bg);border:1px solid var(--line);padding:5px 14px;border-radius:999px;white-space:nowrap}
@keyframes scroll{to{transform:translateX(-50%)}}
.sec{max-width:1180px;margin:0 auto;padding:var(--xl) 16px 0}
.sec-head{text-align:center;max-width:560px;margin:0 auto var(--l)}
.sec-head .eb{font-size:.58rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--pink)}
.sec-head h2{font-size:clamp(1.3rem,3.5vw,1.9rem);font-weight:700;letter-spacing:-.5px;color:var(--ink);margin:6px 0 8px}
.sec-head p{font-size:.76rem;color:var(--mut);line-height:1.6}
footer{text-align:center;color:var(--mut);font-size:.64rem;padding:var(--xl) 16px 36px}
footer b{color:var(--ink)}
#toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%,20px);opacity:0;background:var(--ink);color:#fff;font-size:.68rem;font-weight:700;padding:9px 16px;border-radius:999px;z-index:60;transition:.3s cubic-bezier(.2,1.3,.4,1);box-shadow:0 10px 26px #00000030}
#toast.on{transform:translate(-50%,0);opacity:1}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,1,.3,1);transition-delay:var(--d,0s)}
.reveal.on{opacity:1;transform:none}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.7);opacity:.35}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}